@charset "utf-8";



/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');

/*Bootstrap Iconsの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css");

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("animation.css");
@import url("inview.css");







 /*=== 画像の表示エリア ================================= */
.slide {
	
	width: 100%;
	height: 115%;        /* 115%が理想 */
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: -1;
	text-indent: -9999px;
	
}










 /*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 63s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 7s }
.slide img:nth-of-type(3) { animation-delay: 14s }
.slide img:nth-of-type(4) { animation-delay: 21s }
.slide img:nth-of-type(5) { animation-delay: 28s }
.slide img:nth-of-type(6) { animation-delay: 35s }
.slide img:nth-of-type(7) { animation-delay: 42s }
.slide img:nth-of-type(8) { animation-delay: 49s }
.slide img:nth-of-type(9) { animation-delay: 56s }
.slide img:nth-of-type(10) { animation-delay: 63s }

 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0 }
   5% { opacity: 1 }
  10% { opacity: 1 }
  15% { opacity: 0 }
 100% { opacity: 0 }
}









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

	.slide {
	height: 100vh;
	width : 330%;        /* 280%が理想--オープンまで330％ */
    position:absolute;
    right: -350px;       /* -250pxが理想--オープンまで-350px */
	top: 0px;
}

}

	/*ここまで----画面幅767.98px以下の追加指定*/












 /*=== スライドのすきま設定 ========================= */

.test-slick__item {
    margin-right: 1px;
    margin-left: 1px;
    hight:60%;
}







.flexbox {
  display: flex;
  flex-direction: row;
  text-align: center;

}

.flex-item {
  background: black;
  border: 1px solid #000;
  width: 400px;

  margin: 30px 10px;
}




/*PC表示*/
.flexbox {
  display: flex;
  flex-direction: row;/**/
}

/*モバイル表示*/
@media screen and (max-width: 480px){
  .flexbox{
    flex-direction: column; /*flexアイテムを縦並びに変更*/
    
    
    
  }
}


















.flexbox2 {
  display: flex;
  flex-direction: row;
  text-align: center;

}

.flex-item2 {
  background: black;
  border: 1px solid #000;
  width: 350px;

  margin: 10px 10px;
}




/*PC表示*/
.flexbox2 {
  display: flex;
  flex-direction: row;/**/
}

/*モバイル表示*/
@media screen and (max-width: 480px){
  .flexbox2{
    flex-direction: column; /*flexアイテムを縦並びに変更*/
    
    
    
  }
}






























.facility{
list-style-position: inside;
padding-left: 5px;　/* 追記 */
}

.facility li{
border-bottom: 1px dashed #666;
}











/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	margin: 0;padding: 0;
	font-size: 16px;	/*基準となるフォントサイズ。--13px*/
	overflow-x: hidden;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		html, body {
			font-size: 16px;	/*基準となるフォントサイズ。*/
			
		}
		


	}
	/*画面幅900px以上の追加指定ここまで*/

body {
	font-family: "Noto Serif JP", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	background: #000;	/*背景色*/
	color: #f0f0f0;		/*文字色*/
	line-height: 2;		/*行間*/
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*ul,olタグ*/
ul, ol {margin-bottom: 30px;}

/*他*/
section + section {
	margin-top: 100px;
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #f0f0f0;	/*文字色*/
	transition: 0.3s;
}

a:hover {
	opacity: 0.8;	/*マウスオン時に80%の透明度にする*/
}








/*重要枠のデザイン　2024-10-12追加
---------------------------------------------------------------------------*/

.boxy {
    position: relative;
    padding: 0.1rem 1rem 0.5rem; /*(3rem 1rem 1rem) */
    border-boxy: boxy-sizing;
    background-color: #efefef;
    width: 97%;
    margin-left: 2%;
}

.boxy::before {
    position: absolute;
    top: 0; /*(0.5rem) */
    left: 2%;

    padding: 0; /*(0.5rem) */
    border-radius: 5px; /*(10px) */
    background-color: #EEE; /* 次-#f08300 デフォルトカラー#5fc8bc */
    color: white;
    content: attr(data-title);
    padding-left: 10px; /*追加 */
    padding-right: 10px; /*追加 */
}


.boxy p {
    color: #333;
    line-height: 1.4;/*(1.5) */
    text-align:  left;
}






:root {
  --flowchart-border: 4px;/* 縦線太さ 変更可 */
  --flowchart-dot-size: 14px;/* ドット大きさ 変更可 */
  --flowchart-dot-color: rgb(255,108,114);/* ドットの色 変更可 */
}
.flowchart {
  list-style: none !important;
  counter-reset: flownum;/* リストアイテムの名称(任意) */
  margin: 2em 0;/* フローチャートと前後要素との距離(任意) */
  padding: 0 !important;
  text-align:  left;
}
.flowchart li {
  position: relative;
  padding: 0 0 0 calc(var(--flowchart-dot-size) + 20px);
}
.flowchart-content {
  position: relative;
  padding: 0 0 0;   /* デフォルト0 0 1em */
}

/* 縦線デザイン */
.flowchart-content::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: calc(calc(calc(var(--flowchart-dot-size) / 2) + calc(var(--flowchart-border) / 2) + 20px) * -1);
  width: 4px;
  height: 100%;
  background: rgb(200,200,200);
}

/* 最終工程の縦線が必要な方ここから削除 */
.flowchart li:last-of-type .flowchart-content::before {
  content: none;
}
/* 最終工程の縦線が必要な方ここまで削除 */

/* 番号部位デザイン */
.flowchart li::before {
  content: "STEP " counter(flownum);
  counter-increment: flownum;
  color: white;/* 番号文字色 */
  color: rgb(150,150,150);/* STEP文字色 */
  font-weight: 700;
  font-size: 13px;/* STEPフォントサイズ */
  line-height: 1.3;
}

/* ドットデザイン */
.flowchart li::after {
  content: "";
  display: block;
  position: absolute;
  top: 8px;/* 通常は 0, STEPの文字とのバランスを見て調整 */
  left: 0;
  width: var(--flowchart-dot-size);
  height: var(--flowchart-dot-size);
  border-radius: 50%;
  border: 2px solid var(--flowchart-dot-color);/* 円の色 */
}
.flowchart li:nth-of-type(odd)::after {
  background: var(--flowchart-dot-color);
}

