@charset "UTF-8";

html{
	font-size:62.5%;
}

body{
	margin:0;
	padding:0;
	position:relative;
	font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', -apple-system, system-ui, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400; /* Regular */
  src: url('../fontfile/ZenKakuGothicNew-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400; /* Regular */
  src: url('../fontfile/NotoSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 400; /* Regular */
  src: url('../fontfile/NotoSansThai-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400; /* Regular */
  src: url('../fontfile/ZenKakuGothicNew-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 400; /* Regular */
  src: url('../fontfile/NotoSansTC-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 400; /* Regular */
  src: url('../fontfile/NotoSansSC-Regular.ttf') format('truetype');
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        display: none;
        opacity: 0;
        z-index: -1;
    }
}

#loader {
    width: 100%;
    height: 100vh;
    background-color: #FFFFFF;
}

.sk-fading-circle {
  margin: 600px auto;
  width: 40px;
  height: 40px;
  position: relative;
}

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #006423;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}

#wrapper {
	width: 100%;
	height:0px;
	overflow: hidden;
	position: relative;
	text-align:center;
	background-size: cover;
	background-position: center;
}

/* WebPサポートのチェック */
@supports (background-image: url("../img/selectlang_w.webp")) {
    #wrapper {
        background-image: url("../img/selectlang_w.webp");
    }
}

/* WebPがサポートされていない場合 */
@supports not (background-image: url("../img/selectlang_w.webp")) {
    #wrapper {
        background-image: url("../img/selectlang_w.jpg");
    }
}

#javaerr{
	position:fixed;
	width:100%;
	top:50%;
	
}
#javaerr p{
	color:#006423;
	text-align:center;
	font-size:26px;
	line-height:39px;
	font-weight:700;
}

#langbox{
	position: relative;
	display:inline-block;
	width:834px;
	height:auto;
	margin:0 auto;
	margin-top:64px;
	border: 4px solid #006423;
	z-index: 1;
	background-color: rgba(34,34,34,0.3);
}

#langnav{
	display:inline-block;
	width:690px;
	text-align:left;
	margin-top:36px;
	margin-bottom:36px;
	z-index: 3;
}

.langline{
	display:inline-block;
	width:100%;
}

.langleft{
	width:auto;
	float:left;
}

.rightside{
	width:230px;
	float:right;
}

.langright{
	display: inline-block;
	width:auto;
}

.Item{
  	text-decoration: none;
  	color: #FFFFFF;
  	font-size:36px;
	font-size:3.6rem;
	line-height:108px;
	line-height:10.8rem;
	letter-spacing:10.8px;
	letter-spacing:1.08rem;
}

#ItemJp{
	font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', -apple-system, system-ui, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

#ItemEn{
	font-family: 'Noto Sans', -apple-system, system-ui, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

#ItemFr{
	font-family: 'Noto Sans', -apple-system, system-ui, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

#ItemSp{
	font-family: 'Noto Sans', -apple-system, system-ui, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

#ItemTh{
	font-family: 'Noto Sans Thai', -apple-system, system-ui, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

#ItemIt{
	font-family: 'Noto Sans', -apple-system, system-ui, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

#ItemDe{
	font-family: 'Noto Sans', -apple-system, system-ui, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

#ItemKr{
	font-family: 'Noto Sans KR', -apple-system, system-ui, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

#ItemTw{
	font-family: 'Noto Sans TC', -apple-system, system-ui, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

#ItemCn{
	font-family: 'Noto Sans SC', -apple-system, system-ui, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

#ItemJp,#ItemEn,#ItemCn,#ItemTw,#ItemKr,#ItemTh,#ItemFr,#ItemDe,#ItemIt,#ItemSp{
	text-decoration: none;
  color: #FFFFFF;
  font-size:36px;
	font-size:3.6rem;
	line-height:108px;
	line-height:10.8rem;
	letter-spacing:10.8px;
	letter-spacing:1.08rem;
}

.lang-list{
  	position: relative;
  	z-index: 1;
}

.lang-list:after{
  	content: '';
  	position: absolute;
  	left: 0;
  	bottom: 0px;/*テキストからの距離*/
  	width: 0%;/*初期状態では下線非表示*/
  	height: 4px;/*下線の高さ*/
  	background: #006423;/*下線の色*/
  	z-index: -1;
  	transition: all 0.4s;/*アニメーション速度*/
}
.Item:hover{
	color: #006423;
}

#ItemJp:hover,#ItemEn:hover,#ItemCn:hover,#ItemTw:hover,#ItemKr:hover,#ItemTh:hover,#ItemFr:hover,#ItemDe:hover,#ItemIt:hover,#ItemSp:hover{
	color: #006423;
}

.Item:hover .lang-list:after{
  	width: 100%;/*hover時に表示*/
}

#ItemJp:hover .lang-list:after,#ItemEn:hover .lang-list:after,#ItemCn:hover .lang-list:after,#ItemTw:hover .lang-list:after,#ItemKr:hover .lang-list:after,#ItemTh:hover .lang-list:after,#ItemFr:hover .lang-list:after,#ItemDe:hover .lang-list:after,#ItemIt:hover .lang-list:after,#ItemSp:hover .lang-list:after{
	width: 100%;/*hover時に表示*/
}

