*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html{
font-size: 62.5%;
/*\*/
_font-size: 62.5%;
/**/
}

a{
color: var(--black);
text-decoration: none;
}

a:hover, a:focus{text-decoration: none;}

a:hover,a:focus,
a:hover img,
a:focus img{
filter: alpha(opacity=9) !important;
-moz-opacity: 0.9 !important;
opacity: 0.9 !important;
}

img {
width: 100%;
height: auto;
margin: 0;
padding: 0;
border: 0;
vertical-align:top;
}

ul, ol {
list-style: none;
}

.clearfix:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}
/* end MacIE5 */

.embed{
width: 100%;
display: block;
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.embed iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.embed video{
width: 100%;
height: auto;
margin: 0;
padding: 0;
background-size: contain;
}
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}

body{
background-color: var(--white);
color: var(--black);
font-family: var(--font-family-base);
font-size: var(--font-base);
font-weight: 400;
line-height: 2;
font-feature-settings: "palt";
word-break: break-all;
}
body.scroll-prevent{
overflow: hidden;
}

/* Layout */
section{
width:100%;
display:block;
}
#page{
width: 100%;
display: block;
position: relative;
overflow: hidden;
}
.scroll-prevent #page{
overflow: hidden;
}
.wrapper{
width: 1100px;
display: block;
margin: 0 auto 0 auto;
text-align: center;
position: relative;
overflow: visible;
z-index: 1000;
text-align: center;
}
.wrapper *{
position: relative;
}

.contents_box{
width: 100vw;
display: block;
margin: 0 0 -80px 0;
padding: 60px 0 60px 0;
background-color: var(--white);
border-radius: 50px;
position: relative;
z-index: 7000;
top: -50px;
}

h2{
height: 0;
display: block;
padding-top: 32px;
font-size: var(--font-h2);
font-weight: 700;
line-height: 1;
letter-spacing: 3px;
overflow: hidden;
}

h3{
display: block;
font-size: var(--font-h3);
font-weight: 700;
line-height: 1;
letter-spacing: 1px;
}

h4{
display: block;
font-size: var(--font-h4);
font-weight: 700;
line-height: 1;
letter-spacing: 1px;
}

.txt{
display: block;
}
.txt .accent{
display: block;
font-size: var(--font-xl);
font-weight: 700;
}

.nolink{
color: var(--gray);
pointer-events: none;
cursor: default;
}

.pcHide{
display: none !important;
}
.spHide{
display: block !important;
}
.pc_br{
display: inline;
}
.sp_br{
display: none;
}

/* fixed btn */
.fixed_btn{
width: 200px;
display: block;
position: fixed;
top: 16px;
right: 130px;
z-index: 9000;
transition: all .5s;
}
.fixed_btn.off{
opacity: 0;
transition: all .5s;
}
.fixed_btn ul li a{
width: 200px;
height: 0;
display: block;
padding: 48px 0 0 0;
background: url(../img/h2_overview.svg) no-repeat center center;
background-size: auto 21px;
background-color: var(--dark-green);
color: var(--white);
border-radius: 24px;
box-shadow: 0 0 3px rgba(0,0,0,0.2),  0 2px 3px rgba(0,0,0,0.2);
font-size: var(--font-base);
font-weight: 500;
line-height: 48px;
text-align: center;
overflow: hidden;
}
.fixed_btn ul li a:hover{
background: url(../img/h2_overview.svg) no-repeat center center;
background-size: auto 21px;
background-color: var(--green);
box-shadow: none;
}

.scroll-prevent .fixed_btn ul li a{
background: url(../img/h2_overview.svg) no-repeat center center;
background-size: auto 21px;
background-color: var(--green);
box-shadow: none;
}

