@charset "utf-8";
/*
Theme Name: boucle-theme-2026
Theme URI:https://www.boucle.jp/
Description: 
Author:LEXURES
Author URI:https://homepage-ru.com
*/

/* --------------------------------------
  共通項目
--------------------------------------- */

/*-- clear --*/
.clear{
clear:both;
}

br.clear {
  font-size: 0;
  line-height: 0;
  clear: both;
}


.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

/*-- font-size --*/

.fl{
font-size:1.5em!important;
}

@media only screen and (max-width:768px) {
  .fl {
    font-size:1.35em!important;
     } }
@media only screen and (max-width:480px) {
       .fl {
         font-size:1.3em!important;
          } }

.fm{
font-size:1.25em!important;
}


.fs{
  font-size: 1.4rem;
  vertical-align: middle;
  display: block;
}
@media only screen and (max-width:544px) {
       .fs {
         font-size:1.2rem;
          } }

.fxs{
font-size: 60%!important;
margin: 5px 0 0;
display: block;
}

.fxs2{
font-size: 80%!important;
margin: 5px 0 0 15px;
display: block;
}

/*-- color --*/

.bold{
font-weight:bold;
}


.emphasys{
  font-size:1.3em;
  color: #ffeb3b;
  font-weight: bold;
}
@media only screen and (max-width:768px) {
       .emphasys{
         color:#da3835;
        } }

/*赤字強調*/
.red {
color:#da3835;
font-weight:bold;
}

.red_lg {
font-size: 1.2em;
color:#da3835;
font-weight: bold;
vertical-align: baseline;
/*text-shadow: 1px 1px #999;*/
}
/*@media only screen and (max-width:480px) {
  .red_lg {
    font-size:1.1em;
        } }
@media only screen and (max-width:380px) {
          .red_lg {
            font-size:1.05em;
                } }*/

.red_lg_shadow{
text-shadow: 2px 2px 3px #fff;
}

.blue{
color:#3aa0ce;
font-weight:bold;
}

.white{
  color:#fff;
}

.r_pink{
color:#f32a6e;
}

.w_red{
color:#c32d2d;
font-weight:bold;
}

.w_red2{
color:#e02b2b;
font-weight:bold;
}

.or{
#ef851a;
font-weight:bold;
}

.fff{
color:#fff!important;
}

.yellow{
  color: #ffeb3b;
  font-weight: bold;
}

.yellow_lg{
  font-size:1.2em;
  color: #ffeb3b;
  font-weight: bold;
}
@media only screen and (max-width:480px) {
       .yellow_lg {
         font-size:1.6rem;
        } }

/*背景黄色*/

.bg_c_ef{
background: #efefef;
}

.bg_y {
  background:#FF3;
}

.bg_y2{
  background: linear-gradient(transparent 75%, #FF3 50%);
}

.bg_r {
  background:#AD0000;
}


.bg_w{
background:rgba(255, 255, 255, 0.3)
}

.blue_bg{
background: linear-gradient(transparent 60%, rgba(106, 204, 226, 0.9) 0%);
}

.blue_bg2{
background: linear-gradient(transparent 60%, rgba(15, 143, 232, 0.9) 0%);
}

.red_bg{
background: linear-gradient(transparent 60%, rgba(215, 15, 15, 0.9) 0%)
}

.yellow_bg {
  background: linear-gradient(transparent 65%, rgba(255, 255, 0, 0.6) 0%);
  padding: 3px 0;
 /*font-weight: bold;*/
}

.yellow_bg2 {
 background: linear-gradient(transparent 0%, rgba(255, 255, 0, 0.85) 0%);
 padding:3px;
 font-weight: bold;
}

.gold_bg{
  background: linear-gradient(transparent 80%, #d2c598 85%);
}

.underline{
  text-decoration: underline;
}

.underline2{
  -webkit-box-shadow: inset 0 -5px #ffeb3bc2;
  box-shadow: inset 0 -5px #ffeb3bc2;
}

/*中央寄せ*/
.tx_c{
text-align:center!important;
margin: 0 0 30px;
}
@media only screen and (max-width:480px) {
.tx_c{
margin: 0 0 15px;
        } }

.tx_c img{
width:100%;
}

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

.tx_c2 img{
width:94%;
max-width:300px;
}

.tx_c3{
text-align:center;
margin:0 0 50px;
}
.tx_c3 img{
  width:100%;
  max-width: 1000px;
}
@media only screen and (max-width:480px) {
  .tx_c3 {
    margin:0 0 20px;
     } }

.tx_c4{
text-align:center;
}


.tx_r{
  text-align: right;
}

.inline_b{
display:inline-block;
}

/*margin*/

.mg15{
margin:15px 0;
}

.mg20{
margin:20px 0;
}

.mg30{
margin:30px 0;
}

.pd10{
padding:10px;
}

/*-- link --*/

a:link {
  color:#1d3994;
  text-decoration: none;
}

a:visited {
  color: #425486;
  text-decoration: none;
}

a:hover {
  color: #737373;
  text-decoration: underline;
}

a:active {
  color: #1b1b1b;
  text-decoration: none;
  outline: none;
}

/*-- border --*/

.border {
  border: 1px #d8d5d1 solid;
}

.border_top {
  border-top: 1px #d8d5d1 solid;
}

.border_bottom {
  border-bottom: 1px #d8d5d1 solid;
}

.border_bottom_dot {
  border-bottom: 1px #d8d5d1 dotted;
}

.bdb01 {
  border-bottom: 1px solid;
  padding: 5px 15px;
}

/*display block*/

.disp_b{
  display: block;
}


/*pc・sp 切り替え*/

.pc-hide {
  display: none; }
  @media (max-width: 768px) {
    .pc-hide {
      display: block; } }

.pc-hide2 {
        display: none; }
        @media (max-width: 480px) {
          .pc-hide2 {
            display: block; } }
.pc-hide3 {
        display: none; }
        @media (max-width: 1024px) {
          .pc-hide3 {
            display: block; } }

.sp-hide {
  display: block; }
  @media (max-width: 768px) {
    .sp-hide {
      display: none; } }

.sp-hide2 {
        display: block; }
        @media (max-width: 480px) {
          .sp-hide2 {
            display: none; } }

/*WEBフォント*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/earlyaccess/kokoro.css);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);

.wf-noto { font-family: "Noto Sans Japanese"; }
.wf-kokoro { font-family: "Kokoro"; }
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }



/*-- 右寄せ・左寄せ --*/

.float_right {
  float: right;
  max-width: 320px;
  margin-left: 30px;
  width: 40%; }
  .float_right img {
    width: 100%; }
  @media (max-width: 544px) {
    .float_right {
      margin: 30px auto;
      width: 45%; } }

.float_right-fluid {
  float: right;
  max-width: 800px;
  margin-left: 30px;
  width: 35%; }
  .float_right-fluid img {
    width: 100%; }
  @media (max-width: 544px) {
    .float_right-fluid {
      width: 100%;
      max-width: 100%;
      margin: 20px auto;
      float: none; } }

.float_left {
  float: left;
  max-width: 300px;
  margin: 10px;
  width: 40%; }
  .float_right img {
    width: 100%; }
@media (max-width: 768px) {
  .float_left {
    float: none;
    max-width: 800px;
    width: 97%;
    margin: 10px auto; }
}
  /*@media (max-width: 544px) {
    .float_right {
      margin: 30px auto;
      width: 45%; } }*/

.float_left-fluid {
  float: left;
  max-width: 800px;
  margin-left: 30px;
  width: 40%; }
  @media (max-width: 544px) {
    .float_left-fluid {
      width: 100%;
      max-width: 100%;
      margin: 20px auto;
      float: none; } }

  .float_left-fluid img {
    width: 100%; }

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

@media screen and (max-width: 1200px){
.bg{
  position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    /*background: url(../images/bg_sp.jpg) no-repeat;*/
    /*background: url(http://www.transparenttextures.com/patterns/stardust.png) repeat;*/
    background-size: cover;
    background-attachment: scroll;
} }

.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%;
/*scroll-behavior: smooth;*/
}

body{
font-family:'游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
/*font-family: 'YakuHanJP', "Hiragino Sans", Meiryo, "Yu Gothic Medium", sans-serif;*/
/*font-family:'Quicksand', 'Yu Gothic', '游ゴシック', 'YuGothic', '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'メイリオ', arial;*/
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-repeat: repeat;
position: relative;
z-index: -2;
}


.linear1{
  background-image: -moz-linear-gradient(100deg,#ffffff 80%, #bdab7e 80%);
  background-image: linear-gradient(100deg,#ffffff 80%, #bdab7e 80%);
  background-image: -webkit-linear-gradient(100deg,#ffffff 80%, #bdab7e 80%);
	background-size:100% 100%; /* 2つ書かないと、firefoxで崩れがおきる */

}

.linear2{
background-image:url(./images/bg01.jpg);
background-size: auto auto;
background-repeat: repeat;
/*background-attachment: fixed;*/
}


.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;
}

/* --------------------------------------
  heading
--------------------------------------- */

.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;*/
}


.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;
}


.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;
        } }

