@charset "UTF-8";

:root {
/* 共通設定（基本カラーなどなど） */
}

/*-------------------------
__base_style
-------------------------*/
#wrap{ text-align: left;}
.go_text,
#asp_contents,
.asp_fix_inq_box,
#asp_content{ font-family:'游ゴシック Medium','Yu Gothic Medium','游ゴシック体', YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','Hiragino Sans',sans-serif; }

/*-------------------------
__header
-------------------------*/
#header{ position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; width: 100%; z-index: 200; transition: background .3s; padding: 0 20px;}
#header .header_inner{ display: block; padding: 15px 20px; justify-content: space-between; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto;}
#header .header_inner .com_logo{ width: 200px; height: auto; margin: 0;}
#header .header_inner .com_logo img{ width: 100%; height: auto;}
#header .header_inner ul{ display: none;}
#header .header_inner ul li{ margin: 0 13px;}
#header .header_inner ul li a{ font-size: 1.8em; color: #fff; text-decoration: none; padding: 0 10px; box-sizing: border-box;}
#header.on{ width: 100%; background-color: rgba(40,60,40,0.9);}
.sp_none{ display: none;}

/*-------------------------
__content
-------------------------*/
.contents_page_title{ width: 100%; height: 200px; background: linear-gradient(-25deg, rgb(40, 60, 40) 0%, rgb(83, 99, 83) 100%); margin-bottom: 30px; position: relative;}
.contents_page_title:before{ content: ''; display: inline-block; width: 335px; height: 200px; background-image: url(/images/contents_title_back.png); background-size: cover; position: absolute; top: 0; left: 0; z-index: 0; mix-blend-mode: multiply;}
.contents_page_title .contents_page_title_inner{ width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; position: relative;}
.contents_page_title .contents_page_title_inner .page_title_text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; margin-top: 10px;}
.contents_page_title .contents_page_title_inner .page_title_text h1{}
.contents_page_title .contents_page_title_inner .page_title_text h1 .jp_text{ display: block; color: #fff; font-size: 1em;}
.contents_page_title .contents_page_title_inner .page_title_text h1 .en_text{ display: block; height: 46px; margin-bottom: 10px;}
.contents_page_title .contents_page_title_inner .page_title_text h1 .en_text img{ height: 100%; width: auto;}
.contents_page_title .contents_page_title_inner .topic_path{ position: absolute; bottom: 10px; right: 20px;}
.topic_path{clear:both;padding:0;}
.topic_path ul{width:100%;text-align:left;}
.topic_path li{font-size:1em;line-height:1.4;font-weight:700;color:#fff;vertical-align:top;display:inline-block;}
.topic_path li:before{content:"/";color:#fff;font-weight:400;margin-left:5px;margin-right:5px;}
.topic_path li:first-child:before{content:"";margin:0;}
.topic_path li a{font-weight:400;color:#fff;text-decoration:underline;}
.topic_path li a:hover{text-decoration:none;}
#content #main{display:block;}
#asp_contents{ margin-top: 50px!important;}

/*-------------------------
__footer
-------------------------*/
#footer{  background: linear-gradient(-25deg, #283c28 0%, #536353 100%); position: relative;}
#footer .footer_inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 30px 20px; box-sizing: border-box; display: block; justify-content: center;}
#footer .footer_inner .footer_box01{ width: 100%; margin-bottom: 25px; text-align: center;}
#footer .footer_inner .footer_box01 .com_logo{ width: 100%; max-width: 255px; margin:0 auto 15px; text-align: center;}
#footer .footer_inner .footer_box01 .com_logo img{ width: 100%; height: auto;}
#footer .footer_inner .footer_box01 .com_data{ font-size: 1.3em; line-height: 1.5; color: #fff;}
#footer .footer_inner .footer_box01 .com_data p{}
#footer .footer_inner .footer_box01 .com_data p a{ color: #fff;}
#footer .footer_inner .footer_box02{ width: 100%;}
#footer .footer_inner .footer_box02 .footer_search{}
#footer .footer_inner .footer_box02 .footer_search p{ color: #fff; font-size: 1.4em;}
#footer .footer_inner .footer_box02 .footer_search p span{ display: block; position: relative;}
#footer .footer_inner .footer_box02 .footer_search p span::after { position: absolute; content: ""; top: 50%; right: 0; width: calc(100% - 70px); height: 1px; background-color: #677567;}
#footer .footer_inner .footer_box02 .footer_search ul{ display: block; flex-wrap: wrap; padding: 15px 0 5px; box-sizing: border-box;}
#footer .footer_inner .footer_box02 .footer_search ul li{ margin-right: 15px; margin-bottom: 10px; display: inline-block;}
#footer .footer_inner .footer_box02 .footer_search ul li a{ color: #fff; font-size: 1.2em; text-decoration: none;}
#footer .footer_inner .footer_box02 .footer_menu{ border-top: 1px solid #677567;}
#footer .footer_inner .footer_box02 .footer_menu ul{ display: block; flex-wrap: wrap; padding: 15px 0; box-sizing: border-box;}
#footer .footer_inner .footer_box02 .footer_menu ul li{ width: auto; margin-right: 15px; margin-bottom: 10px; display: inline-block;}
#footer .footer_inner .footer_box02 .footer_menu ul li a{ color: #fff; font-size: 1.2em; text-decoration: none;}
#footer .footer_inner .footer_box03{ width: 100%; display: flex; justify-content: center; align-items: center;}
#footer .footer_inner .footer_box03 .instagram{ width: 30px;}
#footer .footer_inner .footer_box03 .instagram a{ display: block;}
#footer .footer_inner .footer_box03 .instagram a img{ width: 100%; height: auto;}
#footer .footer_inner .footer_box03 .contact_btn{ margin-left: 20px;}
#footer .footer_inner .footer_box03 .contact_btn a{ display: inline-block; text-decoration: none;}
#footer .footer_inner .footer_box03 .contact_btn a span{ font-size: 1.4em; font-weight: 600; text-align: center; line-height: 40px; width: 160px; height: 40px; margin: auto; position: relative; display: block; overflow: hidden; transition: 0.5s; color: #fff; border:1px solid #fff;}
#footer .footer_inner .footer_box03 .contact_btn a span:after{ content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-right: 0; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); border-left: 6px solid #fff;}
#footer .copylight{ background-color: #000; text-align: center; padding: 10px 20px; box-sizing: border-box;}
#footer .copylight p{ color: #fff; font-size: 1.1em;}
.re_top{ position: fixed; bottom: 15px; right: 15px; z-index: 200; display: none;}
.re_top a{ display: block; width: 60px; height: 60px;}
.re_top a img{ width: 100%; height: auto;}

/*-------------------------
__footer
-------------------------*/

.error{ text-align: center; margin: 0 auto 40px; padding: 0 20px; box-sizing: border-box;}
.error > p{ font-size: 1.3em; line-height: 1.8em; margin-bottom: 15px;}
.error > p a{ color: #205a32;}
.error .back_top{}
.error .back_top a{ display: inline-block; text-decoration: none;}
.error .back_top a span{ font-size: 1.3em; font-weight: 600; letter-spacing: .1em; text-align: center; line-height: 40px; width: 200px; height: 40px; color: #947d3c; background: #FFF; margin: auto; border:1px solid #947d3c; position: relative; display: block; overflow: hidden;}
.error .back_top a span:after { content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 6px solid #947d3c; border-right: 0; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); transition: all 0.2s;}

/*-------------------------
__drawer
-------------------------*/
#toggle{ position: fixed; top: 0; left: 0; right: 0; width: 100%; min-width: 100%; text-align: right;}
#toggle .toggle_inner{ cursor: pointer; position: absolute; top: 0; right: 0; width: 50px; height: 50px; box-sizing: border-box; cursor: pointer;}
#toggle .toggle_inner:before{ content:''; width: 50px; height: 50px; /*background-color: rgba(255,255,255,0.3);*/ box-sizing: border-box; position: absolute; top: 0; right: 0; border-left: 1px solid #fff; border-bottom: 1px solid #fff;}
#toggle-box { position: relative; width: 16px; height: 16px; top: 17px; left: 18px;}
#toggle-box > span { width: 100%; height: 2px; left: 0; display: block; background: #fff; position: absolute; transition: transform .6s ease-in-out, top .5s ease, bottom .5s ease;}
#toggle-box > span:nth-child(1) { top: 0;}
#toggle-box > span:nth-child(2) { top: 50%; transform: translatey(-50%);}
#toggle-box > span:nth-child(3) {  bottom: 0;}
.is-open #toggle-box > span { background: #fff;}
.is-open #toggle-box > span:nth-child(1) { top: 50%; left: -1px; transform: rotate(45deg) translatey(-50%);}
.is-open #toggle-box > span:nth-child(2) { width: 0;}
.is-open #toggle-box > span:nth-child(3) { top: 50%; transform: rotate(-45deg) translatey(-50%);}
#toggle { z-index: 1000;}
#wrap { position: relative; z-index: 990;}
#asp_wrap .asp_fix_inq_box { z-index: 991!important;}
#wrap.back{ z-index: 889;}

#nav-content{will-change: transform; z-index: 900; overflow: auto; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); color: #fff; position: fixed; top: 0; left: 0; text-align: center; opacity: 0; transition: opacity .6s ease, visibility .6s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.is-open { overflow: hidden;}
.is-open #nav-content { z-index: 999; visibility: visible; opacity: 1;}
.is-open #nav-content a { pointer-events: auto;}

#nav-content a{ text-decoration: none;}
#nav-content .inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 80px 0 40px; box-sizing: border-box; position: relative;}
#nav-content .inner .nav_top{ display: block; justify-content: space-between; margin-bottom: 30px;}
#nav-content .inner .nav_top .nav_logo{ margin: 0 auto 20px; width: 70%; height: auto;}
#nav-content .inner .nav_top .nav_logo a img{ width: 100%; height: auto;}
#nav-content .inner .nav_top .mysearch_menu{ display: block; text-align: center; justify-content: center; margin-bottom: 30px;}
#nav-content .inner .nav_top .mysearch_menu ul{ display: flex; justify-content: center; margin-bottom: 30px; align-items: center;}
#nav-content .inner .nav_top .mysearch_menu ul li:nth-child(1){ border-right: 1px solid #fff;}
#nav-content .inner .nav_top .mysearch_menu ul li{ padding: 0 15px; box-sizing: border-box;}
#nav-content .inner .nav_top .mysearch_menu ul li a{ display: block; font-size: 1.2em; color: #fff;}

#nav-content .inner .nav_center{ display: block; margin-bottom: 0; justify-content: center; text-align: left;}
#nav-content .inner .nav_center .nav_link_block{ margin-right: 0; margin-bottom: 30px;}
#nav-content .inner .nav_center .nav_link_block:last-child{ margin-right: 0;}
#nav-content .inner .nav_center .nav_link_block > p{ color: #888; margin-bottom: 10px; padding: 0 20px; box-sizing: border-box;}
#nav-content .inner .nav_center .nav_link_block > p span.nav_en{ font-size: 2em; display: inline-block; font-weight: 700; margin-right: 10px;}
#nav-content .inner .nav_center .nav_link_block > p span.nav_jp{ font-size: 1.3em; display: inline-block;}
#nav-content .inner .nav_center .nav_link_block ul.gray_link{ display: flex; flex-wrap: wrap;}
#nav-content .inner .nav_center .nav_link_block ul.gray_link li{ display: inline-block; width: 50%;}
#nav-content .inner .nav_center .nav_link_block ul.gray_link li a{ display: block; font-size: 1.3em; color: #fff; border-bottom: 1px solid #444; box-sizing: border-box; padding: 15px 20px; font-weight: 600;}
#nav-content .inner .nav_center .nav_link_block ul.gray_link li:nth-child(1) a,
#nav-content .inner .nav_center .nav_link_block ul.gray_link li:nth-child(2) a{ border-top: 1px solid #444; box-sizing: border-box;}
#nav-content .inner .nav_center .nav_link_block ul.gray_link li:nth-child(odd) a{ border-right: 1px solid #444;}
#nav-content .inner .nav_center .nav_link_block .syubetsu{ display: flex; flex-wrap: wrap; width: 100%; margin-left: 20px;}
#nav-content .inner .nav_center .nav_link_block .syubetsu .syubetsu_box{ margin-bottom: 0; margin-top: 15px;}
#nav-content .inner .nav_center .nav_link_block .syubetsu .syubetsu_box > p{ font-size: 1.4em; font-weight: 700; color: #fff; margin-bottom: 0; margin-top: 5px;}
#nav-content .inner .nav_center .nav_link_block .syubetsu .syubetsu_box:nth-child(odd){ margin-right: 0;}
#nav-content .inner .nav_center .nav_link_block .syubetsu .syubetsu_box ul.gray_link li{ margin-bottom: 0;}

@media screen and (max-width: 374px) {
#nav-content .inner a{ white-space: nowrap;}
#nav-content .inner .nav_center .nav_link_block ul.gray_link li a{ font-size: 1.2em;}
}

/*-------------------------
__asp
-------------------------*/

#asp_content{ width:100%; padding: 50px 20px 0; box-sizing: border-box;}