@charset "utf-8";

* {
	margin : auto;
	padding : 0;
}

.alpha img:hover {
  opacity: 0.80;
  -moz-opacity: 0.80;
  filter: alpha(opacity=80.0);
  -ms-filter: "alpha(opacity=80.0)";
}

a {
	text-decoration: none;
}

.body {
	width: 950px;
	height: auto;
}

html {
  scroll-padding-top: 120px; /* 固定ヘッダーの高さ分を空ける */
}

/* メイン+サブ設定開始 2021.03.01*/

#wrapper {
   width: 950px;
   margin: 0 auto;/* 幅固定（950px）でセンタリングします。*/
}

#main {
   width: 950px;     /* メニューとコンテンツを囲んでいます。 */
   overflow: hidden; /* 親ボックスでフロート解除します。*/
}

/* 共通サイドバー設定 2021.03.01*/
#menu {
   float: left;
   width: 210px;
   height: auto;
   text-align: center;
   background:url(https://www.mannaka.co.jp/newrakuten/img/sideimg.gif) repeat-y top;
   border: none;
   line-height: 1.2em;/* floatの width 指定は必須です。*/
}

#menu p {
	margin-bottom: 0.6em;
	margin-top: 0.3em
}

#contents {
   float: right;
   width: 740px;     /* floatの width 指定は必須です。*/
   text-align: right;
   border: none;
   line-height: 1.5em;
}

#menu ul {
   list-style: none;
}

/*ヘッダー設定*/

.header {
	text-align: center;
}

/*ヘッダー設定ここまで*/

.pop {
	text-align: center;
	padding: 5px 0px 5px 0px;
}

.htxt {
	font-size: 17px;
	font-weight: bold;
	text-align: center;
	padding: 5px 0px 5px 0px;
}

.inbound_ttl {
	width: 950px;
	height: 110px;
	}
	
#inbound _ttl ul li {
	width: 20%
}

.list-box {
  display: table;
}
.list-img,
.list-text {
  display: table-cell;
  vertical-align: middle;
}

/* サイドバー設定 */

