@charset "UTF-8";

/* ************************************************************* */
/* ベース設定 */
/* ************************************************************* */

* { margin: 0; padding: 0; box-sizing: border-box;}

html { height: 100%; font-size: 62.5%;}
html, body { height: 100%;}

body { font-family: sans-serif, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-size: 1.4rem; line-height: 1.8em; color: #333; position: relative;}

a:link { color: #333; text-decoration: underline;}
a:visited { color: #333;}
a:hover { color: #333;}
a:active { color: #333;}



/* ************************************************************* */
/* bootstrap幅最大サイズ */
/* ************************************************************* */

@media (min-width: 1200px) {
  .container { width: 1170px; position: relative;}
}

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



/* ************************************************************* */
/* テキスト */
/* ************************************************************* */

h1 { font-size: 2.4rem; line-height: 1.6em; margin-bottom: 0;}
h2 { font-size: 2.2rem; line-height: 1.6em; margin-bottom: 0;}
h3 { font-size: 2.0rem; line-height: 1.6em; font-weight: normal; margin: 0 0 30px 0; padding: 0; color: #b7282d;}
h4 { font-size: 1.8rem; line-height: 1.6em; margin-bottom: 0;}
h5 { font-size: 1.6rem; line-height: 1.6em; margin-bottom: 0;}

p { font-size: 1.4rem; margin-bottom: 0; line-height: 1.8em; text-align: justify; letter-spacing: 0.1em; font-feature-settings: "palt";}
p.caption { font-size: 1.2rem;}

@media screen and (max-width: 767px) {
 h3 { font-size: 1.6rem;}
 p { font-size: 1.2rem;}
}


/* ************************************************************* */
/* 共通パーツ */
/* ************************************************************* */

/* ローディング */
.loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(../images/loader.svg) center no-repeat #fff;}

.onlypc { display: block;}
.onlysmp { display: none;}

@media screen and (max-width: 991px) {
.onlypc { display: none;}
.onlysmp { display: block;}
}

/* pc版クリアランス */
.cl_pc180 { margin-bottom: 180px}
.cl_pc150 { margin-bottom: 150px}
.cl_pc120 { margin-bottom: 120px}
.cl_pc100 { margin-bottom: 100px;}
.cl_pc80 { margin-bottom: 80px;}
.cl_pc50 { margin-bottom: 50px;}
.cl_pc30 { margin-bottom: 30px;}

@media screen and (max-width: 767px) {
 .cl_pc180 { margin-bottom: 80px}
 .cl_pc150 { margin-bottom: 80px}
.cl_pc120 { margin-bottom: 60px;}
.cl_pc100 { margin-bottom: 50px;}
.cl_pc80 { margin-bottom: 40px;}
.cl_pc50 { margin-bottom: 25px;}
.cl_pc30 { margin-bottom: 15px;}
}

/* smp版クリアランス */
.cl_sm20 { margin-bottom: 10px;}
.cl_sm40 { margin-bottom: 20px;}

@media screen and (max-width: 767px) {
.cl_sm20 { margin-bottom: 20px;}	
.cl_sm40 { margin-bottom: 40px;}	
}

/* 固定クリアランス */
.cl_10 { margin-bottom: 10px;}
.cl_30 { margin-bottom: 30px;}

/* スマホ版改行 */
br.brlong { display: none; width: 0; height: 0; visibility: hidden; content: ""; font-size:0;}

@media screen and (max-width: 767px) {
br.brlong { display: block;}	
}

/* ヘッダーメニュー */
header { position: absolute; z-index: 1; display: none;}
header nav { width: 100%;}
header nav ul { }
header nav ul li { }
header nav ul li a:link { color: #333; text-decoration: none;}

@media screen and (max-width: 767px) {
 header { display: block;}
 header nav { width: 100%; height: 100%; border-radius: 0;  top: 0; left: 0; -webkit-transform: scale(.1); transform: scale(.1); background: rgba(0,0,0,0.0); z-index: 1; opacity: 0; -webkit-transition: 0.3s linear; transition: 0.3s linear;}
header nav ul { height: 200px; width: 100%; margin: auto !important; top: 100px; position: absolute;}
 header nav ul li { text-align: center;}
header nav ul li a { display: block; font-size: 1.6rem; font-weight: bold; width: 80%; text-align: center; margin: 0 auto 20px auto; padding: 14px 0; border: 1px solid #666;}
 header nav ul li img { width: 60%; height: auto; margin-bottom: 40px;}
}

/* トグルボタン */
#navToggle { display: none;}

@media screen and (max-width: 767px) {
 
#navToggle { display: block; position: fixed; right: 20px; top: 40px; width:30px; height:25px; cursor:pointer; z-index: 2;}
#navToggle div { position: relative}
#navToggle span { display: block; position: absolute; width: 100%; border-bottom: solid 3px #b7282d; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out}
	
#navToggle span:nth-child(1) {top:0}
#navToggle span:nth-child(2) {top:11px}
#navToggle span:nth-child(3) {top:22px}

/* トグルボタン　オープン */
.openNav #navToggle span { border-bottom: solid 3px #b7282d;}
.openNav #navToggle span:nth-child(1) {
	top: 11px;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	transform:rotate(-45deg)}
.openNav #navToggle span:nth-child(2),
.openNav #navToggle span:nth-child(3) {
	top: 11px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg)}
 
header.openNav nav { opacity: 1.0; -webkit-transform: scale(1.0); transform: scale(1.0); background: rgba(255,255,255,0.9); position: fixed; z-index: 1;}

}

/* ページ先頭に戻るボタン */
#btnTop { display: table; width: 40px; height: 40px; background-color: rgba(183,45,40,0.8); text-align: center; color: #fff; position: fixed; bottom: -50px; right: 20px; z-index: 1; border-radius: 4px; -webkit-transition:1.0s ease-in-out; transition:1.0s ease-in-out;
}
a#btnTop:link { text-decoration: none;}
a#btnTop:hover { text-decoration: none !important;}
#btnTop i { display: table-cell; vertical-align: middle; font-size: 30px;}

#btnTop.disp { bottom: 20px; z-index: 6;}

@media screen and (max-width: 767px) {
	#btnTop { right: 15px;}
}




/* ************************************************************* */
/* UI */
/* ************************************************************* */

a.button { display: block; width: 300px; margin: 60px auto 0 auto; padding: 16px 0; font-size: 1.8rem; color: #fff; text-align: center; background: #b7282d; border-radius: 6px;}
a.button:link { text-decoration: none;}
a.button:visited { color: #fff;}
a.button:hover { background: #F05A37;}

@media screen and (max-width: 767px) {
 a.button { width: 90%; font-size: 1.6rem;}
}


/* ************************************************************* */
/* フッター */
/* ************************************************************* */

footer { width: 100%; margin-top: 120px; padding: 50px 0; background: #ffd57c;}

footer ul.brand { text-align: left;}
footer ul.brand li { display: inline-block; height: 70px; margin: 0 10px;}
footer ul.brand li img { height: 100%; width: auto;}

footer ul.campany { text-align: right;}
footer ul.campany li { display: inline-block;  margin: 0 10px;}

footer p { letter-spacing: 0; text-align: right;}

@media screen and (max-width: 767px) {
 footer ul.brand { width: 100%;}
 footer ul.brand li { width: 48%; text-align: center; margin: 0 0 20px 0;}
 footer ul.campany { text-align: center;}
 footer p { text-align: center;}
}


/* ************************************************************* */
/* ラッパー */
/* ************************************************************* */

.main_wrapper { padding: 160px 0 40px 0; position: relative;}
.main_gray_wrapper { padding: 100px 0 100px 0; background: #eee; position: relative;}
#map_wrapper { margin: 160px 0 0 0;}

@media screen and (max-width: 767px) {
 .main_wrapper { padding: 80px 0 40px 0;}
 .main_gray_wrapper { padding: 60px 0;}
 #map_wrapper { margin: 40px 0 0 0;}
}



/* ************************************************************* */
/* メインビジュアル */
/* ************************************************************* */

#visual_wrapper { width: 100%;}
#visual_wrapper .harf_wrapper { width: 50%; float: left;}
#visual_wrapper .harf_wrapper.main_visual { padding-top: 60%; background-image: url("../images/main_visual.jpg"); background-repeat: no-repeat; background-size: cover; position: relative;}

#visual_wrapper .main_visual h1 { display: none;}

#visual_wrapper .main_visual h1 img { width: 100%; height: auto;}

/* #visual_wrapper .harf_wrapper.main_visual h2 { width: 400px; height: 244px; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
#visual_wrapper .harf_wrapper.main_visual h2 img { width: 100%; height: auto;} */
#visual_wrapper .harf_wrapper.sub_visual { text-align: center;}

#visual_wrapper .harf_wrapper.sub_visual .sub_visual_inner { width: 80%; margin: auto; }
#visual_wrapper .harf_wrapper.sub_visual .sub_visual_inner img { width: 100%; height: auto; margin: 8% 0;}
#visual_wrapper .harf_wrapper.sub_visual .sub_visual_inner h1 img { width: 60%;}

@media screen and (max-width: 991px) {
 #visual_wrapper .harf_wrapper { width: 100%; float: none;}
}

@media screen and (max-width: 767px) {
 /* #visual_wrapper .harf_wrapper.main_visual h2 { width: 280px;} */
 #visual_wrapper .harf_wrapper.main_visual h1 { display: none;}
 #visual_wrapper .harf_wrapper.main_visual { padding-top: 0; height: 100vh;}
 #visual_wrapper .harf_wrapper.sub_visual .sub_visual_inner { width: 90%;}
 #visual_wrapper .harf_wrapper.sub_visual .sub_visual_inner img { margin: 6% 0;}

 #visual_wrapper .main_visual h1 { display: block; width: 80%; margin: auto; position: absolute; top: 30%; left: 0; right: 0;}
}




/* ************************************************************* */
/* メニュー */
/* ************************************************************* */

#menu_wrapper { padding: 100px 0 70px 0; background: #fcf7ec;}
#menu_wrapper img { margin-bottom: 10px;}
#menu_wrapper p { margin-bottom: 30px;}

#menu_wrapper span { font-weight: bold; color: #b7282d;}

@media screen and (max-width: 767px) {
 #menu_wrapper { padding: 60px 0 30px 0;}
}


/* ************************************************************* */
/* コロナ休業要請
/* ************************************************************* */

#request_close_wrapper { width: 80%; height: auto; margin: auto; padding: 4%; text-align: center; background-color: rgba(255,255,255,0.7); border-radius: 10px; position: absolute; top: 30%; left: 0; right: 0;}

#request_close_wrapper h2 { font-size: 1.8rem; padding: 0; margin: 0; color: #b7282d; position: relative !important;}
#request_close_wrapper h3 { font-size: 1.6rem; color: #333; margin-bottom: 0;}
#request_close_wrapper p { text-align: center; margin-bottom: 1.2em;}

#request_close_wrapper a:link { color: #b7282d; text-decoration: none;}
#request_close_wrapper a:visited { color: #b7282d;}
#request_close_wrapper a:hover { color: #b7282d;}
#request_close_wrapper a:active { color: #b7282d;}

@media screen and (max-width: 767px) {
 #request_close_wrapper h2 { font-size: 1.4rem;}
 #request_close_wrapper h3 { font-size: 1.4rem;}
 #request_close_wrapper p { font-size: 1.2rem;}
}