.box {
max-width: 90%;
margin: 0 auto;
}
.flex {
display: flex;
}
/**************************** メインイメージ ******/
#mainimage {
    background: url("../image/mainimage.jpg") center /cover no-repeat;
    padding: 2vw 0;
    margin-bottom: 2rem;
    overflow: hidden;
    }
    #mainimage .body {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 1rem;
    justify-content: center;
    margin: 0 3%;
    width: 94%;
    }
    #mainimage .body h1 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        grid-gap: 1rem;
        width: 100%;
    }
    #mainimage .body h1 img {
        width: clamp(3.125rem, 1.278rem + 5.68vw, 6.25rem);/*50~100px(520~1400px)*/
        min-width: unset;
    }
    #mainimage .body h1 .tit {
        font-family: "TsukuARdGothicStd-E", sans-serif;
        font-size: clamp(1.5rem, 0.835rem + 2.05vw, 2.625rem);/*24~42px(520~1400px)*/
        color: #006837;
    }
    #mainimage .body .top_text_area {
        width: 100%;
        text-align: center;
    }
    #mainimage .body .top_text_area * {
        font-family: "Shippori Mincho", serif;
        font-weight: 400;
        font-style: normal;
    }
    #mainimage .body .top_text_area div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: baseline;
        grid-gap: 0 1rem;
    }
    #mainimage .body .top_text_area .middle {
        font-size: clamp(1.25rem, 0.659rem + 1.82vw, 2.25rem);/*20~36px(520~1400px)*/
    }
    #mainimage .body .top_text_area .middle.blue {
        color: blue;
    }
    #mainimage .body .top_text_area .middle.red {
        color: red;
    }
    #mainimage .body .top_text_area .small {
        font-size: clamp(1rem, 0.705rem + 0.91vw, 1.5rem);/*20~36px(520~1400px)*/
    }
    #mainimage .body .top_text_area .strong {
        font-size: clamp(1.375rem, 0.784rem + 1.82vw, 2.375rem);/*22~38px(520~1400px)*/
        font-weight: bold;
        text-shadow: 0 0 1px #006837, 0 0 1px #006837, 0 0 1px #006837,0 0 1px #006837,0 0 1px #006837,0 0 1px #006837,0 0 1px #006837,0 0 1px #006837, 0 0 1px #006837;
        color: #fff;
    }
    #mainimage .body address {
        width: 100%;
    }
    #mainimage .body address .tel_area {
        margin-bottom: 1rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: baseline;
        grid-gap: .5rem 1rem;
    }
    #mainimage .body address .tel_area div {
       min-width: 240px;
    }
    #mainimage .body address .tel_area div a {
        display: flex;
        align-items: baseline;
        justify-content: center;
        grid-gap: .25rem;
    }
    #mainimage .body address .tel_area div a img {
        max-width: 24px;
        max-height: 24px;
        min-width: unset;
    }
    #mainimage .body address .tel_area div a .txt {
        font-size: clamp(1.5rem, 1.057rem + 1.36vw, 2.25rem);/*24~36px(520~1400px)*/
        white-space: nowrap;
        line-height: 1;
        font-family: "TsukuARdGothicStd-E", sans-serif;
        font-weight: bold;
        color: red;
        text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff, 0 0 1px #fff;
    }
    #mainimage .body address .adress span {
        display: inline-block;
        font-size: clamp(1rem, 0.705rem + 0.91vw, 1.5rem);/*16~24px(520~1400px)*/
    }
    #mainimage .body .image_area {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 1rem;
        border: 2px solid #006837;
        background-color: #fff;
    }
    #mainimage .body .image_area figure {
        width: calc(calc(100% / 3) - 2px - 1rem);
        margin: 0;
        padding: .5rem .5rem 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    #mainimage .body .image_area figure:not(:nth-of-type(n + 7)) {
        border-bottom: 2px solid #006837;
    }
    #mainimage .body .image_area figure:nth-of-type(1),#mainimage .body .image_area figure:nth-of-type(2),#mainimage .body .image_area figure:nth-of-type(4),#mainimage .body .image_area figure:nth-of-type(5),#mainimage .body .image_area figure:nth-of-type(7) {
        border-right: 2px solid #006837;
    }
    #mainimage .body .image_area figure img {
        object-fit: contain;
        max-height: 100px;
    }
    #mainimage .body .tabel_area {
        width: 100%;
        background-color: #fff;
        border: 2px solid #006837;
        border-bottom: unset;
        margin-bottom: 1rem;
    }
    #mainimage .body .tabel_area dl {
        display: flex;
        flex-wrap: wrap;
    }
    #mainimage .body .tabel_area dl .harf_row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 2px solid #006837;
        width: 100%;
    }
    #mainimage .body .tabel_area dl .harf_row dt {
        padding: .5rem 1rem;
        font-size: clamp(1rem, 0.926rem + 0.23vw, 1.125rem);/*16~18px(520~1400px)*/
        width: 15rem;
        text-align: left;
        border-right: 1px solid #006837;
    }
    #mainimage .body .tabel_area dl .harf_row dd {
        padding: .5rem 1rem;
        font-size: clamp(1.125rem, 1.051rem + 0.23vw, 1.25rem);/*18~20px(520~1400px)*/
        width: 15rem;
        text-align: left;
        font-style: italic;
        font-weight: bold;
        text-align: center;
    }
    #mainimage .body .syukatsu {
        margin-bottom: 1.5rem;
    }
    #mainimage .body .syukatsu .row {
        margin-bottom: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        grid-gap: 1rem;
    }
    #mainimage .body .syukatsu figure {
        width: 30%;
        border-radius: 100%;
        background-color: #fff;
        border: solid 2px #89BD89;
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #mainimage .body .syukatsu figure img {
        object-fit: contain;
        max-height: 150px;
    }
    #mainimage .body ul.aicon_ul {
        margin-bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        grid-gap: .5rem 1.5rem;
        width: 100%;
        order: 3;
    }
    #mainimage .body ul.aicon_ul li {
        width: calc(calc(100% / 3) - 2rem - 4px - 1rem);
        border-radius: 100%;
        border: solid 2px #89BD89;
        background: #fff;
        padding: 1rem;
        text-align: center;
        font-family: "TsukuARdGothicStd-E", sans-serif;
        font-size: clamp(1.125rem, 0.719rem + 1.25vw, 1.5rem);/*18~24px(520~1000px)*/
        white-space: nowrap;
        color: #006837;
    }
    #mainimage .body .syukatsu .catch {
        font-family: "TsukuARdGothicStd-E", sans-serif;
        font-size: clamp(1.125rem, 0.756rem + 1.14vw, 1.75rem);/*18~28px(520~1400px)*/
        color: #006837;
        text-align: center;
        line-height: 1.25;
    }
