@charset "UTF-8";
#stage01 { background: #fff; padding-bottom: 2em; }
@media only screen and (max-width: 768px) { #stage01 { padding-top: 5vw; } }
@media only screen and (max-width: 576px) { #stage01 { padding-bottom: 2em; } }
#stage01__inner { display: grid; grid-template-columns: 45fr 55fr; align-items: center; padding-right: 5vw; }
@media only screen and (max-width: 1440px) { #stage01__inner { width: 100%; max-width: calc(1700px + (3.5em * 2)); padding-left: 3.5em; padding-right: 3.5em; margin: 0 auto; } }
@media only screen and (max-width: 1440px) and (max-width: 1440px) { #stage01__inner { padding-left: 3em; padding-right: 3em; } }
@media only screen and (max-width: 1440px) and (max-width: 1280px) { #stage01__inner { padding-left: 2.5em; padding-right: 2.5em; } }
@media only screen and (max-width: 1440px) and (max-width: 1024px) { #stage01__inner { padding-left: 2em; padding-right: 2em; } }
@media only screen and (max-width: 1440px) and (max-width: 768px) { #stage01__inner { padding-left: 1.5em; padding-right: 1.5em; } }
@media only screen and (max-width: 1440px) and (max-width: 576px) { #stage01__inner { padding-left: 1em; padding-right: 1em; } }

@media only screen and (max-width: 768px) { #stage01__inner { display: inherit; } }
@media only screen and (max-width: 576px) { #stage01__inner { overflow: hidden; } }
#stage01__inner .sec01 { text-align: center; display: block; }
#stage01__inner .sec01 hgroup { margin-left: max(1.5em, 3vw); display: inline-block; text-align: left; }
#stage01__inner .sec01 hgroup:lang(en) { margin-left: max(1.5em, 3vw); padding-right: 2em; }
@media only screen and (max-width: 1440px) { #stage01__inner .sec01 hgroup:lang(en) { margin-left: 0; } }
@media only screen and (max-width: 1024px) { #stage01__inner .sec01 hgroup:lang(en) { padding-right: 1em; } }
@media only screen and (max-width: 1440px) { #stage01__inner .sec01 hgroup { margin-left: 0; } }
@media only screen and (max-width: 768px) { #stage01__inner .sec01 hgroup { width: 90%; margin: 0 auto; } }
@media only screen and (max-width: 576px) { #stage01__inner .sec01 hgroup { width: 100%; padding-left: 5%; } }
#stage01__inner .sec01 hgroup h1 { font-weight: 900; font-size: clamp(1.6em, 3.6vw, 3.2em); line-height: 1.5; }
@media only screen and (max-width: 768px) { #stage01__inner .sec01 hgroup h1 { font-size: clamp(1.6em, 6vw, 2.6em); } }
#stage01__inner .sec01 hgroup h1:lang(en) { font-size: clamp(1.2em, 2.2vw, 2.4em); }
@media only screen and (max-width: 768px) { #stage01__inner .sec01 hgroup h1:lang(en) { font-size: clamp(1.3em, 3.2vw, 2em); } }
#stage01__inner .sec01 hgroup p { margin-top: 1em; font-size: clamp(1em, 1.6vw, 1.4em); font-weight: 600; }
#stage01__inner .sec01 hgroup p:lang(en) { font-size: clamp(1em, 1.4vw, 1.3em); }
@media only screen and (max-width: 768px) { #stage01__inner .sec01 hgroup p { font-size: clamp(0.95em, 3vw, 1.3em); } }
@media only screen and (max-width: 768px) { #stage01__inner figure { width: 106%; margin-top: 1em; margin-left: -3%; } }
@media only screen and (max-width: 576px) { #stage01__inner figure { width: 112%; margin-left: -7%; } }

#stage02 { width: 100%; max-width: calc(1700px + (3.5em * 2)); padding-left: 3.5em; padding-right: 3.5em; margin: 0 auto; padding-top: clamp(3em, 7vw, 7em); padding-bottom: max(4em, 7vw); width: 100%; }
@media only screen and (max-width: 1440px) { #stage02 { padding-left: 3em; padding-right: 3em; } }
@media only screen and (max-width: 1280px) { #stage02 { padding-left: 2.5em; padding-right: 2.5em; } }
@media only screen and (max-width: 1024px) { #stage02 { padding-left: 2em; padding-right: 2em; } }
@media only screen and (max-width: 768px) { #stage02 { padding-left: 1.5em; padding-right: 1.5em; } }
@media only screen and (max-width: 576px) { #stage02 { padding-left: 1em; padding-right: 1em; } }
@media only screen and (max-width: 768px) { #stage02 { display: grid; grid-template-columns: 1fr; } }
@media only screen and (max-width: 576px) { #stage02 { overflow: hidden; } }
#stage02 figure.sec03 { float: left; width: 40%; margin: 0 3% 4vw 0; }
@media only screen and (max-width: 768px) { #stage02 figure.sec03 { order: 3; float: none; width: 90%; margin: 10vw auto 0; } }
@media only screen and (max-width: 576px) { #stage02 figure.sec03 { width: 110%; margin-left: -7%; } }
#stage02 .sec01 { margin-top: 4vw; }
@media only screen and (max-width: 768px) { #stage02 .sec01 { order: 1; width: 100%; } }
#stage02 .sec01 h1 { font-weight: 700; font-size: clamp(1.6em, 3.2vw, 2em); color: #0E6CC9; margin-bottom: 1em; }
@media only screen and (max-width: 768px) { #stage02 .sec01 h1 { font-size: clamp(1.4em, 5vw, 2em); } }
#stage02 .sec01 h1:lang(en) { font-size: clamp(1.3em, 3.5vw, 1.8em); }
#stage02 .sec01 p { font-weight: 500; font-size: 1.05em; }
@media only screen and (max-width: 1024px) { #stage02 .sec01 p { font-size: 1em; } }
#stage02 .sec01 p + p { margin-top: 1em; }
#stage02 .sec02 { clear: left; width: 100%; max-width: 60em; width: 100%; margin: 4em auto 0; }
@media only screen and (max-width: 768px) { #stage02 .sec02 { clear: both; max-width: inherit; order: 2; } }
@media only screen and (max-width: 576px) { #stage02 .sec02 { width: 80%; } }
#stage02 .sec02 ul { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1.5em 1em; }
@media only screen and (max-width: 576px) { #stage02 .sec02 ul { grid-template-columns: 1fr; grid-gap: 1em 0; } }
#stage02 .sec02 ul li { font-weight: 600; }
#stage02 .sec02 ul li a { display: block; background: #fff; color: #333; padding: 1.25em; border: 2px solid #CBB788; border-radius: 0.5em; text-decoration: none; box-shadow: 0 1em 1em -1em rgba(0, 0, 0, 0.3); transition: box-shadow 0.2s, border-color 0.2s; }
@media only screen and (max-width: 576px) { #stage02 .sec02 ul li a { padding: 1em; } }
#stage02 .sec02 ul li a::before { font-family: spring; content: ""; color: #CBB788; font-size: 1em; font-weight: normal; display: inline-block; padding-right: 0.25em; transition: color 0.2s; }
#stage02 .sec02 ul li a:hover { box-shadow: 0 1em 1em -1em rgba(0, 0, 0, 0); border-color: #0E6CC9; }
#stage02 .sec02 ul li a:hover::before { font-family: spring; content: ""; color: #0E6CC9; font-size: 1em; font-weight: normal; display: inline-block; }

#stage03 { padding-top: 5em; padding-bottom: 5em; background: #F2ECDE; border-radius: 5vw 5vw 0 0; }
#stage03 .sec01 { margin-bottom: 2em; padding: 0.5em; background: #D8C69B; border-radius: 0.5em; display: grid; grid-template-columns: 1fr 6em; grid-row-gap: 0.5em; align-items: center; justify-content: space-between; }
@media only screen and (max-width: 576px) { #stage03 .sec01 { padding: 1.5em 0.5em 2em; grid-template-columns: auto; grid-row-gap: 1.5em; } }
#stage03 .sec01 h1 { order: 1; grid-column: 1/2; font-weight: 800; font-size: clamp(1.1em, 4vw, 1.2em); }
@media only screen and (max-width: 576px) { #stage03 .sec01 h1 { text-align: center; grid-column: 1/3; } }
#stage03 .sec01 h1 span { vertical-align: middle; }
#stage03 .sec01 h1 span[class^="icon-"] { color: #fff; font-size: 2em; margin-right: 0.25em; background: radial-gradient(circle, #e68f44 0%, #e68f44 50%, white 50%, white 100%); border-radius: 50%; }
#stage03 .sec01 dl { order: 3; grid-column: 1/3; }
@media only screen and (max-width: 576px) { #stage03 .sec01 dl { order: 2; } }
#stage03 .sec01 > p { order: 2; grid-column: 2/3; font-size: 0.9em; font-weight: 500; text-align: right; }
@media only screen and (max-width: 576px) { #stage03 .sec01 > p { order: 3; grid-column: 1/3; font-size: 1em; text-align: center; margin-top: 0.5em; } }
#stage03 .sec01 > p a { background: #fff; color: #333; text-decoration: none; padding: 0.5em 1em; border-radius: 0.25em; box-shadow: 0.15em 0.15em 0.15em 0 rgba(0, 0, 0, 0.2); transition: box-shadow 0.2s; }
@media only screen and (max-width: 576px) { #stage03 .sec01 > p a { padding: 0.75em 2em; box-shadow: 0 0.75em 0.5em -0.5em rgba(0, 0, 0, 0.2); } }
#stage03 .sec01 > p a:hover { box-shadow: none; }
#stage03 .sec01 > p a::after { font-family: spring; content: ""; color: #666; font-size: 0.75em; font-weight: normal; display: inline-block; padding-left: 0.5em; }
#stage03 .sec02 { background: #fff; padding: 2em clamp(1em, 5vw, 5em) 3em; border-radius: 1em; }
@media only screen and (max-width: 576px) { #stage03 .sec02 { padding: 1em 1em 2em; } }
#stage03 .sec02 hgroup { display: flex; align-items: baseline; }
@media only screen and (max-width: 576px) { #stage03 .sec02 hgroup { display: inherit; text-align: center; margin-bottom: 1em; } }
#stage03 .sec02 hgroup p { font-size: 3em; font-weight: 800; }
@media only screen and (max-width: 576px) { #stage03 .sec02 hgroup p { font-size: 2.5em; } }
#stage03 .sec02 hgroup h1 { font-size: 1.2em; font-weight: 700; margin-left: 2em; }
@media only screen and (max-width: 576px) { #stage03 .sec02 hgroup h1 { font-size: 1.1em; margin-left: 0; } }
#stage03 .sec02__02 { margin-top: 3em; }
@media only screen and (max-width: 576px) { #stage03 .sec02__02 { margin-top: 1.5em; } }
#stage03 .sec02__02 p { text-align: center; }
#stage03 .sec02__02 p a { background: #222; padding: 1em 3em; border-radius: 0.25em; display: inline-block; color: #fff; text-decoration: none; transition: box-shadow 0.2s; box-shadow: 0 0.5em 0.5em -0.25em rgba(0, 0, 0, 0.4); }
@media only screen and (max-width: 576px) { #stage03 .sec02__02 p a { padding: 0.75em 2em; } }
#stage03 .sec02__02 p a:hover { box-shadow: none; }
#stage03 .sec02__02 p a::after { font-family: spring; content: ""; color: #fff; font-size: 0.75em; font-weight: normal; display: inline-block; padding-left: 0.5em; }