@charset "utf-8";

/*
Theme Name: YOKOHAMA-CHILLCHAIR
Theme URI:yokohama-chillchair.com
Description: 横浜のバーバー・床屋 | CHILL CHAIR(チルチェア)横浜店 | メンズ専門 のテーマです。
Author:LEXURES
Author URI:https://lexures.com
*/

/*-- パララックス背景設定 --*/

.bg_attachment{
  background-attachment: fixed;
}

.bg_scroll{
  background-attachment:scroll!important;
}


.lazyfadein img {
  opacity: 0;
  -webkit-transition: opacity 1.5s;
  transition: opacity 1.5s;
}
.lazyfadein .lazyloaded {
  opacity: 1;
}


/* --------------------------------------
  ローディング画面
--------------------------------------- */
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 1;
}
.spinner {
  width: 40px;
  height: 40px;

  position: relative;
  margin: 100px auto;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/* --------------------------------------
  メイン要素
--------------------------------------- */
html{
background:#fff;
font-size:62.5%;
}

body{
font-family:'游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
letter-spacing: 1px;
margin: 0;
word-wrap: break-word;
word-break: break-all;
background-image: none;
font-size:100%;
min-width: inherit;
margin:0;
padding:0;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
background-image:url(./images/bg001.jpg);
background-size: cover;
background-attachment: fixed;
}


main > * {
  position: relative;
  z-index: 10;
}


.item {
  opacity: 0;
}

.item:nth-child(1) {
  -webkit-animation: example 0.5s ease 0.5s 1 forwards;
  animation: example 0.5s ease 0.5s 1 forwards;
}

.item:nth-child(2) {
  -webkit-animation: example 0.5s ease 1s 1 forwards;
  animation: example 0.5s ease 1s 1 forwards;
}

.item:nth-child(3) {
  -webkit-animation: example 0.5s ease 1.5s 1 forwards;
  animation: example 0.5s ease 1.5s 1 forwards;
}

.item:nth-child(4) {
  -webkit-animation: example 0.5s ease 2s 1 forwards;
  animation: example 0.5s ease 2s 1 forwards;
}

.item:nth-child(5) {
  -webkit-animation: example 0.5s ease 2.5s 1 forwards;
  animation: example 0.5s ease 2.5s 1 forwards;
}

.item:nth-child(6) {
  -webkit-animation: example 0.5s ease 3s 1 forwards;
  animation: example 0.5s ease 3s 1 forwards;
}

@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}
@keyframes example {
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


/* --------------------------------------
  吹きだし
--------------------------------------- */
.balloon {
  display: inline-block;
      margin:0 0 1em;
      min-width: 120px;
      max-width: 100%;
      color: #555;
      border: 1px solid #777;
      box-sizing: border-box;
}

.balloon:before{
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.balloon:after{
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #777777;
  z-index: 1;
}

.balloon p {
	margin: 0;
	padding: 0;
}

/* --------------------------------------
  kinkyu
--------------------------------------- */

#kinkyu{
padding: 3em 0 1em;
text-align: center;
}

#kinkyu img{
  width: 90%;
  height: auto;
  max-width: 800px;

}

/* --------------------------------------
  h2 h3 共通項目
--------------------------------------- */

.heading{
  color: #333;
  font-size: 5.0em;
  letter-spacing: 2px;
  line-height: 1.5;
  word-break: break-all;
  /*padding: 1rem 0.5rem;*/
  padding: 30px 0;
  text-align: center;
  font-family:'constructa','游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, serif;
  /*margin: 50px 0 10px;*/
}

.heading2{
  font-size: 2.0vw;
  letter-spacing: 2px;
  line-height: 1.5;
  word-break: break-all;
  /*padding: 1rem 0.5rem;*/
  padding: 30px 0;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  font-family:'游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
  /*margin: 50px 0 10px;*/
  text-shadow:0 0 10px #000;
}

.heading3{
  font-size: 2.0vw;
  letter-spacing: 2px;
  line-height: 1.5;
  word-break: break-all;
  background:#000;
  color:#fff;
  padding: 30px 0;
  text-align: center;
  font-family:'游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
  text-shadow: 10px 10px 0px #000;
  margin:0 0 50px;
}


.head02{
font-size: 1.5em;
text-align: center;
margin: 20px 0;
line-height: 1.5;
font-weight: bold;
}

.headline{
text-align:center;
background:#fff;
font-size:1.5em;
padding:1em 0.2em;
}

.headline::before,
.headline::after{
  content: "";
  display: inline-block;
  width: 35%;
  max-width: 280px;
  height: 1px;
  margin: 2rem;
  background-color: #333;
  vertical-align: middle;
}

.headline2::before,
.headline2::after{
    content: "";
    display: block;
    width: 94%;
    height: 1px;
    margin: 2rem 1rem;
    background-color: #333;
    vertical-align: middle;
}


/* --------------------------------------
  campaign
--------------------------------------- */

/****** Campaign 全体設定 *******/

#campaign{
  background: #000;
  padding:50px 0 0;
  position: relative;
  background-attachment: fixed;
}
@media only screen and (max-width:480px){
#campaign{

        } }

#campaign img{
  width: 100%;
}


/****** Campaign Catch設定 *******/

.campaign_catch{
  width: 66.6666%;
  margin: 5% 0 0 auto;
}

.campaign_heading{
    color:#fff;
    font-size: 5.0vw;
    letter-spacing: 2px;
    line-height: 1.2;
    word-break: break-all;
    padding:0;
    text-align: center;
    font-family: 'constructa','游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, serif;
    text-align: center;
    text-shadow: 0 0 4px #c0c0c0;
    z-index: 2;
}

/****** Campaign01 設定 11/05まで*******/

.campaign_container{
margin: 5% auto 0;
overflow: hidden;

}

.campaign_container h3{
  font-size: 3.0em;
  margin:0;
  padding: 10px 0;
  width: 100%;
  text-align: center;
  background: #af3839;
  color: #fff;
  line-height: 1.8;
  padding: 60px;
}
@media only screen and (max-width:768px){
.campaign_container  h3{
        font-size: 2.0em;
        } }
@media only screen and (max-width:480px){
        .campaign_container h3{
                font-size: 1.5em;
        } }
@media only screen and (max-width:380px){
        .campaign_container h3{
                        font-size:1.2em;
                } }


.campaign_container h4{
      font-size: 2.0em;
      text-align: center;
      margin: 30px 0 20px;
      padding: 10px 0;
      border: 1px solid #fff;
      line-height: 1.8;
      color: #fff;
}
@media only screen and (max-width:600px){
        .campaign_container  h4{
            margin: 30px 0;
            padding: 10px;
            font-size: 1.6em;
                } }

.campaign_flex{
-webkit-display: flex;
display: flex;
justify-content: space-around;
max-width: 1600px;
margin: 0 auto 100px;
}
@media only screen and (max-width:768px){
      .campaign_flex{
        -webkit-flex-direction: column;
        flex-direction: column;
        margin:0 auto;
        } }


.campaign_catch_text{
position: relative;
z-index: 1;
margin: 0 50px 0 0;
width: 100%;
text-align: center;
}
@media only screen and (max-width:768px){
      .campaign_catch_text{
        margin:0;
        } }

.campaign_catch_text::after{
  position: absolute;
  content: '';
  top: 5%;
  left: 5%;
  width: 100%;
  height:100%;
  background: #ececec;
  z-index: -1;
}
@media only screen and (max-width:768px){
      .campaign_catch_text::after{
        top:0;
        left:0;
        } }

.campaign_catch_text_plus{
  font-size:1.75em;
  background:#fff;
  padding:10px;
  line-height: 1.7;
  text-align:center;
  font-weight: bold;
}

.campaign_catch_fig{
  width: 100%;
}

.campaign_catch_fig figure{
  margin: 0;
}

.campaign_catch_fig img{
  margin: 30px;
}
@media only screen and (max-width:768px){
      .campaign_catch_fig img{
        margin: 0;
        } }


.campaign_catch_text h3{
  font-size: 2.4em;
  margin: 0;
  padding: 10px 0;
  width: 100%;
  text-align: center;
  color: #fff;
  line-height: 1.8;
  padding: 2em;
  background: #465ba9;
}
@media only screen and (max-width:1024px){
.campaign_catch_text h3{
        font-size: 1.6vw;
        } }
        @media only screen and (max-width:768px){
        .campaign_catch_text h3{
                font-size: 1.8em;
                padding:1em;
                } }

.caution{
  background: #fff;
  padding: 0px 50px 50px;
  position: relative;
}
@media only screen and (max-width:768px){
      .caution{
        padding: 0px 2em 25px;
        width: 94%;
        margin: 20px auto;
        } }

.caution h4{
  font-size: 3em;
  text-align: center;
  margin:0;
  padding: 10px 0;
  border:none;
  font-family: 'constructa','游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, serif;
}


.caution ul{
margin: 0 auto;
max-width: 600px;
}

.caution li{
  font-size: 1.5em;
  margin: 0 0 0.5em;
}
@media only screen and (max-width:1024px){
.caution li{
        font-size: 1.5vw;
        } }
        @media only screen and (max-width:768px){
        .caution li{
                font-size: 1.75em;
                margin: 0 0 1em;
                } }
                @media only screen and (max-width:480px){
                .caution li{
                        font-size: 1.5em;
                        margin: 0 0 1em;
                        } }

.caution li::before{
  content:'\f138';
  font-family:"Font Awesome 5 Free";
  font-weight: bold;
  padding: 0 10px 0 0;
}


.campaign_detail{
  max-width: 1200px;
  margin: 0 auto;
  width: 94%;
}


.flexbox{
  display:-webkit-flex;
  display:flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
  margin: 50px 0 0;
}
@media only screen and (max-width:768px){
.flexbox{
        display:block;
        margin: 30px 0 0;
        } }

.campaign_box{
  display:block;
  padding:0;
  background: #fff;
  margin: 0 auto;
  text-align: center;
}
@media only screen and (max-width:480px){
    .campaign_box{
        text-align:left;
        } }

.campaign_box_inner{
padding:10px;
}

.campaign_box h5{
  font-size: 2.0em;
      margin: 15px 0 0;
      padding: 10px 0;
      background: #000;
      color: #fff;
      text-align: center;
}
@media only screen and (max-width:768px){
        .campaign_box  h5{
          font-size: 1.7em;
          line-height: 1.8;
          margin: 0;
        } }
        @media only screen and (max-width:480px){
                .campaign_box  h5{
                  font-size: 1.5em;
                } }

.campaign-flex{
  display:-webkit-flex;
  display:flex;
  flex-wrap: wrap;
}
@media only screen and (max-width:768px){
  .campaign-flex{
    -webkit-flex-direction: column;
    flex-direction: column;
  }

}

.campaign_box dl{
  margin: 10px 7px;
  width: calc(96% / 2);
  background: #efefef;
}

@media only screen and (max-width:768px){
.campaign_box dl{
        margin:10px 0;
        padding:10px 0px;
        width:100%;
        } }

.campaign_box dt{
  font-weight: bold;
  padding: 10px 10px 0;
  text-align: left;
  font-size: 1.6em;
}
@media only screen and (max-width:600px){
.campaign_box dt{
        font-size: 1.5em;} }
@media only screen and (max-width:340px){
.campaign_box dt{
        font-size: 1.4em;  } }


.campaign_box dd{
  font-size: 1.6em;
  text-align: left;
  line-height: 2.0;
  padding: 0 10px 0;
  font-weight: bold;
}
@media only screen and (max-width:600px){
.campaign_box dd{
        font-size: 1.3em;} }

.campaign_box p{
  font-size: 1.5em;
}
@media only screen and (max-width:768px){
.campaign_box p{
        font-size: 1.4em;} }
@media only screen and (max-width:768px){
.campaign_box p{
        font-size: 1.3em;} }


.campaign_alart{
      text-align: center;
      background: #eee;
      padding: 15px 10px;
      margin:30px auto;
      max-width: 800px;
}
@media only screen and (max-width:768px){
.campaign_alart{
  margin:30px auto;} }
  @media only screen and (max-width:480px){
  .campaign_alart{
    text-align: left;} }


.campaign_alart p{
  margin: 0 0 5px;
  font-size: 1.2em;
}
@media only screen and (max-width:768px){
.campaign_alart p{
  font-size: 1.15em;
} }

/****** Campaign02 会員制度導入コンテンツ 設定*******/

.campaign_box2{

}

.campaitn_detail2{
  width: 94%;
  margin: 0 auto;
  max-width: 1600px;
}

.campaign-fig{
  width: 50%;
  padding: 0 50px 0 0;
}
@media only screen and (max-width:768px){
.campaign-fig{
  width: 100%;
  padding:0;
} }

.campaign_text{
  width: 50%;
  padding:0;
}
@media only screen and (max-width:768px){
.campaign_text{
  width: 100%;
  padding:0;
} }

.campaign_flex2{
    -webkit-display: flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: center;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto 100px;
}
@media only screen and (max-width:768px){
      .campaign_flex2{
        -webkit-flex-direction: column;
        flex-direction: column;
        margin:0 auto;
        -webkit-align-items:initial;
        align-items:initial;
        } }


.campaign_box2 h5{
  font-size: 2.0em;
      margin:0;
      padding: 10px 0;
      background: #000;
      color: #fff;
      text-align: center;
}
@media only screen and (max-width:768px){
        .campaign_box2  h5{
          font-size: 1.7em;
          line-height: 1.8;
          margin: 0;
        } }
        @media only screen and (max-width:480px){
                .campaign_box2  h5{
                  font-size: 1.5em;
                } }


.campaign_box2 dl{
  margin: 10px 0;
  width:100%;
  background: #efefef;
}

@media only screen and (max-width:768px){
.campaign_box2 dl{
        padding:10px 0px;
        width:100%;
        } }

.campaign_box2 dt{
  font-weight: bold;
  padding: 10px 10px 0;
  text-align: left;
  font-size: 1.6em;
}
@media only screen and (max-width:600px){
.campaign_box2 dt{
        font-size: 1.5em;} }
@media only screen and (max-width:340px){
.campaign_box2 dt{
        font-size: 1.4em;  } }


.campaign_box2 dd{
  font-size: 1.6em;
  text-align: left;
  line-height: 2.0;
  padding: 0 10px 0;
  font-weight: bold;
}
@media only screen and (max-width:600px){
.campaign_box2 dd{
        font-size: 1.4em;} }

.campaign_box2 p{
  font-size: 1.6em;
}
@media only screen and (max-width:768px){
.campaign_box2 p{
        font-size: 1.4em;} }


/****** Campaign03 会員制度導入コンテンツ 設定*******/

.campaign_catch_text2{
position: relative;
z-index: 1;
margin: 0 30px 0;
}
@media only screen and (max-width:768px){
      .campaign_catch_text2{
        margin:0;
        } }



.campaign_catch_text2 h3{
  font-size: 1.8em;
  margin:0;
  width: 100%;
  text-align: center;
  background:#465ba9;
  color: #fff;
  line-height: 1.8;
  padding: 2em;
}
@media only screen and (max-width:768px){
.campaign_catch_text2 h3{
        font-size: 1.6em;
        padding: 1em;
        letter-spacing: 0.4px;
        } }
        @media only screen and (max-width:340px){
          .campaign_catch_text2 h3{
                  font-size: 1.4em;
                  } }

.campaign_catch_text2 ul{
font-size: 1.6em;
border-top:1px dashed #333;
border-bottom:1px dashed #333;
padding: 1em 0;
font-weight: bold;
}

.fade_maint_mg{
  margin:2em 0;
}

.fade_maint_alart{
  text-align: center;
  font-size: 1.5em;
  background: #000;
  color: #fff;
  margin: 1em 0!important;
  padding: 1em;
}