/* 工程タイトル */
.flowchart-title {
  margin: 0 0 .6em;
  font-weight: bold;
  font-size: 1.04em;
  line-height: 1.2;/* 大きめの文字は 1.2 〜 1.4 程度で調整すると良い */
  color: black;/* 文字色 */
}

/* p要素を利用した場合の調整 */
.flowchart li p {
  margin: 0.5em 0 !important; /* デフォルト margin: 1em 0 */
  font-size: 1em;
}

.flowchart li a {
  color: blue;
}



.flowchart li p:last-of-type {
  margin-bottom: 0 !important;
}

















/*container
---------------------------------------------------------------------------*/
#container {
	margin: 0 auto;
	max-width: 1800px;	/*サイトの最大幅*/
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	display: flex;			/*flexボックスを使う指定*/
	align-items: center;	/*垂直揃えの指定。天地中央に配置されるように。*/
	/*padding: 3%;*/			/*ヘッダー内の余白*/
}

/*トップページのヘッダーブロックへの追加指定*/
.home header {
	justify-content: space-around;	/*並びかたの種類の指定*/
	padding: 10% 0;					/*ヘッダー内の余白。上下、左右への指定。*/
	position: relative;				/*スライドショーを配置する為に必要な指定。スライドショー自体の設定はslide.cssになります。*/
	margin-bottom: 100px;			/*ヘッダーの下に空けるスペース-100px*/
}

/*ロゴ*/
#logo img {display: block;}
#logo {
	margin: 20px;
	width: 200px;	/*画像の幅*/
}



	/*画面幅767.98px以下の追加指定*/
	@media screen and (max-width:767.98px) {

#logo {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	right: 6%;	/*画面の左からの配置指定*/
	top: 120px;	/*画面の上からの配置指定*/
	font-size: 0.8rem;	/*bodyで指定している文字サイズの80%にする*/

}

}

	/*ここまで-------------画面幅767.98px以下の追加指定*/









/*ロゴ2*/
#logo2 img {display: block;}
#logo2 {

	margin-top: 50px;
	margin-left: 50px;
	width: 200px;	/*画像の幅*/
}



	/*ここまで-------------画面幅767.98px以下の追加指定*/




















































/*トップページのロゴへの追加指定*/
.home #logo {
	width: auto;	/*上で指定した幅を一旦自動に*/
	height: 300px;	/*高さで改めて指定します*/
	order: 1;		/*表示させる順番。数字が小さい順番に並びます。マイナスでの指定もOK。*/
}
.home #logo img {height: 100%;}


/*トップページのヘッダー内メニュー
---------------------------------------------------------------------------*/
/*メニューブロックの設定*/
header ul {margin: 0; padding: 0;}
header nav {
	letter-spacing: 0.2em;			/*文字間隔を少しだけ広くとる*/
	text-shadow: 1px 1px 2px #000;	/*テキストの影。右へ、下へ、ぼかし幅、色の順番*/
	margin-top: -200px;
}






	/*画面幅767.98px以下の追加指定--オリジナルは700px→変更2023-8-27*/
	@media screen and (max-width:767.98px) {

		header nav {
			display: none;	/*非表示にする*/
		}

	}
	/*画面幅700px以下の追加指定ここまで*/
	
	
	
	
	
	

/*メニュー１個あたりの設定*/
header nav a {
	text-decoration: none; display: inline-block;
	padding: 1em 0.5em;				/*上下、左右への余白--1em 0.5em*/
	border: 1px solid transparent;	/*枠線を透明(transparent)でセットしておく*/
}

/*マウスオン時*/
header nav a:hover {
	opacity: 1;						/*冒頭のaタグで、hover時にopacityが0.8でセットされているのを一旦リセット。hoverで薄くならないようにする。*/
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒の事で0.8は色が80%出た状態。*/
	border: 1px solid #fff;			/*枠線の幅、線種、色。上で透明だった線をここで表示させます。*/
}

/*日本語ページ（縦書きにする指定です）*/
body.ja header nav {
	writing-mode: vertical-rl;
	text-orientation: upright;
}

/*英語ページ*/
body.en header nav {
	font-size: 1rem;	/*bodyで指定している文字サイズの90%にする-- 0.9rem*/
	text-align: center;	/*テキストをセンタリング。左寄せがいいならこの１行を削除。*/
}
body.en header nav a {
	padding: 0.5em 1em;	/*上下、左右へのボタン内の余白の上書き*/
}





/*「English」というメニューパーツ
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
.lang-menu {
	margin: 0; padding: 0; list-style: none;
	font-family: Arial, Helvetica, sans-serif;	/*明朝体だと見づらいのでゴシック体にする*/
	position: absolute;
	left: 3%;	/*画面の左からの配置指定*/
	top: 3%;	/*画面の上からの配置指定*/
	font-size: 1.0rem;	/*bodyで指定している文字サイズの80%にする--0.8rem*/
	background-color: #b7282e ;
}

/*メニュー１個あたり（テンプレートではEnglishの１つしかセットしていませんが、言語メニューを複数セットできます）*/
.lang-menu li {
	display: inline-block;
}
.lang-menu a {
	text-decoration: none;display: inline-block;
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	padding: 0 1em;			/*上下、左右へのメニュー内の余白*/
}










/* メイン画像　スライドショー　コメント
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
.come-menu {
	margin: 0; 
	padding: 0;
	position: absolute;
	width:95%;
	hight:100%;
　　left: 20%;	/*画面の左からの配置指定*/
	top: 50%;	/*画面の上からの配置指定-40%*/

}



	/*画面幅980px以下の追加指定*/
	@media screen and (max-width:980px) {
	.come-menu {
	left: 10%;	/*画面の左からの配置指定*/
	top: 40%;	/*画面の上からの配置指定*/

}

}





	/*画面幅767.98px以下の追加指定*/
	@media screen and (max-width:767.98px) {
	.come-menu {
	left: 8%;	/*画面の左からの配置指定*/
	top: 60%;	/*画面の上からの配置指定*/
   padding-left: 8px;
}

}



.text {
  display:block;
/*text-align: center;*/
  font-size: 1.4em;
  font-family:serif;
  font-weight: 400;
  line-height: 1.3em; /* 行の高さを実数値＋単位(em)で指定する */
  text-shadow: 2px  2px 5px #383c3c,
            -2px  2px 5px #383c3c,
             2px -2px 5px #383c3c,
            -2px -2px 5px #383c3c;
 margin-left: 20%;
 margin-bottom: 200px;	/* 説明文の高さ・位置を指定--200px */
}





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