/* menu */
#menu{
width: 110px;
height: 110px;
display: block;
background-color: var(--white);
border-bottom-left-radius: 50px;
box-shadow: 0 0 3px rgba(0,0,0,0.2),  0 2px 3px rgba(0,0,0,0.2);
box-sizing: border-box;
position: fixed;
top: 0;
right: 0;
overflow: hidden;
cursor: pointer;
z-index: 9100;
}
#menu span{
width: 50px;
height: 4px;
display: block;
background-color: var(--dark-green);
border-radius: 2px;
position: absolute;
right: 26px;
opacity: 0;
}
#menu p{
width: 100%;
height: 0;
display: block;
padding-top:10px;
background: url(../img/menu.svg) no-repeat right 32px center;
background-size: auto 10px;
position: absolute;
right: 0;
opacity: 0;
overflow: hidden;
}

#menu span:nth-of-type(1) {
top: 28px;
}
#menu span:nth-of-type(2) {
top: 40px;
}
#menu span:nth-of-type(3) {
bottom: 54px;
}
#menu p {
bottom: 32px;
animation: opacity-animation .5s forwards 1s;
}

#menu span:nth-of-type(1) {
animation: menu-bar01 .5s forwards 0.25s;
}
#menu span:nth-of-type(2) {
animation: menu-bar01 .5s forwards 0.5s;
}
#menu span:nth-of-type(3) {
animation: menu-bar01 .5s forwards 0.65s;
}
@keyframes menu-bar01 {
0% {
transform: scale(0.4,1);
opacity: 0;
}
100% {
transform: scale(1,1);
opacity: 1;
}
}
@keyframes opacity-animation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

#menu.active{
}
#menu.active span{
}

#menu.active span:nth-of-type(1) {
top: 40px;
animation: active-menu-bar01 1s forwards;
}
@keyframes active-menu-bar01 {
0% {
transform: translate(0,0) rotate(0deg);
opacity: 1;
}
50% {
transform: translate(0,0) rotate(0deg);
opacity: 0;
}
51% {
transform: translate(0,6px) rotate(0deg);
opacity: 0;
}
100% {
transform: translate(0,6px) rotate(-45deg);
opacity: 1;
}
}

#menu.active span:nth-of-type(2) {
top: 40px;
animation: active-menu-bar02 1s forwards;
}
@keyframes active-menu-bar02 {
0% {
transform: translate(0,0) rotate(0deg);
opacity: 1;
}
50% {
transform: translate(0,0) rotate(0deg);
opacity: 0;
}
51% {
transform: translate(0,6px) rotate(0deg);
opacity: 0;
}
100% {
transform: translate(0,6px) rotate(45deg);
opacity: 1;
}
}

#menu.active span:nth-of-type(3),
#menu.active p{
animation: active-menu-bar03 0.2s forwards;
}
@keyframes active-menu-bar03 {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

#gNav{
width: 0vw;
height: 0vh;
display: none;
padding: 130px 30px 60px 30px;
background-color: var(--dark-green);
color: var(--white);
border-bottom-left-radius: 50px;
position: fixed;
top: 0;
right: 0;
z-index: 8900;
}
#gNav.active{
width: 350px;
height: auto;
display: block;
}
#gNav .logo{
display: none;
}
#gNav .logo p{
display: block;
margin: 20px 0 0 0;
font-size: var(--font-hero-date);
font-weight: 700;
}
#gNav ul{
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 15px;
margin: 40px auto 0 auto;
text-align: center;
position: relative;
z-index: 8950;
}
#gNav ul li{
width: 100%;
display: block;
text-align: center;
position: relative;
}
#gNav ul li a{
display: block;
background-color: var(--white);
color: var(--dark-green);
border-radius: 33px;
font-size: var(--font-s);
line-height: 66px;
text-align: center;
}
#gNav ul li#menuClose{
display: none;
}

/* page nav */
.page_nav{
display: block;
text-align: center;
}
.page_nav ul{
display: flex;
justify-content: center;
gap: 20px
}
.page_nav ul li{
display: flex;
justify-content: center;
gap: 20px
}
.page_nav ul li a{
display: block;
color:var(--green);
font-size: var(--font-xl);
font-weight: 700;
line-height: 1;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 8px;
}
.page_nav ul li a:hover{
color:var(--dark-green);
text-decoration: none;
}