/* --------------------------------------
  Feature 特徴コンテンツ
--------------------------------------- */

#feature{
padding: 3vw 0;
}

.feature_heading h2{
  color: #fff;
  font-size: 4.0em;
  letter-spacing: 2px;
  line-height: 1.5;
  word-break: break-all;
  padding:0;
  margin: 2em 0;
  text-align: center;
  text-shadow: 0 0 10px #000;
}
@media only screen and (max-width:544px){
  .feature_heading h2{
  font-size: 2.2em;
  } }

.feature_heading h3{
  color: #000;
  font-size:2.0em;
  letter-spacing: 2px;
  line-height: 1.5;
  word-break: break-all;
  padding: 0 0 0 1em;
  text-align: left;
  margin: 2em 0;
  border-left: 2px solid #3a3838;
}

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

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

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

.feature-fig{
  margin: 0 5em 0 0;
  width: 35%;
}
@media only screen and (max-width:767px){
.feature-fig{
  width: 100%;
  } }

.feature-fig img{
  width: 100%;
  height: auto;
}

.feature_text{
  padding: 2em 3em;
  background: #fff;
  min-width: 400px;
  border: 5px solid #efefef;
}
@media only screen and (max-width:767px){
.feature_text{
  padding: 1em 2em;
  min-width: initial;
  } }

.feature_text p{
  font-size: 1.6em;
  margin: 0 0 2rem;
}

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

#skill{
padding:0;
}

.skill_heading h2{
  font-size: 10.0em;
  letter-spacing: 2px;
  line-height: 1.5;
  word-break: break-all;
  margin: 1em 1em 0;
  /* text-shadow: 0 0 10px #000; */
  z-index: 1;
  /* background: #000; */
  /* padding: 1em; */
  max-width: fit-content;
  position: relative;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  letter-spacing: 5px;
}
@media only screen and (max-width:980px){
.skill_heading h2{
  font-size:6.0em;
  } }
  @media only screen and (max-width:600px){
    .skill_heading h2{
      font-size:4.0em;
      } }

.skill_heading h2::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 35%;
  right: 0;
  background-color: #ECECEC;
  background-color: #cfdded;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  z-index: -1;
  bottom: 20%;
}

.skill_heading h3{
  color: #fff;
  font-size: 2.4em;
  letter-spacing: 2px;
  line-height: 1.7;
  word-break: break-all;
  text-align: left;
  margin:0 0 2em;
  background: #1B65A8;
  padding: 1em;
  border: double 7px;
  display: flex;
  flex-wrap: wrap;
  font-family: osaka;
  justify-content: center;
  box-shadow: 0px 0px 1px 3px #1a65a8;
}
@media only screen and (max-width:980px){
  .skill_heading h3{
    margin:2em 0;
    font-size: 2.0em;
    } }

.skill_heading h3::before{
  position: relative;
  font-size: 20px;
  color: #90b9df;
  letter-spacing: 1px;
  width: 100%;
  text-align: center;
}

.sk01::before{
  content: '- SKILL01 -';
}

.sk02::before{
  content: '- SKILL02 -';
}

.sk03::before{
  content: '- SKILL03 -';
}


.skill_container{
  width:100%;
  margin:0 auto;
  position: relative;
  }

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

.skillbox{
position: relative;
overflow: hidden;
}

.skillbox::before{
        position: absolute;
        content: '';
        top: 0;
}

.skb_left::before{
  left:0!important;
}

.flex_resverse{
  flex-direction: row-reverse!important;
}

.skill-flex{
  display: -webkit-flex;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-direction: row;
  /* justify-content: center; */
  padding: 5vw;
  justify-content: center;
  margin: 0 auto;
}
@media only screen and (max-width:980px){
  .skill-flex{
  -webkit-flex-direction: column!important;
  flex-direction: column!important;
  } }
  

.skill_text{
  /*padding: 2em;*/
  background: #fff;
  max-width: 800px;
  margin: 0 auto;
  flex-basis: 100%;
  /*box-shadow: 0 0 20px -5px #bbb;*/
}

.skill_text2{
  padding: 3vw;
  background: #fff;
  max-width: 1200px;
  margin: -5% auto;
  flex-basis: 100%;
  position: relative;
  box-shadow: 0 0 20px -5px #bbb;
  z-index: 1;
}

.st_position_r{
  right: 0;
}

.st_position_l{
  left: 0;
}

.skill_text ul,.skill_text2 ul{
    padding: 2em 2em 0.5em;
    /* border-radius: 3px; */
    box-sizing: border-box;
    margin: 2em 0;
}
@media only screen and (max-width:600px){
  .skill_text ul,.skill_text2 ul{
    padding: 1.6em 1.6em 0.5em;
  } }

.skill_text ul > li,.skill_text2 ul > li{
  font-size: 1.8em;
  margin: 0 0 1rem;
  display: -webkit-flex;
  display: flex;
  font-weight: bold;
  line-height: 1.7;
  }
  @media only screen and (max-width:600px){
    .skill_text ul > li,.skill_text2 ul > li{
      font-size: 1.6em;
    } }

.skill_text ul > li::before,.skill_text2 ul > li::before{
  content:'\f152';
  display: inline-block;
  margin: 0 10px 0 0;
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  }

.skill_text p,.skill_text2 p{
  font-size: 1.6em;
  margin: 0 0 2rem;
}
@media only screen and (max-width:600px){
  .skill_text p,.skill_text2 p{
    font-size: 1.4em;
  } }

.skill_list_base{
  border: 2px solid #1B65A8;
}

.skill_list_base > li{
  color:#1B65A8;
}

.skill_list_base > li::before{
  /*content:'\f075'!important;*/
  display: inline-block;
  margin: 0 10px 0 0;
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
}

.skill_demerit{
  background:#eee;
}

.skill-fig{
  width: 100%;
  margin:0;
}
@media only screen and (max-width:980px){
  .skill-fig{
  min-width: 100%;
  } }

.skill-fig img{
  width: 100%;
  height: auto;
  margin: 0 0 2em;
}

.skill-bg{
  background: url(./images/skill-image01.jpg) 50% 50% no-repeat;
  position: relative;
  padding: 50% 0 0 0;
  width: 100%;
  margin: 0 0 4% 4%;
  background-size: cover;
  flex-basis: 100%;
}
@media only screen and (max-width:600px){
  .skill-bg{
    padding: 60% 0 0 0;
    margin: 0 0 8% 8%;
  } }

.skill-bg::after{
  position: absolute;
  content: '';
  top: 4%;
  width: 100%;
  height: 100%;
  right: -4%;
  background-color: #ECECEC;
  background-color: #a8bed6;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  z-index: -1; 
}
@media only screen and (max-width:980px){
  .skill-bg::after{
    top: 8%;
    right: -8%;
  } }

.skill-bg2{
  background: url(./images/new-skill-image02-2.jpg) 50% 50% no-repeat;
  position: relative;
  padding: 50% 0 0 0;
  width: 100%;
  margin:0 5% 5% 0;
  background-size: cover;
  flex-basis: 100%;
}
@media only screen and (max-width:980px){
  .skill-bg2{
    margin:0 0 8% -8%;
    padding: 60% 0 0;
  } }


