@charset   "Shift_JIS";


html {
	font-size: 62.5%;/* 16px x 0.625 = 10px(=1rem) */
}

body {
	font-size: 1.4rem;/* 14px */
	font-family: -apple-system, blinkMacSystemFont,"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "メイリオ", Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt";
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, body {
		font-feature-settings: "pkna";
	}
}

_:lang(x)::-ms-backdrop, body {
    font-family: "メイリオ", Meiryo, sans-serif;
}

body {
	height: 100%;
	color: #333333;
	margin: 0px;
	padding: 0px;
	text-align: center;
}



h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form{
	margin: 0px;
	padding: 0px;
}

ul{
	list-style-type: none;
}
img {
	border: none;
}
input,textarea,select {
	font-size: 0.9em;
}
form {
	margin: 0px;
}
table {
	border-collapse:collapse;
	font-size: 100%;
	border-spacing: 0;
}

select {
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
}

/*borderbox*/
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


/*PC、スマホ表示切替
---------------------------------------------------------------------------*/
.pc {
	display: block;
}

.sp {
	display: none;
}

/*spanで改行しない*/
.il {
	display: inline;
}

@media only screen and (max-width:600px){
.pc {
	display: none;
}

.sp {
	display: block;
}

.ilsp {
	display: inline;
}
}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #003399;
	transition-property: all;
	transition: 0.2s linear;
}
a:hover {
	color: #3778ff;
}

a:hover img{
	-ms-filter: "alpha( opacity=80 )";
	filter: alpha(opacity=80);
	opacity:0.8;
}

a.anchor{
    display: block;
    clear: both;
}

/*コンテナー（フッターは除く。）
---------------------------------------------------------------------------*/
.back-w{
    background-color: #ffffff;
}

#container {
	text-align: left;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	padding: 5px 0;
}


.mw_1440 {
	max-width: 1440px;
	margin: 0 auto;
}


@media screen and (min-width: 1441px) {
#container {
    max-width: 1440px;
}
}


@media screen and (min-width: 961px) and (max-width:1440px){
#container {
    max-width: 96%;
}
}


@media only screen and (max-width:960px) and (min-width:601px){
#container {
	padding: 0;
    padding-top: 1px;
    width: 90%;
}
}


@media only screen and (max-width:600px){
#container {
	padding: 0;
    width: 96%;
    padding-top: 1px;
}
}


/*ヘッダー
---------------------------------------------------------------------------*/
/*#header {
	text-align: right;
	height: 105px;	
	width: 100%;
	position: relative;
	display: block;
	margin: 0 auto;
    padding-top: 15px;
}
*/
.h_box {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 auto;
    background-color: #ffffff;
}


/*ロゴ画像*/
/*#header #logo {
	position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;

}*/

img.logo {
	height: 60px;
    float: left;
    margin: 5px;
}


/*背景固定部*/
.fixed-bg {
  min-height: 80vh;
  /*background-attachment: fixed;
  background-size: cover;
  background-position: center;*/
  position: relative;
    
}

.fixed-bg:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url(../image/bg.jpg) bottom no-repeat;
  background-size:cover;
}


 
/*.bg01 {
  background-image: url(../image/bg01.jpg);
}
*/

.fixed-bg .fixed-bg-content {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.fixed-bg .fixed-bg-content h1 {
  font-size: 1.8em;
  color: #fff;
  margin-bottom: 24px;
 /* font-family: 'Noto Serif JP';*/
  font-family: "M PLUS 1p" , "メイリオ", Meiryo;
  font-weight: normal;
  text-shadow: 2px 2px 3px #222222;
}



@media screen and (min-width: 1441px) {
.h_box {
    max-width: 1440px;
}
}


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


#header h1 {
	display:none;
}

#header #logo {
	position: absolute;
	top: 0;
	left: 5px;
}

#logo img {
	height: 55px;
}
    
.fixed-bg {
  min-height: 65vh;
}

.fixed-bg .fixed-bg-content h1 {
  font-size: 1.5em;
  margin-bottom: 18px;
}

}

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

#logo img{
	height: 35px;
}
    
