@charset "UTF-8";


/*------------------------------------------------*/
/*------------------- header ---------------------*/
/*------------------------------------------------*/

.header {
position: fixed;
width: 100%;
display: flex;
justify-content: end;
background-color: var(--color-white);
padding-left: 200px;
z-index: 50;
}
/* header logo */
.header .header-logo{
position: absolute;
width: 200px;
height: 200px;
left: 0;
top:0;
background-color: var(--color-white);
padding: 30px;
display: grid;
place-content: center;/*gridの中央配置*/
place-items: center;/*要素二つ以上ある場合に*/
transition: all 0.4s;
}
.header .header-logo h2{
font-size: var(--s14);
font-weight: 200;
letter-spacing: 3px;
border-top: 1px solid;
margin-top: 10px;
padding-top: 10px;
}
/* 英語 */
html:lang(en) .header .header-logo h2{
letter-spacing: 0;
font-size: var(--s16);
}



/* nav ul */
.header-nav__group {
margin: 0;
display: flex;
justify-content: flex-end;
}
.header-nav__group .header-nav__item,
.header-nav__group .item09,
.header-nav__group .item10{
transition: all 0.2s;
}


/* nav sub */
.header-nav__group .header-nav__item > .header-nav__group-sub {
visibility: hidden;
opacity: 0;
position: absolute;
padding-left: 0;
transition: all 0.2s;
}
.header-nav__group .header-nav__item:hover > .header-nav__group-sub {
visibility: visible;
opacity: 1;
background-color: var(--color-white);
padding: 0 15px;
}
.header-nav__group .header-nav__item > .header-nav__group-sub .header-nav__group-sub-item{
text-align: left;
}
.header-nav__group .header-nav__item > .header-nav__group-sub .header-nav__group-sub-item a {
display: block;
font-size: var(--s14);
text-decoration: none;
}




/* bt anime */
.header-nav__group .header-nav__item span {
  display: inline-block;
  width: inherit;
  padding: 3px 10px;
  position: relative;
  opacity: 1 !important;
  transition: all 0.2s;
margin: 15px 5px;
font-size: var(--s14);
cursor : pointer;
}
.header-nav__group .header-nav__item.item08 span {margin: 15px 15px 15px 5px;}

.header-nav__group .header-nav__item span:before,
.header-nav__group .header-nav__item span:after {
  content: "";
  display: block;
  position: absolute;
background: linear-gradient(to right,var(--color-group), var(--color-seseragi),var(--color-golf),var(--color-ski));
  top: 0;
  pointer-events: none;
}
.header-nav__group .header-nav__item span:before {
  left: 0;
  width: 0;
  height: 1px;
}
.header-nav__group .header-nav__item span:after {
  right: 0;
  width: 1px;
  height: 0;
}

.header-nav__group .header-nav__item span:hover:before {
  width: 100%;
  transition: width 0.1s 0.1s;
}
.header-nav__group .header-nav__item span:hover:after {
  height: 100%;
  transition: height 0.1s 0.1s;
}
.header-nav__group .header-nav__item span:hover p:before {
  width: 100%;
  transition: width 0.1s 0.2s;
}
.header-nav__group .header-nav__item span:hover p:after {
  height: 100%;
  transition: height 0.1s 0.3s;
}
.header-nav__group .header-nav__item p:before,
.header-nav__group .header-nav__item p:after {
  content: "";
  display: block;
  position: absolute;
background: linear-gradient(to right,var(--color-group), var(--color-seseragi),var(--color-golf),var(--color-ski));
  bottom: 0;
  pointer-events: none;
}
.header-nav__group .header-nav__item p:before {
  right: 0;
  width: 0;
  height: 1px;
}
.header-nav__group .header-nav__item p:after {
  left: 0;
  width: 1px;
  height: 0;
}

/* lang mail bt */
.header-nav__group .item10 a{
width: 60px;
height: 100%;
padding: 10px;
display: grid;
place-content: center;/*gridの中央配置*/
place-items: center;/*要素二つ以上ある場合に*/
}
.header-nav__group .item09{background-color: var(--color-black);}
.header-nav__group .item10{background-color: var(--color-gray);}
.header-nav__group .item10 img{width: 25px; transition: all 0.2s;}

.header-nav__group .item10 a:hover img {opacity: 0.5;}



/* スクロール後 */
.header.scroll-nav .header-logo{
width: 150px;
height: 130px;
padding: 10px 20px;
}
.header.scroll-nav .header-logo h2{
font-size: var(--s12);
letter-spacing: 1px;
margin-top: 5px;
padding-top: 5px;
}
.header.scroll-nav .header-nav__group .header-nav__item a {
margin: 10px 5px;
}

/* ランゲージボタン調整 */
a.gt_switcher-popup{
display: block;
background-image: url(../img/icon_lang.svg);
background-position: center center;
background-size: 25px;
width: 60px;
height:60px;
}
a.gt_switcher-popup img,
a.gt_switcher-popup span{
display: none!important;
width: 0;
height: 0;
}

/* スマホランゲージを非表示 */
.sp_lang a.gt_switcher-popup{
display: none;
}