.text {
 margin-top: 0;
 margin-left: 0;
}

}
















/*横スクロール季節の散策マップ‐写真表示
---------------------------------------------------------------------------*/
.scroll_content { /* リスト全体のスタイル */
  display: flex;
  max-width: 1200px;
  margin: auto;
  overflow-x: auto;
}
 
.scroll_content li { /* 各リストのスタイル */
  width: 90%;
  padding: 8px;
  margin: 3px;
  flex-shrink: 0;
  list-style: none;
}
 
.scroll_content img { /* 画像のスタイル */
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}
 
 
.scroll_content img.default { width: auto }

 
 
 
 
.scroll_content::-webkit-scrollbar {
  height: 12px; /* スクロールバーの高さ */
}
 
.scroll_content::-webkit-scrollbar-thumb {
  background: #aaa; /* ツマミの色 */
  border-radius: 6px; /* ツマミ両端の丸み */
}
 
.scroll_content::-webkit-scrollbar-track {
  background: #ddd; /* トラックの色 */
  border-radius: 6px; /* トラック両端の丸み */
}
 
 
@media screen and (min-width: 450px) {
 
  .scroll_content li {
    width: 65%;   /*デフォルト45% */
  }
 
}


























details {
  border: 1px solid #555;
  margin-bottom: 10px;
}
summary {
  padding: 1em;
  background: #f08300;
  font-weight: bold;
  cursor: pointer;
  list-style: none;
  position: relative;
}

/* Safari対応　デフォルトの三角形アイコン非表示 */
details summary::-webkit-details-marker {
  display: none;
}

div {
  padding: 1em;
}

.icon {
  display: block;
  position: absolute;
  right: 20px;
  top: 50%;
  width: 24px;
  margin-left: 6px;
  flex-shrink: 0;
  transform-origin: center 43%;
  transition: transform 0.5s;
}
/* アイコンの三角矢印 */
.icon::before,
.icon::after {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 3px;
  background-color: #FFF;
}

.icon::before {
  left: 0;
  transform: rotate(45deg);
}

.icon::after {
  right: 0;
  transform: rotate(-45deg);
}

/* アコーディオン表示の際に回転する */
details[open] .icon {
  transform: rotate(180deg);
}




















































/*各部屋ごとのモーダルウインドウ‐写真表示
---------------------------------------------------------------------------*/

/*--------------------------------------
  モーダル表示上から_002
--------------------------------------*/
.modal_wrap input {
  display: none;
}

.modal_overlay {
  display: flex;
  justify-content: center;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.5s, transform 0s 0.5s;
  transform: scale(0);
}

.modal_trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}

.modal_content {
    align-self: center;
    width: 85%;/*デフォルト-60%*/
    padding: 20px 20px 15px;/*デフォルト-30px 30px 15px*/
    box-sizing: border-box;
    background: #696969;
    line-height: 1.4em;
    transition: 0.5s;
}

.modal_content p {
  padding-top: 0;
}

.close_button {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 20px;/*デフォルト-30px*/
  cursor: pointer;
}

.modal_wrap input:checked ~ .modal_overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}

.modal_wrap input:checked ~ .modal_overlay .modal_content {
  transform: translateY(20px);
}

.open_button {
   color: #FFFFFF;
    background-color: #008080;
    font-size: 0.8em;
    /*font-weight: bold;*/
    text-align: center;
    cursor :pointer;
    transition: all 0.3s;
    display: block;
    margin-top: 15px;/*デフォルト-40px*/
    margin-bottom: 15px;
    padding: 5px 2px;/*デフォルト-12px 2px*/
    max-width:300px;
    text-decoration: none;
}

.open-button:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*下に動く*/

}

/*アイコンを表示*/
.open-button:after {
font-family: "Font Awesome 5 Free";
  content: "\f2d0";
    padding-left: 7px;
}

/*ラベルホバー時*/
.open-button:hover {
  color: #FFFFFF;
  background-color: #4f96f6;
  transition: .6s;
}

.modal_title2 {
  font-size: 1.5em;
	position: relative;
	overflow: hidden;
  padding-bottom: 10px;
  margin-top:0;
  margin-bottom: 0;
  	width: 30%;
}

.modal_title2::before,
.modal_title2::after{
	content: "";
	position: absolute;
	bottom: 0;
}

/* h2 プライマリカラー*/
.modal_title2:before{
	border-bottom: 4px solid #000;
	width: 100%;
}
/* h2 セカンダリカラー*/
.modal_title2:after{
	border-bottom: 4px solid #000;
	width: 100%;
}















































/*mainブロック
---------------------------------------------------------------------------*/
main {
	margin: 20px;	/*20pxブロックの外にとるスペース*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:770px) {

		main {
			margin: 250px 100px 100px;	/*●-300px 100px 100pxブロックの外にとるスペース- 0 100px 100px*/
		}

	}
	/*画面幅900px以上の追加指定ここまで*/
	
	
	
	
	
	
	/*画面幅767.98px以下の追加指定*/
	@media screen and (max-width:767.98px) {

		main {
			margin: 100vh 5px 5px;	/*●50vh 2px 2pxブロックの外にとるスペース- 0 100px 100px*/
		}

}
	
	
	
	
	





/*main2ブロック
---------------------------------------------------------------------------*/
main2 {
	margin: 20px;	/*ブロックの外にとるスペース*/

}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		main2 {
			margin: 0 100px 100px;	/*●ブロックの外にとるスペース- 0 100px 100px*/
		}

	}
	/*画面幅900px以上の追加指定ここまで*/
	
	
	
	/*画面幅900px以上の追加指定*/
	@media screen and (max-width:900px) {

		main2 {
			margin: 0 100px 100px;	/*●ブロックの外にとるスペース- 0 100px 100px*/
		}

	}
	/*画面幅900px以上の追加指定ここまで*/