.fixed-bg .fixed-bg-content h1 {
  font-size: 1.2em;
  margin-bottom: 12px;
}
    
}



/* メインメニュー
---------------------------------------------------------------------------*/
/* ナビゲーションバー全体 */
.g-nav {
    clear: both;
    width: 100%;
    z-index: 10;
    background-color: #ffffff;
    margin: 0 auto;
    height: 70px;
}

/* ロゴとメニューを横並びにするための親要素 */
.inner {
    max-width: 1440px;
    margin: 0 auto;
    text-align: left;
    
    /* ▼ Flexboxの設定を追加 ▼ */
    display: flex;
    justify-content: space-between; /* 両端揃え */
    align-items: center;            /* 垂直中央揃え */
    height: 70px;                   /* 高さをg-navと合わせる */
}

/* ロゴ画像のサイズ調整 (任意) */
.inner .logo {
    height: 50px; /* 高さをメニューと合わせる例 */
    width: auto;
}

/* メニューのulタグ (g-nav-menuクラス) */
.g-nav-menu {
    /* overflow: hidden; は不要 */
    display: flex; /* liを横並びにする */
    margin: 0;     /* ulのデフォルト余白を削除 */
    padding: 0;    /* ulのデフォルト余白を削除 */
    margin-right: 10px;
}

/* メニューのliタグ */
.g-nav-menu li {
    /* float: left; は不要 */
    color: #fff;
    list-style-type: none;
    /*height: 50px;*/
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    margin-left: 16px; /* メニュー間の隙間 (お好みで調整) */
    font-family: "M PLUS 1p" , "メイリオ", Meiryo;
}

/* メニューのaタグ */
.g-nav-menu li a {
    color: #333333;
    text-decoration: none;
    margin: 0;
    width: 100%;
    font-size: 1.1em;
    display: inline-block;
    font-weight: bold;
    /*height: 50px;*/
    /*line-height: 50px;*/ /* 高さと合わせる */
    vertical-align: middle;
    position: relative;
    border-radius: 1.1em;
    padding: 5px 12px;
}


.g-nav-menu li a:hover{
	color: #ffffff;
    background: #8F913D;
}





/* --------------------------------
 ハンバーガーメニュー用 CSS
-------------------------------- */

/* ▼ ハンバーガーアイコン (トグルボタン) ▼ */
.g-nav-toggle {
    display: none; /* PCでは非表示 */
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1001; /* メニューより手前に */
}

/* アイコンの3本線 */
.g-nav-toggle span {
    display: block;
    width: 30px; /* 線の幅 */
    height: 3px;  /* 線の太さ */
    background-color: #333;
    position: absolute;
    left: 5px;
    transition: all 0.3s ease;
}
.g-nav-toggle span:nth-child(1) { top: 10px; }
.g-nav-toggle span:nth-child(2) { top: 19px; }
.g-nav-toggle span:nth-child(3) { top: 28px; }


