@charset "UTF-8";

html,body {
	overflow-x: hidden;
	overflow-y: visible;
}
body {
	font-size:20px;
	margin: 0;
	padding: 0;
	line-height:2;
    color: #666666;
    background: url("../images/bg_body.png")repeat-y center top/100% auto;
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
	-webkit-text-size-adjust: 100%;
}
.mincho {
 	font-family: "游明朝", "Yu Mincho", "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
a, a:link, a:visited, a:hover, a:active {
	text-decoration: none;
	color: #949494;
}
h1, h2, h3 {
 	margin: 0;
	padding: 0;
	font-weight: normal;
}

img {
  width: 100%;
	max-width: 850px;
	height: auto;
	vertical-align: bottom;
}

.red {
	color: #e60012;
}
.blue {
	color: #0000ff;
}
.beige {
	color: #9f886e;
}
.beige2 {
    padding: 1% 2%;
    color: #fff;
	background-color: #666666;
    border-radius: 5px;
}
.bold {
	font-weight: bold;
}
.normal {
	font-weight: normal !important;
}
.bgy {
	background-color: #fff100;
}
.ul {
	text-decoration: underline;
}

.p0 { padding: 0 !important;}
.p5 {padding: 5% 0 !important;}
.p8 {padding: 8% 0 !important;}
.p10 {padding: 10% 0 !important;}

.pt0 { padding-top: 0 !important;}
.pt1 { padding-top: 1% !important;}
.pt3 { padding-top: 3% !important;}
.pt5 { padding-top: 5% !important;}
.pt8 { padding-top: 8% !important;}
.pt10 { padding-top: 10% !important;}

.pb0 { padding-bottom: 0 !important;}
.pb1 { padding-bottom: 1% !important;}
.pb3 { padding-bottom: 3% !important;}
.pb5 { padding-bottom: 5% !important;}
.pb8 { padding-bottom: 8% !important;}
.pb10 { padding-bottom: 10% !important;}

.mt0 { margin-top: 0 !important;}
.mt1 { margin-top: 1% !important;}
.mt3 { margin-top: 3% !important;}
.mt5 { margin-top: 5% !important;}
.mt8 { margin-top: 8% !important;}
.mt10 { margin-top: 10% !important;}

.mb0 { margin-bottom: 0 !important;}
.mb1 { margin-bottom: 1% !important;}
.mb3 { margin-bottom: 3% !important;}
.mb5 { margin-bottom: 5% !important;}
.mb8 { margin-bottom: 8% !important;}
.mb10 { margin-bottom: 10% !important;}



/* font */
.f10 { font-size: 50% !important;}
.f12 { font-size: 60% !important;}
.f14 { font-size: 70% !important;}
.f16 { font-size: 80% !important;}
.f18 { font-size: 90% !important;}
.f20 { font-size: 100% !important;}
.f22 { font-size: 110% !important;}
.f24 { font-size: 120% !important;}
.f26 { font-size: 130% !important;}
.f28 { font-size: 140% !important;}
.f30 { font-size: 150% !important;}
.f32 { font-size: 160% !important;}
.f34 { font-size: 170% !important;}
.f36 { font-size: 180% !important;}
.f38 { font-size: 190% !important;}
.f40 { font-size: 200% !important;}
.f42 { font-size: 210% !important;}
.f44 { font-size: 220% !important;}
.f45 { font-size: 225% !important;}
.f48 { font-size: 240% !important;}
.f50 { font-size: 250% !important;}
.f54 { font-size: 270% !important;}
.f58 { font-size: 290% !important;}
.f60 { font-size: 300% !important;}
.f64 { font-size: 320% !important;}
.f68 { font-size: 340% !important;}
.f70 { font-size: 350% !important;}
.f72 { font-size: 360% !important;}

.image_fr {
	float: right;
	width: 200px;
}
.w_50 {
	width: 50%;
	margin: 0 auto;
}
.w_60 {
	width: 60%;
	margin: 0 auto;
}
.w_70 {
	width: 70%;
	margin: 0 auto;
}
.w_80 {
	width: 80%;
	margin: 0 auto;
}



/*--------------------------------------
背景用*/
.bg_brown {
    background-color: #c5b8a8 !important;
}
.bg_gray {
    background-color: #f6f6f6 !important;
}
.bg_brown2 {
    background-color: #9f886e !important;
}
.bg_gray2 {
    background:url(../images/bg_grayimg.png)repeat-y center center/100% auto;
}
.bg_blue {
    background-color: #E9F4F3 !important;
}
.bg_blue .title01 {
    color: #666666 !important;
}
.bg_blue .txtw {
    color: #666666 !important;
}
.bg_pink {
    background-color: #fff6fb !important;
}
.bg_pink .title01 {
    color: #666666 !important;
}
.bg_pink .txtw {
    color: #666666 !important;
}
.bg_gray3 {
    background:url(../images/bg_grayimg.png)repeat-y center center/100% auto;
}
.bg_gray3 .title01 {
    color: #666666 !important;
}
.bg_gray3 .txtw {
    color: #666666 !important;
}
/*--------------------------------------
ヘッダー用*/
header {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.slick-slider{
  margin: 0;
  padding: 0;
}
.slick-slider img {
  width: 100%;
  height: 100%;
}
.slick-list {
    width: 100%;
}
header img {
  max-width: 100%;
}

/*--------------------------------------
本文用*/
.inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
    background-color: #fff;
}
.txtwrapper {
    padding:5%;
}
h2 {
	padding: 3% 0;
	text-align: center;
    font-size: 150%;
    line-height: 1.8;
    font-family: "游明朝", "Yu Mincho", "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.bdt {
    border-top:1px solid #666666;
}
.bdb {
    margin-bottom: 5%;
    border-bottom:1px solid #666666;
}
.image {
	padding-bottom: 5%;
	text-align: center;
}
.image:last-child {
	padding-bottom: 0;
}
.txt {
	padding-bottom: 5%;
}
.txt:last-child {
	padding-bottom: 0;
}
.txt2 {
    color: #666666;
    font-size: 120%;
    font-weight: bold;
    padding-top: 1%;
	padding-bottom: 1%;
    padding-right: 3%;
}
.txtc {
	padding-bottom: 5%;
    text-align: center;
}
.txtb {
    padding-bottom: 5%;
	text-align: center;
    font-size: 150%;
    line-height: 1.5;
    font-family: "游明朝", "Yu Mincho", "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.txtl {   
    padding-bottom: 3%;
    font-size: 138%;
    font-family: "游明朝", "Yu Mincho", "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.brown_txt {
    padding: 10px;
    margin-bottom: 2%;
    line-height: 2;
    background-color: #fff6fb;
}
.title01 {
    padding-bottom: 2%;
    color: #ffffff;
    text-align: center;
    font-size: 200%;
    line-height: 1.5;
    font-family: "游明朝", "Yu Mincho", "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.txtw {
    padding-bottom: 5%;
    text-align: center;
    color: #fff;
}
.txtwbox {
    padding: 5px;
    margin-bottom: 3%;
    font-size: 138%;
    color: #666666;
    text-align: center;
    background-color: #fff;
    font-family: "游明朝", "Yu Mincho", "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.listbox {
    padding-bottom: 15%;
}
.listbox .txt {
    color: #666666;
}
.boxg {
    padding: 8%;
    margin-bottom: 5%;
    background:url(../images/bg_grayimg.png)no-repeat center center/cover;
}
.box {
    padding: 5%;
    margin-bottom: 5%;
    background-color: #fff;
}
.brown_txt2 {
    padding: 5px 10px;
    margin-bottom: 3%;
    font-size: 138%;
    color: #666666;
    text-align: left;
    background-color: #F5E4ED;
    font-family: "游明朝", "Yu Mincho", "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.staff {
    margin-bottom: 3%;
    display: flex;
	justify-content: space-between;
}
.staff_in {
    width: 32%;
}
.staff_in_sp {
    width: 48%;
}
.txtb2 {
    padding-bottom: 5%;
    text-align: center;
    font-size: 138%;
    font-weight: bold;
}
.txts {
    padding-bottom: 3%;
    text-align: center;
}
.step {
    width: 18%;
    padding-bottom: 2%;
}
.bdbb {
    margin-bottom: 5%;
    border-bottom:1px solid #666666;
}
.txtb32 {
    padding-bottom: 3%;
	text-align: left;
    font-size: 180%;
    line-height: 1.5;
    font-family: "游明朝", "Yu Mincho", "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.txtb3 {
    padding-bottom: 3%;
	text-align: left;
    font-size: 180%;
    line-height: 1.5;
    color: #666666;
    font-family: "游明朝", "Yu Mincho", "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.boxb {
    padding: 5%;
    border:1px solid #9f886e;
}
.boxb2 {
    padding: 5%;
    border:1px solid #666666;
}
.btns {
    padding-bottom: 2%;
    width: 60%;
    margin: 0 auto;
}
.btns:hover {
    opacity: 0.7;
}
.menutxt01 {
    padding: 10px;
    text-align: center;
    color: #666666;
    font-size: 150%;
    background-color: #E9F4F3;
  margin-bottom: 3%;
}
.shop2 {
    padding: 5px 10px;
    text-align: left;
    color: #666666;
    font-size: 118%;
    background-color: #E9F4F3;
}
.title02 {
    padding: 10px;
    text-align: center;
    color: #fff;
    font-size: 150%;
    background-color: #666666;
}
.title03 {
    padding: 5px 10px;
    text-align: left;
    color: #fff;
    font-size: 118%;
    background-color: #c5b8a8;
}
.price {
    text-align: right;
    font-size: 250%;
    font-weight: bold;
    line-height: 1.5;
}
.new {
    padding: 5px;
    color: #fff;
    font-weight: bold;
    font-size: 80%;
    background-color: #CC6A9C;
}
.menutxt {
    display: flex;
	justify-content: space-between;
}
.price2 {
    padding-top: 1%;
	padding-bottom: 1%;
    text-align: right;
    font-size: 150%;
    font-weight: bold;
    color: #666666;
}
.contact {
    display: flex;
	justify-content: space-between;
}
.contact_in {
    width: 32%;
}
.access {
    padding-bottom: 5%;
    display: flex;
	justify-content: space-between;
}
.access_in {
    width: 31%;
}
.shop {
    display: flex;
	justify-content: space-between;
}
.shop_in {
    width: 70%;
}
.shop_img {
    width: 20%;
}
.shop_in .txt {
    font-size: 90%;
    line-height: 1.7;
}
.icon {
    padding-bottom: 2%;
    width: 300px;
}
.icon:last-child {
    padding-bottom: 0;
}
.icon:hover {
    opacity: 0.7;
}
.english {
    width: 80%;
    padding-bottom: 2%;
}

/*
---------------------- qa */
.content summary {
    text-align: left !important;
}
#qa .logo {
  width: 30%;
  margin: 0 auto 5%;
  padding: 10vw 0 0;
}
#qa .footer{
  text-align: center;
  display: block;
  bottom: 0;
  margin: 10vw auto;
}
#qa .tel {
    width: 90%;
    margin: 0 auto;
}

