@charset "utf-8";
/************************************************

@PC - common.css

version: 6.0

*reset.css
*icomoon.css

(c) ULM Co.,Ltd. - https://www.ulm-design.com
************************************************/
/* reset */
article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}a,hr{padding:0}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}ins,mark{background-color:#ff9;color:#000}body{line-height:1}li,ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;font-size:100%;vertical-align:baseline;background:0 0}ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}

picture {
  display: block;
  line-height: 0em;
}

a {
	text-decoration: none;
	display: inline-block;
}
a:link {}
a:visited {}
a:hover {}
a:active {}

/*
font
*****/
.trajan {
  font-family: trajan-pro-3, serif;
  font-weight: 400;
  font-style: normal;
}

.gothic {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

.minchou {
  font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','游明朝体+36ポかな','YuMincho +36p Kana','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ＭＳ 明朝', 'MS Mincho','ＭＳ Ｐ明朝','MS PMincho',sans-serif;
}

/*-------------------------------

html

-------------------------------*/
html, body {
	background: #000;
  font: 13px/1em 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','游明朝体+36ポかな','YuMincho +36p Kana','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ＭＳ 明朝', 'MS Mincho','ＭＳ Ｐ明朝','MS PMincho',sans-serif;
  /*font: 13px/1em "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";*/
  letter-spacing: 1px;
  word-break: break-all;
  word-wrap: break-word;
  font-feature-settings: "palt";/*文字間詰め*/
	-webkit-text-size-adjust: 100%; /* adjust */
}

*, *:before, *:after{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.hover {
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
}

.click {
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
}

.click:active {
	-webkit-transition: all .1s ease;
	transition: all .1s ease;
  transform: scale(.95);
}

.w100 {
  width: 100%;
  height: auto;
}

.ls0 {
  letter-spacing: -2px;
}

.pc {display: block;}
.sp {display: none;}

.coming-txt {
  color: #fff;
  font-size: 60px;
  line-height: 1em;
  text-align: center;
  padding: 200px 0;
}

@media all and (max-width:812px) {
  .pc {display: none;}
  .sp {display: block;}
  
  .coming-txt {
    font-size: 30px;
    line-height: 1em;
  }

}

/*-------------------------------

#wrapper

-------------------------------*/
#wrapper {
	width: 100%;
  min-width: 1280px;
	display: block;
  position: relative;
  overflow: hidden;
}

@media all and (max-width:812px) {

  #wrapper {
    min-width: 100%;
  }
  
}

/*-------------------------------

#header

-------------------------------*/
#header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 40px;
  width: 300px;
  height: 100%;
  min-height: 680px;
  padding: 28px 0 0 0;
}

#header-inner {
  position: absolute;
  top: 28px;
  transform: translateY(0);
}

#header-ttl {
  width: 228px;
  height: 120px;
  background: url("../img/common/logo_white_190820.png") no-repeat center center /cover;
  overflow: hidden;
}

.header-ttl-link {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
}

#header-orna {
  width: 38.5px;
  margin: 12px auto;
}

#header-onair {
  width: 218px;
  margin: 0 auto;
}

#global-nav-container {
  margin: 40px 0 0;
  font-size: 17px;
}

.global-nav-box {
  margin: 0 0 10px;
}

.global-nav-box.small {
  font-size: 13px;
  margin: 20px 0 0 0;
}

.global-nav-box.small a {
  display: block;
  margin: 0 0 5px;
}

.global-nav-btn {
  color: #fff;
  padding: 5px 0;
}

.global-nav-btn.coming {
  opacity: .5;
  cursor: default;
}

.global-nav-btn .share-icon {
  font-size: 100%;
  margin: 0 5px 0 0;
}

#header-share-container {
  display: none;
}

#lang-nav-container {
  white-space: nowrap;
  padding: 0 0 30px;
  color: #fff;
}

#lang-icon {
  margin: 0 10px 0 0;
}

#lang-nav {
  font-size: 11px;
}

.lang-nav-btn {
  color: inherit;
  display: inline;
}