/* ▼▼▼ メディアクエリ (スマホ表示) ▼▼▼ */
/* 画面幅が 768px 以下の場合 */
@media (max-width: 768px) {

    /* ハンバーガーアイコンを表示 */
    .g-nav-toggle {
        display: block;
    }

    /* PC用メニュー (ul) を初期非表示に */
    .g-nav-menu {
        display: none; /* ▼ 初期状態は非表示 ▼ */
        
        /* ▼ 全画面オーバーレイの設定 ▼ */
        position: fixed; /* 画面に固定 */
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* 画面の高さ100% */
        background-color: rgba(255, 255, 255, 0.98); /* 背景色 (少し透過) */
        
        /* ▼ メニュー項目を縦並び中央揃えに ▼ */
        flex-direction: column; /* 縦並び */
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    /* スマホ用メニュー (li) */
    .g-nav-menu li {
        margin-left: 0; /* PC用のマージン解除 */
        width: 100%;
        height: auto;
    }
    
    /* スマホ用メニュー (a) */
    .g-nav-menu li a {
        font-size: 1.3em; /* 文字を少し大きく */
        line-height: 2.5; /* 行間を空ける */
        height: auto;
        padding: 10px 0;
    }

    /* --------------------------------
     ▼ JSで .is-active が付いた時の変化
    -------------------------------- */

    /* メニューを表示 (display: none → display: flex) */
    .g-nav-menu.is-active {
        display: flex;
    }

    /* アイコンを「×」印に変化させる */
    .g-nav-toggle.is-active span:nth-child(1) {
        top: 19px;
        transform: rotate(45deg);
    }
    .g-nav-toggle.is-active span:nth-child(2) {
        opacity: 0; /* 真ん中の線を消す */
    }
    .g-nav-toggle.is-active span:nth-child(3) {
        top: 19px;
        transform: rotate(-45deg);
    }
}










.fixed{
	position: fixed;
	top: 0;
	margin: 0 auto;
	/*width: 96%;*/
	-ms-filter: "alpha( opacity=95 )";
	filter: alpha(opacity=95);
	opacity:0.95;
}

.fixed:before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0px;/*線の上下位置*/
	display: inline-block;
	width: 10000px;/*線の長さ*/
	height: 1px;/*線の太さ*/
	transform: translateX(-50%);/*位置調整*/
	background-color: #ffffff;
	border-bottom: 1px solid #eeeeee;
	padding-bottom: 5px;
	z-index: 9998;
}


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

ul.g-nav-menu li:nth-child(1){
	border-left:0;
}

ul.g-nav-menu li:nth-child(3){
	border-right:0;
}
.fixed{
	width: 100%;
}

}

@media only screen and (max-width:600px){
.g-nav-menu li{
	height: 40px;
}
    
.g-nav-menu li a{
	font-size: 0.9em;
    height: 40px;
    line-height: 30px;
}

.g-nav-menu{
	width: 100%;
}


}



/*フッター
---------------------------------------------------------------------------*/
#footer {
	clear: both;
	background: #7e8036;
	color: #ffffff;
	width: 100%;
    padding: 0.5em 0;
    margin-top: 50px;
}

#footer h5 {
	font-size: 1.5em;
	color: #ffffff;
}


#footer a {
	color: #ffffff;
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
}

    .insta{
        padding-top: 0.5em;
    }
    
    .insta .fa-instagram{
        color: #eceff5;
        font-size: 2em;
    }

#footer img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}
    
   


@media only screen and (max-width:600px){
    #footer h5{
        line-height: 1.2em;
        font-size: 1.3em;
    }
    
    #footer a{
	text-decoration: underline;
    }
    
    #footer img{
        width: 100px;
        height: 100px;
    }
}


/*グローバルホテルグループ
---------------------------------------------------------------------------*/
#globalg {
    display: block;
}

#globalg dl{
	width: 96%;
	max-width: 1200px;
	margin: 0 auto;
}

#globalg h5 {
	font-size: 1.1em;
	line-height: 50px;
	color: #555555;
}


#globalg dt {
	float: left;
	clear: left;
	width: 20%;
	height: 50px;
}

#globalg li {
	float: left;
    display: inline;
	width: 20%;
	height: 50px;
    vertical-align: middle;
}

#globalg img {
	width: 80%;
	padding-top: 10px;
  transform: scale(1.1);
  cursor: pointer;
  filter: grayscale(100%);
  filter: contrast(0);
  transition-duration: 0.2s;
}
#globalg img:hover{
  filter: grayscale(0);
  transition-duration: 0.2s;
}

@media only screen and (max-width:960px){
#globalg h5 {
	line-height: 30px;
}

#globalg dt {
	float: none;
	text-align: center;
	width: 100%;
	height: 30px;
}


#globalg li {
	width: 25%;
}


#globalg img {
	width: 90%;
	height: auto;
	padding-top: 0;
}

}

@media only screen and (max-width:600px){
#globalg dl{
	margin: 0 auto;
}

#globalg h5 {
	font-size: 1.2em;
	line-height: 3em;
}

#globalg dt {
	height: 3em;
}

#globalg li {
	float: none;
	width: 100%;
}

