/* default

------------------------*/



body,div,dl,dt,dd,ul,li,ol,li,

h1,h2,h3,h4,h5,form,p,table,th,td,

address,input{

	margin:0;

	padding:0;

}

	

a img,img{

	border:0;

}



table{

    border-collapse:collapse;

   	border-spacing:0;

}

	

caption,th{

    text-align:left;

}

	

ul,li,ol,li{

	list-style:none;

}



a{

	outline:none;

	text-decoration:underline;

	overflow: hidden;

}



a:hover{

	text-decoration:none;

}





a:hover .onn{ opacity:0.8; filter:alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; }



/* clearfix

------------------------*/



/* clearfix */

.clearfix:after {  

  content: ".";   

  display: block;   

  height: 0;   

  clear: both;   

  visibility: hidden;  

}  

  

.clearfix { display: inline-table; }  

  

/* Hides from IE-mac \*/  

* html .clearfix { height: 1%; }  

.clearfix { display: block; }  

#end {

	clear: both;

	float: none;

}



/* End hide from IE-mac */  





/* common

------------------------*/



.r_txt{

	text-align:right !important;	

}



.l_txt{

	text-align:left !important;	

}

	

.c_txt{

	text-align:center !important;	

}







body {

	background-color: #000000;

	background-image: url(../img/bg1.jpg);

	background-repeat: repeat;

}

#wrapper {

	background-image: url(../img/bg.jpg);

	background-repeat: no-repeat;

	width: 1400px;

	margin-right: auto;

	margin-left: auto;

	height: 1000px;

}

#header {

	width: 1100px;

	margin-right: auto;

	margin-left: auto;

	background-image: url(../img/header_bgg.jpg);

	background-repeat: no-repeat;

	height: 111px;

}

#head .logo {

	float: left;

	height: 111px;

	width: 315px;

	margin-left: 50px;

}

#head .logo h1 a {

	background-image: url(../img/logo.jpg);

	background-repeat: no-repeat;

	display: block;

	height: 111px;

	width: 315px;

	text-indent: -9999px;

}



#head .navi {

	float: right;

	width: 450px;

	background-image: url(../img/navi.jpg);

	background-repeat: no-repeat;

	height: 28px;

	margin-top: 25px;

	margin-right: 45px;

}

#head .navi li {

	float: left;

	text-indent: -9999px;

}

#head .navi .bt0 a {

	display: block;

	height: 28px;

	width: 50px;

}

#head .navi .bt0 a:hover {

	display: block;

	height: 28px;

	width: 50px;

	background-image: url(../img/navi.jpg);

	background-repeat: no-repeat;

	background-position: 0px -28px;

}

#head .navi .bt1 a {

	display: block;

	height: 28px;

	width: 73px;

	margin-left: 14px;	

}

#head .navi .bt1 a:hover {

	display: block;

	height: 28px;

	width: 73px;

	background-image: url(../img/navi.jpg);

	background-repeat: no-repeat;

	background-position: -64px -28px;

}

#head .navi .bt2 a {

	display: block;

	height: 28px;

	width: 65px;

	margin-left: 17px;

}

#head .navi .bt2 a:hover {

	display: block;

	height: 28px;

	width: 65px;

	background-image: url(../img/navi.jpg);

	background-repeat: no-repeat;

	background-position: -154px -28px;

}

#head .navi .bt3 a {

	display: block;

	height: 28px;

	width: 50px;

	margin-left: 22px;

}

#head .navi .bt3 a:hover {

	display: block;

	height: 28px;

	width: 50px;

	background-image: url(../img/navi.jpg);

	background-repeat: no-repeat;

	background-position: -241px -28px;

}

#head .navi .bt4 a {

	display: block;

	height: 28px;

	width: 65px;

	margin-left: 18px;

}

#head .navi .bt4 a:hover {

	display: block;

	height: 28px;

	width: 65px;

	background-image: url(../img/navi.jpg);

	background-repeat: no-repeat;

	background-position: -309px -28px;

}

#head .navi .bt5 a {

	display: block;

	height: 28px;

	width: 60px;

	margin-left: 16px;

}

#head .navi .bt5 a:hover {

	display: block;

	height: 28px;

	width: 60px;

	background-image: url(../img/navi.jpg);

	background-repeat: no-repeat;

	background-position: -390px -28px;

}



#main_img {

	width: 1000px;

	margin-top: 20px;

	margin-right: auto;

	margin-bottom: 20px;

	margin-left: auto;

}

#container {

	width: 1000px;

	margin-right: auto;

	margin-left: auto;

	margin-bottom: 20px;

}

