@charset "UTF-8";

/*
Theme Name: hoc-template01
Theme URI: http://hoc-template01.com/
Description: テンプレートサイト１の新着情報です。
Version: 1.1
Author: owndmedia-lab
*/

/* ************************************************************************************************
   共通
   ************************************************************************************************ */

html,body {
  width: 100%;
  height: 100%;
  font-size: 62.5%; /*ベースを10pxに設定*/
  letter-spacing: .2em;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  color: #333;
  background: #fff;
}

@font-face {
  font-family: 'lbrite';
  src: url('font/lbrite.eot'); /* IE9以上用 */
  src: url('font/lbrite.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
  url('font/lbrite.woff') format('woff'), /* モダンブラウザ用 */
  url('font/lbrite.ttf') format('truetype'); /* iOS, Android用 */
  font-weight: normal;
}

@font-face {
  font-family: 'Franklin';
  src: url('font/Franklin Gothic Book Regular.eot'); /* IE9以上用 */
  src: url('font/Franklin Gothic Book Regular.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
  url('font/Franklin Gothic Book Regular.woff') format('woff'), /* モダンブラウザ用 */
  url('font/Franklin Gothic Book Regular.ttf') format('truetype'); /* iOS, Android用 */
  font-weight: normal;
}

h2 {font-size: 3.2rem;}
h3 {font-size: 2.8rem; line-height: 1.8;}
h4 {font-size: 2.5rem; line-height: 1.8;}
h5 {font-size: 2rem; line-height: 1.8;}

p {
  font-size: 1.4rem;
  line-height: 2;
  font-weight: 400;
}

a{
  font-size: 1.4rem;
  text-decoration: none;
}


/* 改行 */
.br_sp{display: none;} /*スマホだけ改行 */
.br_pc{display: block;} /*PCだけ改行 */

/* マウスドラッグした時の文字色 */
::selection{
  background: #bc8da0;
  color: #fff;
}

/* ページ全体の余白など */
#page {
  overflow: hidden;
  width: 100%;
}

.container{
  width: 960px;
  margin: 0 auto;
}

/* 装飾線 */
.main__line {
  display: block;
  margin: 1rem auto 2rem;
}

.sub__line {
  display: block;
  margin: 1.5rem auto 3rem;
}

/***** 見出し *****/
.index__ttl{
  text-align: center;
  margin-bottom: 6rem;
  font-family: 'lbrite';
  font-weight: bold;
  letter-spacing: .1em;
}

/***** ヘッダー *****/
header{
  height: 66px;
  background-color: rgba(255,255,255,0.4);
  position: fixed;
  top: 0;
  transition: .5s;
  width: 100%;
  z-index: 10;
}

.header-nav__list,
.header-nav__list--single {
  display: inline-block;
  text-align: center;
  margin-left: 20px;
  transition: .5s;
}

header .container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 66px;
}

.header-nav__item,
.header-nav__item--single{
  display: block;
  margin: .5rem 0;
}

.header-nav__item:first-child,
.header-nav__item--single:first-child {
  font-family: 'Franklin';
  font-size: 1.5rem;
}

.header-nav__item:last-child,
.header-nav__item--single:nth-child(2) {
  font-size: 1.1rem;
}

#nav-drawer{
  display: none;
}

