/*rest　******************************/
*{box-sizing: border-box;}
img{max-width:100%;max-height: 100%;}
a{display: block;}
a:hover{text-decoration:none;}
button{
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    color:inherit;
}

body{
    line-height: 1;
    font-weight:normal !important;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
}

html{
font-size:62.5% !important;
scroll-behavior: smooth;
}


/*root　******************************/

:root {
    --color-bk:#76726E;
    --color-pk:#F49A90;
    --color-lpk:#FEF3F2;
    --color-hpk:#FEF3F2;
    --color-gy:#76726E;
    --color-lgy:#BBB9B7;

    --font-size-sub-txt:1.2rem;
    --font-size-txt:1.3rem;
    --font-size-st-txt:1.4rem;
    --font-size-sub-heading:1.5rem;
    --font-size-heading:1.6rem;
    --mg8:2.05vw;
    --mg16:4.10vw;
    --mg24:6.15vw;
    --mg32:8.20vw;
    --mg40:10.25vw;
    --mg56:14.35vw;
    --mg64:16.41vw;
    --mg80:20.51vw;
    }


.pc{
    display:none;
}

@media (min-width: 768px) {

    .pc{
        display:block;
    }

    .sp{
        display:none;
    } 

    :root {
    --mg8:0.41vw;
    --mg16:0.83vw;
    --mg24:1.25vw;
    --mg32:1.66vw;
    --mg40:2.08vw;
    --mg56:2.91vw;
    --mg64:3.33vw;
    --mg80:4.16vw;
    --mg96:5vw;
    --mg120:6.25vw;
    --mg160:8.33vw;

    --font-size-sub-txt:clamp(1.2rem, 0.95vw,1.3rem);
    --font-size-txt:clamp(1.4rem, 1.02vw, 1.5rem);
    --font-size-st-txt:clamp(1.4rem, 1.31vw, 1.6rem);
    --font-size-sub-heading:clamp(1.5rem, 1.31vw,2rem);
    --font-size-heading:clamp(1.6rem, 2.04vw ,2.8rem);
        }

}



/*common　******************************/


.contentWrapper {
    overflow: hidden;
    color: var(--color-bk);
    letter-spacing: .05em;
}


section{
    padding:var(--mg80) 0 0;
}

.contents-inner{
    padding:0 5%;
}

.font-en{
    font-family: minion-pro, serif;
    font-weight: 500;
    font-style: normal;
}

.mgt-n{
    margin-top:0;
}

@media (min-width: 768px) {

    .contents-inner{
    max-width:1280px;
    margin:0 auto;
}

}

/*mainVisual　******************************/
section.mainVisual{
    padding:0;
}

.mainVisual__wrapper{
    max-width:1200px;
    margin:0 auto;
}

@media (min-width: 768px) {


}

/*intro・bottom txt　******************************/

.intro-copy{
    text-align: center;
    letter-spacing: 0.1em;
    font-size:2rem;
    font-weight: 500;
}


.intro-txt{
    font-size:var(--font-size-st-txt);
    line-height: 2;
    text-align: center;
    margin:var(--mg16) 0 var(--mg32);
}


.intro-style-txt{
    max-width:220px;
    margin:0 auto var(--mg-ss);
}

.intro-nav{
    display: grid;
    gap:8px;
    justify-content: center;
}

.intro-nav li a{
    border:1px solid var(--color-pk);
    text-align: center;
    width:clamp(180px,71.79vw,300px);
    padding:12px;
    border-radius: 4px;
    color:var(--color-pk);
    font-weight: 600;

}


.intro-nav li a span::after{
    content:"";
    display: inline-block;
    margin-left:8px;
    width:10px;
    height:10px;
    background:url(../img/usr/freepage/first_pumps_guide/arrow.png) no-repeat center center/contain;
        transition: all 0.2s;
}

.intro-nav li a:hover span::after{
    transform: translateY(2px);
}

.sec-btn{
    border:1px solid var(--color-bk);
    width:fit-content;
    text-align: center;
    padding:15px 5px;
    font-size:var(--font-size-st-txt);
    min-width:275px;
    font-weight: 600;
    border-radius: 4px;
    margin:var(--mg40) auto 0;
    color:var(--color-bk) !important;
    transition: all 0.2s;
}

