/* 
.bg_blue{
    background-color: #ecf0f3;
    padding: 60px 0;
}
.bg_indigo{
    background-image: url(../img/img12.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 30px 20px;
    color: #fff;
    .center{
        @include sp{
            text-align: left;
        }
    }

}
.bg_purple{
    background-color: #8a91b5;
    padding: 30px 0;
    color: #fff;
    img{
        max-width: 100px;
        margin: 0 auto;
        padding: 0;
    }
    .txt{
        max-width: 90%;
        margin: 0 auto;
        display: flex;
        flex-wrap: nowrap;
        align-items: baseline;
        justify-content: center;
        img{
            width: 10%;
        }
        h3{
            width: 90%;
        }
    }

}
.bg_stripe{
    background-color: #ecf0f3;
    margin: 0;
    padding: 100px 0 60px;
    position: relative;
    z-index: -1;
    &:before{
        position: absolute;
        content: url(../img/img56.png);
        width: 30px;
        top: 0;
        left: -30px;
        z-index: -1;
    }
    &:after{
        position: absolute;
        content: url(../img/img56.png);
        width: 30px;
        top: 0;
        right: 0;
        z-index: -1;
    }

}

.gothic{
    font-family: sans-serif;
    font-weight: normal;
}
.bold{
    font-weight: bold;
}

.yu-go{
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}

.indigo{
    color: #02284c;
}
.gold{
    color: #a5904c;
}
.gold_marker{
    display: inline-block;
    background:linear-gradient(transparent 60%, #a5904c 60%);
}

.yellow{
    color: #ffff00;
}

.purple{
    color: #8a91b5;
}
.red{
    color: #c1272d;
}

.large{
    font-size: 1.5rem;
    @include sp{
        font-size: 1.2rem;
    }
}

h2{
    font-size: 2.0rem;
    @include sp{
        font-size: 1.4rem;
    }
}
h3{
    font-size: 1.8rem;
    @include sp{
        font-size: 1.2rem;
    }
}
h4{
    font-size: 1.5rem;
    @include sp{
        font-size: 1.0rem;
    }
}

.images{
    @extend .col2;
    @include sp{
        > div{
            width: 48%;
        }
    }
}

.datum{
    .data{
        max-width: 80px;
        margin: 30px auto;
    }
    .question{
        &:before{
            content: "Q."
        }
    }


    .brown_box{
        padding: 1.0rem;
        border: 1px solid #b29e69;
        .brown{
            color: #b29e69;
        }
    }
    .purple_box{
        padding: 1.0rem;
        background-color: #8a91b5;
        p{
            font-family: sans-serif;
            color: #f4e13d;
            text-decoration: underline;
        }
    }
    .light_purple_box{
        padding: 1.0rem;
        background-image: url(../img/bg_purple.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 2.0rem;
        @include sp{
            background-size: auto 100%;
        }
    }
    .arrow{
        width: 50px;
        margin: 20px auto;
    }
}

.light_gold_box{
    background-image: url(../img/bg_gold.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 2.0rem;
    margin: 60px auto;
    @include sp{
        padding: 1.0rem;
        background-size: auto 100%;
    }
}

.double-border-box{
    position: relative;
    padding: 3.0rem;
    background-image: url(../img/bg_white.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
    @include sp{
        padding: 1.0rem;
        background-size: auto 100%;
    }
    img{
        position: absolute;
        width: 100px;
        top: -40px;
        right: 0;
        @include sp{
            width: 60px;
        }
    }
}

dl.type{
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 1px solid #000;
    dt, dd{
        padding: 0.5rem 1.0rem;
    }
}
dl.spec{
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    dt, dd{
        padding: 0.5rem 1.0rem;
    }
    dt{
        background-color: #b29e69;
        color: #fff;
    }
    dd{
        font-size: 12px;
    }
}

.point{
    background-color: #fff;
    margin: 0 auto 30px;
    padding: 1.0rem;
    position: relative;
    > img{
        position: absolute;
        top: -20px;
        left: -20px;
    }
    .inner{
        @extend .col2;
        margin-top: 70px;
        @include sp{
            margin-top: 120px;
        }
            > div:first-child{
                width: 55%;
                font-size: 12px;
                text-align: justify;
            }
            > div:last-child{
                width: 40%;
            }
        }
    }
*/
/* //通風・採光 */
/* .wind{
    &:before{
        display: inline-block;
        content: url(../img/wind.svg);
        width: 30px;
        margin-right: 10px;
    }

}
.light{
    &:before{
        display: inline-block;
        content: url(../img/light.svg);
        width: 30px;
        margin-right: 10px;
    }

}

.storage{
    &:before{
        display: inline-block;
        content: url(../img/storage.svg);
        width: 30px;
        margin-right: 10px;
    }
}

.water{
    &:before{
        display: inline-block;
        content: url(../img/water.svg);
        width: 30px;
        margin-right: 10px;
    }

}

.common{
    @extend .col2;
    > div{
        width: 45%;
    }

}
.hapisapo{
    @extend .col2;
    align-items: center;
}

.service{
    @extend .col2;
    align-items: stretch;
    > div{
        width: 45%;
        @include sp{
            width: 100%;
        }
    }
    div.light_purple_box_outline{
        padding: 1.0rem;
        margin-bottom: 10%;
        background-color: #e7e9f0;
        border: 10px solid #fff;
        box-shadow: 0px 0px 0px 1px #e7e9f0;

        h5{
            border-bottom: 1px solid #02284c;;
            margin-bottom: 10px;
            color: #02284c;
        }
        .inner{
            padding: 1.0rem;
            > ul{
                margin-top: 20px;
                text-align: left;
                > li{
                    width: 100%;
                    text-align: left;
                    &::before{
                        display: inline-block;
                        content: url(../img/img45.png);
                        width: 20px;
                        margin-right: 10px;
                    }
                }
            }
        }
        .middle_purple_box{
            margin: 20px auto 0;
            padding: 1.0rem;
            border-radius: 10px;
            background-color: #cbcedd;

         }
         .col3{
            @include sp{
                > div{
                    width: 32%;
                }
            }
         }
    }

}

a.external_btn{
    display: block;
    width: 400px;
    margin: 60px auto;
}  */

