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

:root{--g:#075c47;--lg:#eef8f3;--r:#ed3f40;--gold:#eac344;--text:#17211d}
*{box-sizing:border-box}
h1,h2{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;color:#064f3e}
.wrap{max-width:1180px;margin:auto;padding:0 24px}
.hero{background:linear-gradient(90deg,#fff 0 25%,rgba(255,255,255,0.0)),url('../img/main-img.jpg') center/cover;min-height:390px;padding:42px 0}
.hero .copy{max-width:650px}
.badge{display:inline-block;border:1px solid #b98918;color:#8a5c00;padding:5px 14px;border-radius:6px;background:#fffaf0;font-weight:700}
.hero h1{font-size:clamp(42px,6vw,72px);margin:15px 0 0}
.lead{font-size:clamp(20px,2.6vw,30px);font-weight:700;margin:0 0 12px}
.section{padding:48px 0;}
.section h2{font-size:clamp(28px,4vw,42px);margin:0 0 18px}
.num{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--g);color:#fff;margin-right:12px;font-family:serif;line-height:50px;}
.grid6,.grid4{display:grid;gap:16px}
.grid6{grid-template-columns:repeat(6,1fr)}
.grid4{grid-template-columns:repeat(4,1fr)}
/*.card{border:1px solid #dfe9e4;border-radius:12px;padding:20px;background:#fff}
.card h3{color:var(--g);margin-top:0}*/
.types .card{text-align:center;background:#fafdfb}
.callout{background:var(--lg);border-radius:16px;padding:28px}
/*.example{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.arrow{font-size:36px;color:var(--r)}*/
.results{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.result{padding:20px;border-radius:12px;background:#f5faf7;font-weight:700;color:var(--g)}
.cta{text-align:center;padding:18px 0 60px}
.cta a{display:inline-block;background:var(--g);color:#fff;text-decoration:none;padding:15px 70px;border-radius:40px;font-weight:700}
@media(max-width:900px)
{
.hero{background-position:68% center}
.hero .copy{max-width:58%}
/*.grid6{grid-template-columns:repeat(2,1fr)}*/
.grid4,.results{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px)
{
.wrap{padding:0 18px}
.hero{min-height:520px;background:linear-gradient(180deg,rgba(255,255,255,.98) 0 56%,rgba(255,255,255,.05)),url('../img/main-img.jpg') 65% bottom/auto 48% no-repeat}
.hero .copy{max-width:100%}
.hero h1{font-size:42px}
.grid6,/*.grid4,.results*/{grid-template-columns:1fr}
.example{grid-template-columns:1fr}
.arrow{text-align:center;transform:rotate(90deg)}
}

/*追加記述*/
#wakaru { margin:70px 0 0; text-align:left; font-size:16px; font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",sans-serif; color:var(--text); line-height:1.75; background:#fff;}
.hero h1,
.hero 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);}
section.section {}
h2 small { display:inline-block; font-size:clamp(20px,2.4vw,36px);}
.callout { display:grid; grid-template-columns:1fr 340px; gap:40px;}
.callout p:nth-of-type(2) { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.callout p:nth-of-type(2) span { position:relative; width:140px; height:140px; border-radius:50%; margin:0; padding:25px 0 0; text-align:center; color:var(--g); font-weight:bold; background-color:#FFFFFF; line-height:1.4;}
.callout p:nth-of-type(2) span img { display:block; width:40px; height:40px; margin:0 auto 5px;}
.callout p:nth-of-type(2) span:nth-of-type(1):after { position:absolute; top:50%; transform:translateY(-50%); right:-30px; width:20px; height:20px; background:#3F8C66; content:"";}
.callout p:nth-of-type(2) span:nth-of-type(2):before { position:absolute; top:50%; transform:translateY(-50%); left:-30px; width:20px; height:40px; background:#3F8C66; content:""; clip-path:polygon(0 0/*, 100% 0*/, 0 100%, 100% 50%);}
.bk-info { margin:-1.0em 0 1.0em 3.0em; font-weight:bold;}
.bk-text { margin:0.5em 1.0em 0;}
.bk02 .card { margin:0; padding:0.5em 0; border-radius:15px; line-height:1.4;}
.bk02 .card h3 { margin:0; padding:0 0.25em 0 50px; text-align:left; font-size:18px;}
.bk02 .card b { display:block; margin:0; padding:0 0.25em 0 50px; text-align:left; font-size:14px;}
.bk02 .card > img { width:100%; height:auto; margin:0.5em 0 0.25em;}
.bk02 .card p { padding:0 1.0em; font-size:16px; color:#000000 !important;}
.bk02 .card:nth-of-type(1) { color:#E3111E; background:url('../img/bk02-icon01.png') 10px 10px no-repeat, linear-gradient(180deg, #FEEEEE 48%, #FDF8F8 52%);}
.bk02 .card:nth-of-type(2) { color:#FB3C8E; background:url('../img/bk02-icon02.png') 10px 10px no-repeat, linear-gradient(180deg, #FEF2F4 48%, #FEFCFC 52%);}
.bk02 .card:nth-of-type(3) { color:#067C41; background:url('../img/bk02-icon03.png') 10px 10px no-repeat, linear-gradient(180deg, #F4F9F6 48%, #F7FBF9 52%);}
.bk02 .card:nth-of-type(4) { color:#0E68F0; background:url('../img/bk02-icon04.png') 10px 10px no-repeat, linear-gradient(180deg, #F0F8FE 48%, #F8FBFE 52%);}
.bk02 .card:nth-of-type(5) { color:#10B7CB; background:url('../img/bk02-icon05.png') 10px 10px no-repeat, linear-gradient(180deg, #F1FAFE 48%, #F8FDFE 52%);}
.bk02 .card:nth-of-type(6) { color:#D27711; background:url('../img/bk02-icon06.png') 10px 10px no-repeat, linear-gradient(180deg, #FEF6E7 48%, #FDF8EF 52%);}
.bk03 { gap:8px;}
.bk03 .card { border:1px solid #dfe9e4; border-radius:15px; padding:14px; text-align:center; background:#fff;}
.bk03 .card h3 { margin:5px 0; color:var(--g);}
.bk03 .card > img { width:46px; height:36px;}
.bk03 .card p { line-height:1.4;}
.example { display:grid; grid-template-columns:1.2fr 0.8fr; align-items:top; gap:60px;}
.example > div { position:relative; border-radius:20px; margin-top:20px;}
.example > div h3 { position:absolute; top:-12px; left:15px; border-radius:40px; margin:0; padding:0 1.0em; color:#FFFFFF;}
.example > div:nth-of-type(1) h3 { background-color:#333333;}
.example > div:nth-of-type(2) h3 { background-color:var(--g);}
.example > div:nth-of-type(1) { background:url('../img/bk04-img01.png') left bottom no-repeat, url('../img/bk04-img02.png') right bottom no-repeat, linear-gradient(90deg, #EBEBEB, #FDFDFD 50%, #EBEBEB 100%); background-size:160px auto, 160px auto;}
.example > div:nth-of-type(1) > div { position:relative; display:grid; grid-template-columns:1.0fr 110px 1.0fr; gap:0px; height:100%; align-items:flex-end;}
.example > div:nth-of-type(1) > div p { padding:0 0 5px; font-weight:bold; line-height:1.4;
 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);}
.example > div:nth-of-type(1) > div p span { position:absolute; top:20px; padding:1.25em 1.0em 1.0em; border-radius:50%; text-align:center; font-size:14px; color:#333333 !important; background-color:#FFFFFF; box-shadow:0px 2px 5px #CCCCCC;}
.example > div:nth-of-type(1) > div p:nth-of-type(1) { text-align:right; color:#F70509;}
.example > div:nth-of-type(1) > div p:nth-of-type(1) span { left:120px;}
.example > div:nth-of-type(1) > div p:nth-of-type(2) { padding-top:35px; text-align:center; color:#FE6954; background:url(../img/bk04-arrow.png) top center no-repeat; background-size:contain;}
.example > div:nth-of-type(1) > div p:nth-of-type(3) { text-align:left; color:#3085F3;}
.example > div:nth-of-type(1) > div p:nth-of-type(3) span { right:120px;}
.example > div:nth-of-type(2) { background:var(--lg);}
.example > div:nth-of-type(1):after { position:absolute; top:50%; transform:translateY(-50%); right:-30px; width:20px; height:20px; background:#3F8C66; content:"";}
.example > div:nth-of-type(2):before { position:absolute; top:50%; transform:translateY(-50%); left:-30px; width:20px; height:40px; background:#3F8C66; content:""; clip-path:polygon(0 0/*, 100% 0*/, 0 100%, 100% 50%);}
.checks { list-style:none; padding:20px 15px 15px 25px; margin:0;}
.checks li{ margin:5px 0 0; padding-left:30px; position:relative;}
.checks li:before{ content:"✓"; position:absolute; left:0; top:1px; background:var(--g); color:#fff; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:14px; font-weight:900;}
.bk05 .card { margin:0; padding:0.5em 0 0; border-radius:15px; line-height:1.4;}
.bk05 .card h3 { margin:0; padding:0 0.25em 0 60px; text-align:left; font-size:18px;}
.bk05 .card p { display:block; margin:0; padding:0 0.25em 0 60px; text-align:left; font-size:16px; color:#000000 !important;}
.bk05 .card > img { display:block; width:100%; height:auto; margin:0.5em 0 0.25em;}
.bk05 .card a { display:block; margin:0; padding:0.5em 1.0em; border:2px solid; border-radius:40px; text-align:center; font-weight:bold; font-size:16px; background-color:rgba(255,255,255,0.6);}
.bk05 .card a:hover { color:#FFFFFF !important;}
.bk05 .card:nth-of-type(1) { color:#FB0E1A; background:url('../img/bk05-icon01.png') #FFF5F6 10px 10px no-repeat;}
.bk05 .card:nth-of-type(2) { color:#088049; background:url('../img/bk05-icon02.png') #F4FAF7 10px 10px no-repeat;}
.bk05 .card:nth-of-type(3) { color:#006DE6; background:url('../img/bk05-icon03.png') #F2F9FE 10px 10px no-repeat;}
.bk05 .card:nth-of-type(4) { color:#BF6904; background:url('../img/bk05-icon04.png') #FDF8EB 10px 10px no-repeat;}
.bk05 .card:nth-of-type(1) a { border-color:#FB0E1A; color:#FB0E1A;}
.bk05 .card:nth-of-type(2) a { border-color:#088049; color:#088049;}
.bk05 .card:nth-of-type(3) a { border-color:#006DE6; color:#006DE6;}
.bk05 .card:nth-of-type(4) a { border-color:#BF6904; color:#BF6904;}
.bk05 .card:nth-of-type(1) a:hover { background-color:#FB0E1A;}
.bk05 .card:nth-of-type(2) a:hover { background-color:#088049;}
.bk05 .card:nth-of-type(3) a:hover { background-color:#006DE6;}
.bk05 .card:nth-of-type(4) a:hover { background-color:#BF6904;}
.bk06 .result { margin:0; padding:1.0em 0.5em 1.0em 70px; border-radius:15px; color:#333333; line-height:1.4;}
.bk06 .result:nth-of-type(1) { background:url('../img/bk06-icon01.png') #F2F9FE 10px 50% no-repeat;}
.bk06 .result:nth-of-type(2) { background:url('../img/bk06-icon02.png') #FFF5F6 10px 50% no-repeat;}
.bk06 .result:nth-of-type(3) { background:url('../img/bk06-icon03.png') #F4FAF7 10px 50% no-repeat;}
.bk06 .result:nth-of-type(4) { background:url('../img/bk06-icon04.png') #FDF8EB 10px 50% no-repeat;}
.bk06 .result:nth-of-type(1) span { color:#006DE6;}
.bk06 .result:nth-of-type(2) span { color:#FB0E1A;}
.bk06 .result:nth-of-type(3) span { color:#088049;}
.bk06 .result:nth-of-type(4) span { color:#BF6904;}
@media(max-width:900px)
{
h2 small { display:block; margin:0 0 1.0em 3.0em;}
.grid6 { grid-template-columns:repeat(3,1fr);}
.example { grid-template-columns:1.0fr; gap:50px;}
.example > div:nth-of-type(1) { min-height:200px;}
.example > div:nth-of-type(1):after { top:auto; bottom:-40px; right:calc(50% - 10px); transform:translateX(-50%),translateY(0%);}
.example > div:nth-of-type(2):before { top:-30px; left:calc(50% - 20px); transform:translateX(-50%),translateY(0%); width:40px; height:20px; clip-path:polygon(0 0/*, 0 100%*/, 50% 100%, 100% 0);}
}
@media all and (max-width:719px)
{
#wakaru { margin:52px 0 0;}
.callout { grid-template-columns:1fr; gap:20px;}
.callout p:nth-of-type(2) { width:340px; margin:0 auto;}
.bk-info { margin:0 1.0em 1.0em; font-weight:bold;}
}
@media all and (max-width:579px)
{
.grid6 { grid-template-columns:repeat(2,1fr);}
}
@media all and (max-width:519px)
{
.example > div:nth-of-type(1) { min-height:250px;}
.example > div:nth-of-type(1) > div p:nth-of-type(1) span { left:20px;}
.example > div:nth-of-type(1) > div p:nth-of-type(3) span { right:20px;}
}
@media all and (max-width:479px)
{
.grid4,
.results { grid-template-columns:1fr;}
.callout { padding:28px 14px;}
.callout p:nth-of-type(2) { width:250px; gap:30px;}
.callout p:nth-of-type(2) span { width:110px; height:110px; padding:20px 0 0; font-size:12px; line-height:1.2;}
.callout p:nth-of-type(2) span:nth-of-type(1):after { right:-15px; width:10px; height:10px;}
.callout p:nth-of-type(2) span:nth-of-type(2):before { left:-15px; width:10px; height:20px;}
.checks { padding:20px 10px 15px 15px;}
}
@media all and (max-width:379px)
{
.grid6 { grid-template-columns:1fr;}
.example > div:nth-of-type(1) > div { grid-template-columns:1.0fr 90px 1.0fr;}
.example > div:nth-of-type(1) > div p { font-size:14px;}
.example > div:nth-of-type(1) > div p span { font-size:12px;}
}