@charset "utf-8";

/*-------------------------------------------------------------------------------------------------------
	初期設定
---------------------------------------------------------------------------------------------------------*/

/*外部ファイルの読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/ress/dist/ress.min.css");		/*リセットCSS（ress.css）*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");		/*Font Awesome*/
/*@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");		slick.css*/
@import url("slick.css");		/*slick.css*/


/*-------------------------------------------------------------------------------------------------------
	全体の設定（『画面幅800px未満（小画面）』用）
---------------------------------------------------------------------------------------------------------*/
html,body {font-size: 14px;}		/*基準の文字サイズ。『画面幅800px以上（大画面）』で基準を大サイズに上書き。*/
body {
	margin: 0px;
	padding: 0px;
	color: #666;			/*全体の文字色*/
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;		/*フォントの種類*/
	font-size: 14px;		/*文字サイズ*/
	line-height: 2;			/*行間*/
	background: #f9f6f0 url(../images/bg.jpg) center / 100px;
	-webkit-text-size-adjust: none;
	overflow-x: hidden;
}

table {border-collapse:collapse;}		/*table全般*/
img {		/*画像全般*/
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
section + section {padding-top: 60px;}		/*sectionの間に空けるスペース*/
input,
textarea,
select {						/*フォームタグ全般の設定*/
	border: 1px solid #999;		/*枠線の幅、線種、色*/
	padding: 0 10px;
}
select {		/*ress.cssでselectで矢印が消えてしまうのを戻す*/
	-moz-appearance: menulist;
	-webkit-appearance: menulist;
	appearance: menulist;
}
select::-ms-expand {display: block;}		/*IE用*/
video {	max-width: 100%;}		/*videoタグ*/
iframe {width: 100%;}/*iframeタグ*/
ul,ol {	margin: 0 5px 30px 25px;}		/*リスト全般：上、右、下、左へ空けるスペース*/

/*---テキストリンク---*/
a {
	color: #649f44;
	text-decoration: none;
}
a:hover {
	color: #eaa450;
	text-decoration: underline;
}

/*#container：サイト全体を囲むブロック。
---------------------------------------------------------------------------*/
#container {
	margin: 0 auto;
	max-width: 1400px;		/*最大幅。これ以上幅が広がらないように。*/
}



/*-------------------------------------------------------------------------------------------------------
	ヘッダー部分の設定
---------------------------------------------------------------------------------------------------------*/
/*	header：ロゴ、TEL、ボタン・ナビ（大画面のみ）
---------------------------------------------------------------------------*/
header {
	display: flex;				/*flexボックスを使う指定*/
	flex-direction: column;		/*子要素を縦並びにする*/
	text-align: center;			/*テキスト中央揃え*/
	padding: 10px 0;			/*枠内上下、左右の余白*/
	background-color: #183e1f;
	color:#333;
	z-index: 10;
	width: 100%;
}
header a {color: #fff;}		/*ヘッダー内リンク文字色*/
header h1#logo {			/*ロゴ画像*/
	width: 150px;			/*画像の幅*/
	margin: 10px auto;		/*左右中央に配置する*/
}
header i {						/*TELアイコン（Font Awesomeを使用）*/
	padding-right: 10px;		/*右側に空ける余白*/
}
header address {			/*TEL*/
	font-style: normal;		/*斜体（初期値）を通常にする。*/
	color: #fff;
}
header address span {		/*受付時間*/
	display: block;
	font-size: 0.7rem;		/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}



/*-------------------------------------------------------------------------------------------------------
	メインメニュー部分の設定
---------------------------------------------------------------------------------------------------------*/
/*	#menubar_hdr：小画面用3本バー（ハンバーガー）アイコン
---------------------------------------------------------------------------*/
#menubar_hdr {		/*3本バーブロック*/
	display: block;
	position: absolute;z-index: 100;
	top: 10px;		/*上からの配置場所*/
	right: 10px;	/*左からの配置場所*/
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
	border-radius: 50%;
	background: #7a9c59 url(../images/icon_menu.png) no-repeat center top/50px;		/*背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
}
#menubar_hdr.close {		/*3本バーをクリック後にメニューが開き、×印が表示中の状態。*/
	background: #fff url(../images/icon_menu.png) no-repeat center bottom/50px;		/*背景色、背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
}
/*---小画面用メインメニューのアニメーション設定---*/
@keyframes menu1 {		/*透明(0%)から色を100%出すアニメーション（全100コマ）のフレーム設定。*/
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*	#menubar-s：小画面用メインメニュー
---------------------------------------------------------------------------*/
#menubar-s {
	display: none;					/*小画面ではデフォルトで非表示（3本バーをクリックしたら表示）*/
	animation-name: menu1;			/*keyframes.cssで使う@keyframesの指定*/
	animation-duration: 0.5S;		/*アニメーションの実行時間*/
	animation-fill-mode: both;		/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
	overflow: hidden;
	top: 145px;		/*上から145pxの場所に配置*/
	width: 100%;
	z-index: 10;
}
#menubar-s ul {						/*メニュー項目*/
	list-style-type: none;
	border-top: 1px solid #fff;		/*上の線の幅、線種、色*/
	margin: 0;
}
#menubar-s li a {
	display: block;
	text-decoration: none;
	height: 60px;
	padding-top: 10px;
	padding-left: 80px;
	border-bottom: 1px solid #fff;
	font-size: 16px;
	color: #fff;
	line-height: 1.5;
}