/*PCのみ*/
@media all and (min-width:813px) {
  
  #header-inner {
    display: block !important;
  }
  
  #top #header-inner {
    transition: all .3s ease-in;
  }
  
  .contents #header {
    width: 150px;
  }
  
  .contents .global-nav-box.small {
    font-size: 10px;
  }
  
  #top #header-ttl {
    transition: all .3s ease-in;
  }
  
  #top #header-orna,
  #top #header-onair {
    transition: all .3s ease-in;
  }
  
  #global-nav.animate .global-nav-btn {
    transition: all .3s ease-in-out;
  }
  
  /*メニュー縮小*/
  #header.mini {
    width: 150px;
  }
  
  #header.mini #header-inner {
    transition: all .3s ease-out;
    /*top: 50%;
    transform: translateY(-50%);*/
  }
  
  #header.mini #header-ttl {
    transition: all .3s ease-in;
  }
  
  #header.mini #header-orna,
  #header.mini #header-onair {
    transition: all .3s ease-in;
  }
  
  #header.mini .global-nav-btn {
    transition: all .3s ease-in;
  }

  
  body.contents #header.mini {
    display: block;
  }
  
  body.contents #header-ttl,
  .mini #header-ttl {
    width: 107px;
    height: 57px;
  }
  
  body.contents #header-orna,
  body.contents #header-onair,
  .mini #header-orna,
  .mini #header-onair {
    width: 0;
    height: 0;
    margin: 0;
  }
  
  body.contents #global-nav-container,
  .mini #global-nav-container {
    margin: 25px 0 0 0;
    font-size: 12px;
  }
  
  /*メニュー黒ベース*/
  #header.black {
    
  }
  
  .black #header-ttl {
    background: url("../img/common/logo_black_190820.png") no-repeat center center /cover;
  }
  
  .black .global-nav-btn {
    color: #000;
  }

  .global-nav-btn:not(.coming):hover {
    transition: all .2s ease-in !important;
    transform: translateX(10px);
  }
  
  #header.mini .small {
    font-size: 10px;
  }

  #header.black #lang-nav-container {
    color: #000;
  }

  #header.black .lang-nav-btn {
    color: #000;
  }

  
  .lang-nav-btn:hover {
    opacity: .5;
  }
  
}