.gothic{

}
.bold{

}

.yu-go{

}
/* ======================================================= */
/* ==================== BASE ================= */
/* ======================================================= */

.titleSec , .mainSec {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}
.titleSec , .mainSec {
    font-size: 62.5%;
}
.titleSec , .mainSec {
    font-size: 1.6rem;
}
.forSp {		
	display: none;	
}		
.forPc {		
	display: block;	
}		
.titleSec img, .mainSec img{
    width: 100%;
    height: auto;
}
@media screen and (max-width : 959px ){		
.titleSec , .mainSec  {		
/*padding-bottom: 54px;*/		
		
}		
	.forPc {	
		display: none;
	}	
	.forSp {	
		display: block;
	}	
	.nonSp {	
		display: none;
	}	
	#t_live_balloon {	
		display: none !important;
	}	
	#top {	
		padding-top: 70px;
	}	
}		
		
.wrapWidth {		
	width: 100%;	
	margin: 0 auto;	
}		
.boxWidth {		
	width: 96%;	
	max-width: 1200px;	
	margin: 0 auto;	
}		
.mw460{
    max-width: 46rem;
    margin: 0 auto;
}
.mw740{
    max-width: 74rem;
    margin: 0 auto;
}

		
.brSp {		
	display: none;	
}		
.brTab {		
	display: none;	
}		
		
@media screen and (max-width: 959px) {		
.boxWidth {		
	/* width: 90%;	 */
}		
	.brTab {	
		display: inline;
	}	
    .mw460{
    max-width: 96%;
}
    .mw740{
        max-width: 96%;
    }
}		
@media screen and (max-width: 599px) {		
	#captionBox .caption span.non-Sp {	
		display: none;
	}	
	.brSp {	
		display: inline;
	}	
}		
		
/*========== FLEX BOX ==========*/		
.flex-container {		
	display: -webkit-box;	
	display: -ms-flexbox;	
	display: flex;	
	-ms-flex-wrap: wrap;	
	flex-wrap: wrap;	
	-webkit-box-pack: justify;	
	-ms-flex-pack: justify;	
	justify-content: space-between;	
}		
.flex-item {		
	display: -webkit-box;	
	display: -ms-flexbox;	
	display: flex;	
	-webkit-box-align: center;	
	-ms-flex-align: center;	
	align-items: center;	
}		
.flex-center {		
	display: -webkit-box;	
	display: -ms-flexbox;	
	display: flex;	
	-webkit-box-pack: center;	
	-ms-flex-pack: center;	
	justify-content: center;	
}		
.flex-left {		
	-webkit-box-pack: start;	
	-ms-flex-pack: start;	
	justify-content: flex-start;	
}		

/* COMMON */