/*---メニューの背景色。アイコンの読み込み。---*/
#menubar-s li.plan {	/*宿泊プラン*/
/*左から15pxに配置。背景画像の上(-20px)を基準にサイズ50pxで読み込む。*/
	background: rgba(182,60,29,0.8) url(../images/mark_menu.png) no-repeat 15px -20px / 50px;
}
#menubar-s li.invitation {		/*招待券*/
	background: rgba(237,112,0,0.8) url(../images/mark_menu.png) no-repeat 15px -120px / 50px;
}
#menubar-s li.room {			/*お部屋*/
	background: rgba(0,0,0,0.8) url(../images/mark_menu.png) no-repeat 15px -220px / 50px;
}
#menubar-s li.hotspring {		/*天然温泉*/
	background: rgba(0,0,0,0.8) url(../images/mark_menu.png) no-repeat 15px -320px / 50px;
}
#menubar-s li.cuisine {			/*お料理*/
	background: rgba(0,0,0,0.8) url(../images/mark_menu.png) no-repeat 15px -420px / 50px;
}
#menubar-s li.facilities {		/*施設案内*/
	background: rgba(0,0,0,0.8) url(../images/mark_menu.png) no-repeat 15px -520px / 50px;
}
#menubar-s li.activity {		/*体験・イベント*/
	background: rgba(0,0,0,0.8) url(../images/mark_menu.png) no-repeat 15px -620px / 50px;
}
#menubar-s li.group {			/*{団体・日帰り*/
	background: rgba(0,0,0,0.8) url(../images/mark_menu.png) no-repeat 15px -720px / 50px;
}
#menubar-s li.sightseeing {		/*周辺観光*/
	background: rgba(0,0,0,0.8) url(../images/mark_menu.png) no-repeat 15px -820px / 50px;
}
#menubar-s li.access {			/*交通アクセス*/
	background: rgba(0,0,0,0.8) url(../images/mark_menu.png) no-repeat 15px -920px / 50px;
}
#menubar-s li.greeting {		/*ごあいさつ*/
	background: rgba(85,85,85,0.8) url(../images/mark_menu.png) no-repeat 15px -1020px / 50px;
}
#menubar-s li.day_plan {		/*日帰りプラン*/
	background: rgba(85,85,85,0.8) url(../images/mark_menu.png) no-repeat 15px -1120px / 50px;
}
#menubar-s li.faq {				/*よくあるご質問*/
	background: rgba(85,85,85,0.8) url(../images/mark_menu.png) no-repeat 15px -1220px / 50px;
}
#menubar-s li.contact {			/*お問い合わせ*/
	background: rgba(85,85,85,0.8) url(../images/mark_menu.png) no-repeat 15px -1320px / 50px;
}
#menubar-s li.privacy {			/*プライバシーポリシー*/
	background: rgba(85,85,85,0.8) url(../images/mark_menu.png) no-repeat 15px -1420px / 50px;
}
#menubar-s li.review {			/*お客様の声*/
	background: rgba(85,85,85,0.8) url(../images/mark_menu.png) no-repeat 15px -1520px / 50px;
}
#menubar-s li a span {			/*英字（spanタグ内）の装飾テキスト*/
	display: block;
	font-size: 12px;
	color: #ccc;
	letter-spacing: 0.2em;		/*文字間隔を少し広く*/
}



/*-------------------------------------------------------------------------------------------------------
	ナビゲーション部分の設定
---------------------------------------------------------------------------------------------------------*/
/*	.pan：パンくずリスト
---------------------------------------------------------------------------*/
.pan {
	margin-bottom: 40px;		/*下余白*/
	margin-top: -40px;			/*ボックスを上のメニューにつけるための指定*/
	padding: 10px 3%;			/*ボックス内余白。上下、左右。*/
	font-size: 12px;
}
.pan li {							/*メニュー1個あたり*/
	display: inline-block;			/*横並び指定*/
	padding: 5px;
}
.pan a {
	color: #999;					/*リンクテキストの文字色*/
}
.pan a:hover {						/*マウスオン時リンクテキストの文字色*/
	color: #547685;
}
.pan .pan_l {display: none;}		/*小画面ではホームと現在地を非表示*/



/*-------------------------------------------------------------------------------------------------------
/*	PAGE TOP（↑）設定
---------------------------------------------------------------------------------------------------------*/
/*通常時のボタンは非表示*/
body .nav-fix-pos-pagetop a {display: none;}

/*fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	z-index: 100;
	position: fixed;
	bottom: 10px;		/*下からの配置場所*/
	right: 10px;		/*右からの配置場所*/
	background: rgba(0,0,0,0.6);	/*背景色。0,0,0は黒の事。0.6は60%色がついた状態。*/
	color: #fff;				/*文字色*/
	border: 1px solid #fff;		/*枠線の幅、線種、色*/
	border-radius: 50%;			/*円形にする*/
	animation-name: menu1;		/*keyframes.cssで使う@keyframesの指定*/
	animation-duration: 1S;		/*アニメーションの実行時間*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
}

body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {		/*マウスオン時*/
	background: #999;	/*背景色*/
}



/*-------------------------------------------------------------------------------------------------------
	メインコンテンツ部分の設定
---------------------------------------------------------------------------------------------------------*/
/*	mainブロック
---------------------------------------------------------------------------*/
main {
	padding: 50px 20px 20px 20px;
}
main p {
	margin: 0 5px 30px;	/*上、左右、下の余白*/
}

/*---見出し---*/
main h2 {
	padding: 5px;
	margin-bottom: 30px;
	position: relative;		/*アニメーションに必要な設定*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	font-size: 22px;
}
main h2.simple {		/*h2タグに『class="simple"』を指定した場合の追加設定*/
	background: none;
	font-family: serif;
	text-align: center;
	color: #7a9c59;
	border: 1px solid #ccc;
	border-left: none;
	border-right: none;
	border-bottom: none;
	padding-top: 40px;
}
main h3 {
	padding: 5px;
	margin-bottom: 30px;
	letter-spacing: 0.1em;
	border-bottom: 1px solid #ccc;		/*下線の幅、線種、色*/
	font-size: 20px;
}
main h3.simple {		/*h3タグに『class="simple"』を指定した場合の追加設定*/
	background: none;
	font-family: serif;
	text-align: center;
	color: #547685;
	border: 1px solid #ccc;
	border-left: none;
	border-right: none;
	margin-top: 40px;
}

/*---マステ風見出しh3---*/
main h3.maste{
/*	color: #666666;*/
	padding: 30px 20px 20px 20px;/*  内側の余白 上・右・下・左 */
	position: relative;
	z-index: 0;
}
main h3.maste:before{
	display: block;
	margin: 4px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: -1;
}
main h3.maste:after{
	background-color: rgba(213,234,216,0.9);  /* マステ背景色 */
	border-left: 2px dotted rgba(0,0,0,0.1);
	border-right: 2px dotted rgba(0,0,0,0.1);
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	display: block;
	padding: 5px 20px;  
	text-align: center;
	position: absolute;
	top: -10px;
	left: 20px;
	transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
}

main .note_bg1 h4 {
	text-align: center;
	margin: 0 20px 10px 20px;
	padding-top: 15px;
	border-bottom: #fff 1px solid;
}

/*-------------------------------------------------------------------------------------------------------
	フッター部分の設定
---------------------------------------------------------------------------------------------------------*/
/*	#footer_container：関連サイトバナー、フッターリンク、SNSリンク、著作権
---------------------------------------------------------------------------*/
#footer_container {
	background: #003207 url(../images/bg2.jpg);						/*背景色、背景画像の読み込み。※古いブラウザ用。*/
	background: #003207 url(../images/bg2.jpg) center / 100px;		/*背景色、背景画像の読み込み。*/
	color: #fff;	/*文字色*/
}
#footer_container a {color: #fff;}
#footer_container h2 {color: #fff !important;}


