/******************************************************************************/
/* リトリート・イン浦富メインページ style.css								  */
/* Ver.1.0 2025.01.25                                                         */
/******************************************************************************/

/* サイト全体のボディ設定                                                     */
/* bodyをブラウザの中央に持ってくるときは、                                   */
/* margin-left:auto、margin-right:auto、text-aligin:centerとすること          */
/* marginのleft,rightの設定は、IEと、FierFoxの互換のため                      */

body
{
	max-width:100%;			/* 表示全体の表示幅範囲設定                       */
	position:relative;      /* 文字表示を相対位置指定                         */
    margin-left:auto;       /* 領域枠と文字間の左余白を自動設定               */
    margin-right:auto;      /* 領域枠と文字間の右余白を自動設定               */
	/*margin:0;*/           /* 上下左右のマージンを 0 に設定                  */
	padding:0;              /* 上下左右のタグで括られた枠との余白を 0 に設定  */
	background:#ffffff;     /* サイト全体の表示色の設定                       */
	/* text-align:left; */  /* ブロックタグ内の文章を左揃えに設定             */
	line-height:1.4;        /* 文字の行の高さを基準書体の1.4倍に設定          */
	color:#3D2814;
	/* font-size:85%;       /* サイト全体の文字の大きさを85%に設定            */
	/* font-family:verdana,'MS UI Gothic';            */
	/* font-family:verdana,'MS UI Gothic',sans-serif; */
	/* font-family:verdana,'MS UI Gothic';            */
	/*font-family:consolas,'MS UI Gothic';*/ /* 文字種の指定                  */
	/* font-family:Lucida Console, 'MS UI Gothic'; /* 文字種の指定            */
	font-family:HG丸ｺﾞｼｯｸM-PRO,sans-serif;
    text-align:center;      /* 表示全体を中央に表示させるためのセンター設定   */

}

/* サイト全体の設定                                                           */
/* メインのボディ設定と同じ幅設定にする。これをしないと、ブラウザを小さくし   */
/* たとき、NAVI段落と、CONTENTS段落のバランスが崩れるので必ず設定しておく事   */
#mbody 
{
	width:100%;
    margin:auto;            /* 上下左右のマージンを自動設定                   */
	padding:auto;           /* 上下左右のタグで括られた枠との余白を自動設定   */
	background:#ffffff;     /* サイト全体の表示色の設定(白:#ffffff)           */
	margin-left:auto;       /* 領域枠とタグ内の文字間に余白を自動設定         */
	text-align:left;        /* 文章を左詰めに設定                             */
/*	text-align: center; */  /* 文章を中央に設定                               */
    overflow: hidden;		/* 右側に微妙に余白ができるのを防止				  */

}

#mfooter
{
	width: 100%;              /* 表示幅を全体幅に合わせる                      */
	clear:left;
	float:left;               /* 画像の表示位置指定(画像を左に、文章を右)      */
	text-align:left;
	margin-left:auto;         /* 領域枠と文字間の右余白を自動設定              */
    margin-right:auto;        /* 領域枠と文字間の右余白を自動設定              */
	background-color:#eaeaea;
	font-size:0.8em;
    overflow: hidden;		  /* 右側に微妙に余白ができるのを防止			   */

}


/* フッターの紹介サイズ */
.intro_footer {
/*	width : 100%; */
	margin:20px 5vw 10px 5vw;
	display:inline-block;

}

.ifooterlogo {
	width:145px;
	float:left;

}

.ifooterlogo img {
	width:125px;

}


.ifootersign {
	float:left;

}

.ifootersign span {
	font-weight:900;
	font-size: 1.2em;

}


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

	.ifootersign {
		font-size:0.85em;

	}

	.ifootersign span {
		font-size: 1.3em;

	}


	.ifooterlogo {
		width:130px;

	}

	.ifooterlogo img {
		width:110px;

	}


}



/* 著作権のPCとSP(スマートフォン)の表示設定 */

.intro_copyright {
	width:100%;
	text-align: center;

}