.campaign_catch_text_box{
  padding: 30px 50px;
  position: relative;
  background: #fff;
}
@media only screen and (max-width:768px){
      .campaign_catch_text_box{
        padding:20px 2em;
        } }


.campaign_catch_text_box p{
  font-size: 1.5em;
  margin: 0 0 0.5em;
}

.campaign_catch_fig2{
  margin: 0 30px 0 0;
  z-index: 1;
}
@media only screen and (max-width:768px){
  .campaign_catch_fig2{
      margin: 0;
        } }


.type_of_member{
  padding:50px;
  position: relative;
  background: #fff;
  max-width: 1600px;
  margin: 30px auto;
  width: 96%;
}
@media only screen and (max-width:768px){
.type_of_member{
padding: 12px;
} }

.type_of_member h4{
font-size: 2.0em;
text-align: center;
margin:0 0 30px;
padding: 10px 0;
border: 1px solid;
line-height: 1.8;
color: #000;
}
@media only screen and (max-width:768px){
.type_of_member h4{
  font-size: 1.6em;
} }
@media only screen and (max-width:480px){
.type_of_member h4{
  margin: 0 0 30px;
padding: 10px;
font-size: 1.2em;
letter-spacing: 0;
} }

.type_of_member dl{
  font-size: calc(1.6em + (24 - 24)*(100vw - 400px)/(800 - 400));
  width: calc(100% / 12 * 4 - 20px);
  display: inline-block;
  vertical-align: top;
  margin: 0 7px;
}
@media only screen and (max-width:768px){
  .type_of_member dl{
    display: block;
    width:100%;
    margin:0 0 20px;
    font-size: 1.4em;
        } }

/****** Campaign04 プラチナランクアップ設定 11/30まで*******/

.campaign_container2{
margin: 0 auto;
overflow: hidden;
position: relative;
}

@media only screen and (max-width:768px){
.campaign_flex3{
  -webkit-display: flex;
  display: flex;
}
}
@media only screen and (max-width:600px){
.campaign_flex3{
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}

.campaign_catch_text3{
  position: absolute;
  top:0;
  left: 5%;
}
@media only screen and (max-width:768px){
.campaign_catch_text3{
  width: 100%;
        position:initial;
        left: 0;
        } }

.campaign_catch_text3 h3{
    font-size: 2.0em;
    margin:0;
    padding: 10px 0;
    width: 100%;
    max-width: 600px;
    text-align: center;
    background: #af3839;
    color: #fff;
    line-height: 1.8;
  }
  @media only screen and (max-width:768px){
.campaign_catch_text3 h3{
          font-size: 2.0vw;
          max-width: 800px;
          } }
  @media only screen and (max-width:600px){
.campaign_catch_text3 h3{
                  font-size: 1.6em;
          } }

.campaign_bg{
  background: url(./images/image04-2.jpg);
  width: 100%;
  height: 500px;
  background-position: 100% 50%;
  background-size: cover;
}
@media only screen and (max-width:768px){
  .campaign_bg{
    background: url(./images/image04-2_sp.jpg);
    height:auto;
    background-size: cover;
}
}
@media only screen and (max-width:600px){
  .campaign_bg{
    height:400px;
    background-size: cover;
    background-position: 50% 30%;
}
}

.campaign_catch_text_box2{
  background: #fff;
  padding: 30px;
  max-width: 600px;
}
@media only screen and (max-width:768px){
  .campaign_catch_text_box2{
    padding: 12px;
} }

.campaign_catch_text_box2 p{
  font-size: 1.5em;
  margin: 0 0 10px;
}
@media only screen and (max-width:768px){
  .campaign_catch_text_box2 p{
    font-size: 1.35em;
} }


/* --------------------------------------
  What's CHILL CHAIR
--------------------------------------- */

#about{
  background: #fff;
  background: url(./images/bg001.jpg) center top repeat;
  position: relative;
  padding:0;
  overflow: hidden;
  background-size: cover;
  background-attachment: fixed;
}
@media only screen and (max-width:767px){
#about{
padding:0;
background:none;
} }

@media only screen and (max-width: 767px){
#about:before{
content: "";
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
background: url(./images/bg001.jpg) center top repeat-y;
background-size: cover;
} }


.about_heading{
  color: #fff;
  font-size:3em;
  letter-spacing: 2px;
  word-break: break-all;
  padding: 0;
  text-align: center;
  font-family: 'constructa','游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, serif;
  position: relative;
  z-index: 2;
  text-shadow: 0 0 7px #333;
}
@media only screen and (max-width: 544px){
  .about_heading{
    font-size: 1.2em;
  }
}

.about_catch{
  width: 100%;
  margin: 2em auto;
}
@media only screen and (min-width:767px){
  .about_catch{
    width: 66.6666%;
    margin: 0 auto;
  } }

.about_catch img{
  width:100%;
}

.about_box{
  position: relative;
  padding: 80px 0;
  margin: 0;
  background: rgba(1, 1, 1, 0.6);
  width: 100%;
  height: 100%;
  color: #fff;
  z-index: 11;
}

  .about_box h3{
    font-size: 1.8em;
    font-weight: bolder;
    margin: 10% 0;
    line-height: 2.0;
    padding:0;
    text-align: center;
    position: relative;
    color: #fff;
  }
  @media only screen and (min-width:767px){
  .about_box h3{
    font-size: 2.4em;
    margin: 80px 0;
  } }

  .about_box h3 span{
  font-size: 1em;
  display: block;
}

.about_box h3::before{
  position: relative;
  content: '';
  display: block;
  width: 90%;
  height: 1px;
  background: #fff;
  left: 50%;
  transform: translate(-50%);
  top: -20px;
  max-width: 600px;
}

.about_box h3::after{
  position: relative;
  content: '';
  display: block;
  width: 90%;
  height: 1px;
  background: #fff;
  left: 50%;
  transform: translate(-50%);
  bottom: -20px;
  max-width: 600px;
}

.about_box_inner{
  padding: 10px;
  width: 100%;
  height: 100%;
  color: #fff;
  z-index: 11;
  max-width: 1600px;
  margin: 0 auto;
  flex-direction: column-reverse;
  display:-webkit-flex;
  display: flex;
}
@media only screen and (min-width:767px){
.about_box_inner{
  padding: 50px;
  position: relative;
  display:-webkit-flex;
  display: flex;
  flex-direction: row;
} }

.about_box_txt{
    /* max-width: 1200px; */
    width: 100%;
    margin: 0 auto;
    padding: 0 50px 0 0;
    padding: 0;
}
@media only screen and (min-width:767px){
  .about_box_txt{
    padding: 0 50px 0 0;
  } }


.about_box_txt p{
  font-size: 14px;
  margin: 0 0 1.6em;
  line-height: 2.0;
}
@media only screen and (min-width:767px){
.about_box_txt p{
  font-size: 16px;
}
}

/******キャンペーン解説セクションその1
こんな方はCHILLCHAIRへ　Recommend****/

.about_recommend_container{
  max-width: 1600px;
  -webkit-display: flex;
  display: flex;
  margin: 80px auto;
  padding: 0 50px;
}
@media only screen and (max-width:767px){
.about_recommend_container{
-webkit-flex-direction: column;
flex-direction: column;
margin: 0;
padding: 0 10px;
  } }

.about_recommend img{
  width: 100%;
  height: auto;
  padding:0 ;
}
@media only screen and (max-width:768px){
.about_recommend img{
padding: 0;
margin:0;
  } }


.about_recommend_text{
padding: 50px;
border: 6px solid #346336;
background: #fff;
margin: 0 0 0 50px;
width: 100%;
}
@media only screen and (max-width:768px){
.about_recommend_text{
margin:20px auto 0;
padding:30px 20px;
  } }

.about_recommend_text h4{
      font-size: 2.5em;
      margin: 0 0 30px;
      color: #346336;
      text-align: center;
}
@media only screen and (max-width:768px){
.about_recommend_text h4{
font-size: 3.5vw;
  } }


.about_recommend_text ul{
margin: 0 0 30px;
}

.about_recommend_text ul > li{
      font-size: 1.75em;
      margin: 0 0 10px;
      color: #346336;
      font-weight: bold;
}
@media only screen and (max-width:768px){
.about_recommend_text ul > li{
font-size: 3.0vw;
  } }

.about_recommend_text ul > li:before{
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  padding-right: 10px;
}

.about_recommend_text p{
font-size:14px;
margin: 0 0 1%;
color: #333;
}
@media only screen and (min-width:767px){
  .about_recommend_text p{
    font-size:16px;
    } }


/* --------------------------------------
  movie
--------------------------------------- */

#movie{
/*background: #000;*/
position: relative;
padding: 60px 0;
background: #c4302b;
}
@media only screen and (max-width:600px){
#movie{
padding: 30px 0;
}}

.movie_heading{
  color: rgb(255, 255, 255);
  font-size: 6vw;
  letter-spacing: 2px;
  line-height: 1.2;
  word-break: break-all;
  font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
  text-align: left;
  position: relative;
  width: 90%;
  margin: 0 auto;
  text-shadow: rgb(153 153 153) 0px 0px 5px;
  padding: 0px;
  z-index: 2;
  text-align: center;
}

.movie_catch{
  width: 66.6666%;
  margin: 2% 0 0 auto;
}

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

.text_inner_movie{
  text-align: center;
  margin: 60px auto;
  font-size: 1.5em;
  width: 100%;
  padding: 30px 30px 20px;
  background: #fff;
  max-width: fit-content;
}
@media only screen and (max-width:600px){
.text_inner_movie{
  margin: 20px auto;
  font-size: 1.2em;
  text-align: left;
  padding: 12px;
  width: 90%;
  } }

.text_inner{
  text-align: center;
  margin:50px;
  font-size: 1.5em;
  background: #fff;
  padding: 25px;
}
@media only screen and (max-width:768px){
.text_inner{
  margin: 20px;
  font-size: 1.2em;
  text-align: left
  } }
  @media only screen and (max-width:480px){
  .text_inner{
    padding: 12px;
    } }

.movie_wrap{
-moz-display:flex;
-webkit-display:flex;
display: flex;
-webkit-flex-wrap:wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
max-width: 1600px;
margin: 0 auto;
}

.movie_wrap > li{
  width: calc(100% / 2 - 10px);
}
@media only screen and (min-width:767px){
  .movie_wrap > li{
    width: 100%;
    height: auto;
    width: calc(100% / 3 - 10px);
  }}

.movie{
margin: 5px;
}

.movie img{
  width:100%;
  max-width:800px;
}

.movie iframe{
  width: 100%;
  max-width: 800px;
  height: 100%;
}
@media only screen and (min-width:767px){
  .movie iframe{
    min-height: 225px;
  }
}

/* --------------------------------------
  Skill
--------------------------------------- */

#skill{
padding: 20px 13px;
position: relative;
background-position: 60% 50%;
background-size:cover;
}
@media only screen and (min-width:767px){
  #skill{
  padding: 30px;
  background-attachment: fixed;
  background-position: 100% 50%;
 } }

.skill_box img{
width: 100%;
height: auto;
position: relative;
transition:all 0.5s ease-out;
}

.skill-flex{
  -webkit-display: flex;
  display: flex;
  -webkit-flex-wrap:wrap;
  flex-wrap: wrap;
  margin: 0;
}
@media only screen and (max-width:768px){
.skill-flex{
  -webkit-flex-direction:column;
  flex-direction:column;
  } }

.skill-flex li{
  width: calc(100% / 2 - 2em);
  margin: 0 1em;
}
@media only screen and (max-width:768px){
  .skill-flex li{
    width: 100%;
    margin:5px auto;
    } }

.skill_box{
  position: relative;
}

.skill_box figure{
  margin: 0;
}

@media only screen and (max-width:768px){
.sk-one{
  margin: 0 0 20px;
} }

.sk-one::before{
  position: absolute;
  content: 'skill 1.';
  font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
  left: 0;
  display: block;
  color: #fff;
  text-shadow: 0 0 10px #564a4a;
  z-index: 2;
  top: -6%;
  left: 5%;
  font-size: 7em;
  }
  @media only screen and (max-width:768px){
    .sk-one::before{
          content: 'skill 1.';
          top:-5vh;
          font-size: 48px;
    }
  }

  .sk-two::before{
    position: absolute;
    content: 'skill 2.';
    font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
    left: 0;
    display: block;
    color: #fff;
      text-shadow: 0 0 10px #564a4a;
    z-index: 2;
    top: -6%;
    left: 5%;
    font-size: 7em;
    }
    @media only screen and (max-width:768px){
      .sk-two::before{
            content: 'skill 2.';
            top:-5vh;
            font-size: 48px;
      }
    }


.skill_text{
  z-index: 1;
  width: 100%;
  transition: all 0.5s ease-out;
  background: #fff;
  padding: 10px 20px;
}
@media only screen and (max-width:600px){
.skill_text{
position: relative;
} }

.skill_text h3{
  font-size: 1.6em;
  font-weight: bolder;
  margin: 0 0 1em;
  line-height: 1.7;
  z-index: 1;
  background: rgb(0 0 0);
  padding: 5px 5px;
  color: #ffffff;
  transition: all 0.5s ease-out;
  text-align: center;
}

.skill_text ul{
  margin:2em 0;
}


.skill_text ul > li{
  font-size: 1.5em;
  margin: 0 0 7px;
  font-weight: bold;
  -webkit-display: flex;
  display: flex;
  width: 100%;
}

.skill_text ul > li:before{
font-family: "Font Awesome 5 Free";
content: "\f058";
padding-right: 10px;
}

.skill_text p{
font-size: 1.4em;
}

.skill_text h3 i{
  vertical-align: baseline;
}

.skill_text h3 span{
font-size: 1.5em;
display: block;
}

.skill_box a:hover .skill_text h3{
  background: rgb(86 72 72 / 50%);
}
@media only screen and (max-width:600px){
.skill_box a:hover .skill_text h3{
  background: rgb(86 72 72);
} }



