@charset "utf-8";
*{ box-sizing: border-box;}

/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	color: #333;
	font-family: ヒラギノ角ゴ ProN W3,Hiragino Kaku Gothic ProN,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,ＭＳ ゴシック,sans-serif;
    font-weight: 500;
	font-size: 14px;
	line-height: 1.5em;
    font-feature-settings : "palt";
	background-color: #fff;
	height: 100%; 
}
html {overflow-y:scroll; height:100%;}

a {color: #333;text-decoration: none; outline:none; transition: 0.1s;}
a:hover { opacity:0.8; transition: 0.1s;}
/*a:hover img{opacity:0.8;filter: alpha(opacity=80);}*/

.pc_only{ display:block !important;}
.sp_only{ display:none !important;}

#container{ position:relative; z-index:999;}

@media only screen and (max-width: 768px){
.pc_only{ display:none !important;}
.sp_only{ display:block !important;}
}



/********************** header *******************************/
header { text-align:left; position:fixed;  z-index:200; width:100%; top:0; transition: 1s;}
header .head_border{ border-bottom: 2px solid #000; background-color: rgba(255,255,255,0.8);}
header .container{ max-width:1400px;}
header h1{ float: left; margin: 10px 0; width: 190px; transition:0.2s ease;}
header h1 img{ width: 100%;}


.toggle_nav{ float:left; width:100%;}
.nav ul{ width: 100%;}
.nav li {display:inline-block; float: left; padding:0; position:relative;}
.nav li a{ line-height:1.4em; font-size:14px; text-align:center; transition: all 0.3s ease; padding:25px 13px; }

.nav .nav_01{ position:absolute; top:22px; right:0; width:inherit; transition: 0.2s ease;}
.nav .nav_01 li a{ display:block; color:#7453b3; border: 2px solid #7453b3; border-radius: 50px; padding: 8px 18px 8px 42px; margin-right: 6px; position:relative; background-color: #fff;}
.nav .nav_01 li a:after{ content:""; position:absolute; background-size:contain; background-repeat:no-repeat; width:25px; height:25px; left: 12px; top: calc(50% - 13px);}
.nav .nav_01 li a.icon_01:after{ background-image:url(../images/nav_icon_01.png);}
.nav .nav_01 li a.icon_02:after{ background-image:url(../images/nav_icon_02.png);}
.nav .nav_01 li a.icon_03:after{ background-image:url(../images/nav_icon_03.png);}
.nav .nav_01 li a.icon_04:after{ background-image:url(../images/nav_icon_04.png);}
.nav .nav_01 li a:hover{ opacity:0.8;}

.nav .nav_02 li{ display:table; width: 14%; margin-right:0.33%; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
.nav .nav_02 li:last-child{ margin-right:0;}
.nav .nav_02 li:nth-child(7n){ margin-top:-21px;}
.nav .nav_02 li a{ display: table-cell; vertical-align: middle; padding: 14px 0; color:#fff;}
.nav .nav_02 li:hover{ opacity:0.9;}

.nav .nav_02 li.top{ background-color:#000;}
.nav .nav_02 li.c_01{ background-color: #a65656;}/* コンサート */
.nav .nav_02 li.c_02{ background-color: #cc8426;}/* 演劇・ミュージカル・伝統芸能・お笑い */
.nav .nav_02 li.c_03{ background-color: #769d57;}/* クラシック・ダンス・バレエ */
.nav .nav_02 li.c_04{ background-color: #4e89ac;}/* スポーツ */
.nav .nav_02 li.c_05{ background-color: #3d5b6d;}

.nav_trigger{display: none;}


header.active{}
header.active h1{ width:120px; transition:0.2s ease;}
header.active .nav .nav_01{ top:12px;}
header.active .nav .nav_02 li a{ height:50px !important; padding:5px 0;}
header.active .nav li a{ font-size:13px;}


@media only screen and (max-width: 1180px){
.nav li a{ font-size:1vw; padding:25px 1vw;}
}



@media only screen and (max-width: 910px){
header{ padding:0; height: 60px;}
header .head_border{ border-bottom:none;}
header h1{ margin: 10px 0; width: 95px;}
header h1 img{ max-width: 95px;}

.nav .nav_01{ position:relative; top: 0;}
.nav .nav_01 li{ width: 94%; margin: 0 auto 4px; float: none;}
.nav .nav_01 li:first-child{ margin-bottom:-17px;}
.nav .nav_01 li a{ border: 1px solid #7453b3; border-radius: 5px; font-size: 14px; padding: 8px 18px 8px 38px;}
.nav .nav_01 li a:after{ left:7px;}

.nav .nav_02 li{ width:100%; background-color: #fff !important; border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.nav .nav_02 li.top{ border-bottom:1px solid #000; margin-bottom: -20px;}
.nav .nav_02 li.c_01{ border-bottom:1px solid #a65656;}
.nav .nav_02 li.c_02{ border-bottom:1px solid #cc8426;}
.nav .nav_02 li.c_03{ border-bottom:1px solid #769d57;}
.nav .nav_02 li.c_04{ border-bottom:1px solid #4e89ac;}
.nav .nav_02 li.c_05{ border-bottom:1px solid #3d5b6d;}
.nav .nav_02 li.top a{ color:#000;}
.nav .nav_02 li.c_01 a{ color:#a65656;}
.nav .nav_02 li.c_02 a{ color:#cc8426;}
.nav .nav_02 li.c_03 a{ color:#769d57;}
.nav .nav_02 li.c_04 a{ color:#4e89ac;}
.nav .nav_02 li.c_05 a{ color:#3d5b6d;}
.nav .nav_02 li:nth-child(7n){ margin-top:0;}

.menu_bg{ position: absolute; width: 100%; height: 52px; background-color: #8f6fb3; top: 0; left: 0; z-index: 100;}
	
.global{width:100%; position:fixed; z-index:10; top:0; left:0; overflow-y: hidden; padding-top:0; height:0; background-color:rgba(255,255,255,1); 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;}
.nav-active .global{ height:100vh;padding-top:64px; overflow-y: scroll;}
.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 a:hover,nav li a.at{  border-bottom: none;}
.nav li a{ width:100%; max-width:inherit; text-align:center; padding:6vw 0; color: #fff; font-size:16px;}
.nav li .acodion a{ font-size:14px;}
.nav li a strong{ font-size:5vw; line-height:1em; margin-bottom:2vw; }
.nav li a.on{ border-bottom:none;}

.nav li .acodion{ position:relative; width:100%; height:auto; top:0; left:0; transition:none; display:none; background-color: #ffffff;}
.nav li .acodion.two,
.nav li .acodion.three{ left:inherit; width:100%;}
.nav .about_down:hover .acodion{ height: auto;}
.nav li .acodion a{ border-bottom:1px solid #006e3f; color: #000;}

/* Default navigation icon */
.nav_trigger { display: block; position: fixed; width: 30px; height: 25px; right:3vw; top: 13px; z-index: 200;}
.nav-active .nav_trigger { opacity: 0.7;}
.nav_icon { display: inline-block; position: relative; width: 30px; height: 3px; background-color: #7453b3; -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; transition: 0.3s;}
.nav_icon:before,
.nav_icon:after { content: ''; display: block; width: 30px; height: 3px; position: absolute; background: #7453b3; -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; transition: 0.3s;}
.nav_icon:before { margin-top: -10px;}
.nav_icon:after { margin-top: 10px;}
.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: #fff;}
.nav-active .nav_icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background: #fff;}

.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:30px 0 50px; background-color: #1e2428; color:#fff;}
footer .sns{ margin-bottom: 40px;}
footer .sns .tit{ display:inline-block; margin-bottom: 0; margin-right: 14px; position: relative; top: -11px;}
footer .sns a{ display:inline-block; margin-right: 3px;}
footer .sns a img{}
footer .foot_nav{ margin-bottom: 40px;}
footer .foot_nav .tit{ display:inline-block; margin-bottom: 0; margin-right: 14px;}
footer .foot_nav a{ background-color:#303539; border:2px solid #454444; border-radius: 5px; color:#fff; padding: 6px 12px 6px 34px; margin-right: 6px; position:relative;}
footer .foot_nav a:after{ content:"\025b6"; position:absolute; font-size:14px; left: 10px;}
footer .copy{}
footer .copy a {color:#FFF; text-decoration: underline;}


@media only screen and (max-width: 768px){
footer{ padding: 20px 0;}
footer .sns{ margin-bottom:20px;}
footer .sns .tit{ display:block; margin-right:0; margin-bottom: 10px; top:0;}
footer .foot_nav{ margin-bottom:30px;}
footer .foot_nav .tit{ display:block; text-align: left; margin-bottom: 4px; margin-right: 0;}
footer .foot_nav a{ display: block; width: 100vw; position: relative; left: -3%; border: none; border-radius: 0; border-bottom: 1px solid #000; border-top: 1px solid #353d41; margin-right: 0; text-align:left;}
footer .foot_nav a:after{ font-size:10px; left:14px;}
}


/* =見出し
------------------------------------------------------------------------------------------*/
h1{margin:0;}
h2{margin:0;}
h3{margin:0;}
h4{margin:0;}
h5{margin:0;}

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