/*	.cervin_banner：『セルバン関連サイト』
---------------------------------------------------------------------------*/
.cervin_banner {
	margin-bottom: 20px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
.cervin_banner h2.cervin_link {		/*タイトル*/
	padding-top: 20px;
	font-family: sans-serif;
	font-size: 22px;
	text-align: center;
	font-weight: normal;
	margin: 10px 10px 20px 10px;
}
.cervin_banner a{					/*バナー画像（横並び＋中央揃え）*/
    display: block;
    padding: 10px;
    border: none;
    text-decoration: none;
    color: #333;
}
.cervin_banner ul{
    display: block;
	margin: 0 auto;
	margin-bottom: 40px;
	list-style-type: none;
}
.cervin_banner li {
	text-align: center;
}
.cervin_banner img{
    height: 60px;
}


/*	#footermenu-s（小画面用）、#footermenu（大画面用）：フッターリンク
---------------------------------------------------------------------------*/
/*---ボックス全体の設定---*/
#footermenu-s,
#footermenu {
	background: url(../images/bg_footer.png) no-repeat left bottom / contain;
	color: #fff;
	font-size: 0.7rem;	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	padding: 10px 25px 70px 25px;
	display: flex;
	justify-content: space-between;		/*ボックス間の余白を均等に*/
}
#footermenu-s a,
#footermenu a {
	text-decoration: none;
}
#footermenu-s a:hover,
#footermenu a:hover {
	color: #999;
}

/*---ulタグ（列単位）---*/
#footermenu-s ul,
#footermenu ul {
	margin: 0;
	list-style: none;
}
#footermenu-s .title,
#footermenu .title {
	padding-bottom: 5px;
}
#footermenu-s .title ul,
#footermenu .title ul  {
	font-weight: normal;
}


/*	#footer_logo：フッターロゴ、住所 等
---------------------------------------------------------------------------*/
#footer_logo {
	clear: both;
	margin: 0 auto;
	width: 100%;
	padding-bottom: 0;
	background-color: #2c1313;
	font-size: 0.7rem;
}
#footer_logo ul {
	list-style-type: none;
	text-align: center;
	margin-left: 0;
	margin-right: 0;
}
#footer_logo #cervin_add {		/*住所、TEL*/
	width: 100%;
	padding-left: 0;
	background: none;
}
#footer_logo img {width: 100px;}	/*フッターロゴ*/


#footer_logo #icon_img {padding-bottom: 20px;}		/*SNSアイコン画像*/

#footer_logo #icon_img img {width: 30px;}
#footer_logo #icon_img li {display: inline;}