.intro_copyright_sp {
	width:100%;
	display: none;

}


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

	.intro_copyright_sp {
		width:100%;
		display:inline-block;
		text-align: center;

	}

	.intro_copyright {
		display: none;
	}

}



/* float解除 																   */
.clear_float{
	clear: both;
}


/* bodyタグの下にdivでコンテンツを設置すると、上下空白ができるのを防止する	  */

* {
    margin: 0px;
    padding: 0px;
}

/********************************************************************************/
/* メインヘッダーメニュー設定				                                    */
/*                                                                              */
/********************************************************************************/

.MainMenuArea {
	max-width: 100%;

}

/* メインヘッダー リトリートイン浦富のロゴを左寄せ */

.mainlogoleft_size {
/*	width:14vw;						/* 
/*	height:6.6vw;					/* ロゴの画像の下に余白ができるので高さ調整 */
	width:220px;
	height:95px;
	text-align:left;
	float:left;

}

/* リトリート・イン浦富のロゴ */
.mainlogoleft_size a img {

/* レスポンシブ設定 */
/*	width:14vw;
	height: auto;
*/
/* メインヘッダーの縦・横を固定する設定とする */
	width:220px;
	height:95px;

}

/* メインヘッダーのサブタイトルのエリア */
.MeneSubTitlArea {
	display:inline-block;
	padding:8px 0px 8px 20px;

}

/* 横幅が 500px以下の場合非表示にする */
@media screen and (max-width: 500px) {

	.MeneSubTitlArea {
		display: none;

	}
}


/* メインヘッダーメニューのエリア設定 ( 横 250 X 縦 120 ) */
.MenuItemArea {
	height: 2.8vw;

}

/* メインヘッダーのメニューエリアが、800以下の場合非表示にする */
@media screen and (max-width: 800px) {

	.MenuItemArea {
		display: none;

	}
}

/* メインヘッダー UL 設定 */
.MenuItemArea ul {
	list-style-type: none;
	padding-left: 0;
	font-family:sans-serif;

}

.MenuItemArea ul li {
	display:inline-block;
	margin:10px;
	width:9vw;
	height:42px;			/* メニューのliの高さ(マウスが乗った時の下線表示位置) */
	text-align:center;
	color:00489d;

}

.MenuItemArea ul li a {
	display:block;
	width:100%;
	height:100%;				/* ここを100%にしないと、liの高さが継承されない */
	text-decoration: none;
	font-weight: 900;
	color:#00489d;
	font-size: 1.1vw;

}

.MenuItemArea ul li a:hover {
	color:#479bfe;				/* ホバーしたときの文字の色 */
	background:linear-gradient(transparent 90%, #00489d 0%);	/* ホバーしたときアンダーラインを表示 */
/*	opacity: 0.5; */

}


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

	.MenuItemArea ul li a {
		font-size: 1.2vw;

	}

	.MenuItemArea ul li {
		width: 8.5vw;

	}

}


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

	.MenuItemArea ul li a {
		font-size: 1.3vw;

	}

	.MenuItemArea ul li {
		width: 8vw;

	}

}

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

	.MenuItemArea ul li a {
		font-size: 1.4vw;

	}

	.MenuItemArea ul li {
		width: 7.1vw;

	}

}



/********************************************************************************/
/* メインヘッダーのスマホ用三本線(ハンバーガーメニュー)の描画                   */
/*                                                                              */
/********************************************************************************/

/* ハンバーガーメニューの設定 */
.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    width: 60px;							/* ハンバーガーメニューのサイズ(幅) */
    height: 60px;							/* ハンバーガーメニューのサイズ(縦) */
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #c8c8c8;				/* ハンバーカーメニューの背景色     */

}


@media screen and (min-width: 800px) {

	.menu-btn {
		display: none;

	}
}