/*SP*/
@media all and (max-width:812px) {
  
  #header {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 55px;
    height: 55px;
    min-height: auto;
    padding: 0;
    background: #8a87ab;
    transition: all .2s ease-in;
    overflow: hidden;
  }

  #header.show {
    width: 100vw;
    height: 100vh;
    background: #fff;
  }
  
  #drawer-btn {
    width: 55px;
    height: 55px;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
  }
  
  #drawer-btn.open {
  }

  #drawer-line-box {
    width: 28px;
    margin: 18px auto 0;
    padding: 0 0 4px 0;
  }

  .drawer-line {
    width: 28px;
    height: 2px;
    background: #fff;
    margin: 0 0 6px;
  }

  #drawer-btn.open .drawer-line {
    background: #8a87ab;
  }

  #drawer-btn.open .drawer-line:nth-child(1) {
    transform: rotate(45deg) translate(5.5px, 5.5px);
  }

  #drawer-btn.open .drawer-line:nth-child(2) {
    opacity: 0;
  }

  #drawer-btn.open .drawer-line:nth-child(3) {
    transform: rotate(-45deg) translate(5.5px, -5.5px);
  }
  
  #header-inner {
    /*display: none;*/
    padding: 18% 0 0 0;
    top: 5%;
    position: relative;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: 100vh;
    opacity: 0;
  }
  
  #header.show #header-inner {
    transition: all .3s .2s ease-in-out;
    opacity: 1;
    top: 0;
  }
  
  #header-ttl {
    width: 52vw;
    height: 27.2vw;
    background: url("../img/common/logo_black_190820.png") no-repeat center center /cover;
    overflow: hidden;
    margin: 0 auto;
  }

  .header-ttl-link {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
  }

  #header-orna {
    width: 30px;
    margin: 5% auto;
    background: url("../img/common/ornament_yellow.png") no-repeat center center /cover;
  }
  
  #header-orna img {
    opacity: 0;
  }

  #header-onair {
    display: none;
  }

  #global-nav-container {
    margin: 40px 0 0;
    font-size: 17px;
  }
  
  #global-nav {
    display: flex;
    flex-wrap: wrap;
    width: 84%;
    margin: 0 auto;
  }

  .global-nav-box {
    margin: 0 0 10%;
    width: 50%;
  }

  .global-nav-box.small {
    font-size: 13px;
    width: 100%;
    margin: 0;
    display: flex;
    font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','游明朝体+36ポかな','YuMincho +36p Kana','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ＭＳ 明朝', 'MS Mincho','ＭＳ Ｐ明朝','MS PMincho',sans-serif;
  }
  
  .global-nav-box.small a {
    width: 48%;
    margin: 0;
    padding: 4% 0 5%;
    color: #727c7f;
    border: 1px dotted #727c7f;
    text-align: center;
  }
  
  .global-nav-box.small a:nth-child(1) {
    
    margin: 0 4% 0 0;
  }
  
  .global-nav-box.small a i {
    font-size: 150%;
    position: relative;
    top: 3px;
  }

  .global-nav-btn {
    color: #000;
    display: block;
    padding: 5px 0;
  }

  .global-nav-btn.coming {
    opacity: .5;
    cursor: default;
  }

  .global-nav-btn .share-icon {
    font-size: 100%;
    margin: 0 5px 0 0;
  }
  
  #header-share-container {
    background: #e9f1f3;
    width: 100%;
    margin: 8% 0 0;
    padding: 10% 0;
    align-items: center;
    display: flex;
  }
  
  .header-share-txt {
    font-size: 14px;
    margin: 0 10px 0 0;
  }
  
  .header-share-box {
    margin: 0 8px;
  }

  .header-share-link-btn {
    color: #000;
  }
  
  #lang-nav-container {
    padding: 0;
    color: #000;
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 20px;
    letter-spacing: 0;
  }

  #lang-icon {
    margin: 0 10px 0 0;
  }

  #lang-nav {
    font-size: 11px;
  }

}

/*-------------------------------

#footer

-------------------------------*/
#footer {
  background: #e9f1f3;
  padding: 50px 0;
}

.contents #footer {
  padding: 50px 0;
}

#page-top {
  width: 46px;
  margin: 0 auto 35px;
  cursor: pointer;
}

#footer-logo {
  width: 319px;
  margin: 0 auto 20px;
}

.footer-share-container {
  align-items: center;
  margin: 0 0 40px;
}

.footer-share-txt {
  width: 48px;
  margin: 0 20px 0 0;
}

.footer-share-box {
  margin: 0 10px;
}

.footer-share-box .share-link-btn {
  color: #000;
}

#cc {
  color: #666666;
  font-size: 11px;
  text-align: center;
}

@media all and (max-width:812px) {
  
  #footer {
    padding: 15% 0 10%;
  }
  
  .contents #footer {
    padding: 10% 0;
  }


  #page-top {
    width: 46px;
    margin: 0 auto 8%;
    cursor: pointer;
  }

  #footer-logo {
    width: 50vw;
    margin: 0 auto 6%;
  }

  .footer-share-container {
    align-items: center;
    margin: 0 0 40px;
  }

  .footer-share-txt {
    width: 48px;
    margin: 0 20px 0 0;
  }

  .footer-share-box {
    margin: 0 10px;
  }
  
  #cc {
    font-size: 10px;
    white-space: nowrap;
    transform: scale(.8);
    margin: 0 auto;
    letter-spacing: 0;
  }
  
}

/*-------------------------------

#main

-------------------------------*/
#contents {
  width: 880px;
  /*min-height: calc(100vh - 442px);*/
  min-height: 800px;
  margin: 0 auto;
}

#contents-header {
  height: 180px;
  padding: 60px 0;
  text-align: center;
}

#contets-ttl-orna {
  width: 38px;
  display: block;
  margin: 0 auto 5px;
}