/* --------------------------------------
Skill.page
--------------------------------------- */

  #skill-contents{
    background: #fff;
    background: url(./images/bg002.jpg) center top repeat;
    background-size: cover;
    position: relative;
    padding:120px 0;
    overflow: hidden;
    background-attachment: fixed;
  }
  @media only screen and (max-width:767px){
  #skill-contents{
  background:none;
  padding:80px 0;
  } }
  
  @media only screen and (max-width: 767px){
  #skill-contents:before{
  content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background: url(./images/bg002.jpg) center top repeat;
  background-size: cover;
  } }

  #skill-contents img{
    width: 100%;
    height: auto;
  }
  
  .skill_head{
    background-size:cover;
    height: 240px;
    position:relative;
    z-index: 11;
  }
  @media only screen and (min-width: 767px){
    .skill_head{
      height: 300px;
    }
  }

  
  .skill_head h1{
    position: absolute;
      color:#fff;/*文字は白に*/
      font-weight: bold; /*太字に*/
      font-size:60px;/*サイズ2倍*/
      line-height: 1.5;
      text-align: center;
      margin:0;
      padding:0;
      width: 100%;
      text-shadow: 0 0 10px #333;
  }
  @media only screen and (max-width:767px){
  .skill_head h1{
  font-size: 36px;
  } }


  .skill_page_box{
    margin:0 0 10%;
  }
  
  
  .skill-container{
    padding: 0 10px 0;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    z-index:11;
  }
  @media only screen and (min-width:767px){
    .skill-container{
      padding: 0 50px 0;
    }
  }

  .skill_page_box_inner{
    display:-webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .skill_flex_dcr{
    -webkit-flex-direction: column-reverse;
      flex-direction: column-reverse;
  }
  @media only screen and (min-width:767px){
  .skill_page_box_inner{
    -webkit-flex-direction: row;
    flex-direction: row;
  } }

  
  .skill-container p{
    font-size: 1.6em;
    color: #fff;
    margin: 0 0 1em;
    line-height: 2.0;
  }
  @media only screen and (max-width:600px){
  .skill-container p{
  font-size: 1.4em;
  } }


  .skill_page_catch_l,.skill_page_catch_r{
    padding: 0 0 20px
  }

  @media only screen and (min-width:767px){
    .skill_page_catch_l{
      padding: 0 0 0 50px;
    }

    .skill_page_catch_r{
      padding: 0 50px 0 0;
    }

  }

  .skill_page_text{
    padding: 0;
  }

  .skill_page_heading{
    font-size: 3vw;
    font-weight: 600;
    margin: 0 0 2em;
    padding: 0;
    font-weight: bold;
    line-height: 2.0;
    position: relative;
    z-index: 2;
    color: #fff;
    text-shadow: 0 0 10px #333;
  }
  @media only screen and (min-width:767px){
    .skill_page_heading{
      font-size: 2.2em;}}
  
.skill_page_heading:after{
  position: absolute;
  content: 'skill.01';
  font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
  display: block;
  color: #ffffff59;
  text-shadow: 0 0 10px #fff;
  z-index: -1;
  top: -100px;
  right: 0;
  font-size: 10vw;
  }

  .skill_page_heading2{
    font-size: 3vw;
    font-weight: 600;
    margin: 0 0 2em;
    padding: 0;
    font-weight: bold;
    line-height: 2.0;
    position: relative;
    z-index: 2;
    color: #fff;
    text-shadow: 0 0 10px #333;
  }
  @media only screen and (min-width:767px){
    .skill_page_heading2{
      font-size: 2.2em;}}

  .skill_page_heading2:after{
    position: absolute;
    content: 'skill.02';
    font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
    display: block;
    color: #ffffff59;
    text-shadow: 0 0 10px #fff;
    z-index: -1;
    top: -18vw;
    left: 0;
    font-size: 10vw;
    }
    @media only screen and (min-width:767px){
      .skill_page_heading2:after{
        top: -15vw;
      }
    }

  
  .skill-container ul{
  margin:40px 0;
  }
  
  .skill-container ul > li{
    font-size: 1.4em;
    margin: 0 0 0.6em;
    color: #fff;
  }
  @media only screen and (min-width:767px){
    .skill-container ul > li{
      font-size: 1.6em;}}



/* --------------------------------------
  コンセプト
--------------------------------------- */

#concept{
  padding: 60px 0 30px;
  position: relative;
  /*background: rgb(25 26 27 / 80%);*/
  background: rgb(1 22 43 / 80%);
}
@media only screen and (min-width:767px){
  #concept{
    padding: 100px 0 30px;
  }
}

#concept img{
  width:100%;
  height: auto;
}

.concept_catch{
  width: 66.6666%;
  margin: 5% 0 0 auto;
}

.concept_heading{
    color: #fff;
    font-size: 5vw;
    letter-spacing: 2px;
    line-height: 1;
    word-break: break-all;
    padding:0 1%;
    text-align: center;
    font-family: 'constructa','游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, serif;
    text-align: left;
    text-shadow: 0 0 5px #999;
    z-index: 2;
    max-width: 1600px;
    margin: 0 auto;
    text-align: center;
}

#concept p{
  font-size: 1.6em;
  line-height: 1.8;
  margin: 0 0 1.6em;
}
@media only screen and (max-width:600px){
  #concept p{
    font-size:1.4em; } }

#concept a img:hover{
opacity:0.8;
transition: 0.5s ;
}

.concept_container{
  width: 100%;
  max-width: 1600px;
  margin: 120px auto;
  color: #fff;
}
.concept_container:last-of-type{
  margin: 60px auto 0;
}

@media only screen and (max-width:768px){
  .concept_container{
    margin: 60px auto; }
  
  }



.concept_contents_main_box{
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 0 0 50px;
}

.concept_contents_main_box h3{
  font-size: 2.0vw;
  font-weight: 500;
  margin: 0 0 30px;
  padding: 20px 10px;
  text-align: center;
  line-height: 2.0;
}
@media only screen and (max-width:768px){
.concept_contents_main_box h3  {
        font-size: 1.5em; }}
@media only screen and (max-width:480px){
        .concept_contents_main_box h3  {
                font-size: 1.4em; }}
@media only screen and (max-width:340px){
.concept_contents_main_box h3  {
        font-size: 1.2em;
        padding:7px 7px; }}


/*** conceptコンテンツ01 ***/

.concept_contents_main_box01{
  width: 100%;
  margin:0 auto;
  position: relative;
  padding:0;
  /*background: rgba(3, 3, 3, 0.5);*/
}

.concept_contents_main_box01 h3{
  font-size: 3.2vw;
  font-weight: 500;
  margin: 0 0 30px;
  padding: 0;
  font-weight: bold;
  line-height: 1.6;
  position: relative;
  z-index: 2;
  text-align: center;
  text-shadow: 0 0 5px #999;
}
@media only screen and (min-width:1200px){
.concept_contents_main_box01 h3  {
  font-size: 48px;
        }}
@media only screen and (max-width:600px){
        .concept_contents_main_box01 h3  {
          font-size: 2.0em;
          line-height: 1.8;
          letter-spacing: 0;
           }}

.concept_block01{
-webkit-display: flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0px auto;
max-width: 1000px;
padding: 0;
}
@media only screen and (max-width:768px){
.concept_block01 {
  -webkit-flex-direction: column;
  flex-direction: column;
  margin:0;
  padding:0;}}

.concept_block01::before{
  position: absolute;
  content: "concept.";
  font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
  display: block;
  /*color: #777777;*/
  color: #285480;
  z-index: 1;
  top: -110px;
  left: 40%;
  font-size: 150px;
  transform: translate(-100%);
  /*text-shadow: 0 0 6px #676767f7;*/
  text-shadow: 0 0 6px #08305a;
}
@media only screen and (max-width:768px){
.concept_block01::before{
  top: -83px;
  left: 25%;
  font-size: 60px;
  transform: translate(-50%);}}

.c01-f-b{
width: 100%;
height: 500px;
margin: 0 0 30px;
background-position: 0% 30%;
background-repeat: no-repeat;
background-size: cover;
}
@media only screen and (max-width:768px){
.c01-f-b{
        background-position: 50% 50%;
        max-width: 800px;
        height: 300px;}}


.concept_text01{
      padding: 25px;
      position: relative;
      /*background: #fff;*/
      margin:0;
      width: 100%;
}
@media only screen and (max-width:768px){
.concept_text01{
      padding:0px 13px 0;
      margin: 0 auto;}}


/*** conceptコンテンツ02 ***/


.concept_contents_main_box02{
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 0;
}
@media only screen and (max-width:768px){
.concept_contents_main_box02{
      padding:0;}}


.concept_contents_main_box02::before{
  position: absolute;
  content: "Especially.";
  font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
  display: block;
  /***背景黒の場合の文字色選択***/
  /*color: #777777;*/
  /*text-shadow: 0 0 6px #5a5813f7;*/
  color: #285480;
  z-index: 1;
  top: -110px;
  left: 40%;
  font-size: 150px;
  transform: translate(-100%);
  
  text-shadow: 0 0 6px #08305a;
}
@media only screen and (max-width:768px){
.concept_contents_main_box02::before{
    display:none}}

.concept_contents_main_box02 h3{
  font-size: 2.8vw;
  font-weight: 500;
  margin: 0 0 30px;
  padding: 0;
  font-weight: bold;
  line-height: 1.6;
  position: relative;
  z-index: 2;
  text-align: center;
  text-shadow: 0 0 5px #999;
}
@media only screen and (min-width:1200px){
.concept_contents_main_box02 h3  {
  font-size: 40px;
        }}
@media only screen and (max-width:600px){
        .concept_contents_main_box02 h3  {
          font-size: 2.0em;
           }}



.concept_block02{
  display: -webkit-flex;
  display: flex;
  margin: 0 auto;
  padding: 25px;
  max-width: 1000px;
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
@media only screen and (max-width:768px){
.concept_block02 {
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
  margin: 50px 0;
  padding:0;}}


.concept_text02{
  width: 100%;
  margin: 0 auto;
  /*background: #fff;*/
  /*padding: 50px;*/
  height: max-content;
  position: relative;
}
@media only screen and (max-width:768px){
.concept_text02 {
  padding: 0px 13px 0;
  }}

  .check{
    padding: 2em 0 1.3em;
    border-top: 1px dashed;
    border-bottom: 1px dashed;
    margin: 0 0 2em;
    max-width: fit-content;
  }

  .check > li{
    font-size: 1.6em;
    margin: 0 0 7px;
    font-weight: bold;
    -webkit-display: flex;
    display: flex;
  }
  @media only screen and (max-width:600px){
    .check > li{
      font-size: 1.4em;
      }}
  
  .check > li:before{
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  padding-right: 10px;
  }
  

@media only screen and (max-width:768px){
.concept_text02::before{
  position: absolute;
  content: "Especially.";
  font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
  display: block;
  /*color: #808080;*/
  color: #285480;
  z-index: 1;
  top: -63px;
  left: 27%;
  font-size: 5em;
  transform: translate(-50%);
  /*text-shadow: 0 0 6px #676767f7;*/
  text-shadow: 0 0 6px #08305a;
} }

.c02-f-a{
  width: 100%;
  background-position: 60% 50%;
  background-repeat: repeat;
  /* background-attachment: fixed; */
  background-size: cover;
  margin: 0 auto 30px;
  height: 400px;
}
@media only screen and (max-width:768px){
.c02-f-a{
        background-position: 60% 50%;
        width:100%;
        max-width: 800px;
        height: 300px;}}

        .parallax-window {
         min-height: 800px;
         background: transparent;
        }


/*** conceptコンテンツ03 ***/


.concept_contents_main_box03{
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 0 0 50px;
}
@media only screen and (max-width:768px){
.concept_contents_main_box03{
  padding: 0 0 1px;

} }
/*
.concept_contents_main_box03::before{
  position: absolute;
  content: "hope.";
  font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
  display: block;
  color: #285480;
  z-index: -1;
  top: -110px;
  left: 33%;
  font-size: 150px;
  transform: translate(-100%);
  text-shadow: 0 0 6px #08305a;
}
@media only screen and (max-width:768px){
.concept_contents_main_box03::before{
  top: -83px;
  font-size:60px;}}
  */

.concept_contents_main_box03 h3{
  font-size: 3.2vw;
  font-weight: 500;
  margin: 0 0 30px;
  padding: 0;
  font-weight: bold;
  line-height: 1.6;
  position: relative;
  z-index: 2;
  text-align: center;
  text-shadow: 0 0 5px #999;
}
@media only screen and (min-width: 1200px){
.concept_contents_main_box03 h3 {
    font-size: 46px;
} }

@media only screen and (max-width:600px){
        .concept_contents_main_box03 h3 {
          font-size: 2.0em;
          letter-spacing: 0;
          padding: 0;}}


.concept_block03{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0px auto;
  padding: 0;
  max-width: 1000px;
}
@media only screen and (max-width:768px){
.concept_block03 {
  -webkit-flex-direction: column;
  flex-direction: column;
  margin: 0;
  padding:0;}}

.concept_text03{
  margin: 0 auto;
  /*background: #fff;*/
  padding: 0 25px;
  height: max-content;
  width: 100%;
}
@media only screen and (max-width:768px){
.concept_text03 {
  padding: 0px 13px;
  margin: 0px auto;}}

.concept_text03 h4{
  margin: 0px auto 30px;
  font-size: 2.0em;
  background: #feeb3b;
  color: #333;
  font-weight: bold;
  padding: 30px 0;
  text-align: center;
}

.concept_text03 ul{
background: #efefef;
padding: 10px;
}

.concept_text03 ul > li{
    font-size: 1.5em;
    margin: 0 0 10px;
    font-weight: bold;
}

.c03-f-b{
  width: 100%;
  background: url(./images/image018.jpg) 50% 0;
  background-repeat:repeat;
  /*background-attachment: fixed;*/
  background-size: cover;
  margin: 0 auto 30px;
  height: 500px;
}
@media only screen and (max-width:768px){
.c03-f-b{
        width:100%;
        background-position: 50% 30%!important;
        max-width: 800px;
        height: 300px;}}

/*アコーディオンコンテンツ*/
.agingcare_box {
    margin: 50px 0;
    padding: 0;
    width: calc(98% / 3);
    display: inline-block;
    vertical-align: top;
}
@media only screen and (max-width:768px){
  .agingcare_box{
    width: auto;
    display:block;
  }
}

/*ボタン装飾*/
.agingcare_box label {
    padding: 10px;
    font-weight:500;
    border: solid 1px #333;
    cursor :pointer;
    background: #fff;
}

/*ボタンホバー時*/
.agingcare_box label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.agingcare_box input {
    display: none;
}

/*中身を非表示にしておく*/
.agingcare_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.agingcare_box input:checked ~ .hidden_show {
    padding: 20px 0 0;
    height: auto;
    opacity: 1;
}


/****concept_block コンセプトテキスト部分 ***/


.mg_l_a{
  margin-left: auto;
}
.mg_r_a{
  margin-right: auto;
}
.mg_0_a{
  margin: 0 auto;
}

.concept_box{
  width: 98%;
  margin: 0 auto 30px;
  background: #fff;
}
@media only screen and (max-width:768px){
.concept_box{
    margin-bottom: 30px;
  } }

@media only screen and (max-width:425px){
  .concept_box{
    width: 96%;
    } }

.concept_box2{
  width:45%;
  max-width: 400px;
  /*background: #fff;*/
  font-size: 1.3em;
  margin:0 10px 0
}
@media only screen and (max-width:768px){
.concept_box2{
  width: 45%;
  } }
@media only screen and (max-width:425px){
  .concept_box2{
    width: 94%;
    margin-bottom: 30px;
    } }


/*** concept_box内テキストinner ***/

.box_text_inner{
padding: 15px;
}
@media only screen and (max-width:480px){
  .box_text_inner{
padding: 8px;
    }}


/*** コンセプトフロントコンテンツイメージ ***/

.concept-fig{
  text-align: center;
  margin:0 0 50px;
}
@media only screen and (max-width:480px){
.concept-fig{
  margin:0 0 20px;
    }}

.concept-fig img{
  width:100%;
  transition: 0.5s ease-in;
}


.concept-fig2{
  text-align: center;
  margin: 0px auto;
  padding: 0 50px 0 0;
  width: 33.3%;
  min-width: 300px;
}
@media only screen and (max-width:600px){
.concept-fig2{
  width: 100%;
  padding:0;
  min-width:initial;
    }}

.concept-fig2 img{
  width:100%;
  transition: 0.5s ease-in;
  box-shadow: 10px 10px 10px -5px #999;
}


.concept-fig3{
  text-align: center;
  margin: 0 0 30px;
}

.concept-fig3 img{
  width:100%;
  transition: 0.5s ease-in;
}

.concept_box a:hover img,.concept_box2 a:hover img{
  -moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}

.concept_box a{
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  color: #2b2b2b;
}


/* --------------------------------------
page-concept
--------------------------------------- */

#concept-contents{
  /*background: #f9f5d3;*/
  padding: 50px 0;
}
@media only screen and (max-width:768px){
  #concept-contents{padding: 120px 0 30px;}
}

.concept-title h3{
  position: relative;
  padding: 0.5em;
  background: #24ae85;
  max-width: 800px;
  font-size: 1.8em;
  color: #fff;
  margin: 0 auto 30px;
  margin: 10px;
  font-weight: bold;
}
@media only screen and (max-width:768px){
  .concept-title h3{font-size: 1.7em;}
}
@media only screen and (max-width:425px){
  .concept-title h3{font-size: 1.4em;}
}

.concept-title h3:before{
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 12px transparent;
border-right: solid 25px rgb(6, 83, 60);
}