/* ハンバーガーメニューのラインの設定 */
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;							/* ハンバーガーメニューの太さ	  */
    width: 30px;							/* ハンバーガーの幅				  */
    border-radius: 3px;						/* 境界の外側の角を丸める		  */
    background-color: #ffffff;				/* ハンバーガーラインの色         */
    position: absolute;

}
.menu-btn span:before {
    bottom: 8px;

}
.menu-btn span:after {
    top: 8px;

}


/* ボタンがタップされたとき三本線を「×」マークにする */
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/

}

#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);

}

#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);

}

/* チェックボックスを隠す */
#menu-btn-check {
    display: none;

}


/* メニュー画面の装飾 */
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color: #c8c8c8;

}

.menu-content ul {
    padding: 70px 10px 0;

}

.menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;

}

.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;

}

.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;

}

/* ボタンを押したらメニューを表示 */
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;　/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #c8c8c8;
    transition: all 0.5s;	/*アニメーション設定*/

}

/* ボタンがタップされたとき(チェックボックスにチェックがついたとき)のメニュー画面に表示 */

#menu-btn-check:checked ~ .menu-content {
    left: 0; /*メニューを画面内へ*/

}


/* メイン画像エリア部の設定 												  */
/* bxslider表示用設定 .cmpictuerで、.incmpictuerで囲まないとサイズの調整が    */
/* できない																	  */
/* .cmpictuer_pcは、パソコン表示用のブロック								  */
/* .cmpictuer_spは、スマートフォン表示用のブロック							  */


.cmpictuer_pc
{
	width:100%;				/* サイトの幅と同じ表示に設定                     */
	height: auto;

/*
	position:absolute;		/* 絶対位置、親要素の基準点 0,0 からの移動位置を設定 */
/*	top:6.7vw;
*/

}

.cmpictuer_pc img
{
	width:100%;				/* 画像イメージを横幅いっぱいに表示する */
	height: auto;

}

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

	.cmpictuer_pc {
		display: none;

	}
}


.cmpictuer_sp
{
	width:100%;				/* サイトの幅と同じ表示に設定                     */
	height: auto;


}

.cmpictuer_sp img
{
	width:100%;				/* 画像イメージを横幅いっぱいに表示する */

}

@media screen and (min-width: 840px) {

	.cmpictuer_sp {
		display: none;

	}
}

.incmpictuer_pc {
	width:100%;				/* サイトの幅と同じ表示に設定                     */
	height: auto;
	margin:0px;             /* 上右下左のマージンを 0 に設定                  */
	padding:0px;	        /* 上下左右のタグで括られた枠との余白を 0 に設定  */
	background:#ffffff;     /* サイト全体の表示色の設定                       */
	text-align:left;        /* 文章を左詰めに設定                             */
    border: none;
    box-shadow: none;

}

.incmpictuer_sp {
	width:100%;				/* サイトの幅と同じ表示に設定                     */
	height: auto;
	margin:0px;             /* 上右下左のマージンを 0 に設定                  */
	padding:0px;	        /* 上下左右のタグで括られた枠との余白を 0 に設定  */
	background:#ffffff;     /* サイト全体の表示色の設定                       */
	text-align:left;        /* 文章を左詰めに設定                             */
    border: none;
    box-shadow: none;
}

/* 重要なお知らせ表示エリア設定 */
.InpotantNoticeWrapper {
	margin : 20px 7vw 20px 7vw;

}

/* メッセージ文字サイズ */
.inpotantmsg1 {
	font-size: 0.9em;

}

.inpotantmsg2 {
	font-weight:800;
	color:#0095d9;
	font-size: 1.2em;

}



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

	.InpotantNoticeWrapper {
		font-size:0.9em;

	}


}


/************************************************/
/* プルダウンメッセージ							*/
/************************************************/
.pulldown_wrapper {
/*	position: relative;				/* これを指定しないとプルダウン時の右側がブラウザの右一杯表示なる */
	margin : 30px 7vw 30px 7vw;
/*	border: 2px solid #d9d9d9; */
/*	width: 80vw; */
	height: 40px;
	line-height: 2.5;
/*	cursor:pointer;					/* リンク時のお手てマークを表示 */

}


