@charset "utf-8";
body {
	font: 80%/1.9 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	background-color: #fff;
	margin: 0;
	padding: 0;
	color: #000;
}

/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
	padding: 0;
	margin: 0;
	list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
}

a img { 
	border: none;
}
a:link {
	color:#414958;
	text-decoration: underline; 
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}
.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

/* ~~ このコンテナが他のすべての div を囲み、パーセンテージに基づいた幅を指定します。~~ */
.container {
	width: 80%;
	max-width: 1000px;/* 最大幅 */
	min-width: 100px;/* 最小幅 */
	margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。.container の幅を 100% に設定した場合、これは必要ありません。 */
}

@media screen and (max-width: 768px) {
	.container{
	width: 90%;
	max-width: 1000px;/* 最大幅 */
	min-width: 100px;/* 最小幅 */
	margin: 0 auto;
		}
}

.menu_1 {
	width: 100%;
	max-width: 1000px;/* 最大幅 */
	min-width: 400px;/* 最小幅 */
	position: relative;
	height: 60px;
	margin: 0px auto 10px;
}
.menu_1t {
	padding: 0 20px 0 0;
	float:left;
}

/* ~~ ヘッダーには幅は指定されません。ヘッダーはレイアウトの幅全体まで広がります。ヘッダーには、ユーザー独自のリンクされたロゴに置き換えられるイメージプレースホルダーが含まれます。~~ */
.header {
	width: 100%;
	height: 100px;
	padding: 20px 0;
	display: table;
}
.head_rt{	/*ヘッダー用・ロゴ*/
	display: table-cell;
	width:auto;
	text-align: center;
}
.head_rt2{	/*ヘッダー用・電話番号*/
	display: table-cell;
	width: 280px;
	text-align: right;
	vertical-align: top;
}
.head_rt3{	/*ヘッダー用・左スペース*/
	display: table-cell;
	width: 280px;
	text-align: right;
	vertical-align: top;
}
.head_title{
   width: 100%;
   max-width: 237px;
   height: auto;
}
.head_ph{
   width: 100%;
   max-width: 280px;
   height: auto;
}

/* ~~ これはレイアウト情報です。~~ 

1) 余白は、div の上部または下部にのみ配置されます。この div 内のエレメントには、それ自体に余白があるので、ボックスモデル計算を行う必要がありません。ただし、div 自体に両側の余白やボーダーを指定した場合、その値が加算されたものが合計幅になることに注意してください。div 内のエレメントの余白を削除し、さらにその div 内に、全体のデザインに必要な幅や余白を指定していない 2 つ目の div を追加することもできます。

*/
.content {
	padding: 10px 0;
}

/* ~~ このセレクターグループは、.content 内のリストに領域間隔を指定します。~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* この余白は、上述の見出しと段落ルールの右の余白を表します。下の余白はリスト内の他のエレメントとの間隔用に配置され、左の余白はインデント作成用に配置されています。これは必要に応じて調整できます。 */
}

/* ~~ フッター ~~ */
.footer {
	padding: 20px 0 140px 0;
	background-color: #333;
	color: #fff;
}
.footer a:link {
	color:#000;
	text-decoration: none;
}
.footer a:hover,
.footer a:active,
.footer a:focus {
	color:#fff;
	text-decoration: none;
}

/* ~~ その他の float/clear クラス ~~ */


.flt { /*フロートをまとめる*/
	position: relative;
	margin: 0 0 70px 0;
}
.flt0 { /*フロートをまとめる_コンテンツ1つ目用*/
	position: relative;
	margin: 10px 0 50px 0;
}