/*	footerタグ：著作権表示
---------------------------------------------------------------------------*/
footer {
	font-size: 0.6rem;
	background: #2c1313;
	color: #fff;
	text-align: center;				/*内容をセンタリング*/
	padding: 20px;					/*ボックス内の余白*/
	margin-top: -30px;
}
footer small {font-size: 100%;}
footer a {color: #fff;text-decoration: none;}
footer a:hover {color: #fff;}
footer .pr {display: block;}		/*著作部分*/



/*-------------------------------------------------------------------------------------------------------
/*	レイアウト・パーツのクラス設定
---------------------------------------------------------------------------------------------------------*/
/*	.box1：1カラムボックス
---------------------------------------------------------------------------*/
.box1 {						/*ボックス1個あたり*/
	overflow: hidden;
	background: #fff;
	color: #666;
	margin: 0 2% 20px;		/*上、左右、下へのボックスの外に空けるスペース*/
	border: 1px solid #eeeae2;
	padding: 3%;
}
.box1 h4 {		/*box1内の見出し*/
	font-size: 18px;
	border-bottom: 2px dotted #9d9287;
	margin-bottom: 10px;
	letter-spacing: 0.1em;
	padding: 10px 5px 5px 5px;
}
/*---box1内の段落---*/
.box1 p {padding: 0 !important;line-height: 1.5;}
.box1 p a {color: #666;}
.box1 img {
	width: 100%;
	height: auto;
	border-bottom: 1px solid #fff;
}

/*---box1内のfigure写真---*/
.box1 figure {margin-bottom: 20px;}
.box1 figure a:hover {opacity: 0.8;}

/*---box1内の補足---*/
.box1 .note1 {
	text-align: right;
	padding: 10px;
	margin:10px 10px 20px 10px;
}


/*	.ta1：テーブル
---------------------------------------------------------------------------*/
.ta1 caption {		/*見出し*/
	border-top: 1px solid #ccc;		/*上の枠線の幅、線種、色*/
	font-weight: bold;
/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOK。*/
	padding: 10px 5px;
	background: #fafafa;
}
.ta1 {								/*テーブルブロック設定*/
	border-top: 1px solid #ccc;		/*テーブルの一番上の線。幅、線種、色*/
	table-layout: fixed;
	width: calc(100% - 10px);		/*テーブルの両サイドに合計10px（左右各5pxずつ）の余白を作った残りを幅にする*/
	margin: 0 auto 30px;			/*最後の「30px」がテーブルの下の余白*/
}
.ta1 tr {border-bottom: 1px solid #ccc;}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
/*上下、左右のボックス内余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOK。*/
	padding: 10px 5px;
/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があるので注意。*/
	word-break: break-all;
}
.ta1 th {	/*th（左側）のみ*/
	width: 30%;
	text-align: left;
	background: #eaf2fa;
}


/*	.btn：『詳しくはこちら』ボタン
---------------------------------------------------------------------------*/
.btn {		/*ボタンを囲むブロック*/
	text-align: center;
	font-size: 1.2rem;
}
.btn a,
.btn input {
	margin-top: 20px;
	margin-bottom: 20px;
	display: inline-block;
	text-decoration: none;
	border: none;
	background: #649f44;		/*背景色*/
	color: #fff;				/*文字色*/
	border-radius: 5px;			/*角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	padding: 5px 10px;			/*ボタン内上下、左右の余白*/
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.btn a:hover,
.btn input:hover {
	opacity: 0.9;
}
.btn i {		/*右側の矢印アイコン（Font Awesomeを使用）*/
	padding-left: 10px;
}

/*---.box1内のボタンへの追加設定---*/
.box1 p.btn {text-align: center;}
.box1 p.btn a{color: #fff;}

/*---.list内のボタンへの追加設定---*/
.list .btn {
	padding-bottom: 50px;
	overflow: visible;
}
.list .btn a {background: #295782;color: #fff;}


/*.photo：写真を3列に並べたレイアウト
---------------------------------------------------------------------------*/
.photo_block {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 20px;

}
.photo {					/*ボックス1個あたり*/
	position: relative;
	width: 32%;
}
.photo a:hover img {
	opacity: 0.8;
}
.photo p {		/*photoボックス内の段落(p)タグ*/
	padding: 5px 0 !important;		/*上下、左右への段落タグ内の余白*/
	position: relative;
	bottom: 0px;		/*photoボックスの下から0pxの場所に配置*/
	width: 100%;		/*幅*/
	background: none;
	color: #666;		/*文字色*/
	text-align: center;		/*文字をセンタリング*/
	font-size: 75%;
	margin: 0;
}


/*	.bg1：背景
---------------------------------------------------------------------------*/
.bg1 {
	background: #e7dac4 url(../images/bg1.jpg);		/*背景色、背景画像の読み込み。※古いブラウザ用。*/
	background: #e7dac4 url(../images/bg1.jpg) center / 100px;		/*背景色、背景画像の読み込み。*/
}



/*-------------------------------------------------------------------------------------------------------
/*	外部プラグインの設定
---------------------------------------------------------------------------------------------------------*/
/*	.mainimg：【slick】『ホーム』スライドショー
---------------------------------------------------------------------------*/
.mainimg {
	position: relative;
	padding: 0 !important;
}
#home div.mainimg {
	height: auto;
}

/*マウスオン時の設定。
マウスオンでスライドがストップしてしまうので、それがわかりやすいようにopacityを設定しました。
もしマウスオンでストップさせたくない場合は、slick.jsの「//pauseOnHover: false,」の行の冒頭の「//」を外して適用して下さい。*/
.mainimg a:hover {opacity: 0.8;}

/*---丸いページナビボタン---*/
.slick-dots {		/*全体を囲むブロック*/
	text-align: center;
	width: 100%;
	margin:0;
	line-height: 1;
	position: absolute;
	bottom: 10px;	/*下からの配置場所指定*/
}
.slick-dots li {		/*ボタン1個あたり*/
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
}
.slick-dots li button {		/*buttonタグ*/
	display: block;
	text-indent: -9999px;	/*デフォルトで文字が出るので画面の外に追い出す指定*/
	width: 12px;			/*ボタンの幅*/
	height: 12px;			/*ボタンの高さ*/
	border-radius: 50%;		/*丸くする指定*/
	cursor: pointer;		/*クリックで画像へジャンプするので、わかりやすいようhover時にpointerになるように。*/
	background: #fff;		/*背景色。白。*/
}
/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/
.slick-dots li.slick-active button {
	background: #f2d52f;
}


/*	詳細ページの画像切り替え【imgchg_pack.js】※未使用
---------------------------------------------------------------------------*/
/*---大きな画像のボックスと説明文を入れるボックス---*/
#item-image {
	position: relative;
	margin: 0 auto 20px;
	text-align: center;
	width: 100%;
}
#item-image #item_image1 {		/*大きな画像の１行目*/
	z-index: 2;
	position: relative;
	overflow: hidden;
}
#item-image #item_image2 {		/*大きな画像の２行目*/
	z-index: 1;
	position: absolute;
	left: 0px;
	top: 0px;
	overflow: hidden;
}
#item-image img {		/*大きな画像のボックスの中の画像*/
	width: 100%;
}
/*---サムネイル画像---*/
.thumbnail {
	width: 80px;	/*画像の幅*/
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
	margin-bottom: 5px;
}
.thumbnail:hover {
	border: 1px solid #999;
}



/*-------------------------------------------------------------------------------------------------------
/*	その他の設定（テキスト装飾等）
---------------------------------------------------------------------------------------------------------*/
.title {font-weight: bold;}
.note_ymc {color: #fff;background-color: #ff6666;}
.marker {		/*---マーカー風---*/
	background-color: #d5ead8;
	padding: 5px 20px 5px 20px;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 20px;
	font-size: 1.1rem;
}
.note_r {						/*※注意書き*/
	color: #f00;
	text-indent: -1em;
	padding-left: 1em;
	margin-left: 1em;
}
.note {color: #f00;}			/**/
.note1 {color: #649f44;}		/*緑*/
.note2 {color: #83a649;}		/*黄緑*/
.note3 {color: #eaa450;}		/*オレンジ*/
.note4 {color: #f9d555;}		/*黄色*/
.note5 {color: #005eac;}		/*グレー*/
.note6 {color: #2c1313;}		/*黒*/
.note7 {color: #968989;}		/*赤グレー*/
.note8 {color: #bed792;}		/*薄緑*/
.note9 {color: #295782;}		/**/

.note_bg1 {
	background-color: #d5ead8;
	padding: 10px;
}

.br-sp {display: block;}
.br-sp_l {display: none;}		/*改行位置*/

/*	.newicon、.upicon：NEW、UPアイコン
---------------------------------------------------------------------------*/
.newicon, .upicon {		/*共通*/
	display: inline-block;
	text-align: center;
	padding: 0 5px;
	border-radius: 3px;
	transform: scale(0.7);
}
.newicon {		/*newiconへの追加指定*/
	background: #f00;
	color: #fff;
}
.upicon {		/*upiconへの追加指定*/
	background: #eaa450;
	color: #fff;
}



/*-------------------------------------------------------------------------------------------------------
/*	その他の設定（レイアウト等）
---------------------------------------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-theme, .color-theme a {color: #389168 !important;}
.color-check, .color-check a {color: #f00 !important;}
.c {text-align: center !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.large {font-size: 2rem;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;border: 1px solid #ccc;padding: 5px 20px;background: rgba(0,0,0,0.03);border-radius: 5px;margin: 5px 0;}
.ofx {overflow-x: hidden;}
ul.disc {padding: 0em 25px 20px;list-style: disc;}


/*-------------------------------------------------------------------------------------------------------
	トップページへの追加設定
---------------------------------------------------------------------------------------------------------*/
/*	#intro_block：『ホーム＞紹介』ブロック
---------------------------------------------------------------------------*/
#home #intro_block {
	overflow: hidden;
	margin-bottom: 40px;
}

#home #intro_block h2 {
	border: none;
	padding: 10px 0;
	line-height: 1.5em;
	color: #5484b7;
}
#home #intro_block #intro_hakuunkan {
	 float: left;
	 width: 50%;
}
#home #intro_block #intro_lodge {
	 float: right;
	 width: 50%;
}
#home #intro_block #intro_catch {width: 100%;}
#home #intro_catch p {					/*photoボックス内の段落(p)タグ*/
	padding: 10px 0 !important;		/*上下、左右への段落タグ内の余白*/
	position: relative;
	bottom: 0px;						/*ボックスの下から0pxの場所に配置*/
	width: 100%;
	background: transparent;
	color: #333;
	text-align: center;
	font-size: 100%;
	font-family: serif;
}

/*---.photo：#intro_block内の写真---*/
#home .photo {
	position: relative;
	float: left;
	width: 33.3%;
}
#home .photo a:hover img {opacity: 0.8;}
#home .photo p {		/*photoボックス内の段落(p)タグ*/
	padding: 5px 0 !important;		/*上下、左右への段落タグ内の余白*/
	position: absolute;
	bottom: 0px;		/*photoボックスの下から0pxの場所に配置*/
	width: 100%;		/*幅*/
	background: #111;		/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.5);		/*背景色。0,0,0は黒の事で0.5は50%色がついた状態のこと*/
	color: #fff;		/*文字色*/
	text-align: center;		/*文字をセンタリング*/
	font-size: 80%;
	margin: 0;
}


/*	#new：『ホーム＞お知らせ』ブロック（表タイプ）
---------------------------------------------------------------------------*/
#new {
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	padding: 0 5px;		/*上下、左右へのボックス内の余白*/
}

/*---日付(dt)、記事(dd)共通設定---*/
#new dt,
#new dd {
	border-bottom: 1px solid #ccc;		/*下線の幅、線種、色*/
	padding: 5px 0;						/*上下、左右へのボックス内の余白*/
}
/*---日付(dt)設定---*/
#new dt {width: 10em;}		/*幅。8文字(em)分。※下の「800px以上」の端末用の設定に再設定があります。*/
#new dt span {display: none;}		/*日付の横のマーク（共通設定）小さな端末では非表示*/
#new dt span.icon-bg1 {background: #5690c7;}		/*bg1設定「Twitter」*/
#new dt span.icon-bg2 {background: #83a649;}		/*bg2設定「ブログ」*/
#new dt span.icon-bg3 {background: #183e1f;}		/*bg3設定「外部サイト」*/

/*---記事(dd)設定---*/
#new dd {width: calc(100% - 10em);}		/*「8em」は上の「#new dt」のwidthの値です。※下の「800px以上」の端末用の設定に再設定があります。*/


/*	.pickup：【slick】『ホーム＞お知らせ』スライドショータイプ
---------------------------------------------------------------------------*/
/*---スライドショー全体を囲むボックス---*/
.pickup {
	position: relative;
	display: flex;
	background-color: transparent;
	padding: 0;
}

/*---マウスオン時の設定。
マウスオンでスライドがストップしてしまうので、それがわかりやすいようにopacityを設定しました。
もしマウスオンでストップさせたくない場合は、slick.cssの「//pauseOnHover: false,」の行の冒頭の「//」を外して適用して下さい。*/
.pickup .list:hover figure {
	opacity: 0.8;
}

.pickup .slick-slide {		/*ボックス1個あたり*/
	margin: 10px !important;
	width: auto;
}

/*---左右の三角矢印の共通設定---*/
.slick-arrow {
	position: absolute;
	bottom: 45%;	/*下からの配置場所*/
}

/*---左右の三角矢印の共通設定。マウスオン時。---*/
.slick-arrow:hover {
	cursor: pointer;
	opacity: 0.8;
}

/*---左右の三角矢印の形、色、サイズ---*/
.slick-prev::after,
.slick-next::after {
	display: block;
	content: "▼";		/*この形を出力する。このままだと下向き矢印になってしまうので、下の方の設定でそれぞれ90度回転させています。*/
	color: #5690c7;		/*三角の色*/
	font-size: 0.8rem;	/*三角のサイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}

/*---左側の三角---*/
.slick-prev {
	left: 5px;	/*---左からの配置場所---*/
}

/*---左側の三角を回転させる指定---*/
.slick-prev::after {
	transform: rotate(90deg);
}

/*---右側の三角---*/
.slick-next {
	right: 5px;	/*右からの配置場所*/
}

/*---右側の三角を回転させる指定---*/
.slick-next::after {
	transform: rotate(-90deg);
}


/*	.list：.pickupの中で使用
---------------------------------------------------------------------------*/
/*---listボックスを囲むボックス---*/
.list-container {
	display: flex;
	padding: 0;
	margin: 0;
	height: 500px;
	overflow: hidden;
}
.list {		/*ボックス1個あたり*/
	width: 100%;
	margin-right: 0%;
	width: 49%;				/*ボックスの幅*/
	margin-right: 2%;		/*ボックス同士の左右間の余白。ボックスを2列並べるため49%×2個=98%。100%との差2%がここに入る。*/
	position: relative;
/*	overflow: hidden;	*/
	background: transparent;
	padding: 0;
}
/*---2の倍数(偶数番目)のボックスへの追加指定---*/
.list:nth-of-type(2n) {margin-right: 0;}		/*右側のスペースをなくす設定*/



/*	.greeting_block：『ホーム＞ごあいさつ』
---------------------------------------------------------------------------*/
/*.greeting_block {
}*/

/*-------------------------------------------------------------------------------------------------------
	#room：『お部屋』ページへの追加設定
---------------------------------------------------------------------------------------------------------*/



/*-------------------------------------------------------------------------------------------------------
	#hotspring：『天然温泉』ページへの追加設定
---------------------------------------------------------------------------------------------------------*/



/*-------------------------------------------------------------------------------------------------------
	#cuisine：『お料理』ページへの追加設定
---------------------------------------------------------------------------------------------------------*/



/*-------------------------------------------------------------------------------------------------------
	#facilities：『施設案内』ページへの追加設定
---------------------------------------------------------------------------------------------------------*/



/*-------------------------------------------------------------------------------------------------------
	#activity：『体験・イベント』ページへの追加設定
---------------------------------------------------------------------------------------------------------*/
/*	マステ風見出し
---------------------------------------------------------------------------*/
#activity h3.all:after {
	background-color: rgba(254,222,132,0.9);  /* マステ背景色 */
	color: #666;
	font-family: sans-serif;
	content: '誰でもOK';
	font-size: 0.9rem;
}
#activity h3.stay:after {
	background-color: rgba(42,88,130,0.9);  /* マステ背景色 */
	color: #fff;
	font-family: sans-serif;
	content: '宿泊者限定';
	font-size: 0.9rem;
}
#activity h3.plan:after {
	background-color: rgba(101,159,68,0.9);  /* マステ背景色 */
	color: #fff;
	font-family: sans-serif;
	content: 'プラン利用者限定';
	font-size: 0.9rem;
}
#activity h3.group:after {
	background-color: rgba(101,159,68,0.9);  /* マステ背景色 */
	color: #fff;
	font-family: sans-serif;
	content: '団体利用限定';
	font-size: 0.9rem;
}