.skill-bg2::after{
  position: absolute;
  content: '';
  top: 6%;
  width: 100%;
  height: 100%;
  right: 6%;
  background: -webkit-linear-gradient(45deg, #d98842, #db6e21);
  background: linear-gradient(45deg, #d98842, #db6e21);
  background-color: #ECECEC;
  background-color: #a8bed6;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  z-index: -1; 
}
@media only screen and (max-width:980px){
  .skill-bg2::after{
    top: 8%;
    right: 8%;
  } }


.sk3-pd{
  padding:5vw 0 0;
}


.skill-bg3{
  background: url(./images/new-skill-image08.jpg) 50% 50% no-repeat;
  position: relative;
  padding: 35% 0 0 0;
  width: 75%;
  margin: 0 0 0 auto;
  background-size: cover;
  flex-basis: 100%;
  box-shadow: 0 0 20px -10px #bbb;
}
@media only screen and (max-width:600px){
  .skill-bg3{
    padding: 50% 0 0 0;
  } }

.skill-bg3::after{
  position: absolute;
  content: '';
  top: 6%;
  width: 100%;
  height: 100%;
  right: 3%;
  background-color: #ECECEC;
  background-color: #a8bed6;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  z-index: -1;
}
@media only screen and (max-width:980px){
  .skill-bg3::after{
    top: -8%;
    right: 8%;
  } }


.skill-bg4{
  background: url(./images/skill-image10.jpg) 50% 50% no-repeat;
  position: relative;
  padding: 35% 0 0 0;
  width: 50%;
  margin:0;
  background-size: cover;
  flex-basis: 100%;
  box-shadow: 0 0 20px -10px #bbb;
  bottom:100px;
  left: 0;
}
@media only screen and (max-width:980px){
  .skill-bg4{
    bottom:20px;
  } }

.skill-bg4::after{
  position: absolute;
  content: '';
  top: 4%;
  width: 100%;
  height: 100%;
  right: -4%;
  background-color: #ECECEC;
  background-color: #a8bed6;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  z-index: -1; 
}
@media only screen and (max-width:980px){
  .skill-bg4::after{
    top: 8%;
    right: -8%;
  } }


.skbgbox{
  flex-basis: 100%;
  margin: 0 10% 10% 0;
  position: relative;
}

.skbgbox::after{
  position: absolute;
  content: '';
  top: 6%;
  width: 100%;
  height: 100%;
  right: 6%;
  background: -webkit-linear-gradient(45deg, #d98842, #db6e21);
  background: linear-gradient(45deg, #d98842, #db6e21);
  background-color: #ECECEC;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
-webkit-background-size: 7px 7px;
  z-index: -1; 
}

.skill_recommend_bg{
  background: url(./images/skill-image03.jpg) 0% 0% no-repeat;
  position: relative;
  padding: 25% 0 0 0;
  width: 100%;
  background-size: cover;
  flex-basis: 100%;
}

.skill_recommend_bg2{
  background: url(./images/skill-image04.jpg) 0% 0% no-repeat;
  position: relative;
  padding: 25% 0 0 0;
  width: 100%;
  background-size: cover;
  flex-basis: 100%;
}

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



.skill_recommend{
  padding: 3em 5em;
  background: #fff;
  margin: -5% auto 5%;
  box-sizing: border-box;
  max-width: 1200px;
  position: relative;
  width:90%;
  box-shadow: 0 0 20px -5px #bbb;
}
@media only screen and (max-width:980px){
  .skill_recommend{
  padding: 5vw;
  width: 100%;
  } }

.skill_recommend ul > li{
  font-size: 1.8em;
  margin: 0 0 0.6em;
  font-weight: bold;
  display: -webkit-flex;
  display: flex;
}
@media only screen and (max-width:980px){
  .skill_recommend ul > li{
  font-size: 1.6em;
  margin: 0 0 1em;
  } }

.skill_recommend ul > li::before{
content:'\f058';
display: inline-block;
margin: 0 10px 0 0;
font-family: 'Font Awesome 5 Free';
font-weight: bold;
}

.skill_recommend p{
  font-size: 1.6em;
  margin: 0 0 2em;
}
@media only screen and (max-width:544px){
  .skill_recommend p{
  font-size: 1.4em;
  margin: 0 0 1em;
  } }


/* --------------------------------------
  スタンス
--------------------------------------- */

#stance{
position: relative;
}

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

.stance-fig{
  max-width: 800px;
}

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

.stance_heading h2{
  font-size: 10.0em;
  letter-spacing: 2px;
  line-height: 1.5;
  word-break: break-all;
  margin: 1em 1em 0;
  /* text-shadow: 0 0 10px #000; */
  z-index: 1;
  /* background: #000; */
  /* padding: 1em; */
  max-width: fit-content;
  position: relative;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  letter-spacing: 5px;
}
@media only screen and (max-width:980px){
.stance_heading h2{
  font-size:6.0em;
  margin: 1em auto;
  } }
  @media only screen and (max-width:600px){
    .stance_heading h2{
      font-size:4.0em;
      } }

.stance_heading h2::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 35%;
  right: 0;
  background-color: #ECECEC;
  background-color: #e4afad;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  z-index: -1;
  bottom: 20%;
}

.stance_heading h3{
  color: #fff;
  font-size: 2.4em;
  letter-spacing: 1px;
  line-height: 1.7;
  word-break: break-all;
  text-align: left;
  margin: 0 0 2em;
  background: #A81A13;
  padding: 0.5em;
  border: double 7px;
  display: flex;
  flex-wrap: wrap;
  font-family: osaka;
  justify-content: center;
  box-shadow: 0px 0px 1px 3px #A81A13;
  position: relative;
  }
  @media only screen and (max-width:980px){
  .stance_heading h3{
    font-size: 2.0em;
    } }

.stance_heading h3::before{
  position: relative;
  font-size: 20px;
  color: #ee5757;
  letter-spacing: 1px;
  width: 100%;
  text-align: center;
}

.st01::before{
  content: '- STANCE01 -';
}

.st02::before{
  content: '- STANCE02 -';
}


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

/*** stanceコンテンツ ***/

.stance_block{
  margin: 80px auto;
  padding: 0;
  position: relative;
  display:-webkit-flex;
  display: flex;
}
@media only screen and (max-width:980px){
.stance_block {
  width: 100%;
  margin: 0;
  padding:0;}}

  @media only screen and (max-width:980px){
    .st_b_c{
  flex-direction: column;
  } }

  @media only screen and (max-width:980px){
    .st_b_cr{
  flex-direction: column-reverse;
  } }

  

.stance-bg1{
  background: url(./images/stance-image02.jpg) 40% 50% no-repeat;
  position: relative;
  padding: 50% 0 0 0;
  width: 100%;
  margin: 0 auto;
  background-size: cover;
  flex-basis: 100%;
}

.stance-bg2{
  background: url(./images/stance-image03.jpg) 40% 50% no-repeat;
  position: relative;
  padding: 50% 0 0 0;
  width: 100%;
  margin: 0 auto;
  background-size: cover;
  flex-basis: 100%;
}

.stance_text01{
  padding: 3vw;
  background: rgb(248 248 248);
  margin: 5% -5% 5% 5%;
  box-shadow: 0 5px 10px rgb(0 0 0 / 25%);
  height: fit-content;
  flex-basis: 100%;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width:980px){
.stance_text01{
  margin: 0;
  box-shadow: 0 0 0;
}}


.stance_text01 h4{
  font-size: 2.0em;
  margin: 0 0 1em;
  border-bottom: 2px dashed #a81a13;
  border-top: 2px dashed #a81a13;
  padding: 0.8em 0.4em;
  color: #a81a13;
}
@media only screen and (max-width:767px){
  .stance_text01 h4{
    font-size: 1.8em;
  }}

.stance_text01 ul {
  padding: 2em 2em 0.5em;
  box-sizing: border-box;
  margin: 2em 0;
  background: #efefef;
}

.stance_text01 ul > li {
  font-size: 1.8em;
  margin: 0 0 1rem;
  display: -webkit-flex;
  display: flex;
  font-weight: bold;
  line-height: 1.7;
  color: #333;
}
@media only screen and (max-width:767px){
  .stance_text01 ul > li{
    font-size: 1.6em;
  }}

.stance_text01 ul > li::before {
  content: '\f075'!important;
  display: inline-block;
  margin: 0 10px 0 0;
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
}

.stance_text01 p,.stance_text02 p{
  font-size: 1.6em;
  margin: 0 0 1em;
}
@media only screen and (max-width:600px){
.stance_text01 p,.stance_text02 p{
      font-size: 1.4em;}}


.stance_text02{
  padding: 3vw;
  background: rgb(248 248 248);
  margin: 5% 5% 5% -5%;
  box-shadow: 0 5px 10px rgb(0 0 0 / 25%);
  height: fit-content;
  flex-basis: 100%;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width:980px){
.stance_text02 {
      margin: 0;
      box-shadow: 0 0 0;
}}



/*アコーディオンコンテンツ*/
.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-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){
.stance-fig2{
  width: 100%;
  padding:0;
  min-width:initial;
    }}

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



/* --------------------------------------
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;
}


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

#salon{
  padding:0;
}

.salon_heading h2{
  font-size: 10.0em;
  letter-spacing: 2px;
  line-height: 1.5;
  word-break: break-all;
  margin:0 auto 1em;
  /* text-shadow: 0 0 10px #000; */
  z-index: 1;
  /* background: #000; */
  /* padding: 1em; */
  max-width: fit-content;
  position: relative;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  letter-spacing: 5px;
}
@media only screen and (max-width:980px){
.salon_heading h2{
  font-size:6.0em;
  } }
  @media only screen and (max-width:600px){
    .salon_heading h2{
      font-size:4.0em;
      } }

.salon_heading h2::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 35%;
  right: 0;
  background-color: #ECECEC;
  background-color: #e4afad;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  z-index: -1;
  bottom: 20%;
}

.salon-container{
  width:100%;
  margin: 0 auto 3em;
  padding: 0;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  max-width: 1200px;
}
@media only screen and (max-width:768px){
.salon-container{
    display:block;
  } }

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

.salonpinfo{
  width:60%;
  margin: 0 50px;
}
@media only screen and (max-width:768px){
.saloninfo{
    width: 90%;
    margin: 0 auto;
  } }

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

#salon tr{
  display:-webkit-flex;
  display: flex;
}


#salon th {
  padding: 10px 5px;
  font-weight: normal;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  display: block;
  background: #A81A13;
  flex-basis: 150px;
}

#salon td {
  text-align: left;
  padding: 10px 20px;
  vertical-align: top;
  background: #fff;
  display: block;
  flex-basis: 80%;
}

#salon a{
color: #337eba;
}

.saloninfo{
  box-shadow: 0 0px 15px 5px rgb(114 114 114 / 25%);
}

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

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