.sidenavi {
	width: 210px;
	text-align: center;
	background:url(https://www.mannaka.co.jp/newrakuten/img/sideimg.gif) repeat-y top;
	border: none;
	line-height: 1.5em;
}

.sideimg {
	padding-top: 6px;
	padding-bottom: 8px;
}

.sideimga {
	padding-bottom: 8px;
	padding-top: 8px;
}
.freeitem {
	padding-top: 8px;
}

.plan {
	padding-bottom: 6px;
}

.plan_top {
	padding-top: 6px;
	padding-bottom: 6px;
}

.sidetxt {
	padding: 6px 0px 15px 0px;
	color: #FFF;
	font-size: 13px;
	text-align: center;
	font-weight: bold;
	background: url(https://sv107.wadax-sv.jp/mannaka.co.jp/newrakuten/img/side_bluebar.jpg) no-repeat;
	text-decoration: none;
}

/* -- リスト/サイドバーメニュー設定 -- */

.localnavi {
  list-style-type: none;
  margin-bottom: 5px;
  text-align: left;
}

.localnavi li { display: inline; }

.localnavi a {
  text-decoration: none;
  width: 192px;
  display: block;
  padding: 4px 8px;
  border: 1px solid #fff;
  background-color: #999;
  color: #FFF;
}

.localnavi a:hover {
  text-decoration: none;
  border: 1px outset #CCC;
  background-color: #333;
  color: #fff;
}

/* -- リスト/サイドバーメニュー（おすすめプラン設定） -- */
.localnavia {
	list-style-type: none;
	margin-top: 2px;
	margin-bottom: 5px;
	margin-left: 4px;
	text-align: left;
}

.localnavia li {
	display: inline;
}

.localnavia a {
  text-decoration: none;
  width: 185px;
  display: block;
  padding: 4px 8px;
  border: 1px solid #333;
  background-color: #fff;
  color: #000;
}

.localnavia a:hover {
  text-decoration: none;
  border: 1px outset #fff;
  background-color: #000;
  color: #fff;
}

.map {
	text-align: center;
}

/*メイン設定*/

.txtwhite {
	height: 27px;
	font-size: 15px;
	text-decoration: none;
	padding: 10px 0px 5px 20px;
	color: #FFF;
	font-weight: bold;
	background: url(https://www.mannaka.co.jp/newrakuten/img/mainbar_ablue.jpg) no-repeat;
}

/* TOP紹介設定 2021.02.18 */

/* ヘッダー設定2021.02.18 */

.top-banner{
	display: flex;
	flex-wrap:wrap;
}
.top-banner li {
	width: calc(100%/5);/*←画像を横に5つ並べる場合*/
	padding:0 5px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.top-banner li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
}/* ヘッダー設定ここまで */

.txtwhitea {
	text-align: left;
	height: 27px;
	font-size: 15px;
	text-decoration: none;
	padding: 10px 0px 5px 20px;
	color: #FFF;
	font-weight: bold;
	background: url(https://www.mannaka.co.jp/newrakuten/img/mainbar_bblue.jpg) no-repeat;
	background-position: right /* background画像の位置指定 */
}

.txtwhiteb {
	text-align: left;
	height: 27px;
	font-size: 15px;
	text-decoration: none;
	padding: 10px 0px 5px 20px;
	color: #FFF;
	font-weight: bold;
	background: url(https://www.mannaka.co.jp/newrakuten/img/marker.jpg) no-repeat;
	background-position: right /* background画像の位置指定 */
}

/* 3カラム設定 */

.flex_contents {
    padding:  10px;             /* 余白指定 */
    display: flex;              /* フレックスボックスにする */
    justify-content:center;
}
 
.flex_contents-item {
    margin:  5px;              /* 外側の余白 */
    width: 238PX;                 /* 幅指定 */
	padding-left: 3px;
	padding-right: 2px;
}
 
/* 2カラム設定 */

.container{
    display: flex;
}

.left{
    width: 360px;
	padding: 10px 0px 0px 5px;
}

.contents{
    flex: 1;
	font-size: 16px;
	line-height: 1.8em;
	padding-top: 10px;
	padding-left: 10px;
	text-align: left;
}/* 2カラム設定ここまで */

/* 1カラム設定 */
.box_container {
	width: 740px;
	margin: 0;
	height: auto;
}

.boxtext {
	padding-top: 5px;
	padding-left: 10px;
	text-align: left;
	font-size: 18px;
	line-height: 1.8
}

.scontainer {
	width: 740px;
	margin: 0;
	height: auto;
	text-align: left;
}

.one_text {
	font-size: 16px;
	line-height: 1.8;
	padding-top: 10px;
	padding-left: 10px;
}

.one_textRed {
	font-size: 16px;
	color: #F00;
	line-height: 1.8;
	padding-top: 10px;
	padding-left: 10px;

}

.phot_img {
	margin: 10px 0px 10px 0px;
}

.phot_imga {
	position: static;
}

/* 1カラム設定ここまで */

/* TOP紹介設定ここまで */

/* 料理他動画設定 */

.movie {
	width: 360px;
	height: 239px;
	padding: 10px 0px 10px 0px;
}

/*心に届けムービー設定*/

.moving_image {
	margin-left: 10px;
	width: 350px;
	height: 312px;
}

.spamoving_image {
	margin: 10px 0px 10px 20px;
}
.smoving_image {
	margin-left: 5px;
	width: 200px;
	height: 240px;
}

/*ドリンクメニュー設定*/
.drink_menua {
	width: 25px;
}

.drink_menub {
width: 240px;
	margin: 20px 0px 10px 0;
	font-size: 17px;
}

.drink_menuc {
	width: 475px;
	margin: 20px 0px 10px 0;
	font-size: 17px;
}

.img_space{
	padding: 5px 0px 5px 0px;
	text-align: center;
	width: 360px;
	background-color: #f1ebdf;
	color: #644a33;
}

.fimg_space{
	padding: 5px 0px 5px 0px;
	text-align: center;
	width: 242px;
	background-color: #f1ebdf;
	color: #644a33;
}

/* ドリンクメニュー設定ここまで */

.limg {
	padding-left: 2px;
}

.spaimg {
	padding: 5px 5px 10px 20px;
	float: left;
}

.oimg {
	text-align: center;
}

.fimg {
	text-align: center;
}

.popimg {
	padding-top: 10px;
	padding-bottom: 10px;
	}

/* Font_size */

.mtxt {
	font-size: 14px;
	font-weight: bold;
	padding: 0px 0px 10px 5px;
}

.txt {
	line-height: 1.5em;
	padding-left: 3px;
	padding-top: 8px;
}

.ltxt {
	line-height: 1.5em;
	padding-left: 20px;
	padding-top: 8px;
}

.ftxt {
	line-height: 1.8em;
	padding-left: 20px;
	padding-top: 10px;
}

.rtxt {
	line-height: 1.8em;
	padding-left: 20px;
	padding-top: 10px;
}

.ttxt {
	line-height: 1.8em;
	padding-left: 20px;
}

.infotxt {
	line-height: 1.8em;
	font-size: 16px;
	padding: 10px 0px 10px 3px;
}

.infotxt_B {
	line-height: 1.8em;
	font-size: 16px;
	text-align: left;
	padding: 0.5em 2em 0.5em 2em;
}

/* 予約変更について */

.information {
	width: 728px;
	text-align: center;
	line-height: 1.6em;
	font-size: 16px;
	border: 1px solid #000;
	margin-left: 10px;
}

p span {
  position: relative;
  background: linear-gradient(transparent 40%, yellow 40%);
}

/*テキスト関係*/

/*料理内アレルギー説明テキスト設定2024.06*/
.txtA {
	font-size: 16px;
	line-height: 1.8em;
	margin: 20px 15px 20px 15px;
}

.txtRed {
	color: #ff0000;
}

.txtaBlack {
	padding-left: 20px;
	color: #000;
	line-height: 1.4em;
}

.txtBlack {
	font-size: 17px;
	font-weight: bold;
}

.otxtBlack {
	font-size: 17px;
	font-weight: bold;
	padding-top: 10px;
}

.ltxtBlack {
	font-size: 17px;
	font-weight: bold;
	padding-top: 10px;
	padding-left: 20px;
}

.ftxtBlack {
	font-size: 17px;
	font-weight: bold;
	padding: 3px 0px 10px 20px;
}

.ttxtRed {
	padding-top: 10px;
	padding-left: 20px;
	line-height: 1.4em;
	color: #F00;
}

.utxtBlack {
	padding-top: 10px;
	padding-left: 5px;
	padding-bottom: 15px;
	color: #F00;
}

.btxt {
	text-align: center;
	color: #C96912;
	padding-right: 15px;
}

.txta {
	line-height: 1.5em;
	padding: 7px 0px 10px 5px;
}

.ctxt {
	text-align: left;
	padding-left: 10px;
	line-height: 1.8em;
	font-size: 16px;
}

/* 大歩危峡観光遊覧船・ラフティング・観光 */

/* stream　温泉動画 */

.stream {
	padding-left: 15px;
}

figure.gazo-box {
float: left;
 }
 
.tourism_photo {
	text-align: center;
	vertical-align:bottom;
	border: none;
	vertical-align:top;
}

.set {
	text-align: right;
	padding-right: 15px;
	font-size: 14px;
	padding: 10px 0px 10px 0px;
}

/* リラクゼーションルーム */
List_nav{
text-align: center;
}
nav ul{
margin: 0 ;
padding: 0 ;
}
nav ul li{
list-style: none;
display: inline-block;
width: 18%;
min-width: 90px;
}
nav ul li a{
text-decoration: none;
color: #333;
}
nav ul li.current a{
color: #F33135;
}
nav ul li a:hover{
color: #E7DA66;
}
/* リラクゼーションルーム */

/* 寛ぎのお部屋紹介 */

.item {
	text-align: center;
	padding-bottom: 5px;
}

.room_select{
	display: flex;
	flex-wrap:wrap;
}
.room_select li {
	width: calc(100%/4);/*←画像を横に5つ並べる場合*/
	padding:0 5px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.top-banner li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
}/* ヘッダー設定ここまで */

/* album 設定 */
.album {
	margin: auto;
	background-color: white;
	position: relative;
}

.album img {
	width: 950px;
	animation-name: album;
	-webkit-animation-name: album;
	animation-duration: 63s; /* 1度のアニメーション周期の完了までの時間を指定 */
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	opacity: 0;
	text-align: center;
}

.album .img1 {
	display: block;
	margin: 0 auto;
}

.album .img2 {
	animation-delay:10s;
	position: absolute;
	top: 0;
}

.album .img3 {
	animation-delay:18s;
	position: absolute;
	top: 0;
}

.album .img4 {
	animation-delay:26s;
	position: absolute;
	top: 0;
}

.album .img5 {
	animation-delay:34s;
	position: absolute;
	top: 0;
}

.album .img6 {
	animation-delay:42s;
	position: absolute;
	top: 0;
}

@keyframes album {
	0% {
		opacity: 0;
	}
	
	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}

@-webkit-keyframes album {
	0% {
		opacity: 0;
	}
	
	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
/* album 設定ここまで */

/* 画像設定(背面可視性) */
img {
	-webkit-backface-visibility: hidden;
	}