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

:root{--green:#075a43;--red:#e33126;--gold:#d9b653;--pale:#f1f8f3;--line:#d9dfdc;--text:#1c2421}
.analysis-comparison{font-family:"Noto Sans JP",sans-serif;color:var(--text);background:#fff}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;/*align-items:center*/}
.hero h1,.research-block h2,.strengths h2,.steps h2{font-family:"Noto Serif JP",serif;color:var(--green);margin:0}
.hero h1{font-size:clamp(38px,5vw,68px);line-height:1.15}
.hero h2{font-family:"Noto Serif JP",serif;font-size:clamp(25px,3vw,38px);margin:6px 0 18px}
.hero p{font-size:18px;line-height:1.8;margin:4px 0}
.hero img,.research-block img,.results img{width:100%;height:auto;display:block;object-fit:cover}
.table-wrap{overflow-x:auto;margin:32px 0}
.comparison-table{width:100%;min-width:1100px;border-collapse:collapse;font-size:14px}
.comparison-table th,.comparison-table td{border:1px solid var(--line);padding:13px 10px;text-align:center;vertical-align:middle}
.comparison-table thead th{background:#505453;color:#fff}
.comparison-table thead th:first-child{background:var(--green)}
.comparison-table .iro{background:#fbf9e9;color:var(--green);font-weight:700}
.comparison-table strong{color:var(--red)}
.research-block{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;/*align-items:center;*/background:linear-gradient(90deg,#f6faf6,#fff);/*padding:28px;*/margin:28px 0}
.research-block h2{font-size:34px}
.research-block p{line-height:1.8}
.button{display:inline-block;background:var(--green);color:#fff;text-decoration:none;padding:14px 28px;border-radius:4px;font-weight:700}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.cards article{background:var(--pale);padding:22px;border-radius:8px}
.cards span{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;font-weight:700}
.cards h3{font-size:22px;color:var(--green)}
.cards strong,.results strong{color:var(--red)}
.steps{margin:30px 0}
.steps ol{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:0;list-style:none;counter-reset:step}
.steps li{background:#f8faf8;padding:18px;text-align:center;line-height:1.6}
.steps li:before{counter-increment:step;content:"0" counter(step);display:block;color:var(--green);font-weight:800;font-size:22px}
/*.results{display:grid;grid-template-columns:.8fr 1.1fr 1.1fr;gap:24px;align-items:center;background:linear-gradient(90deg,#eff8f2,#fff);padding:20px}
.results h2{font-family:"Noto Serif JP",serif;font-size:36px;margin:4px 0}
.results strong{font-size:56px}*/
.eyebrow{display:inline-block;background:var(--green);color:#fff;/*padding:6px 12px*/}
.results p{line-height:1.8}
@media(max-width:760px){
.hero,.research-block,.results{grid-template-columns:1fr}
.hero img{order:-1}
.cards{grid-template-columns:1fr}
.steps ol{grid-template-columns:1fr}
.container{padding:20px 14px}
.hero h1{font-size:38px}
.hero p{font-size:16px}
.research-block h2{font-size:28px}
.results h2{font-size:30px}
.results strong{font-size:46px}
}

/*追加記述*/
#compare { max-width:1180px; margin:70px auto 0; padding:32px 20px; text-align:left; font-size:16px;}
#compare a.button { margin:0.5em 0 0; color:#FFFFFF;}
.hero > div:nth-of-type(2) {}
.hero > div:nth-of-type(2) img { width:100%; height:100%; object-fit:cover; object-position:center right;}
small { font-size:12px;}
large { font-size:24px;}
table th,
table td { width:11.5%;}
table tr > th:first-of-type { width:14%;}
table tbody > tr > th:first-of-type { padding-left:55px; text-align:left; background-color:#F7F8F9;}
table tbody > tr:nth-of-type(1) > th:first-of-type { background:url(../img/bk01-icon01.jpg) 10px center no-repeat #F7F8F9;}
table tbody > tr:nth-of-type(2) > th:first-of-type { background:url(../img/bk01-icon02.jpg) 10px center no-repeat #F7F8F9;}
table tbody > tr:nth-of-type(3) > th:first-of-type { background:url(../img/bk01-icon03.jpg) 10px center no-repeat #F7F8F9;}
table tbody > tr:nth-of-type(4) > th:first-of-type { background:url(../img/bk01-icon04.jpg) 10px center no-repeat #F7F8F9;}
table tbody > tr:nth-of-type(5) > th:first-of-type { background:url(../img/bk01-icon05.jpg) 10px center no-repeat #F7F8F9;}
table tbody > tr:nth-of-type(6) > th:first-of-type { background:url(../img/bk01-icon06.jpg) 10px center no-repeat #F7F8F9;}
table tbody > tr:nth-of-type(7) > th:first-of-type { background:url(../img/bk01-icon07.jpg) 10px center no-repeat #F7F8F9;}
table tbody > tr:nth-of-type(8) > th:first-of-type { background:url(../img/bk01-icon08.jpg) 10px center no-repeat #F7F8F9;}
table tbody > tr:nth-of-type(9) > th:first-of-type { background:url(../img/bk01-icon09.jpg) 10px center no-repeat #F7F8F9;}
table tbody > tr:nth-of-type(10) > th:first-of-type { background:url(../img/bk01-icon10.jpg) 10px center no-repeat #F7F8F9;}
table th.iro { width:17%; font-size:24px;}
table td.iro { width:17%; font-size:18px;}
table th.iro span,
table td.iro span { font-size:14px;}
.research-block > div:first-of-type { padding:28px;}
.research-block > div img { width:100%; height:100%; object-fit:cover; object-position:center right;}
.strengths { margin:0; padding:15px; background:var(--pale);}
.strengths h2{ margin:0; padding:0 15px 5px; font-size:34px;}
.strengths .cards {}
.strengths .cards article { position:relative; padding-left:120px;}
.strengths .cards article:nth-of-type(1) { background:url(../img/bk03-icon01.jpg) 25px 50px no-repeat #FFFFFF;}
.strengths .cards article:nth-of-type(2) { background:url(../img/bk03-icon02.jpg) 25px 50px no-repeat #FFFFFF;}
.strengths .cards article:nth-of-type(3) { background:url(../img/bk03-icon03.jpg) 25px 50px no-repeat #FFFFFF;}
.strengths .cards article span { position:absolute; top:10px; left:10px; font-size:24px;}
.steps h2 { margin:0; padding:0 15px 5px; font-size:34px;}
.steps li { position:relative; text-align:left; padding-left:70px;}
.steps li:nth-of-type(1) { background:url(../img/bk04-icon01.jpg) 15px 45px no-repeat #f8faf8;}
.steps li:nth-of-type(2) { background:url(../img/bk04-icon02.jpg) 15px 45px no-repeat #f8faf8;}
.steps li:nth-of-type(3) { background:url(../img/bk04-icon03.jpg) 15px 45px no-repeat #f8faf8;}
.steps li:nth-of-type(4) { background:url(../img/bk04-icon04.jpg) 15px 45px no-repeat #f8faf8;}
.steps li:nth-of-type(5) { background:url(../img/bk04-icon05.jpg) 15px 45px no-repeat #f8faf8;}
.steps li:before { position:absolute; top:10px; left:10px; display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--green); color:#fff; font-weight:700; font-size:18px;}
.steps li b { color:var(--green);}
.steps li:after { position:absolute; top:50%; transform:translateY(-50%); right:-15px; width:20px; height:40px; background:#3F8C66; content:""; clip-path:polygon(0 0/*, 100% 0*/, 0 100%, 100% 50%); z-index:99;}
.steps li:last-of-type:after { display:none;}
.results { display:grid; grid-template-columns:1.2fr 1.0fr 0.8fr; gap:24px; background:linear-gradient(90deg,#eff8f2,#fff);}
.results h2 { font-family:"Noto Serif JP",serif; font-size:36px; margin:10px 0 0; line-height:1.2;}
.results strong { font-size:56px;}
.results h2 > span,
.results strong > span { font-size:48px;}
.results > div:nth-of-type(1) {}
.results > div:nth-of-type(1) img { width:100%; height:100%; object-fit:cover; object-position:center left;}
.results > div:nth-of-type(2) { padding:28px 0; line-height:1.4;}
.results > div:nth-of-type(3) { padding:56px 28px 28px 0; text-align:center;}
.eyebrow { padding:3px 1.5em; clip-path:polygon(10% 0, 0 100%, 90% 100%, 100% 0);}
@media(max-width:760px){
.hero > div:nth-of-type(2) { height:180px;}
.research-block { gap:14px;}
.research-block > div:first-of-type { padding:20px 14px 0;}
.strengths h2 { padding:0 5px 5px; font-size:28px;}
.strengths .cards article { background-size:60px 60px !important; background-position:45px 30px !important;}
.steps h2 { padding:0 5px 5px; font-size:28px;}
.steps li { padding-left:90px; background-size:40px 45px !important; background-position:40px 25px !important;}
.steps li:after { top:auto; bottom:-25px; left:calc(50% - 20px); transform:translateX(-50%),translateY(0%); width:40px; height:20px; clip-path:polygon(0 0/*, 0 100%*/, 50% 100%, 100% 0);}
.results { grid-template-columns:1fr; gap:14px;}
.results > div:nth-of-type(1) { height:200px;}
.results > div:nth-of-type(2) { padding:0 28px;}
.results > div:nth-of-type(3) { padding:0 28px 28px;}
}
@media all and (max-width:439px)
{
.results h2 { font-size:24px;}
.results strong { font-size:44px;}
.results h2 > span,
.results strong > span { font-size:32px;}
}
@media all and (max-width:419px)
{
.strengths .cards article { padding-left:80px; background-position:10px 60px !important;}
}