.map_container h3{
  font-size: 2.5em;
  margin:50px 0 20px;
  text-align: center;
  color: #fff;
  text-shadow: rgb(0, 0, 0) 0px 0px 10px;
}
@media only screen and (max-width:480px){
  .map_container h3{font-size: 1.5em;}
}

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

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

.salon-images{
  position: relative;
  width: 60%;
  margin: 0 0 0 -5em;
  z-index: 1;
}
@media only screen and (max-width:768px){
.salon-images{
    width: 90%;
    margin: 50px auto;
  } }

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

.salon-images h3{
  font-size: 2.0em;
  margin:0 0 30px;
  text-align: center;
  color: #fff;
  text-shadow: rgb(0, 0, 0) 0px 0px 10px;
}


/***矢印アニメーション***/
.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:5vw 0;
  position: relative;
  overflow: hidden;
  background-color: #ECECEC;
  /* background-color: #a8bed6; */
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
}

.staff_heading h2{
  font-size: 10.0em;
  letter-spacing: 2px;
  line-height: 1.5;
  word-break: break-all;
  margin: 0 auto 1em;
  /* text-shadow: 0 0 10px #000; */
  z-index: 1;
  /* background: #000; */
  /* padding: 1em; */
  max-width: fit-content;
  position: relative;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  letter-spacing: 5px;
}
@media only screen and (max-width:980px){
  .staff_heading h2{
    font-size:6.0em;
    } }
@media only screen and (max-width:600px){
.staff_heading h2{
  font-size:4.0em;
  } }

  .staff_heading h2::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 35%;
  right: 0;
  background-color: #ECECEC;
  background-color: #e4afad;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  z-index: -1;
  bottom: 20%;
}


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

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

.staff-front-box{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
@media only screen and (max-width:767px){
.staff-front-box{
  margin: 20px auto;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
} }

.staff-front-box ul{
width: 100%;

}

.staff-front-box li{
  position: relative;
  overflow: hidden;
  }
  
  .staff-front-box li h3{
    font-size: 1.6em;
    background: #dfdbd9;
    padding: 3px;
    color: #333;
    font-family: osaka,sans-serif;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
    -webkit-background-size: 3px 3px;
    font-weight: 400;
    transition: 0.6s;
  }

  .staff-front-box li a:hover h3{
    background-color: #ff9b97;
    
  }

  .staff-front-box a{
    /*text-decoration: none;*/
    color: #1653b4;
    display: block;
  }
  
  .staff-front-box img{
    width: 90%;
    margin: 0 auto;
    transition: 0.6s;
  }

  .staff-front-box a:hover img{
    transform:scale(1.05);
  }
  
  .slide__content-wrap{
      left: 50%;
      position: absolute;
      top: 85%;
      width: 50%;
  }
  .slide__content{
      display: block;
      opacity: 0;
      transform: translate(-50%,20%);
      transition: 0s;
  }
  .slide__content.on{
      opacity: 1;
      transform: translate(-50%,-50%);
      transition: .5s;
  }
  
/* --------------------------------------
  スタッフ 下層ページ
--------------------------------------- */

#staff-page{
background: #fbfbfb;
}

.staff-page-head{
height: 400px;
width: 100%;
background:url(./images/page-head.jpg) 50% 50% no-repeat;
background-size:cover;
position: relative;
}

.staff-page-head h1{
  background: #fff;
  position: absolute;
  padding: 1em;
  font-size: 3.0em;
  bottom: 25%;
  width: 90%;
  text-align: center;
  /* box-shadow: 0 0 20px -5px #cecece; */
  max-width: 400px;
  left: 50%;
  transform: translate(-50%,-50%);
    /*color: #2165ac;
    border: 2px solid #2264ac;*/
}
@media only screen and (max-width:600px){
  .staff-page-head h1{
    font-size: 2.4em;
    } }

.staff_page_container{
max-width: 1200px;
margin: 3em auto;
}

.staff_page_fig{
  float: left;
  position: relative;
  margin: 0 0 2em;
}
@media only screen and (max-width:980px){
  .staff_page_fig{
    float:none;
    text-align: center;
    } }

  .staff_page_fig:after{
  position: absolute;
  content: '';
  top: 10px;
  width: 100%;
  height: 100%;
  left:10px;
  background-color: #ECECEC;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  max-width: 300px;
  }
  @media only screen and (max-width:980px){
    .staff_page_fig:after{
      top: 8px;
      left: 52%;
      transform: translate(-50%);
      } }

  .spf_cb:after{
    background-color: #a8bed5;
  }

  .spf_cr:after{
    background-color: #df3056;
  }


.staff_page_fig img{
  width: 100%;
  height: auto;
  max-width: 300px;
  position: relative;
  z-index: 1;
}


.staff_page_box{
  margin: 3em 2em;
  background: #fff;
  box-shadow: 0 0 20px -5px #ddd;
  padding: 2em;
}

.staff_page_text{
  width: calc(70% - 4em);
  float: left;
  padding: 0 0 0 5em;
}
@media only screen and (max-width:980px){
  .staff_page_text{
    width: 100%;
    float:none;
    padding: 0;
    } }

.staff_page_box h2{
font-size: 2.0em;
}

.staff_page_box dl{

}

.staff_page_box dt{
  font-size: 1.6em;
  float: left;
  margin: 0 1em 0 0;
  clear: left;
  padding: 1em 0;
}
@media only screen and (max-width:600px){
  .staff_page_box dt{
    font-size: 1.4em;
    } }

.staff_page_box dd{
  font-size: 1.6em;
  border-bottom: dashed 1px #c1bebe;
  padding: 1em 0;
}
@media only screen and (max-width:600px){
  .staff_page_box dd{
    font-size: 1.4em;
    } }

.staff_page_box .cfp{
  clear: both;
  padding: 0;
}




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

.menu_heading h2{
  font-size: 10.0em;
  letter-spacing: 2px;
  line-height: 1.5;
  word-break: break-all;
  margin: 1em auto;
  /* text-shadow: 0 0 10px #000; */
  z-index: 1;
  /* background: #000; */
  /* padding: 1em; */
  max-width: fit-content;
  position: relative;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  letter-spacing: 5px;
}
@media only screen and (max-width:980px){
  .menu_heading h2{
    font-size:6.0em;
    } }
@media only screen and (max-width:600px){
.menu_heading h2{
  font-size:4.0em;
  } }

.menu_heading h2::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 50%;
  right: 0;
  background-color: #ECECEC;
  background-color: #cfdded;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  z-index: -1;
  bottom: 15%;
}

.menu_container{
    /*padding:0 0 50px;*/
    margin: 0 auto;
    text-align: center;
    width:96%;
    max-width: 1200px;
    -webkit-display: flex;
    display: flex;
}
@media only screen and (max-width:767px){
.menu_container{
  -webkit-flex-direction: column;
  flex-direction: column;
  } }

.menu-bg1{
  background: url(./images/new-menu-image01.jpg) 50% 50% no-repeat;
  position: relative;
  padding: 35% 0 0 0;
  width: 100%;
  margin: 0 auto;
  background-size: cover;
  flex-basis: 100%;
  max-width: 1200px;
}


#menu h3{
  color: #fff;
  font-size: 1.8em;
  letter-spacing: 1px;
  line-height: 1.7;
  word-break: break-all;
  text-align: center;
  margin: 0 0 1em;
  background: #1a65a8;
  padding: 0.5em;
  border: dashed 1px;
  font-family: osaka;
  box-shadow: 0px 0px 1px 3px #1a65a8;
  position: relative;
}
@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;
}
@media only screen and (max-width:600px){
#menu h4{
        /*text-align: center;*/} }
/*@media only screen and (max-width:340px){
      .menu_box h4{
        font-size: 1.2em;} }*/

.left_menu,.right_menu{
  width: 100%;

}

.left_menu{
  margin: 0 50px 0 0;
}

.left_menu dl{
margin: 0 0px 1em;
background: #fff;
padding:0;
}

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

.left_menu dt{
  font-weight: bold;
  margin: 0 0 10px;
  text-align: left;
  font-size: 1.6em;
  float:left;
}
@media only screen and (max-width:768px){
.left_menu dt{
        font-size: 1.4em;} }


.left_menu dt i,.right_menu dt i{
  margin: 0 5px 0;
  vertical-align: initial;
}

.left_menu dd{
  font-size: 1.4em;
  text-align: left;
  float:right;
}


.right_menu dl{
margin: 0 0px 1em;
padding:0;
background: #fff;
}

@media only screen and (max-width:768px){
.right_menu dl{

  } }

.right_menu dt{
  font-weight: bold;
  text-align: left;
  font-size: 1.6em;
  float:left;
}
@media only screen and (max-width:768px){
.right_menu dt{
        font-size: 1.4em;} }

.right_menu dd{
  font-size: 1.4em;
  text-align: left;
  float:right;
}

.menu_explain{
  clear: both;
  float:left!important;
}

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

