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



common.css
ヘッダ・フッタなどの共通スタイルや、
汎用的に使用するclassなどを記載



======================*/
/*========
基本設定
=============*/
html {
  overflow-x:hidden;
}
body {
  font-size:16px;
  color:#000000;
  line-height:1.8;
  margin:0;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/*a {
  text-decoration:none;
  color:#000;
}
a:hover {
  text-decoration:underline;
}*/
a img:hover {
  filter:alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
  text-decoration:none;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}


/*
===============*/
.dis_pc {display:inline-block !important;}
.dis_sp {display:none !important;}

/*------font-----*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

body * {
  /*font-family: 'Noto Sans Japanese';*/
  color:#ffffff;
}
@font-face {
  font-family: 'NSJP_Regular';
  src: url("../fonts/NotoSerifJP-Regular.otf");
}
@font-face {
  font-family: 'NSJP_Medium';
  src: url("../fonts/NotoSerifJP-Medium.otf");
}
@font-face {
  font-family: 'NSJP_Bold';
  src: url("../fonts/NotoSerifJP-Bold.otf");
}
.font_nsR {font-family:"NSJP_Regular";}
.font_nsM {font-family:"NSJP_Medium";}
.font_nsB {font-family:"NSJP_Bold";}

/*-----ページ・コンテンツ幅-----*/
.wid720 {
  width:720px;
  margin:0 auto;
}
.wid1000 {
  width:1000px;
  margin:0 auto;
}

/*-----余白系-----*/
.mt10 {margin-top:10px;}
.mt40 {margin-top:40px;}
.ml1em {margin-left:1em;}
.mr20 {margin-right:20px;}
.mb05 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb15 {margin-bottom:15px;}
.mb20 {margin-bottom:20px!important;}
.mb25 {margin-bottom:25px;}
.mb30 {margin-bottom:30px;}
.mb35 {margin-bottom:35px;}
.mb40 {margin-bottom:40px;}
.mb45 {margin-bottom:45px;}
.mb50 {margin-bottom:50px!important;}
.mb55 {margin-bottom:55px;}
.mb60 {margin-bottom:60px;}
.mb65 {margin-bottom:65px;}
.mb70 {margin-bottom:70px;}
.mb80 {margin-bottom:80px;}
.mb95 {margin-bottom:95px;}
.mb190 {margin-bottom:190px;}
.mb1em {margin-bottom:1em;}
.pl1em {padding-left:1em;}
.pr2em {padding-right:2em;}
.pl30 {padding-left:30px;}
.pt05 {padding-top:5px;}
.pt13 {padding-top:13px;}
.pt20 {padding-top:20px;}
.pt30 {padding-top:30px;}
.pt35 {padding-top:35px;}
.pt45 {padding-top:45px;}
.pt60 {padding-top:60px;}
.pb35 {padding-bottom:35px;}
.pb40 {padding-bottom:40px;}
.pb60 {padding-bottom:60px;}
/*-----float-----*/
.fl {float:left;}
.fr {float:right;}
.clear {clear:both;}
/*------フォント系------*/
.fwb {font-weight:bold;}
.tac {text-align:center!important;}
.tal {text-align:left;}
.tac {text-align:center;}
.tar {text-align:right;}
.fc_red {color:#ff0000;}
.fc_blue {color:#3e83ff;}
.fc_white {color:#ffffff;}
.fs80 {font-size:80%;}

/*========
common
=============*/

#pagewrap >*{
 box-sizing: border-box;
 /*overflow: hidden;*/
}

#pagewrap main{
  overflow: hidden;
}



@supports (-webkit-touch-callout: none) {
  body {
    /* Safari用のハック */
    height: -webkit-fill-available;
  }
}

header{
    position: fixed;
    height: 85px;
    background: #000;
    border-bottom: 1px solid #777;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

header .logo{
    position: absolute;
    left: 20px;
    top: 15px;
}

header .pgttl{
  color: #c0c0c0;
  text-align: center;
}

.menu{
    /*position: fixed;*/
    position: absolute;
    top: 0;
    right: 0;
    width: 65px;
}

/*.navi{
    z-index: 1;
    background-color: transparent;
    transition: background-color .64s ease-out;
}*/

.navi {
    z-index: -1;
    overflow: hidden;
}

.navi-bg {
    z-index: 1;
    background-color: transparent;
    transition: background-color .64s ease-out;
}

.navi, .navi-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
}

.menu.open .navi-bg{
    z-index: 900;
    width: 100%;
    height: 200%;
    background-color: rgba(0,0,0,.9);
}

.menu.open .navi{
/*    background-color: rgba(0,0,0,.9);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: 100%;
    height: 100vh;*/
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
}

.menu.open .navi::-webkit-scrollbar{
  display:none
}

.navi-btn{
position: absolute;
top: 10px;
left: 9px;
width: 25px;
height: 19px;
z-index: 1200;
cursor: pointer;
}

.navi_wrap{
	border: 1px solid #FFF;
	position: absolute;
	width: 45px;
	height: 43px;
	left: -10px;
	top: 20px;
	z-index: 1200;
}

.navi-btn span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
}