/* footer */
#footer{
display: block;
margin: 0 0 -50px 0;
padding: 130px 0 130px 0;
background: url(../img/bg_footer.jpg) no-repeat center top;
background-size: cover;
background-color: var(--dark-green);
position: relative;
top: -50px;
}
#footer .footer_outbox{
width: 90vw;
display: block;
margin: 0 auto 0 auto;
padding: 40px 50px 40px 50px;
background-color: var(--white);
border-radius: 50px;
}
#footer .wrapper{
display: flex;
justify-content: center;
gap: 80px;
color: var(--white);
}
.footer_link{
display: block;
}
.footer_link a{
color: var(--white);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 8px;
}
#copyright{
display: block;
text-align: right;
}

/* banner */
#banner{
display: block;
margin: 0 0 -50px 0;
padding: 60px 0 60px 0;
background-color: var(--white);
border-top-left-radius: 50px;
border-top-right-radius: 50px;
position: relative;
top: -50px;
}

/* -- */
/* -- */
/* SP */
/* -- */
/* -- */
@media screen and (max-width: 768px) {
/* */
/* */

a{
color: var(--black);
text-decoration: none;
}

a:hover,a:focus,
a:hover img,
a:focus img{
filter: alpha(opacity=1) !important;
-moz-opacity: 1 !important;
opacity: 1 !important;
}

body{
font-size: var(--font-base-sp);
font-weight: 400;
line-height: 2;
font-feature-settings: "palt";
word-break: break-all;
}
body.scroll-prevent{
overflow: hidden;
}

/* Layout */
section{
}
#page{
}
.scroll-prevent #page{
}
.wrapper{
width: auto;
margin: 0 5.5vw 0 5.5vw;
}
.wrapper *{
}

.contents_box{
margin: 0 0 -80px 0;
padding: 60px 0 60px 0;
border-radius: 40px;
top: -50px;
}

h2{
padding-top: 32px;
font-size: var(--font-h2-sp);
line-height: 1;
letter-spacing: 3px;
}

h3{
font-size: var(--font-h3-sp);
line-height: 1;
letter-spacing: 1px;
}

h4{
font-size: var(--font-h4-sp);
line-height: 1;
letter-spacing: 1px;
}

.txt{
}
.txt .accent{
font-size: var(--font-xl-sp);
}

.nolink{
}

.pcHide{
display: block !important;
}
.spHide{
display: none !important;
}
.pc_br{
display: none;
}
.sp_br{
display: inline;
}

/* fixed btn */
.fixed_btn{
width: 96vw;
position: fixed;
top: auto;
bottom: 30px;
right: 2vw;
}
.fixed_btn.off{
opacity: 0;
transition: all .5s;
}
.fixed_btn ul li a{
width: 100%;
height: 0;
display: block;
padding: 48px 0 0 0;
background: url(../img/h2_overview.svg) no-repeat center center;
background-size: auto 21px;
background-color: var(--dark-green);
color: var(--white);
border-radius: 24px;
box-shadow: 0 0 3px rgba(0,0,0,0.2),  0 2px 3px rgba(0,0,0,0.2);
font-size: var(--font-base);
font-weight: 500;
line-height: 48px;
text-align: center;
overflow: hidden;
}
.fixed_btn ul li a:hover{
background: url(../img/h2_overview.svg) no-repeat center center;
background-size: auto 21px;
background-color: var(--green);
box-shadow: none;
}
.scroll-prevent .fixed_btn ul li a{
background: url(../img/h2_overview.svg) no-repeat center center;
background-size: auto 21px;
background-color: var(--dark-green);
box-shadow: none;
}

/* menu */
#menu{
width: 80px;
height: 80px;
background-color: var(--white);
border-bottom-left-radius: 30px;
box-shadow: 0 0 3px rgba(0,0,0,0.2),  0 2px 3px rgba(0,0,0,0.2);
}
#menu span{
width: 40px;
height: 3px;
display: block;
right: 20px;
opacity: 0;
}
#menu p{
width: 100%;
padding-top:9px;
background: url(../img/menu.svg) no-repeat right 23px center;
background-size: auto 9px;
}

#menu span:nth-of-type(1) {
top: 18px;
}
#menu span:nth-of-type(2) {
top: 27px;
}
#menu span:nth-of-type(3) {
bottom: 40px;
}
#menu p {
bottom: 22px;
animation: opacity-animation .5s forwards 1s;
}