.mainimg{
  width: 100%;
  margin: 0;
}

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

.aligncenter{
  text-align: center!important;
}

/*コンセプトコンテンツ内見出しデザイン*/


/* --------------------------------------
 #CHILL RECRUIT
--------------------------------------- */

#recruit{
padding:0 0 3em;
background: #efefef;
-webkit-backface-visibility:hidden;
}


.recruit_head{
margin:0 0 20px;
position: relative;
height: 200px;
background: #000;
}

.recruit_headr::before{
  position: absolute;
  content: '';

}

.recruit_head h2{
  position: absolute;
    color:#fff;/*文字は白に*/
    font-weight: bold; /*太字に*/
    font-size: 3.0em;/*サイズ2倍*/
    font-family:IMPACT;/*Google Font*/
    position: absolute;
    line-height: 1.5;
    text-align: center;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
}


.recruit_container{
  max-width: 1200px;
  margin: 0 auto;
  width: 94%;
}


#recruit p{
	text-align: center;
  font-size:1.4em;
}

@media screen and (max-width: 480px){
	#recruit p{
		text-align: left;
    font-size:1.4em;
	}
}

.left_box{
	width: 45%;
	/* float: left; */
	display: inline-block;
	vertical-align: top;
	margin: 0 10px 0;
}
@media screen and (max-width: 768px){
	.left_box{
		width: 100%;
		display:block;
		margin:10px auto;
	}
}

.right_box{
	width: 45%;
    /* float: right; */
    display: inline-block;
    vertical-align: top;
		margin: 0 10px 0;
}
@media screen and (max-width: 768px){
	.right_box{
		width: 100%;
		display:block;
		margin:10px auto;
	} }

#recruit h3{
	/*border-bottom: 1px solid #333;*/
	    max-width: 450px;
	    width: 100%;
	    text-align: center;
	    margin: 20px auto;
			font-size:2.0em;
}

@media screen and (max-width: 768px){
	#recruit h3{
	font-size:1.8em;
	} }



.recruit_box{
text-align: center;

}

.recruit_box dt{
	max-width: 320px;
	    border: 1px solid;
	    padding: 5px;
	    background: #fff;
	    margin: 0 auto;
      font-size:1.4em;
}
@media screen and (max-width: 480px){
	.recruit_box dt{
    font-size:1.3em;
	}
}

.recruit_box dd{
margin: 10px 0;
font-size:1.4em;
}
@media screen and (max-width: 480px){
	.recruit_box dd{
    font-size:1.3em;
	}
}

.qa_box {
	padding: 0;
	max-width: 800px;
	width: 100%;
	margin: 0 auto 2em;
	text-align: center;
}

/*ラベル*/
.qa_box label {
  display: block;
      margin: 1.5px 0;
      padding: 20px 33px 20px 20px;
      color: #fff;
      font-weight: bold;
      background: #000;
      cursor: pointer;
      transition: all 0.4s;
      font-size:1.8em;
      text-align: left;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
}
@media only screen and (max-width:544px){
  .qa_box label {
    font-size:1.4em;
    padding: 13px 33px 13px 13px;
  }
}


/*ラベルホバー時*/
.qa_box label:hover {
  background: #1970a9ed;
}

/*チェックは隠す*/
.qa_box input {
    display: none;
}

/*中身を非表示にしておく*/
.qa_box .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.4s;
    font-size:1.4em;
    text-align: left;

}

.qa_box .accshow dt{
margin-bottom:10px;
}

.qa_box .accshow dd{
margin: 0;
}



/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 10px;
    background: #fbfbfb;
    opacity: 1;

}

.accbox .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    padding: 0 10px;
}


/* --------------------------------------
  店舗情報
--------------------------------------- */

#storeinfo{
padding:60px 0;
background: #fff;
background-image: url(./images/bg03.jpg);
background-size: cover;
background-position: 50% 50%;
background-attachment: fixed;
position: relative;
z-index: 11;
}

.storeinfo_heading{
  color: rgb(255, 255, 255);
  font-size: 5vw;
  letter-spacing: 2px;
  line-height: 1.2;
  word-break: break-all;
  font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
  text-align: center;
  padding: 0px;
  margin: 0 0 60px;
  text-shadow:0px 0px 10px #000;
  z-index: 2;
}

.storeinfo-container{
  width:100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  display: -webkit-flex;
  align-items: flex-start;
  max-width: 800px;
}
@media only screen and (max-width:767px){
.storeinfo-container{
    display:block;
    padding: 0 10px;
  } }

/***店舗情報左***/

.shopinfo{
width: 100%;
}
@media only screen and (min-width:767px){
.shopinfo{
  width: calc(100% - 4rem);
  margin: 0 2rem;
  } }

#storeinfo table {
  width: 100%;
  font-size: 1.6em;
  position: relative;
  z-index: 2;
  color: #333;
  }
  @media only screen and (max-width:768px){
    #storeinfo table{
      width: 100%;
      font-size: 1.4em;
      margin: 0 auto;
    } }

  #k2-si table{
    position: relative;
  }

/*#k2-si table::before{
  font-size: 1.6rem;
  position: absolute;
  top: -15px;
  left: 10px;
  padding: 7px 10px;
  content: '7/4 NEW OPEN';
  color: #fff;
  background: rgb(177 48 25 / 96%);
  font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
}*/

#storeinfo th {
  padding: 10px 5px;
  font-weight: normal;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  background: #030303;
  display: block;
}

#storeinfo td {
  text-align: left;
  padding: 10px 20px;
  vertical-align: top;
  background: #fff;
  display: block;
}

#storeinfo a{
color: #337eba;
}

#storeinfo a:visited{
color:#7400a0;
}

.map_container{
  margin: 0 auto;
}
@media only screen and (max-width:768px){
.map_container{
    width: 100%;
  } }

.map_container h3{
  background: #030303;
  padding: 10px;
  font-size: 1.6em;
  margin: 10px 0;
  color: #fff;
  text-align: center;
}
@media only screen and (max-width:600px){
  .map_container h3{font-size: 1.4em;}
}

.storeimage{
text-align: center;
}

.storeimage img{
width: 94%!important;
margin: 0 20px;
}
@media only screen and (max-width:768px){
  .storeimage img{
    width: 94%!important;
    margin: 0 auto;
  } }

.gmap {
width:100%;
margin: 0 auto;
}

.gmap iframe,
.gmap object,
.gmap embed {
display:block;
margin:0 auto;
}


.shop-images{
  width: 100%;
  margin: 2em 0;
}

.shop-images img{
  width: 100%;
}

.shop-images h3{
  font-size: 2.0em;
  margin:30px 0;
  text-align: center;
  color: #fff;
  text-shadow: rgb(0, 0, 0) 0px 0px 10px;
  font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
}

.shop-design{
margin: 0 0 2em;
}

.shop-design h4{
  font-size: 1.8em;
  margin: 30px 0 0;
  text-align: center;
  color: #fff;
  text-shadow: rgb(0 0 0) 0px 0px 10px;
  font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
  background: #000;
  padding: 10px 0;
}

.shop-design-text{
  background: #fff;
  padding: 2em 1.6em;
}

.shop-design-text p{
  font-size: 1.4em;
}



/* --------------------------------------
  系列店・多店舗紹介
--------------------------------------- */

.sister_store{
margin: 50px 0 0;
}

.sister_store_container{
  width: 94%;
  margin: 0 auto;
  max-width: 1200px;
}

.sister_store h3{
  font-size: 2.0em;
  text-align: center;
  margin: 0 0 50px;
  background: #fff;
  padding: 20px;
}

.sister_store h4{
  margin: 0 0 20px;
  font-size: 1.3em;
  border-bottom: 1px dashed;
  padding: 0 0 5px;
}


.sister_store_box{
position: relative;
}

.sister_store_img{
width: 100%;
}

.sister_store_img img{
width: 100%;
}

.sister_store_text{
background: rgba(255, 255, 255, 0.9);
padding: 20px;
position:relative;
z-index: 2;
margin: -150px 0 50px auto;
max-width: 600px;
z-index: 5;
}
@media only screen and (max-width:768px){
.sister_store_text{
margin: -30px auto 50px;
  } }
@media only screen and (max-width:480px){
.sister_store_text{
padding: 20px;
margin: 0px auto 50px;
  } }

.sister_store_text p{
  font-size:1.2em;
}



/***矢印アニメーション***/
.arrow_animation{
  padding-top: 70px;
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-decoration: none;
}
.arrow_animation span {
  position: absolute;
      top: 0;
      left: 50%;
      width: 50px;
      height: 50px;
      margin-left: -20px;
      border-left: 1px solid #fff;
      border-bottom: 1px solid #fff;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: sdb 2s infinite;
      animation: sdb 2s infinite;
      opacity: 0;
      box-sizing: border-box;
}
@media only screen and (max-width:480px){
  .arrow_animation span{
    width: 30px;
    height: 30px;
  } }
.arrow_animation span:nth-of-type(1) {
  top: 0;
  /* left: 12px; */
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
.arrow_animation span:nth-of-type(2) {
  top: 18px;
  /* left: 11px; */
  animation-delay: .15s;
  -webkit-animation-delay: .15s;
}
.arrow_animation span:nth-of-type(3) {
  top: 15px;
      animation-delay: .3s;
      -webkit-animation-delay: .3s;
      /* left: 12px; */
}


@-webkit-keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }

}

/* --------------------------------------
  スタッフ
--------------------------------------- */

#staff{
  padding:60px 0;
  background: #fff;
  background: url(./images/bg003.jpg) center top repeat;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-attachment: fixed;
}
@media only screen and (max-width:767px){
#staff{
padding:60px 0;
} }


.staff_heading{
color: #fff;
font-size: 5.0vw;
letter-spacing: 2px;
line-height: 1.2;
word-break: break-all;
padding: 0;
margin: 0 0 60px;
text-align: center;
font-family: 'constructa','游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, serif;
text-align: left;
z-index: 2;
text-align: center;
text-shadow: 0 0 10px #333;
}

.staff_container{
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.staff_flex{
  margin: 0 auto;
  /* -webkit-display:flex;
  display:flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px  20px;
}
/*@media only screen and (min-width:767px){
  .staff_flex{
    -webkit-flex-direction: row;
    flex-direction: row;
  } }*/

.staff-head{
  font-size: 2.0em;
  margin: 30px 0;
  text-align: center;
  color: #fff;
  text-shadow: rgb(0 0 0) 0px 0px 10px;
  font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
}

.staff-head h2{
  margin:0;
}

.staffbox{
position: relative;
width: 100%;
/* width: calc(100% / 3 - 20px); */
}



.staffbox dl{
text-align: left;
clear: both;
}

.staffbox dt{
  font-size: 1.6em;
  padding: 0;;
}

.staffbox dd{
  font-size: 1.4em;
}

.message_text{
padding:0;
}

@media only screen and (max-width:480px){
.message_text{
    text-align: left;
  } }


.staff_text{
  width:100%;
  padding:0;
  margin: 0;
  background: #fff;
  position: relative;
  height: fit-content;
  display: -webkit-box;
  display: flex;
  justify-content: center;
}

.staff_fig{
  text-align: center;
      margin: 0px auto;
      width: auto;

}
@media only screen and (max-width:600px){
  .staff_fig{
    width:100%;
    padding: 0;
  } }

.staff_fig img{
  width: 100%;
  transition: 0.5s ease-in;
}

.staffbox h4{
  margin: 1em 0 0;
  color: #fff;
  text-align: center;
  font-size: 1.4em;
}

.staff_info{
  padding: 0 0 0 2em;
}

.staff_text h4{
  font-size: 2em;
  margin: 0 0 2em;
  color: #000;
  text-align: left;
}
@media only screen and (max-width:768px){
  .staff_text h4{
    font-size: 1.8em;
  } }
@media only screen and (max-width:480px){
    .staff_text h4{
      font-size: 1.6em;
    } }

  .staff_text img{
    max-width: 200px;
    height: auto;
  }

    /*スタッフコンテンツ追加モーダル*/


    #modal-1,#modal-2,#modal-3,#modal-4,#modal-5,#modal-6{
      display: none;
    }
    #modal-1.is-open,#modal-2.is-open,#modal-3.is-open,#modal-4.is-open,#modal-5.is-open,#modal-6.is-open{
      display: block;
    }
    .modal__overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 12;
      background: rgba(0,0,0,0.6);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .modal__container {
      background-color: #fff;
      padding: 30px;
      margin-right: 20px;
      margin-left: 20px;
      width: 500px;
      border-radius: 4px;
      overflow-y: auto;
      box-sizing: border-box;
      max-height: 100vh;
    }
    .modal__close {
      width: 100%;
      max-width: 300px;
      border: 1px solid #3072b5;
      border-radius: 4px;
      text-align: center;
      padding: 12px;
      margin: 16px auto 0;
      background: #3a74af;
      color: white;
      justify-content: center;
      display: flex;
    }
    .modal__btn {
      width: 200px;
      border: 1px solid #ccc;
      border-radius: 4px;
      text-align: center;
      padding: 12px;
      margin: 16px auto 0;
      background: #4caf50;
      color: white;
    }

/* --------------------------------------
 モーダルサンプル
--------------------------------------- */
.works_item {
  list-style: none;
  position: relative;
  width: 200px;
  border-radius: 2px;
  margin: 0 auto;
  background-color: #F2F2F2;
}
.works_modal_open {
  text-align: center;
}

.works_modal_open p{
  color: #fff;
}
.works_image_mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
  cursor: pointer;
}
.mask_text {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
.works_modal_content{
  text-align: center;
}
.works_image:hover .works_image_mask {
  opacity: 1;
  padding-top: 13%;
}
/* ------works_modal css------ */
.works_modal_wrapper {
  position: fixed;
  display: flex;
  align-items: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: none;
  opacity: 0;
  z-index: -1;
  display:none;
}
.works_modal_window {
  width: 90%;
  max-width: 400px;
  max-height: 100%;
  height:auto;
  margin: auto;
  padding: 30px 30px;
  background: #fff;
  z-index: 1;
  overflow-y: hidden;
  border-radius: 5px;
}
.works_modal_mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}
.works_modal_close {
  z-index: 300;
  position: absolute;
  top: 30px;
  right: 10px;
  color: #808080;
  font-size: 1.5rem;
  cursor: pointer;
}
.works_modal_close:hover {
  color: #000;
  transition: all .5s;
}
html.is_open, body.is_open {
  overflow: hidden;
}
.works_modal_wrapper.is_open {
  animation: works_modal_wrapper_open .5s ease forwards;
  display: -webkit-flex;
  display:flex;
}
.works_modal_wrapper.is_open .works_modal_window {
  animation: works_modal_window_open .5s ease forwards;
}
.works_modal_wrapper.is_close {
  animation: works_modal_wrapper_close .5s ease forwards;
}
.works_modal_wrapper.is_close .works_modal_window {
  animation: works_modal_window_close .5s ease forwards;
}

@keyframes works_modal_wrapper_open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    z-index: 300;
  }
}
@keyframes works_modal_window_open {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes works_modal_wrapper_close {
  0% {
    z-index: 300;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes works_modal_window_close {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30px);
    opacity: 0;
  }
}



/* --------------------------------------
 メニュー
--------------------------------------- */
#menu{
background:#fff;
padding:50px 0 25px;
overflow: hidden;
}

.menu_heading{
  color: #000;
  font-size: 5vw;
  letter-spacing: 2px;
  line-height: 1.2;
  word-break: break-all;
  font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
  text-align: left;
  /* position: absolute; */
  top: inherit;
  right: 0%;
  transform: translate(5%);
  padding: 0px;
}

.menu_text_shadow{
  text-shadow: 0 0 4px #000;
}

