﻿@charset "utf-8";



html{
overflow-y:scroll;
}

body {
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    margin:0px;
	padding: 0px;
	color: #666666;
	text-align:center;
    -webkit-text-size-adjust: 100%;
    
}
/** スマホ表示・非表示 **/
.smart_on {
    display:none;
}
@media screen and (max-width: 800px) {
.smart_on {
    display:inline;
}
.smart_off {
    display:none;
}
}


/** 改行タグ **/

.clear{
    clear:both;
}

.clear_last{
    clear:both;
    padding:20px;
}

/** ヘッダー **/

#header{
	width:100%;
	margin:0px;
	padding:0px;
    background-color:#ffffff;
    text-align:center;
}

.title{
    width:1024px;
    margin:0px auto;
}
@media screen and (max-width: 800px) {
.title {
    width:100%;
}
}

#header h1{
	width:500px;
	margin:0px;
	padding-top:10px;
    float:left;
}
@media screen and (max-width: 800px) {
#header h1 {
    float:none;
    margin:0px auto;
}
#header img {
    width:300px;
    float:none;
    margin:0px auto;
    padding:0px;
}
}
#header p{
	margin:0px;
	padding:30px 0px 0px 0px;
}
@media screen and (max-width: 800px) {
#header p {
    padding:0px;
    display:none;
}
}

.tel {
    display:inline-block;
    vertical-align: middle;
    width:500px;
}

.large_text{
    font-size:16pt;
    line-height:30px;
}
.middle_text{
    font-size:12pt;
}



/** メインbackground **/
#main_bg {
    width:100%;
}



/** トップコメント **/

#top_comment {
    width:1024px;
    margin:0px auto;
    padding:10px 0px;
}
@media screen and (max-width: 800px) {
#top_comment {
    width:100%;
}
}

#top_comment h1 {
    font-size:20pt;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight:bold;
}
@media screen and (max-width: 800px) {
#top_comment h1 {
    font-size:14pt;
}
}

#top_comment p {
    font-size:16pt;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
@media screen and (max-width: 800px) {
#top_comment p {
    font-size:12pt;
}
}



/** メニューボタン **/
.menu-container {
  margin: 0;
}

.menu-container .menu {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-container .menu .menu-item {
  flex: 1;
}

.menu-container .menu .menu-item a {
  border: 1px solid #ccc;
  border-right: none;
  color: #666666;
  display: block;
  padding: 15px 0px 10px 0px;
  text-align: center;
  text-decoration: none;
  background: #FFFFFF;
}

.menu-container .menu .menu-item a:hover {
  color: #666666;
  background: #e6f8ff;
}

.menu-container .menu .menu-item:last-child a {
  border-right: 1px solid #ccc;
}

@media screen and (max-width: 800px) {
  .menu-container .menu {
    flex-wrap: wrap;
    width: 100%;
  }
  .menu-container .menu .menu-item {
    flex: auto;
    width: 33.33333333%;
  }
  .menu-container .menu .menu-item:nth-child(3n) a {
    border-right: 1px solid #ccc;
  }
  .menu-container .menu .menu-item:nth-child(n + 4) a {
    border-top: none;
  }
}






/** メインボディ **/

.bg_blue{
    width:100%;
    background-color:#2e3192;
    clear:left;
    margin-bottom:40px;
}

.bg_w{
    background-color:#ffffff;
}

#main_body {
    background-image:url(../images/bg.png);
    background-repeat:repeat;
}

    
#main_body h1 {
    width:1014px;
    text-align:left;
    padding:10px 0px 3px 10px;
    margin:0px auto;
    color:#ffffff;
    font-size:16pt;
}

@media screen and (max-width: 800px) {
#main_body h1 {
    width:100%;
}
}


.body{
    width:1024px;
    margin:0px auto 0px auto;
    text-align:center;
	padding-bottom: 40px;
}
@media screen and (max-width: 800px) {
.body {
    width:100%;
}
}


#comment{
	width:1012px;
    padding:0px 6px 0px 6px;
    margin:0px;
}
#comment h3{
    padding:0px 20px 0px 20px;
    margin:0px;
	color:#FFFFFF;
	background-color: #FF7072;
	text-align: left;
	font-size:18px;
	line-height: 180%;
}
#comment h4{
    padding:0px 20px 0px 20px;
	margin:0px;
	background-color: #FFFFFF;
	font-size:18px; 
	text-align: left;
	line-height: 180%;
}
@media screen and (max-width: 800px) {
#comment{
	width:500px;
    padding:0px 6px 0px 6px;
    margin:0px;
	float:none;
	margin:0px auto;
}
}

#policy{
	width:1012px;
    padding:20px 6px 20px 6px;
	background-color: #FFFFFF;
}
#policy h3{
    padding:0px 20px 0px 20px;
    margin:40px 0px 0px 0px;
	text-align: left;
	border-bottom: solid 3px #258DEF;
	font-size:22px;
	line-height: 180%;
}
#policy h4{
    padding:0px 20px 0px 20px;
	margin:0px;
	font-size:18px; 
	text-align: left;
	line-height: 180%;
}
@media screen and (max-width: 800px) {
#policy{
	width:500px;
	padding:20px 6px 20px 6px;
    margin:0px;
	float:none;
	margin:0px auto;
}
}

#topics{
	width:1012px;
    padding:0px 6px 0px 6px;
    margin:0px;
}

#topics h3{
	padding:0px 20px 0px 20px;
    margin:0px;
	color:#FFFFFF;
	background-color: #FF7072;
	text-align: left;
	font-size:18px;
	line-height: 180%;
}