#container #left {

	float: left;

}

#container #right {

	float: right;

	width: 683px;

}

#right #center {

	float: left;

	width: 368px;

}

#center .bt_02 {

	margin-bottom: 6px;

}

#center .bt_03 {

	margin-bottom: 6px;

}



#right #in_right {

	float: right;

	width: 296px;

	background-color: #FFFFFF;

	height: 342px;

}

#box_a {

	padding: 4px;

	border: 1px solid #CCCCCC;

	margin-right: 10px;

	margin-bottom: 10px;

	margin-left: 10px;

}

#box_a .text_a {

	font-size: 13px;

	color: #333333;

	line-height: 140%;

}

#box_a .text_a_date {

	font-size: 12px;

	color: #666666;

	display: block;

	text-align: right;

	margin-top: 10px;

}



#box_b {

	padding: 4px;

	border: 1px solid #CCCCCC;

	margin-right: 10px;

	margin-bottom: 10px;

	margin-left: 10px;

}

#cont .img {

	display: block;

	height: 70px;

	width: 80px;

	padding: 2px;

	border: 1px solid #CCCCCC;

	margin-right: 6px;

	margin-bottom: 6px;

	float: left;

	text-align: center;

	vertical-align: middle;

}



#box_a .text_b {

	font-size: 13px;

	color: #333333;

	line-height: 140%;

	float: right;

	display: block;

	width: 150px;

}

#box_a .text_b_date {

	font-size: 12px;

	color: #666666;

	display: block;

	text-align: right;

	margin-top: 10px;

}







#footer {

	text-align: center;

	margin-bottom: 20px;

}

#footer h4 {

	color: #FFFFFF;

	padding-top: 10px;

	padding-bottom: 20px;

	font-size: 14px;

	font-weight: normal;

	line-height: 120%;

}



#page_area {

	width: 800px;

	margin-bottom: 20px;

	margin-right: auto;

	margin-left: auto;

	background-repeat: no-repeat;

	background-color: #282828;

	background-image: url(../img/cont_bg3.jpg);

	background-position: bottom;

	border-top-width: 1px;

	border-right-width: 1px;

	border-bottom-width: 6px;

	border-left-width: 1px;

	border-top-style: solid;

	border-right-style: solid;

	border-bottom-style: solid;

	border-left-style: solid;

	border-top-color: #422100;

	border-right-color: #422100;

	border-bottom-color: #422100;

	border-left-color: #422100;

	padding-top: 40px;

	padding-right: 40px;

	padding-bottom: 80px;

	padding-left: 40px;

}

#page_area h2 {

	margin-bottom: 20px;

	border-bottom-width: 1px;

	border-bottom-style: solid;

	border-bottom-color: #FFFFFF;

	padding-bottom: 4px;

	padding-left: 4px;

	font-size: 22px;

	color: #FFFFFF;

}



#page_area p {

	font-size: 15px;

	color: #FFFFFF;

	line-height: 200%;

}

#access_box #map {

	float: left;

	border: 1px solid #FFFFFF;

	height: 420px;

	width: 470px;

}

#address {

	float: right;

	width: 300px;

}

#address h3 {

	font-size: 18px;

	font-weight: bold;

	color: #FFFFFF;

	border-bottom-width: 1px;

	border-bottom-style: dotted;

	border-bottom-color: #FFFFFF;

	padding-bottom: 2px;

	padding-top: 2px;

}

#concept_02 {

	background-image: url(../img/concept_02.jpg);

	background-repeat: no-repeat;

	height: 727px;

	width: 660px;

	padding-top: 50px;

	padding-left: 70px;

	padding-right: 70px;

	padding-bottom: 50px;

}

#concept_02 p {

	font-size: 18px;

	color: #171717;

	line-height: 200%;

}

#contentsarea {

	width: 780px;

	margin-right: auto;

	margin-left: auto;

	margin-top: 10px;

}

#gallery li {

	width: 210px;

	display: block;

	float: left;

	height: 250px;

	border: 1px solid #FFFFFF;

	margin-right: 26px;

	margin-left: 26px;

	margin-bottom: 40px;

}

#gallery .img {

	width: 190px;

	height: 170px;

	background-color: #CCCCCC;

	display: block;

	margin-right: auto;

	margin-left: auto;

	margin-top: 10px;

}

#gallery .g_title {

	display: block;

	width: 190px;

	margin-top: 5px;

	margin-right: auto;

	margin-left: auto;

	font-size: 15px;

	text-decoration: none;

}