#contents-ttl {
  font-size: 32px;
  color: #e3aa30;
  line-height: 1em;
}

#contents-main {
  padding: 0 0 100px;
}

#bg-container {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media all and (max-width:812px) {
  #contents {
    width: 100%;
    min-height: auto;
    margin: 0 auto;
  }

  #contents-header {
    height: 120px;
    padding: 60px 0 0;
    text-align: center;
  }

  #contets-ttl-orna {
    width: 38px;
    display: block;
    margin: 0 auto 5px;
  }

  #contents-ttl {
    font-size: 32px;
    color: #e3aa30;
    line-height: 1em;
  }

  #contents-main {
    padding: 0 0 100px;
  }

  #bg-container {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  .bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }


}

/*-------------------------------

#preloader

-------------------------------*/
#preloader {
  background: #ffffff;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
}

#preloader-inner {
  opacity: 0;
	width: 442px;
	height: 220px;
	position: absolute;
	z-index: 1;
	top: calc(50% - 110px);
	left: calc(50% - 221px);
  transform: scale(1.2);
}

#preloader.act #preloader-inner {
  transition: all .8s ease-out;
  transform: scale(1);
  opacity: 1;
}

.preloader-logo-box0 {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

.preloader-logo-box1 {
	height: 220px;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  transition: all .6s .2s linear;
}

#preloader.act .preloader-logo-box1 {
 width: 442px;
}

.preloader-logo-img {
	width: 442px;
	height: 220px;
}


@media all and (max-width:812px) {

  #preloader-inner {
    width: 300px;
    height: 149px;
    position: initial;
    z-index: 1;
    top: auto;
    left: auto;
  }

  .preloader-logo-box1 {
    height: 149px;
  }

  #preloader.act .preloader-logo-box1 {
    width: 300px;
    height: 149px;
  }

  .preloader-logo-img {
    width: 300px;
    height: 149px;
  }

}

/*--********************

@pager

*********************--*/
.pager {
  font-size: 20px;
	margin-top: 40px;
}

.pager li {
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  margin: 0 3px;
	list-style: none;
}

.pager li a {
  color: #e3aa30;
  display: block;
}

.pager li a.act, .pager li a:hover {
  color: #fff;
  background: #000;
}

.prev, .next {
  font-size: 10px;
}

@media all and (max-width:812px) {
  .pager {
    font-size: 15px;
    margin-top: 40px;
  }

  .pager li a:hover {
    color: #e3aa30;
    background: none;
  }

  
}


/*-------------------------------

@SNS

-------------------------------*/
#social-container {
  margin: 20px;
}

.share-link-btn {
  color: #fff;
}

.share-link-btn-icon {}

.share-icon {
  font-size: 18px;
  position: relative;
  display: inline-block;
  padding: 0;
}

/*--------------------------------------------------
リマケタグの隙間対策 
--------------------------------------------------*/
iframe[name='google_conversion_frame'] { height: 0 !important; width: 0 !important; line-height: 0 !important; font-size: 0 !important; margin-top: -13px;}

/*--------------------------------------------------------------

@modules

--------------------------------------------------------------*/
/*-------------------------------

@flex

-------------------------------*/
.flex {
	display: -webkit-flex;
	display: flex;
}

.flex-wrap {
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.flex-center {
  -webkit-justify-content: center;
  justify-content: center;
}

.flex-left {
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.flex-right {
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}


/*-------------------------------

font-weight

-------------------------------*/
.bold { font-weight: bold; }


/*-------------------------------

font-style

-------------------------------*/
.italic { font-style: italic; }


/*-------------------------------

display

-------------------------------*/
.none { display: none; }
.block { display: block; }


/*-------------------------------

position

-------------------------------*/
.relative { position: relative; }
.margin-auto { margin: 0 auto; }


/*-------------------------------

guard

-------------------------------*/
.guard{
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(../common/img/spacer.gif);
	background-repeat: repeat;
}

.protect{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -khtml-user-drag: none;
  -webkit-user-drag: none;
}