#globalg img {
	width: 75%;
	max-width: 300px;
	height: auto;
	padding-top: 0;
    filter: grayscale(0%);
    padding-bottom: 2%;
}


}

/*コピーライト
---------------------------------------------------------------------------*/
.copy {
	background: #8F913D;
	color: #ffffff;
	font-size: 0.8em;
	padding: 0.2em;
	clear: left;
}


/*サイド
---------------------------------------------------------------------------*/

/*TOPへ戻るボタン*/
.page-top {
	display: inline-block;
	background-color: #496c91; /*以下、デザインはご自由に！！*/
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
	font-size: 20px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	opacity: 0.9;
	position: fixed;
	bottom: 20px;
	right: 0;
	z-index: 50;
}


.page-top:hover {
	opacity: 0.5;
	color: #fff;
}


@media only screen and (max-width:960px){
.page-top {
	font-size: 25px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	padding-top: 0;
}

.page-top:hover {
	opacity: 0.9;
	color: #fff;
}

}

/*TELボタン(SP)*/

.tel_btn {
	display: block; /*aタグをblock要素に変更*/
	background-color: #00664d; /*以下、デザインはご自由に！！*/
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
	font-size: 12px;
	width: 50px;
	height: 50px;
	line-height: 20px;
	border-radius: 0;
	padding-top: 30px;
	text-align: center;
	position: fixed;
	bottom: 80px;
	right: 0;
	opacity: 0.9;
	z-index: 50;
}

.tel_btn:before {
	font-family: "Font Awesome 5 Free";
	content: '\f095';
	position: absolute;
	top: 10px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 15px;
}

.tel_btn:hover {
	opacity: 0.9;
	color: #fff;
}

@media only screen and (min-width:601px){
.tel_btn {
	display: none;
}
}

/*contents内設定
---------------------------------------------------------------------------*/
@media only screen and (max-width:960px){
#contents {
	width: 96%;
	margin: 0 2%;
}
}

/*見出し*/


h2,h3,h4,h5{
	font-family: "M PLUS 1p" , "メイリオ", Meiryo;
    clear: both;
}

h2 {
  font-size: 30px;
  font-size: 3rem;
  position: relative;
  padding: 1.5rem;
  text-align: center;
  margin: 2em;
}

h2 span {
  font-size: 18px;
  font-size: 1.8rem;
  display: block;
}

h2:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #8F913D;
}

h3{
    font-size: 1.8em;
    text-align: center;
    padding: 0 2.5em 0.5em;
    color: #424d16;
}

h3.sanspro {
	font-family: 'Source Sans Pro', sans-serif;
}

h3.bizmincho {
    font-family: "BIZ UDPMincho", serif;
}




@media only screen and (max-width:960px){
h2 {
	font-size: 1.8em;
}
}

@media only screen and (max-width:600px){
h2 {
	font-size: 1.5em;
	line-height: 1.5em;
    margin-top: 55px;
    /*margin-bottom: 0.5em;*/
    padding: 0.2em;
}
}

#contents h4{
	clear: both;
	font-size: 1.3em;
	line-height: 1.6em;
	color: #333333;
	padding-left: 1em;
	margin-bottom: 0.5em;
}

#contents h4:before {
	content: '';
	position: absolute;
	display: inline-block;
	width: 4px;
	height: 1.6em;
	background: #8F913D;
	margin-left: -1em;
	border-radius: 3px;
}


/*ボックス*/

.b_box {
	border: 1px solid #efefef;
	display: block;
	padding: 0.8em;
	overflow: auto;
	margin-bottom: 1em;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
	background-color: #ffffff;
    border-radius: 12px;
}




/*Flexbox*/
ul.flexbox { 
	display: -webkit-box; /*Android4.3*/
	display: -moz-box;    /*Firefox21*/
	display: -ms-flexbox; /*IE10*/
	display: -webkit-flex; /*PC-Safari,iOS8.4*/
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	overflow: auto;
}


/*リンクリスト*/

.li_link li{
	width: 33.3%;
	height: 3em;
	line-height: 3em;
}