.sub{
	position: relative;
	display: block;
	z-index: -2;
	background-image: url(../img/about_bg03l.jpg);
	background-position: left center;
	background-repeat: no-repeat;
	background-color: transparent;
	height: 350px;
	margin: 0 0 80px;
}
.sub_f{
	position: relative;
	display: block;
	z-index: -2;
	background-image: url(../img/about_bg03l.jpg);
	background-position: left center;
	background-repeat: no-repeat;
	background-color: transparent;
	height: 350px;
	margin: 0 0 80px;
}
.sub_img{
	position: absolute;
	top: 0;
	left: 40%;
	right: 0;
	bottom: 0;
	margin: -70px auto 0;
	width: 99%;
	height: 99%;
	max-width: 501px;/* 最大幅 */
	min-width: 200px;/* 最小幅 */
	max-height: 501px;/* 最大幅 */
	min-height: 200px;/* 最小幅 */
}

.sub2{
	display: block;
	background-image: url(../img/bg01L.jpg);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding: 50px 0 0 10px;
}

.sub3{
	position: static;
	background-color: #4d4d4d;
	height: 380px;
	z-index: -3;
	margin: 0;
}

/* お問い合わせ：マップ部分：リンク色 */
.sub3 a:link {
	color:#fff;
	text-decoration: underline; 
}
.sub3 a:visited {
	color: #fff;
	text-decoration: underline;
}
.sub3 a:hover, a:active, a:focus { 
	text-decoration: none;
}

.fltrt1 {  /* 2分割用右 */
	position: relative;
	z-index: -1;
	display: block;
	margin-left: auto;
	padding: 0 0 0 10px;
	background-color: transparent;
	max-width: 500px;/* 最大幅 */
	min-width: 100px;/* 最小幅 */
	text-align: right;
}

.fltrt0 {  /* 2分割用右 */
	position: relative;
	z-index: 2;
	display: block;
	margin-left: auto;
	background-color: transparent;
	width: 100%;
	max-width: 500px;/* 最大幅 */
	min-width: 100px;/* 最小幅 */
	text-align: right;
}
.fltrt2 {  /* 2分割用右 */
	position: relative;
	z-index: 2;
	float: right;
	display: block;
	margin: -50px auto 0;
	background-color: transparent;
	width: 45%;
	max-width: 500px;/* 最大幅 */
	min-width: 100px;/* 最小幅 */
	text-align: right;
}
.fltlft2 { /* 2分割用左 */
	position: relative;
	z-index: 2;
  	float: left;
	display: block;
	margin: -50px auto 0;
	background-color: transparent;
	width: 45%;
	max-width: 500px;/* 最大幅 */
	min-width: 100px;/* 最小幅 */
	text-align: left;
}
.fltmap3 { /* 2分割用・MAP */
	position: relative;
	z-index: 2;
	float: left;
	display: inline-block;
	padding: 0 10px 0 0;
	margin: 0 auto 0;
	width: 48%;
	max-width: 500px;/* 最大幅 */
	min-width: 100px;/* 最小幅 */
	text-align: center;
	color: #fff;
}
.fltmap3t { /* 2分割用・MAP */
	display: inline-block;
	text-align: left;
	margin: 0 auto 20px;
}
.fltmap4 { /* 2分割用・MAP */
	position: relative;
	z-index: 2;
	float: left;
	display: inline-block;
	padding: 0;
	margin: 0 auto 0;
	width: 48%;
	max-width: 500px;/* 最大幅 */
	min-width: 100px;/* 最小幅 */
	text-align: center;
	color: #fff;
}
.fltmapimg {
   width: 100%;
   max-width: 300px;
   height: auto;
}
.flttxt { /* 2分割用文字 */
	width: 70%;
	z-index: 3;
	margin: 50px 0;
	padding: 20px 10px;
	background: rgba(255,255,255,0.7);
}
.flttxtr { /* 2分割用文字 */
	width: 70%;
	z-index: 3;
	margin: 50px 0 0 auto;
	padding: 20px 10px;
	background: rgba(255,255,255,0.7);
}
.flttxt0 { /* 2分割用文字 */
	position: relative;
	z-index: 3;
	margin: -220px 0 0 0;
	padding: 30px 0 0 0;
	background-color: transparent;
	text-shadow: 0 0 5px #fff,
				-2px 0 5px #fff,
				0 -2px 5px #fff;
}