#footerbox{
	position:relative;
	margin-top:64px;
	margin-bottom:12px;
	width:100%;
	height:60px;
	text-align:center;
}

#footerbox img{
	width:auto;
	height:60px;
}

/* ---------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 980px) {

#langbox{
	display:inline-block;
	width:70%;
	height:auto;
	margin:0 auto;
	margin-top:54px;
	border: 4px solid #006423;
}

#langnav{
	display:inline-block;
	width:auto;
	text-align:left;
}

.langline{
	display:block;
	width:auto;
}

.langleft{
	display:inline-block;
	clear:both;
	width:auto;
	float:none;
}

.rightside{
	width:auto;
	clear:both;
	float:none;
}

.langright{
	clear:both;
	padding-left:0;
	width:auto;
	float:none;
}

.Item{
  	text-decoration: none;
  	font-size:36px;
	font-size:3.6rem;
	line-height:108px;
	line-height:10.8rem;
	letter-spacing:10.8px;
	letter-spacing:1.08rem;
}

#ItemJp,#ItemEn,#ItemCn,#ItemTw,#ItemKr,#ItemTh,#ItemFr,#ItemDe,#ItemIt,#ItemSp{
	text-decoration: none;
  	font-size:36px;
	font-size:3.6rem;
	line-height:108px;
	line-height:10.8rem;
	letter-spacing:10.8px;
	letter-spacing:1.08rem;
}

.lang-list{
  	position: relative;
  	z-index: 1;
}

.lang-list:after{
  	content: '';
  	position: absolute;
  	left: 0;
  	bottom: 0px;/*テキストからの距離*/
  	width: 0%;/*初期状態では下線非表示*/
  	height: 4px;/*下線の高さ*/
  	background: #006423;/*下線の色*/
  	z-index: -1;
  	transition: all 0.4s;/*アニメーション速度*/
}
.Item:hover{
	color: #006423;
}
.Item:hover .lang-list:after{
  	width: 100%;/*hover時に表示*/
}

#footerbox{
	position:relative;
	margin-top:54px;
	margin-bottom:12px;
	width:100%;
	height:60px;
	text-align:center;
}

#footerbox img{
	width:auto;
	height:60px;
}

}

/* ---------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 680px) {

#langbox{
	display:inline-block;
	width:88%;
	height:auto;
	margin-top:36px;
	border: 2px solid #006423;
}

#langnav{
	display:inline-block;
	width:auto;
	text-align:left;
}

.langleft{
	clear:both;
	width:100%;
	float:none;
}
.langright{
	clear:both;
	padding-left:0;
	width:100%;
	float:none;
}

.Item{
  text-decoration: none;
  font-size:24px;
	font-size:2.4rem;
	line-height:72px;
	line-height:7.2rem;
	letter-spacing:7.2px;
	letter-spacing:0.72rem;
}

#ItemJp,#ItemEn,#ItemCn,#ItemTw,#ItemKr,#ItemTh,#ItemFr,#ItemDe,#ItemIt,#ItemSp{
	text-decoration: none;
  	font-size:24px;
	font-size:2.4rem;
	line-height:72px;
	line-height:7.2rem;
	letter-spacing:7.2px;
	letter-spacing:0.72rem;
}

.lang-list{
  	position: relative;
  	z-index: 1;
}

.lang-list:after{
  	content: '';
  	position: absolute;
  	left: 0;
  	bottom: 0px;/*テキストからの距離*/
  	width: 0%;/*初期状態では下線非表示*/
  	height: 2px;/*下線の高さ*/
  	background: #006423;/*下線の色*/
  	z-index: -1;
  	transition: all 0.4s;/*アニメーション速度*/
}
.Item:hover{
	color: #006423;
}
.Item:hover .lang-list:after{
  	width: 100%;/*hover時に表示*/
}

#footerbox{
	position:relative;
	margin-top:48px;
	margin-bottom:6px;
	width:100%;
	height:48px;
	text-align:center;
}

#footerbox img{
	width:auto;
	height:48px;
}

}

/* ---------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 540px) {

.Item{
  	text-decoration: none;
  	font-size:18px;
	font-size:1.8rem;
	line-height:54px;
	line-height:5.4rem;
	letter-spacing:5.4px;
	letter-spacing:0.54rem;
}

#ItemJp,#ItemEn,#ItemCn,#ItemTw,#ItemKr,#ItemTh,#ItemFr,#ItemDe,#ItemIt,#ItemSp{
	text-decoration: none;
  	font-size:18px;
	font-size:1.8rem;
	line-height:54px;
	line-height:5.4rem;
	letter-spacing:5.4px;
	letter-spacing:0.54rem;
}

#footerbox{
	position:relative;
	margin-top:36px;
	margin-bottom:6px;
	width:100%;
	height:36px;
	text-align:center;
}

#footerbox img{
	width:auto;
	height:36px;
}

}