.sec-btn:hover{
    color:#fff !important;
    background:var(--color-bk);
}

.sec-btn.pk{
    color:var(--color-pk) !important;
    border:1px solid var(--color-pk);
}

.sec-btn.pk:hover{
    background:var(--color-pk);
    color:#fff !important;
}

.sec-btn.bgpk{
    color:#fff !important;
    background:var(--color-pk);
    border:1px solid var(--color-pk);
}

.sec-btn.bgpk:hover{
    color:var(--color-pk) !important;
    background:#fff;
}


@media (min-width: 768px) {

    .intro-copy{
    font-size:2.7rem;
}

    .intro-txt{
    font-size:var(--font-size-st-txt);
    line-height: 2.2;
    margin:var(--mg24) 0 var(--mg40);
    }

    .intro-nav{
    grid-template-columns: 1fr 1fr 1fr;
    max-width:829px;
    gap:32px;
    margin:0 auto;
}

.intro-nav li a{
    /* width:clamp(180px,71.79vw,300px); */
    padding:16px;
    border-radius: 4px;
}

.sec-btn{
    padding:18px 10px;
    min-width:360px;
    margin:var(--mg56) auto 0;
}
 
}


/*contents　******************************/

.sec-ttl{
    display: grid;
    border-bottom:1px solid var(--color-pk);
    grid-template-columns: auto 1fr;
    align-items: center;
    color:var(--color-pk);
    padding:0 0 2px;
}

.sec-ttl p{
    display:flex;
    align-items: center;
    font-size:4rem;
}

.sec-ttl p::after{
    display: block;
    content:"";
    width: 6px;
    height:6px;
    background:var(--color-pk);
    border-radius: 50%;
    margin:0 10px;
}

.sec-ttl h2{
    font-size:var(--font-size-heading);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height:1.4;

}

.sec-cont{
    margin-top:var(--mg32)
}

.sec-cont h3,.fuwasara-ttl{
    color:var(--color-pk);
    font-weight: 600;
    font-size:var(--font-size-sub-heading);
    margin:var(--mg24) 0 var(--mg16);
}

.sec-cont h3.point{
    display: flex;
    align-items: center;
}

.sec-cont h3.point span{
    display: block;
    width:50px;
    margin-right:8px;
}

.sec-cont h4{
    margin:var(--mg24) 0 var(--mg8);
}

.sec-txt-wrapper{
    display:grid;
    gap:8px;
}
.sec-txt-wrapper p{
    font-size:var(--font-size-txt);
    line-height: 1.9;
}

.sec-txt-wrapper p span{
    font-weight: 700;
}

.sec-image{
    margin-top:var(--mg16);
}

.sec-btn.point{
    margin:var(--mg56) auto 0;
}


.foot-table-wrapper {
overflow-x: auto;
margin-top:20px;
}

.foot-table {
border-collapse: collapse;
width: 100%;
min-width: 700px;
text-align: center;
font-family: sans-serif;
color:var(--color-bk);
font-size:var(--font-size-txt);
}

.foot-table th,
.foot-table td {
padding: 1rem;
vertical-align: middle;
font-weight: 600;
}

.foot-table th:nth-child(1),.foot-table th:nth-child(2),
.foot-table td:nth-child(1),.foot-table td:nth-child(2){
    border-right:1px solid #FCE2DF;
}

.foot-table tr{
    border-bottom:1px solid #FCE2DF;
}

.foot-table th {
background:#FFF6F5;
font-weight: bold;
white-space: nowrap;
}

.foot-table td img {
width: clamp(100px,23.0vw ,120px);
margin-bottom:8px;
}

.toe-wrapper {
display: flex;
justify-content: center;
gap: 2rem;
}

.toe-item {
text-align: center;
flex: 1;
/* width: clamp(100px,23.0vw ,120px); */
}

.check-wrapper{
    background:var(--color-hpk);
    padding:var(--mg40) var(--mg16) var(--mg32);
    margin-top:var(--mg32);
}