.font32{
    font-size: clamp(2.4rem, 4vw, 3.2rem);
}
.font30{
    font-size: clamp(2.0rem, 4vw, 3.0rem);
}
.font28{
    font-size: clamp(1.9rem, 3.2vw, 2.8rem);
}
.font24{
    font-size: clamp(1.8rem, 3vw ,2.4rem);
}
.font18{
    font-size: clamp(1.6rem, 2.6vw ,1.8rem);
}
.font16{
    font-size: clamp(1.2rem, 2vw, 1.6rem);
}
.font12{
    font-size: clamp(1.0rem,1.6vw ,1.2rem);
}
.font10{
    font-size: clamp(0.8rem, 1.3vw,1.0rem);
}
.large{
    font-size: 200%;
}
.bold{
    font-weight: bold;
}
.center{
    text-align: center;
}
.gold{
    color: #a5904c;
}
.yellow{
    color: #ffff00;
}
.purple{
    color: #8a91b5;
}
.brown{
    color: #b29e69;
}
.red{
    color: #c1272d;
}

.bg_indigo{
    background-image: url(../images/indigo_bk.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 30px 20px;
    color: #fff;
}
.bg_blue{
    background-color: #ecf0f3;
    padding: 60px 0;
}
.mainSec .arrow{
    width: 5rem;
    margin: 2rem auto;
}
.col02{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.col02 > div{
    width: 48%;
}
.col02 div p{
    display: flex;
    text-align: start;
}
.mt30{
    margin-top: 3rem;
}
.mt60{
    margin-top: 6rem;
}
@media screen and (max-width: 959px) {
    .col02 div{
    width: 96%;
    margin: 0 auto;
}
    .col02 >div{
    margin-bottom: 4%;
    }
    .bg_indigo .center{
        text-align: left;
    }
}
/* ======================================================= */
/* ==================== titleSection================= */
/* ======================================================= */
.doubleImg{
    max-width: 460px;
    margin: 0 auto;
    margin-top: 3rem;
}
.doubleImg div{
    width: 48%;
}

.titleSec .col02{
    max-width: 940px;
    margin: 0 auto;
}
.titleSec .col02.mt30{
    margin-top: 3rem;
}

@media screen and (max-width: 959px) {
    .doubleImg{
    max-width: 96%;
}
.titleSec .col02{
    max-width: 96%;
}
}
@media screen and (max-width: 599px){}
/* ======================================================= */
/* ==================== intro part================= */
/* ======================================================= */
.introPart ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.introPart ul.ulWrap01{
    max-width: 900px;
    margin: 0 auto;

}
.introPart ul.ulWrap02{
    max-width: 740px;
    margin: 0 auto;
}

.introPart ul.ulWrap01 li{
    width: 48%;
    margin: 0 auto;
}
.dataNo{
    max-width: 8rem;
    margin: 30px auto;
}

.introPart .caption{
    font-size: 1rem;
}
.introPart .caption.capRight{
    text-align: right;
}
.brownBox{
    padding: 1.0rem;
    border: 1px solid #b29e69;
}
.purpleBox{
    padding: 1rem;
    background-color: #8a91b5;
}
.purpleBox p{
    color: #f4e13d;
    text-decoration: underline;
}


@media screen and (max-width: 959px) {
    .introPart ul li{
        max-width: 700px;
    }
    .introPart  ul.ulWrap01 li{
        width: 96%;
    }
}
@media screen and (max-width: 599px){

}
/* ======================================================= */
/* ==================== life style part================= */
/* ======================================================= */
.bg_stripe{
    background-color: #ecf0f3;
    margin: 0;
    padding: 100px 0 60px;
    position: relative;
    z-index: -1;
}
.bg_stripe::before{
        position: absolute;
    content: url(../images/white_stripe.png);
    width: 30px;
    top: 0;
    left: -30px;
    z-index: -1;
}
.bg_stripe::after{
        position: absolute;
    content: url(../images/white_stripe.png);
    width: 30px;
    top: 0;
    right: 0;
    z-index: -1;
}
.doubleborderWrap{
    width: 80%;
    min-width: 300px;
    margin: 0 auto;
}
.doubleborderBox{
position: relative;
    padding: 8rem;
    background-image: url(../images/bg_white.svg);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}
.doubleborderBox img{
        position: absolute;
        width: 100px;
        top: -70px;
        right: 0;
}
.doubleborderContent{
        position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央に配置 */
    width: 100%;
    z-index: 1;
}
.specWrap{
    width: 80%;
    min-width: 300px;
    max-width: 740px;
    margin: 0 auto;
}
.specWrap dl.type{
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 1px solid #000;
    align-items: baseline;
}
.specWrap dl.type dt, .specWrap dl.type dd{
    padding: 0.5rem 1rem;
}
.specWrap dl.spec{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    text-align: left;
    justify-content: space-between;
}
.specWrap dl.spec dt{
    display: flex;
    justify-content: space-around;
    width: 35%;
    background-color: #b29e69;
    color: #fff;
    padding: 0 1rem;
}
.specWrap dl.spec dt div{
    padding: .5rem;
}
.specWrap dl.spec dt div.font12{
    padding-left: .8rem;
}
.specWrap dl.spec dt .font10{
    letter-spacing: 0.001rem;
}
.specWrap dl.spec dd{
    width: 60%;
}

.madoriArea{
    max-width: 740px;
    margin: 0 auto;
}
.madoriWrap{
    display: flex;
    justify-content: space-between;
}
.madoriWrap > div{
    width: 48%;
}
.madoriWrap .point{
    background-color: #fff;
    margin: 0 auto 30px;
    padding: 1rem;
    position: relative;
    text-align: start;
}
.madoriWrap .madoriImg{
    width: 42%;
    margin: 0 auto;
}
.madoriWrap .point > div > img{
    position: absolute;
    top: -20px;
    left: -20px;
}
.madoriWrap .inner{
    display: flex;
    justify-content: space-between;
    margin-top: 7rem;
}
.madoriWrap .inner div:nth-child(1){
    width: 58%;
}
.madoriWrap .inner div:nth-child(2){
    width: 40%;
}
.madoriArea .caption{
    font-size: 1rem;
}
.madoriArea .capLeft{
    text-align: left;
}
.madoriArea .caption .light:before{
    display: inline-block;
    content: url(../images/light.svg);
    width: 30px;
    margin-right: 10px;
    margin-left: 10px;
}
.madoriArea .caption .wind:before{
        display: inline-block;
    content: url(../images/wind.svg);
    width: 30px;
    margin-right: 10px;
    margin-left: 10px;
}
.madoriArea .caption .storage:before{
    display: inline-block;
    content: url(../images/storage.svg);
    width: 30px;
    margin-right: 10px;
    margin-left: 10px;
}
.madoriArea .caption .water:before{
        display: inline-block;
    content: url(../images/water.svg);
    width: 30px;
    margin-right: 10px;
    margin-left: 10px;
}

@media screen and (max-width: 959px) {
    .doubleborderWrap, .specWrap{
    width: 95%;
    }

    .doubleborderBox::before {
        background-size: auto 100%;
    }
    .madoriArea .caption{
    width: 96%;
    margin: 0 auto;
    }
    .bg_stripe{
    padding: 60px 0;
}
}
@media screen and (max-width: 599px){
    .doubleborderBox img{
    width: 60px;
    top: 10px;
    }
    .specWrap dl.spec dt div{
    padding:  0.2rem .5rem;
}
    .specWrap dl.spec dt div.font12{
    padding-left: 0.3rem;
}
    .specWrap dl.spec dt{
    padding: 0 .3rem;
    display: block;
    width: 13rem;
    }
    .specWrap dl.spec dd{
        width: 70%;
        padding-left: 1rem;
    }

    .madoriWrap{
    display: block;
    }
    .madoriWrap > div, .madoriWrap .madoriImg{
        width: 90%;
        min-width: 300px;
        margin: 0 auto;
    }
    .madoriWrap .point{
        
    }
    .madoriWrap .inner{
        margin-top: 25%;
    }


}
/* ======================================================= */
/* ==================== point================= */
/* ======================================================= */
.bg_purple{
    background-color: #8a91b5;
    padding: 30px 0;
    color: #fff;
}
.bg_purple img{
    max-width: 100px;
    margin: 0 auto;
    padding: 0;
}
.bg_purple .txt{
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
}
.bg_purple img{
    width: 10%;
}
.bg_purple h3{
    width: 90%;
}
.image_cap_normal{
    display: block;
    position: relative;
}
.cap_right_black{
        position: absolute;
    bottom: 1%;
    right: 1%;
    padding: 0.1rem;
    color: #000;
    font-size: 10px;
}
.data{   
    max-width: 8rem;
    margin: 3rem auto;
}
/* .lightpurpleBox{
    padding: 1rem;
    background-image: url(../images/bg_purple.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 2rem;
} */
.lightpurpleBox {
    position: relative;
    padding: 2rem;
    z-index: 1;
    max-width: 64rem;
    margin: 0 auto;
}

.lightpurpleBox::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../images/bg_purple.svg);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
        aspect-ratio: 940 / 630; /* 画像の縦横比に合わせる */
}