/*h2タグ*/
main2 h2 {
	margin: 0;
	font-weight: normal;	/*太さを標準に*/
	font-size: 1.6rem;		/*bodyで指定している文字サイズの2倍にする--2rem*/
	letter-spacing: 0.3em;	/*文字間隔を広くとる*/
	text-indent: 0.3em;		/*上の行のletter-spacingと同じ値をセットする*/
	text-align: center;		/*テキストをセンタリング*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

/*h2タグ内のspanタグ。小文字部分。*/
main2 h2 span {
	display: block;
	font-size: 0.4em;	/*文字サイズを親のh2の40%にする*/
}

/*h3タグ*/
main2 h3 {
	margin: 0;
	font-weight: normal;	/*太さを標準に*/
	font-size: 1.3rem;		/*bodyで指定している文字サイズの2倍にする--2rem*/
	text-align: center;		/*テキストをセンタリング*/
	margin-bottom: 0.8rem;	/*下に空けるスペース*/
}

main2 h4 {
	margin: 0;
	font-weight: normal;	/*太さを標準に*/
	font-size: 1rem;		/*bodyで指定している文字サイズの2倍にする--2rem*/
	text-align: center;		/*テキストをセンタリング*/
	margin-bottom: 0.8rem;	/*下に空けるスペース*/
}


main2 h5 {
	margin: 0;
	font-weight: normal;	/*太さを標準に*/
	font-size: 0.8rem;		/*bodyで指定している文字サイズの2倍にする--2rem*/
	text-align: center;		/*テキストをセンタリング*/
	margin-bottom: 0.8rem;	/*下に空けるスペース*/
}















/*==================================================
スライダーのためのcss
===================================*/
/*画像の横幅を100%にしてレスポンシブ化*/
.gallery img{
  width: 100%;
  height: auto;
  vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/
.gallery{
  margin: 0 0 10px 0;
  position: relative;
}

/* Slickのリストコンテナ */
.gallery .slick-list {
  overflow: hidden !important; /* visible → hidden */

}

/*矢印の設定 - 改善版*/
.slick-prev, 
.slick-next {
  position: absolute;
  z-index: 100;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  outline: none;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border: none;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.slick-prev:hover,
.slick-next:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* 矢印の形状を疑似要素で作成 */
.slick-prev::before,
.slick-next::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-top: 3px solid #333;
  border-right: 3px solid #333;
}

.slick-prev {
  left: 7px;
}

.slick-prev::before {
  transform: rotate(-135deg);
  margin-left: 3px;
}

.slick-next {
  right: 1px;
}

.slick-next::before {
  transform: rotate(45deg);
  margin-right: 3px;
}

/* スマートフォン用の矢印調整 */
@media screen and (max-width: 768px) {
  .slick-prev, 
  .slick-next {
    width: 45px !important;
    height: 45px !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
    z-index: 100 !important;
  }
  
  .slick-prev {
    left: 7px !important;
  }
  
  .slick-next {
    right: 1px !important;
  }
  
  .slick-prev::before,
  .slick-next::before {
    width: 9px;
    height: 9px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
  }
}

/*選択するサムネイル画像の設定 - 3列4行に変更*/
.choice-btn {
  display: flex;
  flex-wrap: wrap;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.choice-btn li{
  cursor: pointer;
  outline: none;
  background: #333;
  width: 25% !important;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: block !important;
}

.choice-btn li img{
  opacity: 0.4;
  width: 100%;
  height: auto;
  display: block;
}

.choice-btn li.slick-current img{
  opacity: 1;
}

.choice-btn .slick-track {
  display: flex !important;
  flex-wrap: wrap !important;
  transform: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.choice-btn .slick-list {
  overflow: visible !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.choice-btn .slick-slide {
  float: none !important;
  width: 25% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*========= レイアウトのためのCSS ===============*/
/*エリア全体を中央寄せ*/
.wrapper{
  width: 98%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

/* スマートフォン用 - 左右の余白を最小限に */
@media screen and (max-width: 768px) {
  .wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* h2タイトルのみ左右に少し余白 */
  .wrapper h2 {
    padding: 0 2%;
    margin: 0 0 10px 0;
  }
  
  /* ギャラリーエリア */
  .gallery {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
  }
  
  /* サムネイルエリア */
  .choice-btn {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* さらに小さい画面用 */
@media screen and (max-width: 480px) {
  .wrapper {
    width: 100% !important;
  }
}

ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

















/* ギャラリー全体の余白をリセット */
.gallery {
  margin: 0 0 10px 0;
  position: relative;
  padding: 0 !important; /* 左右の余白を完全に削除 */
}

/* Slickのコンテナの余白も削除 */
.gallery .slick-list {
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gallery .slick-track {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  left: 0 !important; /* 左の位置を0に固定 */
}

.gallery .slick-slide {
  margin: 0 !important;
  padding: 0 !important;
}

/* スマートフォン用の追加設定 */
@media screen and (max-width: 768px) {
  .gallery {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
  }
  
  .gallery .slick-list {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .gallery .slick-track {
    margin-left: 0 !important;
    padding-left: 0 !important;
    left: 0 !important;
    transform: translate3d(0, 0, 0) !important; /* 位置をリセット */
  }
  
  .gallery .slick-slide {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .gallery img {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
  }
  
  
  
  
  .gallery .slick-slide > div {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
  
  
  
  
}










































.tbl-r02 table{
  border-collapse: collapse;
}




.tbl-r02 tr {
  border-bottom: dashed 1px #FFFFFF;
}



.tbl-r02 th {
  color: #fff;
  font-weight: bold;
  text-align: left;
  padding: 10px;
}





.tbl-r02 td {
  text-align: left;
  padding: 15px;
}
 
@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl-r02 {
    width: 80%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
 }













.tbl-r03 table{
  border-collapse: collapse;
  width: 85%;

}




.tbl-r03 tr {
  border-bottom: dashed 1px #FFFFFF;
}



.tbl-r03 th {
  color: #fff;
  font-weight: bold;
  text-align: left;
  padding: 10px;
}





.tbl-r03 td {
  text-align: left;
  padding: 15px;
}
 
@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 80%;
  }
  .tbl-r03 {
    width: 50%;
  margin-right: 100px;
  padding-right: 100px;
  }
  .tbl-r03 th,
  .tbl-r03 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
 }


































.tbl-r04 table{
  border-collapse: collapse;
  width: 800px;
}




.tbl-r04 tr {
  border-bottom: dashed 1px #FFFFFF;
}



.tbl-r04 th {
  color: #fff;
  font-weight: bold;
  text-align: left;
  padding: 10px;
}





.tbl-r04 td {
  text-align: left;
  padding: 15px;
}
 
@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl-r04 {
    width: 95%;
  }
  .tbl-r04 th,
  .tbl-r04 td {
　　border-bottom: none;
    display: block;

  }
 }






















/*========= 4列-スマホ2列レスポンシブのためのCSS ===============*/



/*listボックスを囲むボックス*/
.list-container {
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	/*justify-content: space-between;	（削除またはコメントアウトする。2022/09/22更新）*/
	padding: 0 5px;		/*上下、左右へのボックス内の余白*/
}

/*１個あたりのボックス*/
.room4 {
	width: 23%;				/*ボックスの幅-49%*/
	margin-bottom: 15px;	/*ボックス同士の上下間の余白*/
	margin-right: 10px;		/*2%（2022/09/22更新）*/
	padding: 2px;			/*ボックス内の余白-10px*/
	position: relative;
	overflow: hidden;
	transition: 0.3s;		/*アニメーションにかける時間。0.3秒。*/
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.2は色が20%ついた状態。*/
	background: #000;	/*背景色*/
	line-height:2.5;
	 border: 1px solid #FFF;
}

/*偶数のボックスの右側マージンをなくす（2022/09/22更新）*/
/*.room4:nth-of-type(even) {*/
/*	margin-right: 0;*/
/*}*/

/*マウスオン時にボックスの影を少し濃くする*/
.room4:hover {
	box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}

/*リンクテキスト*/
.room4 a {
	text-decoration: none;
	color: #333;	/*文字色*/
}

/*ボックス内のh4タグ*/
.room4 h4 {
	line-height: 1.5;	/*行間を少し狭くする*/
	color: #000;		/*文字色#6ebcee*/
	margin: 5px 0;		/*上下、左右に空けるスペース*/
}

/*ボックス内のpタグ。指定した行数までを表示。*/
.room4 p {
	background: #000;	/*背景色*/
	margin: 0!important;	/*「main p」のマージンをリセットする*/
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 8;	/*デフォルト3 表示させたい行数。変更する際は、下の「IE対策」の「height」も変更して下さい。*/
	font-size: 0.9rem;		/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
    line-height: 1.5em;		/*IE対策。行間。１行あたりの高さの事。1.5em-1.5文字分。*/
    max-height: 12em;		/*IE対策。最大の高さ。1.5emの3倍の4.5emになっているので、3行分という事。*/
    color: #FFF;		/*文字色#6ebcee*/
}





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


/*１個あたりのボックス*/
.room4 {
	width: 47%;				/*ボックスの幅-49%*/
	margin-bottom: 15px;	/*ボックス同士の上下間の余白*/
	margin-right: 5px;		/*2%（2022/09/22更新）*/
	padding: 2px;			/*ボックス内の余白-10px*/
	position: relative;
	overflow: hidden;
	transition: 0.3s;		/*アニメーションにかける時間。0.3秒。*/
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.2は色が20%ついた状態。*/
	background: #000;	/*背景色*/
	border: 1px solid #FFF;
	line-height:2.5;
}


}































	/*区切り線に文字を追加したもの*/

hr {
	  border-width: 0 0 3px;
	  border-style: solid;
	  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="hsla(0, 0%, 65%, 1.0)" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;
	   width: 90%;
}























	
	
	
	

/*h2タグ*/
main h2 {
	margin: 0;
	font-weight: normal;	/*太さを標準に*/
	font-size: 1.6rem;		/*bodyで指定している文字サイズの2倍にする--2rem*/
	letter-spacing: 0.3em;	/*文字間隔を広くとる*/
	text-indent: 0.3em;		/*上の行のletter-spacingと同じ値をセットする*/
	text-align: center;		/*テキストをセンタリング*/
	margin-bottom: 3rem;	/*下に空けるスペース*/
}

/*h2タグ内のspanタグ。小文字部分。*/
main h2 span {
	display: block;
	font-size: 0.4em;	/*文字サイズを親のh2の40%にする*/
}

/*h3タグ*/
main h3 {
	font-size: 1.6rem;	/*文字サイズ*/
}

/*微調整*/
p + h3,p + h2 {margin-top: 2rem;}


/*「アクセス」ページの見出し
---------------------------------------------------------------------------*/
#greeting {
	background: url(../images/3.jpg) no-repeat center center / cover;	/*背景画像の読み込み*/
	padding: 1rem;				/*ボックス内の余白。１文字分。*/
	margin-left: -100px;		/*mainのmarginの数字にマイナスをつけます。*/
	width: calc(100% + 200px);	/*mainのmarginの２倍をここの200pxでセットしています。上の行で左に-100pxずれた画像を幅一杯にする為の設定です。*/
}




/*「お部屋の紹介」ページの見出し
---------------------------------------------------------------------------*/
#greeting {
	background: url(../images/2.jpg) no-repeat center center / cover;	/*背景画像の読み込み*/
	padding: 1rem;				/*ボックス内の余白。１文字分。*/
	margin-left: -100px;		/*mainのmarginの数字にマイナスをつけます。*/
	width: calc(100% + 200px);	/*mainのmarginの２倍をここの200pxでセットしています。上の行で左に-100pxずれた画像を幅一杯にする為の設定です。*/
}


























/*縦書き用の設定
---------------------------------------------------------------------------*/
/*ボックス全体*/
.title-bg {
	display: flex;				/*flexボックスを使う指定*/
	justify-content: center;	/*並びかたの種類の指定*/
}

/*ボックス内のh2*/
.title-bg h2 {
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*縦並びにする指定*/
	align-items: center;	/*垂直揃えの指定。天地中央に配置されるように。*/
}

/*縦書きにする指定*/
.title-bg h2 .tate {
	writing-mode: vertical-rl;
	text-orientation: upright;
}

/*横書きで使う際の指定。※縦書きを横書きにする為の指定ではないのでご注意下さい。*/
.title-bg h2 .yoko1 {
	font-size: 1.2em;	/*文字サイズ*/
}



/*横書きで使う際の指定。※縦書きを横書きにする為の指定ではないのでご注意下さい。*/
.title-bg h2 .yoko {
	margin-top: 1rem;	/*上に空けるスペース*/
	font-size: 0.4em;	/*文字サイズ。親要素の40%。*/
}


/*menubarブロック初期設定
---------------------------------------------------------------------------*/
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar {display: none;}
#menubar.db {display: block;}
#menubar.dn {display: none;}


/*メニューブロック設定
---------------------------------------------------------------------------*/
/*ブロック内のh2見出し*/
#menubar h2 {
	margin: 0 0 20px;	/*上、左右、下への見出しの外側にとる余白*/
	font-size: 1rem;	/*bodyで指定している文字サイズの2倍にする*/
	background: rgba(255,255,255,0.3);	/*背景色。255,255,255は白の事で0.3は色が30%出た状態。*/
}

/*メニューブロック*/
#menubar {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 100px 20px 20px;			/*ブロック内の余白。上、左右、下。--100px 20px 20px*/
	background: rgba(0,0,0,0.9);		/*背景色。0,0,0は黒の事で0.9は色が90%出た状態。*/
	text-align: center;					/*中身をセンタリング*/
	animation: animation1 0.2s both;	/*animation.cssのanimation1を実行する。0.2sは0.2秒の事。*/
	border-right: 1px solid rgba(255,255,255,0.3);	/*ボックスの右側の線幅、線種、色。255,255,255は白の事で0.3は色が30%出た状態。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		#menubar {
			width: 70%;	/*メニューブロックの幅をウィンドウの70%にする*/
		}

	}
	/*画面幅900px以上の追加指定ここまで*/

/*メニュー１個あたりの設定*/
#menubar a {
	display: block;text-decoration: none;
	text-align: center;	/*文字をセンタリング*/
	padding: 10px;		/*メニュー内の余白*/
}
#menubar .submenu li {
	border-bottom: 1px solid rgba(255,255,255,0.3);	/*メニューの下の線幅、線種、色。255,255,255は白の事で0.3は色が30%出た状態。*/
}
#menubar .submenu li:first-child {
	border-top: 1px solid rgba(255,255,255,0.3);	/*１つ目のメニューの上の線幅、線種、色*/
}


/*インスタなどのアイコンブロック
---------------------------------------------------------------------------*/
.icons li {
	display: inline-block;	/*横並びにする指定*/
	margin: 10px;			/*アイコンの外側に空けるスペース*/
	font-size: 20px;		/*文字サイズですが、これでアイコンサイズを変更できます。*/
}







/*ハンバーメニュー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*開閉用のスタイル*/
#menubar_hdr.db {display: flex;}
#menubar_hdr.dn {display: none;}

/*３本バーを囲むブロック*/
#menubar_hdr {


	position: fixed;z-index: 101;
	cursor: pointer;
	right: 7%;		/*右からの配置場所指定35px;*/
	top: 50px;			/*上からの配置場所指定*/
	width: 60px;		/*幅（３本バーが出ている場合の幅になります）*/
	height: 60px;		/*高さ*/
	display: flex;					/*flexボックスを使う指定*/
	padding: 10px;		/*クリック領域を少し増やす為に指定しました。*/
	transition: 0.3s;	/*hover時にopacityの影響を受けるまでの時間。0.3秒。*/
    gap: 4px;
	flex-wrap: wrap;





	/*position: fixed;*/
	/*z-index: 101;*/
	/*cursor: pointer;*/
	/*left: 50px;*/		/*右からの配置場所指定--35px*/
	/*top: 50px;*/			/*上からの配置場所指定--30px*/
	/*width: 35px;*/		/*幅（３本バーが出ている場合の幅になります）*/
	/*height: 35px;*/	/*高さ--35px*/
	/*display: flex;*/					/*flexボックスを使う指定*/
	 /*flex-wrap: wrap;*/
  /*gap: 4px;*/
  /*padding: 0px;*/
  /*margin: 0px;*/
	/*flex-direction: column;*/			/*子要素（３本バー）を縦並びにする*/
	/*justify-content: space-between;*/		/*並びかたの種類の指定*/
	/*padding: 10px;*/			/*クリック領域を少し増やす為に指定しました。*/
	/*transition: 0.3s;	/*hover時にopacityの影響を受けるまでの時間。0.3秒。*/

}