.check-wrapper h4 {
    font-weight: 600;
    font-size:var(--font-size-sub-heading);
    text-align: center;
}


.check-wrapper ul{
    display: grid;
    justify-content: center;
    gap:8px;
    margin:var(--mg24) 0;
}

.check-wrapper ul li{
    display: flex;
    align-items: center;
}

.check-wrapper ul li::before{
    content:"";
    width:15px;
    height:15px;
    display: block;
    background:url(/img/usr/freepage/first_pumps_guide/check.png) no-repeat center center/contain;
    margin-right:8px;
}

.check-wrapper ul li,.check-btm-txt{
    font-size: 1.3rem;
}

.check-btm-txt{
    line-height: 1.5; 
}

.check-btm-txt,.sec-btm-copy{
    font-weight: 600;
    text-align: center;
}

.sec-btm-copy{
    font-size:var(--font-size-st-txt);
    line-height: 1.8;
    margin:var(--mg24) 0 var(--mg40);
}

.fuwasara-wrapper h4{
    color:var(--color-pk);
    line-height: 1.5;
    text-align: center;
}

.fuwasara-wrapper h4::after{
    content:"";
    display: block;
    width:100%;
    height:1px ;
    background:var(--color-pk);
    margin-top:-10px;
}

.fuwasara-wrapper h4 span{
    display: inline-block;
    width:fit-content;
    background:#fff;
    padding:0 8px;
    font-weight: 600;
    font-size:var(--font-size-sub-heading);
}

.fuwasara-link{
    color:var(--color-bk) !important;
    font-size:var(--font-size-txt);
    font-weight: 600;
    margin-top:var(--mg16);
    text-align: center;
}

.fuwasara-link span{
    display: inline-block;
    padding:0 0 4px;
    border-bottom:1px solid var(--color-bk);
}

.fuwasara-link span::after{
    content:"";
    display: inline-block;
    width:6px;
    height:10px;
    margin:0 0 0 4px;
    background:url(/img/usr/freepage/first_pumps_guide/arrow-w.png) no-repeat center center/contain;
}

@media (min-width: 768px) { 

    .sec-ttl{
        padding:0 0 6px;
    }

    /* .sec-ttl p{
    display:flex;
    align-items: center;
    font-size:4rem;
    } */

    .sec-ttl p::after{
    margin:0 12px;
}

/* .sec-ttl h2{
    font-size:var(--font-size-heading);
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height:1.4;

} */

.sec-cont{
    margin-top:var(--mg56);
    padding:0 3%;
}

.sec-cont.col2{
    display: grid;
    grid-template-columns: 1fr 42%;
    align-items: center;
    gap:var(--mg40);
}

.sec-cont.col2.reverse .sec-txt{
    order: 1;
}

.sec-cont.col2.reverse .sec-image{
    order: 2;
}

.sec-cont h3,.fuwasara-ttl{
    /* font-size:var(--font-size-sub-heading); */
    margin:0 0 var(--mg24);
}

/* .sec-txt{} */

.sec-cont h3.point span{
    width:54px;
    margin-right:10px;
}

.sec-cont h4{
    margin:var(--mg32) 0 var(--mg16);
}

.sec-txt-wrapper{
    display:grid;
    gap:12px;
}
.sec-txt-wrapper p{
    font-size:var(--font-size-txt);
    line-height: 2.2;
}


.sec-btn.point{
    margin:var(--mg64) auto var(--mg64) ;
}

.sec-image{
    margin-top:0;
}

.foot-table-wrapper {
max-width: 900px;
overflow-x: inherit;
margin:var(--mg24) auto 0;
}


.foot-table th{
font-size:var(--font-size-st-txt);
}

.check-wrapper{
    max-width:900px;
    padding:var(--mg56) var(--mg16);
    margin:var(--mg40) auto 0;
}

.check-wrapper ul{
    grid-template-columns: auto auto auto;
    justify-content: center;
    gap:48px;
    margin:var(--mg40) 0 var(--mg32);
}

.sec-btm-copy{
    line-height: 2;
    margin:var(--mg40) 0 var(--mg64);
}


/* .fuwasara-wrapper h4{
    color:var(--color-pk);
    line-height: 1.5;
    text-align: center;
} */

.fuwasara-wrapper h4::after{
    margin-top:-15px;
}

.fuwasara-link{
    margin:var(--mg24) 0 0;
    text-align: left;
}

}