#gallery2 ul {

	width: 580px;

	margin-right: auto;

	margin-left: auto;

}

#gallery2 #g_title {

	font-size: 16px;

	color: #000000;

	padding: 6px;

	margin-bottom: 30px;

	background-color: #CCCCCC;

}

#gallery2 .img {

	width: 140px;

	display: block;

	height: 120px;

	background-color: #FFFFFF;

	float: left;

	border: 1px solid #666666;

	margin-top: 10px;

	margin-left: 10px;

}

#gallery2 .title {

	font-size: 14px;

	color: #333333;

	float: right;

	width: 370px;

	display: block;

	margin-top: 10px;

	margin-right: 10px;

}

#gallery2 .tt {

	font-size: 17px;

	color: #333333;

	display: block;

	margin-bottom: 10px;

	border-bottom-width: 1px;

	border-bottom-style: dotted;

	border-bottom-color: #664500;

	padding-bottom: 6px;

}

#gallery2 .com {

	font-size: 15px;

	line-height: 140%;

	color: #333333;

}







#gallery2 li {

	width: 560px;

	display: block;

	height: 140px;

	margin-bottom: 40px;

	background-image: url(../img/gallery_box_bg.jpg);

	background-repeat: no-repeat;

	padding: 10px;

}

#gallery2 a {

	text-decoration: none;

}

#ga_box {

	width: 749px;

	margin-right: auto;

	margin-left: auto;

	margin-bottom: 40px;

	margin-top: 20px;

}

#ga_title {

	font-size: 14px;

	padding-top: 20px;

	color: #333333;

	border-bottom-width: 1px;

	border-bottom-style: solid;

	border-bottom-color: #666666;

	width: 670px;

	padding-bottom: 10px;

	margin-right: auto;

	margin-left: auto;

}





#ga_upp {

	background-image: url(../img/ga_bg_head.jpg);

	background-repeat: no-repeat;

	height: 5px;

	width: 749px;

}

#ga_mid {

	background-image: url(../img/ga_bg_mid.jpg);

	background-repeat: repeat-y;

	width: 749px;

}

#ga_under {

	background-image: url(../img/ga_bg_foot.jpg);

	background-repeat: no-repeat;

	height: 6px;

	width: 749px;

}

#ga_img {

	height: 200px;

	padding-top: 20px;

	padding-right: 40px;

	padding-bottom: 30px;

	padding-left: 40px;

}

#ga_img_left {

	height: 220px;

	width: 300px;

	border: 1px solid #CCCCCC;

	float: left;

	text-align: center;

}

#ga_img_right {

	height: 220px;

	width: 300px;

	border: 1px solid #CCCCCC;

	float: right;

	text-align: center;

}

#news_img {

	margin-top: 20px;

	margin-bottom: 20px;

	text-align: center;

}

#pan a{

	font-size: 13px;

	color: #FFFFFF;

}

#pan {

	font-size: 13px;

	color: #FFFFFF;

}







#ga_text {

	line-height: 140%;

	color: #333333;

	font-size: 14px;

	padding-top: 10px;

	padding-right: 40px;

	padding-bottom: 20px;

	padding-left: 40px;

}

#menu_box {

	width: 800px;

	margin-top: 10px;

	margin-bottom: 10px;

}

#menu_box .main_title {

	background-image: url(../img/menu_bar.jpg);

	background-repeat: no-repeat;

	height: 30px;

	width: 760px;

	display: block;

	padding-left: 40px;

	color: #333333;

	font-size: 15px;

	margin-bottom: 10px;

}

#menu_box .sub_title {

	width: 700px;

	margin-right: auto;

	margin-left: auto;

	border-bottom-width: 1px;

	border-bottom-style: dotted;

	border-bottom-color: #FFFFFF;

	margin-top: 10px;

	margin-bottom: 10px;

}

#menu_box .menu_title {

	width: 700px;

	margin-right: auto;

	margin-left: auto;

	margin-bottom: 10px;

}

#menu_box .menu_text {

	width: 600px;

	margin-right: auto;

	margin-left: auto;

}

#menu_photo {

	width: 600px;

	margin-right: auto;

	margin-left: auto;

	margin-bottom: 10px;

}

/* =========================
   Responsive patch (add at end of main.css)
   ========================= */

/* 画像がはみ出さない */
img {
  max-width: 100%;
  height: auto;
}

/* wrapper/各ブロックが固定幅なら、まずはスマホで100%に寄せる */
#wrapper,
#header,
#head,
#container,
#main_img,
#footer {
  max-width: 100%;
}

