@charset "utf-8";

* {
   margin:0px 0px 0px 0px;
   padding:0px 0px 0px 0px;
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
   font-weight：100;
   box-sizing: border-box;
}

.table_headline td.headline_mark,
img[src*="point02.gif"] {
    display: none !important;
}

html, body {
    width: 350px !important;
    margin: 0 auto !important; /* 画面の真ん中に寄せる */
}

body {
	-webkit-text-size-adjust:100%;
	font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;
}


img {
	max-width: 100%;
	height: auto;
    display: block !important;
    margin: 0 auto !important; /* 左右の余白を自動計算して中央へ */
}

a {text-decoration: none;}

a:hover img {
 opacity: 0.5;
}
 
object {width:350px;}

a img {
    transition: opacity 0.3s ease-out;}


li { 
 	margin:0px 0px 0px 0px;
 	list-style-type: none;
    display: inline-block;
}

.hbar {
	background-color: #f5f5f5;
	height: 30px;
	white-space: nowrap;
}

.hbarp {color: #f5f5f5;}


#out-line {
  width:350px;
  margin: 0px auto;
}

.line {
	border-width: 15px 0 0 0; /* 太さ */
	border-style: solid; /* 種類 */
	border-color: #000000; /* 色 */
}
	
.header {
	width: 350px;
	margin: 0px auto;
	padding: 0px 0px 10px 0px;
}

.navi{display:none;}

.mainbox {
	width: 350px;
	margin: 0px auto 0px auto;
}

.news{
	width:auto;
	height: auto;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
        justify-content: center !important;
        display: flex !important;
}

.newsbox {
	width:auto;
    font-size: 12px;
margin: 0 auto !important;   /* 左右の余白を自動計算して中央寄せ */
    text-align: center !important; /* テキストやインライン要素も中央揃えにする場合 */
}

.fb{
	width:350px;
	float: right;
	}

.footer {
	margin: 0px auto;
	padding-right:10px;
	background-image:url(../images/footerBG.jpg);
	width:350px;
}

.fbar{
    font-size: 8px;
	text-align:center;
	background-color: #f5f5f5;
	height: 50px;
}
	
.pop {
	display: none;
}

.imagebox {}

.imagebox2 {
	text-align:center;
	background-image: url(../images/textarea.png);
}

.imagebox3 {
	text-align:center;
	margin: 10px 0px 0px 0px;
}

.imagebox4 {
	float:right;
	margin: 10px 0px 0px 0px;
}

.main {
	margin:0 0 0 10px;
	/* background-color:#FFF2C8; */
}

p {
	padding-left: 10px;
	padding-top: 10px;
	line-height : 1.8;
	max-height: 100%;
	font-size: 18px; 
}

h1{
	color: #333333;
	font-weight: normal;
	font-size:14px;
	letter-spacing: 0.1em;
	text-align: center;
	line-height: 30px;
}

h2{
	margin-left: 50px;
	font-weight: normal;
	padding: 0 0 0 0px;
	font-size: 20px;
	line-height : 1.5;
}

h3{
	font-weight: normal;
	padding: 0 0 0 0px;
	font-size: 12px;
	line-height : 1.5;
}

h4{
	width:335px;
	font-weight: normal;
	padding: 0 0 0 0px;
	font-size: 18px;
	line-height : 1.5;
	border-bottom: solid 3px #00008b;
	position: relative;
}

h4:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #ff8c00;
	width: 30%;
}

.infotext {
	color:#008000;
	padding-left: 10px;
	padding-top: 10px;
	line-height : 1.8;
	letter-spacing: 0.1em;
	max-height: 100%;
	font-size: 18px; 
	font-weight: bold;
}