.pulldown_libon {

	margin : 5px 1vw 5px 1vw;
/*	height: 40px;*/
	line-height: 2.5;

}


/************************************************/
/*												*/
/* リトリート・イン浦富、周辺イベントのお知らせ */
/*												*/
/************************************************/

.title_announce {
	margin : 30px 7vw 10px 7vw;
	color : #1212ff;
	font-weight:900;
	font-size:1.2em;

}


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

	.title_announce {
		font-size:1.0em;

	}

}


.link_warrap {
	margin : 30px 7vw 10px 7vw;

}

.link_warrap a img {
	width:17vw;
	height:auto;

}


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

	.link_warrap a img {
		width:24vw;
		height:auto;

	}


}


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

	.link_warrap a img {
		width:24vw;
		height:auto;

	}


}


/************************************************/
/* 宿泊予約										*/
/************************************************/

.each_warapper {
	width: 100%;

}

.each_warapper img {
	width: 100%;

}

.yoyaku_title {
	width:50vw;
	margin: 40px 0px 0px 0px;
	padding: 10px 0px 10px 0px;
	text-align: center;
	display:inline-block;
	font-size:1.8em;
	border-top: thick double;
	border-bottom: thick double;

}

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

	.yoyaku_title {
		width:70vw;

	}

}

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

	.yoyaku_title {
		font-size:1.3em;

	}

}

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

	.yoyaku_title {
		font-size:1.0em;

	}

}

.submsg {
	margin: 40px 7vw 40px 7vw;

}

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

	.submsg {
		font-size: 0.8em;

	}

}


/************************************************/
/* 宿泊予約										*/
/* カレンダー全体表示エリア						*/
/************************************************/

.displayarea {
	margin : 30px 7vw 10px 7vw;

}


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

	.displayarea {
		font-size: 0.8em;

	}

}


.captionpictuer img {
	width: 100%;

}

/******************************************************************************/
/* 細罫線TABLE設定                                                            */
/*                                                                            */
/******************************************************************************/

.ruled_line {
    /* width: 95%; */
    margin-left:5px;
    margin-right:auto;
    border: 1px #696969 solid;
    border-collapse: collapse;
    border-spacing: 0;
}

/*  */
.ruled_line th {
    padding: 5px;
    border: #696969 solid;
    border-width: 0 0 1px 1px;
    background: #F5F5F5;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}

.ruled_line td {
	font-size:86%;
    padding: 5px;
    border: 1px #696969 solid;
    border-width: 0 0 1px 1px;
    text-align: left;
}

/******************************************************************************/
/*																			  */
/* 宿泊予約																	  */
/* 申し込み用紙表示															  */
/*																			  */
/******************************************************************************/

.appform {
	margin: 0px 10vw 60px 7vw;
	display : inline-block;

}

.formlist {
	width: 310px;
	height: 50px;
	line-height: 50px;
	margin: 10px 5px 0px 10px;
	font-size: 1.2em;
    font-weight: 600;
	border-radius: 10px;
	color: #ffffff;
	float: left;
	position: relative;				/* 相対位置 からの移動位置を設定 */

}


.formlist span {
	position: absolute;				/* 絶対位置、親要素の基準点 0,0 からの移動位置を設定 */
	top: 0;

}

.formlist a {
	position: absolute;				/* 絶対位置、親要素の基準点 0,0 からの移動位置を設定 */
	left: 0;						/* ホバーしたときずれるので。左端に設定 */
    height:100%;					/* kadomaru1全体を選択 */
    width: 100%;					/* kadomaru1全体を選択 */

}

.formlist a:hover {
	border-radius: 10px;
	opacity: 0.3;
	background-color: #ffffff;

}


/* 文字の表示色を指定 */
.moji_white {
	color: #ffffff;

}


.formlist img {
	width:30px;
	margin:10px 5px 0px 30px;

}


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

	.appform {
		font-size: 0.8em;

	}

	.formlist {
		font-size: 1.2em;

	}

}


.backcolor01 {
	background-color:#2454ee;

}

