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

body{/*margin:0;*/color:#18372e;line-height:1.9}
.hero{background:#073f32;color:#fff;/*padding:60px 7%;display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center*/}
/*.hero h1{ font-size:60px; line-height:1.6;}
.hero img{width:100%;max-height:520px;object-fit:contain}*/
.wrap{max-width:1100px;margin:auto;padding:0 25px;}
.sec{border-bottom:1px solid #ddd;padding:35px 0}
.sec h2{font-size:28px}
.stats{background:#f4f0e7;padding:35px;margin:25px 0}
.end{background:#073f32;color:#fff;text-align:center;padding:65px 20px}
@media(max-width:760px){.hero{grid-template-columns:1fr}
.hero h1{font-size:38px}
}

/*追加記述*/
.misagyo { padding:0 0.5em; color:#FFFFFF; font-weight:bold; font-size:16px; background-color:#999999;}

:root{--green:#075b50;--deep:#06463f;--red:#e60012;--ink:#132b32;--soft:#f4f8f6;--line:#d9e4e0;--gold:#FC3;--brown:#C59441;}
*{ box-sizing:border-box;}
.hero{ margin-top:70px;}
section { padding:56px 0; font-family:serif;}
section > .grid3 { display:grid; grid-template-columns:1.25fr 360px 0.75fr; gap:40px; place-items:center;}
section > .grid3 > div { text-align:left;}
section > .grid3 > div:nth-of-type(1) {}
section > .grid3 > div:nth-of-type(1) span { display:block; font-size:28px; color:var(--gold); letter-spacing:0.2em;}
section > .grid3 > div:nth-of-type(1) h1{ margin:0.25em 0 0.5em; font-size:clamp(40px,5.4vw,60px); line-height:1.4;}
section > .grid3 > div:nth-of-type(1) p { font-size:18px; font-weight:bold;}
section > .grid3 > div:nth-of-type(2) img { display:block; width:100%; max-width:360px; object-fit:contain;}
section > .grid3 > div:nth-of-type(3) { font-size:18px; font-weight:bold;}
section > .grid2 { display:grid; grid-template-columns:1.35fr 0.65fr; gap:40px;}
section > .grid2 > div { width:100%; height:auto; text-align:left;}
section > .grid2 > div:nth-of-type(1) { position:relative; padding-left:clamp(70px,10vw,130px);}
section > .grid2 > div:nth-of-type(1):before { position:absolute; top:-2vw; left:0; font-size:clamp(40px,6vw,72px); color:var(--black);}
section > .grid2 > div.num01:before { content:"01";}
section > .grid2 > div.num02:before { content:"02";}
section > .grid2 > div.num03:before { content:"03";}
section > .grid2 > div.num04:before { content:"04";}
section > .grid2 > div.num05:before { content:"05";}
section > .grid2 > div.num06:before { content:"06";}
section > .grid2 > div.num07:before { content:"07";}
section > .grid2 > div:nth-of-type(1):after { position:absolute; top:-2vw; left:clamp(42px,6.3vw,85px); font-size:clamp(40px,6vw,72px); color:var(--gold); content:"/";}
section > .grid2 > div:nth-of-type(1) h2 { margin:0 0 0.35em; font-size:clamp(28px,2.4vw,32px); color:var(--green); line-height:1.4;}
section > .grid2 > div:nth-of-type(1) p { margin:0; font-size:16px; color:#333333; line-height:1.6;}
section > .grid2 > div:nth-of-type(2) { position:relative;}
section > .grid2 > div:nth-of-type(2) img { display:block; width:100%; height:auto;}
section > .grid2 > div:nth-of-type(2) > div { position:relative;}
section > .grid2 > div:nth-of-type(2) > div p {}
section > .grid2 > div.num01+div > div p { position:absolute; bottom:5px; left:5px; margin:0 5px 0 0; padding:0.25em 0.4em; line-height:1.4; background:rgba(255,255,255,0.9);}
section > .grid2 > div.num02+div > div p { position:absolute; bottom:50%; transform:translateY(-50%); right:5px; margin:0 0 0 5px; padding:0.25em 0.4em; line-height:1.4; background:rgba(255,255,255,0.9);}
section > .grid2 > div.num03+div ul { margin:0; padding:0; list-style:none;}
section > .grid2 > div.num03+div ul li { position:relative; display:block; margin:0 0 1.0em; padding:0.5em; text-align:center; font-weight:bold; background-color:#F4F0EC;}
section > .grid2 > div.num03+div ul li:after { display:block; position:absolute; bottom:-34px; left:50%; transform:translateX(-50%); font-size:24px; color:#C5B498; content:"\25BC"; z-index:5;}
section > .grid2 > div.num03+div ul li:last-of-type { margin:0;}
section > .grid2 > div.num03+div ul li:last-of-type:after { display:none;}
section > .grid2 > div.num04+div > div p { position:absolute; bottom:5px; left:5px; margin:0 5px 0 0; padding:0.25em 0.4em; color:#FFFFFF; line-height:1.4;}
section > .grid2 > div.num05+div p { margin:0; padding:1.0em; border:#999999 2px solid; text-align:center; line-height:1.4;}
section > .grid2 > div.num05+div p span { display:block; margin:0 0 0.5em; padding:0; color:var(--green); font-size:22px;}
section > .grid2 > div.num06+div > div p { position:absolute; bottom:5px; left:5px; margin:0 5px 0 0; padding:0.25em 0.4em; color:var(--green); line-height:1.4; background:rgba(255,255,255,0.9);}
section > .grid2 > div.num06+div > div p span { margin-right:0.25em; font-size:18px;}
section > .grid2 > div.num07+div > div p { position:absolute; bottom:5px; right:5px; margin:0 0 0 5px; padding:0.25em 0.4em; color:#FFFFFF; line-height:1.4}
.middlearea { background-color:#F6F4EF;}
.middlearea .grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:5px;}
.middlearea .grid4 > div { padding:1.0em; border-radius:5px; background-color:#FFFFFF; line-height:1.4 !important;}
.middlearea .grid4 > div:nth-of-type(1) { padding:0; text-align:left; background-color:transparent;}
.middlearea .grid4 > div:nth-of-type(1) h2 { position:relative; display:inline-block; margin:0 0 1.5em; padding:10px 0 10px 20px; font-size:24px; font-weight:bold; color:var(--gold); background-color:var(--green);}
.middlearea .grid4 > div:nth-of-type(1) h2:after { position:absolute; top:0; right:-7.9vw; bottom:0; width:8.0vw; background-color:var(--green); z-index:9; content:""; clip-path:polygon(0 0, 100% 0, 0 100%);}
.middlearea .grid4 > div:nth-of-type(1) span.text-white { color:#FFFFFF;}
.middlearea .grid4 > div:nth-of-type(2) p,
.middlearea .grid4 > div:nth-of-type(3) p,
.middlearea .grid4 > div:nth-of-type(4) p { margin:0 0 0.5em; font-size:18px; font-weight:bold; color:var(--green);}
.middlearea .grid4 > div:nth-of-type(5),
.middlearea .grid4 > div:nth-of-type(6) { padding:1.0em 2.0em; text-align:left; grid-column:span 2;}
.middlearea .grid4 > div:nth-of-type(5) img,
.middlearea .grid4 > div:nth-of-type(6) img { float:left; margin:0 1.0em 1.0em 0;}
.middlearea .grid4 > div:nth-of-type(5) p,
.middlearea .grid4 > div:nth-of-type(6) p { margin:0 0 0.25em; font-size:20px; font-weight:bold; color:var(--brown);}
.pageend { color:#FFFFFF; background-color:#0E4431;}
.pageend .grid2end { display:grid; grid-template-columns:1.60fr 0.40fr; gap:40px; place-items:center;}
.pageend .grid2end > div:nth-of-type(1) { font-size:20px;}
.pageend .grid2end > div:nth-of-type(1) span { font-size:clamp(28px,2.4vw,30px);}
.pageend .grid2end > div:nth-of-type(1) span.gold { color:var(--gold);}
.pageend .grid2end > div:nth-of-type(1) br { display:none;}
.pageend .grid2end > div:nth-of-type(2) { padding-bottom:65px; text-align:left; line-height:1.6; background:url(../img/img-sign.jpg) bottom right no-repeat;}
.pageend .grid2end > div:nth-of-type(2) p { margin:0 0 0.5em; font-size:22px;}

@media(max-width:1000px)
{
.middlearea .grid4 > div:nth-of-type(1) h2 br { display:none;}
}
@media(max-width:850px)
{
section > .grid3 { grid-template-columns:1.0fr; gap:40px;}
section > .grid3 > div:nth-of-type(1) h1{ font-size:60px;}
.middlearea .grid4 > div:nth-of-type(1) h2 { margin:0 0 0.5em;}
.pageend .grid2end { display:grid; grid-template-columns:1.0fr; place-items:center;}
}
@media all and (max-width:719px)
{
.hero{ margin-top:52px;}
section > .grid2 { grid-template-columns:1fr; gap:20px;}
section > .grid2 > div:nth-of-type(2) img { max-width:420px; margin:0 auto;}
section > .grid2 > div:nth-of-type(2) > div { max-width:420px; margin:0 auto;}
section > .grid2 > div.num05+div { text-align:center;}
section > .grid2 > div.num05+div p { display:inline-block; margin:0 auto;}
.middlearea .grid4 { grid-template-columns:repeat(2,1fr);}
.middlearea .grid4 > div:nth-of-type(1) h2 br { display:inline;}
}
@media all and (max-width:559px)
{
section > .grid3 > div:nth-of-type(1) h1{ margin:0.15em 0 0.3em; font-size:clamp(40px,12.0vw,60px);}
section > .grid2 > div:nth-of-type(1) { padding-left:0; padding-top:50px;}
section > .grid2 > div:nth-of-type(1):before,
section > .grid2 > div:nth-of-type(1):after { top:-15px;}
.middlearea .grid4 { grid-template-columns:1fr;}
.middlearea .grid4 > div:nth-of-type(1) h2:after {  right:-14.9vw; width:15.0vw;}
.middlearea .grid4 > div:nth-of-type(5),
.middlearea .grid4 > div:nth-of-type(6) { grid-column:span 1;}
.pageend .grid2end > div:nth-of-type(1) br { display:inline;}
}