.clearfloat { /*フロート解除*/
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* balloon-4 bottom-left */
.balloon {
	position: relative;
	display: inline-block;
	padding: 5px 30px 0 30px;
	min-width: 115px;
	height: 80px;
	color: #1a1a1a;
	text-align: center;
	background: #fff;
	border-radius: 60px;
	margin: -55px auto 40px;
	vertical-align: middle;
}
.balloon:before {
	content: "";
	position: absolute;
	bottom: -20px; left: 30px;
	margin-left: 0;
	display: block;
	width: 30px;
	height: 30px;
	background: #fff;
	border-radius: 0 30px 0 30px;
	z-index: -1;
}
.balloon:after {
	content: "";
	position: absolute;
	bottom: -20px;
	left: 40px;
	margin-left: 0;
	display: block;
	width: 30px;
	height: 30px;
	background: #4a4a4a;
	border-radius: 0 30px 0 30px;
	z-index: -1;
	-webkit-transform: rotate(30deg);
	   -moz-transform: rotate(30deg);
	    -ms-transform: rotate(30deg);
	     -o-transform: rotate(30deg);
	        transform: rotate(30deg);
}
.ball{
	margin: 10px 0 0 0;
	line-height: 1.5;
}
.ball_i {
	margin: 10px 0 0 0;
	width: 90%;
	max-width: 262px;
	min-width: 200px;
   height: auto;
}
.st_img1{
	margin: 0 0 20px 0;
	width: 90%;
	max-width: 350px;
	min-width: 200px;
   height: auto;
}
.st_img2{
	margin: 0 0 20px 0;
	width: 75%;
	max-width: 364px;
	min-width: 200px;
   height: auto;
}
.st_img3{
	margin: 0 0 20px 0;
	width: 90%;
	max-width: 294px;
	min-width: 200px;
   height: auto;
}
.st_img4{
	margin: 0 0 20px 0;
	width: 90%;
	max-width: 246px;
	min-width: 200px;
   height: auto;
}

@media screen and (max-width: 950px) {
  .flttxt0{
	padding: 50px 0;
	width: 100%;
	float: none;
	margin: -130px 0 50px 0;
  }
}
@media screen and (max-width: 768px) {
.ball{
	margin: 5px 0 0 0;
	line-height: 1.5;
}
.ball_i {
	width: 99%;
	max-width: 209px;
	min-width: 150px;
}
.st_img1{
	width: 99%;
	max-width: 280px;
	min-width: 150px;
   height: auto;
}
.st_img2{
	width: 99%;
	max-width: 291px;
	min-width: 150px;
   height: auto;
}
.st_img3{
	width: 99%;
	max-width: 232px;
	min-width: 150px;
   height: auto;
}
.st_img4{
	width: 99%;
	max-width: 196px;
	min-width: 100px;
   height: auto;
}
	.menu_1{
		display: none;
	}
	.head_rt1{
		width: 50%;
		text-align: center;
	}
	.head_rt2{
		width: 50%;
		max-width: 280px;
		text-align: center;
	}
	.head_rt3{
		display: none;
	}
	.sub3{
		height: 720px;
	}
	
  .fltmap3,
  .fltmap4{
	display: block;
	padding: 0;
	margin: 0;
	width: 100%;
	max-width: 800px;
	min-width: 200px;
	}
	.fltmapimg{
   width: 200px;
	}
	.sub{
	margin: 200px 0 0 0;
	background-image: url(../img/about_bg03s.jpg);
	background-position: left center;
	-moz-background-size:100% auto;
	background-size:100% auto;
	height: 300px;
	}
	.sub_f{
	margin: 0 0 50px 0;
	background-image: url(../img/about_bg03s.jpg);
	background-position: left center;
	-moz-background-size:100% auto;
	background-size:100% auto;
	}
	.sub_img{
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: -230px auto 0;
	}
	.flt,
	.flt2,
	.flt0 { /*フロートをまとめる*/
	position: relative;
	margin: 0 0 20px 0;
	}
  .fltrt,
  .fltlft {
	padding: 0;
	width: 100%;
	float: none;
  }
  .fltrt2,
  .fltlft2{
	padding: 0;
	width: 98%;
	max-width: 501px;
	min-width: 200px;
	float: none;
  }
  .flttxt,
  .flttxtr{
	position: relative;
	padding: 30px 10px;
	width: 95%;
	float: none;
	margin: -140px 0 100px 0;
  }
  .flttxt0{
	padding: 30px 0;
	width: 99%;
	min-width: 200px;
	float: none;
	margin: -70px 0 50px 0;
	background-image: url(../img/img_02_4.png);
	background-position: center top;
	background-repeat: no-repeat;
  }
  .sub2{
	padding: 100px 0 0 0;
	background-image: url(../img/bg01s.jpg);
	-moz-background-size:100% auto;
	background-size:100% auto;
	}
}

/* meanmenu */
#menu {
    text-align: center;
    background-color: #fff;
    display: block;
}
#menu li {
    float: left;
    width: 20%;
}
#menu a {
    text-align: center;
    color: #333;
    background-color: transparent;
    text-decoration: none;
    padding: 14px 0;
    width: 100%;
    display: block;
}
#menu a:hover {
    color: #ccc;
    background-color: #ffffff;
}