/*３本バーのマウスオン時に色を50%にする*/
#menubar_hdr:hover {
	opacity: 0.5;
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	/*border-top: 3px solid #fff;*/	/*線の幅--1.5px、線種、色*/
	width: calc((95%  - 8px) / 3); /*デフォルト設定(100%  - 8px) / 3)*/
	height: calc((95%  - 8px) / 3); /*デフォルト設定(100%  - 8px) / 3)*/
	background: #FFF;
	text-shadow: 2px  2px 5px #383c3c,
            -2px  2px 5px #383c3c,
             2px -2px 5px #383c3c,
            -2px -2px 5px #383c3c;
}

/*変形の起点。センターに。*/
#menubar_hdr.ham span {
	transform-origin: center center;
}





#menubar_hdr.ham span:nth-of-type(1) { filter: opacity(0); }
#menubar_hdr.ham span:nth-of-type(2) { transform:  scaleY(1.75); }
#menubar_hdr.ham span:nth-of-type(3) { filter: opacity(0); }
#menubar_hdr.ham span:nth-of-type(4) { transform: scaleX(1.75); }
#menubar_hdr.ham span:nth-of-type(5) { filter: opacity(0); }
#menubar_hdr.ham span:nth-of-type(6) { transform:  scaleX(1.75); }
#menubar_hdr.ham span:nth-of-type(7) { filter: opacity(0); }
#menubar_hdr.ham span:nth-of-type(8) { transform:  scaleY(1.75); }
#menubar_hdr.ham span:nth-of-type(9) { filter: opacity(0); }