.li_link a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f138";
	position: absolute;
	color: #8F913D;
	font-weight: bold;
	font-size: 1.1em;
	margin-left: -1.5em;
}

.li_link a {
	padding-left: 1.5em;
	color: #333333;
	text-decoration: none;
}


.li_link a:hover {
	color: #a2a2a2;
}

@media screen and (max-width: 960px){
.li_link li{
	width: 50%;
	height: 3.3em;
	line-height: 3.3em;
	overflow: hidden;
}

.li_link a{
	display: block;
	width: 100%;
}
}

@media screen and (max-width: 600px){
.li_link li{
	width: 100%;
	border-bottom: 1px solid #cccccc;
}

li.border-top {
	border-top: 1px solid #cccccc;
}

.li_link a {
	padding-left: 2.5em;
}

.li_link a:before {
	margin-left: -1.5em;
}
}

/*Google mapボタン*/
a.map_btn {
	display: inline-block;
	width: 50%;
	margin: 0 25%;
	text-align: center;
	background-color: #eeeeee;
	color: #555555;
	font-size: 1.3em;
	margin-bottom: 2em;
	text-decoration: none;
	padding: 1em 0;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
	border-radius: 3px;
}


i.fa-google {
	padding-right: 0.1em;
}

i.fa-map-marker-alt {
	padding-right: 1.5em;
}

i.fa-external-link-alt {
	padding-left: 2em;
}

a.map_btn:hover {
	color:#db4437;
}

@media screen and (max-width: 960px){
a.map_btn {
	width: 50%;
	margin: 0 25%;
	margin-bottom: 2em;
}
}

@media screen and (max-width: 600px){
a.map_btn {
	width: 80%;
	margin: 0 10%;
	margin-bottom: 2em;
	background-color: #fbfbfb;
}
}



/*外観写真*/
.ex_img{
    width: 100%;
   /* margin: 0 10%;*/
}


/*コンセプト*/

.concept img{
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

.concept h3{
    margin-top: 1.5em;
}

.concept p{
    font-size: 1.3em;
    padding: 1em 2em;
}

@media screen and (max-width: 600px){
    .concept p{
        padding: 1em 1em;
    }
    
    
}


/*客室*/
.rooms p{
    margin: 1em;
    text-align: center;
    font-size: 1.2em;
}

.rooms li{
    width: 31.3%;
    margin: 1%;
}

.rooms img{
    width: 100%;
    padding-bottom: 1em;
}

.rooms h4{
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 0.8em;
}

.rooms_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  border-radius: 5px;
  width: 200px;
  height: 40px;
  font-weight: bold;
  transition: 0.3s;
  background-color: #8f913d;
  margin: 0 auto;
  margin-bottom: 10px;
}

.rooms_btn:hover {
  opacity: .7;
    color: #ffffff;
}



@media screen and (min-width: 601px){
    a.sp{
        display: none;
    }   
}

@media screen and (max-width: 600px){
    .rooms li{
        width: 100%;
        margin: 0;
        margin-top: 1em;
    }
    
    a.pc{
        display: none;
    }
}




/*モーダルウィンドウ内カルーセル*/

/* カルーセル全体のコンテナ */
.carousel-container {
    width: 100%; /* 画像の幅に合わせる */
    position: relative;
    /*border: 1px solid #ccc;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);*/
}

/* 画像を切り取る「窓」 */
.carousel-viewport {
    width: 100%;
    overflow: hidden;
    /* フェードインの場合、高さが必要になるので、画像のアスペクト比に合わせて設定するか、
       最初の画像のロード後にJSで設定すると良いですが、ここでは固定で例示 */
    aspect-ratio: 16 / 9; /* アスペクト比を16:9に固定します */
    position: relative; /* 子要素のabsoluteの基準点 */
}

/* 画像を重ねる「帯」 */
.carousel-slider {
    /* フェードインではdisplay: flex; は不要です。 */
    /* position: relative; */ /* 各アイテムのabsoluteの基準点とする場合 */
    width: 100%; /* 親の幅に合わせる */
    height: 100%; /* 親の高さに合わせる */
}

