/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 13 2025 | 01:09:27 */
/*PC:～992px / tablet:991～768px / レスポンシブ:780px (完全sp:767px～)*/
/*コンテンツ横幅 1140px (内訳:1110px padding-left:15px padding-right:15px)*/
/*Origin Ⅱ (Bootstrap4)*/


/*==============================================================
全体
==============================================================*/
/*----------------------------------------------------
背景
----------------------------------------------------*/
body {background-color:#fff;}
/*----------------------------------------------------
（slick）
----------------------------------------------------*/
/*----ドットの大きさ----*/
.slick-dots li button:before {content:"\2022" !important; font-size:32px !important;}
.slick-dots li {width:30px !important;}
/*----------------------------------------------------
（swiper）全体設定
----------------------------------------------------*/
.swiper-pagination-bullet-active {background:#444 !important;}
.swiper-pagination-bullet {margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px) !important; 
	caret-color:transparent !important;}
/*----------------------------------------------------
メインとサイドの幅比率
----------------------------------------------------*/
@media (min-width: 992px) {
	.mainSection-col-two {width:78%;}
	.sideSection-col-two {width:22%;}}
/*----------------------------------------------------
固定ページは全幅指定
----------------------------------------------------*/
body.page-template .siteContent .container {max-width:100%; padding:0;}
/*----------------------------------------------------
横幅1110px
----------------------------------------------------*/
.w1110 {width:100%; max-width:1110px; margin:0 auto; padding-left:16px; padding-right:16px;}
/*----sp時----*/
@media (max-width:780px) {.w1110 {max-width:auto;}}
/*----------------------------------------------------
高さ余白（メッセージ）
----------------------------------------------------*/
.height8 {padding-top:8rem; padding-bottom:8rem;}
/*----------------------------------------------------
文字を縦に
----------------------------------------------------*/
.tate {writing-mode:vertical-rl; text-orientation:upright;}/*----文字を縦に----*/
/*----文字を縦に（pc時のみ）----*/
.tate_pc {writing-mode:vertical-rl; text-orientation:upright; display:inline-block; text-align:justify;}
.tate_pc p {line-height:2.2;}
/*----sp時----*/
@media (max-width:780px) {
	.tate_pc {writing-mode:initial; display:block;}
	.tate_pc p {line-height:1.9;}}
/*----縦文字を中央寄せ----*/
.dflex {display:flex; flex-direction:column; justify-content:center; width:100%;}
/*----------------------------------------------------
リスト / 通常コリジョン
----------------------------------------------------*/
.li_col {display:flex; flex-wrap:nowrap; width:100%;}
.li_col.wrap {flex-wrap:wrap;}
.li_col.gap16 {column-gap:16px; row-gap:16px;}/*----gapを付与したいとき----*/
.li_col.gap32 {column-gap:32px; row-gap:32px;}/*----gapを付与したいとき----*/
.li_col .full {width:100%;}
.li_col .w90 {width:90%;}
.li_col .w80 {width:80%;}
.li_col .w70 {width:70%;}
.li_col .w60 {width:60%;}
.li_col .half, .li_col .w50 {width:50%;}
.li_col .w40 {width:40%;}
.li_col .w30 {width:30%;}
.li_col .w20 {width:20%;}
.li_col .w10 {width:10%;}
/*----sp時----*/
@media (max-width:780px) {
	.li_col {flex-wrap:wrap;}
	.li_col .w90 {width:100%;}
	.li_col .w80 {width:100%;}
	.li_col .w70 {width:100%;}
	.li_col .w60 {width:100%;}
	.li_col .half, .li_col .w50 {width:100%;}
	.li_col .w40 {width:100%;}
	.li_col .w30 {width:100%;}
	.li_col .w20 {width:100%;}	
	.li_col .w10 {width:100%;}}
/*----------------------------------------------------
object-fit（画像をフィット）
----------------------------------------------------*/
.fit {overflow:hidden;}
.fit img {width:100%; height:100%; object-fit:cover; object-position:center center;}
/*----sp時----*/
@media (max-width:780px) {.hei260 {height:260px;}}
/*----------------------------------------------------
order / レスポンシブ時の描画順番の指定
----------------------------------------------------*/
/*----sp時----*/
@media (max-width:780px) {
	.order1 {order:1;}
	.order2 {order:2;}
	.order3 {order:3;}
	.order4 {order:4;}
	.order5 {order:5;}
	.order6 {order:6;}}

/*==============================================================
見出し
==============================================================*/
/*----------------------------------------------------
h1 / デフォ
----------------------------------------------------*/
h1 {margin:0 0 16px 0; font-size:2rem;}
/*----------------------------------------------------
h2 / デフォ
----------------------------------------------------*/
h2 {margin:0 0 16px 0; padding:0; font-size:1.4rem; line-height:1.9; border:none;}
/*----------------------------------------------------
h2 / home01
----------------------------------------------------*/
h2.home01 {font-size:clamp(1.5rem, 0.571rem + 1.9vw, 2rem);}
h2.home01 span {display:inline-block; font-size:clamp(1rem, 0.629rem + 0.76vw, 1.2rem); line-height:1.9;}
.sub_eng {text-orientation:mixed; color:#A3A3A3;}
/*----------------------------------------------------
h3 / デフォ
----------------------------------------------------*/
h3 {margin:0 0 8px 0; font-size:1.28rem; border:none;}
h3:after {content:none;}

/*==============================================================
背景
==============================================================*/
body.home {background-color:#fff;}

/*==============================================================
ロゴ（css / js 読み込み）
==============================================================*/
h1.home01 {position:fixed; z-index:100; left:0; top:20px; mix-blend-mode:difference;}
h1.home01 img {width:80px; height:auto;}
/*----sp時----*/
@media (max-width:780px) {h1.home01 {position:absolute; width:64px;}}

/*==============================================================
ご予約はこちら | RESERVATION（css / js 読み込み）
==============================================================*/
.link_yoyaku a {display:table; padding:4px 8px; text-decoration:none !important;
	color:#171717; background-color:#ffffffa8; border:1px solid; backdrop-filter:blur(8px);}
.link_yoyaku.cen a {margin:0 auto;}
.link_yoyaku a:hover {text-decoration:none; color:#fff; background-color:#171717;}
/*----縦バージョン（absを付与して固定）----*/
.link_yoyaku.abs {position:fixed; z-index:2001; right:16px; top:96px; writing-mode:vertical-rl; height:22rem;}
.link_yoyaku.abs .eng {text-orientation:upright; letter-spacing:-0.3rem;}
.link_yoyaku.abs a {padding:8px 4px;}
/*----sp時----*/
@media (max-width:780px) {
	.link_yoyaku.abs {right:72px; top:14px; font-size:0.85rem; writing-mode:horizontal-tb; height:auto;}
	.link_yoyaku.abs .eng {letter-spacing:0;}
	.link_yoyaku.abs a {padding:4px 8px;}}

/*==============================================================
スライド
==============================================================*/
/*----親----*/
.pa_slide_top {position:relative; z-index:1; background-color:#000;}
/*----子----*/
.slide_top {opacity:0.8;}
.zm_out {height:100vh !important; max-height:911px; min-height:540px !important; overflow:hidden;}
.zm_out img {width:100%; height:100%; object-fit:cover; object-position:center;}
/*----tab時----*/
@media (max-width:991px) {.zm_out {height:92vh !important;}}
/*----アイテム（ロゴ）----*/
.pa_slide_top .item_logo {position:absolute; z-index:2; width:36%; max-width:200px; 
	left:50%; top:50%; transform:translate(-50%, -50%);}
.pa_slide_top .item_logo img {width:100%; height:auto;}
/*----アイテム（ニュース）----*/
.pa_slide_top .item_news {position:absolute; z-index:2; right:96px; top:96px;}
.pa_slide_top .item_news a {color:#fff;}
.pa_slide_top .item_news a:hover {text-decoration:none; color:#fff;}
.pa_slide_top .item_bnr img {width:100%; height:auto;}
/*----アイテム（バナー）----*/
.pa_slide_top .item_bnr {position:absolute; z-index:2; left:32px; bottom:32px; 
	 width:32%; max-width:192px; background-color:#00000040; backdrop-filter:blur(8px);}
.pa_slide_top .item_bnr img {width:100%; height:auto;}
/*----sp時----*/
@media (max-width:780px) {
	.pa_slide_top .item_news {right:18px; top:96px;}
	.pa_slide_top .item_bnr {left:16px; bottom:16px;}}
/*----------------------------------------------------
スライドアニメーション
----------------------------------------------------*/
/*----ズームアウト----*/
@keyframes zoomOut {
  0% {transform: scale(1.3);}
  100% {transform: scale(1);}}
/*----jsでadd_animeクラスを付与し、アニメーションを10秒で再生----*/
.add_anime {animation: zoomOut 10s linear 0s normal both;}

/*==============================================================
about / 宿坊「心月」について
==============================================================*/
.mess_about {height:26rem;}
/*----sp時----*/
@media (max-width:780px) {.mess_about {height:auto;}}

/*==============================================================
concept / 心休まるひととき
==============================================================*/
.mess_concept {height:24rem;}
/*----sp時----*/
@media (max-width:780px) {.mess_concept {height:auto;}}

/*==============================================================
stay / 特別なひととき
==============================================================*/
.mess_stay {height:24rem;}
/*----sp時----*/
@media (max-width:780px) {.mess_stay {height:auto;}}

.mess_stay2 {height:22rem; margin:128px 0;}
/*----sp時----*/
@media (max-width:780px) {.mess_stay2 {height:auto;}}

.mess_stay3 {height:40rem; display:table; margin:0 0 0 auto;}
/*----sp時----*/
@media (max-width:780px) {.mess_stay3 {height:auto;}}
/*----------------------------------------------------
画像
----------------------------------------------------*/
.pic_stay02 {width:100%; height:256px;}
.pic_stay03 {width:100%; height:230px;}
.pic_stay04 {width:240px; height:360px; display:table; margin:0 0 0 auto;}
/*----sp時----*/
@media (max-width:780px) {.pic_stay04 {margin:0 auto 0 0;}}
.pic_stay05 {width:240px; height:360px; display:table; margin:0 auto 0 0;}

/*==============================================================
lodge / 施設のご案内
==============================================================*/
.mess_lodge {height:32rem;}
/*----sp時----*/
@media (max-width:780px) {.mess_lodge {height:auto;}}
/*----------------------------------------------------
カルーセル / ロッジ
----------------------------------------------------*/
.crs_lodge .slick-slide.slick-current {opacity:1; transition-duration:0.3s;}
.crs_lodge .slick-slide {opacity:0.4; transition-duration:0.3s;}
.crs_lodge {padding:0 16px;}
.crs_lodge .slick-slide {margin-left:48px; margin-right:48px;}
.crs_lodge .slick-slide img {width:100%; max-width:340px; height:auto;}
.crs_lodge a:hover {text-decoration:none;}
/*----sp時----*/
@media (max-width:780px) {.crs_lodge .slick-slide img {max-width:240px;}}
/*----------------------------------------------------
ドット
----------------------------------------------------*/
.crs_lodge .slick-dots {bottom:-48px !important;}
/*----------------------------------------------------
リンク / ロッジ
----------------------------------------------------*/
.lodge01, .lodge02, .lodge03 {position:relative; z-index:1;}
.lodge_link {position:absolute; z-index:2; content:""; left:0; top:0; width:100%; height:100%;}
.lodge_link a {display:block; width:100%; height:100%;}
/*----------------------------------------------------
高さをずらす / ロッジ
----------------------------------------------------*/
.crs_lodge .lodge01 {margin-top:128px;}
.crs_lodge .lodge03 {margin-top:192px;}
/*----sp時----*/
@media (max-width:780px) {
	.crs_lodge .lodge01 {margin-top:0;}
	.crs_lodge .lodge03 {margin-top:0;}}
/*----------------------------------------------------
リスト / ロッジ
----------------------------------------------------*/
.li_lodge {display:flex; flex-wrap:nowrap; align-items:baseline; column-gap:32px;}
/*----sp時----*/
@media (max-width:780px) {.li_lodge.akebono {margin-bottom:0px;}}
/*----------------------------------------------------
リスト / 天宮
----------------------------------------------------*/
.li_tenkyu {display:flex; flex-wrap:nowrap; align-items:baseline; column-gap:32px; row-gap:32px;}
/*----sp時----*/
@media (max-width:780px) {.li_tenkyu {flex-direction:column;}}
/*----------------------------------------------------
フレーム / ロッジ
----------------------------------------------------*/
.fr_lodge {margin:8px 0; padding:16px 6px; 
	border:2px solid; outline:1px solid; outline-offset:-5px;}
.lodge01:hover .fr_lodge, .lodge02:hover .fr_lodge, .lodge03:hover .fr_lodge {color:#fff; background-color:#000;}

/*==============================================================
cuisine / お料理
==============================================================*/
.mess_cui {height:30rem;}
/*----sp時----*/
@media (max-width:780px) {.mess_cui {height:auto;}}
/*----------------------------------------------------
（swiper）カルーセル / お料理
----------------------------------------------------*/
.crs_menu.swiper {margin:0 0 0 auto; padding:0 0 48px 0; width:84%;}
@media (max-width:780px) {.crs_menu.swiper {margin:0 0 0 16px; width:100%;}}
/*----------------------------------------------------
画像
----------------------------------------------------*/
.pic_cui02 {width:224px; height:336px; margin:64px 0 0 auto;}
/*----sp時----*/
@media (max-width:780px) {.pic_cui02 {margin:64px auto 0;}}

/*==============================================================
antique / アンティーク
==============================================================*/
.mess_anti {height:24rem;}
/*----sp時----*/
@media (max-width:780px) {.mess_anti {height:auto;}}
/*----------------------------------------------------
（swiper）カルーセル / アンティーク
----------------------------------------------------*/
.crs_anti.swiper {margin:0 0 0 auto; padding:0 0 48px 0; width:84%;}
@media (max-width:780px) {.crs_anti.swiper {margin:0 0 0 16px; width:100%;}}

/*==============================================================
access / 交通のご案内
==============================================================*/
.mess_acc {height:18rem; display:table; margin:0 0 0 auto;}
/*----sp時----*/
@media (max-width:780px) {.mess_acc {height:auto; margin:0;}}
/*----------------------------------------------------
google map
----------------------------------------------------*/
.g_map a {text-orientation: mixed; border-left:1px solid;}
.g_map a:hover {text-decoration:none;}
/*----sp時----*/
@media (max-width:780px) {.g_map a {border-left:none; border-bottom:1px solid;}}
/*----------------------------------------------------
svg地図
----------------------------------------------------*/
.pic_map {position:relative; z-index:1; margin-top:-96px;}
/*----sp時----*/
@media (max-width:780px) {.pic_map {margin-top:32px;}}

/*==============================================================
seeing / 周辺スポット
==============================================================*/
.mess_seeing {height:30rem;}
/*----sp時----*/
@media (max-width:780px) {.mess_seeing {height:auto;}}

/*==============================================================
info / お知らせ
==============================================================*/
.news-list {list-style:none; padding:0;}
.news-item {padding-bottom:8px; border-bottom:1px solid #e5e5e5;}
.news-date {display:block; color:#a3a3a3; font-size:0.875rem;}
.news-list a:hover {text-decoration:none;}

/*==============================================================
投稿一覧
==============================================================*/
/*----------------------------------------------------
メイン
----------------------------------------------------*/
.postListText {border-bottom:1px solid #e5e5e5;}
.postListText_date {color:#a3a3a3; float:none;}
.postListText_title {font-size:16px;}
.postListText_title a:hover {text-decoration:none;}
/*----------------------------------------------------
サイド
----------------------------------------------------*/
.subSection-title:after, h3:after {content:none;}