/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	/*transform: rotate(45deg) translate(5px, 5px);*/	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	/*transform: rotate(-45deg) translate(5px, -5px);*/	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

























/*list-grid1（３カラムボックス）
---------------------------------------------------------------------------*/
.list-grid1 .list * {margin: 0;padding: 0;}

/*ボックス１個あたり*/
.list-grid1 .list {
    display: grid;
    margin-left: 8px;	/*左に空けるスペース*/
    margin-right: 8px;	/*右に空けるスペース*/
    margin-bottom: 50px;	/*下に空けるスペース*/
	/*margin-bottom: var(--global-space);*/	/*下に空けるスペース*/
}




/*h3見出し*/
.list-grid1 .list h4 {
	font-weight: bold;
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする*/
	font-size: 1.4rem;		/*文字サイズを150%に*/
	position: relative;	/*カギカッコを絶対配置する為に必要な指定*/
	padding: 1.2rem 1rem;	/*上下、左右へのh3内の余白*/
	margin: 0 auto;		/*左右の中央に配置*/
}







/*ボックス内のp要素*/
.list-grid1 .list p {
	font-size: 1.1rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を狭くする*/
	margin-bottom: 20px;	/*下に空けるスペース*/
}

/*ボックス１個あたり*/
.list-grid1 .list {
	padding: 1rem;			/*ボックス内の余白。１文字分。*/
	background: #fff;		/*背景色*/
	color: #111;			/*文字色*/
    /*grid-template-rows: auto 1fr auto;*/	/*１つ目（この場合はfigure要素のサイズ）と「詳しくみる」ボタンの高さは自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
    
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
	
	display: block; 
    vertical-align: top;
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure {
    width: 100%;			/*画像の幅*/

/*  margin: -1rem; */			/*画像を枠いっぱいに表示させる為に上の「.list-grid1 .list」のpadding分をネガティブマーインで指定*/
	margin-bottom: 0.5rem;		/*画像の下に空けるスペース*/
	
}

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

	/*listブロック全体を囲むブロック*/
	.list-grid1 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 3vw;	/*ブロックの間に空けるマージン的な指定*/
	}

	/*ボックス１個あたり*/
	.list-grid1 .list {
		margin-bottom: 0;	/*下に空けるスペースをなくす*/
	}

	}/*追加指定ここまで*/








