.menu_heading::before{
  position: absolute;
  content: '';
  top: 50%;
  left: -10%;
  width: 150vw;
  height: 50%;
  background: #000;
  z-index: -1;
}

.menu_container{
    /*padding:0 0 50px;*/
    margin: 0 auto;
    text-align: center;
    width:94%;
    /*max-width: 1000px;*/
}

.menulist{

}

#menu h3{
  font-size: 2.0em;
  margin: 50px 0 25px;
  padding: 5px 0;
  width: 100%;
  text-align: center;
  line-height: 1.7;
}
@media only screen and (max-width:480px){
#menu h3{
        font-size: 1.5em;
        margin: 20px auto;
        } }

.menu_box{
  /*padding: 10px;*/
  display:block;
  margin: 0 auto;
}
@media only screen and (max-width:600px){
      .menu_box{
        /*padding: 10px;*/
        width: 96%;
        } }

#menu h4{
  font-size: 1.5em;
      padding: 10px;
      text-align: center;
}

#menu dl{
width: 45%;
margin: 0 10px 30px;
vertical-align: top;
display: inline-block;
}

@media only screen and (max-width:768px){
#menu dl{
        margin: 0px auto 20px;
        display:block;
        width: 100%;} }

#menu dt{
  font-weight: bold;
  padding: 0 0 5px;
  margin: 0 0 10px;
  text-align: left;
  font-size: 1.5em;
  border-bottom:1px solid;
}
@media only screen and (max-width:600px){
#menu dt{
        font-size: 1.3em;} }
@media only screen and (max-width:480px){
#menu dt{
        /*margin: 0px 5px 5px;*/} }
@media only screen and (max-width:340px){
#menu dt{
        } }

#menu dd{
  font-size: 1.2em;
  text-align: left;
}


#menu p{
}
@media only screen and (max-width:480px){
  #menu p{
    text-align: left;} }

.menu_alart{
  margin: 0 auto 50px;
  text-align: center;
  font-size:1.2em;
}
@media only screen and (max-width:480px){
.menu_alart{
    margin: 25px auto;} }

/*******CHILLCHAIR 会員制度紹介 CHILLMENBER CONTENTS*******/

#chillmemberprice{
  width: 94%;
  margin: 0 auto;
  /*max-width: 1000px;*/
  text-align:center;
}

#chillmemberprice dl{
  width: 30%;
  display: inline-block;
  vertical-align: top;
}
@media only screen and (max-width:768px){
#chillmemberprice dl{
        margin: 0px auto 20px;
        display:block;
        width: 100%;} }

/* --------------------------------------
  クーポン
--------------------------------------- */

#coupon{

}

.coupon_container{
  max-width: 1000px;
  margin: 30px auto;
  text-align: center;
}

.coupon_container img{
  max-width: 800px;
  width:94%;
}

.coupon_box{
  width:45%;
  display: inline-block;
  vertical-align: top;
}
@media only screen and (max-width:600px){
  .coupon_box{
    width: 98%;
    display:block;
    margin: 20px auto;
  }
}

#coupon h3{
  font-size: 1.5em;
  text-align: center;
  max-width: 800px;
  margin: 0px auto 20px;
  border: 1px solid;
  /*background: #38a885;*/
  padding: 10px;
  /*color: #fff;*/
  width: 94%;
}
.coupon h3 img{
  width:100%;
}

.coupon_block01{
  background: rgba(255, 255, 255, 0.95);
  max-width: 400px;
  padding: 10px;
  width: 94%;
  margin: -30px auto 0px;
  position: relative;
  z-index: 1;
  border:1px solid #000;
}

.coupon_block02{
  background: rgba(255, 255, 255, 0.95);
  max-width: 800px;
  padding: 10px;
  width: 94%;
  margin: -30px auto 0px;
  position: relative;
  z-index: 1;
  border:1px solid #000;
}

.coupon_block01 h4,.coupon_block02 h4{
  font-size: 1.3em;
  margin: 10px 0;
  text-align: center;
  font-weight: bold;
}

.coupon_block01 p,.coupon_block02 p{
  margin: 0 0 10px;
  font-size: 1.2em;
  text-align: left;
}


#coupon dl{
  padding: 10px;
  text-align: center;
  background: #ffffff;
  /* color: #fff; */
  margin: 0 auto 30px;
  max-width: 800px;
  /* border: 1px solid; */
  width: 94%;
}

#coupon dt{
  padding: 10px 5px;
      font-size: 1.3em;
      text-align: left;
}

#coupon dd{
  padding: 10px 5px;
      font-size: 1.3em;
      text-align: left;
}

/* --------------------------------------
product
--------------------------------------- */
#product{
  padding: 30px 0px;
}

.product_container{
text-align:center;
font-size:1.2em;
}


#product dl{
  margin: 15px 4px;
  width: 45%;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  clear: both;
}
@media only screen and (max-width:768px){
  #product dl{
    width: 98%;
  }
}

#product dt{
  font-size: 1.5em;
  /* border: 1px solid #000000; */
  text-align: center;
  padding: 5px;
  float: left;
  margin: 0 0 20px;
  font-weight: bold;
}

@media only screen and (max-width:1200px){
  #product dt{
    float: none;
  }
}

#product dt img{
  max-width: 300px;
  width: 94%;
  padding: 10px;
}

@media only screen and (max-width:1200px){
  #product dt img{
    max-width: 200px;
  } }

#product dd{
padding: 5px 0;
/*background: #fff;*/
text-align: left;
}


#product h3{
  font-size: 1.5em;
      margin: 30px auto;
      font-weight: bold;
      background: #be528f;
      color: #fff;
      padding: 10px 0;
      width: 94%;
      max-width: 650px;
}
@media only screen and (max-width:480px){
  #product h3{
    font-size: 1.2em;} }

#product h4{
  font-weight: bold;
  padding: 10px 0 15px;
  font-size: 1.5em;
  background: #FFEB3B;
}

#product p{
font-size: 16px;
padding: 5px;
/*text-align: left;*/
}
@media only screen and (max-width:480px){
  #product p{
    font-size: 14px;
    text-align: left;} }


/* --------------------------------------
 スタイル
--------------------------------------- */

#style{
  width: 100%;
  margin: 0 auto;
  /* color: #fff; */
  background: #f5e12f;
  padding:25px 0;
  overflow: hidden;
  /*background: url(./images/bg05.png);*/
}


#style img{
width: 100%;
}

.style_heading{
font-size: 5.0vw;
margin: 1em 0;
letter-spacing: 2px;
line-height: 1.2;
word-break: break-all;
padding: 0;
text-align: center;
font-family: 'constructa','游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, serif;
text-align: left;
transform: translate(3%);
text-shadow: 3px 4px 0 #333;
color: #fff;
}

.hair_style_gallery{
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 1em;
}

.hair_style_gallery img{
  width: 100%;
}

.hair_style_gallery h3{
  text-align: center;
  margin: 0 0 20px;
  font-size: clamp(1.4em,3vw,1.6em);
  color: #000;
}

.hair_style_gallery p{
  font-size: 1.3em;
}
/*@media only screen and (max-width:480px){
  .style_art_gallery_box h3{
    font-size: 1.5em;} }
@media only screen and (max-width:380px){
      .style_art_gallery_box h3{
        font-size: 1.3em;} }*/

.style_box{
  width: calc(100% / 4);
  padding: 0 1em;
  margin:0 0 1em;
}
@media only screen and (max-width:600px){
  .style_box{
    width: calc(100% / 2);
    padding: 0 0.6em;
  }
}

.hair_style_gallery .slider-style{
text-align: center;
}

.hair_style_gallery li a img{
  transition:0.5s;
}

.hair_style_gallery li a img:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
}

.style_alart{
  border-top:1px solid #000;
  border-bottom:1px solid #000;
  padding: 2em 1em 1em;
  margin: 1em auto;
  max-width: 1200px;
  text-align: center;
  font-size: 1.3em;
}

.style_container{
/*max-width: 1000px;*/
text-align:center;
margin: 0 auto;
}



.style_container h3{
  text-align: center;
  margin:80px 0 50px;
  font-family: myfont;
  font-size: 4em;
  letter-spacing: 0.2em;
  color: #000;
}
@media only screen and (max-width:480px){
  .style_container h3{
    font-size: 2.5em;} }
/*@media only screen and (max-width:380px){
    .style_container h3{
        /font-size: 1.3em;} }*/


.staff_style_box h4{
          text-align: center;
          margin: 50px auto 20px;
          font-family: myfont2;
          font-size: 2.5em;
          letter-spacing: 0.2em;
          background: #333;
          max-width: 800px;
          padding: 10px 0;
          width:94%;
          line-height: 2.0;
      }
@media only screen and (max-width:768px){
.staff_style_box h4{
      font-size: 2.0em;} }
@media only screen and (max-width:480px){
.staff_style_box h4{
      font-size: 1.3em;} }

.staff_style_box h5{
  font-size: 1.3em;
  margin: 0 0 5px;
}

.style_text{
  font-size: 1.2em;
  background: rgba(255, 255, 255, 0.95);
  margin: -30px 0 0!important;
  padding: 10px;
  z-index: 1;
  position: relative;
  border: 1px solid #777;
  border-radius: 5px;
}

#style a{
cursor: pointer;
}



/* --------------------------------------
 お客様の声
--------------------------------------- */

#customervoice{
background:#fff;
padding: 25px 0 0;
width:100%;
margin:0 auto;
position: relative;
overflow: hidden;
}


#customervoice img{
  width: 100%;
  height: auto;
  vertical-align: top;
}


.voice_heading{
  color: rgb(255, 255, 255);
    font-size: 5vw;
    letter-spacing: 2px;
    line-height: 1.2;
    word-break: break-all;
    font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
    text-align: left;
    position: absolute;
    top:11%;
    right: 7%;
    transform: translate(10%);
    padding: 0px;
    z-index: 2;
}
@media only screen and (max-width:767px){
.voice_heading{
      top:3%;} }



.voice_heading::after{
  position: absolute;
    content: '';
    top: 0;
    left: -3%;
    width: 100vw;
    height: 100%;
    background: #000;
    z-index: -1;
}


.voice_catch{
  width: 66.6%;
  margin: 3% 0 3% -15%;
  position: relative;
  z-index: 1;
}

.voice_container{
text-align:center;
/*margin: 0 20px;*/
}
@media only screen and (max-width:600px){
.voice_container{
    margin:30px 0 0;} }

#voice_slider h3{
font-size:1.5em;
}

#voice_slider p{
font-size:1.2em;
}

.VoiceSlideContainer{
margin: 50px auto;
}

.VoiceSlideContainer ul li{
  padding: 0 5px;
}


/* --------------------------------------
 Q&A コンテンツ 2022/06/11 追加
--------------------------------------- */

.qa_heading{
  color:#fff;
  font-size: 5.0vw;
  letter-spacing: 2px;
  line-height: 1.2;
  word-break: break-all;
  padding:0;
  text-align: center;
  font-family: 'constructa','游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, serif;
  text-align: center;
  text-shadow: 0 0 4px #c0c0c0;
  z-index: 2;
  margin: 1.6em 0;
  }
  


.qa_container{
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

.acd-check{
  display: none;
}
.acd-label{
  background: linear-gradient(#d2619a,#d4477e);
  background: -webkit-linear-gradient(#d2619a,#d4477e);
  color: #fff;
  display: block;
  margin-bottom: 1px;
  padding: 20px;
  position: relative;
  font-size:18px;
  border-radius: 2px;
  box-shadow: 0 0 15px 3px #efefef;
  font-weight: bold;
  z-index: 2;
}
@media only screen and (max-width:544px){
.acd-label{
font-size:12px;
padding: 10px 35px 10px 25px;
}
}

.acd-label:after{
  box-sizing: border-box;
  content: '\f067';
  font-weight: bold;
  display: block;
  font-family: "Font Awesome 5 Free";
  padding: 14px 8px;
  position: absolute;
  right: 0;
  top: 0px;
}
@media only screen and (max-width:544px){
  .acd-label:after{
  font-size:12px;
  padding: 10px 15px;
  }
  }
.acd-content{
  font-size:16px;
  background: #fff;
  display: block;
  height: 0;
  opacity: 0;
  padding:20px;
  transition: .5s;
  visibility: hidden;
  box-shadow: 0 0 15px 3px #efefef;
  position: relative;
  text-align: left;
}
@media only screen and (max-width:544px){
  .acd-content{
  font-size:12px;
  padding:10px;
  }
  }

.acd-content::first-letter{
  font-size: 18px;
  padding:0 0.5em 0 0;
}

.acd-content ul > li{
  margin:0.5em 0;
  color: #e54646;
  font-weight: bold;
}

.acd-check:checked + .acd-label:after{
  font-family: "Font Awesome 5 Free";
  content: '\f068';
  font-weight: bold;
}
.acd-check:checked + .acd-label + .acd-content{
  height: 100%;
  opacity: 1;
  padding: 20px;
  visibility: visible;
  margin: 1em 1em;

}


/* --------------------------------------
  ブログ トピックス
--------------------------------------- */

#blog{
  /*color:#fff;*/
  background: -webkit-linear-gradient(45deg, #0f3973, #033143);
  background: linear-gradient(45deg, #0f3973, #033143);
  padding:60px 0;
  background-size: cover;
  background-attachment: fixed;
}
@media only screen and (max-width:544px){
#blog{
    padding: 0 0 25px;
  }
}

.blog_heading{
  color: #fff;
    font-size: 5.0em;
    letter-spacing: 2px;
    word-break: break-all;
    /* padding: 1rem 0.5rem; */
    padding: 30px 0;
    text-align: center;
    font-family: 'constructa','游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, serif;
}
@media only screen and (max-width:767px){
.blog_heading{
    font-size: 5.0vw;
  }
}

.blog_heading h2{
  line-height: 1.2;
  margin: 0;
}


#breadcrumb{
  padding: 7px;
  margin:0;
}

#breadcrumb a{
  color: #fff;
}

.breadcrumb_inner{
max-width: 1200px;
margin: 0 auto;
width: 90%;
color: #fff;
}

#breadcrumb2{
  /* width: 100%; */
  max-width: 1000px;
  padding: 0 5px 5px;
  border-bottom: 1px dashed #aaa;
}

#breadcrumb3{
  max-width: 970px;
  padding: 5px 0;
  margin: 0 auto 10px;
  width: 96%;
  color: #fff;
}

#breadcrumb3 a{
  color: #fff;
}


.blog_container{
  position: relative;
  width: 94%;
  margin: 0px auto;
  box-sizing: border-box;
  text-align: center;
  overflow: scroll;
  height: 150px;
  margin:0px auto;
  border: 1px solid #ccc;
  max-width: 1000px;
  background: #fff;
  border-radius: 10px;
}
@media only screen and (max-width:544px){
.blog_container{
    height: 150px;
    margin:0px auto;
  }
}

.blog_article{
  width: 100%;
  display: block;
  margin: 15px 0 0;
  border-bottom: 1px dashed #ddd;
  padding: 0 0 15px;
}

.blog_thumb{
  float: left;
      width: 100%;
      margin: 0 0 0 20px;
      padding: 0 30px 0 0;
      max-width: 150px;
}
@media only screen and (max-width:480px){
  .blog_thumb{
    padding: 10px;
    max-width: 100px;
    margin: 0 auto;
  }
}

.blog_thumb img{
  width: 100%;
  height: auto;
}
@media only screen and (max-width:480px){
  .blog_thumb img{
    width: 100%;
    height: auto;
  }
}

.blog_content_inner{
  /*padding: 10px;*/
      /* border: 1px solid; */
  float: left;
  width: 60%;
  }
@media only screen and (max-width:768px){
  .blog_content_inner{
    width: 55%;
  }
}
@media only screen and (max-width:600px){
  .blog_content_inner{
    width: 45%;
  }
}
@media only screen and (max-width:480px){
  .blog_content_inner{
    width: 60%;
    margin: 0 auto;
  }
}