#menu span:nth-of-type(1) {
animation: menu-bar01 .5s forwards 0.25s;
}
#menu span:nth-of-type(2) {
animation: menu-bar01 .5s forwards 0.5s;
}
#menu span:nth-of-type(3) {
animation: menu-bar01 .5s forwards 0.65s;
}
@keyframes menu-bar01 {
0% {
transform: scale(0.4,1);
opacity: 0;
}
100% {
transform: scale(1,1);
opacity: 1;
}
}
@keyframes opacity-animation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

#menu.active{
}
#menu.active span{
}

#menu.active span:nth-of-type(1) {
top: 30px;
animation: active-menu-bar01 1s forwards;
}
@keyframes active-menu-bar01 {
0% {
transform: translate(0,0) rotate(0deg);
opacity: 1;
}
50% {
transform: translate(0,0) rotate(0deg);
opacity: 0;
}
51% {
transform: translate(0,6px) rotate(0deg);
opacity: 0;
}
100% {
transform: translate(0,6px) rotate(-45deg);
opacity: 1;
}
}

#menu.active span:nth-of-type(2) {
top: 30px;
animation: active-menu-bar02 1s forwards;
}
@keyframes active-menu-bar02 {
0% {
transform: translate(0,0) rotate(0deg);
opacity: 1;
}
50% {
transform: translate(0,0) rotate(0deg);
opacity: 0;
}
51% {
transform: translate(0,6px) rotate(0deg);
opacity: 0;
}
100% {
transform: translate(0,6px) rotate(45deg);
opacity: 1;
}
}

#menu.active span:nth-of-type(3),
#menu.active p{
animation: active-menu-bar03 0.2s forwards;
}
@keyframes active-menu-bar03 {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

#gNav{
width: 0vw;
height: 0vh;
display: none;
padding: 100px 30px 50px 30px;
background-color: var(--dark-green);
color: var(--white);
border-bottom-left-radius: 30px;
position: fixed;
top: 0;
right: 0;
z-index: 8900;
}
#gNav.active{
width: 260px;
height: auto;
display: block;
}
#gNav .logo{
display: block;
}
#gNav .logo h2{
height: auto;
display: block;
padding: 0;
color: var(--white);
font-size: var(--font-s);
font-weight: 700;
line-height: 1.4;
}
#gNav .logo p{
display: block;
margin: 20px 0 0 0;
font-size: var(--font-xxxs);
font-weight: 500;
line-height: 1.4;
}
#gNav ul{
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 15px;
margin: 40px auto 0 auto;
text-align: center;
position: relative;
z-index: 8950;
}
#gNav ul li{
width: 100%;
display: block;
text-align: center;
position: relative;
}
#gNav ul li a{
display: block;
background-color: var(--white);
border-radius: 25px;
font-size: var(--font-s);
line-height: 50px;
text-align: center;
}
#gNav ul li#menuClose{
display: none;
}

/* page nav */
.page_nav{
display: none;
}
.page_nav ul{
display: flex;
justify-content: center;
gap: 20px
}
.page_nav ul li{
display: flex;
justify-content: center;
gap: 20px
}
.page_nav ul li a{
display: block;
color:var(--green);
font-size: var(--font-xl);
font-weight: 700;
line-height: 1;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 8px;
}
.page_nav ul li a:hover{
color:var(--dark-green);
text-decoration: none;
}

/* footer */
#footer{
margin: 0 0 -50px 0;
padding: 100px 0 100px 0;
top: -50px;
}
#footer .footer_outbox{
width: 89vw;
padding: 40px 0 40px 0;
border-radius: 30px;
}
#footer .wrapper{
flex-direction: column;
align-items: center;
gap: 20px;
}
.footer_link{
}
.footer_link a{
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
#copyright{
display: block;
text-align: center;
}

/* banner */
#banner{
margin: 0 0 -50px 0;
padding: 50px 0 50px 0;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
top: -50px;
}

/* */
/* */
}
/* -- */
/* -- */
/* SP */
/* -- */
/* -- */