@charset "utf-8";
/*========= 共通ヘッダー設定 ===============*/
/*header設定*/
#header{
  position: relative;
  max-width: 1240px;
  margin: auto;
  width: 95%;
}
#head_logo {
  margin: 1.0% 0 1.0% 0%;
  width: 120px;
}
/* ###g-navのためのCSS ### */
#g-nav {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;
  z-index: 10;
  /*ナビのスタート位置と形状*/
  top:0px;
  right: -120%;
  width: 100%;
  height: 100vh;
  /* background-color: #f29fac; */
  background-color: #fff;
  opacity: 1.0;
  transition: all 0.6s;
  /* font-family: 'こぶりなゴシック W3 JIS2004'; */
  border-left: #a9c8e8 solid 2px;
}
#g-nav.change-color {
  top:0px;
}
/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
  right: 0;
}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  width: 100%;
  height: 100vh;/*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* padding-bottom: 5%; */
}
/*ナビゲーション*/
#g-nav ul {
  /*ナビゲーション天地中央揃え*/
  /* position: absolute; */
  /* z-index: 2;
  top:10%;
  left:10%; */
  /* transform: translate(-40%,-50%); */
}
/*リストのレイアウト設定*/
#g-nav li{
  /* list-style: none; */
  /* text-align: center; */
  /* font-size: 140%; */
}
#g-nav li a{
  /* color: #fff; */
  text-decoration: none;
  padding:3% 0;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: bold;
}
#menu_cont {
  padding: 13% 5% 0;
/* font-family: 'こぶりなゴシック W6 JIS2004' !important; */
overflow: hidden;
}
.menu_logo {
  width: 60%;
  margin: 0 auto 5%;
  text-align: center;
}
#menu_cont ul.contents {
  width: 100%;
  clear: left;
}
#menu_cont ul.contents li a {
  position: relative;
  width: 100%;
  /* padding: 3% 2% 2%;
  margin: 0 2%; */
  border-bottom: 1px solid #ccc;
  float: left;
}
#menu_cont ul.contents li a::after {
  position: absolute;
  font-family: 'Material Icons';
  content: '\e941';
  color: #D01163;
  font-size: 1.2em;
  top: 35%;
  right: 10%;
}
#menu_cont ul.contents.menu_right li a {
  float: right;
  padding: 1% 5% 1%;
}
#menu_cont ul.conversion {
  width: 100%;
}
#menu_cont ul.conversion li {
  background-color: #C91E1D;
  color: #fff !important;
  padding: 3% 5%;
  margin: 1% 2% 1% 0;
  width: 49%;
  float: left;
  text-align: center;
  border-radius: 3px;
  box-sizing: border-box;
}
#menu_cont ul.conversion li:nth-child(2) {
  background-color: #1c305c;
  margin: 1% 0% 1% 0;
}

#menu_cont #pickup_menu {
  width: 100%;
  margin: 2em auto;
  float: left;
  /* padding: 3% 2%; */
}
#menu_cont #pickup_menu li {
  /* width: 33.333%; */
  float: left;
  text-align: center;
  /* padding: 0.5%; */
  /* box-sizing: border-box; */
  /* border-right: 3px solid #F5CBD6; */
  /* border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  content: ''; */
  /* height: 100px; */
  /* background-color: #F5CBD6;
  font-size: 0.9em;
  color: #666; */
}

.other_contents {
  margin: 1% auto;
  text-align: center;
}
.other_contents ul li {
  display: inline-block;
  padding: 0 2%;
  border-right: 1px solid #ccc;
}
.other_contents ul li:nth-last-child(1) {
  border-right: 0px solid #ccc;
}
#menu_sns {
  clear: left;
  text-align: center;
  margin: 5% auto 3%;
}
#menu_sns ul.sns_list li {
width: 25px;
margin: 0 15px 0;
display: inline-block;
}
#g-nav-list .copyright {
    padding-bottom: 5%;
  }
@media screen and (min-width:987px){
  #g-nav {
    right: -120%;
    width: 40%;
    height: 100vh;
  }
  #menu_cont {
    padding: 4% 62% 0 3%;
  }
  #menu_sns {
    padding: 0% 62% 0 3%;
  }
#g-nav-list .copyright {
    padding: 0% 59% 3% 0%;
  }
  .menu_logo {
    width: 50%;
  }
  #menu_cont ul.contents li a {
    padding: 3% 0%;
  }
  #menu_cont ul.conversion li {
    padding: 2% 3%;
  }
  .other_contents {
    padding: 0 62% 0 3%;
  }
  #menu_cont #pickup_menu li {
    /* height: 140px; */
    color: #666;
  }
  #menu_cont #pickup_menu li img {
    /* height: 70px;
    margin: 3% auto 0.5em; */
  }
}
/*==================================================
　5-2-1 3本線が×に
===================================*/
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
	/*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
  top: -2px;
  right: 0px;
  position: fixed;
  z-index: 11;
	/* background:#57a2c7; */
	cursor: pointer;
    width: 60px;
    height:60px;
	/* border-radius: 5px; */
}

/*ボタン内側*/
.openbtn span {
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 2px;
	  background: #fff;
  	width: 50%;
  }
#second .openbtn span {
    background: #54BBEF ;
  }
.openbtn span:nth-of-type(1) {
	top:11px;
}

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

.openbtn span:nth-of-type(3) {
	top:27px;
  width: 37%;
}
.menu_text {
  text-align: center;
  /* font-family: 'こぶりなゴシック W3 JIS2004' !important; */
  font-size: 70%;
  margin-top: 49%;
  margin-left: -5px;
  color: #fff;
}
#second .menu_text {
    color: #54BBEF ;
  }
/*activeクラスが付与されると線が回転して×に*/
.openbtn.active span {
    background: #000;
}
.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 40%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;/*真ん中の線は透過*/
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 40%;
}

@media screen and (max-width:987px){
  #yoyaku_btn {
    padding: 2.0% 1% 2.0% 1%;
  }
  /* ###g-navのためのCSS ### */
  #g-nav {
    top:-2px;
  }
}

/* パンくず */
#pankuzu {
  overflow: hidden;
  margin: 0 auto 20px;
}
.breadcrumb {
  margin: 10px 0 5px;
  padding: 0;
  list-style: none;
  float: left;
  width: 100%;
  font-family: 'こぶりなゴシック W3 JIS2004', 'こぶりなゴシック W6 JIS2004';
  font-weight: lighter;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  /* font-weight: bold;/*太字*/
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #555;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li:nth-last-child(1) a {
  text-decoration: none;
  color: #f29fac;/*色*/
}

.breadcrumb li a:hover {
  text-decoration: underline;
}