h3.blog_title{
  font-size: 1.5em;
  color: #1551b1;
  margin: 0 0 5px;
  text-align: left;
  /*padding: 5px;*/
  /* max-width: max-content; */
}
@media only screen and (max-width:480px){
  h3.blog_title{
    margin: 0;
  padding: 10px 0;
  }
}

.blog_title a{
  color:#000;
}

.blog_title a:link{
  color:#999;
}

.blog_meta{
  text-align: left;
  display: -webkit-flex;
  display: flex;
}

.blog_meta p{
  background: #eee;
  padding: 3px;
  margin: 0 5px 0 0;
  max-width: max-content;
}

.blog_excerpt{
  text-align: left;
  margin: 10px 0;
}
@media only screen and (max-width:380px){
  .blog_excerpt{
    margin: 5px 0; } }
.blog_excerpt a{
color:#333;
}

/************************
  slick ブログ用 css
************************/

.slick-slider{
  margin-bottom:0;
}

.slick-prev{
  left: 0!important;
  z-index: 2;
  position: relative;
}

.slick-prev:before{
  content:'\f104'!important;
  font-family:"Font Awesome 5 Free"!important;
  font-weight: bold;
  color: #fff!important;
}

.slick-next{
  right:0!important;
  z-index: 2;
  position: relative;
}

.slick-next:before{
  content:'\f105'!important;
  font-family:"Font Awesome 5 Free"!important;
  font-weight: bold;
  color: #fff!important;
}

.slick-dots li.slick-active button:before{
  color:#fff!important;
}

.slick-dots li button:before{
  color:#fff!important;
}

.slick-slide {
  position: relative;
}

.slick-slide .caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: calc(100% - 40px);
  padding: 20px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transition: .3s ease;
}
.slick-current .caption {
  opacity: 1;
  transition-delay: .5s;
}

.owned{
  text-align: center;
  margin: 30px auto 0;
  max-width: 1000px;
  width: 94%;
}

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


/************************
    single.php用 css
************************/


.single_container{
  display:block;
  width: 100%;
  justify-content: space-around;
  margin: 0px auto;
  max-width: 1200px;
  padding:150px 20px 80px;
}
@media only screen and (min-width:1200px) {
.single_container{
  display: flex;
  width:100%}}
@media only screen and (max-width:600px) {
  .single_container{
    padding:100px 0 60px;
    }}

@media only screen and (max-width: 1200px){
.single_container:before{
content: "";
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
background: url(./images/bg001.jpg) center top repeat-y;
background-size: cover;
} }


#blog_entry{
  /*background:url(./images/chillback_01.jpg) 50% 50%;
  background-size: cover;*/
  /*padding: 50px 0 50px;*/
}

.entry_container{
  max-width: 1000px;
  width: 94%;
  margin: 0px auto;
  padding: 30px;
  background: #fff;
  box-sizing: border-box;
  /* float: left; */
  border: 2px solid #eee;
}

@media only screen and (max-width:768px){
.entry_container{
  margin:0 auto;
  border:none;
} }


@media only screen and (max-width:600px){
.entry_container{
  padding:10px;
} }

h1.entry_title{
  font-size: 2.6em!important;
  margin: 13px 0!important;
  float: none;
}

h1.entry_title a{
color:#333;
}

.meta_entry{
  padding: 5px;
}

.meta_entry p{
  float:left;
  margin: 0 10px 0 0!important;
  font-size:14px;
}

.blog_head{
  clear:both;

}

.blog_header{
  text-align:center;
}

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

.entry{
  font-size: 1.2em;
  margin: 10px auto;
}

.entry img{
  max-width:100%;
  height:auto;
}

@media only screen and (max-width:768px) {
.entry img{
  max-width:100%; } }

.cat{
  background:#000;
  padding: 5px;
}

.cat a{
  color:#fff;
}

.nav_links{
  text-align: center;
      font-size: 1.5em;
      margin: 70px 0 0;
}

.prev_link a{
  width: 45%;
  max-width: 200px;
  float: left;
  display: block;
  padding: 3px;
  background:#333;
  color: #fff;
  /*box-shadow: 2px 2px 3px #444444;}*/
  transition: 0.5s ease-in-out;
  font-weight: bold;
}
@media only screen and (max-width:600px) {
.prev_link a{
  width: 100%;
max-width: 250px;
float:none;
display: block;
padding: 3px;
background:#333;
color: #fff;
/* box-shadow: 2px 2px 3px #444444; */
margin: 10px auto; } }

.next_link a{
  width: 45%;
  max-width: 200px;
  float: right;
  display: block;
  padding: 3px;
  background:#333;
  color: #fff;
  transition: 0.5s ease-in-out;
  /*box-shadow: 2px 2px 3px #444444;*/
  font-weight: bold;
}
@media only screen and (max-width:600px) {
.next_link a{
  width: 100%;
max-width: 250px;
float:none;
display: block;
padding: 3px;
background: #333;
color: #fff;
/* box-shadow: 2px 2px 3px #444444; */
margin: 10px auto; } }


.prev_link a:hover,.next_link a:hover{
  box-shadow: 1px 1px 2px #ececec;
}

/************************************
** サイドバー（Sidebar）・ウィジェットなど
************************************/

#sidebar{
  /*width: auto;*/
  background: #fff;
  display: block;
  height: max-content;
  max-width: 1000px;
  border: 1px solid #ddd;
  padding: 10px 10px;
  width: 94%;
  margin: 20px auto 0;
  position: relative;
  z-index: 11;
}

@media only screen and (min-width:1200px) {
#sidebar{
  width: 94%;
  max-width: 320px;
  min-width:320px;
  margin: 0 0 0 20px;
  }}
@media only screen and (max-width:768px) {
  #sidebar{
    border:none;
    }}


#sidebar .widget_categories{

}

#sidebar h3{
  margin-bottom: 10px;
  font-size: 18px;
  background: #000;
  padding: 5px 7px;
  color: #fff;
}
#sidebar .widget{
  margin-bottom: 25px;
  /*padding: 30px;*/
  background: #fff;
}

.widget_search{
  margin-bottom: 0;
}

#sidebar ul,
#sidebar ol,
.widget-over-article ul,
.widget-over-article ol,
.widget-under-article ul,
.widget-under-article ol,
.widget-over-sns-buttons ul,
.widget-over-sns-buttons ol,
.widget-under-sns-buttons ul,
.widget-under-sns-buttons ol{
  padding-left: 1em;
  list-style:none;
}

#sidebar ul.snsp,
#main ul.snsp,
#footer ul.snsp{
  padding-left: 0;
}

.widget-over-article{
  margin-top: 10px;
  margin-bottom: 10px;
}

#sidebar-recent-posts li,
#sidebar-popular-posts li{
  margin:20px 0;
}

#sidebar li{
  margin-bottom: 8px;
  font-size:16px;
}

.sidebar-thumbnail-box{
  float: left;
  width: 75px;
}

.sidebar-recent-posts-title{
  float: right;
  width: 165px;
}
  #sidebar-recent-posts h3,
  #sidebar-recent-posts p,
  #sidebar-popular-posts h3,
  #sidebar-popular-posts p{
    margin: 0;
  }

#main .widgets{
  margin-top: 20px;
  margin-bottom: 20px;
}

#sidebar .widget_category_sns_follow_buttons ul,
.widget_category_sns_follow_buttons ul{
  padding-left: 0;
}

.widget_text ul {
  list-style-type:  disc;
}
.widget_text ol {
  list-style-type:  decimal;
}

/************************************
** 新着記事・人気記事（new, pupular）
************************************/
.widget_new_entries,
.widget_new_popular,
.widget_popular_ranking{
  line-height:150%;
}

.widget_new_entries h4,
.widget_new_popular h4,
.widget_popular_ranking h4{
  margin-bottom:15px;
}

#main .widget_new_entries ul,
#main .widget_new_popular ul,
#main .widget_popular_ranking ul,
#sidebar .widget_new_entries ul,
#sidebar .widget_new_popular ul,
#sidebar .widget_popular_ranking ul,
#footer .widget_new_entries ul,
#footer .widget_new_popular ul,
#footer .widget_popular_ranking ul {
  padding-left:0;
  list-style:none;
}

.widget_new_entries ul li,
.widget_new_popular ul li,
.widget_popular_ranking ul li {
  clear: left;
  float: none;
  margin-bottom:10px;
/*  overflow: auto;
  zoom: 1;*/
}

.widget_new_entries ul li img,
.widget_new_popular ul li img,
.widget_popular_ranking ul li img {
  border: medium none;
  display: inline;
  float: left;
  margin-top: 3px;
  margin-right: 5px;
  width: 75px;
  height: 75px;
  margin-bottom: 10px;
}

span.wpp-views{
  font-size:x-small;
  font-style:italic;
}

/************************************
** 新着記事・人気記事（拡張）
************************************/
.widget_new_entries .new-entrys-large .new-entry,
.widget_new_popular .popular-entrys-large .popular-entry,
.widget_new_popular .new-entrys-large .new-entry,
.widget_new_popular .popular-entrys-large .wpp-list li,
.widget_popular_ranking .popular-entrys-large .popular-entry,
.widget_popular_ranking .popular-entrys-large .wpp-list li{
  margin-bottom:15px;
  line-height:120%;
  position:relative;
  display:block;
  max-width: 440px;/*これを書いておかないと、タイトル部分がはみ出す*/
  overflow: visible;
}

.widget_new_entries .new-entrys-large .new-entry img,
.widget_new_popular .popular-entrys-large .popular-entry img,
.widget_new_popular .new-entrys-large .new-entry img,
.widget_new_popular .popular-entrys-large .wpp-list li img,
.widget_popular_ranking .popular-entrys-large .popular-entry img,
.widget_popular_ranking .popular-entrys-large .wpp-list li img{
  width:100%;
  float:none;
  margin:0;
  display:block;
  margin-bottom:5px;
  min-height: 180px;
  max-width: 440px;/*iPhone6は幅が414pxなのでそれより大きく*/
  max-height: 240px;
  height: auto;
}


/************************************
** タグクラウド
************************************/

.tagcloud a{
  padding-left: 1rem;
  margin-bottom: 8px;
  font-size: 16px!important;
}



/************************
    home.php用 css
************************/

#home-contents{
  padding: 0;
  background: rgb(0 0 0 / 80%);
}

.home_container{
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding:50px 0 0;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
justify-content: center;
}

.page-blog-header{
  position: relative;
  background: url(./images/page-head.jpg) 50% 50% no-repeat;
  background-size: cover;
  min-height: 160px;
}

.page-blog-header::before{
  position: absolute;
  content: '';
  background: #000;
}

.page-blog-header h2{
  position: absolute;
  color: #fff;
  font-weight: bold;
  font-size: 24px;
  position: absolute;
  line-height: 1.5;
  text-align: center;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin: 0;
  padding: 0;
  font-family: 'constructa', sans-serif;
  width: 100%;
}

.page-blog-header img{
  width:100%;
  height:auto;
}

.home_heading h3{
color: #fff;
font-size: 2.2em;
text-shadow: 0 0 7px #999;
text-align: center;
margin: 50px 0 30px;
}

.home_contents_box{
  padding: 5px 5px 5px;
  box-shadow: 1px 1px 4px #aaa;
  background: #fff;
  /* max-width: 320px; */
  width: calc(100% / 2 - 2em);
  margin: 1em;
  height: fit-content;
}

@media only screen and (max-width:480px) {
  .home_contents_box{
    width: 100%; } }

.home_contents_box a{
  color: #000;
}

.home_content_inner{
background: #fff;
padding: 0;
width: 100%;
}

.home_contents_title{
  font-size: 1.4em;
  /* font-weight: bold; */
  background: #000;
  padding: 7px 10px;
  margin: 5px 0;
  text-align: left;
}

.home_contents_title a{
color: #fff;
}

.home_thum{
width: 100%;
}

.home_thum img{
width: 100%;
height: auto;
vertical-align: bottom;
}

.home_contents_meta{
  padding: 5px;
}

.home_contents_date{
  border: 1px solid #333;
    padding: 5px;
    margin: 2px;
}

.home_contents_cat{
padding: 5px;
margin: 2px 0;
background: #ddd;
border: 1px solid #eee;
}

.home_contents_entry{
  width:100%;
}


.home_contents_entry p{
  padding: 5px;
  text-align: left;
}

.home_alart{
padding:0;
margin: 0 auto;
}

.home_alart p{
  font-size: 16px;
  margin: 0 0 1em;
  color: #fff;
}

.owend_box,.blog_box{
max-width: 1000px;
margin: 0 auto;
padding:0 10px;
}

.owend_box img{
  width: 100%;
}

.owend_box figcaption{
  color: #fff;
  font-size: 12px;
  text-align: center
}


/**** home.php用 css ここまで ****/


/*archive.php用 css */

#contents{
  padding: 0px 0 20px;
  background: rgb(50 55 60 / 80%);
}


.arc_container{
  width:94%;
  max-width:1000px;
  margin:50px auto;
  text-align: center;
}

.arc_head{
  background:url(./images/arc-header.jpg) 50% 50%;
  background-size:cover;
  height:300px;
  position:relative;
}


.arc_head h2{
  position: absolute;
    color:#fff;/*文字は白に*/
    font-weight: bold; /*太字に*/
    font-size: 36px;/*サイズ2倍*/
    /*font-family:IMPACT;/*Google Font*/
    position: absolute;
    line-height: 1.5;
    text-align: center;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
}
@media only screen and (max-width:480px){
.arc_head h2{
font-size: 26px;
} }


.arc_box{
  margin: 0 0 15px;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  min-height: 90px;
  padding: 10px 8px 10px;
  box-shadow: 1px 1px 2px #999;
  background: #fff;
}

@media only screen and (max-width:768px){
  .arc_box{
    /*margin:10px 0;*/
  } }

  @media only screen and (max-width:480px){
    .arc_box{
      /*width: 90%;*/
      /*margin: 20px auto;*/
      /*display:block;*/
    } }

.arc_box a{
  color:#000;
}

.arc_title{
  font-size: 1.5em;
  /*font-weight: bold;*/
  background:#000;
  padding: 5px 3px;
}
@media only screen and (max-width:480px){
  .arc_title{
    font-size: 14px;
  } }

.arc_title a{
  color: #fff;
}

.arc_inner{
  background: #fff;
  padding:0;
  width: 98%;
  padding: 0 0 0 10px;
}

.entry_meta{
  padding: 5px;
  text-align: left;
  /*display: flex;
  justify-content: center;*/
}

.entry_meta .date{
    margin: 2px 0;
    padding: 5px;
    background: #f5f5f5;
    display: inline-block;
}

.date_box{
 border:1px solid #333;
 padding:5px;
 margin: 2px;
 display: inline-block;
}

.arc_cat{
  padding: 5px;
  /*display: block;*/
  margin: 2px 0;
  background: #ddd;
  display: inline-block;
}

.entry_content{
  width:100%;
  padding: 0 5px;
}
@media only screen and (max-width:480px){
  .entry_content{

  } }

.arc_thum{
max-width: 200px;
width: 100%;
}
@media only screen and (max-width:600px){
  .arc_thum{
    max-width:100px;
  } }

.arc_thum img{
  width: 100%;
  max-width: 300px;
  height: auto;
}

.entry_content p{
  text-align:left;
  font-size: 1.2em;
}
@media only screen and (max-width:480px){
  .entry_content p{
    text-align:left;
    font-size: 1.0em;
  } }



/* --------------------------------------
  ページネーション　pagination
--------------------------------------- */

.pagination {
    width: 100%;
    margin: 70px 0;
    text-align: center;
    position: relative;
    z-index: 200;
    font-size: 14px;
    color: #fff;
    padding:0 10px;
}