.menu_alart{
  margin: 30px auto;
  text-align: center;
  font-size:1.2em;
  width: 96%;

}
@media only screen and (max-width:480px){
.menu_alart{
    margin: 25px auto;
    } }


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

#coupon{
  padding: 3vw;
  position: relative;
  overflow: hidden;
  background-color: #ECECEC;
  /* background-color: #a8bed6; */
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
}

.coupon_heading h2{
  font-size: 10.0em;
  letter-spacing: 2px;
  line-height: 1.5;
  word-break: break-all;
  margin:0 auto 0.4em;
  /* text-shadow: 0 0 10px #000; */
  z-index: 1;
  /* background: #000; */
  /* padding: 1em; */
  max-width: fit-content;
  position: relative;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  letter-spacing: 5px;
}
@media only screen and (max-width:980px){
.coupon_heading h2{
  font-size:6.0em;
  } }
  @media only screen and (max-width:600px){
    .coupon_heading h2{
      font-size:4.0em;
      } }
    

.coupon_heading h2::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 35%;
  right: 0;
  background-color: #ECECEC;
  background-color: #e4afad;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  z-index: -1;
  bottom: 20%;
}

.coupon_container{
  max-width: 1200px;
  width: 100%;
  margin: 30px auto;
  position: relative;
}
@media only screen and (max-width:768px){
  .coupon_container{
    text-align: center;
    margin: 30px auto 0;
  }
}

.coupon_fig{
  position: relative;
  margin:0;
}


.coupon_fig img{
  width:100%;
  position: relative;
}

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

.coupon_explain{
text-align: center;
margin:0 0 3em;
}
@media only screen and (max-width:768px){
  .coupon_explain{
    text-align: left;
  }
}

.coupon_box{
  width: calc(100% / 3 - 1em);
  margin: 0 0.5em;
}
@media only screen and (max-width:768px){
  .coupon_box{
    width:100%;
    margin: 0 0 2em;
  }
}

.coupon_box dl{

}

.coupon_box dt{
    color: #fff;
    font-size: 1.8em;
    letter-spacing: 1px;
    line-height: 1.7;
    word-break: break-all;
    text-align: left;
    margin: 0 0 1em;
    background: #A81A13;
    padding: 0.4em;
    border: dashed 1px;
    display: flex;
    flex-wrap: wrap;
    font-family: osaka;
    justify-content: center;
    box-shadow: 0px 0px 1px 3px #a81a13;
    position: relative;
  }
  @media only screen and (max-width:600px){
    .coupon_box dt{
      font-size: 1.6em;
    }
  }

.coupon_box dd{
font-size: 1.8em;
text-align: center;
}
@media only screen and (max-width:600px){
  .coupon_box dd{
    font-size: 1.6em;
  }
}



.coupon_text{
  background: #fff;
  padding: 1em;
}
@media only screen and (max-width:768px){
  .coupon_text{
    position: relative;
    bottom:0;
    margin: 0 auto;
  }
}

#coupon h3{
  font-size: 1.6em;
  text-align: center;
  margin: 0px auto 20px;
  border: 1px solid;
  padding: 10px;
}

#coupon p{
  font-size: 1.6em;
  margin: 0 0 10px;
}
@media only screen and (max-width:768px){
  #coupon p{
    font-size: 1.4em;
    text-align: left;
  }
}

#coupon img{
  width:100%;
}

/* --------------------------------------
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;
  padding:25px 0;
  overflow: hidden;
}

#style img{
width: 100%;
/*max-width: 300px;*/
}

.style_heading h2{
  font-size: 10.0em;
  letter-spacing: 2px;
  line-height: 1.5;
  word-break: break-all;
  margin: 1em 1em;
  /* text-shadow: 0 0 10px #000; */
  z-index: 1;
  /* background: #000; */
  /* padding: 1em; */
  max-width: fit-content;
  position: relative;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  letter-spacing: 5px;
}
@media only screen and (max-width:980px){
.style_heading h2{
  font-size:6.0em;
  margin: 1em auto;
  } }
  @media only screen and (max-width:600px){
    .style_heading h2{
      font-size:4.0em;
      } }

.style_heading h2::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 35%;
  right: 0;
  background-color: #ECECEC;
  background-color: #cfdded;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  z-index: -1;
  bottom: 20%;
}



.hair_style_gallery{
  margin: 0 auto;

}

.hair_style_gallery img{
  width: 100%;
}

.style_text{
  background: #fff;
  margin:0;
  z-index: 1;
  position: relative;
  padding: 1em;
  flex-basis: 100%;
}

.style_text h3{
  color: #555353;
  color: #fff;
  font-size: 1.8em;
  letter-spacing: 1px;
  line-height: 1.7;
  word-break: break-all;
  text-align: center;
  margin: 0 0 1em;
  background: #1a65a8;
  padding: 0.5em;
  border: dashed 1px;
  display: flex;
  flex-wrap: wrap;
  font-family: osaka;
  justify-content: center;
  box-shadow: 0px 0px 1px 3px #1a65a8;
  position: relative;
}
@media only screen and (max-width:768px){
  .style_text h3{
    font-size: 1.6em;
  } }

.style_text p{
font-size: 1.3em;
text-align: left;
}

.hair_style_gallery ul{
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* afterを追加するだけ！！ */
.hair_style_gallery ul::after{
  content:"";
  display: block;
  width:45%;
  margin: 10px;
}

.hair_style_gallery li{
  width: calc(50% - 2em);
  margin: 1em 1em;
  position: relative;
  padding: 1em;
  /* max-height: fit-content; */
  flex-grow: 1;
  align-items: stretch;
  display:-webkit-flex;
  display: flex;

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

.hair_style_gallery li::after{
  position: absolute;
  content: '';
  bottom: 0;
  width: 100%;
  height: 100%;
  right: 0%;
  background-color: #ECECEC;
  /*background-color: #a8bed6;*/
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  z-index: -1;
  transition: 0.6s;
}

.hair_style_gallery li:hover::after{
  background-color: #a8bed6;
  
}

.hair_style_gallery li figure{
      overflow: hidden;
      margin: 0 1em 0 0;
      flex-basis: 50%;
       }

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

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


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

#testimonial{
padding:0 0 50px;
width:100%;
margin:0 auto;
position: relative;
overflow: hidden;
}


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


.voice_heading h2{
  font-size: 10.0em;
  letter-spacing: 2px;
  line-height: 1.5;
  word-break: break-all;
  margin: 1em 1em;
  /* text-shadow: 0 0 10px #000; */
  z-index: 1;
  /* background: #000; */
  /* padding: 1em; */
  max-width: fit-content;
  position: relative;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  letter-spacing: 5px;
}
@media only screen and (max-width:980px){
.voice_heading h2{
  font-size:6.0em;
  margin: 1em auto;
  } }
  @media only screen and (max-width:600px){
    .voice_heading h2{
      font-size:3.0em;
      } }

.voice_heading h2::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 35%;
  right: 0;
  background-color: #ECECEC;
  background-color: #cfdded;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  z-index: -1;
  bottom: 20%;
}

.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;
}



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

#blog{
padding: 0 0 2em;
}

.blog_heading h2{
  font-size: 10.0em;
  letter-spacing: 2px;
  line-height: 1.5;
  word-break: break-all;
  margin: 1em auto;
  /* text-shadow: 0 0 10px #000; */
  z-index: 1;
  /* background: #000; */
  /* padding: 1em; */
  max-width: fit-content;
  position: relative;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  letter-spacing: 5px;
}
@media only screen and (max-width:980px){
.blog_heading h2{
  font-size:6.0em;
  margin: 1em auto;
  } }
  @media only screen and (max-width:600px){
    .blog_heading h2{
      font-size:3.0em;
      } }

.blog_heading h2::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 35%;
  right: 0;
  background-color: #ECECEC;
  background-color: #cfdded;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  z-index: -1;
  bottom: 20%;
}

#breadcrumb{
  padding:10px 3vw;
  margin: 0;
}
@media only screen and (min-width:768px){
  #breadcrumb{
    padding: 10px 20px;
    } }


#breadcrumb a{

}

.breadcrumb_inner{
max-width: 1200px;
margin: 0 auto;
width:100%;
}

#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: 100%;
  box-sizing: border-box;
  text-align: center;
  margin: 0px auto;
  max-width: 1200px;
  background: #fff;
  display: -webkit-flex;
  display: flex;
}
@media only screen and (max-width:1200px){
.blog_container{
padding: 0 3vw;
  }
}
@media only screen and (max-width:600px){
  .blog_container{
  -webkit-flex-direction: column;
  flex-direction: column;
    }
  }

@media only screen and (max-width:768px){
.ba_flex{
display:flex;
} }

.blog_article{
  width: calc(100% / 3 - 1em);
  display: block;
  padding: 0;
  margin:0 1em;
}
@media only screen and (max-width:768px){
  .blog_article{
    width: 100%;
    margin:0;
  } }
  @media only screen and (max-width:600px){
    .blog_article{
      margin:0 0 1.6em;
    } }


@media only screen and (max-width:768px){
.blog_content_inner{
  padding: 0 0 0 1em;
  flex-basis: 100%;
} }