.infotext2  {
  color: #505050;/*文字色*/
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #dbebf8;/*背景色*/
  vertical-align: middle;/*上下中央*/
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

.infotext2:before {
  content: 'Q';
  color: #000000;
  margin-right: 8px;
}

.infotext3 {
	color:#000000;
	font-size:20px;
	letter-spacing: 0.1em;
	line-height:2.0;
}

.infotext4 {
	color:#008000;
	font-size:14px;
	letter-spacing: 0.1em;
	line-height:2.3;
}

.infotext5 {
	color:#ff1493;
	font-size:32px;
	letter-spacing: 0.1em;
	line-height:2.3;
}

#wrap{
    width: 100% !important;
    max-width: 350px !important;
    margin: 0 auto !important;  /* 左右自動で中央寄せ */
    float: none !important;
}
    
.smallimage {
    background-color : #fff;
    border: 1px solid #CCC;
    padding: 3px;
    margin: 10px 5px 0 0;
}

th {
	text-align: left;
	padding-left: 10px;
	font-size:16px;
	line-height : 1.8;
	letter-spacing: 0.1em;
}

.table{font-size: 8px;}

.table01{
	font-weight:600;
	margin-left: 45px;
	font-size:16px;
	line-height : 3.5;
	color: #000000;
}

.table02{
	width: 350px;
	margin: 10px;
	border-collapse: collapse;
}

.table02 td{
	font-size:18px;
	text-align:center;
	border-bottom: #ff8c00 3px solid;
	border-left: blue 5px solid;
}

.table03 {
	width:100%;
}

.table03 th {
	width:35%;
	background: #dcdcdc;
	text-align: left;
	padding: 10px;
	font-weight: normal;
	border: 1px #000000 solid;
}

.table03 td {
	text-align: left;
	padding: 10px;
	border: 1px #000000 solid;
}

.table04 {
	border-collapse: collapse;
	width:100%;
}
.table04 th.t_top {
    border-top: #ff8c00 4px solid;
}
.table04 th {
	width:65%;
	color: #dcdcdc;
	border-bottom: #e3e3e3 1px dotted;
	text-align: left;
	padding: 10px;
	font-weight: normal;
}
.table04 td.t_top {
	border-top: #b3b3b3 4px solid;
}
.table04 td {
	border-bottom: #e3e3e3 1px dotted;
	text-align: left;
	padding: 10px;
}

.table05 {
	border-collapse: collapse;
	width:100%;
}

.table05 th {
	width:20%;
	color: #696969;
	border-bottom: #e3e3e3 1px dotted;
	text-align: left;
	padding: 10px;
	font-weight: normal;
}

.table05 td {
	border-bottom: #e3e3e3 1px dotted;
	text-align: left;
	padding: 10px;
}

.table06 {
	padding: 10px 0px 0px 0px;
	vertical-align:top;
	line-height : 2.5;
}
.table06 th { vertical-align:top; padding: 7px 0px 0px 0px; }

.table07 {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* ロゴの入ったセルを縦並びにする */
.table07 th {
    display: block !important;
    width: 100% !important;
    max-width: 350px !important;
}

/* 電話番号と営業時間のセルも強制的に縦並びにして、はみ出しを防ぐ */
.table07 td {
    display: block !important;
    width: 100% !important;
    max-width: 350px !important;
    font-size: 12px; 
    text-align: center; /* スマホで見やすいように中央寄せに変更 */
    padding-top: 10px;  /* 画像同士がくっつかないように上に少し余白 */
}

/* HTML側の width="305" や "266" をCSS側から強制上書き */
.table07 img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 310px !important; /* スマホ画面内に綺麗に収まるサイズに調整 */
    margin: 0 auto !important;
}

.table08 {
    width:350px;
    font-size: 12px;
}

.table08 th {
    text-align:center;
	line-height : 1.3;
	width:  100px;
    font-size: 12px;
}

.table08 td {
	padding: 0px 0px 0px 0px; 
	width:auto;
	text-align:right;
    font-size: 10px;
}


.title {
	font-size:16px;
	color:#666666;
	line-height : 1.5;
	letter-spacing: 0.1em;
}

.menuLine {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 5px 0;
	border-color: #18986D;
	border-style:solid;
	color:#666666;
	line-height:140%;
	font-weight:bold;
	font-size:16px;
}

