@charset 'utf-8';
:root{
  /* color */
	--main-color: #fff;
	--color-bl: #232323;
	--color-green: #4BB132;
	--ff-main: "Noto Sans JP", sans-serif;
	--ff-science-gothic:"Science Gothic", sans-serif;
}


.science-gothic {
  font-family: var(--ff-science-gothic);
}

/* reset
------------------------------------------------ */
body,div,pre,p,a,img,form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,embed,object,
figure,figcaption {
	margin: 0;
	padding: 0;
}
html { height: 100%; font-size: 62.5%; }
body {
	width: 100%;
	height: 100%;
	background-color: #0D1116;
	-webkit-text-size-adjust: 100%;
	font-family: var(--ff-main);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--main-color);
}
*,
*:before,
*:after { -webkit-box-sizing: border-box; box-sizing: border-box; }
ul,ol { list-style: none; }
img { width: auto; height: auto; max-width: 100%; border: none; vertical-align: top; }
a{ text-decoration: none; }
a:hover { text-decoration: none; }

/* container
----------------------------------------------- */
#container { position: relative; width: 100%; overflow: hidden; font-size: 1rem; }
.link-skipcontent { position: absolute; margin: -1px; width: 1px; height: 1px; overflow: hidden; }

.pll-dropdown {
    position: relative;
    display: inline-block;
}

.pll-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 15px 0 0;
    border: 0;
    background: transparent;
    outline: none;
    cursor: pointer;
    color: #fff;
    font-size: 1.4em;
	font-weight: 400;
	font-family: var(--ff-science-gothic);
	background: url(../img/share/icon_arrow_down.png) no-repeat right center / 9px auto;
}

.pll-dropdown-btn img {
    width: 1.7142em;
}

.pll-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    background: #fff;
    border: 1px solid #ccc;
    min-width: calc(100% + 2em);
    z-index: 999;
	border-radius: .5em;
	overflow: hidden;
}

.pll-dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 6px;
	padding: .5em;
    font-size: 1.4em;
	font-family: var(--ff-science-gothic);
    text-decoration: none;
    color:var(--color-bl);
}

.pll-dropdown-menu li a:hover {
    color: var(--color-green);;
}

.pll-dropdown-menu img {
    width: 1.8em;
}

.pll-dropdown.open .pll-dropdown-menu {
    display: block;
}
@media only screen and (max-width: 1800px) and (min-width: 769px) {
	#header{font-size: 0.5555vw;}
}
@media only screen and (max-width: 768px) {
	#header .pll-dropdown-btn img{ display: none; }
}
/* @media only screen and (min-width: 769px) and ( max-width: 1800px ) {
	#container { font-size: 0.5555vw; }
} */

@media only screen and (min-width: 769px) and ( max-width: 1440px ) {
	#container { font-size: 0.69444vw; }
}

/* @media only screen and (min-width: 769px) and ( max-width: 1366px ) {
	#container { font-size: 0.73206vw; }
} */

/* @media only screen and (max-width: 1920px) and (min-width: 769px) {
	#container{ font-size: 0.52083vw; }
} */

@media only screen and (max-width: 350px) {
	#container { font-size: 2.66vw; }
}

.wrap,
.wrap-1320,
.wrap-full { position: relative; margin: 0 auto; }
.wrap { max-width: 120em; }
.wrap-1320{ max-width: 132em; }
.wrap-full{ padding: 0 5em; }
@media only screen and (min-width: 769px) {
	.sp { display: none !important; }
}

