@charset "utf-8";

*{ box-sizing: border-box;}

:root{
    --accent-color:#FFC42F;
}

/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	font-family: 'Noto Serif JP', serif;
    font-weight:300;
	font-size: 16px;
	line-height: 1.5em;
	color: #000;
	margin: 0;
	min-height:100%; 
	overflow-x: hidden;
	background-color:#fff;
	font-feature-settings : "palt";

}
.sp_only{display: none;}
.pc_only{display: initial;}

body:before{ content: ''; display: block; background-image: url("../images/bg.jpg");     background-repeat:no-repeat; 
    background-size:cover; position: fixed; z-index: -1; width: 100%; height: 100vh;
    background-position: center top; }

body.in:before{}

.container{ max-width: 1100px;width: 92%;margin: 0 auto;}

@media only screen and (max-width: 768px){
    
    body:before{  background-position:center top; background-size:cover; display:block; content:""; position:fixed; top:0; left:0; width:100%; height:100vh; z-index:-1;}
.sp_only{display: initial;}
.pc_only{display: none!important;}
}

html {overflow-y:scroll; height:100%;}
a {  text-decoration: none;  cursor: pointer;color:var(--accent-color); outline:none;  }
a:link {  text-decoration: none; }
a:hover {  color: var(--hover-color);  text-decoration: none;}
a:active {  text-decoration: none;}
a img { outline:none;}
a:hover img {  opacity: .8;  -webkit-opacity: .8;  -moz-opacity: .8;  filter: alpha(opacity=80);  -ms-filter: "alpha(opacity=80)"; transition:0.3s;}


/* =fade
/********************** fade *******************************/
/*
#js_fade2 {position : fixed;top : 0; left: 0;width: 100%; height : 100%;background-color: #0091E2;background-image : url( ../images/loader.svg );background-repeat : no-repeat; background-size:80px; background-position : 50% 50%; z-index:100;}
*/

/********************** header *******************************/
header{text-align:left;position:fixed;z-index:99;top:0;width:100%;height:48px;/*background: rgb(208,255,241);background: linear-gradient(90deg, rgba(208,255,241,0.01) 0%, rgba(208,255,241,0) 35%, rgba(181,255,233,0.6) 100%);*/}
header.top{ opacity:0; transition: 1s;}
header .logo{ float: left; margin: 12px 30px 0 20px; max-width: 43px;}
header .logo img{ width: 100%;}