/*item ******************************/



.scene-nav{
    display: flex;
    flex-wrap: wrap;
    gap:8px;
    margin:var(--mg24) 0 var(--mg40);
}

.scene-nav li a{
    background:var(--color-lpk);
    font-weight: 600;
    padding:8px 12px;
    color:var(--color-bk);
    border-radius:30px;
    font-size:var(--font-size-txt);
}

.item-wrapper{
    /* border:1px solid red; */
    margin-top:var(--mg64);
}

.item-wrapper a{
    transition: 0.2s;
}

.item-wrapper a:hover{
    opacity: 0.8;
}

.item-wrapper h3{
    color:var(--color-pk);
    font-size:var(--font-size-heading);
    margin-bottom:var(--mg16);
    font-weight: 500;
}

.item-copy-wrapper p{
    font-size:var(--font-size-sub-heading);
    font-weight: 600;
    line-height: 1.5;
}

.item-copy-wrapper ul {
    display: flex;
    gap:8px;
    margin:8px 0 var(--mg16);
}

.item-copy-wrapper ul li{
    width:fit-content;
    font-size:var(--font-size-sub-txt);
    padding:6px 12px;
    border:1px solid var(--color-bk);
    border-radius: 20px;
    font-weight: 500;
}


.item-image{
    margin-bottom:var(--mg16);
}

.item-name{
    border-bottom:1px solid (var(--color-bk));
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap:24px;
    border-bottom:1px solid var(--color-bk);
    padding:0 0 4px;
}

.item-name h4,.item-name p{
    font-size: var(--font-size-st-txt);
    font-weight: 600;
    line-height: 1.5;
}

.item-txt{
    font-size:var(--font-size-txt);
    line-height:1.9;
    margin:var(--mg16) 0 var(--mg24);
}

.item-txt span{
    font-weight: 700;
}

.review-ttl{
    color:var(--color-pk);
    font-weight: 600;
    font-size: var(--font-size-st-txt);
    display: flex;
}

.review-ttl::before{
    content:"";
    display: block;
    width:40px;
    height:20px;
    background:url(/img/usr/freepage/first_pumps_guide/review-icon.png) no-repeat center center/contain;
}

.item-review ul{
    display: grid;
    gap:16px;
    margin-top:16px;
}

.item-review ul li{
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap:16px;
}

.item-review ul li:last-child{
    grid-template-columns: 1fr 80px;
}

.item-review ul li div{
    background:var(--color-lpk);
    position: relative;
    padding:10px 10px 8px;

}

.item-review ul li div p{
    font-size:var(--font-size-sub-txt);
    line-height: 1.5;
    font-weight: 500;
}

.item-review ul li div::before{
    content:"";
    display: block;
    width:0;
    height:0;
    border-style:solid;
    position: absolute;
    top:0;
    bottom:0;
    margin:auto;
}

.item-review ul li:first-child div::before{
    border-width: 6px 10.4px 6px 0;
    border-color: transparent var(--color-lpk) transparent transparent;
    left:-10px;
}

.item-review ul li:last-child div::before{
    border-width: 6px 0 6px 10.4px;
    border-color: transparent transparent transparent var(--color-lpk);
    right:-10px;
}


.item-sub-cont{
    border:1px solid var(--color-bk);
    padding:var(--mg32) var(--mg16) var(--mg24);
    margin-top: var(--mg40);
    position: relative;
}

.item-sub-cont-ttl{
    text-align: center;
    position: absolute;
    top:-8px;
    left:0;
    right:0;
    margin:auto;
}

.item-sub-cont-ttl span{
    background:#fff;
    padding:0 4px;
    font-size:var(--font-size-st-txt);
    font-weight: 600;
}

.item-sub-cont ul{
    display: grid;
    gap:12px;
}