/* 各画像アイテム */
.carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 親(.carousel-viewport)の高さ100%に合わせる */
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.carousel-item.active {
    opacity: 1; /* activeクラスがついたら不透明に */
}

.carousel-item img {
    width: 100%;
    height: 100%; /* 親(.carousel-item)の高さ100%に合わせる */
    object-fit: cover; /* 16:9の領域に収まるように画像をトリミング */
    display: block;
}

/* 左右のボタン */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    z-index: 10;
    user-select: none;
    font-weight: bold;
    width: 40px; 
    height: 40px;
    border-radius: 50%; 
    padding: 0; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.carousel-btn.prev {
    left: 10px;
}

.carousel-btn.next {
    right: 10px;
}

.carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* インジケーター（ドット）のコンテナ */
.carousel-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px; /* ドット間の隙間 */
    z-index: 10;
}

/* 各ドットのスタイル */
.carousel-dot {
    width: 12px;
    height: 12px;
    background-color: #ccc; /* ○ (非アクティブ) */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* 現在表示中のドットのスタイル */
.carousel-dot.active {
    background-color: #333; /* ● (アクティブ) */
}


.modal_wrap h4{
    font-size: 1.2em;
    padding: 0.5em 0;
}


.modal_wrap dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-right: 2em;
  margin-bottom: 1em;
}

.modal_wrap dt {
    font-weight: bold;
    padding-right: 0.8em;
    color: #666666;
}


.room_fas h4,
.room_note h4{
    clear: both;
    text-align: center;
    font-size: 1.5em;
    padding: 1.5em;
    padding-top: 2em;
}


.room_fas li{
    float: left;
    background-color: #8f913d;
    padding: 5px 15px;
    border-radius: 1.1em;
    color: #ffffff;
    margin-right: 12px;
    margin-bottom: 8px;
}

.room_fas p{
    clear: both;
}

.room_note ul{
    margin-bottom: 3em;
}

.room_note li{
    line-height: 2em;
    margin-left: 1.2em;
}

.room_note li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f14a";
    font-weight: 900;
    margin-right: 0.2em;
    color: #8f913d;
    margin-left: -1.2em;
}

.room_note p{
    padding-bottom: 1em;
    font-weight: bold;
}


@media screen and (min-width: 601px){
    .room_info li{
        float: left;
    }
}

@media screen and (max-width: 600px){
    .modal_wrap h4{
        padding: 0.5em 0;
    }
    
    .room_info li{
        height: 1.8em;
    }
}


/*設備*/

.facilities ul{
    width: 80%;
    margin: 10px 10%;
    
}

.facilities li{
    background: #f7f8da;
    border-radius: 10px;
    width: 32%;
    margin-right: 1%;
    padding: 10px;
}


.facilities dl{
    text-align: center;
}
    
    
.facilities dd{
    color: #8f913d;
    font-size: 1.1em;
}

.facilities img{
    width: 70%;
}


@media screen and (min-width: 601px){
    .facilities li{
        float: left;
    }
}

@media screen and (max-width: 600px){
    .facilities li{
        width: 100%;
        margin-bottom: 10px;
        margin-right: 0;
    }
    
    .facilities img{
        width: 50%;
    }
}




/*アクセス*/
.access {
    margin-bottom: 2em;
}

.access_1{
    display: block;
}