@media only screen and (max-width: 768px) {
  	.wrap,
	.wrap-1320,
	.wrap-full{ padding: 0 2.5em; }
	.pc { display: none !important; }
}
/* btn
------------------------------------------------ */
.btn-01{ display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap:.5em; width: 28.4em; height:5em; color:#0d1116; border: 1px solid #fff; transition: .2s ease; border-radius: .5em; overflow: hidden; background-color: #fff; }
.btn-01 span{ font-size: 1.6em; font-weight: bold; text-transform: uppercase; line-height: calc(27.2/16); transition: .2s ease; }
.btn-01.btn-external:after{ content:''; width: 1.5em; height: 1.5em; background: url(../img/share/external_link_black.svg) no-repeat center / contain; }
.btn-01.btn-external-02{ background: linear-gradient(90deg,#006f2e 30%, #9ac717 75%); border: 0; color:#fff; background-size: 200% 100%; background-position: 30% 0; transition: .2s cubic-bezier(0.45, 0, 0.55, 1); }
.btn-01.btn-external-02:after{ content:''; width: 1.5em; height: 1.5em; background: url(../img/share/external_link_white.svg) no-repeat center / contain; }

.btn-03{ font-size: 1em; transition: .2s cubic-bezier(0.45, 0, 0.55, 1); display: inline-flex; align-items: center; color: #4bb132; justify-content: center; width: 30em; height: 7em; border: 1px solid #4bb132; border-radius: .5em; offset-anchor: 1; background-color: transparent; cursor: pointer; }
.btn-03 span{ font-size: 2em; font-weight: bold; }

.btn-02{
	display: inline-flex; align-items: center; justify-content: center; width: 30em; height: 7em;
	background: linear-gradient(90deg, #006f2e 30%, #9ac717 75%);
    border: 0;
    color: #fff;
    background-size: 200% 100%;
    background-position: 30% 0;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
	font-size: 1em;
	cursor: pointer;
	border-radius: .5em;
	overflow: hidden;
}
.btn-02 span{ font-size: 2em; font-weight: bold; }

@media only screen and (min-width: 769px) {
	.btn-01:hover{ background-color: transparent; }
	.btn-01:hover span{ color: #fff; }
	.btn-01.btn-external:hover:after{ background-image: url(../img/share/external_link_white.svg); }
	.btn-01.btn-external-02:hover{ background-position: 100% 0; }

	.btn-02:hover{ background-position: 100% 0; }
	.btn-03:hover{ color: #fff; background-color: #4bb132; }
}

@media only screen and (max-width: 768px) {
	.btn-01{ display: flex; margin: 0 auto; width: 27.4em; height: 5em; }
	.btn-02{ width: 27.4em; }
}
/* link
--------------------- */
.link-01{ display: inline-flex; position: relative; color:#4BB132; overflow: hidden; }
.link-01::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #4BB132;
    transition: transform 300ms;
	transform: translate3d(0, 0, 0);
}
.link-01:hover::after{
	/* opacity: 0; */
	transform: translate3d(100%, 0, 0);
}

.txt-center{ text-align: center; }
@media only screen and (min-width: 769px) {
	.pc-txt-center{text-align: center; }
}

/* header
------------------------------------------------ */
#header{ position:fixed; left: 0; top:0; width: 100%; z-index: 9999; transition: background-color .2s ease; }
#header:not(.top-header){ background: #0D1116 url(../img/share/border_line.png) repeat-x center calc(100% + 1px) / auto 2px; }
.header-inner{ width: calc(100% - 10em); height: 8.8em; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.header-nav-list a{ display: block; color:var(--main-color); font-family: var(--ff-science-gothic); font-weight: normal;  }
.header-nav-item{ padding: 3em 0; }
.header-nav-item > a .en{ display: block; position: relative; font-size:1.7em; line-height: 1.5; cursor: pointer; }
.header-nav-item > a .en span {
    display: block;
    position: relative;
    transition: transform .3s cubic-bezier(.215, .61, .355, 1);
}
.header-nav-item > a .en .cloned {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate3d(0, 100%, 0);
}
.header-nav-tem-has-sub{ position: relative; }
.header-nav-tem-has-sub > a{ position: relative; }
.header-lang-select{ z-index: 1; }
.header-logo{ width:30.9em; margin-right: 3em; }
.header-logo h1{ line-height: 1; }
.header-logo a{ display: block; }
@media only screen and (min-width: 769px) {
	.header-logo a:hover{ opacity: .8; }
	.header-nav{ flex:1; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; }
	.header-nav-item > a .en{ clip-path: inset(0 0 8% 0); }
	.header-nav-item > a:hover .en .ori {
        transform: translate3d(0, -100%, 0);
    }
	.header-nav-item > a:hover .en .cloned {
        transform: translateZ(0);
    }
	.header-nav-list{ display: flex; flex-wrap: wrap; gap:3em; }
	.header-nav-list-sub{ padding: 2em; position:absolute; left:-1.5em; top:6.8em; background-color:#fff; border-radius: .5em; pointer-events:none; visibility: hidden; }
	.header-nav-list-sub a{ font-size: 1.6em; line-height: calc(27.2/16); color:var(--color-bl); }
	.header-nav-list-sub a:hover{ color: var(--color-green); }
	.header-nav-list-sub-item{ white-space: nowrap; }
	.header-nav-list-sub-item+.header-nav-list-sub-item{ margin-top: 0.5em; }
	.header-nav-mobile-dropdown{ display:none; }
	.header-nav-tem-has-sub:hover .header-nav-list-sub{ visibility: visible; pointer-events: auto; }
	.header-mobile-menu{ display:none; }
}

@media only screen and (max-width: 768px) {
	/* #header:not(.top-header){background-color: #0D1116;background: url(../img/share/border_line.png) repeat-x center bottom / auto 1px;} */
	.header-inner{ height: 6em; width: calc(100% - 3em); justify-content: flex-start; }
	.header-mobile-menu{ position: relative; position: absolute; right: 1.5em; top: 50%; transform: translateY(-50%); padding:.3em; height: 22px; width: 32px; border:0; background:none; outline:none; }
	.header-mobile-menu span{ position: absolute; display:block; width:100%; height:2px; border-radius: 1px; background-color: #fff; transition: rotate .2s ease; }
	/* .header-mobile-menu span+span{ margin-top: 5px; } */
	.header-mobile-menu span:nth-child(2){ left: 0; top:50%; transform: translateY(-50%); }
	.header-mobile-menu span:nth-child(1){ top: 0; left: 0; }
	.header-mobile-menu span:nth-child(3){ right: 0; bottom: 0;}
	.header-mobile-menu.is-active span:nth-child(2){visibility: hidden;}
	.header-mobile-menu.is-active span:nth-child(1){top:.75em;left:.05em;transform: rotate(45deg)}
	.header-mobile-menu.is-active span:nth-child(3){ bottom: 0.75em; transform: rotate(-45deg);}
	.header-logo{ width: 22.1em; }
	/* .header-nav{ display: none; } */
	.header-nav{ position: absolute; left: 0; top:-100dvh; width: 100%; height: calc(100dvh - 6em); background-color: #0D1116; transition: .2s ease; z-index: -1; }
	.header-nav.is-active{ top: 6em; z-index: 1; }
	.header-nav-item{ padding: 0 2.5em; border-bottom: 1px solid #5C5C5B; }
	.header-nav-item > a{ padding: 2.15em 0; }
	.header-nav-item > a .en{ font-size: 1.9em; line-height: calc(21/19); }
	.header-nav-mobile-dropdown{ transition: .2s ease; padding: 1em; position: absolute; right: 1.4em; top: 1.6em; width: 1.7em; height: 1.8em; background: url(../img/share/arrowleft.svg) no-repeat center center / .8em auto; border:0; outline: none; }
	.header-nav-mobile-dropdown.is-active{ transform: rotate(180deg); } 
	.header-nav-list-sub{ display: none; padding: 1.3em 0; width: calc(100% + 5em); margin-left: -2.5em; background-color: #4F5255; }
	.header-nav-list-sub-item{ padding: 0 2.5em; }
	.header-nav-list-sub a{ padding: .6em 0; font-size: 1.5em; }
	.header-nav-item > a .en .cloned{ display: none; }
}

/* main
------------------------------------------------ */
#main { display: block; position: relative; width: 100%; }

#footer{ position: relative; background-color: #0D1116; }
#footer:before{ content: ''; display: block; height: 2px; width: 100%; background: url(../img/share/border_line.png) repeat-x center 0 / 1920px 2px; }
.footer-logo{ width:30.6em; }
.footer-logo a{ display:block; }
.footer-logo a:hover img{ opacity:.8; }
.footer-row{ position: relative; padding: 7em 0; }
.footer-nav-item a{ display: block; color: var(--main-color);  font-family: var(--ff-science-gothic); font-weight: normal; }
.footer-nav-item > a .en{ display: block; position: relative; font-size: 1.7em; line-height: 1.5; cursor: pointer; }
.footer-nav-item  > a .en span {
    display: block;
    position: relative;
    transition: transform .3s cubic-bezier(.215, .61, .355, 1);
}
.footer-nav-item > a .en .cloned {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate3d(0, 100%, 0);
}


.footer-bottom{ padding: 1.3em 0; font-family: var(--ff-science-gothic); border-top:1px solid #84888B; }
.footer-link-group{ display:inline-flex; flex-wrap: wrap; gap:3em; }
.footer-link-item{ transition: color .2s ease; display:inline-flex; align-items:center; font-size:1.3em; line-height: calc(22.1/13); color: #84888b; }
.footer-link-item i{ margin-left: 0.38em; }
.footer-link-item i svg{ width: 1.15em; height: 1.15em;  }
.footer-link-item i svg path{ transition: color .2s ease; }
.copyright{ font-size: 1em; font-weight: 300; color: #84888b; }

.footer-socail-list{ margin-top: 2.6em; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap:2em; }

@media only screen and (min-width: 769px) {
	#main { padding-bottom: 20em; }
	#main:not(.top-main){ padding-top: 10em; }
	.footer-row{ display:flex; flex-wrap:wrap; gap:3em; }
	.footer-nav{ width: 60.5em; }
	.footer-nav-list{ display: flex; flex-wrap: wrap; gap: 2em 3em; }
	.footer-nav-item > a .en{ 
		clip-path: inset(0 0 8% 0);	
	}
	.footer-nav-item > a:hover .en .ori {
        transform: translate3d(0, -100%, 0);
    }
	.footer-nav-item > a:hover .en .cloned {
        transform: translateZ(0);
    }

	.footer-lang{ position:absolute; right:0; top:7em; }
	.footer-lang .pll-dropdown{ display: flex; flex-wrap: wrap; justify-content: flex-end; }
	.footer-socail-list a:hover svg path{ fill:#84888B; }
	.footer-bottom-row{ display:flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
	.footer-link-item:hover{ color: #fff; }
	.footer-link-item:hover i svg path{ stroke: #fff; }
}

@media only screen and (max-width: 768px) {
	#main { padding-bottom: 12em; }
	#main:not(.top-main){ padding-top: 6em; }
	.footer-logo{ width: 28.1em; }
	.footer-row{ padding: 3.8em 1em; }
	.footer-nav{ margin-top: 1.8em; }
	.footer-nav-item{ border-bottom: 1px solid #5C5C5B; }
	.footer-nav-item a{ padding: 2.1em 0; }
	.footer-nav-item > a .en{ font-size: 1.6em; line-height: calc(17.6/16); }
	.footer-nav-item > a .en .cloned{ display: none; }
	.footer-bottom{ padding: 2.3em 0; }
	.footer-bottom-row{ padding: 0 1em; }
	.footer-link-item{ font-size: 1.2em; line-height: calc(13.2/12); white-space: nowrap; }
	.footer-link-item i svg{ width: .9166em; height: .9166em; }
	.footer-link-group{ gap:2em; flex-direction: column; }
	.footer-lang{ margin-top: 4em; display: flex; flex-wrap: wrap; justify-content: space-between; }
	.footer-socail-list{ margin: 0; display: inline-flex; }
	.copyright{ margin-top: 1.7em; }
}