@media all and (max-width: 620px) {
    #mainimage .body .image_area figure {
        width: calc(50% - 2px - 1rem);
        border-right: unset!important;
    }
    #mainimage .body .tabel_area dl .harf_row dt,#mainimage .body .tabel_area dl .harf_row dd{
        width: 100%;
    }
    #mainimage .body .tabel_area dl .harf_row dt{
        border-right: unset;
        border-bottom: 1px dotted #89BD89;
        text-align: center;
    }
    #mainimage .body .image_area figure:nth-of-type(odd) {
        border-right: 2px solid #006837!important;
    }
    #mainimage .body ul.aicon_ul li {
        width: calc(50% - 2rem - 4px - 1rem);
    }
}
/**************************** コンテンツ背景 ******/
#top > div {
background: #fff;
padding: 30px 0;
}
#top > div:nth-child(even) {
background: #FEFBF5;
}
#top .title {
width: 100%;
height: 100px;
background-image: url("../image/title_bg.png");
background-size: contain;
background-position: center;
z-index: -100;
}
/**************************** コンテンツ見出し ******/
#top h2 {
position: relative;
font-family: "TsukuARdGothicStd-E", sans-serif;
font-size: 24px;
color: #006837;
padding-top: 40px;
margin-bottom: 30px;
text-align: center;
line-height: 1em;
}
#top h2::after {
position: absolute;
content: '';
top: 10px;
left: 50%;
transform: translateX(-50%);
background-size: cover;
background-repeat: no-repeat;
width: 30px;
height: 30px;
}
#top h2.gaiyou::after {
background-image: url("../image/gaiyou.png");
}
#top h2.nagare::after {
background-image: url("../image/nagare.png");
}
#top h2.shiharai::after {
background-image: url("../image/shiharai.png");
}
#top h2.contact::after {
background-image: url("../image/contact.png");
}
#top h3 {
font-family: "TsukuARdGothicStd-E", sans-serif;
font-size: 18px;
color: #006837;
padding-top: 10px;
margin-bottom: 10px;
text-align: center;
}
/**************************** テーブル ******/
table {
border-collapse: collapse;
border: solid 2px #fff;
margin: 0 auto 20px;
text-align: center;
}
.scroll-table {
overflow: auto;
white-space: nowrap;
}
table th, table td {
border: solid 1px #fff;
}
table th {
background: #89BD89;
color: #fff;
padding: 0.5em;
}
table td {
background: #E6F7E6;
padding: 0.5em;
}
table tr:nth-child(even) td {
background: #F0FCF0;
}
/**************************** 会社概要 ******/
#gaiyou {
}
#gaiyou .flex {
display: block;
}
#gaiyou .flex .left ul {
display: flex;
justify-content: center;
padding: 30px 0;
}
#gaiyou .flex .left ul li:not(:last-child) {
padding-right: 20px;
}
#gaiyou .flex .right dl {
display: flex;
flex-wrap: wrap;
text-align: left;
max-width: 800px;
}
#gaiyou .flex .right dl dt {
float: left;
width: 25%;
padding: 1em 0;
border-bottom: solid 1px #89BD89;
}
#gaiyou .flex .right dl dd {
width: 75%;
padding: 1em 0;
border-bottom: solid 1px #89BD89;
}
#gaiyou .gaiyou_box {
border: solid 1px #89BD89;
border-radius: 10px;
padding: 10px 40px 40px;
}
#gaiyou .gaiyou_box ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#gaiyou .gaiyou_box ul li {
width: 23%;
}
#gaiyou .gaiyou_box ul li p {
padding-top: 10px;
text-align: center;
font-size: 14px;
}
@media screen and (max-width: 540px) {
#gaiyou .flex .right dl {
display: flex;
flex-wrap: wrap;
text-align: left;
}
#gaiyou .flex .right dl dt {
width: 100%;
padding: 0.5em 1em;
border-bottom: none;
background: #E6F7E6;
}
#gaiyou .flex .right dl dd {
width: 100%;
padding: 1em;
border-bottom: none;
}
#gaiyou .gaiyou_box ul li {
width: 48%;
}
}
/**************************** ご依頼の流れ ******/
#nagare ul.sagyou {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 10px 0 0;
}
#nagare ul.sagyou li {
border: solid 1px #89BD89;
border-radius: 10px;
background: #fff;
padding: 0px 20px 20px;
width: 340px;
margin: 0 auto 20px;
text-align: center;
}
#nagare ul.aicon_ul {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    grid-gap: .5rem 1.5rem;
}
#nagare ul.aicon_ul li {
    width: calc(calc(100% / 3) - 2rem - 4px - 1rem);
    border-radius: 100%;
    border: solid 2px #89BD89;
    background: #fff;
    padding: .5rem;
    text-align: center;
    font-family: "TsukuARdGothicStd-E", sans-serif;
    font-size: 18px;
    color: #006837;
    min-width: 160px;
}
#nagare ul.flow li {
position: relative;
border-radius: 10px;
background: #E6F7E6;
margin: 80px auto 20px;
padding: 10px 60px 30px;
z-index: 10;
text-align: center;
}
#nagare ul.flow li p.step {
position: absolute;
display: inline-block;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: #E6F7E6;
z-index: -10;
font-family: "TsukuARdGothicStd-E", sans-serif;
font-size: 16px;
color: #006837;
line-height: 60px;
text-align: center;
}
#nagare ul.flow li p.step b {
font-size: 28px;
}
#nagare ul.flow li:nth-child(1)::after {
position: absolute;
content: '';
bottom: 0;
right: 0;
background-image: url("../image/nagare_image1.png");
background-size: cover;
background-repeat: no-repeat;
width: 60px;
height: 68px;
}
#nagare ul.flow li:nth-child(2)::after {
position: absolute;
content: '';
bottom: 0;
left: 0;
background-image: url("../image/nagare_image2.png");
background-size: cover;
background-repeat: no-repeat;
width: 50px;
height: 64px;
}
#nagare ul.flow li:nth-child(3)::after {
position: absolute;
content: '';
bottom: 0;
right: 0;
background-image: url("../image/nagare_image4.png");
background-size: auto 110%;
background-position: right top;
background-repeat: no-repeat;
width: 60px;
height: 65px;
}
#nagare ul.flow li:nth-child(4)::after {
position: absolute;
content: '';
bottom: 0;
left: 0;
background-image: url("../image/nagare_image3.png");
background-size: cover;
background-repeat: no-repeat;
width: 65px;
height: 65px;
}
#nagare ul.flow li:nth-child(5)::after {
position: absolute;
content: '';
bottom: 0;
right: 0;
background-image: url("../image/nagare_image5.png");
background-size: cover;
background-repeat: no-repeat;
width: 65px;
height: 65px;
}
/**************************** 終活相談 ******/
#consultation .box p {
    font-size: 14px;
}
#consultation .box .border_box {
    padding: .5rem .5rem 6rem;
    border: #E6F7E6 5px solid;
    border-radius: 10px;
    background: #FEFBF5;
    margin: 1rem 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