/* blueberry スライダーの画像も幅に追従 */
.blueberry,
.blueberry .slides,
.blueberry .slides li,
.blueberry .slides li img {
  width: 100%;
  height: auto;
}

/* clearfixが効いてない環境用の保険 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* =========================
   Breakpoint: tablet and below
   ========================= */
@media (max-width: 960px) {
  /* 外側に余白を作って読みやすく */
  #wrapper {
    width: 100%;
  }

  #container {
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* 左右2カラムを縦積みに */
  #left,
  #right,
  #center,
  #in_right {
    float: none !important;
    width: 100% !important;
  }

  /* ボタン画像が並んでる箇所（#center）を“横並び→折り返し”に */
  #center {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* .bt_02/.bt_03 を等幅っぽく */
  #center .bt_02,
  #center .bt_03 {
    width: calc(50% - 5px);
    box-sizing: border-box;
  }

  /* クリック領域を確保 */
  #center a {
    display: block;
  }
}

/* =========================
   Breakpoint: mobile
   ========================= */
@media (max-width: 768px) {
  /* ヘッダー内を縦積みに */
  #head {
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px 12px;
  }

  .logo {
    float: none !important;
    width: 100% !important;
    margin-bottom: 10px;
  }

  .navi {
    float: none !important;
    width: 100% !important;
  }

  /* メニューを折り返し表示（画像ボタン/テキスト問わず） */
  .navi ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .navi li {
    width: calc(50% - 4px);
  }
  .navi li a {
    display: block;
    text-align: center;
    padding: 10px 8px;
    box-sizing: border-box;
  }

  /* トップの大ボタン（左）も幅100% */
  #left .bt_01 {
    width: 100% !important;
    margin-bottom: 20px;
  }

  /* #centerのボタンはスマホは1列の方が押しやすい */
  #center .bt_02,
  #center .bt_03 {
    width: 100%;
  }

  /* ニュース枠：jScrollPaneをやめた時も自然にスクロールできるように */
  .scroll-pane {
    height: auto !important;
    max-height: 55vh; /* 画面の半分ちょい */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* フッターの文字が詰まる場合に少し余白 */
  #footer {
    padding: 12px;
    box-sizing: border-box;
  }
  #footer h4 {
    margin: 8px 0 0;
    line-height: 1.6;
  }
}

/* =========================
   Responsive override (add at END)
   ========================= */

/* まず横はみ出しを止める */
html, body {
  overflow-x: hidden;
}

/* 画像が親幅を超えない */
img {
  max-width: 100%;
  height: auto;
}

/* --- 960px以下（タブレット?） --- */
@media (max-width: 960px) {

  /* 固定幅を解除して中央寄せ */
  #wrapper {
    width: 100%;
    max-width: 1400px; /* PC最大は維持 */
    height: auto;      /* 1000px固定を解除 */
    background-size: cover; /* 背景が気になるなら contain に */
  }

  #header,
  #main_img,
  #container {
    width: 100%;
    box-sizing: border-box;
  }

  /* 中身に少し余白 */
  #main_img,
  #container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 右カラム幅固定を解除 */
  #container #right {
    width: 100%;
  }

  /* ニュース枠など高さ固定がある場合の事故防止 */
  #right #in_right {
    height: auto;
    max-height: 420px; /* お好みで */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- 768px以下（スマホ） --- */
@media (max-width: 768px) {

  /* ヘッダー：ロゴとナビを縦積みへ */
  #header {
    height: auto;
    background-size: cover;
  }

  #head .logo {
    float: none;
    width: 100%;
    margin-left: 0;
    display: flex;
    justify-content: center;
  }

  /* ロゴ画像（背景）を縮めたい場合：そのままでもOK */
  #head .logo h1 a {
    transform: scale(0.9);
    transform-origin: center;
  }

  /* ナビの“背景画像1枚”前提をやめて、折り返し表示 */
  #head .navi {
    float: none;
    width: 100%;
    height: auto;
    margin: 10px 0 0;
    background-image: none; /* ←ここが肝。画像ナビをスマホで捨てる */
  }

  #head .navi ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  #head .navi li {
    float: none;
    text-indent: 0; /* 文字を表示する */
  }

  /* 各ボタンは “押しやすいテキストボタン” にする */
  #head .navi li a {
    width: auto !important;
    height: auto !important;
    margin-left: 0 !important;
    padding: 10px 12px;
    display: block;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
  }

  /* hover画像切替も無効化（スマホはhoverないので） */
  #head .navi .bt0 a:hover,
  #head .navi .bt1 a:hover,
  #head .navi .bt2 a:hover,
  #head .navi .bt3 a:hover,
  #head .navi .bt4 a:hover,
  #head .navi .bt5 a:hover {
    background-image: none;
    background-position: 0 0;
  }

  /* 2カラム→1カラム（縦積み） */
  #container #left,
  #container #right,
  #right #center,
  #right #in_right {
    float: none !important;
    width: 100% !important;
  }

  /* 右側の3つボタンは2列→1列にしたいなら */
  #right #center {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #center .bt_02,
  #center .bt_03 {
    margin-bottom: 0;
  }

  /* 白いニュース枠は下に回すので余白 */
  #right #in_right {
    margin-top: 12px;
  }
}