@media screen and (max-width: 800px) {
#topics{
	width:500px;
    padding:0px 6px 0px 6px;
    margin:0px;
	float:none;
	margin:0px auto;
}
}






.body_box1{
    width:500px;
    padding:0px 6px 0px 6px;
    margin:0px;
    float:left;
    clear:left;
}
@media screen and (max-width: 800px) {
.body_box1 { 
    float:none;
    margin:0px auto;
}
}

.body_box2{
    width:500px;
    padding:0px 6px 0px 6px;
    margin:0px;
    float:left;
}
@media screen and (max-width: 800px) {
.body_box2 {
    margin:0px auto;
    float:none;
}
}

.body_box3{
    width:1012px;
    padding:0px 6px 0px 6px;
    margin:0px;
    float:none;
}
@media screen and (max-width: 800px) {
.body_box3 {
	width:500px;
    margin:0px auto;
}
}

#main_body h2 {
    width:480px;
    text-align:left;
    padding:10px 0px 0px 20px;
    margin:0px;
    color:#2e3192;
    font-size:20pt;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight:bold;
	
}

.callink{
	text-decoration: none;
}

#main_body p {
    width:100%;
    text-align:left;
    padding:10px 0px 40px 20px;
    margin:0px;
    color:#000000;
    font-size:14pt;
}

.body_img {
    display:block;
}

.clear {
        float:none;
}



/** 電子チケット **/



.tiket_orange_l {
	font-size: 20px;
	padding: 25px 0px 25px 75px;
	width: 170px;
	margin-bottom: 10px;
	display: block;
	background-image: url("../images/logo_yokujou.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-color:#FF8600;
	color:#FFFFFF;
	float: left;
    text-decoration: none;
	font-weight:bold;
}

.tiket_blue_r{
	font-size: 20px;
	padding: 25px 0px 25px 75px;
	width: 170px;
	margin-bottom: 10px;
	display: block;
	background-image: url("../images/logo_pool.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-color:#0B82FF;
	color:#FFFFFF;
	float: right;
    text-decoration: none;
	font-weight:bold;
}

.tiket_red_lr{
	font-size: 24px;
	padding: 10px 0px;
	margin-bottom: 10px;
	display: block;
	width: 500px;
	background-color:#02AC75;
	color:#FFFFFF;
	float: left;
    text-decoration: none;
	font-weight:bold;
}

/** 温泉成分表 **/
#seibun table {
    width:500px;
    margin:0px auto;
    padding:0px;
    border-collapse:collapse;
    
}

#seibun th {
    width:60px;
    padding:5px 10px 0px 10px;
    border:solid 1px #a84600;
    text-align:center;
    border-collapse:collapse;
    background-color:#ffdabf;
}

#seibun td {
    padding:5px 10px 0px 10px;
    border:solid 1px #a84600;
    text-align:left;
    border-collapse:collapse;
    background-color:#ffffff;
}

#seibun caption {
    font-size:14pt;
    font-weight:bold;
    color:#a84600;
}


/** 料金表 **/
#ryoukin table {
	width:500px;
    margin:10px auto 20px auto;
    padding:0px;
    border-collapse:collapse;
}

#ryoukin th {
    padding:5px 0px 0px 0px;
    border:solid 1px #666666;
    text-align:center;
    color:#666666;
    line-height:110%;
    background-color:#ffffff;
    font-weight:normal;
}

#ryoukin td {
    padding:5px 0px 0px 0px;
    border:solid 1px #666666;
    text-align:center;
    color:#666666;
    line-height:110%;
}

.ryoukin12 {
    background-color:#ffdabf;
}
.ryoukin13 {
    background-color:#caf0ff;
}

#ryoukin caption {
    font-size:14pt;
    font-weight:bold;
    color:#666666;
    text-align:left;
}



/** ユーティリティ **/


.smalltext {
    font-size:10pt;
	line-height: 14px;;
}

.smalltext12 {
    font-size:12pt;
	line-height: 16px;;
}


.textbox{
	border:solid 1px #000000;
	background-color:rgba(255,255,255,0.7);
	color: #222222;
	text-align: left;
	padding: 20px;
	margin: 0px auto 40px auto;
}



/** リンク **/

#link img{
	margin: 5px 0px 5px 10px;
	display: block;
	
    float:left;
}






.bg_hantoumei {
    background-color:rgba(255,255,255,0.5);
    margin-bottom:10px;
}


#shisetsugaiyo {
    background-color:rgba(255,255,255,0.5);
}

#shisetsugaiyo table {
    border-collapse:separate;
    border-spacing:20px;
}

#shisetsugaiyo th {
    font-size:14pt;
	width: 60px;
    text-align:center;
    font-weight:normal;
    border-right:solid #455cff 3px;
    margin-bottom:18px;
    padding:15px 20px 5px 0px;
}
#shisetsugaiyo td {
    font-size:14pt;
    text-align:left;
    padding-top:10px;
    height:60px;
}



#u_menu {
    font-size:12pt;
    background-color:#2e3192;
    color:#ffffff;
    padding:10px 0px;
}
@media screen and (max-width: 800px) {
#u_menu {
    font-size:12pt;
}
}

#u_menu a {
    color:#ffffff;
}


#copyright {
    font-size:12pt;
    background-color:#ffffff;
}

.text-highlight {
    color: black;
    background-color: yellow;
  }
  .line {
    text-decoration: underline solid red;
  }