/*-------------------------------------------------------------------------------------------------------
	#group：『グループ・日帰り』ページへの追加設定
---------------------------------------------------------------------------------------------------------*/



/*-------------------------------------------------------------------------------------------------------
	#sightseeing：『周辺観光』ページへの追加設定
---------------------------------------------------------------------------------------------------------*/
/*	.banner_block：バナーリンク
---------------------------------------------------------------------------*/
.banner_block {
	border: none;
}
.banner_block ul {
	list-style: none;
}

/*-------------------------------------------------------------------------------------------------------
	#access：『交通アクセス』ページへの追加設定
---------------------------------------------------------------------------------------------------------*/
#access table span {
	font-weight: bold;
	color: #003682;
}
#access table .goal {
	font-weight: bold;
	color: #6fa769;
}
#access table ul {
	margin-left: 0;
}



/*-------------------------------------------------------------------------------------------------------
	#greeting：『ごあいさつ』ページへの追加設定
---------------------------------------------------------------------------------------------------------*/



/*-------------------------------------------------------------------------------------------------------
	#review：『お客様の声』ページへの追加設定
---------------------------------------------------------------------------------------------------------*/
#review .tweet_block {
	width: 100%;
background-color:#ddd;
}
#review blockquote.twitter-tweet {
	width: 100%;
    margin-bottom: 30px;
    padding: 50px 10px;
}



/*	吹き出し
---------------------------------------------------------------------------*/
.review_block {
	width: 100%;
	margin: 1.5em 0;
	overflow: hidden;
	background: url(../review/images/mark_review.png) no-repeat 15px 0 / 60px;
}
.review_block2 {
	background: url(../review/images/mark_review2.png) no-repeat 15px 0 / 60px;
}

.review_block p {
	text-align: left;
}