/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}

footer {
	font-size: 0.7rem;		/*文字サイズ*/
	text-align: center;		/*内容をセンタリング*/
}

/*リンクテキスト*/
footer a {text-decoration: none;}

/*著作部分*/
.pr {display: block;}

/*copyrightと著作部分*/
.copy {padding: 1%;}


/*フッターメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
#footermenu {
	margin: 0;
	padding: 1%;		/*ブロック内の余白*/
}

/*メニュー１個あたり*/
#footermenu li {
	display: inline-block;	/*横並びにする*/
	padding: 0 10px;		/*上下、左右への余白*/
}


/*お部屋のご紹介ページ
---------------------------------------------------------------------------*/
/*listボックス。１個あたりのボックスの指定です。*/
.list {
	display: flex;		/*flexボックスを使う指定*/
	padding: 25px 0;	/*上下、左右へのボックス内の余白*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		/*お部屋のご紹介ページ
		---------------------------------------------------------------------------*/
		/*listボックス。１個あたりのボックスの指定です。*/
		.list {
			padding-left: 10px;	/*ボックス内の左側にだけ余白を作る*/
		}
		
	}
	/*画面幅900px以上の追加指定ここまで*/

.list div {
	flex: 1;
}

/*ボックス内のfigure画像*/
/*.list figure {*/
/*	width: 20%;			/*画像の幅*/*/
/*	margin-right: 20px;	/*画像の右側に空けるスペース*/*/
/*}*/

/*ボックス内のh4タグ*/
.list h4 {
	margin: 0 0 0.5em;
	font-size: 1.2rem;
}

/*ボックス内のpタグ*/
.list p {
	margin: 0 0 1em;
	font-size: 0.8rem;
}


/*お部屋のご紹介ページのlistボックス内の情報詳細欄（tableっぽく見える所）
---------------------------------------------------------------------------*/
/*ボックス全体*/
dl.line {
	margin: 0;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	font-size: 0.8em;	/*文字サイズを80%に。*/
	border-top: 1px solid rgba(255,255,255,0.3);	/*上の線の幅、線種、色*/
}

/*左右のボックス*/
dl.line dt, dl.line dd {
	border-bottom: 1px solid rgba(255,255,255,0.3);	/*下線の幅、線種、色*/
	padding: 2px 10px;					/*上下、左右へのボックス内の余白*/
}

/*左のボックス*/
dl.line dt {
	width: 8em;	/*幅。8文字(em)分。*/
}
/*右のボックス*/
dl.line dd {
	width: calc(100% - 8em);	/*「8em」は上の「dl.line dt」のwidthの値です。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		/*お部屋のご紹介ページのlistボックス内の情報詳細欄（tableっぽく見える所）
		---------------------------------------------------------------------------*/
		/*listブロック内でのline設定*/
		.list dl.line dd {
			width: calc(50% - 8em - 10px);	/*大きな端末向けの再設定。２列にしたいので、100%でなく半分の50%から引いています。*/
			margin-right: 10px;				/*２列になった際の間のスペース*/
		}

		.list dl.line {border-top: none;}

		.list dl.line dt:nth-of-type(1), .list dl.line dd:nth-of-type(1),
		.list dl.line dt:nth-of-type(2), .list dl.line dd:nth-of-type(2) {
			border-top: 1px solid rgba(255,255,255,0.3);
		}

	}
	/*画面幅900px以上の追加指定ここまで*/


/*2カラムブロック（※900px未満では１カラム）
---------------------------------------------------------------------------*/
/*２カラムを囲むブロック*/
.c2 {
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
}

/*c2内のh2見出し*/
.c2 h2 {
	font-size: 2rem;
}

/*小さい端末で見た場合（１カラムになった際）に、画像を常に先頭に持ってくる*/
.c2 .image {
	order: -1;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		/*２カラムを囲むブロック*/
		.c2 {
			flex-direction: row;			/*子要素を横並びにする*/
			justify-content: space-between;	/*並びかたの種類の指定*/
			align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
			margin-left: -100px;
			margin-right: -100px;
		}
		/*画像ブロック*/
		.c2 .image {
			width: 50%;
		}

		/*テキストブロック*/
		.c2 .text {
			width: 50%;
			padding: 0 100px;
		}

		/*最初(左)に配置*/
		.c2 .text-l {
			order: -1;
		}

		/*画像を右側に配置する場合の設定*/
		.c2 .image-r {
			overflow: hidden;
			border-radius: 100px 0px 0px 100px;	/*角を丸くする指定。左上、右上、右下、左下への順番。*/
		}

		/*画像を左側に配置する場合の設定*/
		.c2 .image-l {
			overflow: hidden;
			border-radius: 0px 100px 100px 0px;	/*角を丸くする指定。左上、右上、右下、左下への順番。*/
		}

	}
	/*画面幅900px以上の追加指定ここまで*/


/*「NEWS」ブロック
---------------------------------------------------------------------------*/
/*NEWSブロック*/
.new dl {
	margin: 0;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
}

