@charset "utf-8";

/* -----------------------------------------------------------
   HEADER
------------------------------------------------------------*/

/*///////////////// header ////////////////*/
header #menu{
position:relative;
z-index: 100;
}

#kv_area header .TBSlogo{
background:url(../img/tbs_logo.png) left top no-repeat;
background-size:cover;
aspect-ratio:600/377;
z-index:10 ;
}


@media all and (min-width: 768px) {
}
@media all and (max-width:767px) {
}

/*========= ナビゲーションドロップダウンのためのCSS ===============*/

nav ul li{
position: relative;
font-weight: bold !important;
letter-spacing: 0.01em !important;
font-family: corporate-logo-ver2, sans-serif !important;
font-style: normal !important;
font-weight: 700 !important;
}

nav ul li a{
display: block;
text-decoration: none;
padding:20px 0;
white-space: nowrap;
}



@media all and (min-width: 768px) {
#g-nav{
  position:fixed;
  z-index: 999;
	top:0;
  right:0;
}

#g-nav-list{
display: flex;
justify-content: flex-end;
align-items: center;
}

nav ul{
list-style: none;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0;
background:#fff;
border-radius: 0 0 0 3em;
width:75vw;
height:5vw;
}
nav ul li{
padding:1vw 3vw 1vw 0;
}
nav ul li a{
font-size: 1.5vw;
    transition: all .4s;
}
nav ul li a:hover{
color:rgba(254 ,80, 115, 100) !important;
}
}


@media all and (max-width:767px){
nav{padding: 0;}
nav ul{	display: block;}
nav ul{
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0;
}
nav ul li
{
width: 100%;
}

nav ul li a{
position: relative;
height:.8em;
}

nav ul li a::after{
content: '\025b6';
color:#FF5073;
position: absolute;
right:1em;
display: inline-block;
z-index: 999;
font-family: a-otf-ud-shin-go-pr6n, sans-serif;
}
}

/*ナビゲーションのリンク*/
.nav_top .has-child a
{color:#000;}



/*==================================================
機能編 　5-1-11 クリックしたらナビが上から下に出現
===================================*/

@media all and (max-width:767px) {
#g-nav{
  position:fixed;
  z-index: 100;
	top:-120%;
  left:0;
	width:100%;
  height: 100vh;/*ナビの高さ*/
	background:rgba(255,255,255,1);
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
  top: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
/*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100vh;/*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
background:#ffdd00 ;
}

/*ナビゲーション*/
#g-nav ul {
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
background:#fff;
border-radius: 20px;
}

#g-nav li{
	list-style: none;
	text-align: center;
border-bottom: solid 1px #ffdd00;
text-align: left;
padding-left: 2em;
}

#g-nav li a{
	white-space: nowrap;
	text-decoration: none;
	display: block;
	font-weight: bold;
	font-size:200%;
}
}

/*==================================================
　機能編 5-2-7 3本線が奥行きを持って回転して×に
===================================*/

.g-nav-openbtn{
	display: none;
}

@media all and (max-width:767px) {
.g-nav-openbtn{
  display: block;
	position:fixed;
  z-index: 9999;/*ボタンを最前面に*/
	top:.2em;
	right:.2em;
	cursor: pointer;
  width: 40px;
  height:40px;
background: #223595;;
border-radius:.5em;
}

.g-nav-openbtn.active{
	position:fixed;
	top:.2em;
}

/*ボタン内側*/

.g-nav-openbtn .openbtn-area{
    transition: all .4s;
}

.g-nav-openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 11px;
    height: 3px;
    border-radius: 2px;
		background:#fff;
  	width: 45%;
  }


.g-nav-openbtn span:nth-of-type(1) {
	top:11px;
}

.g-nav-openbtn span:nth-of-type(2) {
	top:19px;
}

.g-nav-openbtn span:nth-of-type(3) {
	top:27px;
}

/*activeクラスが付与されると
線と周りのエリアが回転して×になる*/

.g-nav-openbtn.active .openbtn-area{
	transform: rotateY(-360deg);
}

.g-nav-openbtn.active span:nth-of-type(1) {
    top: 13px;
    left: 11px;
    transform: translateY(6px) rotate(-135deg);
    width: 45%;
}

.g-nav-openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.g-nav-openbtn.active span:nth-of-type(3){
    top: 25px;
    left: 11px;
    transform: translateY(-6px) rotate(135deg);
    width: 45%;
}
}


/*=======　閉じるための×ボタン　========*/
.close-btn{
	position: absolute;
	top:10px;
	right:10px;
	z-index: 2;
	cursor: pointer;
    width: 60px;
    height:60px;
}

.close-btn span{
    display: inline-block;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #fff;
 }

/*×マーク*/
.close-btn span:nth-of-type(1) {
    top: 21px;
    left: 16px;
    transform: translateY(6px) rotate(-135deg);
    width: 50%;
}

.close-btn span:nth-of-type(2){
    top: 32px;
    left: 16px;
    transform: translateY(-6px) rotate(135deg);
    width: 50%;
}