.backcolor02 {
	background-color:#8e6803;

}


/******************************************************************************/
/*																			  */
/* カレンダーの凡例文字														  */
/*																			  */
/******************************************************************************/

.cmoji {
	font-weight: 900;
	font-size: 1.3em;

}

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

	.cmoji {
		font-size: 1.1em;

	}

}


/******************************************************************************/
/*																			  */
/* カレンダー表示エリアの表示												  */
/*																			  */
/******************************************************************************/

.calender_pc {
	width: 100%;

}

.calender_sp {
	display: none;

}

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

	.calender_sp {
		width: 100%;
		display:inline-block;

	}

	.calender_pc {
		display: none;

	}

}


/******************************************************************************/
/*																			  */
/* 施設案内	( facility )													  */
/*																			  */
/*																			  */
/******************************************************************************/

.facility_warapper {
	display: line-block;

}


.facility01 {
	width: 41vw;
	padding: 20px 20px 20px 0px;
	float:left;

}

.facility01 img {
	width: 41vw;

}


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

	.facility01 {
		width: 40vw;
		font-size: 1.0em;

	}

	.facility01 img {
		width: 40vw;

	}


}


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

	.facility01 {
		font-size: 0.9em;

	}


}


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

	.facility01 {
		width: 84vw;

	}

	.facility01 img {
		width: 84vw;

	}


}


h1.lightskyblue  /* ライトスカイブルー */
{
/*	width:90%; */
    border:solid;
    padding:5px;
    border-width:0px 0px 1px 10px;   /* 上:0 右:0 下:0 左:10px に設定         */
    border-color:#0000ff;
    font-size: 1.3vw;
    background-color:#87cefa;
    border-bottom:3px solid #0000ff;
}

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

	h1.lightskyblue {
	    font-size: 1.2em;

	}

}

h1.uvline
{
/*	width:96%; */
    padding:5px;
    border: solid;
    border-width:0px 0px 1px 10px;
    border-color:#8b0000;
    font-size:110%;
    border-bottom:3px solid #8b0000;
}


.facility_pic {
	width: 100%;
	display: inline-block;

}


.facility_pic ul {
	list-style:none;
	padding-left:0;

}


.facility_pic li {
	width: 26vw;
	margin:6px 5px 6px 5px;
	float:left;

}


.facility_pic img {
	width: 26vw;
	height:auto;

}


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

	.facility_pic li {
		width: 40vw;

	}

	.facility_pic img {
		width: 40vw;

	}


}




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

	.facility_pic li {
		width: 39vw;

	}

	.facility_pic img {
		width: 39vw;

	}


}


/******************************************************************************/
/*																			  */
/* アクセス	( access )														  */
/*																			  */
/*																			  */
/******************************************************************************/

.access_warapper {
	display: line-block;

}

.access01 {
	block-size: 50%;
	margin: 0px 2vw 0px 0px;
	float:left;

}

.access01 img {
	width: 40vw;

}

h1.burlywood {
    border:solid;
    padding:5px;
    border-width:0px 0px 1px 10px;   /* 上:0 右:0 下:0 左:10px に設定         */
    border-color:#8b4513;
    font-size:110%;
    background-color:#deb887;
    border-bottom:3px solid #8b4513;

}

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

	.access01 {
	    font-size: 0.85em;

	}

}

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

	.access01 {
	    font-size: 0.85em;
		margin: 20px 2vw 0px 0px;

	}

	.access01 img {
		width: 86vw;

	}


}


/******************************************************************************/
/*																			  */
/* 周辺観光	( tourism )														  */
/*																			  */
/*																			  */
/******************************************************************************/


h1.uline
{
    padding:5px;
    border: solid;
    border-width:0px 0px 1px 0px;
    border-color:#1e90ff;
    font-size:110%;
/*    background-color:#d3d3d3; */
    border-bottom:3px solid #1e90ff;
}


.tourism_longpic {
	width:100%;
	margin:12px 10px 12px 10px;

}

.tourism_longpic img {
	width:80vw;

}