.qa-area {
    width:100%;
    margin:0 auto 2%;
    border: none;
    text-align: left;
    background-color: #fff;
}

.qa-area summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left !important;
    position: relative;
    padding: 1em 1.5em 1em 3em;
    color: #666666;
    font-weight: 600;
    cursor: pointer;
}
.left {
    text-align: left !important;
}

.qa-area summary::before,
.qa-area p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.2em;
}

.qa-area summary::before {
    color: #666666;
    content: "Q";
}

.qa-area summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #666666;
    border-right: 3px solid #666666;
    content: '';
    transition: transform .5s;
}

.qa-area[open] summary::after {
    transform: rotate(225deg);
}

.qa-area p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1.5em 2em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.qa-area[open] p {
    transform: none;
    opacity: 1;
    background-color: #fff;
    font-size: 85%;
}

/*
---------------------- menu */
/*========= ナビゲーションのためのCSS ===============*/
.bg_white {
    width: 100%;
	max-width: 1200px;
	margin: 0 auto;
    background-color: #fff;
}
.head_menu {
    padding: 1%;
    display: flex;
	justify-content: space-between;
    justify-content: flex-end;
}
.head_menu_in {
    width: auto;
    margin-right: 1%;
}
.head_menu_in img {
    height: 50px;
}
.logo {
    padding: 1%;
    float: left;
}
.logo img {
    height: 50px;
}
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
  top:0;
    right: -120%;
  width:100%;
    height: 100vh;/*ナビの高さ*/
  background-color: rgba(0,0,0,0.7);
    /*動き*/
  transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    width: 25%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
  list-style: none;
    text-align: center;
}

