@charset "utf-8";

/* ------------------------------ メインビジュアル------------------------------ */
#main_area {
    position: relative;
    width:95%;
    max-width:1500px;
    margin: auto;
    padding-top: 20px;    
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 1;
}
#main_area p {
    position: absolute;
    left:0;
    font-weight: 600;
    background: rgba(255,255,255,0.6);
    padding:clamp(1.25rem, 0.982rem + 0.95vw, 2.125rem);/*最小20最大30px*/
    border-radius: 12px;
    font-size:clamp(1.25rem, 0.875rem + 1.33vw, 2.125rem);/*最小20最大34px*/
}
/* ------------------------------ こんなことでお悩みではありませんか？------------------------------- */
.worry{display:block;margin:0 auto 20px;}
.cpoint{background-color:#f9f5e8; padding:20px;border-radius: 5px;margin-bottom: 30px;position: relative;}
.cpoint::before{position:absolute;left:10px;top:-35px;content:url("../images/home/icon_check.webp");}

/*箇条書き*/
.flexbox.c3 > div{display: flex; flex-direction: column;}
.flexbox.c3 ul.check {min-height: 320px;}
.flexbox.c3 p.cpoint {flex-grow: 1;}
.check li {position: relative; padding-left: 28px;}
.check li:not(:last-child){margin-bottom:0.5rem;}
.check li::before {
  content: "";
  background-image: url("../images/home/list_check.webp"); 
  background-size: 22px 22px; 
  background-repeat: no-repeat;
  position: absolute;
  left: 0; 
  top: 2px;
  width: 22px;
  height: 22px; 
}
.check span{font-weight:700;}
.btn{
    display: block;
    background:#d8a7a0;
    color:#FFF;
    padding:20px 0;
    text-align:center;
    width:350px;
    margin: auto;
    border-radius:12px;
}
/* ------------------------------ 選ばれる理由------------------------------- */
.imgtxt{justify-content: space-between;align-items: center;}
.imgtxt img{width:100%; max-width: clamp(18.75rem, -0.922rem + 40.98vw, 37.5rem); height: auto;}
.imgtxt div{
    max-width:calc(100% - clamp(19.688rem, -0.968rem + 43.03vw, 39.375rem));
    background:#FFF;
    border-radius: 15px;
    padding:20px;
}
.imgtxt p{margin-bottom: 1rem;}
.imgtxt h3::before{display:block;color:#D8A7A0;font-family: "Comic Neue", cursive;font-size: clamp(1.5rem, 1.107rem + 0.82vw, 1.875rem);}
.imgtxt h3.r1::before{content:"Reason1";}
.imgtxt h3.r2::before{content:"Reason2";}
.imgtxt h3.r3::before{content:"Reason3";}
.imgR img{order:2;}

/* ------------------------------ ご契約までの流れ------------------------------- */
.flow img{display: block;margin:auto;}
.flow h3{min-height:70px;line-height: 1.4; margin:0;}
.flow{list-style: none;}
.flow li{position:relative;margin-top:50px;}
.flow{counter-reset: step;}
.flow li::before{
    counter-increment: step;
    content: "Step" counter(step);
    position: absolute;
    top:-50px;
    left:50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100px;
    height: 50px;
    border-radius: 50% / 100% 100% 0 0;
    background: #d8a7a0;
    color:#FFF;
    font-size: 27px;
    font-family: "Comic Neue", cursive;
}

/* ------------------------------ ご挨拶------------------------------- */
.imgL{justify-content: space-between;align-items: center;}
.imgL img{width:100%; max-width: clamp(12.5rem, -6.516rem + 39.62vw, 30.625rem); height: auto;}
.imgL div{
    max-width:calc(100% - clamp(13.438rem, -6.563rem + 41.67vw, 32.5rem));

}
.imgL h3{font-size:clamp(1.25rem, 0.791rem + 0.96vw, 1.688rem);}
.imgL p{margin-bottom: 1rem;}

/* ------------------------------ ブログ------------------------------- */
.flexbox.inner-box2{justify-content: space-between;align-items: center;}
.circle{width:300px; height: 300px; border-radius: 50%;background:#d8a7a0;text-align: center;display:flex;flex-direction: column;justify-content: center;align-items: center;}
.circle p{color:#FFF;}
.blogco{width:calc(100% -  330px);}
.blogco a {display:flex;background:#f9f5e8;padding:15px;margin-bottom:20px;border-radius: 12px; color:#2e2823;}
.blogco time{margin-right:2em;}


/* ------------------------------ レスポンシブ------------------------------------------------------------*/
/*1500px以下から-------------------------------------------------------------*/
@media only screen and (max-width:1500px){
	body {min-width: 1420px;}
}
/* 1024px以下から------------------------------------------------------------*/
@media only screen and (max-width:1024px){
    body {min-width: inherit;width:100%;}
    /*メイン画像*/
    #main_area picture img {
        width: clamp(43.75rem, 3.289rem + 63.16vw, 62.5rem);
        height: auto;
    }
    #main_area p {
        position: absolute;
        left:0%;
        white-space: nowrap;
        bottom:clamp(0.313rem, -0.421rem + 2.61vw, 1.25rem);/*最小5最大20px*/
        padding:clamp(0.625rem, -0.109rem + 2.61vw, 1.563rem);/*最小20最大30px*/
        border-radius: 8px;
        font-size:clamp(1rem, 0.707rem + 1.04vw, 1.375rem);/*最小16最大22px*/
        line-height: 1.4;
        background: rgba(255,255,255,0.9);
    }
    /* こんなことでお悩みではありませんか？----- */
    .flexbox.c3 > div{width:48.5%;}
    .flexbox.c3 ul.check {flex: 1;min-height: inherit;margin-bottom:50px !important;}
    .flexbox.c3 p.cpoint {flex-grow:0;}
    /* 選ばれる理由------------------------------- */
    .imgtxt{align-items: flex-start;}
    /* ご挨拶-------------------------------------- */
    .imgL{align-items: flex-start;}
}


/* 768px以下から------------------------------------------------------------*/
@media only screen and (max-width:768px){
    #main_area {padding-top:0;}
    /* こんなことでお悩みではありませんか？---- */
    .flexbox.c3 > div{width:90%;margin:auto;}
    .btn{width:90%;}
    /* 選ばれる理由------------------------------- */
    .imgtxt{flex-direction: column;}
    .imgtxt img{width:90%;max-width:500px;margin:auto;}
    .imgtxt div{max-width:100%;}
    .imgR img{order:1;}
    .imgR div{order:2;}
    /*ご契約までの流れ--------------------------- */
    .flow.c4 li{width:48.5%;}
    /* ご挨拶-------------------------------------- */
    .imgL{flex-direction: column;}
    .imgL img{width:90%;max-width:400px;margin:auto;}
    .imgL div{max-width:100%;}
    /* 代表ブログ---------------------------------- */
    .flexbox.inner-box2{align-items: stretch;}
    .circle{border-radius:20px;width:35%;}
    .circle p{padding:0 10px;}
    .circle p br{display: none;}
    .circle img{width:90%;}
    .blogco{width:calc(100% - 38%);}
    .blogco a{flex-direction: column;}
}
/* 450px以下から------------------------------------------------------------*/
@media only screen and (max-width:450px){
    /*メイン画像*/
    #main_area p {
        position: absolute;
        left:50%;
        bottom:30px;
        transform: translateX(-50%);
        text-align: center;
        line-height: 1.6;
    }
    /*ご契約までの流れ--------------------------- */
    .flow.c4 li{width:90%;margin-left:auto;margin-right:auto;}
    /* 代表ブログ---------------------------------- */
    .flexbox.inner-box2{border:1px solid #d8a7a0;padding:10px; border-radius: 10px;}
    .circle{border-radius:10px;width:100%;height: inherit;padding:20px;}
    .blogco{width:100%;}
    .blogco a{flex-direction: column;}

}