.purpleCol02{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.purpleCol02 >div{
    width: 45%;
}
.purpleCol02 .col01{
    margin: 0 auto;
}
.gold_marker{
        display: inline-block;
        background: linear-gradient(transparent 60%, #a5904c 60%);
}
.image_cap_normal .cap_right{
    position: absolute;
    bottom: 1%;
    right: 1%;
    padding: 0.1rem;
    color: #fff;
    font-size: 10px;
}
/* 外側の薄紫ボックス（斜めカット） */
.decor-box {
    position: relative;
    background: #E7E9F0;
    padding: .5rem; /* ← 外枠と内側線の間のスペース */
    clip-path: polygon(
        20px 0,
        100% 0,
        100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        0 100%,
        0 20px
    );
}

/* 内側の線（1px）と外枠と同じ形状 */
.decor-box__border {
    position: relative;
    background: #DBDEE9; /* ← 内側の1pxラインの色 */
    padding: 1px; /* ← 線の太さ（ここが1px線） */
    clip-path: inherit; /* 外枠と同じ斜め形に */
}

/* 中の薄紫背景（外側と同じ色に戻す） */
.decor-box__inner {
    background: #E7E9F0;
    padding: 2rem; /* ← 中身用の余白 */
    clip-path: inherit;
}

@media screen and (max-width: 959px) {}
@media screen and (max-width: 599px){}
/* ======================================================= */
/* ==================== original================= */
/* ======================================================= */
.hapisapo.col02{
    align-items: center;
}

/* 外側の薄紫ボックス（斜めカット） */
.decor-box-gold {
    position: relative;
    background: #E9E6D6;
    padding: .5rem; /* ← 外枠と内側線の間のスペース */
    clip-path: polygon(
        20px 0,              /* 1: 左上 */
        100% 0,              /* 2: 右上 */
        100% calc(100% - 20px), /* 3: 右下 */
        calc(100% - 20px) 100%, /* 4: 右下下端 */
        0 100%,              /* 5: 左下 */
        0 20px               /* 6: 左上下端 */
    );
    margin: 6rem auto;
}

/* 内側の線（1px）と外枠と同じ形状 */
.decor-box-gold__border {
    position: relative;
    background: #D8D1B4; /* ← 内側の1pxラインの色 */
    padding: 1px; /* ← 線の太さ（ここが1px線） */
    clip-path: inherit; /* 外枠と同じ斜め形に */
}

/* 中の薄紫背景（外側と同じ色に戻す） */
.decor-box-gold__inner {
    background: #E9E6D6;
    padding: 2rem; /* ← 中身用の余白 */
    clip-path: inherit;
}


.serviceWrap{
    max-width: 940px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}
.serviceWrap.mt30{
    margin-top: 3rem;
}
.serviceWrap > div {
    width: 45%;
}
.serviceWrap .light_purple_box_outline{
    padding: 1rem;
    margin-bottom: 10%;
    background-color: #e7e9f0;
    border: 10px solid #fff;
    box-shadow: 0px 0px 0px 1px #e7e9f0;
}
.serviceWrap .light_purple_box_outline h5{
    border-bottom: 1px solid #02284c;
    margin-bottom: 10px;
    color: #02284c;
}
.serviceWrap div.light_purple_box_outline .inner{
    padding: 1rem;
}
.serviceWrap div.light_purple_box_outline .inner > ul{
    margin-top: 20px;
    text-align: left;
}
.serviceWrap div.light_purple_box_outline .inner > ul > li{
    width: 100%;
    text-align: left;
}
.serviceWrap div.light_purple_box_outline .inner > ul > li::before{
    display: inline-block;
    content: url(../images/check.png);
    width: 20px;
    margin-right: 10px;
}
.serviceWrap .col03{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.serviceWrap .col03 > div{
    width: 32%;
}


@media screen and (max-width: 959px) {
    .serviceWrap{
    max-width: 96%;
}
    .serviceWrap > div {
        width: 48%;
    }
    .decor-box-gold {
    margin: 2rem auto 3rem;
}
}
@media screen and (max-width: 599px){
        .serviceWrap > div {
        width: 100%;
    }
}