@charset "utf-8";

/*
 *
 * Usage: Base layout
 *
 * Name: style.css
 *
 */



/*---------------------------------------------------------------------
setting
---------------------------------------------------------------------*/
body {background-color:#f2f2f0; height:100%; width:100%;}
body a {color:#000; text-decoration:none;}

::-moz-selection {background:#b5b5b5; color:#333;}
::selection {background:#b5b5b5; color:#333;}

.yumin {font-family:"游明朝",YuMincho,"Yu Mincho","Hiragino Mincho ProN","ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif; letter-spacing:0;}
.roboto {font-family:'Roboto Condensed', sans-serif; letter-spacing:0.1em;}


/*---------------------------------------------------------------------
CSS3 animation & parts layout
---------------------------------------------------------------------*/
/* link */
a img       {opacity:1; filter:alpha(opacity=100); transition:all 0.2s ease-in;}
a:hover img {opacity:0.7; filter:alpha(opacity=70); transition:all 0.2s ease-in;}
a           {transition:all 0.2s ease-in;}
a:hover     {transition:all 0.2s ease-in;}
.opa_bg a,
.opa_bg input       {opacity:1; transition:all 0.2s ease-in;}
.opa_bg a:hover,
.opa_bg input:hover {opacity:0.7; transition:all 0.2s ease-in;}
.trans_bg a         {display:block; overflow:hidden; height:0; opacity:1; filter:alpha(opacity=100); transition: all 0.2s ease-in;}
.trans_bg a:hover   {opacity:0; filter:alpha(opacity=0); transition: all 0.2s ease-in;}

.a_bound {transition:all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}
.obj {position:absolute;}

.target {
  transition:all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform:translate(0,20px);
  opacity:0;
}
.target.action {
  transform:translate(0,0);
  opacity:1;
}

.is_pc {display: inline-block;}
.is_sp {display: none;}
.sp .is_pc {display: none;}
.sp .is_sp {display: inline-block;}




/*---------------------------------------------------------------------
Header layout
---------------------------------------------------------------------*/
#globalH {
  background-color:#f2f2f0;
  position:fixed; top:; left:0; z-index:99;
  width:100%; height:80px;
}
  #globalH nav {text-align:center;}
    #globalH nav h1 {
      -webkit-transform:translateX(-50%);
      transform        :translateX(-50%);
      position:absolute; top:32px; left:50%;
    }

    #globalH nav ul {
      letter-spacing:-.4em;
    }
    #globalH nav li {
      display:inline-block;
      letter-spacing:0.1em;
    }
    #globalH nav li a {
      display:block; position:relative;
    }
    #globalH nav li a:before {
      -webkit-transition:0.2s all ease-in-out;
      transition        :0.2s all ease-in-out;
      background-color:#000;
      content:''; display:block; width:0; height:1px;
      position:absolute; bottom:-9px; left:0; z-index:-1;
    }
    #globalH nav li a:hover:before,
    #globalH nav li a.active:before {width:100%;}


    #globalH nav .gnav {
      position:absolute; top:32px; left:20px;
      font-size:14px; font-weight:400; line-height:100%;
    }
      #globalH nav .gnav li {margin-right:20px;}
      #globalH nav .gnav a  {padding:0 10px;}

      @media screen and (min-width:941px) and ( max-width:1100px) {
        #globalH nav .gnav li {margin-right:10px;}
        #globalH nav .gnav a  {font-size:92.86%;}
      }
      @media screen and (min-width:768px) and ( max-width:940px) {
        #globalH nav .gnav li {margin-right:5px;}
        #globalH nav .gnav a  {font-size:85.72%;padding:0 5px;}
      }


    #globalH nav .lang {
      position:absolute; top:36px; right:80px;
      font-size:12px; font-weight:400; line-height:100%;
    }
      #globalH nav .lang li {
        border-right:2px solid #ccc;
        margin-right:10px; padding-right:10px;
      }
      #globalH nav .lang li:last-of-type {border:none; padding-right:0; margin-right:0;}
      #globalH nav .lang a  {padding:0 5px;}


    #globalH nav #sns {
      position:absolute; top:33px; right:25px;
      display: flex;
    }
    #globalH nav #sns a {
      display: block;
      margin-left: 10px;
    }



  #btnMenu {display:none;}


/*---------------------------------------------------------------------
Footer layout
---------------------------------------------------------------------*/
#btnPagetop {
  -webkit-transition:0.2s all ease-in-out;
  transition        :0.2s all ease-in-out;
  border-top:2px solid #000;
  position:fixed; bottom:35px; right:28px;
  opacity:0;
}
#btnPagetop.action {bottom:45px; opacity:1;}
#btnPagetop a {position:relative; display:block;}
#btnPagetop a img {
  -webkit-transition:0.2s all ease-in-out;
  transition        :0.2s all ease-in-out;
  top:6px; position:relative;
}
#btnPagetop a:hover img {top:0;}


#globalF {
  background-color:#fff;
  padding:45px 50px;
}
#globalF #footInner {
  border-bottom:2px solid #ccc;
  margin:0 auto 50px auto;
  padding-bottom:34px;
}

  #globalF #footInner ul li {margin-bottom:20px;}
  #globalF #footInner ul li a {display:inline-block; position:relative;}
  #globalF #footInner ul li a:before {
    -webkit-transition:0.2s all ease-in-out;
    transition        :0.2s all ease-in-out;
    background-color:#000;
    content:''; display:block; width:0; height:1px;
    position:absolute; bottom:-5px; left:0;
  }
  #globalF #footInner ul li a:hover:before,
  #globalF #footInner ul li a.active:before {width:100%;}

  #globalF #footInner .nav {
    padding:20px 0 0 50px;
    border-right:2px solid #ccc;
    float:left; width:50%;
    box-sizing:border-box;
  }
    #globalF #footInner .nav ul {
      margin-left:70px; float:left;
    }

  #globalF #footInner .lang {
    padding:20px 0 0 0;
    float:right; width:185px;
    box-sizing:border-box;
  }

  #globalF #footInner ul .sns {
    display: flex;
  }
  #globalF #footInner ul .sns a {
    display: block;
    margin-right: 10px;
  }