.spacer1 {line-height: 0.5em;}
.spacer2 {line-height: 1.5em;}
.spacer3{line-height: 3em;}
.spacer10{line-height: 35em;}

#formbox{color:#FFFFFF;
}

.formSubmitButton{
	margin:0 20px 20px;
	text-align:center;
	padding:20px;
	background:#f4f4f5;
	border:1px solid #e0e0e4;
}
input.text{
	width: 350px;
	font-size:100%;
	border-color:#A1A1A1 #E5E5E5 #E5E5E5 #A1A1A1;
	border-style:solid;
	border-width:1px;
	padding:2px;
}
textarea{
	width: 350px;
	font-size:100%;
	border-color:#A1A1A1 #E5E5E5 #E5E5E5 #A1A1A1;
	border-style:solid;
	border-width:1px;
	padding:2px;
}

#slideshow {
   position: relative;
   width:  340px; 
   height: 100px; 
}
#slideshow img {
   position: absolute;
   top: 0;
   left:0;
   z-index: 8;
   opacity: 0.0;
}
#slideshow img.active {
   z-index: 10;
   opacity: 1.0;
}
#slideshow img.last-active {
   z-index: 9;
}

.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;   
	clear: both;
	visibility:hidden;
}
.clearfix{
	display: inline-block;
}
	/* Hides from IE Mac */
* html .clearfix{
	height: 1%;
}
.clearfix{
	display:block;
}

iframe {max-width:100%;}




.hamburger {
  display : block;
  position: fixed;
  z-index : 25;
  right : 20px;
  top   : 20px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #BBBBBB;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}
/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

/* メニュー背景　*/
nav.globalMenuSp {
  position: fixed;
  z-index : 21;
  top  : 0;
  left : 0;
  color: #fff;
  background: rgba( 71,70,73,0.95 ); /* 文字が見えやすいように少し濃くしました */
  text-align: center;
  width: 100%;
  height: 100vh;
  transform: translateX(100%); /* 初期状態は右側に隠す */
  transition: transform 0.4s ease-in-out;
  padding-top: 80px; /* ハンバーガーボタンと文字が被らないように上に余白を追加 */
}
    
nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  display: block; /* 縦並びにするために必須の指定 */
  transition: .4s all;
}

nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}

nav.globalMenuSp ul li:hover {
  background: #555; /* 背景が白（#ddd）だと文字の白と同化するため暗い色に変更 */
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
  text-decoration: none;
  font-size: 18px; /* 押しやすいように文字サイズを調整 */
}

/* クリックでjQueryで追加・削除（重複と指定を整理） */
nav.globalMenuSp.active {
  display: block;
  transform: translateX(0%); /* 画面内に引っ張ってくる */
}


html, body, #out-line, .mainbox, #wrap {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 2. ページ内のすべてのテーブル構造を破壊して強制的に縦並びにする */
table, tr, th, td, tbody {
    display: block !important;
    width: 100% !important;
    max-width: 350px !important;
    box-sizing: border-box !important;
}

/* 3. すべての画像、スライドショー、埋め込み要素の右突き抜けを強制ストップ */
img, #slideshow, #slideshow img {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
}




.mainbox table img[src*="point01.gif"] {
    width: 15px !important;   /* HTMLに書かれている元の幅に指定 */
    height: 17px !important;  /* HTMLに書かれている元の高さに指定 */
    display: inline-block !important; /* 縦並びを解除して文字の横に並べる */
    margin: 0 !important;     /* 余計な中央寄せをリセット */
    vertical-align: middle;   /* 文字と高さを中央で揃える */
}

/* 2. マーク画像が入っているセル（th）が縦並びになっていたら横並びに戻す */
.mainbox table tr th:has(img[src*="point01.gif"]),
.mainbox table tr td:has(a[href*="index.htm"]) {
    display: table-cell !important; /* ブロック化を解除して横並びのセルに戻す */
    width: auto !important;
    vertical-align: middle;
}