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

*{box-sizing:border-box}
/*html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#093a36;background:#fff}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin-top:0}
h2{font-size:clamp(24px,3vw,34px);line-height:1.4}
p{line-height:1.7}
img{display:block;max-width:100%}*/
.sitehead{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px max(24px,calc((100vw - 1220px)/2));background:white}
.brand{display:flex;align-items:center;gap:6px;color:#007d6b;font-size:24px}
.brand small{font-size:10px;color:#345;display:block}
.sitehead nav{display:flex;gap:17px;font-size:13px;font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:40px;padding:15px 27px;font-weight:800;text-align:center;transition:filter .2s}
.btn:hover{filter:brightness(.95)}
.red{background:#e9222f;color:#fff}
.topbtn{border-radius:9px;font-size:13px;padding:12px 18px}
.hero{background:linear-gradient(90deg,#e8f4e8,#e7f4f6);overflow:hidden}
.hero-inner{max-width:1260px;margin:auto;display:grid;grid-template-columns:52% 48%;min-height:575px}
.hero-copy{padding:30px 16px 35px 36px;z-index:1}
.label{display:inline-block;background:#004a3e;color:white;padding:10px 20px;border-radius:6px;font-weight:800;font-size:25px}
.hero h1{font-size:clamp(42px,5vw,70px);letter-spacing:-.045em;line-height:1.15;margin:14px 0 8px}
.hero h1 em{font-style:normal;color:#e51329;font-size:1.18em}
.twomin{display:inline-flex;align-items:center;background:#004f40;color:white;border:4px solid #d9bc57;clip-path:polygon(0 0,94% 0,100% 50%,94% 100%,0 100%);padding:3px 32px 3px 5px;font-size:36px;font-weight:900;line-height:1.2}
.twomin strong span{color:#f6d64b;font-size:1.7em}
.watch{font-size:66px;line-height:1;margin-right:8px}
.lead{font-size:23px;font-weight:900;margin:12px 0}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.chips span{font-size:13px;background:#fff;padding:12px 10px;border-radius:6px;font-weight:800}
.maincta{min-width:380px}
.hero-photo{position:relative;min-width:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:55% 50%}
.hero-photo p{position:absolute;bottom:20px;right:14px;background:#fffffff0;padding:14px;transform:rotate(-7deg);font-size:21px;font-weight:800}
.section{max-width:1200px;margin:auto;padding:55px 25px}
.section>h2{text-align:center;margin-bottom:10px}
.center{text-align:center}
.concerns{display:grid;grid-template-columns:23% 1fr 20%;gap:24px;align-items:center;padding-top:22px;padding-bottom:22px}
.concerns>img{width:100%;height:220px;object-fit:cover}
.concerns h2{text-align:left;font-size:28px}
.concerns aside{background:#fff3c6;padding:20px;transform:rotate(-5deg);font-size:18px;font-weight:800}
.checks{padding:0;list-style:none}
.checks li{margin:8px 0;line-height:1.55}
.checks li:before{content:'✓';display:inline-block;background:#e9232c;color:#fff;border-radius:3px;margin-right:9px;padding:0 4px}
.about{background:#004c42;color:#fff;padding:38px 25px}
.aboutinner{max-width:1150px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about h2{font-size:38px}
.about p{font-size:17px}
.aboutbadges{display:flex;gap:8px}
.aboutbadges span{background:#fff;color:#004d42;padding:15px;border-radius:8px}
.report{background:#fff;color:#073b37;padding:20px;border-radius:9px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.report>strong,.report>.note{grid-column:1/-1}
.score b{display:inline-block;color:#e61e31;font-size:54px}
.bar{height:13px;border-radius:15px;background:linear-gradient(90deg,#ffbd38,#e71c2e 60%,#eee 60%)}
.reporttext{font-size:13px;line-height:2}
.note{font-size:11px!important;color:#777}
.grid{display:grid;gap:16px}
.three{grid-template-columns:repeat(3,1fr)}
.four{grid-template-columns:repeat(4,1fr)}
.grid article{background:#fff;border:1px solid #e5e9e7;box-shadow:0 3px 12px #0000000b;border-radius:8px;overflow:hidden}
.factors article{display:flex;min-height:185px}
.factors img{width:42%;object-fit:cover}
.factors article>div{padding:12px;text-align:center;flex:1}
.num{display:inline-flex;width:30px;height:30px;border-radius:50%;background:#df2731;color:white;align-items:center;justify-content:center;font-weight:800}
.num.muted{background:#486678}
.factors h3{color:#c7252c;margin:8px 0}
.factors p{font-size:13px}
.pill{display:block;background:#eef0f2;padding:9px;font-size:12px;border-radius:5px}
.redbg{background:#e52231;color:#fff}
.features article{text-align:center;border:none;box-shadow:0 3px 12px #DDDDDD;padding:15px}
.ico{font-size:50px;color:#005447}
.features h3{font-size:20px}
.uses article{text-align:center}
.uses img{width:100%;height:135px;object-fit:cover}
.uses h3{margin:10px 0 3px}
.uses p{font-size:13px;padding:0 8px 12px}
.steps article{text-align:center;border:none;box-shadow:none;padding:10px}
.steps article>span{background:#005447;color:white;border-radius:20px;padding:4px 16px;font-size:12px}
.steps h3{margin:0 0 5px}
.steps p{font-size:13px}
.price{padding-top:30px}
.price>h2{text-align:left}
.pricebox{background:#eef2ea;padding:22px;display:grid;grid-template-columns:38% 38% 1fr;gap:14px;border-radius:9px}
.pricebox>div{background:white;border-radius:7px;padding:20px}
.pricebig span{background:#96833e;color:white;border-radius:20px;padding:8px 12px;font-size:14px}
.pricebig strong{display:block;color:#e92231;font-size:clamp(38px,4.5vw,58px);margin-top:14px;white-space:nowrap}
.pricebig small{font-size:.5em}
.priceincludes b{font-size:14px}
.priceincludes li{font-size:13px}
.pricenote{font-size:14px;line-height:2}
.finalcta{background:linear-gradient(#ffffff99,#ffffff88),url('../img/finalcta-bg.jpg') center/cover;padding:55px 25px;text-align:center}
.finalcta h2{font-size:29px}
.finalcta .btn{margin:6px}
.outline{border:2px solid #004c42;background:#fff}
/*footer{background:#004b41;color:white;display:flex;align-items:center;justify-content:space-between;padding:30px max(25px,calc((100vw - 1200px)/2));gap:20px}
footer strong{font-size:24px}
footer span,footer small{font-size:12px}*/
@media(max-width:850px){
/*.sitehead nav{display:none}*/
.hero-inner{grid-template-columns:1fr}
.hero-copy{padding:24px}
.hero-photo{height:380px}
.hero-photo img{object-position:center 34%}
.concerns{grid-template-columns:25% 1fr}
.concerns aside{display:none}
.aboutinner{grid-template-columns:1fr}
.three{grid-template-columns:1fr}
.four{grid-template-columns:repeat(2,1fr)}
.pricebox{grid-template-columns:1fr 1fr}
.pricenote{grid-column:1/-1}
}
@media(max-width:520px){
/*.topbtn{font-size:10px;padding:10px}
.brand{font-size:18px}*/
.hero h1{font-size:48px}
.twomin{font-size:25px}
.watch{font-size:48px}
.lead{font-size:19px}
.maincta{min-width:0;width:100%;font-size:14px}
.concerns{grid-template-columns:1fr}
.concerns>img{height:170px;object-position:center 30%}
.four{grid-template-columns:1fr 1fr}
.factors article{min-height:170px}
.pricebox{grid-template-columns:1fr}
.pricenote{grid-column:auto}
/*footer{flex-direction:column;text-align:center}*/
}

/*追加記述*/
#yameru { scroll-behavior:smooth; margin:70px 0 0; padding-bottom:60px; font-size:16px; font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; color:#093a36; background:#fff;}
#yameru h2 { margin-bottom:1.0em; line-height:1.4;}
#yameru p { margin-bottom:1.0em; line-height:1.7;}
#yameru img { display:block; max-width:100%;}
#yameru section { text-align:left;}
#yameru a.maincta { color:#FFFFFF; text-decoration:none;}
#yameru .concerns h2 { font-size:28px;}
#yameru .factors h2,
#yameru .features h2,
#yameru .uses h2,
#yameru .steps h2,
#yameru .price h2 { font-size:clamp(24px,3vw,34px); margin-bottom:10px;}
#yameru .factors h3 { font-size:20px;}
#yameru .uses h3 { font-size:20px;}
#yameru .steps h3 { font-size:20px;}
#yameru section.finalcta { text-align:center;}
#yameru section.finalcta a.red { color:#FFFFFF;}
#yameru section.finalcta a.outline { color:#004c42;}
#yameru .chips span { min-height:45px; padding-left:50px; background-position:5px center; background-repeat:no-repeat;}
#yameru .chips span:nth-of-type(1) { background-image:url(../img/main-icon01.jpg);}
#yameru .chips span:nth-of-type(2) { background-image:url(../img/main-icon02.jpg);}
#yameru .chips span:nth-of-type(3) { background-image:url(../img/main-icon03.jpg);}
#yameru .aboutbadges span { min-height:55px; padding-left:60px; background-position:5px center; background-repeat:no-repeat;}
#yameru .aboutbadges span:nth-of-type(1) { background-image:url(../img/about-icon01.jpg);}
#yameru .aboutbadges span:nth-of-type(2) { background-image:url(../img/about-icon02.jpg);}
#yameru .factors article:nth-of-type(2) h3,
#yameru .factors article:nth-of-type(3) h3 { color:#486678;}
#yameru .factors article p { position:relative; margin-bottom:35px;}
#yameru .factors article .pill { position:relative; font-size:14px;}
#yameru .factors article .pill span { display:block; font-size:18px;}
#yameru .factors article p:after { position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); width:10px; height:10px; background:#3F8C66; content:"";}
#yameru .factors article .pill:before { position:absolute; top:-21px; left:50%; transform:translateX(-50%); width:20px; height:10px; background:#3F8C66; content:""; clip-path:polygon(0 0/*, 0 100%*/, 50% 100%, 100% 0);}
#yameru .factors article:nth-of-type(1) p:after,
#yameru .factors article:nth-of-type(1) .pill:before { background:#df2731;}
#yameru .features h3 { display:inline-block; margin-bottom:1.0em; padding-left:60px; background-position:5px center; background-repeat:no-repeat;}
#yameru .features article:nth-of-type(1) h3 { background-image:url(../img/features-icon01.jpg);}
#yameru .features article:nth-of-type(2) h3 { background-image:url(../img/features-icon02.jpg);}
#yameru .features article:nth-of-type(3) h3 { background-image:url(../img/features-icon03.jpg);}
#yameru .steps article { position:relative; overflow:visible;}
#yameru .steps article:after { position:absolute; top:50%; transform:translateY(-50%) rotate(45deg); right:-12px; width:15px; height:15px; border-top:2px solid; border-right:2px solid; content:""; z-index:99;}
#yameru .steps article:last-of-type:after { display:none;}
#yameru .steps .ico { margin:5px auto; text-align:center;}
#yameru .steps .ico img { margin:0 auto;}
#yameru .finalcta h2,
#yameru .finalcta p { text-shadow:
1px 0px 1px rgba(255,255,255,1.0),
1px 1px 1px rgba(255,255,255,1.0),
0px 1px 1px rgba(255,255,255,1.0),
-1px 0px 1px rgba(255,255,255,1.0),
-1px -1px 1px rgba(255,255,255,1.0),
0px -1px 1px rgba(255,255,255,1.0),
0px 0px 5px rgba(255,255,255,1.0),
0px 0px 10px rgba(255,255,255,1.0),
0px 0px 15px rgba(255,255,255,1.0),
0px 0px 20px rgba(255,255,255,1.0);}
@media(max-width:850px){
#yameru .steps article:nth-of-type(2):after { top:auto; transform:translateY(0%) rotate(180deg); right:auto; bottom:-15px; left:-15px;}
}
@media all and (max-width:719px)
{
#yameru { margin:52px 0 0;}
.section { padding:55px 15px;}
}
@media all and (max-width:399px)
{
#yameru .uses .four,
#yameru .steps .four { grid-template-columns:1fr;}
#yameru .steps article:after,
#yameru .steps article:nth-of-type(2):after { top:auto; transform:translateY(0%) translateX(-50%) rotate(135deg); right:auto; bottom:-10px; left:50%;}
}


/*20261027追加記述*/
#yameru .toolinfo h2 { font-size:clamp(24px,3vw,34px); margin-bottom:20px;}
#yameru .toolinfo div { display:grid; grid-template-columns:1fr 35%; gap:24px;}
#yameru .toolinfo div > img { order:2; width:100%; height:220px; object-fit:cover;}
#yameru .toolinfo div > p { order:1;}
@media(max-width:520px){
#yameru .toolinfo div { grid-template-columns:1fr;}
#yameru .toolinfo div > img { order:1; height:170px; object-position:center 30%;}
#yameru .toolinfo div > p { order:2;}
}