.blog_thum_fig{
  overflow: hidden;
}
@media only screen and (max-width:768px){
  .blog_thum_fig{
    flex-basis: 50%;
    margin: 0;
  } }


.blog_thumb{
  width: 100%;
  margin: 0;
  padding: 100px;
  background-size: cover;
  background-position: 50% 50%;
  transition: 0.6s;
}
@media only screen and (max-width:768px){
  .blog_thumb{
    padding: 50px;
  }
}

.blog_thumb img{
  width: 100%;
  height: auto;

}

.blog_article a:hover .blog_thumb{
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  }


h3.blog_title{
  font-size: 1.6em;
  color: #1551b1;
  margin: 0.6em 0;
  text-align: left;
}
@media only screen and (max-width:768px){
  h3.blog_title{
    margin: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;
  font-size: 1.4em;
}
@media only screen and (max-width:380px){
  .blog_excerpt{
    font-size: 1.2em;
  } }
.blog_excerpt a{
color:#333;
}

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

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

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

.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;
  width: 55px!important;
  height: 55px!important;
}


.slick-prev:before,.slick-next:before{
  font-size: 28px!important;
  background: #1a65a8;
  padding: 8px 15px;
  border-radius: 50px;
  box-shadow: 0 0px 4px #166fc5;
}

.slick-next:before{
      content: '\f105'!important;
      font-family: "Font Awesome 5 Free"!important;
      font-weight: bold;
      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;
}


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


.content_inner{
  max-width: 1200px;
  margin: 0px auto;
  padding:0;
}

.single_flex{
  display:block;
  width: 100%;
  justify-content: space-around;
}
@media only screen and (min-width:768px) {
.single_flex{
  display: -webkit-flex;
  display: flex;
  width:100%}}

.entry_container{
  width: 100%;
  margin: 0px auto;
  padding: 0 3vw;
  background: #fff;
  box-sizing: border-box;
}

@media only screen and (min-width:768px){
.entry_container{
  margin:0 auto;
  padding: 0 20px;
} }

h1.entry_title{
  font-size: 1.8em!important;
  margin:0 0 1em;
  text-align: center;
}
@media only screen and (min-width:768px){
  h1.entry_title{
    font-size: 3.2em!important;
    margin:0 0 0.4em;
    text-align: center;
  } }

h1.entry_title a{
color:#333;
}

.meta_entry{
  padding:0 0 2em;
}

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

.blog_head{font-size: 14px;
  margin: 0 0 1.8em;
  line-height: 1.8;
  clear:both;

}

.blog_header{
  text-align:center;
}

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

.single_post_entry{
  margin: 10px auto;
}

.single_post_entry p{
  font-size: 14px;
  margin: 0 0 1.8em;
  line-height: 1.8;
}

.single_post_entry img{
  max-width:750px;
  width: 100%;
  height:auto;
}

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

.single_post_entry iframe{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

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

.cat a{
  color:#fff;
}

.nav_links{
  text-align: center;
  font-size: 1.6em;
  margin: 3em 0;
}

.nav_links i{
  vertical-align: baseline;
  padding: 0 5px;
}

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

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


.prev_link a:hover,.next_link a:hover{
  box-shadow: 2px 2px 3px #aaaaaa;
  opacity: 0.8;
}

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

#sidebar{
  /*width: auto;*/
  background: #fff;
  display: block;
  height: max-content;
  max-width: 750px;
  padding: 0 3vw;
  width: 100%;
  margin: 0;
}

@media only screen and (min-width:768px) {
#sidebar{
  background: #fff;
  display: block;
  height: max-content;
  padding: 0 20px 0 0px;
  margin: 0 auto;
  max-width: 300px;
  }}


#sidebar .widget_categories{

}

#sidebar h3{
  margin-bottom: 10px;
  font-size: 20px;
  background: #1c64a8;
  padding: 6px;
  color: #fff;
}
#sidebar .widget{
  margin-bottom: 25px;
  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 0 50px;
}

.home_container{
width:100%;
max-width: 1200px;
margin: 0 auto;
text-align: center;
padding: 2em 3vw;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
justify-content: center;
}



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

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

.page-blog-header h1{
  position: absolute;
    color:#fff;/*文字は白に*/
    font-weight: bold; /*太字に*/
    font-size: 32px;/*サイズ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;
    text-shadow: 3px 3px 10px #000;
}
@media only screen and (max-width:600px){
  .page-blog-header h1{
  font-size: 24px;
  } }

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

.home_contents_box{
  box-shadow: 0px 3px 10px -3px #ccc;
  background: #fff;
  width: calc(50% - 1.6em);
  margin: 0.8em;
}
@media only screen and (max-width:600px) {
  .home_contents_box{
    margin: 0 0 5vw;
    width: 100%} }

.home_contents_box a{
  color: #000;
}


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

.home_contents_title{
  font-size: 1.6em;
      padding: 0.5em;
      margin: 0;
      text-align: left;
}

.home_contents_title a{

}

.home_thum{
  padding: 0;
  margin:0;
  overflow: hidden;
}
.home_thum figure{
    overflow: hidden;
}

.home_thum img{
  width: 100%;
  height: auto;
  -webkit-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}
.home_thum:hover img{
-webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-opacity: .8;
    -moz-opacity: .8;
    opacity: .8;
  }

.home_contents_meta{
  -webkit-display: flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

.home_contents_date{
    padding: 5px;
}

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

.home_contents_entry{
  width:100%;
  padding: 1em 1.5em;
}


.home_contents_entry p{
  text-align: left;
  font-size: 1.2em;
}


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


/*archive.php用 css */

#contents{
  padding: 0px 0 50px;
  /*background: #eee*/
}


.arc_container{
  width: 100%;
  max-width: 1200px;
  margin: 5em auto;
  text-align: center;
  padding: 0 20px;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

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

.arc_head h1{
  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:600px){
.arc_head h1{
font-size: 24px;
width: 90%;
} }

.arc_head h1 a{
  color:#fff;
}


.arc_box{
  margin: 0 0 2em;
  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;
  width: calc(100% / 2 - 1em);
}

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

.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{

}

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

.arc_cat,.arc_date{
  padding: 5px;
  
  background: #ddd;
  display: inline-block;
  width: calc(50% - 3px);
}
@media only screen and (max-width:600px){
  .arc_cat,.arc_date{
    width: 100%;
    margin: 2px 0;
  } }

.entry_content{
  width:100%;
  padding: 0 5px;
}


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

.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 {
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 200;
}

/*.pagination a {
  margin: 0 5px;
  width: 10px;
  height: 10px;
  display: inline-block;
  overflow: hidden;
  background: #e4e4e4;
  border-radius: 25px;
}
.pagination a.active {
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
    background: #58ace3;
}*/

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

a.page-numbers .current{
	background:rgba(0,0,0,1);
	border:solid 1px rgba(0,0,0,1);
	color:rgba(255,255,255,1);
  margin: 0 5px;
}

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

.skill-mov{
  margin:3% auto;
  text-align: center;
  max-width: 1000px;
}

.movie{
  max-width: 1000px;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
}

.movie iframe{
    width: 100%;
    height: 100%;
}

.movie_heading::after{
  position: absolute;
content: '';
top: 3%;
left: -7%;
width: 110%;
height: 90%;
background:#815236;
z-index: -1;
}

.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;
}

/* --------------------------------------
  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:1%;
right: 8%;
transform: translate(10%,25%);
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;
  } }

/* --------------------------------------
  予約ボタン
--------------------------------------- */

.bt-sec{
  text-align: center;
  padding:0 5vw;
}

.bt-thr{
  text-align: center;
}

.linbtn{
max-width: 400px;
max-width: 500px;
padding: 1.6em;
background-color: #F24B4B;
font-size: 2em;
font-weight: bold;
text-shadow: rgb(0 0 0 / 20%) 3px 3px 3px;
box-shadow: #b41212 0px 5px, rgb(0 0 0 / 20%) 0px 10px;
border: none;
color: #FFFFFF;
margin:1em 0;
width: 100%;
letter-spacing: 1px;
border-radius: 5px;
  }


  .linbtn:hover{
    transform: translateY(7px);
    background-color: #F24B4B;
    box-shadow: #b41212 0px 3px, rgb(0 0 0 / 20%) 0px 6px;
    text-decoration: none;
    -webkit-transition: 0.2s ease-in;
    -moz-transition: 0.2s ease-in;
    -o-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
  }


.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: 1.6em;
      max-width: 300px;
      width: 94%;
      padding:5px;
      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-header a{
  font-size: 1.1em;
  max-width: 200px;
  } }

.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 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:#fff;
      border: 1px solid #337eba;
      color: #000;
      font-size: 1.6em;
      /*width: 90%;*/
      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:480px){
.button a{
  font-size:1.4em;
} }

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

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

.btn_c_re a{
  border: 1px solid #e44444;
  color:#e44444!important;
}