.faceicon {		/*顔アイコン*/
	float: left;
	margin-right: -90px;
	width: 80px;
}
.faceicon img{
	width: 100%;
	height: auto;
	border: solid 3px #dbe7f3;
	border-radius: 50%;
}
.chatting {width: 100%;}		/*吹き出しブロック*/
.says {		/*吹き出し枠*/
	display: inline-block;
	position: relative; 
	margin: 5px 0 0 105px;
	padding: 17px 13px;
	border-radius: 12px;
	background: #dbe7f3;
}

.says:after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 18px; 
	left: -24px;
	border: 12px solid transparent;
	border-right: 12px solid #dbe7f3;
}
.says p {
	margin: 0;
	padding: 0;
	padding-bottom: 1em;
}
.says .writer {
	text-align: right;
	font-size: small;
	padding-bottom: 0;
}


/*-------------------------------------------------------------------------------------------------------
	#faq：『よくあるご質問』ページへの追加設定
---------------------------------------------------------------------------------------------------------*/
.faq {padding: 0 5px;}

/*---質問---*/
.faq dt {
	border-radius: 10px;	/*枠を角丸にする*/
	margin-bottom: 20px;
	background: linear-gradient(#fff, #f7f7f7);	/*背景グラデーション*/
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);	/*ボックスの影。右と下へのぼかし幅*/
/*テキストのインデント。Qアイコンだけ左に飛び出させる。下のpaddingの一番最後の数字と合わせる。※マイナスは取らない！*/
	text-indent: -54px;
/*上、右、下、左への余白。最後の数字を上のtext-indentの数字と揃える。text-indentは必ずマイナスで。*/
	padding: 20px 20px 20px 54px;
}

/*---アイコン（Font Awesome）---*/
.faq dt::before {
	font-family: "Font Awesome 5 Free";		/*Font Awesomeを使う指定*/
	content: "\f059";						/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #83a649;		/*アイコンの色*/
	padding: 0 20px;	/*上下、左右の余白*/
}

/*---回答---*/
.faq dd {padding: 0 40px 30px;}	/*上、左右、下の余白*/

/*---opencloseを適用した要素のカーソル---*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}



/*-------------------------------------------------------------------------------------------------------
	#contact：『お問い合わせ』ページへの追加設定（『招待券』でも使用）
---------------------------------------------------------------------------------------------------------*/
.contact_block {
	width: 80%;
	margin: 0 auto;
}
.contact_block th {
	font-size: 0.9rem;
	vertical-align: top;
}


/*	.newicon、.upicon：NEW、UPアイコン
---------------------------------------------------------------------------*/
.haveto, .any {		/*共通*/
	display: inline-block;
	text-align: center;
	padding: 0 5px;
	border-radius: 3px;
	transform: scale(0.7);
}
.haveto {		/*newiconへの追加指定*/
	background: #f00;
	color: #fff;
}
.any {		/*upiconへの追加指定*/
	background: #eaa450;
	color: #fff;
}



/*-------------------------------------------------------------------------------------------------------
	#plan：『宿泊プラン』ページへの追加設定
---------------------------------------------------------------------------------------------------------*/
/*	マステ風見出し
---------------------------------------------------------------------------*/
#plan h3.all:after {
	background-color: rgba(254,222,132,0.9);  /* マステ背景色 */
	color: #666;
	font-family: sans-serif;
	content: '誰でもOK';
	font-size: 0.9rem;
}
#plan h3.friends:after {
	background-color: rgba(86,144,199,0.9);  /* マステ背景色 */
	color: #fff;
	font-family: sans-serif;
	content: 'Twitter相互フォローの方限定';
	font-size: 0.9rem;
}
#plan h3.stay:after {
	background-color: rgba(42,88,130,0.9);  /* マステ背景色 */
	color: #fff;
	font-family: sans-serif;
	content: '宿泊者限定';
	font-size: 0.9rem;
}
#plan h3.plan:after {
	background-color: rgba(101,159,68,0.9);  /* マステ背景色 */
	color: #fff;
	font-family: sans-serif;
	content: 'プラン利用者限定';
	font-size: 0.9rem;
}
#plan h3.group:after {
	background-color: rgba(101,159,68,0.9);  /* マステ背景色 */
	color: #fff;
	font-family: sans-serif;
	content: '団体利用限定';
	font-size: 0.9rem;
}



/*-------------------------------------------------------------------------------------------------------
	#privacy：『プライバシーポリシー』ページへの追加設定
---------------------------------------------------------------------------------------------------------*/
/*	プライバシーポリシー用ブロック
---------------------------------------------------------------------------*/
.privacy_block {
	width: 80%;
	margin: 0 auto;
}
.privacy_block p {
	text-align: left;
}
.privacy_block ul {
	list-style-type: none;
	margin-left: 0;
}

/*番号リスト*/
.privacy_block ol {
	list-style-type: decimal;

}
/*番号リスト*/
.privacy_block ol ol {
	margin-top: 1em;
	margin-left: 2em;

}


/*-------------------------------------------------------------------------------------------------------
	大画面用メインメニュー（非表示）
---------------------------------------------------------------------------------------------------------*/
#header,
#menubar,
#footermenu {
	display: none;
}




/*-------------------------------------------------------------------------------------------------------
/*	ここから下は画面幅480px以上の追加指定
---------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:480px) {

/*ボックス内の画像*/
.pickup .list img {
	height: 120px;		/*画像の高さ*/
}

/*　※注意！　下の閉じカッコ　}　は480px以上の設定に必要なので、うっかり削除しないように。　*/

}




/*-------------------------------------------------------------------------------------------------------
/*	ここから下は画面幅600px以上の追加指定
---------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) {

/*ボックス内の画像*/
.pickup .list img {
	height: 160px;		/*画像の高さ*/
}

/*　※注意！　下の閉じカッコ　}　は600px以上の設定に必要なので、うっかり削除しないように。　*/

}




/*-------------------------------------------------------------------------------------------------------
/*	ここから下は画面幅800px以上の追加指定
---------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:800px) {

/*-------------------------------------------------------------------------------------------------------
/*	全体の設定
---------------------------------------------------------------------------------------------------------*/
html, body {
	font-size: 18px;	/*基準となるフォントサイズの上書き*/
}

section + section {
	padding-top: 50px;	/*section間のスペース*/
}
p {text-align: center;}

.br-sp {display: none;}		/*改行位置*/
.br-sp_l {display: block;}