.page-numbers{
  display: inline-block;
}

a.page-numbers{
  /* background: rgba(0,0,0,0.02); */
  /*border: solid 1px rgba(0,0,0,0.1);*/
  margin: 0 5px;
  background: #1e7698;
  color:#fff;
  text-align: center;
  padding: 7px 13px;
  margin: 5px 0;
}

.page-numbers.current{
  margin: 5px 0;
  text-shadow: 0 0 7px #333;
  padding:7px 13px;
}




/* --------------------------------------
  media
--------------------------------------- */

#media{
background: #fff;
padding: 0 0 30px;
position: relative;
overflow: hidden;
}

#media img{
  width: 100%;
  height: auto;
}

.media_heading{
color: rgb(255, 255, 255);
font-size: 4vw;
letter-spacing: 2px;
line-height: 1.2;
word-break: break-all;
font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
text-align: left;
position: absolute;
top:5%;
right: 8%;
transform: translate(10%,28%);
padding: 0px;
text-shadow: 0 0 20px #000;
z-index: 2;
}

.media_heading h2{
  margin: 0;
}

.media_catch{
width: 100%;
}

.media_catch figure{
  margin: 0;
}

.multiple li{
  padding: 0 2%;
}

@media only screen and (max-width:480px){
  .fancybox-caption{
font-size: 11px!important;
padding: 20px 30px!important;
  } }

/* --------------------------------------
  予約ボタン
--------------------------------------- */
.button-header{
    margin:0;
}

.button-header a,
.button-header a::after {
  -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
    transition: all 0.3s;
}

.button-header a {
      background: none;
      border: 1px solid;
      color: #fff;
      font-size: clamp(1.4em,3vw,2em);
      font-weight: bold;
      max-width: 450px;
      width: 96%;
      padding:1em;
      text-align: center;
      display: block;
      letter-spacing: .1em;
      position: relative;
      margin: 1em auto;
      line-height: 1.5;
      text-decoration: none;
      -o-transition-duration: 400ms;
      -webkit-transition-duration: 400ms;
      transition-duration: 400ms;
      box-shadow: 3px 4px 0;
}

.button-header a::before,
.button-header a::after {
  background: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}

.button-header a:hover {
  opacity: 0.9;
  color:#000;
  transition: 0.4s;
  text-shadow: none;
  border:1px solid #fff;
}

.button-header a::after {
  height: 0;
  left: 50%;
  top: 50%;
  width: 0;
}

.button-header a:hover:after {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.button-header p{
  font-size: 2em;
}


/* --------------------------------------
  予約ボタン セカンド
--------------------------------------- */

.button a,
.button a::after {
  -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
    transition: all 0.3s;
}

.button a {
  background: none;
      border: 1px solid;
      color: #000;
      font-size: 1.5em;
      max-width: 600px;
      width: 94%;
      padding:10px;
      text-align: center;
      display: block;
      letter-spacing: .1em;
      position: relative;
      margin: 0px auto;
      line-height: 1.5;
      text-decoration: none;
      -o-transition-duration: 400ms;
      -webkit-transition-duration: 400ms;
      transition-duration: 400ms;
}

@media only screen and (max-width:480px){
.button a{
  font-size:1.2em;
} }

.button a::before,
.button a::after {
  background: #000;
  content: '';
  position: absolute;
  z-index: -1;
}

.button a:hover {
  opacity: 0.9;
  color:#fff;
  transition: 0.4s;
  text-shadow: none;
}

.button a::after {
  height: 0;
  left: 50%;
  top: 50%;
  width: 0;
}

.button a:hover:after {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

/* --------------------------------------
  予約ボタン セカンド
--------------------------------------- */

.button2{
    margin:20px 0px;
}

.button2 a,
.button2 a::after {
  -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
    transition: all 0.3s;
}

.button2 a {
      /* background:#465ba9; */
      /* background:#0087d7; */
      background:#1d8a24;
      /* box-shadow: 0 4px 0 #124e82; */
       box-shadow: 0 4px 0 #07470a;
      color: #fff;
      font-size: 2.4em;
      font-weight: bold;
      max-width: 800px;
      width: 100%;
      padding:20px;
      text-align: center;
      display: block;
      letter-spacing: .1em;
      position: relative;
      margin: 0px auto;
      line-height: 1.5;
      text-decoration: none;
      -o-transition-duration: 400ms;
      -webkit-transition-duration: 400ms;
      transition-duration: 400ms;
}
@media only screen and (max-width:600px){
  .button2 a {
    font-size: 2.0em;}
}

.btn2-style-margin{
  margin: 20px;
}


/*.button2 a::before,
.button2 a::after {
  background:#465ba9;
  content: '';
  position: absolute;
  z-index: -1;
}*/

.button2 a:hover {
  opacity: 0.9;
  color:#fff;
  transition: 0.4s;
  text-shadow: none;
  /*border: 2px solid #465ba9;*/
}

.button2 a::after {
  height: 100%;
  left: 0;
  top: 0;
  width: 0;
}

.button2 a:hover:after {
  width: 100%;
}


/* --------------------------------------
  予約ボタン サード
--------------------------------------- */


.button3{
  margin:20px 0px;
}

.button3 a,
.button3 a::after {
-webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
-o-transition: all 0.3s;
  transition: all 0.3s;
}

.button3 a {
    /* background: #336336; */
    background: #1d8a24;
    box-shadow: 0 4px 0 #07470a;
    color:#fff;
    font-size: 1.8em;
    font-weight: bold;
    max-width: 600px;
    width: 100%;
    padding:30px 10px;
    text-align: center;
    display: block;
    letter-spacing: .1em;
    position: relative;
    margin: 0px auto;
    line-height: 1.5;
    text-decoration: none;
    -o-transition-duration: 400ms;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
}
/* @media only screen and (max-width:600px){
  .button3 a {font-size: 1.6em;}
  
} */


/*.button3 a::before,
.button3 a::after {
background:#336336;
content: '';
position: absolute;
z-index: -1;
}*/

.button3 a:hover {
opacity: 0.8;
color:#fff;
transition: 0.4s;
text-shadow: none;
/*border: 2px solid #336336;*/
}

.button3 a::after {
height: 100%;
left: 0;
top: 0;
width: 0;
}

.button3 a:hover:after {
width: 100%;
}

/* --------------------------------------
  予約 CTA セクション 20240903追加
--------------------------------------- */
.reserve_cta{
max-width: 1000px;
margin: 0 auto;
}

.reserve_cta_container{
display: flex;
align-items: center;
justify-content:center;  
gap:1em;
}
@media only screen and (max-width:781px){
  .reserve_cta_container{
    flex-direction: column;
    gap:0;
  } }

.reserve_cta_container li{
  width: calc(100% /3);
  font-size: 2em;
}
@media only screen and (max-width:781px){
  .reserve_cta_container li{
    width: calc(100%);
  }
}




/* --------------------------------------
  電話予約　フロート
--------------------------------------- */

#float_tel_reserve{
  position: fixed;
  bottom:200px;
  right: 20px;
  font-size: 80%;
  z-index: 100;
}
@media only screen and (max-width:600px){
#float_tel_reserve{
    bottom: unset;
    right: unset;
    position: initial;
    margin: 0;
    flex-basis: 100%;
} }

#float_tel_reserve a {
      background:#225290;
      color: #fff!important;
      text-decoration: none;
      width: 200px;
      padding: 10px 0;
      font-size: clamp(1.2em,3vw,2em);
      text-align: center;
      display: block;
      line-height: 40px;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      align-items: center;
      display: inline-flex;
      justify-content: space-around;
}
@media only screen and (max-width:600px){
#float_tel_reserve a{
  width:100%;
    padding: 10px 0;
} }

#float_tel_reserve a:hover{
    opacity:0.9;
}

/* --------------------------------------
  WEB予約　フロート
--------------------------------------- */

#float_web_reserve{
  position: fixed;
  bottom: 140px;
  right: 20px;
  font-size: 80%;
  z-index: 100;
}
@media only screen and (max-width:600px){
#float_web_reserve{
  bottom: unset;
  right: unset;
  position: initial;
  margin: 0;
  flex-basis: 100%;
} }

#float_web_reserve a {
  background:#bf1919;
  color: #fff!important;
      text-decoration: none;
      width: 200px;
      padding: 10px 0;
      font-size: clamp(1.2em,3vw,2em);
      text-align: center;
      display: block;
      line-height: 40px;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      align-items: center;
      display: inline-flex;
      justify-content: space-around;
}
@media only screen and (max-width:600px){
#float_web_reserve a{
  width:100%;
    padding: 10px 0;
} }

#float_web_reserve a:hover{
  text-decoration: none;
  opacity:0.9;
}


/* --------------------------------------
  LINE予約　フロート
--------------------------------------- */

#float_line_reserve{
  position: fixed;
  bottom: 80px;
  right: 20px;
  font-size: 80%;
  z-index: 100;
}
@media only screen and (max-width:600px){
#float_line_reserve{
  bottom: unset;
  right: unset;
  position: initial;
  margin: 0;
  flex-basis: 100%;
} }

#float_line_reserve a {
  background:#00c000;
  color: #fff!important;
      text-decoration: none;
      width: 200px;
      padding: 10px 0;
      font-size: clamp(1.2em,3vw,2em);
      text-align: center;
      display: block;
      line-height: 40px;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      align-items: center;
      display: inline-flex;
      justify-content: space-around;
}
@media only screen and (max-width:600px){
#float_line_reserve a{
    width:100%;
    padding: 10px 0;
} }

#float_line_reserve a:hover {
    text-decoration: none;
    opacity:0.9;
}


/* --------------------------------------
  トップへ戻る
--------------------------------------- */

#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 80%;
  z-index: 100;
}
@media only screen and (max-width:768px){
#page-top{
  bottom: 120px;
  right: 10px;
} }

#page-top a {
  background: rgba(0, 0, 0, 0.6);
  text-decoration: none;
  width: 50px;
  padding: 5px;
  text-align: center;
  display: block;
  line-height: 40px;
  border-radius: 50%;
}
#page-top a:hover {
    text-decoration: none;
/*background: rgba(197, 197, 197, 0.8);*/
}

#page-top a img{
  width:100%;
  max-width: 100px;
}

.fa {
  display: initial!important;
  font-family:"Font Awesome 5 Free";
  font-style: normal;
  font-weight:bold;
 font-size: 15px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color:#fff;
  vertical-align: middle;
}

.fa-chevron-up:before{
vertical-align: middle;
}


/* container 各セクション 最大幅指定
------------------------------------------------------------*/
.container{
max-width:1200px;
width:94%;
margin:0 auto;
}
@media only screen and (max-width:480px){
  .container{
  padding:0;
  } }

/* --------------------------------------
  ヘッダー部分 gheader
  --------------------------------------- */

.headercopy{
  /*background:#4a3f39;*/
  padding: 1px;
  margin: 0 auto;
}

.headercopy_inner{
  width: 98%;
  margin: 0 auto;
}

h1{
    color: #fff;
    float: left;
    font-size: 10px;
    padding: 5px;
    /*max-width: 980px;*/
    margin: 0 auto;
}

.headercopy_inner p{
  color: #fff;
}

#gheader{
overflow:hidden;
padding:5px 0 0;
color:#000;
/*background:#fff;*/
}



/********************
/* ロゴ
*********************/
/*#header .logo{
float:left;
padding:20px 10px;
text-align:center;
}*/

.logo{
float: left;
margin:10px;
/*margin:10px;*/
/* text-align: center; */
}

.logo a{

}

.logo span{

}

.logo img{
width: 120px;
}
@media only screen and (max-width:768px){
  .logo img{
  width: 75px;
  } }
@media only screen and (max-width:380px){
  .logo img{
    width: 50px;
  } }

.header_inner_wrap{

}

.social_button{
  padding: 0 10px 0 0;
    position: absolute;
    bottom: 10%;
    left: 5%;
}

.social_button img{
max-width: 20px;
width: 100%;
margin: 2px 2px 2px;
}

.tel{
font-size: 2.0em!important;
font-weight: bold;
width: 100%;
height: auto;
margin: 15px 0;
}

.tel a:hover img{
opacity: 0.9;
filter: alpha(opacity = 90);
}

.tel span{

}


.head_inner{
width:96%;
/*max-width:1000px;*/
margin:0 auto;
font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
/*padding: 0px 0 30px;*/
position:relative;
z-index: 9999;
}

@media only screen and (max-width:768px){
.head_inner {
  padding:0;
   } }


/* --------------------------------------
  ナビゲーション パターン１
--------------------------------------- */

.inner:after {
    content: "";
    clear: both;
    display: block;
}

/* header */
#top-head {
width: 100%;
position:absolute;
line-height: 1;
z-index: 999;
/*background: #fff;*/
}

#top-head a,
#top-head {
    /*color: #000;*/
    text-decoration: none;
}
#top-head .logo {
    float: left;
    /*font-size: 36px;*/
}

.is-animation {
/*background: #000;*/
background: rgba(255, 255, 255, 0.95)!important;
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
transition-duration:0.3s;
position: fixed;
}
.is-animation h1{
  color: #000;
}

.is-animation .logo img {
  width:100px;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: linear;
}
@media only screen and (max-width:768px){
  .is-animation .logo img{
    width: 50px;
  } }

.is-animation .head_reserve{
  top:25px;
}

.is-animation .head_reserve img{
  /*width:30px;*/
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: linear;
}

.nav_container{
  /*background: #f7dda1;*/
}
@media only screen and (max-width:768px){
  .nav_container{
    background:none;
  } }


#global-nav ul {
    list-style: none;
    margin: 0 auto;
    text-align: center;
clear:both;
max-width:1000px;

}

#global-nav ul li {
    display: inline-block;
}

#global-nav ul li a {
  padding: 10px 5px;
  display: block;
  text-transform: uppercase;
  font-size: 1.2em;
}

#global-nav ul li:hover a{
  background: #da0303c4;
  color: #fff;
}

/* Fixed */
#top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    /*padding: 10px 0;*/
    /*height: 55px;*/
    background: #E91E63;
    background: rgba(233, 30, 99, 0.9);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo {
    color: #fff;
}
#top-head.fixed #global-nav ul li a {
    color: #000;
    /*padding: 0 20px;*/
}

/* -----------------------------------------
header_img
----------------------------------------- */

.main_header{
vertical-align: bottom;
position:relative;
overflow: hidden;
z-index: 11;
overflow:hidden;
padding:5px 0 0;
color:#000;
background:url(./images/header01.jpg) 10% 50%;
background-size:cover;
height: 100vh;
}

.main_header img{
  width: 100%;
}

.main_header figure{
  margin: 0;
}

.main_header::before{
  /* 透過した黒を上から重ねるイメージ */
    background-color: rgba(0,0,0,0.4);
    /* 自由に位置指定 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
}

.main_header .header-bg-text{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); /*上下左右中央寄せ*/
  text-align:center;
  width: 75%;
}

.main_header .header-bg-text h2{
  font-size:5vw;
  font-weight:bold;
  line-height: 1.5;
  color:#fff;
  font-family: 'constructa','游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, serif;
}
@media only screen and (max-width:600px){
.main_header .header-bg-text h2{
  font-size:3.2em;
  } }

.main_header .header-bg-text p{
  font-size:3vw;
  color:#fff;
  font-family: 'constructa','游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, serif;
}
@media only screen and (max-width:600px){
.main_header .header-bg-text p {
  font-size: 2.4em;
  } }

.header_img{
  width:100%;
  padding: 0;
  margin: 0;
}

.header_img img{
  width:100%;
  }

/* --------------------------------------
  店舗情報
--------------------------------------- */

.map {
  width: 100%;
  height: 100%;
  margin: 0 0 40px 0;
  padding: 0;
}