.btn_c_re a:hover {
  opacity: 0.9;
  background:#e44444;
  color:#fff!important;
  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{
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 1.5em 1.0em;
}
@media only screen and (max-width:1024px){
  .button2{
    right: 60px;
  } }
  @media only screen and (max-width:768px){
    .button2{
      padding:0;
    } }


.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: none;
  border: 1px solid;
  font-size: 1.4em;
  max-width: 250px;
  width: 100%;
  padding: 10px;
  text-align: center;
  display: block;
  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:768px){
  .button2 a{
    background: #246ab7;
    font-size: 2.2em;
    border:none;
    padding: 5px 15px;
    text-align: center;
    display: block;
    position: relative;
    margin: 0px auto 6px;
    line-height: 1.5;
    text-decoration: none;
    border-radius: 50%;
    color:#fff;
  } }

  .button2 a i{
    vertical-align: baseline;
  }

.button2 a:hover {
  opacity: 0.9;
  color:#fff;
  background-color: #af3839;
  transition: 0.4s;
  text-shadow: none;
  border: 1px solid #af3839;
}
@media only screen and (max-width:768px){
  .button2 a:hover{
    border:none;
  }}

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

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


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

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


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

#float_tel_reserve a{
  display: none;
}
@media only screen and (max-width:600px){

#float_tel_reserve{
    display: block;
    margin: 0;
    z-index: 100;
    flex-basis: 100%;
}

#float_tel_reserve a {
  background:#337eba;
  color: #fff!important;
  text-decoration: none;
  padding: 5px;
  font-size: 1.2em;
  text-align: center;
  display: block;
  line-height: 25px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  padding:1em;
  width:auto;
}

#float_tel_reserve a i{
  vertical-align: baseline;
  padding:0 5px 0 0;
 }

}

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

#float_web_reserve a{
display: none;
}

@media only screen and (max-width:600px){
#float_web_reserve{
  margin: 0;
  display: block;
  flex-basis: 100%;
}

#float_web_reserve a {
  background:#e44444;
      color: #fff!important;
      text-decoration: none;
      padding: 5px;
      font-size: 1.2em;
      text-align: center;
      display: block;
      line-height: 25px;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      padding:1em;
      width:auto;
    } 

    #float_web_reserve a i{
      vertical-align: baseline;
      padding:0 5px 0 0;
     }
  
  }


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

#float_line_reserve a{
display: none;
}
@media only screen and (max-width:544px){
#float_line_reserve{
  margin: 0;
  display: block;
  flex-basis: 100%;
} }

#float_line_reserve a {

}

@media only screen and (max-width:544px){
#float_line_reserve a{
  background: #00c000;
  color: #fff!important;
  text-decoration: none;
  padding: 5px;
  font-size: 1.4em;
  text-align: center;
  display: block;
  line-height: 25px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  padding: 10px;
  width:auto;
} }


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

#page-top {
  position: fixed;
  bottom: 5%;
  right: 10px;
  font-size: 80%;
  z-index: 998;
}
@media only screen and (max-width:480px){
#page-top{
  bottom: 100px;
  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:600px){
  .container{
  padding:0;
  } }


/********************
/* ロゴ
*********************/

.logo{
float: left;
margin:10px;
}

.logo img{
width: 100px;
}

.header_inner_wrap{

}

.head_inner{
width:96%;
/*max-width:1000px;*/
margin:0 auto;
position:relative;
}
@media only screen and (max-width:768px){
.head_inner {
  padding:0;
   } }


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

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

/* header */
#top-head {
width: 100%;
position:relative;
line-height: 1;
z-index: 999;
background: #fff;
border-bottom: 1px solid #ddd;
}

#top-head a,
#top-head {
    /*color: #000;*/
    text-decoration: none;
}

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


.is-animation h1{
  color: #000;
}

.is-animation .logo img {
  width:100px;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: linear;
}

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

.is-animation .head_reserve img{
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: linear;
}

.is-animation #nav-bg{
  top: -10px;
}

.is-animation #nav-toggle{
  top:11px;
}

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

#global-nav{
  position: absolute;
  bottom:0;
  right:180px;
}

#global-nav ul {
    list-style: none;
    margin: 0 auto;
    text-align: center;
    display: -webkit-flex;
    display: flex;
    padding: 0 0 1.5em;
}

#global-nav ul li a {
  padding: 10px 5px;
  display: block;
  text-transform: uppercase;
  font-size: 1.4em;
}
@media only screen and (max-width:1024px){
  #global-nav ul li a {
    font-size: 1.0em;
  }
}

#global-nav ul li:hover a{
  background: #fd554b;
  color: #fff;
  transition: 0.4s ease-in;
}

#nav-bg{
  display: none;
}

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

/* ***********************************************************
* #global-nav
* *********************************************************** */
.open #global-nav {
  z-index: 1000;
  visibility: visible;
}
#global-nav {
  visibility: hidden;
  position: fixed;
  display: table;
  vertical-align: middle;
  color: #fff;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  font-size: 16px;
}
#global-nav ul {
  display: table-cell;
  vertical-align: middle;
  list-style: none;
}
#global-nav a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 10px 0;
}

/* ***********************************************************
* nav-list
* *********************************************************** */
#global-nav ul li {
  opacity: 0;
  -webkit-transform: scaleX(0) translateX(-260px);
  transform: scaleX(0) translateX(-260px);
  -webkit-transition: none;
  transition: none;
}
.open #global-nav ul li {
  opacity: 1;
  -webkit-transform: scaleX(1) translateX(0);
  transform: scaleX(1) translateX(0);

  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;

  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}
.open #global-nav ul li:nth-child(2) {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
.open #global-nav ul li:nth-child(3) {
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}
.open #global-nav ul li:nth-child(4) {
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
}
.open #global-nav ul li:nth-child(5) {
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
}
.open #global-nav ul li:nth-child(6) {
  -webkit-transition-delay: .6s;
  transition-delay: .6s;
}
.open #global-nav ul li:nth-child(7) {
  -webkit-transition-delay: .7s;
  transition-delay: .7s;
}

.open #global-nav ul li:nth-child(8) {
  -webkit-transition-delay: .8s;
  transition-delay: .8s;
}

.open #global-nav ul li:nth-child(9) {
  -webkit-transition-delay: .9s;
  transition-delay: .9s;
}

.open #global-nav ul li:nth-child(10) {
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}

.open #global-nav ul li:nth-child(11) {
  -webkit-transition-delay: 1.1s;
  transition-delay: 1.1s;
}
.open #global-nav ul li:nth-child(12) {
  -webkit-transition-delay: 1.2s;
  transition-delay: 1.2s;
}

/* ***********************************************************
* #nav-bg
* *********************************************************** */
#nav-bg {
  content: "";
  width: 3000px;
  height: 3000px;
  margin-right: -1460px;
  margin-top: -1460px;
  top: -20px;
  right: -10px;
  display: block;
  position: absolute;
  -webkit-background: linear-gradient(45deg, #215c9d, #2476d2);
  background: linear-gradient(45deg, #215c9d, #2476d2);
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(.015);
  transform: scale(.015);
  display:block;

}
.open #nav-bg {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .6s ease-out;
  transition: all .6s ease-out;
}

/* ***********************************************************
* #nav-toggle
* *********************************************************** */
#nav-toggle {
  display: block;
  position: absolute;
  right: 5px;
  top: 2px;
  width: 50px;
  height: 45px;
  cursor: pointer;
  padding: 10px 11px;
  z-index: 1001;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

#nav-toggle div {
  position: relative;
}
#nav-toggle span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  left: 0;
  zoom: 1;
  -webkit-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}

#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 8px;
}
#nav-toggle span:nth-child(3) {
  top: 16px;
}
.open #nav-toggle {
  background: transparent;
}
.open #nav-toggle span {
  background: #fff;
}

.open #nav-toggle span:nth-child(1) {
  top: 9px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  zoom: 1;
}
.open #nav-toggle span:nth-child(2) {
  width: 0;
  left: 50%;
}
.open #nav-toggle span:nth-child(3) {
  top: 9px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  zoom: 1;
}

}

/* 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;
}


.navmenu li a{
  coursor:pointer;
}

/* -----------------------------------------
header_img / video 2026/05~
----------------------------------------- */

.main_header{
  vertical-align: bottom;
  position: relative;
  overflow: hidden;
  padding: 0 0 5vw 10vw;
}

/* img と video の両方に同じ指定を適用 */
.main_header img,
.main_header video{
  width: 100%;
  height: auto;
  display: block;  /* 下の余白消し */
}

/* 動画専用の追加指定 */
.main_header_video{
  /* GPU合成で描画を軽く */
  transform: translateZ(0);
  will-change: transform;
  /* ポスターから自然に切り替わるためのフェードイン */
  opacity: 0;
  transition: opacity 0.6s ease-in;
  /* poster画像を動画と同じ比率で表示 */
  object-fit: cover;
  background-color: #1a1a1a;
}

.main_header_video.is-loaded{
  opacity: 1;
}

/* 通信節約モード / アニメーション抑制設定のユーザー対応 */
@media (prefers-reduced-motion: reduce){
  .main_header_video{
    /* 動画を再生せず、posterを静止画として表示 */
    opacity: 1;
  }
}