/*日付(dt)設定*/
.new dt {
	width: 8rem;			/*幅。8文字(rem)分。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
	display: flex;			/*flexボックスを使う指定*/
	justify-content: space-between;	/*日付とアイコンをそれぞれ端に寄せる*/
	padding: 10px 0;	/*上下、左右への余白。下のddのpaddingと揃える。*/
}

/*記事(dd)設定*/
.new dd {
	padding: 10px 0;	/*上下、左右への余白。上のdtのpaddingと揃える。*/
	width: calc(100% - 8rem);	/*「8rem」は上の「.new dt」のwidthの値です。*/
}


/*FAQ
---------------------------------------------------------------------------*/
/*FAQボックス全体*/
.faq {
	padding: 0 5px;	/*上下、左右へのボックス内の余白*/
}

/*質問*/
.faq dt {
	border-radius: 3px;		/*枠を角丸にする指定*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	text-indent: -2em;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 5px 1em 5px 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（Bootstrap Icons）*/
.faq dt::before {
    font-family: bootstrap-icons;	/*Bootstrap Iconsを使う為の指定*/
    content: "\F504";	/*アイコンのコード*/
	color: #fff;		/*アイコンの色*/
	padding-right: 1em;	/*アイコンとテキストとの間のスペース*/
}

/*回答*/
.faq dd {
	padding: 5px 1em 30px 3em;		/*ボックス内の余白**/
}

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


/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-weight: bold;		/*太字に*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: #555;		/*背景色*/
	color: #fff;			/*文字色*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	border-top: 1px solid #fff;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 30px;		/*最後の「30px」がテーブルの下に空けるスペースです*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #fff;	/*テーブルの下線。幅、線種、色*/
}

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

/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		/*テーブル１行目に入った見出し部分（※caption）*/
		.ta1 caption {
			padding: 5px 15px;		/*上下、左右へのボックス内の余白*/
		}

		/*th（左側）、td（右側）の共通設定*/
		.ta1 th, .ta1 td {
			padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
		}

		/*th（左側）のみの設定*/
		.ta1 th {
			width: 20%;		/*幅*/
		}

	}
	/*画面幅900px以上の追加指定ここまで*/


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	background: rgba(0,0,0,0.3);	/*背景色。0,0,0は黒の事で0.3は色が30%出た状態。	*/
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	color: #fff;		/*文字色*/
}


/*アニメーションボタン。（枠線をぐるっとなぞるアニメーション）
---------------------------------------------------------------------------*/
@keyframes w {0% {width: 0px;} 100% {width: 100%;}}
@keyframes h {0% {height: 0px;} 100% {height: 100%;}}

/*ボタンの一番の外側のボックス*/
.animation-btn {
	position: relative;		/*枠線をアニメーションさせる為に必要な指定*/
	display: inline-block;
	box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.5) inset;	/*デフォルトで見えている枠線の設定。255,255,255は白の事で0.5は色が50%出た状態。*/
}

/*上のanimation-btnの内側にあるボックス*/
.animation-btn-inner {
	display: block;text-decoration: none;
	padding: 0.5em 3em;		/*ボタン内の余白。上下、左右へ。emは文字の単位。1emが1文字分という事です。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
	text-indent: 0.1em;		/*letter-spacingを設定するとその分全体のテキスト位置がずれるので、戻す設定。同じ数字にしておけばOKです。*/
}

/*ボタン内でiタグを使う場合の設定*/
.animation-btn-inner i {
	display: inline-block;
	transition: 0.3s;		/*アニメーションにかける時間。0.3秒。*/
	padding-left: 1em;		/*テキストと、iタグの間の余白*/
}
.animation-btn-inner:hover i {
	transform: translateX(5px);	/*マウスオン時にiタグを5pxだけ右に移動する*/
}

/*枠線共通*/
.animation-btn::before,
.animation-btn::after,
.animation-btn-inner::before,
.animation-btn-inner::after {
	content: "";
	position: absolute;
	background-color: #fff;		/*background(背景)スタイルですが、ここでは枠線の色に使われます。*/
	animation-duration: 0.2s;	/*アニメーションにかける時間。１辺あたり0.2秒。*/
	animation-fill-mode: forwards;	/*アニメーション完了時に最後のフレームを維持。この１行を外してみると別の動作になって面白い動きになります。*/
	animation-timing-function: linear;	/*アニメーションの速度のタイプ。同じ速度にする。*/
}

/*ラインアニメーション１（左上→右上）*/
.animation-btn:hover::before {
	left: 0px;	/*開始地点の指示*/
	top: 0px;	/*開始地点の指示*/
	height: 1px;		/*線の幅の代わりになります*/
	animation-name: w;	/*上の「@keyframes」で使うアニメーション名の指定。*/
}

/*ラインアニメーション２（右上→右下）*/
.animation-btn:hover::after {
	right: 0px;	/*開始地点の指示*/
	top: 0px;	/*開始地点の指示*/
	width: 1px;			/*線の幅の代わりになります*/
	animation-name: h;	/*上の「@keyframes」で使うアニメーション名の指定。*/
	animation-delay: 0.2s;	/*アニメーションを0.2秒遅れてスタートさせる。*/
}

/*ラインアニメーション３（右下→左下）*/
.animation-btn-inner:hover::before {
	right: 0px;		/*開始地点の指示*/
	bottom: 0px;	/*開始地点の指示*/
	height: 1px;		/*線の幅の代わりになります*/
	animation-name: w;	/*上の「@keyframes」で使うアニメーション名の指定。*/
	animation-delay: 0.4s;	/*アニメーションを0.4秒遅れてスタートさせる。*/
}

/*ラインアニメーション４（左下→左上）*/
.animation-btn-inner:hover::after {
	left: 0px;		/*開始地点の指示*/
	bottom: 0px;	/*開始地点の指示*/
	width: 1px;			/*線の幅の代わりになります*/
	animation-name: h;	/*上の「@keyframes」で使うアニメーション名の指定。*/
	animation-delay: 0.6s;	/*アニメーションを0.6秒遅れてスタートさせる。*/
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ffc500 !important;}
.color-theme, .color-theme a {color: #eacd6a !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.mt30 {margin-top: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #333;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 3em; letter-spacing: 0.2em;}
.pc {display: none;}
.dn {display: none !important;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		.ws {width: 48%;display: inline;}
		.sh {display: none;}
		.pc {display: block;}

	}
	/*画面幅900px以上の追加指定ここまで*/