.navi-btn, .navi-btn span{
    display: inline-block;
    transition: all .5s;
    box-sizing: border-box;
}

.navi-btn span:nth-of-type(1) {
  top: 0;
}
.navi-btn span:nth-of-type(2) {
  top: 9px;
}
.navi-btn span:nth-of-type(3) {
  bottom: 0;
}

.navi-btn.active span:nth-of-type(1) {
  -webkit-transform: translateY(15px) rotate(45deg);
  transform: translateY(7px) rotate(45deg);
}
.navi-btn.active span:nth-of-type(2) {
  opacity: 0;
}
.navi-btn.active span:nth-of-type(3) {
  -webkit-transform: translateY(-12px) rotate(-45deg);
  transform: translateY(-12px) rotate(-45deg);
}

.navi-inner{
    position: absolute;
    right: -100%;
    width: 0;
    height: 100vh;
    background-color: #333;
    transition: right .64s ease-out .48s;
    /*overflow-y: scroll;*/
}

.menu.open .navi-inner{
    right: 0;
    z-index: 1100;
    width: 400px;
    min-height: 672px;
    padding: 30px 25px 0 30px;
}

.navi-link li{
  padding-bottom: 5px;
}

.navi-link a{
  color: #999;
}

.navi-link a.current,.navi-link a.current+.sub-navi a {
  color: #f5f5f5;
}

.sub-navi{
  padding-left: 1em;
}

.sub-navi li{
  padding-bottom: 0;
}

/*block-footer*/
.cr{
  text-align: center;
}

/*#pagetop {
    position: fixed;
    bottom: 30px;
    right: 20px;
}
#pagetop a {
  display: block;
}*/

/*
スマホ
======================*/
@media screen and (max-width: 768px) {

  /*
  基本設定
  =============*/
  img {
    max-width: 100%;
  }
  .dis_pc {display:none !important;}
  .dis_sp {display:inline-block !important;}

  /*コンテンツ
  ============================*/
  #pagewrap header .logo{
		width: 60%;
		top: 12px;
	  left: 10px;
  }
  #pagewrap header .pgttl{
      font-size: 12px;
      padding-left: 12%;
  }
  .menu{
    width: 10vw;
    height: 0;
    padding-top: 10vw;
  }
	
.navi_wrap {
    left: -20px;
}
	
  .navi-btn{
    width: 30px;
    height: 21px;
    top: 10px;
	left: 7px;
  }

  .navi-btn span:nth-of-type(2) {
    top: 10px;
  }

  .menu.open .navi{
    height: 100%;
}
  .menu.open .navi-inner{
    width: 100%;
    /*height: auto;*/
    height: 100vh;
    padding: 13.33333vw 6.66667vw 6.66667vw;
  }

  .navi-link li {
      /*text-align: center;*/
      padding-bottom: 10px;
      font-size: 23px;
  }

  .sub-navi{
    padding-top: 5px;
  }

  .navi-link .sub-navi li {
    font-size: 20px;
    line-height: 1.3em;
  }

  .navi-btn.active span:nth-of-type(1) {
    -webkit-transform: translateY(10px) rotate(45deg);
    transform: translateY(10px) rotate(45deg);
  }

  .navi-btn.active span:nth-of-type(3) {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
  }

  #pagetop{
    width: 30px;
  }

  .cr{
    font-size: 13px;
  }
}