#consultation .box .border_box::before,#consultation .box .border_box::after {
    content: "";
    width: 20%;
    display: inline-block;
    aspect-ratio: 500/750;
    position: absolute;
    bottom: 0;
}
#consultation .box .border_box::before {
    background: url(/image/cons01.png) top center/100% no-repeat;
    left: 2%;
}
#consultation .box .border_box::after {
    background: url(/image/cons02.png) top center/100% no-repeat;
    right: 2%;
}
#consultation .box .border_box .br {
    font-size: 17px;
    display: block;
    text-align: center;
    font-family: "TsukuARdGothicStd-E", sans-serif;
}
#consultation .box .border_box .br.mb {
    margin-bottom: 1em;
    color: #006837;
}
#consultation .box .border_box .br.blue {
    color: #89BD89;
}
#consultation .box ul {
    display: flex;
    flex-wrap: wrap;
    grid-gap: .5rem;
    background-color: #E6F7E6;
    padding: .5rem;
}
#consultation .box ul>li {
    width: 100%;
    border-radius: 10px;
    background: #fff;
    padding: .5rem;
    font-size: 16px;
    font-family: "TsukuARdGothicStd-E", sans-serif;
    color: #006837;
}
#consultation .box ul>li.full ol li {
    font-size: 14px;
    text-align: left;
}