/*-------------------------------------------------------------------------------------------------------
/*	ヘッダー部分の設定
---------------------------------------------------------------------------------------------------------*/
header{
	max-width: 1400px;
	position: fixed;
	top:0;
	background-color: #4c493d;
	min-height: 90px;
	color: #fff;
	flex-direction: row;			/*子要素を横並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	align-items: flex-end;			/*垂直揃えの指定。上下中央に配置されるように。*/
	padding: 10px 20px 10px 20px;					/*ボックス内の余白*/
}
header #logo {		/*ロゴ画像*/
	width: auto;
	height: 30px;
	margin: 0;		/*中央から左に戻る為の設定*/
}
header a {color: #fff;}
header img {		/*ヘッダーロゴ・ボタン画像*/
	width: auto;
	height: 30px;
	margin: 0;
	padding: 0;
}
header a:hover img {opacity: 0.8;}
header ul {
	padding-top: 10px;
	list-style-type: none;
	display: flex;
	flex-direction: row;			/*子要素を横並びにする*/
	align-items: center;			/*垂直揃えの指定。上下中央に配置されるように。*/
	padding: 5px;					/*ボックス内の余白*/
	margin-right: auto;
}
#header {
	display: block;
	font-size: 12px;
	height: auto;
}
#header-s {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;			/*垂直揃えの指定。上下中央に配置されるように。*/
	height: 70px;
}
#header-s h1#logo {height: auto;}
#header-s #logo img {
	width: auto;
	height: 30px;
}

/*	ヘッダーボタン
----------------------------------------------------*/
#header_btn_block ul {
	position: absolute;
	top: 10px;
	right: 10px;
}
#header_btn_block li {
	background-color: #fff;
}

/*	ヘッダーナビ
----------------------------------------------------*/
#header-nav {
	margin: 0;
	padding: 0;
}
#header-nav li {		/*メニュー1項目*/
	margin-left: 5px;
	background: url(../images/mk_header_nav.png) no-repeat 10px 0 / 10px;		/*三角アイコン*/
	padding-left: 20px;
	line-height: 1.2;
	text-align: left;
}
#header-nav li a {
	text-decoration: none;
	display: inline-block;
	padding: 0 3px;
}
#header-nav li a:hover {
/*	background: #968989;		マウスオン時の背景色*/
	color: #eaa450;
}



/*-------------------------------------------------------------------------------------------------------
/*	大画面用メインメニューの設定
---------------------------------------------------------------------------------------------------------*/
#menubar {			/*ボックス全体の設定*/
	display: block;	/*表示*/
	margin-top:90px;
	position: fixed;
	top: 0;
	max-width: 1400px;
	z-index: 500;
	background-color: #fff;
}
#menubar ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;						/*flexボックスを使う指定*/
	justify-content: space-around;		/*並びかたの種類の指定*/
	line-height: 1.5;					/*行間を少しだけ狭く*/
}
#menubar li {
	flex: 1;		/*それぞれのメニューが幅一杯に広がるように*/
	text-align: center;
	position: relative;
}
#menubar a:hover img {opacity: 0.8;}
#menubar li a {
	text-decoration: none;
	display: block;
	color: #333;
	padding: 0;
}



/*-------------------------------------------------------------------------------------------------------
/*	大画面用メインメニューの設定
---------------------------------------------------------------------------------------------------------*/
/*	パンくずリスト
---------------------------------------------------------------------------*/
.pan .pan_l {
	display: inline-block;	/*表示させる（横並び）*/
}

.pan li::before {		/*リストタグの頭に加える記号*/
	content: ">";		/*このテキストを表示させる*/
	color: #999;		/*文字色*/
	padding-right: 12px;		/*記号とテキストとの余白*/
}
/***１番目のリストタグの頭に加える文字のリセット***/
.pan li:first-child::before {
	content: "";		/*テキストを空にする*/
}


/*	メインブロック
---------------------------------------------------------------------------*/
main {
	margin-top: 180px;
	padding: 50px;
}


/*見出し
----------------------------------------------------*/
main h2.simple {
	border: none;
	font-size: 24px;
}
main h3.simple {
	font-size: 20px;
}


/*	関連リンク
----------------------------------------------------*/
.cervin_banner ul{
	list-style-type: none;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
	margin-bottom: 40px;
}
.cervin_banner li{
	vertical-align: middle;
}

.banner_text li {
	margin: 0 5px;
}



/*	フッターブロック
---------------------------------------------------------------------------*/
/*	フッターメニュー
----------------------------------------------------*/
#footermenu {
	display: flex;
	font-size: 0.8rem;
	min-height: 250px;
	font-size: 14px;
	padding: 0 150px;
}

#footer_logo {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	padding-bottom: 0;
}
#footer_logo img {
	width: 100px;
	
}
#footer_logo #icon_img {
	margin-top: 40px;
	width: 25%;
	text-align: left;
}
#footer_logo #icon_img img {width: 25px;}
#footer_logo #icon_img li {display: inline;}
#footer_logo #cervin_add {
	margin: 0 auto;
	text-align: left;
	width: 75%;
	padding-left: 450px;
	background: url(../images/footer_logo.png) no-repeat 180px top / 100px;
}


/*-------------------------------------------------------------------------------------------------------
/*	レイアウト用ブロックのクラス設定
---------------------------------------------------------------------------------------------------------*/
/*	.box1：1カラムボックス（ホーム、『施設案内』で使用）
---------------------------------------------------------------------------*/
.box1 p {text-align: left;}


/*	.ta1：テーブル
---------------------------------------------------------------------------*/
.ta1 caption {padding: 20px 15px;}
.ta1 th, .ta1 td {padding: 20px 15px;}	/*th（左側）、td（右側）の共通設定*/
.ta1 th {width: 20%;}					/*th（左側）のみの設定*/


/*	.photo：写真を3列に並べたレイアウト（『体験・イベント』で使用）
---------------------------------------------------------------------------*/
.photo_block {
	display: flex;
	flex-direction: row;

}
.photo {					/*ボックス1個あたり*/
	position: relative;
	width: 33.3%;
}
.photo a:hover img {
	opacity: 0.8;
}
.photo p {		/*photoボックス内の段落(p)タグ*/
	padding: 5px 0 !important;		/*上下、左右への段落タグ内の余白*/
	position: absolute;
	bottom: 0px;		/*photoボックスの下から0pxの場所に配置*/
	width: 100%;		/*幅*/
	background: #111;		/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.5);		/*背景色。0,0,0は黒の事で0.5は50%色がついた状態のこと*/
	color: #fff;		/*文字色*/
	text-align: center;		/*文字をセンタリング*/
	font-size: 80%;
	margin: 0;
}