.g_map {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.g_map iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.g_map{
    position: relative;
    margin-bottom: 1.5em;
}
.g_map:before {
    content:"";
    display: block;
    padding-top: 75%;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.access_2{
    display: block;
}

.access_2 p {
    line-height: 2em;
    text-align: center;
}

p.add{
    font-size: 1.2em;
}


.access_2 table{
    width: 88%;
    margin: 1.5em 6%;
}

.access_2 th{
    border-bottom: 1px solid #bbbbbb;
    font-size: 1.2em;
    height: 1.5em;
    text-align: center
}

.access_2 td{
    border-bottom: 1px solid #bbbbbb;
    height: 4em;
    padding: 0 2em;
}


td.td1{
    width: 18%;
}


@media screen and (max-width: 960px){
    
    .access_2 table{
        width: 100%;
        margin: 1.5em 0;
    }
    
    .access_2 td{
        padding: 0 1em;
    }
    
    td.td1{
    width: auto;
    }
}

@media screen and (max-width: 690px){
    .access_2 .sp{
        display: block;
    }
}

@media screen and (max-width: 600px){
    p.add{
        font-size: 1.1em;
    }
    
    .access_2 td{
        padding: 0 0.5em;        
    }
    
    td.td1{
        min-width: 6em;
    }
 
}


/*お知らせ
---------------------------------------------------------------------------*/
.notice h4{
    text-align: left;
    font-size: 1.2em;
    color: #333333;
}

.notice ol{
    margin-left: 1.5em;
    padding: 1em 0;
}

.notice_in{
    padding-bottom: 2em;
}

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

@media only screen and (min-width: 601px){
.notice {
    position: relative;
    margin: 3em 5%;
    padding: 2em;
    border: solid 3px #ff0000;
    border-radius: 8px;
    width: 90%;
}
    
.box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background-color: #ffffff;
    color: #ff0000;
    font-weight: bold;
}
    

    
.notice p {
    margin: 0; 
    padding: 0;
}

.notice img{
    float: left;
    height: 200px;
    padding-right: 1em;
    
}
}

    
@media only screen and (min-width: 961px){
    .notice {
        margin: 3em 10%;
        width: 80%
    }
    
}


@media only screen and (max-width: 600px){
.notice {
    width: 96%;
    margin: 1em 2%;
    background: #ffffff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.notice .box-title {
    font-size: 1.2em;
    background: #ff6933;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.notice p {
    padding: 0.5em;
    margin: 0;
}

    .notice h4{
        padding: 0.5em;
    }

    .notice ol{
        padding: 0.5em 0;
    }
    
    .notice img{
        width: 60%;
        margin: 1em 20%;
        
    }
}


.notice_ {
	display: none;
}




/* --- フェードイン用 --- */
.fade-in {
  opacity: 0;
  transform: translateY(20px) scale(0.995);
  transition-property: opacity, transform;
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(.2, .9, .25, 1);
  will-change: opacity, transform;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 遅延を使いたいとき（data-delayで指定） */
.fade-in[data-delay] {
  transition-delay: calc(var(--delay, 0ms));
}

/* アニメーションをオフにしたい人のための設定 */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}






/*FAQ*/
.cp_actab {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	/*color: #ffffff;*/
    width: 80%;
}
.cp_actab input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.cp_actab label {
	font-weight: bold;
	line-height: 2;
	position: relative;
	display: block;
	padding: 0 0 0 1em;
	cursor: pointer;
	margin: 0 0 1px 0;
	border-bottom: 2px solid #8f913d;
    /*margin-bottom: 0.3em;*/
}

.cp_actab label:before {
	font-family:'Palanquin Dark', sans-serif;
	content: 'Q.';
	font-size: 1.4em;
	margin-right: 0.3em;
	
}


.cp_actab .cp_actab-content {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.35s;
	transition: max-height 0.35s;
}
.cp_actab .cp_actab-content p {
	margin: 1em;
    margin-left: 4em;
	padding-right: 3em;
    line-height: 1.7em;
}

.cp_actab-content :before {
	font-family:'Palanquin Dark', sans-serif;
	content: 'A.';
	font-size: 1.4em;
	margin-right: 0.33em;
	margin-left: -1.2em;
	
}

.cp_actab-content a:before{
    content: none;
}

/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
	max-height: 20em;
}
/* Icon */
.cp_actab label::after {
	line-height: 3;
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 3em;
	height: 3em;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
	text-align: center;
}
.cp_actab input[type=checkbox] + label::after {
	content: '+';
}
.cp_actab input[type=checkbox]:checked + label::after {
	transform: rotate(315deg);
}

@media only screen and (max-width: 600px){
    .cp_actab {
        width: 96%;
    }
    
    .cp_actab label{
        line-height: 1.5;
        padding-right: 2em;
        padding-bottom: 10px;
    }
    
}