.detail {
  margin: 0 0 10px 0;
}

.table_detail {
  float: right;
  width: 100%;
  margin-bottom: 40px;
  border-top: 1px solid #bfbfbf;
}

.table_detail th {
  width: 150px;
  text-align: center;
  white-space: normal;
  word-break: break-all;
  padding: 20px 20px;
  border-bottom: 1px solid #bfbfbf;
  border-left: 1px solid #bfbfbf;
}

.table_detail td {
  width: 350px;
  padding: 20px 20px;
  white-space: normal;
  word-break: break-all;
  border-bottom: 1px solid #bfbfbf;
  border-left: 1px solid #bfbfbf;
  border-right: 1px solid #bfbfbf;
}

/* --------------------------------------
 予約
--------------------------------------- */

#reservation{
padding: 50px 0 0;
background: rgb(31 48 67 / 85%);
overflow: hidden;
position: relative;
z-index: 10;
}

.reservation_heading{
  color: rgb(255, 255, 255);
  font-size: 5vw;
  letter-spacing: 2px;
  line-height: 1.2;
  word-break: break-all;
  font-family: constructa, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, serif;
  text-align: center;
  padding: 0px;
  margin: 0 0 60px;
  text-shadow:0px 0px 10px #000;
  position: relative;
}

.reservation_container {
  margin: 0px auto;
  width:100%;
  max-width: 1600px;
}
@media only screen and (max-width:768px){
  .reservation_container {
  display:block;
  } }

.reservation_container img{
  max-width:100%;
}


/************************
    予約共通 css
************************/

.reserve_box{
margin: 100px 0;
}
@media only screen and (max-width:768px){
  .reserve_box{
    margin: 30px 0;
    }
}

.reservation_inner{
  position: relative;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
  padding: 0 60px;
}
@media only screen and (max-width:768px){
  .reservation_inner{
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    padding:0;
  }
}

.reservation_text{
  padding: 4em;
  box-shadow: 0 0 20px -5px #bdbaba;
  /*background: #fff;*/
  background: rgb(255 255 255 / 95%);
  margin: 60px 0 0 -60px;
  z-index: 2;
  width: 100%;
  max-width: 800px;
  position: relative;
}
@media only screen and (max-width:768px){
  .reservation_text{
    position: relative;
    right: inherit;
    margin: -50px auto 0;
    width: 94%;
    padding:2em;
  }
}

.reservation_text h3{
  font-size: 2.4em;
  }
  @media only screen and (max-width:768px){
    .reservation_text h3{
      text-align: center;
      margin: 0 0 0.6em;
      /* font-size: 2.0em; */
      }
  }

.reservation_text h4{
  font-size: 1.8em;
  padding: 7px;
  background-color: #efefef;
  }

.reservation_text dl{
margin: 0 0 1.6em;
}

.reservation_text dt{
  font-size: 1.8em;
  }
  @media only screen and (min-width:767px){
    .reservation_text dt{
      font-size: 2.0em;
      }
  }

.reservation_text dd{
  font-size: 1.8em;
}
@media only screen and (min-width:767px){
  .reservation_text dd{
    font-size: 2.0em;
    }
}

.reservation_text dd img{
  max-width: 100%;
  display: block;
  width: 300px;
}

.reservation_text p{
 font-size: 1.4em;
 margin: 0 0 1em;
}
@media only screen and (min-width:767px){
  .reservation_text p{
    font-size: 1.6em;
    }
}

/************************
    池袋店予約
************************/

.resb-btn-base{
  max-width: 800px;
  width: 100%;
  margin: 10px 0;
  align-items: center;
  display: inline-flex;
  gap: 0.5em;
  padding: 36px 10px;
  background-color: #1e3ea3;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 4px #061f6c;
  justify-content: center;
  font-size: 1.2em;
}


.resb-btn-base:visited{
  color: #fcfcfc;
}

.resb-btn-base:hover{
  opacity: 0.9;
  box-shadow: 0 0;
  -webkit-transition: 0.7s;
  transition: 0.7s;
  color:#fcfcfc;
}

.resb-btn-web{
  background-color: #bf1919;
  box-shadow: 0 4px #650303;
}

.resb-btn-line{
  background-color: #11af11;
  box-shadow: 0 4px #026718;
}




#tel_reservation {
position: relative;
margin: 0 0 50px;
}

#tel_reservation::after{
  position: absolute;
      content: '';
      top: 10%;
      width: 200vw;
      height: 75%;
      background: #815236;
      /* z-index: 0; */
      left: -10%;
      background: -webkit-linear-gradient(45deg, #982a2a, #a91212);
      background: linear-gradient(45deg, #982a2a, #a91212);
  }

.tel_reservation_inner{
  position: relative;
  z-index: 1;
}
@media only screen and (max-width:768px){
.tel_reservation_inner{
    -webkit-display:flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

.tel_reservation_inner figure{
padding: 50px;
}
@media only screen and (max-width:768px){
.tel_reservation_inner figure{
  padding:0px;
  margin: 0 auto;
  }
}

.tel_reserve_text{
top: 50%;
padding: 25px;
box-shadow: 0 0 30px -5px #bdbaba;
background: #fff;
position: absolute;
right: 0;
margin: 0 50px 0 0;
z-index: 2;
}
@media only screen and (max-width:768px){
.tel_reserve_text{
    position: relative;
    margin: -60px 50px 0 10px;
  }
}
@media only screen and (max-width:380px){
.tel_reserve_text{
    position: relative;
    margin: -60px 10px 0 10px;
  }
}

.tel_reserve_text h3{
font-size: 2.0em;
margin: 0 0 20px;
font-weight: bold;
color: #a91212;

  }

.tel_reserve_text dl{

}

.tel_reserve_text dt{
  font-size: 1.5em;
  }

.tel_reserve_text dd{
  font-size: 1.5em;
}

.tel_reserve_text p{
 font-size: 1.5em;
}


/*WEB予約セクション*/

#web_reservation{
position: relative;
margin: 0 0 50px;
}

#web_reservation::after{
  position: absolute;
      content: '';
      top: 10%;
      width: 200vw;
      height: 75%;
      background: #815236;
      /* z-index: 0; */
      right: -10%;
      background: -webkit-linear-gradient(60deg, #0f3973, #033143);
      background: linear-gradient(60deg, #0f3973, #033143);
  }



.web_reservation_inner{
  position: relative;
  z-index: 1;
  -webkit-display: flex;
  display: flex;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
@media only screen and (max-width:768px){
.web_reservation_inner{
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

.web_reservation_inner figure{
padding: 50px;
}
@media only screen and (max-width:768px){
.web_reservation_inner figure{
  padding:0px;
  margin: 0 auto;
  }
}

.web_reserve_text{
bottom:35%;
padding: 25px;
box-shadow: 0 0 30px -5px #bdbaba;
background: #fff;
position: absolute;
left: 0;
margin: 0 0 0 50px;
z-index: 2;
}
@media only screen and (max-width:768px){
.web_reserve_text{
    position: relative;
    margin: -60px 10px 0 40px;
  }
}
@media only screen and (max-width:380px){
.web_reserve_text{
    position: relative;
    margin: -60px 10px 0 10px;
  }
}

.web_reserve_text h3 {
font-size: 2.0em;
margin:0 0 15px;
color: #225290;
}

.web_reserve_text p{
  font-size: 1.5em;
  margin: 0 0 10px;
}

/*LINE予約セクション*/

#line_reservation {
position: relative;

}


#line_reservation::after{
  position: absolute;
      content: '';
      top:0;
      width: 200vw;
      height: 75%;
      background: #815236;
      /* z-index: 0; */
      left: -10%;
      background: -webkit-linear-gradient(45deg, #157f15, #3fcd14);
      background: linear-gradient(45deg, #157f15, #3fcd14);
}

.line_reservation_inner{
  position: relative;
  z-index: 1;
}
@media only screen and (max-width:768px){
.line_reservation_inner{
    -webkit-display:flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

.line_reservation_inner figure{
padding: 50px;
display:inline-block;
}
@media only screen and (max-width:768px){
.line_reservation_inner figure{
  padding:0px;
  margin: 0 auto;
  }
}

.line_reserve_text{
  bottom:0;
  padding:30px;
  box-shadow: 0 0 30px -5px #bdbaba;
  background: #fff;
  position: absolute;
  right: 0;
  margin: 0 50px 0 0;
}
@media only screen and (max-width:768px){
.line_reserve_text{
    position: relative;
    margin: -60px 30px 0 30px;
    padding: 25px;
    z-index: 2;
  }
}
@media only screen and (max-width:380px){
.line_reserve_text{
    position: relative;
    margin: -60px 10px 0 10px;
  }
}

.line_reserve_text h3 {
    font-size: 2.0em;
    margin: 0 0 15px;
    color: #02b902;
  }

.line_reserve_text p{
  font-size: 1.5em;
  margin: 0 0 15px;
}

.reserve-img img{
  max-width: 200px;
}


/* --------------------------------------
サイトマップコンテンツ
--------------------------------------- */

.sitemap_head{
background:url(./images/page-head.jpg) 50% 50%;
background-size:cover;
height:33.3vh;
position:relative;
}

.sitemap_head h2{
  position: absolute;
    color:#fff;/*文字は白に*/
    font-weight: bold; /*太字に*/
    font-size: 36px;/*サイズ2倍*/
    /*font-family:IMPACT;/*Google Font*/
    position: absolute;
    line-height: 1.5;
    text-align: center;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
}

#sitemap-contents{
  padding:0;
  background: #fff;
}

.sitemap_container{
  padding: 30px 0;
  max-width: 800px;
  margin: 0 auto;
}

.sitemaps_list{
padding: 10px;
}

.sitemaps_list li{
  font-size:1.5em;
  margin: 0 5px 10px;
}
@media only screen and (max-width:425px){
.sitemaps_list li{
font-size: 1.2em;
} }

.sitemaps_list li a:visited{
  color: #3a92b3;
}

.children{
  margin-top: 10px;
  padding-left: 20px;
}

.children li{
  font-size:75%!important;
  border-bottom:none;
  margin-bottom: 5px;
}

.sitemaps_list li:before{
    font-family:"Font Awesome 5 Free";
    content: "\f0da";
    font-weight: bold;
    /* position: absolute; */
    /* left: 1.5em; */
    padding-right: 10px;
  }

/* --------------------------------------
    404.php
--------------------------------------- */

#contents2{
    padding: 50px 0;
    /*background: #eee*/
  }
@media only screen and (max-width:768px) {
#contents2{
    padding: 110px 0 30px; } }

  .error_container{
    max-width: 1200px;
    width: 94%;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.85);
    padding: 25px;
  }

  .error_title{
    font-size: 6.0vw;
    text-align: center;
    font-weight: bold;
  }
  @media only screen and (min-width:1024px){
  .error_title{
  font-size: 6.0em;
  } }

  .error_message{
    text-align: center;
  }

  .error_message h3{
    font-size: 4.0vw;
    text-align: center;
    font-weight: 500;
    margin: 0 0 10px;
  }
  @media only screen and (min-width:1024px){
  .error_message h3{
  font-size: 3.0em;
  } }

  .error_message p{
    font-size: 1.0vw;
  }
  @media only screen and (min-width:1024px){
  .error_message p{
  font-size: 1.2em;
  } }



/* --------------------------------------
  footer
--------------------------------------- */

#gfooter{
  background: -webkit-linear-gradient(45deg, #0f3973, #033143);
  background: linear-gradient(45deg, #0f3973, #033143);
  color: #fff;
  position: relative;
  z-index: 11;
  /*padding: 10px 5px 5px;*/
}

#gfooter a{
color:#000;
/*text-shadow: 1px 1px 3px #aaa;*/
}

#gfooter a:hover{
color: #d0ce29;
}

#footernav{
padding:10px;
}

#footernav ul{
      margin: 0px auto;
      max-width: 1000px;
      display:flex;
      display: -ms-flexbox; /* IE10 */
      display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
      display: -webkit-flex; /* Safari6.1以降 */
      flex-wrap: wrap;
      -ms-flex-wrap: wrap; /*IE10*/
      -webkit-flex-wrap: wrap; /* Safari6.1以降 */
      /*justify-content: center;
      -webkit-justify-content:center;*/
}


#footernav li{
  box-sizing: border-box;
  margin: 1em 0px 0px 0px;
  width: calc(100% / 3);
}
@media only screen and (max-width:600px){
  #footernav li{
    width: calc(100% / 2);
  }
}

#footernav li:before{
  font-family:"Font Awesome 5 Free";
  content: "\f105";
  padding-right: 10px;
  font-weight: bold;
  /* position: absolute; */
  /* left: 1.5em; */
}

#footernav li a{
  display: inline;
  padding: 2px;
  font-size: 1.1em;
  transition: 1.5s;
  -webkit-transition: 1.5s;
  color: #fff;
}

#footernav li a:hover{

}

#footer_nav li a{
font-size:1.2em;
}

#gfooter small{
  text-align: center;
  display: block;
  margin: 10px 0 0;
  color: #000;
  background: #fff;
  padding: 5px;
}
@media only screen and (max-width:768px){
#gfooter small{
padding: 5px 0 70px;
} }

/*wp_footer*/
.menu{
  display:none;
}

/* --------------------------------------
  フロート予約メニュー
--------------------------------------- */

@media only screen and (max-width:768px){
  .footer_fixed_menu{
  position: fixed;
  display: flex;
  bottom:0;
  z-index: 999;
  width: 100%;
  } }



  /* --------------------------------------
    池袋店予約　フロート
  --------------------------------------- */
  #float_k_one_reserve{
    position: fixed;
    bottom:150px;
    right: 10px;
    z-index: 100;
  }
  @media only screen and (max-width:768px){
    #float_k_one_reserve{
        bottom: unset;
        right: unset;
        position: initial;
        margin: 0;
        flex-basis: 100%;
    } }
  
    #float_k_one_reserve a {
      background: #a11e1e;
      background: linear-gradient(0deg, #9a1414, #b52a2a);
      text-decoration: none;
      width: 180px;
      padding: 7px 10px;
      color: #fff;
      font-size: 1.4em;
      display: block;
      line-height: 1.6;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    @media only screen and (max-width:768px){
    #float_k_one_reserve a{
        width:auto;
        padding: 10px 0;
        display: block;
        text-align: center;
        margin: 1em;
    } }

    #float_k_one_reserve a:hover{
      color: #ddd;
    }

    @media only screen and (max-width:768px){
      #float_k_one_reserve a i{
        vertical-align: baseline;
      } }
  


/* --------------------------------------
 grid
--------------------------------------- */

.grid01{
width:33%;
}

.grid02{
width:50%;
}


/* -----------------------------------------
タブレット
※ 幅768px以下のデバイスには、下記のスタイルが継承されます。
----------------------------------------- */

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

/*共通項目*/
.tx_c img{
width:100%;
}

.r_fss{
font-size:85%;
}

h2.heading,h2.heading2,h2.heading3{
font-size:2.5em;
padding: 30px 0;
margin: 0 0 30px;
}

/* --------------------------------------
  ヘッダーロゴ  768px以下
--------------------------------------- */

#gheader{
margin:40px 0 0;
}

.logo{
float:none;
}

.info{
display:none;
}


/* --------------------------------------
  ナビゲーション レスポンシブ  768px以下
--------------------------------------- */
 #top-head{
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        margin-top: 0;
    }
    /* Fixed reset */
    #top-head.fixed {
        padding-top: 0;
        background: transparent;
    }
    #mobile-head {
    /*background:url(./images/bg21.png) repeat;*/
    width: 100%;
    /* height: 56px; */
    z-index: 999;
    position: relative;
    }


/* ナビゲーション レスポンシブ ここまで*/

}/*768px以下ここまで*/