#g-nav li a{
  color: #333;
  text-decoration: none;
  padding:10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
  position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
  top:10px;
  right: 10px;
  cursor: pointer;
    width: 50px;
    height:50px;
}
  
/*×に変化*/  
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
  background-color: #666;
    width: 45%;
  }

.openbtn1 span:nth-of-type(1) {
  top:15px; 
}

.openbtn1 span:nth-of-type(2) {
  top:23px;
}

.openbtn1 span:nth-of-type(3) {
  top:31px;
}

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

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

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



ul.list li {
    margin-bottom: 5%;
    padding-left: 50px;
    background: url("../images/check.png")no-repeat center left/25px auto;
}
ul.list li:last-child {
    margin-bottom: 0 !important;
}

/*--------------------------------------
フッター用*/
footer {
	text-align: center;
	font-size: 60%;
	padding:3% 0;
	color: #fff;
	line-height: 1.5;
	background-color: #666666;
}
footer a,footer a:link,footer a:visited,footer a:hover,footer a:active {
	text-decoration: none;
	color: #fff;
}

/*--------------------------------------
レスポンシブ*/

@media screen and (min-width: 800px){
	.sp{display:none;}
	br.sp {display: none;}
}
@media print, screen and (max-width: 800px) {
	body {
		font-size: 85%;	
        line-height: 1.8;
	}
	.pc {
		display: none;
	}
    .br {
        display: none;
    }
	br.sp {
		display: block;
	}
    .menu li img {
        width: auto;
        height: 50px;
    }
    .logo img {
        width: 60%;
        height: auto;
    }
    h2 {
        line-height: 1.7;
        font-size: 120%;
    }
    .txtb {
        font-size: 128%;
    }
    .txtl {
        font-size: 118%;
    }
    .txtwbox {
        font-size: 118%;
        line-height: 1.5;
    }
    ul.list li {
        padding-left: 12%;
        line-height: 1.5;
        background: url("../images/check.png")no-repeat center left/18px auto;
    }
    .txtb2 {
        line-height: 1.7;
        font-size: 118%;
    }
    .title01 {
        line-height: 1.7;
        font-size: 138%;
    }
    .box {
        padding: 8% 5%;
    }
    .step {
        width: 30%;
    }
    .txtb3,.txtb32 {
        font-size: 138%;
    }
    .btns {
        width: 100%;
    }
    .menutxt01, .title02 {
        font-size: 120%;
    }
    .english {
        width: 100%;
        padding-bottom: 2%;
    }

    .price {
        font-size: 200%;
    }
    .txt2 {
        padding-top: 3%;
	    padding-bottom: 3%;
        padding-right: 3%;
        font-size: 100%;
    }
    .price2 {
        padding-top: 3%;
	    padding-bottom: 3%;
        font-size: 110%;
    }
    .qa-area summary {
        font-size: 90%;
    }
    .access .txt {
        font-size: 85%;
    }
    .shop_in .txt {
        font-size: 80%;
    }
    .mb1 {
        margin-bottom: 3% !important;
    }
    .icon {
        width: 100%;
    }
	footer {
		padding: 2% 0;
	}
	
}
@media print, screen and (max-width: 800px) and (min-width: 640px) {
	body {
		font-size: 118%;
	}
	br {
		display: block;
		content: none;
	}
}


/* 💨 フェードイン要素の初期設定 */
.js-fadein {
  /* 初期状態: 完全な透明 */
  opacity: 0; 
  
  /* 初期状態: 40px下から開始 */
  transform: translateY(40px); 
  
  /* アニメーション時間の設定: 1秒かけて変化 */
  transition: opacity 1s, transform 1s; 
}

/* 🚀 表示されたときの状態（JavaScriptでこのクラスが付与される） */
.js-fadein.is-show {
  /* 最終状態: 不透明 */
  opacity: 1; 
  
  /* 最終状態: 元の位置に戻る */
  transform: translateY(0); 
}

/* 【応用】アニメーションに時間差を付けるクラス */
.js-fadein.delay-02s {
    transition-delay: 0.2s;
}
.js-fadein.delay-04s {
    transition-delay: 0.4s;
}