/***** 下層ページヘッダー部分 *****/
.header-sub{
  background-image: url(images/common/header_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100vw;
  height: 68vh;
  position: relative;
}

.header-sub__item {
  text-align: center;
  position: absolute;
  width: 70%;
  height: 100px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.header-sub__ttl{
  margin-bottom: 1.5rem;
  font-family: 'lbrite';
  font-weight: bold;
  letter-spacing: .1em;
}

.header-sub__txt{
  font-family: 'lbrite';
  letter-spacing: .1em;
}

/***** フッター *****/
footer{
  text-align: center;
  margin-top: 8rem;
}

.footer__sns{
  margin-bottom: 4rem;
}

.footer__icon{
  margin: 0 .7rem;
}

small{
  font-size: 1.2rem;
}

/***** アクセス *****/
.index__ttl{
  text-align: center;
  margin-bottom: 6rem;
  font-family: 'lbrite';
  font-weight: bold;
  letter-spacing: .1em;
}

.access{
  background-image: url(images/common/footer_bg.png);
  background-size: cover;
  padding: 8rem 0 3rem;
}

.access__container{
  width: 800px;
  background: #fff;
  margin: 0 auto;
  padding: 4rem 3rem;
}

.access__contents{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.access__ttl{
  margin-bottom: 2rem;
}

.access__txt{
  margin-bottom: 1rem;
}

.access__tel{
  font-family: 'lbrite';
  font-size: 2.5rem;
  color: #5d576b;
  font-weight: bold;
  margin-top: 2rem;
  text-align: center;
  display: block;
  transition: .3s;
}

/* ************************************************************************************************
   index.php
   ************************************************************************************************ */

/***** 余白 *****/
.header-main, .main, .menu, .news, .access{
  padding: 8rem 0;
}


/***** メインイメージ *****/
.header-main{
  background-image: url(images/index/index_header_bg01.jpg);
  background-size: cover;
  width: 100%;
  height: 100vh;
  position: relative;
}

.header-main__img {
  position: absolute;
  width: 30%;
  top: 18%;
  right: 12%;
}


/***** メインコンテンツ *****/
.main {
    padding: 8rem 0 2rem;
}

.main__contents1, .main__contents2{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6rem;
}

.main__item{
  width: 46%;
}

.main__ttl {
  text-align: center;
}

/***** メニュー *****/
.menu{
  background-image: url(images/index/index_menu_bg.jpg);
  background-size: cover;
}

.menu__contents{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 840px;
  margin: 0 auto 3rem;
}

.menu__ttl{
  color: #5d576b;
  text-align: center;
  font-weight: bolder;
}

.menu__txt--state_current{
  text-align: center;
  color: #333;
}

.menu_readmore{
  text-align: right;
  font-family: 'Franklin';
  transition: .3s;
}


/***** ニュース *****/
.news__line{
  display: block;
  margin: 0 auto;
}

.news__contents{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  margin-bottom: 6rem;
}

.news__item {
  text-align: center;
}

.news__thumbnail {
  margin-bottom: 2rem;
}

.news__thumbnail img {
  width: 220px;
  height: auto;
  max-width: 100%;
}

.news__date {
  font-size: 1.2rem;
  color: #5D576B;
}

.news__ttl {
  margin-top: .5rem;
}

/* ************************************************************************************************
   concept.php
   ************************************************************************************************ */

/***** 余白 *****/
.concept01{
  padding: 5rem 0 8rem;
}

.concept02{
  padding: 8rem 0;
}

/***** コンセプトその１ *****/
.concept01__item{
  text-align: center;
}

.concept01__txt{
  margin-top: 3rem;
}


/***** パララックス画像 *****/
.concept__bg{
  background-image: url(images/subpage/concept_main_bg01.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 50vh;
}


/***** コンセプトその２ *****/
.concept02__container{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 900px;
  margin: 0 auto;
}

.concept02__item{
  width: 350px;
  height: 350px;
  border: 5px solid #F7EBEC;
  box-sizing: border-box;
  padding: 5% 3%;
  text-align: center;
  margin: 0 5rem 6rem;
}

.concept02__line {
    border-bottom: 5px solid #F7EBEC;
    width: 50%;
    margin: 1rem auto 0;
}

.concept02__txt{
  margin-top: 3rem;
}

/* ************************************************************************************************
   menu.php
   ************************************************************************************************ */

/***** 余白 *****/
.menu02{
  margin: 0 0 10rem;
}

.menu03{
  margin: 0 0 8rem;
}

/***** メニュー *****/
.menu02__img{
  display: block;
  margin: 0 auto;
}

.menu02__ttl{
  margin: 5rem 0;
  text-align: center;
}

.menu02__ttl-en{
  font-family: 'lbrite';
  font-weight: bold;
}

.menu02__txt{
  text-align: center;
}

.menu02__table {
  margin: 5rem auto 0;
  font-size: 1.6rem;
  line-height: 1.5;
}

.menu02__table tr{
  border-bottom: 1px dashed #BC8D9F;
}

.menu02__table th{
  text-align: left;
  width: 50%;
  padding: 2rem 1rem 1rem;
  font-weight: 500;
  vertical-align: middle;
}

.menu02__table td{
  text-align: right;
  width: 50%;
  padding: 2rem 1rem 1rem;
  vertical-align: middle;
}

/***** その他メニュー *****/
.menu03__item{
  width: 350px;
  height: 350px;
  margin: 0 auto 3rem;
  border: 5px solid #F7EBEC;
  padding: 4rem;
}

.menu03__ttl-en{
  font-family: 'lbrite';
  text-align: center;
}

.menu03__ttl-ja{
  margin-bottom: 3rem;
  text-align: center;
}

.menu03__table {
  margin: 0 auto;
  font-size: 1.4rem;
  width: 200px;
}

.menu03__table th{
  text-align: left;
  width: 50%;
  padding: 1rem;
  font-weight: 500;
}

.menu03__table td{
  text-align: right;
  width: 50%;
  padding: 1rem;
}

.menu03__txt{
  text-align: center;
}

/* ************************************************************************************************
   staff.php
   ************************************************************************************************ */

/***** 余白 *****/
.staff{
  padding: 0 0 8rem;
}

/***** スタッフ *****/
.staff .container{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.staff__item{
  width: 250px;
  text-align: center;
  margin-bottom: 6rem;
}

.staff__img{
  margin-bottom: 2rem;
}

.staff__ttl{
  margin-bottom: .5rem;
  font-family: 'lbrite';
  font-size: 1.6rem;
  color: #5D576B;
}

.staff__name{
  margin-bottom: 2rem;
}

.staff__txt{
  text-align: left;
}

/* ************************************************************************************************
   recruit.php
   ************************************************************************************************ */

/***** 余白 *****/
.recruit01, .recruit02{
  padding: 0 0 8rem;
}

.recruit03{
  padding: 8rem 0;
}

/***** メッセージ *****/
.recruit01__movie{
  width: 900px;
  margin: 0 auto;
}

.recruit01__movie video {
    width: 100%;
    height: 100%;
}

.recruit01__item{
  margin-top: 5rem;
  text-align: center;
}

/***** コンテンツ *****/
.recruit02__box{
  width: 800px;
  margin: 0 auto 5rem;
  border: 10px double #F7EBEC;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 4rem;
}

.recruit02__box:last-child{
  margin-bottom: 0;
}

.recruit02__item{
  width: 300px;
  text-align: center;
}

.recruit02__line {
    border-bottom: 5px solid #F7EBEC;
    width: 80%;
    margin: .5rem auto 0;
}

.recruit02__txt{
  text-align: left;
  margin-top: 3rem;
}

/***** 背景画像 *****/
.recruit__bg{
  background-image: url(images/subpage/recruit_main_bg01.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 50vh;
}

/***** 募集要項 *****/
.recruit03__ttl {
  margin: 0 0 5rem;
  text-align: center;
}

.recruit03__ttl-en{
  font-family: 'lbrite';
  font-weight: bold;
}

.recruit03__table{
  width: 650px;
  margin: 0 auto 8rem;
  font-size: 1.4rem;
  line-height: 1.8;
  text-align: left;
}

.recruit03__table tr{
  border-bottom: 1px dashed #BC8D9F;
}

.recruit03__table th{
  width: 25%;
  padding: 2rem;
  vertical-align: middle;
}

.recruit03__table td{
  width: 75%;
  padding: 2rem;
  vertical-align: middle;
}

.recruit03__contact{
  width: 700px;
  margin: 0 auto;
  background: #F7EBEC;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-around;
  padding: 4rem 0;
}

.recruit03__contact--mail a {
  font-size: 1.2rem;
}

.recruit03__txt{
  margin-bottom: 1.5rem;
  text-align: center;
  font-weight: bold;
}

.recruit__tel{
  font-family: 'lbrite';
  font-size: 2rem;
  line-height: 50px;
  color: #5d576b;
  font-weight: bold;
  display: block;
  transition: .3s;
}

/* ************************************************************************************************
   access.php
   ************************************************************************************************ */
.access02__img{
  width: 100%;
  display: block;
  margin: 0 auto 5rem;
}

.access02__table{
  width: 650px;
  margin: 0 auto 8rem;
  font-size: 1.4rem;
  line-height: 1.8;
  text-align: left;
}

.access02__table tr{
  border-bottom: 1px dashed #BC8D9F;
}

.access02__table th{
  width: 26%;
  padding: 2rem;
  vertical-align: middle;
}

.access02__table td{
  width: 74%;
  padding: 2rem;
  vertical-align: middle;
}

.access02__footer {
  background-position: center;
  padding: 1rem 0 8rem;
  margin-top: -4rem;
}

/* ************************************************************************************************
   news
   ************************************************************************************************ */
/***** 共通 *****/
.footer__widget{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.footer__widget h5{
  margin-bottom: 1rem;
}

.footer__widget li {
  line-height: 1.8;
  font-size: 1.4rem;
}

.widget-area {
  text-align: center;
  margin-bottom: 3rem;
  width: 30%;
}

.nocomments{
  display: none;
}


/***** 新着情報一覧ページ（index.php） *****/
.news02 {
  margin: 0 0 8rem;
}

/* サムネイルサイズ */
.news02__thumbnail img {
  width: 100%;
  height: auto;
}

/* 記事一覧 */
.news02 .container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.news02__post {
  width: 45%;
  text-align: center;
  margin: 0 2rem 5rem;
  border: 7px double #F7EBEC;
}

.news02__contents {
  padding: 1rem 2rem 2rem;
}

.news02__blog_info{
  text-align: right;
  font-size: 1.2rem;
}

.news02__ttl {
  margin-bottom: 1rem;
}

.news02__cal {
  margin-bottom: .5rem;
}

.news02__txt {
  text-align: left;
}

.nav-below {
  margin-top: 3rem;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
}


/***** 個別投稿ページ（single.php） *****/
.single02 {
  margin: 0 0 8rem;
}

.single__ttl{
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: normal;
}

.single .header-sub__item{
  padding-top: 6rem;
}

.single02__thumbnail img {
  width: 100%;
  height: auto;
}

.single02__contents{
  width: 90%;
  margin: 3rem auto 6rem;
}

.single02__blog_info {
  text-align: right;
  margin-bottom: 2rem;
  font-size: 1.2rem;
}

.single02__cal {
  margin-bottom: 1rem;
}

.single02__cat{
  margin-bottom: 2rem;
}

.single__line {
  display: block;
  margin: 6rem auto 3rem;
}


/***** カテゴリーページ（category.php） *****/
.category__ttl a{
  font-size: 3.2rem;
  font-weight: normal;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}


/***** お問い合わせフォーム *****/
.entry {
  margin: 0 0 8rem;
}

/* Contactform - お問い合わせフォーム */
.entry__box{
  text-align:center;
  margin-bottom: 6rem;
}

.required {
  font-size: smaller;
  color: #BC8DA0;
}

.hyphen {
  margin: 0 .5rem;
  vertical-align: text-bottom;
}

.wpcf7 { width: 100%; margin: 0 0 2.5em !important; padding: 0; font-size: 1.4rem; }

.wpcf7 form { margin: 1.5em auto 0; width: 70%; }

.wpcf7 p { margin-bottom: 1em;}

.wpcf7 input, .wpcf7 textarea { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 1rem; border: 1px solid #F7EBEC; background: #F7EBEC; line-height: 1.5; margin: .5rem auto 2rem;}

.wpcf7 select, .wpcf7 input[type=checkbox], .wpcf7 input[type=radio] { width: auto; max-width: 97%; padding: 1rem; border: 1px solid #F7EBEC; background: #F7EBEC; margin: .5rem auto 2rem;}

.wpcf7 select, .wpcf7 .wpcf7-list-item-label { line-height: 1.5; }

.wpcf7 .wpcf7-list-item { display: block; text-align: center;}

.wpcf7 textarea { height: 300px; }

.wpcf7 input:focus, .wpcf7 textarea:focus { border: 1px solid #BC8DA0; outline: none; }

.wpcf7 .wpcf7-submit { -webkit-transition: all .3s; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; position: relative; width: 200px; height: 48px; margin: 5rem auto 0; border: none !important; outline: none; background-color: #BC8DA0; color: #fff; font-size: 1.4rem; line-height: 1.5; text-align: center; text-decoration: none; cursor: pointer; transition: all .3s; }

.wpcf7 .wpcf7-submit:before, .wpcf7 .wpcf7-submit:after { -webkit-box-sizing: border-box; box-sizing: border-box; }

.wpcf7 .wpcf7-submit:hover { opacity:0.6; }

.wpcf7 .wpcf7-submit .wpcf7-not-valid { background: pink; }

.wpcf7 .wpcf7-submit .wpcf7-response-output { -webkit-border-radius: 4px; -moz-border-radius: 4px; margin: 1rem 0 0; padding: .8rem 3.5rem .8rem 1.4rem; border-radius: 4px; }

.wpcf7 .wpcf7-submit .wpcf7-validation-errors { border: 1px solid #EED3D7; background-color: #F2DEDE; color: #B94A48; }

.wpcf7 .wpcf7-submit .wpcf7-mail-sent-ok { border: 1px solid #BCE8F1; background-color: #D9EDF7; color: #3A87AD; }

input.wpcf7-form-control.wpcf7-number.wpcf7-validates-as-required.wpcf7-validates-as-number.smallform {
  width: 11%;
}

.wpcf7 input[type=checkbox]{
  margin: .5rem auto 1rem;
}


/* プライバシーポリシーの埋め込み */
@media only screen and (max-width: 550px) {
	[class*="grid-"].noGutter > .col {
		padding: 0%;
	}
}

.blk-iframe {
	border: 1px solid #e4e4e4;
	background-color: #fff;
	width: 700px;
	max-width: 100%;
	height: 20em;
	margin: 3em auto;
	overflow: auto;
	/*  -webkit-overflow-scrolling: touch;*/
}

.privacy {
	font-size: 0.9em;
	line-height: 1.8;
	padding: 5%;
}

.privacy h4 {
	text-align: center;
	border-bottom-style: none;
	margin-top: 0;
	padding: 0;
}

.privacy h4::after {
	content: none;
}

.privacy h5 {
	margin: 1em 0 0.5em;
}


/* ************************************************************************************************
   アニメーション
   ************************************************************************************************ */
/***** ローディングアニメーション *****/
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: center;
          transform-origin: center;
  width: 120px;
  height: 120px;
}

.type5{
  width:20px;
  height:20px;
  border-radius:50%;
  background-color: #BC8DA0;
  animation:spinner5_1 1.2s infinite linear forwards;
}

  @keyframes spinner5_1{
    0%{
      opacity:.2;
      transform:translate(-50%, -50%) rotate(0) scale(.5);
    }
    50%{
      opacity:1;
      box-shadow:21px 21px rgba(188,141,160,1), -21px -21px rgba(188,141,160,1), 21px -21px rgba(188,141,160,1), -21px 21px rgba(188,141,160,1);
      transform:translate(-50%, -50%) rotate(180deg) scale(1);
    }
    100%{
      opacity:.2;
      transform:translate(-50%, -50%) rotate(360deg) scale(.5);
    }
  }

.loaded {
  opacity: 0;
  visibility: hidden;
}


/***** ホバーアニメーション *****/
.header-nav__list:hover,
.header-nav__list--single:hover .header-nav__item--single,
.header-nav__item--second li:hover,
.access__tel:hover,
.recruit__tel:hover,
.news02 a:hover,
.single02 a:hover {
  color: #bc8da0;
  transition: .3s;
}
.news__ttl a:hover {
  color: #bc8da0;
  transition: .3s;
}

.header-nav__item--second li,
.news02 a,
.single02 a,
.news__ttl a {
  transition: .5s;
}

a:hover img {
  opacity: .6;
  transition: .6s;
}

img{
  transition: .6s;
}


/***** ボタン *****/
.btn1, .btn2{
  display: block;
  width: 219px;
  height: 50px;
  border: 1px solid #bc8da0;
  background-color: rgba(255,255,255,0.4);
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
  position: relative;
  z-index: 2;
  color: #333;
  overflow: hidden;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.btn1{
  font-family: 'Franklin';
  font-size: 1.6rem;
}

.btn1::before, .btn2::before,
.btn1::after, .btn2::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}

.btn1, .btn2,
.btn1::before, .btn2::before,
.btn1::after, .btn2::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.btn1:hover,
.btn2:hover {
  color: #fff;
}

.btn1::after,
.btn2::after {
  top: -100%;
  width: 100%;
  height: 100%;
}

.btn1:hover::after,
.btn2:hover::after {
  top: 0;
  background-color: rgba(188,141,160,0.7);
}

.nav-previous,
.nav-next{
  display: block;
  width: 180px;
  height: 50px;
  border: 1px solid #bc8da0;
  background-color: rgba(255,255,255,0.4);
  margin: 20px;
  text-align: center;
  line-height: 50px;
  position: relative;
  z-index: 2;
  color: #333;
  overflow: hidden;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.nav-previous, .nav-next{
  font-size: 1.4rem;
}

.nav-previous a,
.nav-next a{
  display: block;
}

.nav-previous, .nav-next,
.nav-previous::before, .nav-next::before,
.nav-previous::after, .nav-next::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.nav-previous a:hover,
.nav-next a:hover {
  color: #fff;
  background: rgba(188,141,160,0.7);
}

.nav-previous:hover::after,
.nav-next:hover::after,
.nav-previous:hover::after,
.nav-next:hover::after  {
  top: 0;
  background-color: rgba(188,141,160,0.7);
}


/***** ヘッダースクロール *****/
header.hide{
    top: -66px;
}


/***** ハンバーガーメニュー *****/
#nav-drawer {
  position: relative;
}

.nav-unshown {
  display:none;
}

#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #333;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*ハンバーガーメニュー閉じる用のカバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*ハンバーガーメニュー中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: rgba(255, 255, 255, 0.8);/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(105%);/*右に隠しておく*/
}

#header-sp {
  margin-top: 5rem;
  position: relative;
}

.header-sp__list {
  margin-bottom: 4rem;
}

.header-sp__item {
  display: block;
  text-align: center;
  margin-bottom: .8rem;
  font-size: 1.4rem;
}

#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（左へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

#nav-input2:checked ~ #nav-content {
  display: none;
}


/***** ページトップに戻るボタン *****/
#page_top{
  width: 60px;
  height: 60px;
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  background: rgba(188,141,160,0.7);
  opacity: 0.6;
  border-radius: 50%;
}

#page_top:hover{
  background: rgba(188,141,160,1);
}

#page_top a{
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 2.5rem;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/***** index.html/メニュー / ホバーすると文字が出てくる *****/
figure.menu__item {
  width: 330px;
  height: 220px;
  position: relative;
  margin-bottom: 5rem;
}

figcaption.menu__txt {
  width: 330px;
  height: 220px;
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0px;
  right: 0;
  background: linear-gradient(to left, rgba(205,178,207,0.6), rgba(238,203,233,0.7) 35%, rgba(247,235,236,0.8));
  opacity: 0;
  align-items: center;
  text-align: center;
  padding: 5em 2em;
  transition: all 0.6s ease;
}

figcaption.menu__txt:hover {
  opacity: 1;
  transition: all 0.6s ease;
  padding-bottom: 0;
  box-shadow: 0 0 30px 0 #fff;
}


@media screen and (max-width: 560px){
figcaption.menu__txt{
  width: 280px;
  height: 170px;
  margin: auto;
  padding: 1.5em;
}

.menu__ttl{
  margin-bottom: 1rem;
}

}


@media screen and (max-width: 320px){
figure.menu__item {
  width: 288px;
  height: 192px;
}

figcaption.menu__txt {
  width: 250px;
  height: 160px;
  padding: 1rem;
}

.menu__ttl {
  margin-bottom: .5rem;
}

}

/***** concept.html/スライダー *****/
.swiper-container{
  padding-bottom: 5rem !important;
}

.swiper-button-next, .swiper-button-prev {
  display: none !important;
}

.swiper-pagination-bullet-active{
  background: #5D576B !important;
}

.swiper-slide img{
  width: 100%;
  max-width: 100%;
}