#globalF small {
  text-align:center; font-size:12px;
  display:block;
}




/*---------------------------------------------------------------------
Wrapper layout
---------------------------------------------------------------------*/
#wrapper {padding-top:80px;}
#container {padding:0 50px;}
#container.under {padding:130px 50px 100px 50px;}

.en,.ch {display:none;}

.en {font-family:'Roboto Condensed', sans-serif; letter-spacing:0.1em;}

.section_title {
  font-size:16px; line-height:16px;
  text-align:center;
  margin-bottom:40px;
  position:relative;
}
.section_title span {
  background-color:#f2f2f0;
  display:inline-block; padding:0 25px;
  position:relative; z-index:1;
}
.section_title:before {
  background-color:#ccc;
  content:''; display:block; width:100%; height:1px;
  position:absolute; top:50%; left:0; z-index:0;
}

#container section {margin-bottom:130px;}
#container section .inner {padding:0 115px;}



/*---------------------------------------------------------------------
Tablet layout
---------------------------------------------------------------------*/
.tb {min-width:100%;}


/*---------------------------------------------------------------------
SP layout
---------------------------------------------------------------------*/
.sp {font-size:1rem;}


/* sp menu button */
.sp #btnMenu {display:block; position:absolute; top:25px; right:25px; z-index:9999;}
.sp .menu-trigger,
.sp .menu-trigger span {
	transition: all .4s;
  display: inline-block; box-sizing: border-box;
}
.sp .menu-trigger {position: relative; width:30px; height:25px;}
.sp .menu-trigger span {
	position: absolute; left: 0; width: 100%; height:2px; background-color: #000;
}
.sp .menu-trigger span:nth-of-type(1) {top: 0;}
.sp .menu-trigger span:nth-of-type(2) {top:11px;}
.sp .menu-trigger span:nth-of-type(3) {bottom: 0;}

.sp .menu-trigger.active span {background-color:#000;}
.sp .menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(11px) rotate(-45deg);
	transform        : translateY(11px) rotate(-45deg);
}
.sp .menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.sp .menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-11px) rotate(45deg);
	transform        : translateY(-11px) rotate(45deg);
}



/* header */
.sp #globalH {
  background-color:transparent;
  position:absolute; width:100%; text-align:center;
}
.sp #globalH:after {
  -webkit-transition:all 0.2s ease-in-out;
  transition        :all 0.2s ease-in-out;
  background-color:#fff;
  content:''; display:block; width:100%; height:100%;
  position:fixed; top:0; left:0; z-index:99;
  opacity:0; visibility:hidden;
}

.sp #globalNav {
  -webkit-transition:all 0.2s ease-in-out;
  transition        :all 0.2s ease-in-out;
  position:absolute; top:0; left:0; z-index:100;
  width:100%; height:100%;
  opacity:0; visibility:hidden;
}

.sp #globalH nav h1 {
  -webkit-transform:translateX(-50%);
  transform        :translateX(-50%);
  position:absolute; top:32px; left:50%; z-index:9999;
}

.sp #globalH nav .gnav {
  position:relative; top:0; left:0;
  width:100%;
  box-sizing: border-box;
  padding:100px 50px 0 50px;
  font-size:1.6rem;
  margin-bottom:50px;
  font-weight:normal;
}
  .sp #globalH nav .gnav li {
    display:block;
    margin:0 0 30px 0;
  }
  .sp #globalH nav li a::before {
    display:none;
  }


.sp #globalH nav .lang {
  position:relative; top:0; left:0;
  font-size:1.4rem;
  margin-bottom:50px;
  font-weight:normal;
}

.sp #globalH nav #sns {
  position:relative; top:0; left:0;
  justify-content: center;
}


.sp #globalH.active:after,
.sp #globalH.active #globalNav {opacity:1; visibility:visible;}




/* footer */
.sp #globalF {
  padding:45px 25px;
  font-size:1.2rem;
}

  .sp #globalF #footInner .nav {
    padding:20px 50px 0 0;
  }
    .sp #globalF #footInner .nav ul {
      margin-left:0; float:none;
      text-align:right;
    }
    .sp #globalF #footInner ul li a:before        {display:none;}
    .sp #globalF #footInner ul li a.active:before {display:block;}

  .sp #globalF #footInner .lang {
    padding:20px 0 0 50px;
    width:50%;
  }

.sp #globalF small {
  text-align:center; font-size:1rem;
  display:block;
}

.sp #globalF #footInner ul .sns {
  justify-content: flex-end;
}
.sp #globalF #footInner ul .sns a {
  margin: 0 0 0 10px;
}





/* Wrapper layout */
.sp #wrapper {padding-top:80px;}
.sp #container {padding:0 25px;}
.sp #container.under {padding:65px 25px 50px 25px;}


.sp .section_title {font-size:16px; line-height:20px; margin-bottom: 20px;}

.sp #container section {margin-bottom:80px;}
.sp #container section .inner {padding:0;}