/* =========================
   Mobile Hamburger
   ========================= */

.menu-toggle {
  display: none;
}

/* スマホ */
@media (max-width: 768px) {

  /* ヘッダー黒背景 */
  #header {
    background: #000;
  }

  #head .navi {
    background: none; /* 画像ナビ消す */
    width: 100%;
    float: none;
    margin: 0;
    height: auto;
  }

  /* ハンバーガーボタン表示 */
  .menu-toggle {
    display: block;
    width: 100%;
    padding: 14px;
    background: #111;
    color: #fff;
    border: none;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
  }

  /* ナビ初期は非表示 */
  #head .navi ul {
    display: none;
    background: #000;
  }

  /* 展開時 */
  #head .navi.open ul {
    display: block;
  }

  /* ナビ項目を縦並び */
  #head .navi li {
    float: none;
    text-indent: 0; /* 文字表示 */
  }

  #head .navi li a {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px;
    display: block;
    background: #000;
    color: #fff;
    border-top: 1px solid #222;
    text-decoration: none;
  }

  /* hover画像無効 */
  #head .navi .bt0 a:hover,
  #head .navi .bt1 a:hover,
  #head .navi .bt2 a:hover,
  #head .navi .bt3 a:hover,
  #head .navi .bt4 a:hover,
  #head .navi .bt5 a:hover {
    background-image: none;
  }

}

/* =========================
   Mobile wrapper reset
   ========================= */

@media (max-width: 768px) {

  #wrapper {
    width: 100%;
    height: auto;
    background: #000; /* ← 黒ベースに */
    background-image: none; /* 背景画像消す */
  }

}

/* =========================
   Mobile: center alignment fix
   ========================= */
@media (max-width: 768px) {

  /* 中身ブロックを中央寄せしやすくする */
  #main_img,
  #container,
  #footer {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 画像ボタン系が左に寄るのを止める（決定打） */
  #container #left,
  #right #center,
  #right #in_right,
  .waku {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ボタン画像・サムネ画像を中央に */
  #container img,
  #right img {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* もし #container に text-align:left が効いてた場合の保険 */
  #container {
    text-align: center;
  }
  /* ただし中の文章は左寄せに戻す（白カードの読みやすさ用） */
  #in_right,
  #in_right * {
    text-align: left;
  }
}

/* =========================
   Header tel area (new)
   ========================= */

/* 初期は非表示（PCデザイン温存） */
.head-tel {
  display: none;
}

/* スマホだけ表示 */
@media (max-width: 768px) {

  /* ヘッダーの背景画像に焼き込みが残ってるなら消す（必要なら） */
  #header {
    background-image: none !important;
    background: #000;
    height: auto;
    padding-bottom: 10px;
  }

  .head-tel {
    display: block;
    margin: 10px 12px 0;
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,0.15);
    text-align: center;
  }

  .head-tel__note {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
  }

  .head-tel__num {
    display: inline-block;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.02em;
    color: #fff;
    text-decoration: none;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
  }
}

@media (max-width: 768px) {

  /* ロゴ→電話→メニューの流れを整える */
  #head {
    padding: 10px 12px 0;
    box-sizing: border-box;
  }

  .head-tel {
    display: block;
    margin: 8px 0 10px;   /* ← 上寄せ用 */
    padding: 10px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    text-align: center;
  }

  .head-tel__note {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
  }

  .head-tel__num {
    display: inline-block;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.02em;
    color: #fff;
    text-decoration: none;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
  }

  /* MENUボタンを電話の下に自然に接続 */
  .menu-toggle {
    margin-top: 0;
  }
}

/* =========================
   Force: head-tel hidden on PC
   ========================= */

/* PCは絶対に非表示 */
.head-tel{
  display: none !important;
}

/* スマホだけ表示 */
@media (max-width: 768px){
  .head-tel{
    display: block !important;
  }
}