.item-sub-cont ul li a{
    display: grid;
    grid-template-columns: 120px 1fr;
    gap:16px;
    align-items: center;
    color:var(--color-bk);
}

.item-sub-cont ul li a p{
    font-weight:500 ;
    font-size:var(--font-size-txt);
    line-height: 1.5;
}

.item-sub-cont ul li a p:last-child{
    margin-top:8px;
}

/*order*/
.item-wrapper.order{
    background:var(--color-lpk);
    padding:var(--mg56) 5%;
}

.item-wrapper.order .sec-cont{
    margin-top:0;
}

.item-wrapper.order h3{
    text-align: center;
}

.item-wrapper.order h4{
    font-size: var(--font-size-st-txt);
}

.order-example-ttl{
    text-align: center;
    margin:var(--mg32) 0 0;
}


.order-example-ttl::after{
    content:"";
    display: block;
    width:100%;
    height:1px ;
    background:var(--color-bk);
    margin-top:-10px;
}


.order-example-ttl span{
    display: inline-block;
    width:fit-content;
    background:var(--color-lpk);
    padding:0 8px;
    font-weight: 600;
    font-size:var(--font-size-sub-heading);
}

.order-example-items{
    display: grid;
    grid-template-columns: auto auto;
    gap:16px;
    margin-top:var(--mg32);
}



@media (min-width: 768px) { 

    .scene-nav{
    padding:0 3%;
    gap:16px;
    margin:var(--mg32) 0 var(--mg80);
}

.scene-nav li a{
    padding:8px 24px;
    font-size:var(--font-size-st-txt);
}

.item-wrapper{
    padding:0 3%;
    margin-top:var(--mg96);
}

.item-wrapper h3{
    margin-bottom:var(--mg32);
}

.item-copy-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:var(--mg40);
}

.item-copy-wrapper ul {
    margin:0;
}

.item-image{
    margin-bottom:0;
}

.item-main-cont{
    display: grid;
    grid-template-columns: 46% 1fr ;
    gap:var(--mg40);
}

.item-name{
    padding:var(--mg16) 0 6px;
}

.item-txt{
    margin:var(--mg16) 0 var(--mg32);
}

.review-ttl::before{
    margin-top:2px;
}

.item-review ul{
    margin-top:20px;
}

.item-review ul li{
    grid-template-columns: 85px 1fr;
    gap:24px;
}


.item-review ul li:last-child{
    grid-template-columns: 1fr 85px;
}

.item-review ul li div{
    padding:15px;
    min-height: 85px;
    display: flex;
    align-items: center;
}

.item-review ul li div p{
    line-height: 1.8;
}

.item-sub-cont{
    padding:var(--mg56) var(--mg40) var(--mg32);
    position: relative;
    max-width:900px;
    margin:var(--mg56) auto 0;
}

.item-sub-cont-ttl{
    top:-10px;
}

.item-sub-cont-ttl span{
    padding:0 8px;
}

.item-sub-cont ul{
    grid-template-columns: 1fr 1fr;
    gap:var(--mg64);
}

.item-sub-cont ul li a{
    grid-template-columns: 150px 1fr;
    gap:20px;
}

.item-sub-cont ul li a p{
    line-height: 1.8;
}

.item-wrapper.order{
    padding:var(--mg80) 5% var(--mg64);
}

.order-example-ttl{
    margin:var(--mg64) 0 0;
}


.order-example-items{
    grid-template-columns: auto auto auto auto;
    gap:20px;
    margin-top:var(--mg56);
}

}

/*footer ******************************/

.page-btm-wrapper{
    padding:var(--mg40) 0;
}

.page-btm-wrapper .sec-btm-copy{
    margin:0;
}


.lp-footer{
padding:var(--mg40) 0 ;
border-top:1px solid var(--color-gy);
margin-top:var(--mg40) ;
}

.footer__jb_logo{
    max-width:240px;
    margin:0 auto;
}


.image-anime{
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
}

@media (min-width: 1200px) { 

    .page-btm-wrapper{
    padding:var(--mg64) 0;
}

.lp-footer{
padding:var(--mg40) 0 ;
margin-top:var(--mg40) ;
}



}