@charset "utf-8";
/* CSS Document */

:root{
--mainColor:#000;
--subColor:#fff;
--axColor:#b90004;
--baseWidth:clamp(100px,100vw,1000px);
--bBorder:2px solid #fad6c6;
}

html{scroll-behavior:smooth;}
body[data-device="pc"] nav[data-nav="menu"]{display:none;}

/*--------------------------------------------------------*/
@media screen and (max-width:800px){}
@media screen and (max-width:1000px){}

.btn{display:flex;justify-content:center;flex-wrap:wrap;}
.btn a{display:flex;background:#fff;color:#b40808;border-radius:0.5em;padding:1em 2em;font:600 1em / 1 'LINE Seed JP';
justify-content:center;align-items:end;}
.btn a::before{content:"";display:block;width:1.5em;height:1em;box-shadow:0 0 0 0.1em;margin-right:0.2em;
background:
linear-gradient(45deg,#fff 50%,#b40808 50%,#b40808 62%,#fff 62%) no-repeat 0 0% / 50% 90%,
linear-gradient(135deg,#fff 38%,#b40808 38%,#b40808 50%,#fff 50%) no-repeat 100% 0 / 50% 90%;
border-radius:0.1em;transform:scale(0.6);}

/*--------------------------------------------------------*/


#nations{font:200 clamp(20px,4vw,40px) / 1.5 'LINE Seed JP';width:clamp(100px,100%,100svw);padding:0;}
#nations .lpMain{min-height:100svh;background:#fff;}


#nations .lpMain section>.hd{width:clamp(100px,100%,1280px);margin:0 auto;}
#nations .lpMain section>.box{width:clamp(100px,100%,1280px);margin:0 auto;}
#nations .lpMain section>.wrap>.box{width:unset;}

div.hd{font-size:0.8em;padding:1em 0;text-align:center;}
div.hd>p.subject{font-size:1em;font-weight:700;}
div.hd>p.subject{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}
div.hd>p.subject>span{display:block;padding:0 0.5em;color:var(--axColor);font-size:0.75em;}
div.hd>p.subject::after,
div.hd>p.subject::before{width:4em;display:block;content:"";height:1em;background:linear-gradient(0deg,var(--axColor) 100%) no-repeat 50% 50% / 100% 2px;}
div.hd>p.caption{font-size:1.25em;font-weight:600;padding:0.5em 0;}
div.hd>p.text{font-size:0.625em;font-weight:400;}

/*--------------------------------------------------------*/
#nations .lpMain>section{padding:2vw 0;}
[data-device="smp"] #nations .lpMain>section{padding:2vw;}

p.notice{font-size:clamp(12px,2vw,15px);text-align:center;padding:1em 0;}
/*-------------------*/

#nations .lpMain>section#nat01{padding-top:90px;background:linear-gradient(45deg,#fff 60%,#c00 150%)}
[data-device="smp"] #nations .lpMain>section#nat01{padding:0px;}

main section#nat01 .wrap{padding:0;position:relative;}
[data-device="smp"] #nations section#nat01 .wrap{padding:2vw;}

main section#nat01 .wrap h2{color:#c00;font-size:0.5em;}
main section#nat01 .wrap>h3{padding:0.25em 0.5em;font-size:0.5em;color:#fff;margin:1em 0;line-height:1.5;}
main section#nat01 .wrap>h3{width:18em;background:linear-gradient(135deg,#c00 49%,transparent 50%) no-repeat 100% 100% / 2em 2em,
linear-gradient(45deg,#c00 49%,transparent 50%) no-repeat 100% 100% / 2em 2em,
linear-gradient(0deg,#c00 100%) no-repeat 0% 0% / calc(100% - 2em) 100%;}

main section#nat01 .wrap>p[class]{padding:0;position:absolute;right:0;top:0;font-size:0.5em}
main section#nat01 .wrap>div[class]{width:100%;}
[data-device="pc"] main section#nat01 .wrap>div.box{width:70%;}
section#nat01 .wrap>div.box h3{padding:0.5em 0;font-size:1.25em;}
section#nat01 .wrap>div.box h3 span{display:block;}
section#nat01 .wrap>div.box h3 strong{display:block;font-size:1.5em;transform:translate(-0.5em)}
section#nat01 .wrap>div.box  .sbjct{font-size:0.75em;font-weight:600;padding:0 0 1em;}
section#nat01 .wrap>div.box  .text{font-size:0.6em;font-weight:400;padding:0 0 1em;}

section#nat01 .wrap>div.box .list{display:flex;font-size:0.45em;justify-content:left;align-items:center;flex-wrap:wrap;gap:0.5em;}
section#nat01 .wrap>div.box .list>li{display:block;border-radius:2em;box-shadow:0 0 0 1px #ccc inset;padding:0.5em 1em;margin:0.25em 0;}


[data-device="smp"] #nations section#nat01 .wrap>p[class]{position:relative;right:0;}

section#nat01 .notice{text-align:left;padding:1em 0.5em;}
section#nat01 .btn{justify-content:left;padding:0.5em 0 0;}
section#nat01 .btn a{display:flex;background: #1d9e4b;color:#fff;border-radius:0.5em;padding:1em 2em;font:600 0.5em / 1 'LINE Seed JP';justify-content:center;align-items:end;}
section#nat01 .btn a::before{content:"";display:block;width:1.5em;height:1em;box-shadow:0 0 0 0.1em;margin-right:0.2em;
background:
linear-gradient(45deg,#1d9e4b 50%,#fff 50%,#fff 62%,#1d9e4b 62%) no-repeat 0 0% / 50% 90%,
linear-gradient(135deg,#1d9e4b 38%,#fff 38%,#fff 50%,#1d9e4b 50%) no-repeat 100% 0 / 50% 90%;
border-radius:0.1em;transform:scale(0.6);}


section#nat01{position:relative;}
#smartphone{position:absolute;height:16em;width:16em;right:0;top:3em;display:flex;flex-wrap:wrap;gap:4%;justify-content:right;align-items:start;font-size:0.8em;}
#smartphone dl{display:flex;box-shadow:0 0 0 0.25em inset;border-radius:0.5em;padding:0.2em;box-sizing:border-box;height:80%;width:48%;
flex-flow:column;justify-content:stretch;align-items:stretch;}
#smartphone dl dt{background:#eee;font-weight:800;text-align:center;border-radius:0.5em 0.5em 0 0;font-size:0.5em;height:2em;}
#smartphone dl dd>div.disp{background:#ccc linear-gradient(-135deg,transparent 0,#eee 100% );height:8em;width:100%;display:flex;justify-content:center;align-items:center;font-weight:600;font-size:0.65em;}
#smartphone dl dd>div.seal{background:var(--axColor);position:absolute;height:6em;width:6em;border-radius:100%;display:flex;color:#fff;z-index:1;
justify-content:center;align-items:center;text-align:center;line-height:1.2;font-weight:600;right:-3em;bottom:calc(50% - 3em);transform:scale(0.6) rotate(10deg)}


#smartphone dl dd{background:#fff;height:100%;border-radius:0 0 0.25em 0.25em;position:relative;}
#smartphone dl dd>div.htmlbox{content:"";display:block;width:96%; height:3.6em;position:absolute;top:5.5em;left:2%;}
#smartphone dl dd::after{content:"";display:block;background:linear-gradient(0deg,#fff 100%) no-repeat 31% 0/ 3% 100%,linear-gradient(0deg,#fff 100%) no-repeat 65% 0 / 3% 100%;width:96%; height:1.8em;position:absolute;bottom:0.25em;left:2%;background-color:var(--mainColor);}

#smartphone dl#phone01{transform:rotate(-10deg) translate(-1.5em,1em);}
#smartphone dl#phone02{color:var(--axColor);transform:rotate(10deg);}
#smartphone dl#phone02{color:var(--axColor)}
#smartphone dl#phone02 dt{background:var(--axColor);color:var(--subColor);}
#smartphone dl#phone02 dd>div.disp{background:#d3b483 linear-gradient(-45deg,transparent 0,#f0e8db 100% );color:#813e14;line-height:1;text-align:center;}
#smartphone dl#phone02 dd::after{background-color:#d3b483;}


#smartphone dl dd>div.htmlbox{background:linear-gradient(0,#eee 100%) no-repeat 0 0 / 100% 0.5em,linear-gradient(0,#eee 100%) no-repeat 0 0.7em / 100% 0.5em,linear-gradient(0,#eee 100%) no-repeat 0 1.4em / 100% 0.5em,linear-gradient(0,#fee 100%) no-repeat 0 2.1em / 100% 0.5em,linear-gradient(0,#eee 100%) no-repeat 0 2.8em / 100% 0.5em;}
#smartphone dl#phone02 dd>div.htmlbox{background:linear-gradient(0,#fee 100%) no-repeat 0 0 / 100% 0.5em,linear-gradient(0,#eee 100%) no-repeat 0 0.7em / 100% 0.5em,linear-gradient(0,#eee 100%) no-repeat 0 1.4em / 100% 0.5em,linear-gradient(0,#eee 100%) no-repeat 0 2.1em / 100% 0.5em,linear-gradient(0,#eee 100%) no-repeat 0 2.8em / 100% 0.5em;}

[data-device="smp"] .box{z-index:2;position:relative;padding-bottom:12em;}
[data-device="smp"] #smartphone{z-index:1;opacity:1;top:unset;bottom:0em;right:4em;}

/*-------------------*/
#nat02{}


[data-device="pc"] #nat02 .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:2%;}
#nat02 .wrap{padding:0;}
[data-device="smp"] #nat02 .wrap>div{margin:0.5em 0;}

[data-device="pc"] #nat02 .left{width:44%;}
#nat02 .left{background:#333;border-radius:0.5em;padding:1em;color:#fff;font-size:0.75em;box-sizing:border-box;}
#nat02 .left dl{display:block;}
#nat02 .left dl>dt{font-size:1em;font-weight:500;margin:0 0 1em 0;font-weight:600;}
#nat02 .left dl>dd>ul>li{font-size:0.65em;display:flex;font-weight:400;margin:1em 0;}
#nat02 .left dl>dd>ul>li::before{content:"L";transform:scale(-0.8,0.8) rotate(-45deg);display:block;color:#c00;font-weight:600;margin-right:0.4em;}

[data-device="pc"] #nat02 .right{width:54%;}
#nat02 .right{background:#fefaf1;border-radius:0.5em;padding:1em;font-size:0.75em;box-sizing:border-box;}
#nat02 .right div.hd{font-size:0.8em;padding:0;text-align:left;color:var(--axColor);}
#nat02 .right div.hd .text{color:var(--mainColor);font-size:0.75em;padding:0 0 1em;}
#nat02 .right div.hd>p.subject{justify-content:left;}
#nat02 .right>ol{display:flex;align-items:stretch;justify-content:left;gap:2%;counter-reset:number 0;flex-wrap:wrap;font-weight:300;}
#nat02 .right>ol>li{box-shadow:0 0 0 1px #ccc inset;border-radius:0.5em;background:#fff;display:block;counter-increment: number 1;padding:1em 0.5em;width:23.5%;box-sizing:border-box;font-size:0.5em;position:relative;}
#nat02 .right>ol>li::before{content:counter(number);display:block;border-radius:100%;width:1.6em;height:1.6em;margin:0 auto;background:var(--axColor);color:#fff;font-size:1em;text-align:center;line-height:1.6;font-weight:700;}
#nat02 .right>ol>li strong{display:block;padding:0.5em 0 0;margin:0 -0.2em;text-align:center;font-weight:700;font-size:1.2em;}
#nat02 .right>ol>li::after{content:'';display:block;width:1.6em;height:1.6em;position:absolute;right:-1em;top:calc(50% - 0.8em);
box-shadow:-0.5em 0.5em 0 0 #c6b36e inset;transform:rotate(45deg) scale(0.6);}
#nat02 .right>ol>li:last-of-type::after{display:none;}


/*-------------------*/
#nat03{}
#nat03 .text{color:#999;}
#nat03 .box>ol{display:flex;align-items:stretch;justify-content:left;gap:2%;counter-reset:number 0;flex-wrap:wrap;}
#nat03 .box>ol>li{box-shadow:0 0 0 1px #ccc inset,5px 5px 10px #00000010;border-radius:0.5em;background:#fff;display:block;counter-increment: number 1;width:23.5%;overflow:hidden;box-sizing:border-box;font-size:0.5em;position:relative;padding-bottom:1em;}
#nat03 .box>ol>li::before{content:counter(number)'週目' ;display:block;background:var(--axColor) linear-gradient(-90deg,#d63837 0%,transparent 100%) ;color:#fff;font-size:0.8em;text-align:center;line-height:1;font-weight:600;padding:1em 0;}

#nat03 .box>ol>li dl{padding:1em;font-size:0.9em;}
#nat03 .box>ol>li dl>dt{font-weight:600;padding:0.5em 0;}
#nat03 .box>ol>li dl>dd{padding:0.5em 0;font-weight:400;}


#nat03 .box>ol>li .stickyNotes{background:#fff6ef linear-gradient(0,#c1a75c 100%) repeat-y 0 0 / 0.5em 1em;margin:0 1em;padding:1em;font-size:0.8em;box-sizing:border-box;}
#nat03 .box>ol>li .stickyNotes p{font-weight:600;}
#nat03 .box>ol>li .stickyNotes ul{display:inline;}
#nat03 .box>ol>li .stickyNotes ul>li{display:inline}
#nat03 .box>ol>li .stickyNotes ul>li::after{content:"／";}

[data-device="smp"] #nat03 .box>ol>li{width:48%;margin-bottom:2%;}

/*-------------------*/
#nat04{background:#efefef;}
#nat04 .text{color:#999;}
#nat04 .box{display:flex;flex-wrap:wrap;gap:2%;}
#nat04 .box>dl{display:block;width:32%;font-size:0.5em;margin:1% 0;box-shadow:5px 5px 10px #00000010,0 0.2em 0 var(--axColor) inset;background:#fff;border-radius:0.5em;padding:1em 0.5em;box-sizing:border-box;}

#nat04 .box>dl::before{content:"";display:block;width:2em;height:2em;margin:0 auto 0 0;background:#eee;}
#nat04 .box>dl dt{font-weight:600;margin-top:1em;}
#nat04 .box>dl dd{font-weight:400;}

[data-device="smp"] #nat04 .box>dl{width:48%;margin-bottom:2%;}

#nat04 .box>dl:nth-of-type(1)::before{background:url(nat04_01.png) no-repeat 50% 50% / 100% auto;}
#nat04 .box>dl:nth-of-type(2)::before{background:url(nat04_02.png) no-repeat 50% 50% / 100% auto;}
#nat04 .box>dl:nth-of-type(3)::before{background:url(nat04_03.png) no-repeat 50% 50% / 100% auto;}
#nat04 .box>dl:nth-of-type(4)::before{background:url(nat04_04.png) no-repeat 50% 50% / 100% auto;}
#nat04 .box>dl:nth-of-type(5)::before{background:url(nat04_05.png) no-repeat 50% 50% / 100% auto;}
#nat04 .box>dl:nth-of-type(6)::before{background:url(nat04_06.png) no-repeat 50% 50% / 100% auto;}

/*-------------------*/
#nat05{}
#nat05 .text{color:#999;}
#nat05 .box>ul{display:flex;flex-wrap:wrap;gap:2%;}
#nat05 .box>ul>li{display:block;width:32%;font-size:0.5em;margin:1% 0;box-shadow:5px 5px 10px #00000010;background:#fff;border-radius:0.5em;box-sizing:border-box;overflow:hidden;}
.bfaf{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:10em;
background:#eee linear-gradient(90deg,transparent 50%,#fdeecf 50%,#e1b878 100%) repeat-y }
.bfaf>.bf,
.bfaf>.af{width:50%;padding:1em 2.4em;box-sizing:border-box;text-align:center;font-size:0.8em;font-weight:600;}

.bfaf>.bf::before{content:"BEFORE";}
.bfaf>.af::before{content:"AFTER";}

.bfaf>.bf::before,
.bfaf>.af::before{display:block;text-align:center;font-weight:800}
.bfaf>.bf{color:#666;}
.bfaf>.af{color:#7f1a1a;}

#nat05 .box>ul>li .pnt{padding:1em;font-size:0.8em;font-weight:600;color:#666}
#nat05 .box>ul>li .pnt::before{content:"改善ポイント";color:#c00;display:inline-block;border-radius:2em;
background:#fbe8ec;padding:0.25em 1em;margin:0 0 0.5em;}


[data-device="smp"] #nat05 .box>ul>li:first-of-type{margin-left:26%;margin-right:26%;}
[data-device="smp"] #nat05 .box>ul>li{width:48%;margin-bottom:2%;}

/*-------------------*/
#nat06{background:#eee;}

#planSlide{display:flex;flex-wrap:wrap;gap:2%;}
#planSlide>div{width:32%;background:#fff;border-radius:0.5em;overflow:hidden;box-shadow:0 0 0 2px #ccc inset;font-size:0.8em;font-weight:600;box-sizing:border-box;position:relative;}

#planSlide>div{padding:1em 1em 0.8em;text-align:center;}
#planSlide>div dd{color:var(--axColor);font-weight:800;}
#planSlide>div dd::after{content:"円(税込)";font-size:0.5em;font-weight:800;}
#planSlide>div:last-of-type dd::after{display:none;}

#planSlide>div .text{font-size:0.65em;padding:0 0 0.5em 0;font-weight:800;}
#planSlide>div ul{display:block;text-align:left;padding:0 0 0 2em;font-size:0.6em;}
#planSlide>div#ligthPlan ul::after{content:" 　";display:block;}

#nat06 .btn a{display:flex;background:#b40808 linear-gradient(90deg,transparent 0%,#df2a2a 100%);color:#fff;border-radius:0.2em;padding:0.75em 2em;box-shadow:0.1em 0 0.2em #dd8083;width:98%;margin:1em 1% 0.2em}
#nat06 .btn a span{font-size:0.65em;}
#nat06 .btn a::before{display:none;}

#planSlide>div#standardPlan{box-shadow:0 0 0 2px #b40808 inset,0 0 0 2px #b40808;position:relative;
overflow:visible;}
#planSlide>div#standardPlan::before{content:"おすすめ";display:block;width:unset;position:absolute;font-weight:600;
left:calc(50% - 3em);top:-0.8em;font-size:0.75em;background:#b40808;border-radius:2em;padding:0 1em;color:#fff;}


[data-device="smp"] #planSlide>div{width:96%;margin:4% 2%;}
[data-device="smp"] #planSlide>div{display:flex;flex-wrap:wrap;justify-content:left;align-items:center;position:relative;}
[data-device="smp"] #planSlide>div dl{width:45%;margin:0;box-sizing:border-box;margin-bottom:1em;}
[data-device="smp"] #planSlide>div .text{font-size:0.65em;position:absolute;left:1em;bottom:6em;width:45%;}
[data-device="smp"] #planSlide>div ul{width:55%;margin:0;box-sizing:border-box;}
[data-device="smp"] #planSlide>div p{width:100%;}
/*-------------------*/
#nat07{background:#000;color:#fff;}
#nat07 .wrap{padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;}


[data-device="pc"] #nat07 .wrap .hd{width:25%;font-size:0.5em;text-align:left;}
[data-device="pc"] #nat07 .wrap .hd .subject{font-size:1em;justify-content:left;}
#nat07 .wrap .hd .subject span{color:#fff;}
#nat07 .wrap .hd .subject::after,
#nat07 .wrap .hd .subject::before{width:1.5em;background:linear-gradient(0,#fff 100%) no-repeat 50% 50% / 100% 2px;}
[data-device="pc"] #nat07 .wrap .hd .caption{font-size:2em;}
#nations #nat07 .wrap .box{width:75%;}
#nat07 .wrap .box>ul{padding:1em 1em 0 0;font-size:0.5em;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2%;}
#nat07 .wrap .box>ul>li{width:49%;box-sizing:border-box;padding-left:1em;display:block;}
#nat07 .wrap .box>ul>li{position:relative;}
#nat07 .wrap .box>ul>li:before{content:"L";display:block;position:absolute;left:0;transform:scale(-0.8,0.8) rotate(-30deg);font-weight:600;color:#c00;font-size:1em;height:1em;}

#nat07 .wrap .box>ul>li:nth-of-type(1){order:1}
#nat07 .wrap .box>ul>li:nth-of-type(2){order:3}
#nat07 .wrap .box>ul>li:nth-of-type(3){order:5}
#nat07 .wrap .box>ul>li:nth-of-type(4){order:7}
#nat07 .wrap .box>ul>li:nth-of-type(5){order:2}
#nat07 .wrap .box>ul>li:nth-of-type(6){order:4}
#nat07 .wrap .box>ul>li:nth-of-type(7){order:6}
#nat07 .wrap .box>ul>li:nth-of-type(8){order:8}

[data-device="smp"] #nat07 .wrap{padding:0;}
[data-device="smp"] #nations #nat07 .wrap>*{width:100%;gap:0;}

/*-------------------*/
#nat08{}
#nat08 .box>ol{display:flex;flex-wrap:wrap;justify-content:center;align-items:start;}
#nat08 .box>ol>li{display:flex;flex-flow:column wrap;counter-increment: number 1;justify-content:start;align-items:center;width:16.5%;padding:0.5em 0;}
#nat08 .box>ol>li::before{content:counter(number);display:flex;width:2.5em;height:2.5em;justify-content:center;font-weight:600;align-items:center;border-radius:100%;color:var(--axColor);background:#fff;text-align:center;line-height:1;box-shadow:0 0 0 0.1em;font-size:0.5em;}
#nat08 .box>ol>li dl{font-size:0.5em;}
#nat08 .box>ol>li dl>*{display:block;text-align:center;}
#nat08 .box>ol>li dl>dt{font-weight:600;padding:0.75em 0 0.2em;}
#nat08 .box>ol>li dl>dd{font-weight:400;font-size:0.85em;}


[data-device="smp"] #nat08 .box>ol>li{width:32%;}
/*-------------------*/
#nat09{background:#eee;}


#faqList{font-size:0.5em;padding:1em;}
#faqList dl{font-weight:600;background:#ffffff;border-radius:0.5em;margin:1em;padding:0.75em;padding-left:2.5em;position:relative;box-shadow:0 0 0 1px #ccc,0 0 10px #ccc;}

#faqList dl::before{content:'▼';display:block;position:absolute;left:1em;transform:rotate(-90deg) scale(0.75);transition:0.4s;}
#faqList dl.open::before{content:'▼';transform:rotate(0deg) scale(0.75);transition:0.4s;}

#faqList dl>dd{height:0;padding:0;transition:0.4s;transition-delay:0.2s;z-index:-1;overflow:hidden;opacity:0;}
#faqList dl.open>dd{height:unset;padding:0;transition:0.4s;transition-delay:0.2s;z-index:1;overflow:unset;opacity:1;}

#faqList dl>dd>div{position:relative;}
#faqList dl>dd>div::before{content:"A.";position:absolute;left:-1.5em;font-weight:800;color:var(--axColor)}



[data-device="smp"] #faqList{padding:1em 0;}

/*-------------------*/
#nat10{background:#b40808;color:#fff;}
#nat10 div.box{font-size:0.5em;}


#nations .lpMain>aside{padding:2em 0;font-size:clamp(12px,2vw,15px);}
#nations .lpMain>aside>p.notice{padding:0;}