/*	.btn：リンクボタン
---------------------------------------------------------------------------*/
.btn a {
	width:auto;
	padding: 10px 15px;		/*上下、左右へのボタン内の余白*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	font-size: 0.9rem;
}


/*詳細ページの画像切り替え（imgchg_pack.js）※一般のhtmlテンプレートで利用。
---------------------------------------------------------------------------*/
/*大きな画像のボックスと説明文を入れるボックス*/
#item-image {width: 80%;}



/*	インナー用ブロック
----------------------------------------------------*/
.inner_block {
	width: 90%;
	margin: 0 auto;
}
/*.inner_block p {
	text-align: left;
}*/

.tal p {
	text-align: left;
}


/*	その他の設定
---------------------------------------------------------------------------*/
.ws {width: 50%;display: inline-block;}
.look {background: #ccc;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px;}
.mb40 {margin-bottom: 40px !important;}
.clear {clear: both;}
.ofh {overflow: hidden;}
ul.disc {padding: 0em 25px 20px;list-style: disc;}
.color1, .color1 a {color: #0b4613;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
img.fr,figure.fr {float: right;margin: 10px;}
img.fl,figure.fl {float: left;margin: 10px;}
.fr {float: right;}
.fl {float: left;}
.w30p {width: 30%;}
.w65p {width: 65%;}
.big1 {font-size: 28px;letter-spacing: 0.1em;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.sh {display: none;}
/*.link {display: block;margin-top: -150px;padding-top: 130px;}*/
.link {display: block;margin-top: -180px;padding-top: 200px;}



/*-------------------------------------------------------------------------------------------------------
/*	トップページ（#home）のみの追加設定
---------------------------------------------------------------------------------------------------------*/
/*	ヘッダー部分の設定
---------------------------------------------------------------------------*/
#home header {
	position: relative;
}
#home header p {
	position: absolute;
	right: 20px;
	top: 20px;
	color: #9d9287;
}
#home #header {
	display: flex;
	flex-direction: column;
}
#home #header-s {
	display: none;
}
#home header #header_logo_block {
	display: block;
}
#home header #header_logo_block ul {
	display: block;
	position: absolute;
	top: -5px;
	left: 30px;
	margin: 0;
	padding: 0 0 100px 0;
	height: auto;
	background: url(../images/bg_logo_block.png) no-repeat left bottom;

}
#home #header_logo_block li {
	background-color: #fff;
}
#home #header_logo_block img {
	width: 200px;
	height: auto;
}
#home #header-nav {
	position: absolute;
	right: 20px;
	bottom: 10px;
}


#home header #header_text {
	line-height: 1.3;
	text-align: right;
}


/*	メインメニュー部分の設定
---------------------------------------------------------------------------*/
#home #menubar {
	position: static;
	margin-top: 0;
}
#menubar_hdr,
#footermenu-s {
	display: none;	/*非表示*/
}


/*	メインコンテンツ部分の設定
---------------------------------------------------------------------------*/
#home main {margin-top: 0;}
#home main h2 {font-size: 32px;}


/*	外部プラグインの設定
---------------------------------------------------------------------------*/
#home .mainimg {
	height: 400px;
	overflow: hidden;
}
#home .mainimg img {
	height: auto;
	width: 100%;
}


/*	#new：『ホーム＞お知らせ』ブロック（表タイプ）
---------------------------------------------------------------------------*/
/*---日付(dt)設定---*/
#new dt {width: 16em;}		/*幅。14文字(em)分。*/
/*---日付の横のマーク（共通設定）---*/
#new dt span {
	display: inline-block;	/*表示させる、*/
	width: 6em;				/*幅。6文字(em)分。*/
	line-height: 1.6;		/*行間*/
	background: #999;		/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 0.9rem;		/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	text-align: center;		/*文字をセンタリング*/
	border-radius: 3px;		/*角を少しだけ丸くする*/
	margin-left: 1.2em;		/*日付との間のスペース*/
}
/*---記事(dd)設定---*/
#new dd {width: calc(100% - 16em);}		/*「14em」は上の「#new dt」のwidthの値です。*/


/*	.pickup：【slick】『ホーム＞お知らせ』スライドショータイプ
---------------------------------------------------------------------------*/
/*---スライドショー全体を囲むボックス---*/
.pickup {padding: 20px;}		/*ボックス内の余白*/
.pickup .slick-slide {margin: 10px !important;}		/*ボックス1個あたり*/
.pickup .list img {height: 100px;}/*ボックス内の画像*/


/*	.list：.pickupの中で使用
---------------------------------------------------------------------------*/
.list {
	width: 23%;				/*ボックスの幅*/
/*ボックス同士の左右間の余白。ボックスを4列並べるため23%×4個=92%。100%との差の8%分をボックス間にある余白3個分で割った数字がここに入る。※下の「.list:nth-of-type(2n)」の数字と合わせる。*/
	margin-right: 2.66%;
	margin-bottom: 25px;	/*ボックス同士の上下間の余白*/
}

.list figure img {height: 150px;}

/*2の倍数(偶数番目)のボックスへの追加指定*/
/*上のlistのmargin-rightと数字を合わせる。小さな端末向けで0になっているのを上書きする。*/
.list:nth-of-type(2n) {margin-right: 2.66%;}

/*4の倍数のボックスへの追加指定*/
.list:nth-of-type(4n) {margin-right: 0;}		/*右側のスペースをなくす設定*/







/*---------------------------------------------------------------
	fixmenu設定（メニューが画面上部に到達した際のスタイル）※トップページのみ使用
-----------------------------------------------------------------*/
/*上部固定メニュー用fixmenu設定*/
body#home.is-fixed-menu #menubar.nav-fix-pos {
	position: fixed;width: 100%;top: 0px;
}
/*body.is-fixed-menu .contents:first-of-type {*/
body#home.is-fixed-menu main:first-of-type {
	margin-top: 90px;	/*メニューブロックの高さを指定する。背景画像も高さ100pxなので通常はこのままで。*/
}
/*※以下の２ブロックのスタイルの「中身」は、上の２ブロックのスタイルと単純に合わせておいて下さい。fixmenuスクリプトを２つ使う為に必要な設定になります。*/
body#home.is-fixed #menubar.nav-fix-pos {
	position: fixed;width: 100%;top: 0px;
}
body#home.is-fixed main:first-of-type {
/*body.is-fixed .contents:first-of-type {*/
	margin-top: 90px;
}




/*-------------------------------------------------------------------------------------------------------
	#faq：『よくあるご質問』ページへの追加設定
---------------------------------------------------------------------------------------------------------*/
.faq dt {
	text-indent: -58px;					/*テキストのインデントの調整*/
	padding: 20px 20px 20px 58px;		/*余白の調整*/
}



/*-------------------------------------------------------------------------------------------------------
	#invitation：『招待券』ページへの追加設定
---------------------------------------------------------------------------------------------------------*/
#invitation section.h4 p {
	text-align: left;
}



/*　※注意！　下の閉じカッコ　}　は800px以上の設定に必要なので、うっかり削除しないように。　*/

}



/*---------------------------------------------------------------------------
ここから下は画面幅1025px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1025px) {

.pickup .list img {height: 150px;}
/*　※注意！　下の閉じカッコ　}　は1000px以上の設定に必要なので、うっかり削除しないように。　*/

/*-------------------------------------------------------------------------------------------------------
	トップページへの追加設定
---------------------------------------------------------------------------------------------------------*/
/*	#intro_block：『ホーム＞紹介』ブロック
---------------------------------------------------------------------------*/
#home #intro_block {
	overflow: hidden;
	margin-bottom: 80px;
}
#home #intro_block h2 {font-size: 32px;}
#home #intro_block #intro_hakuunkan {
	float: left;
	width: 33%;
}
#home #intro_block #intro_lodge {
	float: right;
	width: 33%;
}
#home #intro_block #intro_catch {
	width: 34%;
	text-align: center;
	font-size: 16px;
}
#home #intro_block #intro_catch p {line-height: 1.8;}

}