/*------------------------------------------
【フッター】※基本的に改変しない※
--------------------------------------------*/

#footer_wrap{ font-size:12px; padding:30px 0; background:#000; color:#FFFFFF; letter-spacing:0em; border-top:1px solid #666; margin-bottom:-25px;}
#footer_Box{ width:1000px; margin:0 auto; line-height:1.8em;}
#footer_Box ul{ list-style:none; margin:0; padding:0; display:table; width:100%;}
#footer_Box ul li { padding:0; margin:0; display:table-cell; vertical-align:top;}
#footer_Box ul li a{ color:#FFFFFF; text-decoration:none;}
#footer_Box ul li a:hover{ color:#FFFFFF; text-decoration:underline;}
#footer_Box ul .top_box{padding:0 2%; width:31%; position:relative;text-align:left;}
#footer_Box ul .top_box .title{ background:#333333; border-radius:3px; padding:5px 10px 3px;}
#footer_Box ul .top_box2{padding:0 2%; width:31%; position:relative;}
#footer_Box ul .top_box2 ul{ padding:0; margin:0 0 20px; width: 100%; display:table;}
#footer_Box ul .top_box2 ul li{
  float: left;
  list-style: none;
  padding: 0 15px;
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  width: 224px;
}
#footer_Box ul .top_box2 ul li .note{ position:absolute; top:0; display:block; right:0; font-size:10px;}

#footer_Box ul .top_box2 ul li .link01{ background: url(../img/common/linkicon.png) no-repeat center left; position: absolute; display: block; bottom:25px; right:0; padding-left:20px; }

#footer_Box ul .top_box2 ul li .link02{ background: url(../img/common/linkicon.png) no-repeat center left; position: absolute; display: block; bottom:0; right:0; padding-left:20px; }
#footer_Box ul .top_box ul{ margin:10px 0 10px; padding:0; display:table;}
#footer_Box ul .top_box ul li{
  background: url(../img/common/listicon.png) left 4px no-repeat;
  float: left;
  list-style: none;
  padding: 0 15px;
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  width: 224px;
  line-height:1.5em;
}
#footer_bottom{ margin:20px auto 0;}
#footer_bottom ul{ list-style:none; margin:0; padding:0; display:table; width:100%;}
#footer_bottom ul li { padding:0; margin:0; display:table-cell; vertical-align:bottom;}
#footer_bottom ul .left_Tbnr{ width:10%; text-align:left;}
#footer_bottom ul .center_Tnation{ width:80%; color:#CCC; font-size:10px; line-height:14px; text-align:center; padding:10px 0; margin:10px auto 0; word-break: keep-all;}
#footer_bottom ul .right_Bicon{ width:10%;  text-align:right;}


@media screen and (max-width: 768px) {

  /*------------------------------------------
  フッター【スマホ用】※基本的に改変しない※
  --------------------------------------------*/
  #footer_wrap {
    padding-bottom:0;
  }
  #footer_Box {
    width:96%;
    padding:2%;
    text-align:left;
  }
  #footer_Box > ul {
    width:100%!important;
  }
  #footer_Box ul,
  #footer_Box ul .top_box,
  #footer_Box ul .top_box2 {
    display:block;
    width:100%;
    padding:0;
    margin-bottom:20px;
  }
  #footer_Box ul .top_box ul li {
    float:none;
    display:block;
    width:100%;
  }
  #footer_Box ul .top_box2 ul {
    width:100%;
  }
  #footer_Box ul .top_box2 ul li {
    float:none;
    width:100%;
    padding:0;
  }
  #footer_Box ul .top_box2 ul li p.note,
  #footer_Box ul .top_box2 ul li p.link01,
  #footer_Box ul .top_box2 ul li p.link02 {
    position:static;
  }
  #footer_bottom ul {
    width:100%;
  }
  #footer_bottom ul li {
    display:block;
  }
  #footer_bottom ul li:first-child {
    width:20%;
    float:left;
  }
  #footer_bottom ul li:nth-child(2) {
    display:none;
  }
  #footer_bottom ul li:nth-child(3) {
    width:16%;
    float:right;
  }
}