/**************************** 生前整理・遺品整理 ******/
#seiri table.seiri_table {
width: 400px;
}
/**************************** 特殊清掃 ******/
#tokusyu .flex {
display: block;
margin: 0 auto;
}
#tokusyu .flex .left,
#tokusyu .flex .right {
margin: 0 auto;
}
#tokusyu table.tokusyu_table1 {
width: 400px;
}
#tokusyu table.tokusyu_table2 {
width: 500px;
}
#tokusyu table.tokusyu_table3 {
width: 800px;
}
#tokusyu table.tokusyu_table3 .left {
width: 150px;
}
#tokusyu table.tokusyu_table3 .right {
text-align: left;
padding-left: 20px;
}
#tokusyu p {
padding-bottom: 20px;
}


#tokusyu .flow_box {
    padding: 1rem;
    background-color: #FEFBF5;
    }
    #tokusyu .flow_box ul>li {
        margin-bottom: 2rem;
        padding: 1rem;
        background-color: #E6F7E6;
        position: relative;
    }
    #tokusyu .flow_box ul>li:not(:nth-of-type(n + 5))::after {
        content: "";
        display: inline-block;
        width: 5rem;
        height: 1.5rem;
        background-color: #E6F7E6;
        clip-path: polygon(50% 100%, 0 0, 100% 0);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%,100%);
    }
    #tokusyu .flow_box ul li span {
        display: block;
    }
    #tokusyu .flow_box ul li span.tit {
        font-size: 16px;
        font-family: "TsukuARdGothicStd-E", sans-serif;
        color: #006837;
        margin-bottom: .25rem;
        line-height: 1.5;
    }
    #tokusyu .flow_box ul li span.tit.obi {
        color: #fff;
        background-color: #006837;
        padding: .25rem 1rem;
    }
    #tokusyu .flow_box ul li span.small {
        text-align: left;
        padding: 0 1rem;
        font-size: 14px;
    }
    #tokusyu .flow_box ul>li>ol li {
        margin-bottom: .5rem;
        padding-bottom: .5rem;
        border-bottom: 1px solid #fff;
    }