/* .toggle_nav{ float:right;} */
.nav ul{ width: 100%; margin-right:1.5vw;}
.nav li {display:inline-block;  float: left; padding:0;}
.nav li a{display:block;line-height:1em;font-size: 12px;color: #000;text-align:center;transition: all 0.3s ease;padding:28px 12px 15px;font-weight: bold;position:relative;}
.nav li a:hover,
.nav li a.active{color: var(--accent-color);}
.nav li.twittr{}
.nav li.twittr img{ width:21px;}
.nav li.twittr a{ padding:13px 12px 12px!important;}

.nav li a span.btm{ position: absolute; bottom: 8px; left: 50%; width: 0%; background-image: url(../images/nav_arrow.png); transition: all 0.3s ease; transform: translateX(-50%);}
.nav li a:hover span.btm,
.nav li a.active span.btm{ width:90px; height:3px;}

.nav li.twittr a:hover,
.nav li.twittr a.active{ background:none; opacity:0.8;}

.nav_trigger{display: none;}

header.in_head{ background-image:url(../images/in_nav_bg.png); background-repeat:repeat-x; padding-bottom:30px; }
header.in_head .head_wrap{ width:95%; max-width:1000px; margin:0 auto; position:relative;}
header.in_head .nav li a{ color:#fff;}
header.in_head h1{padding: 12px 0 0 0;position: absolute; top: 0px; left: 0; width: 260px;}
header.in_head h1 img{width: 100%;}
header.in_head .nav{}
header.in_head .nav ul{ margin-right:0;}
header.in_head .nav li a{ font-size:18px; padding:15px 12px 12px; }
header.in_head .nav li.twittr a{ padding:5px 0px 10px 7px!important;}

header.in_head h1.smaller { width:150px; padding-top:10px; }



@media only screen and (max-width: 1100px){
header { top:0; height:46px;}
header h1{ margin: 10px 0 0 14px; width: 70px; line-height:0;}

header.in_head{ background-image:none;  }
header.in_head .head_wrap{ width:100%;}
header.in_head .nav li a{ color:#279abf;}
header.in_head h1{padding: 6px 0 0 2vw;;position: inherit;}
header.in_head h1 img{    width: 80px;}
header.in_head .nav li a{ font-size:18px; padding: 6vw 0; }
header.in_head .nav li a:hover,header.in_head .nav li a.active { background-color: rgba(44,171,212,0.9); color: #fff;}

.nav li a span.btm{ display:none;}

.global{width:100%; position:fixed; z-index:10; top:0; left:0; overflow-y: scroll; padding-top:0; height:0; background-color:rgba(0,0,0,0.7); box-sizing: border-box;
 -webkit-transition: 1s ease;  -moz-transition: 0.5s ease;  -o-transition: 0.5s ease;  -ms-transition: 0.5s ease;  transition:0.5s ease;}
.global li{width: 100%; display:inherit; background-color:rgba(0,0,0,0.7);}
.nav-active .global{ height:100vh;padding-top:46px;}
.nav li.sp_top{ display: inherit;}

.toggle_nav{ -webkit-transition: 0.2s ease;  -moz-transition: 0.2s ease;  -o-transition: 0.2s ease;  -ms-transition: 0.2s ease;  transition: 0.2s ease;}
.nav{ margin-bottom:0; width:100%; height:inherit;}
.nav li{ border-bottom:1px solid var(--accent-color);  padding-right: 0;}
.nav li a:hover,nav li a.at{  border-bottom: none;}
.nav li a{ width:100%; max-width:inherit; text-align:center; padding:16px 0; color:#fff; font-weight:bold;}
.nav li a strong{ font-size:5vw; line-height:1em; margin-bottom:2vw; }
.nav li a.on{ border-bottom:none;}

.nav li a:hover,
.nav li a.active{ color:#fff; background-color:var(--accent-color);}

.nav .twittr{ width:100%; margin-top:0;}
.nav .twittr img{ width:10%;}
.nav li.twittr a{ padding:15px 12px 10px!important;}

/* Default navigation icon */
.nav_trigger { display: block; position: fixed; width: 30px; height: 25px; right:3vw; top: 11px; z-index: 200; line-height:1;}
.nav-active .nav_trigger { opacity: 0.7;}
.nav_icon { display: inline-block; position: relative; width: 30px; height: 2px; background-color: var(--accent-color); -webkit-transition-property: background-color, -webkit-transform; transition-property: background-color, -webkit-transform; transition-property: background-color, transform; transition-property: background-color, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms;}
.nav_icon:before,
.nav_icon:after { content: ''; display: block; width: 30px; height: 2px; position: absolute; background: var(--accent-color); -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms;}
.nav_icon:before { margin-top: -9px;}
.nav_icon:after { margin-top: 9px;}
.nav-active .nav_icon { background: rgba(0, 0, 0, 0);}
.nav-active .nav_icon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg);background:var(--accent-color);}
.nav-active .nav_icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background:var(--accent-color);}

.nav li a:hover span.btm,
.nav li a.active span.btm{ display:none;}
.nav li a span.jp{ font-size:3vw;}
}


/* =foot
-----------------------------------------------------------------------------------------*/
footer{ padding:0 0 7vw; font-size: 14px; line-height: 1.5em; position:relative;}
footer.top{padding: 60px 0;max-width: 1000px; margin: 0 auto;}
footer:before{content:"";position:absolute;background-image:url(../images/foot_bar.png);background-repeat:no-repeat;background-size:415px;width:415px;height:9px;top:0;left:50%;transform:translateX(-50%);display: none;}

footer .bnr_box{ margin-bottom: 34px; display: flex; justify-content: center; flex-wrap: wrap;gap: 10px;}
footer .bnr_box li{ display: inline-block; margin: 0 2px; width: 18.2%;}
footer .bnr_box li img{ width:100%; max-width: 200px;}
footer .bnr_box li.bnr_top{ width: 100% !important; flex-grow: 1; margin: 0 auto 4px; display: block;}
footer .bnr_box li.bnr_top img{ max-width: 240px;}

footer.top .bnr_box li{ width: 32%;}

footer .sns{ margin-bottom: 40px;}
footer .sns .tit{ margin-bottom: 12px; font-size: 14px;}
footer .sns a{ display:inline-block; margin: 0 4px; line-height: 0; width:46px;}
footer .sns a img{ width:100%;}
footer .foot_nav{ margin-bottom: 40px;}
footer .foot_nav p{}
footer .foot_nav .tit{ display:inline-block; margin-bottom: 0; font-size: 14px; font-weight: bold; line-height: 1.5em;}
footer .foot_nav .tit span{ font-size: 10px; position: relative; top: -3px; margin: 0 8px;}
footer .copy{ font-size: 12px; line-height: 1.8em;}

footer .s_ship{ margin-bottom: 6px;}
footer figure{ width: 5%; margin: 0 auto 12px;}
footer figure img{ width: 100%;}

@media only screen and (max-width: 768px){
footer.top{ padding: 16px 0 20px; width: 100%;}
footer:before{ background-size: 200px; width: 200px;}

footer .bnr_box{ flex-wrap: wrap; margin-bottom: 10px;}
footer .bnr_box li{ width:47%; margin-bottom: 4px;}

footer.top .bnr_box li{ width: 47%;}

footer .sns{ margin-bottom:20px;}
footer .sns .tit{ font-size: 16px;}
footer .sns a{  margin: 0 4px; width: 40px;}
footer .foot_nav{ margin-bottom:14px;}
footer .foot_nav .tit{ display:block; margin-bottom: 4px; margin-right: 0; text-align: center; font-size: 14px;}
footer .foot_nav a{ display: block; width: 100vw; position: relative; left: -3%; border: none; border-radius: 0; margin-right: 0; text-align:center;}
footer .foot_nav a:after{ font-size:10px; left:14px;}
footer .copy{ font-size:11px;}

footer figure{ width: 12%;}
}


/* =video
------------------------------------------------------ */
#bgvid {
 position: fixed; bottom: -30vh; left:0; width: 100%; z-index: -1; mix-blend-mode: screen; opacity: 0.7;
}
@media only screen and (max-width: 768px){
#bgvid { display:none;}
}

@media all and (-ms-high-contrast: none) {
#bgvid{ bottom: 0; opacity: 0.06;}
}


/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}


/* ===============================================
# parts
=============================================== */
/* margin */
.mb-05vw { margin-bottom: .5vw !important; }
.mb-1vw { margin-bottom: 1vw !important; }
.mb-2vw { margin-bottom: 2vw !important; }
.mb-3vw { margin-bottom: 3vw !important; }
.mb-4vw { margin-bottom: 4vw !important; }
.mb-5vw { margin-bottom: 5vw !important; }
.mb-6vw { margin-bottom: 6vw !important; }
.mb-7vw { margin-bottom: 7vw !important; }
.mb-8vw { margin-bottom: 8vw !important; }
.mb-9vw { margin-bottom: 9vw !important; }
.mb-10vw { margin-bottom: 10vw !important; }
.mb-01em { margin-bottom: .1em !important; }
.mb-02em { margin-bottom: .2em !important; }
.mb-03em { margin-bottom: .3em !important; }
.mb-04em { margin-bottom: .4em !important; }
.mb-05em { margin-bottom: .5em !important; }
.mb-06em { margin-bottom: .6em !important; }
.mb-07em { margin-bottom: .7em !important; }
.mb-08em { margin-bottom: .8em !important; }
.mb-09em { margin-bottom: .9em !important; }
.mb-1em { margin-bottom: 1em !important; }
.mb-2em { margin-bottom: 2em !important; }
.mb-3em { margin-bottom: 3em !important; }
.mb-4em { margin-bottom: 4em !important; }
.text-list ul li { padding: 0 0 3px 1.1em; position: relative;font-size: 16px;text-align: left;}
.text-list ul li:not(:last-of-child) { margin-bottom: 5px; }
.text-list ul li::before { content: "※"; position: absolute; left: 0; }
.text-list.text-list-square ul li::before { content: "■";  }

.heading-jp{font-size: 13px;color: #402E21;    writing-mode: vertical-lr;letter-spacing: 0.5em;}
.twitter-dammy{width: 100%;background: #F8F8F8;border: 1px solid #E6E6E6; height: 400px;margin-bottom: 30px;}

.in .heading img{max-height: 40px;}
.in_heading{margin: 0 auto 50px;font-size: 24px;line-height: 1.5em;text-decoration: underline;font-weight: 300;}

.btn{display: block;font-size: 12px;line-height: 1.6em;letter-spacing: 0.96px;font-weight: bold;background: #FFECBE;border-radius: 29px;width: 100%;padding: 12px;color: #000;text-align: center;margin: 0 auto;}

.coming-soon{position: relative;width: 100%;display: flex;justify-content: center;align-items: center;min-height: 400px;background: #ccc;color: #fff;}


/* .other-box{border: 1px dashed #000;position: relative;;margin:50px auto;width: 100%;text-align: center;padding: 50px 0;} */
.other-box{position: relative;;margin:50px auto;width: 100%;text-align: center;padding:0px 0;}
.other-box .btn{max-width: 300px;font-size: 18px;margin: 0 auto;padding: 15px;}
@media only screen and (max-width: 768px){
    .other-box{margin: 20px auto;}

    .coming-soon{min-height: 250px;margin-bottom: 1em;}
}

/********************** NEWS *******************************/
.news-section{text-align:left;position:relative;padding:0 0 6vw 0;z-index: 80;}
.news-section .container{}
.news-section .skew{}
.news-section h3{margin-bottom:20px;text-align: center;}
.news-section h3 img{ width:auto;}


.news-section .news_area{
    width: 100%;margin-bottom: 120px;
}
.news-section .news_area .top_a{display:block;transition:0.2s;padding: 15px;}
.news-section .news_area .top_a:hover{ background-color:rgba(255,255,255,0.5); transition:0.2s;}
.news-section .news_area dl{margin-bottom: 0;color: #3B3B3B;}
.news-section .news_area dt{font-weight:bold;position:relative;padding-left:5em;font-size:12px;line-height:1.5em;margin-bottom:0.25em;color: #3B3B3B;letter-spacing: 0.96px;}
.news-section .news_area dt span{display:block;letter-spacing:0.02em;text-align:left;position:absolute;left:0;top:0;font-size:18px;color: var(--accent-color);}
.news-section .news_area dd{font-size: 16px;font-weight: bold;line-height: 1.6em;letter-spacing: 1.28px;}
.news-section .news_area dl a{ color:#011a29; transition:0.3s; display:block;}
.news-section .news_area dd a:hover,
.news-section .news_area dt a:hover{ color:var(--hover-color); transition:0.3s;}

.news-section .news_area .news_box{margin-bottom: 50px;}
.news-section .news_area .news_li:not(:last-of-type){margin-bottom: 40px;}
.news-section .more{display: block;text-align: right;}
.news-section .news_li{display: block;}
.news-section .news_li dl{transition: .2s all;}
.news-section .news_li:hover dl dt{color: var(--accent-color); transition: .2s all;}
.news-section .news_li:hover dl dd{color: var(--accent-color); transition: .2s all;}
.news-section .twt_area{}

.news-section .news_more{text-align:right;width: 100%;display: block;padding: 9px 18px;color: var(--accent-color);margin: 0 0 0 auto;font-size: 17px;font-weight: bold;transition: all 0.3s;position:relative;}
/* .news-section .news_more:before{ content:""; position:absolute; background-image:url(../images/news_btn_bg.png); background-repeat:repeat-x; background-size:1px; width: calc(100% - 82px); height: 5px; left: 0; top: calc(50% - 3px); transition: all 0.3s;} */
/* .news-section .news_more:after{content: "\025b6";position: absolute;right: 0;font-size: 10px;color:var(--accent-color);transition: all 0.3s;} */
.news-section .news_more:hover:before{ background-image:url(../images/news_btn_bg_h.png); transition: all 0.3s;}
.news-section .news_more:hover:after{ right:-2px;}
.news-section .news_more:hover:after,
.news-section .news_more:hover{ color: var(--hover-color); transition:0.3s;}

@media only screen and (max-width: 768px){
.news-section{ display:inherit; padding:0 0 8vw 0; margin-top:0;}
.news-section .block{ display:inherit; width:100%; margin-bottom: 30px;} 

/* .news-section h3{ margin-bottom:10px; line-height: 0;} */
/* .news-section h3 img{ height: 8vw !important;} */

.news-section .news_more:before{ width: calc(100% - 80px);}

.news-section .news_area .top_a{ padding: 0; }
.news-section .news_area{ padding-right:0;}
.news-section .news_area dl{ margin-bottom:20px;}
.news-section .news_area dt{ padding-left:0; font-size:16px; line-height:1.5em; margin-bottom:5px;}
.news-section .news_area dt span{ position:relative; margin-bottom: 4px; text-align: left;}
.news-section .news_area dd{ font-size:13px; line-height:1.5em;}

.news-section .news_more{ margin-bottom: 20px; padding: 5px 20px; font-size: 15px;}
}

/********************** NEWS_SINGLE *******************************/
.news-section .news_single{ width:100%; float: left; margin-bottom:20px}
.news-section .news_single dl{ border-bottom:1px solid var(--accent-color); padding-bottom:18px; margin-bottom:15px;}
.news-section .news_single dt{ font-weight:bold; position:relative; padding-left:6.5em; font-size:18px; line-height:1.4em; color:var(--accent-color); border-bottom: 1px solid var(--accent-color); padding-bottom: 18px; margin-bottom: 18px;}
.news-section .news_single dt span{ display: block; color: var(--accent-color); width: 6.4em; letter-spacing: 0.02em; text-align: left; position: absolute; left: 0; top: 0;}
.news-section .news_single dd{}
.news-section .news_single a{ color:var(--accent-color);}

.news-section .news_single p{ font-size: 15px; line-height: 1.7em; margin-bottom:1em;}
.news-section .news_single p strong{ font-size: 2em; line-height: 2em;}
.news-section .news_single .single_bottom{ width: 100%; text-align: center; font-size: 15px;}
.news-section .news_single .single_bottom a{ margin: 0 5px; border: 1px solid var(--accent-color); padding: 6px 20px; transition: all 0.5s; display:inline-block; width: auto;}
.news-section .news_single .single_bottom a:hover{ opacity:0.8;}
.news-section .news_single .single_bottom a:nth-child(3n){ margin: 0; }
.news-section .news_single img{ max-width:100%;}
.news-section .news_single .news_more{}

.news-section .news_single hr{ border: none; background-color: #63462b; height: 1px; width: 100%; margin: 26px 0;}
.news-section .news_single .info{}
.news-section .news_single .info .tit{ background-color: var(--accent-color); padding: 3px 12px; font-size: 18px; font-weight: bold; line-height: 1.5em;}
.news-section .news_single .info .stit{ color: var(--accent-color); font-size: 17px; font-weight: bold; line-height: 1.5em; margin-bottom: 8px; border-left: 4px solid var(--accent-color); padding-left: 8px;}
.news-section .news_single .info p{}

.news-section .side_bar{ width: 23%; float: right; }
.news-section .side_bar h3{ font-size: 18px; font-weight: 600; background-color: var(--accent-color); color: #fff; text-align: center; padding: 10px 0; margin-bottom: 14px;}
.news-section .side_bar dl{ margin-bottom: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--accent-color);}
.news-section .side_bar dt{ color:var(--accent-color); font-size: 14px; line-height: 1.3em; font-weight: bold; }
.news-section .side_bar dd{ color:#000; font-size: 13px; line-height: 1.5em;}
.news-section .side_bar a{ color:var(--accent-color);}
.news-section .side_bar a.news_more{ text-align:center; display:block; border: 1px solid var(--accent-color); padding: 6px 0;}
.news-section .side_bar a.news_more:hover{ opacity:0.8;}


@media only screen and (max-width: 768px){
.news-section .news_single{ width:100%; float: none;}
.news-section .side_bar{ float:none; width:100%; margin-bottom:20px;}
.news-section .side_bar dl{ margin-bottom:10px; padding-bottom:10px;}

.news-section .news_single p{ font-size: 15px;}
.news-section .news_single p strong{ font-size: 1.5em;}
.news-section .news_single dl{ padding-bottom:10px; margin-bottom:10px;}
.news-section .news_single dt{ padding-left:0; font-size:16px; line-height:1.3em; margin-bottom:16px;}
.news-section .news_single dt span{  width:6.4em; letter-spacing:0.02em; position:relative; left:0; top:0; font-size:16px; margin-bottom:8px;}

.news-section .news_single hr{ margin: 16px 0;}
.news-section .news_single .info .tit{ font-size: 16px; padding: 2px 10px;}
.news-section .news_single .info .stit{ font-size: 15px;}

.news-section .news_single .single_bottom{ margin-bottom:30px;}
}