/* 画面固定のメニュー */
div#floating-menu {
	display: table;
    position: fixed;
	height: 70px;
	width: 100%;
	bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 10px 0;
    background-color: #FFFFFF;
    border: 1px solid #333333;
    z-index: 9999;
}
.floating-cell{
	width: 30%;
	min-width: 342px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
    padding: 0 10px;
}
.floating-cell2{
	width: 35%;
	min-width: 300px;
	display: table-cell;
	text-align: left;
	vertical-align: middle;
    padding: 0 10px;
}
.floating-cell3{
	width: 35%;
	max-width: 307px;
	display: table-cell;
	text-align: right;
	vertical-align: middle;
    padding: 0 10px;
}
.floating-cells,
.floating-cells2{
	display: none;
}
.floating-cell2 a:hover img,
.floating-cells2 a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

div#floating-btn {
    position: fixed;
	width: 50px;
	height: 50px;
	bottom: 110px;
    right: 20px;
    background-color: #000;
    z-index: 9998;
}
.del_p{
	display:none;
	}
.del_s{
	display: inline;
	}

@media screen and (max-width: 768px) {
.del_p{
	display: inline;
	}
.del_s{
	display: none;
	}
div#floating-menu {
	height: 20px;
    padding: 5px 0;
}
.floating-cell,
.floating-cell2,
.floating-cell3{
	display: none;
	}
.floating-cells{
	width: 48%;
	display: table-cell;
	text-align: right;
	vertical-align: middle;
    padding: 0;
	}
.floating-cells2{
	width: 48%;
	display: table-cell;
	text-align: left;
	vertical-align: middle;
    padding: 0;
	}
}

/* フッター：バナー風 */
.button_l ul {
	list-style-type: none;
	padding-left: 0;
}
.button_l li {
	float: left;
}

.button {
  display: inline-block;
  width: 200px;
  padding: 10px 0;
  margin: 0 0 5px 10px;
  text-align: center;
	color:#000;
	background-color: #fff;
}
.button:hover {
	color:#fff;
	background-color: #999;
}
/* ~~ ボタンリンク用：黒：横幅最大 ~~ */
.btn_b {
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding: 2px 10px;
	margin: 10px 5px 0 5px;
    color:#fff;
    background-color:#444;
    border-radius: 25px;
}
.btn_b:link,
.btn_b:visited {
	color:#fff;
	text-decoration: none;
}
.btn_b:hover {
    background-color:#888;
}