/**************************** ゴミ片付け・引越しゴミ回収・粗大ごみ回収 ******/
#gomi table.gomi_table1 {
width: 400px;
}
#gomi table.gomi_table1 .left {
width: 180px;
}
#gomi ul.flex {
justify-content: center;
margin: 30px 0 30px;
}
#gomi ul.flex li {
width: 45%;
}
#gomi ul.flex li:not(:last-child){
padding-right: 20px;
}
#gomi table.gomi_table2,
#gomi table.gomi_table3,
#gomi table.gomi_table4 {
width: 400px;
}
#gomi div.flex {
display: block;
margin: 0 auto;
}
#gomi table.gomi_table5 {
width: 800px;
}
/**************************** ハウスクリーニング ******/
#house table.house_table1 {
width: 600px;
}
#house ul.flex {
justify-content: center;
margin: 30px 0 30px;
}
#house ul.flex li:not(:last-child) {
padding-right: 20px;
}
/**************************** リフォーム工事 ******/
#reform table.reform_table1,
#reform table.reform_table2 {
width: 800px;
}
#reform ul.flex {
justify-content: center;
margin: 30px 0 30px;
}
#reform ul.flex li:not(:last-child) {
padding-right: 20px;
}
#reform .flex02 {
    display: block;
    margin: 0 auto;
}
#reform .flex02 .harf_table {
    width: 400px;
}
/**************************** お支払い方法 ******/
#shiharai .flex {
justify-content: center;
margin: 30px auto 30px;
width: 90%;
}
#shiharai .flex .left {
padding-right: 20px;
}
#shiharai .flex .right {
text-align: left;
}
#shiharai .flex .right h3 {
text-align: left;
}
/**************************** バナー ******/
.banner{
    max-width: 900px;
    margin: 3rem 5%;
    border: #006837 5px solid ;
    background: url("../image/title_bg.png") center bottom/100% no-repeat,linear-gradient(to bottom,#E6F7E6,#E6F7E6);
}
.banner .inner {
    display: flex;
    justify-content: space-between;
    padding: 1rem 1rem 0;
}
.banner .inner::before,.banner .inner::after {
    content: "";
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    width: 10%;
    aspect-ratio: 10/11;
}
.banner .inner::before {
    background-image: url("../image/nagare_image1.png");
}
.banner .inner::after {
    background-image: url("../image/nagare_image2.png");
}
.banner .inner .text_area {
    font-family: "TsukuARdGothicStd-E", sans-serif;
    font-size: clamp(1.5rem, 0.622rem + 2.7vw, 2.125rem);/*24~34px(520~890px)*/
    color: #006837;
    display: flex;
    grid-gap: .5rem;
    align-items: center;
    justify-content: center;
}
.banner .inner .text_area::before,.banner .inner .text_area::after {
    content: "";
    display: inline-block;
    width: 2rem;
    aspect-ratio: 1/1;
    background: url(/image/kira.png) center/100% no-repeat;    
}
.banner .inner .text_area::after {
    transform: scaleX(-1);
}
@media screen and (max-width: 620px) {
    .banner .inner {
        display: block;
        padding: 1rem;
    }
    .banner .inner::before,.banner .inner::after {
        content: unset;
    }
}