.main_header::before{
  /* 透過した黒を上から重ねるイメージ */
    background-color: rgb(64 62 62 / 35%);
    /* 自由に位置指定 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    margin: 0 0 5vw 10vw;
    /* 動画の上に来るように明示 */
    z-index: 1;
}

.main_header::after{
  position: absolute;
  content: '';
  top: 10%;
  width: 100%;
  height: 100%;
  right: -6%;
  background-color: #ECECEC;
  background-color: #a8bed5;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  z-index: -1;
}


.main_header .header-bg-text{
  position: absolute;
  top: 50%;
  left: 25%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 45%;
  /* テキストを最前面に */
  z-index: 2;
}
@media only screen and (max-width:544px){
  .main_header .header-bg-text{
    width: 60%;
    left: 32%;
  }
}

/* ↓↓↓ ここから下は元のままでOK ↓↓↓ */

.main_header .header-bg-text h1{
  font-size:3.5vw;
  font-weight:bold;
  line-height: 1.5;
  color:#fff;
  text-shadow: 0 0 10px #000;
}
@media only screen and (max-width:544px){
  .main_header .header-bg-text h1{
    font-size:8vw;
  }
}

.main_header .header-bg-text span{
  background-color: #000;
  padding: 0.2em;
  line-height: 1.9;
}

.main_header .header-bg-text p{
  font-size:4vw;
  color:#fff;
}
@media only screen and (max-width:544px){
  .main_header .header-bg-text p {
    font-size: 3em;
  }
}

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

.header_img img{
  width:100%;
}

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

.main_header{
  vertical-align: bottom;
  position: relative;
  overflow: hidden;
  padding: 0 0 5vw 10vw;
}

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


.main_header::before{
  /* 透過した黒を上から重ねるイメージ */
    background-color: rgb(64 62 62 / 35%);
    /* 自由に位置指定 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    margin: 0 0 5vw 10vw;
}

.main_header::after{
  position: absolute;
  content: '';
  top: 10%;
  width: 100%;
  height: 100%;
  right: -6%;
  background-color: #ECECEC;
  background-color: #a8bed5;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 7px 7px;
  z-index: -1;
}



.main_header .header-bg-text{
  position: absolute;
  top: 50%;
  left: 25%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* text-align: center; */
  width: 45%;
}
@media only screen and (max-width:544px){
  .main_header .header-bg-text{
    width: 60%;
    left: 32%;
    } }

.main_header .header-bg-text h1{
  font-size:3.5vw;
  font-weight:bold;
  line-height: 1.5;
  color:#fff;
  text-shadow: 0 0 10px #000;
}
@media only screen and (max-width:544px){
.main_header .header-bg-text h1{
  font-size:8vw;
  } }

.main_header .header-bg-text span{
background-color: #000;
padding: 0.2em;
line-height: 1.9;
}
@media only screen and (max-width:544px){
.main_header .header-bg-text span{
  
  } }

.main_header .header-bg-text p{
  font-size:4vw;
  color:#fff;
}
@media only screen and (max-width:544px){
.main_header .header-bg-text p {
  font-size: 3em;
  } }

/* SP: FV 高さを抑える（余白レイアウトは維持） */
@media only screen and (max-width:544px){
  .main_header{
    padding: 0 0 5vw 10vw;
    box-sizing: border-box;
    /* 「画面いっぱい」だと大きすぎるため、FV高さを約75%に */
    height: 75svh;
    height: 75dvh;
    min-height: 420px;
  }

  .main_header img,
  .main_header video{
    position: static;
    width: 100%;
    height: calc(75svh - 5vw);
    height: calc(75dvh - 5vw);
    min-height: 360px;
    object-fit: cover;
    object-position: center center;
  }

  .main_header::before{
    margin: 0 0 5vw 10vw;
  }
}

.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;
}

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

#contact{
padding: 5em 0 0;
overflow: hidden;
}

.contact_inner{
  max-width: 1200px;
  margin: 0 auto;
  padding:5em;
  background-color: #cdcdcd;
  /* background-color: #edcbc9; */
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 4px 4px;
}
@media only screen and (max-width:600px){
  .contact_inner{
    padding:5vw;
    } }

.contact_flex{
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

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


.contact_head{
  background: #000;
  color: #fff;
  padding: 20px;
  width: 100%;
  text-align: center;
  flex-basis: 100%;
  margin: 0 0 2em;
}
@media only screen and (max-width:768px){
  .contact_head h2{

  } }

.contact_head h2{
  font-size: 3.0em;
  margin: 0;
}
@media only screen and (max-width:768px){
  .contact_head h2{
  font-size:2.0em;
  } }

.tel_reserve{
  flex-basis: 100%;
  width: 100%;
  margin: 0 1em 0 0;
}
@media only screen and (max-width:768px){
  .tel_reserve{
    margin: 0 0 1em;
  } }

.web_reserve{
  flex-basis: 100%;
  width: 100%;
}

/* --------------------------------------
 下層ページ CONTACT
--------------------------------------- */

#contact_page{
  padding:5em;
  background-color: #cdcdcd;
  /* background-color: #edcbc9; */
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
  -webkit-background-size: 4px 4px;
}
@media only screen and (max-width:768px){
  #contact_page{
    padding:5vw 3vw;
  } }

.contact_page_inner{
  max-width: 1200px;
  margin: 0 auto;
}


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

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

.sitemap_head h1{
  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;
}

.sitemap_container{
  padding: 50px 0 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.sitemaps_list{
padding:3em 2em 1em;
background: #fff;
width: 96%;
margin: 0 auto;
}

.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:#1a65a8;
  color: #fff;
  position: relative;
  /*padding: 10px 5px 5px;*/
}

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

.footer_social{
  background:#3879b2;
}

.footer_social ul{
  display: -webkit-flex;
  display:flex;
}

.footer_social ul > li{
  font-size: 1.6em;
  margin: 0;
  padding:0.6em;
  text-align: center;
  flex-basis: 100%;
}
@media only screen and (max-width:600px){
  .footer_social ul > li{
    font-size: 1.2em;} }

.footer_social ul > li a{
  color: #fff;
  transition: 0.6s;
}

.footer_social ul > li i{
  vertical-align: baseline;
  padding:0 4px 0 0;
}

#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;
}
@media only screen and (max-width:600px){
#footernav ul{
  justify-content: end;
  -webkit-justify-content:end} }


#footernav li{
  box-sizing: border-box;
  margin: 5px 0;
}

#footernav li a{
  display: inline;
  font-size: 1.4em;
  transition: 1.5s;
  -webkit-transition: 1.5s;
  color: #fff;
  border-right: 1px solid #fff;
  padding: 0 10px 0;
}

#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:600px){
#gfooter small{
padding: 5px 0 86px;
} }


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

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

.grid01{
width:33%;
}

.grid02{
width:50%;
}

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

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

.inner2{
  width:96%;
  margin: 0 auto;
  padding: 20px 0;
  color: #000;
  font-family: "Noto Sans Japanese";
  /*background: rgba(255, 255, 255, 0.9);*/
  /*border-radius: 25px;*/
  /* font-size: 120%; */
}

.inner3{
width:96%;
margin:0 auto;
padding:30px 0;
/*color: #fff;*/
font-family:"Noto Sans Japanese";
background:rgba(255,255,255,0.8);
}

.inner4{
width:100%;
margin:0 auto;
/*padding:20px 0;*/
color: #000;
font-family:"Segoe UI", Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
/*background:#fff;*/
}


/* --------------------------------------
  ナビゲーション* 960-768 px
--------------------------------------- */
#topnav{
width:100%;
}

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


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

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

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

.r_fss{
font-size:85%;
}


.inner2{
  width:96%;
  margin: 0 auto;
  padding: 20px 0;
  color: #000;
  font-family: "Noto Sans Japanese";
  /*background: rgba(255, 255, 255, 0.9);*/
  /*border-radius: 25px;*/
  /* font-size: 120%; */
}

.inner3{
width:96%;
margin:0 auto;
padding:30px 0;
/*color: #fff;*/
font-family:"Noto Sans Japanese";
background:rgba(255,255,255,0.8);
}

.inner4{
width:100%;
margin:0 auto;
/*padding:20px 0;*/
color: #000;
font-family:"Segoe UI", Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
/*background:#fff;*/
}

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 {
    width: 100%;
    z-index: 999;
    position: relative;
    }


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

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


/* -----------------------------------------
Smart Phone
※ 幅600px以下のデバイスには、下記のスタイルが継承されます。
----------------------------------------- */

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

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


  /* -----------------------------------------

Smart Phone
※ 幅480px以下のデバイスには、下記のスタイルが継承されます。

----------------------------------------- */

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

/* --------------------------------------
  店舗情報 480px以下
--------------------------------------- */

.gmap{
width:100%;
}

/* --------------------------------------
  スタイル 480px以下
--------------------------------------- */

#style dl{
width: 94%;
display: block;
margin: 10px auto;

}


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