@charset "utf-8";
/*各ページ共通
------------------------------------------------------------*/
#main_area {
    padding: 30px 0 20px;
}
#main_area p {
    margin: auto;
    width:80%;
    max-width:500px;
    text-align: center;
    font-weight: 600;
    background: rgba(255,255,255,0.6);
    padding:clamp(1.875rem, 0.564rem + 2.73vw, 3.125rem) 0;/*最小20最大30px*/
    border-radius: 12px;
    font-size:clamp(1.125rem, 0.538rem + 2.09vw, 1.875rem);/*最小18最大30px*/
}
/*パンくず*/
#pankuzu {display:flex;justify-content:  flex-end; margin:10px auto 0; list-style: none; width:95%;max-width:1500px;}
#pankuzu li:not(:last-child)::after{content:">";padding:0 5px;}

/* ------------------------------ 導入文------------------------------- */
.imgL{justify-content: space-between;align-items: center;}
.imgL > img{ width:clamp(18.75rem, 5.635rem + 27.32vw, 31.25rem);/*max500min300*/ height: auto;}
.imgL > div{ width:calc(100% - clamp(20.313rem, 5.558rem + 30.74vw, 34.375rem));/*max550min325*/}
.imgL p{margin-bottom:1rem;}
.h3{position: relative;text-align: center;margin-bottom: 15px;}
.h3::after{position:absolute;top:-15px;content:url(../images/inheritance/h3.webp);}
    
/* --------------------- 相続・贈与・信託の流れ----------------------- */
.flow img{display: block;margin:auto;}
.flow h3{line-height: 1.4; margin:20px 0;}
.flow{list-style: none;}
.flow li{position:relative;margin-top:50px; background:#FFF;border-radius:12px;padding:20px; }
.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;
}
/* ------------------------------ プラン------------------------------- */
.plan > div{position:relative;background:#FFF;border-radius: 0 0 10px 10px;padding-bottom: 20px;}
.plan h3{position:absolute;top:clamp(3.75rem, -0.184rem + 8.2vw, 7.5rem);left:50%;transform: translateX(-50%);width:80%; background:#d8a7a0; padding:20px 0; border-radius:10px;text-align: center;color:#FFF;}
.plan h3+ p{margin-top:70px;}
.plan p{padding:0 20px;}
.plan ul{padding:0 20px;margin:0}
.imgL2 {justify-content: space-between;align-items: center;}
.imgL2 p{width:calc(100% - clamp(18.125rem, 15.313rem + 5.86vw, 20rem));}

/* ------------------------------ レスポンシブ------------------------------------------------------------*/
/* 1025px以下から------------------------------------------------------------*/
@media only screen and (max-width:1025px){
    /* 導入文------------------------------- */
    .imgL{flex-direction: column;}
    .imgL > img{ width:80%; max-width: 500px; margin:auto;}
    .imgL > div{ width:100%;}
    /* ------------------------------ プラン------------------------------- */
    .plan div{width:48.5%;}
}
/* 768px以下から------------------------------------------------------------*/
@media only screen and (max-width:768px){
    /* 相続・贈与・信託の流れ--------------------------- */
    .flow.c4 li{width:48.5%;}
    /* ------------------------------ プラン------------------------------- */
    .plan h3+ p{margin-top:60px;}
    .plan h3{top:clamp(3.125rem, 1.356rem + 6.29vw, 4.375rem);padding:10px 0;}
    .imgL2 {flex-direction: column;}
    .imgL2 p{width:100%;}
}
/* 450px以下から------------------------------------------------------------*/
@media only screen and (max-width:450px){
    /* ------------------------------ プラン------------------------------- */
    .plan div{width:100%;}
    /* 相続・贈与・信託の流れ--------------------------- */
    .flow.c4 li{width:90%;margin-left:auto;margin-right:auto;}
    .plan h3{top:clamp(5.625rem, -0.625rem + 26.67vw, 6.875rem);}
}