@media screen and (max-width: 599px){
@charset "utf-8";

/* for smartphone */
html {
    position: relative;
    overflow-x: hidden;
}
/*////////////////////////////*/

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

	min-width:360px;

	-webkit-text-size-adjust: 100%;

/* for smartphone */
    position: relative;
    left: 0;
    overflow-x: hidden;
/*////////////////////////////*/	
}

/* for smartphone */
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

.pc{ display:none; }

/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
	padding-right: 15px;
	padding-left: 15px; /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}
a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
}

/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: none;
}

/* ドロワーメニュー */
.ul_open_h{
	    background: gray;
	    color: #fff;
	    margin: 0;
	    padding: 0;
	    list-style: none;
	    top: 0;

	    height: 100%;
	    -webkit-transition: .35s ease-in-out;
	    -moz-transition: .35s ease-in-out;
	    transition: .35s ease-in-out;
	    overflow-y: scroll; 
	    position: fixed;
		
		z-index:50;
		padding-top:50px;

		background-color:#0F17B3;
		
		
}
.ul_open_h li{
	    padding: 7px;
	    width: 220px;
		border-bottom:1px #fff solid;
		
		font-size:0.85em;
}
.ul_open_h li.bottom{	margin-bottom:100px; }

.ul_open_h li a:link {
	color: #fff;
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
.ul_open_h li a:visited {
	color: #fff;
	text-decoration: underline;
}

.open-sub{ margin:0 0 0 10px; list-style-position:inside; list-style-type:disc; }
.open-sub li{ font-size:1.0em;
	border-bottom:none; 
	padding:5px; 
}

.dmenu{ padding:0 0 0 10px; }

.open-1{
	    right : -100%;
}
.open-1.active{
    right : 0px;
}

.move-1.on.btn{
    position: fixed;
    right: 25px;
    top: 10px;
}

.btn{
    width: 50px;
    height: 50px;
    position: absolute;
    right :0;
    top: 15px;
    background: #fff;

		z-index:90;
}
.btn:before,
.btn:after,
.btn span{
    display: block;
    width: 80%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
.btn span{
    height: 3px;
    background-color: #000;
    top: calc(50% - 1.5px);
}

.btn:before{
    content: "";
    top: calc(25% - 3px);
    border-top: 3px solid #000;
}
.btn:after{
    content: "";
    bottom: calc(25% - 3px);
    border-bottom: 3px solid #000;
}
.btn.on span{
    display: none;
}

.btn.on:before{
    top: calc(50% - 1.5px);
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
}
.btn.on:after{
    bottom: calc(50% - 1.5px);
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
}

.btnlink{
    width: 90%;
    display: block;
    margin: auto;
    border: 1px solid #0060ff;
    border-radius: 5px;
    background: #4285F4;
    height: 35px;
    line-height: 35px;
    text-align: center;
    margin-bottom: 35px;
    color: #fff;
}
.linkbox a{
    text-decoration: none;
}

/* ここまで*/


/* ~~ この固定幅コンテナが他の div を囲みます。~~ */
.container {
	width: 360px;
	background-color: #FFF;
	margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。 */
	
	border-left:8px #0F17B3 solid;
	border-right:8px #0F17B3 solid;
	background-color:#fffdef;
}

/* ~~ ヘッダーには幅は指定されません。ヘッダーはレイアウトの幅全体まで広がります。ヘッダーには、ユーザー独自のリンクされたロゴに置き換えられるイメージプレースホルダーが含まれます。~~ */
.header {
/*	background-color: #ADB96E;*/
	height:80px;
	background-color:#0F17B3;
	
	position:relative;
}
.copy{ display:none; }
h1{ padding:30px 0 0 10px; width:250px}


/* ~~ レイアウトに使用するカラムです。~~ 

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

2) カラムはすべてフロートしているため、マージンは指定されていません。マージンを追加する必要がある場合は、フロート方向には指定しないでください (例えば、右フロートに設定した div の右マージン)。多くの場合、代わりに余白を使用できます。このルールに従わない場合は、div のルールに「display:inline」宣言を追加し、一部のバージョンの Internet Explorer でマージンが 2 倍になるバグを回避する必要があります。

3) クラスはドキュメント内で複数回使用できるので (またエレメントには複数のクラスを適用できます)、カラムには ID ではなくクラス名が割り当てられます。例えば、必要に応じて 2 つのサイドバー div をスタックできます。クラスを各ドキュメントで一度しか使用しないのであれば、ユーザーの好みに応じて、クラス名を ID に変更することができます。

4) ナビゲーションを右ではなく左に配置したい場合、これらのカラムを反対方向にフロートさせると (すべて右方向にする代わりに、すべて左方向に設定)、反転してレンダリングされます。HTML ソース内で div を移動する必要はありません。

*/
.sidebar1 {
	display:none;
}
.sidebar1 img{ padding:0 0 5px 0; }

.content {

	padding: 10px 0;
	width: 360px;
	
}

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

.green{ color:#009933; }
.red{ color:#FF0000; }
.strong{ font-weight:bold; }

.large{ font-size:110%; }
.small{ font-size:85%; }

.newpage{ page-break-before: always; }
.pankuzu{ display:none;}

.txt{ font-size:90%; margin:10px 0 0 10px; width:90%; }
.txt2{ font-size:90%; margin:10px 0 0 30px; }

.tolink{ margin:0 10px 5px 0; text-align:right; font-size:85%; width:90%; background:url("./images/to_link.gif") right top no-repeat; padding-right:20px;  }
.totop{ margin:0 10px 5px 0; text-align:right; font-size:85%; width:90%; background:url("./images/to_top.gif") right 2px no-repeat; padding-right:20px;  }

.imgarea{ margin:10px 0 ; width:100%; text-align:center;  }

span.ind{ display:block; padding:10px 20px; }

.sub-menu{ margin:10px 0 10px 0; padding:0 0 10px 0; width:90%; }
.sub-menu ul{ margin:0; width:90%; list-style-type:none; }
.sub-menu li{ float:left;  background:url("./images/menu_top.gif") left 3px no-repeat;
	padding:0 0 0 20px; margin:0 30px 5px 0; font-size:90%; }

/* tiikianzen */
ul.tiiki{ margin:10px 0 0 10px; list-style-type:none; width:85%; }
ul.tiiki li{ background:url("./images/list_top.gif") left top no-repeat; padding: 0 0 0 20px; 
	font-size:90%; margin:0 0 10px -40px; }

/* katudou */
ul.katudou{ margin:10px 0 0 20px; list-style-type:none; width:80%; 	}
ul.katudou li{ background:url("./images/list_top.gif") left top no-repeat; padding: 0 0 0 20px; 
	font-size:90%; margin:0 0 10px -40px; }

dl.katudou{ margin:20px 0 10px 10px; width:98%; }
dl.katudou dt{ padding:1px 0 0 0; font-size:90%; width:13%;  text-align:right;  }
dl.katudou dd{ margin:0 0 10px 20px; font-size:90%; width:90%; }

/* about */
dl.about{ margin:20px 0 10px 20px; width:90%; display:block; height:auto; min-height:600px; }
dl.about dt{ background:url("./images/list_top.gif") left 2px no-repeat; padding:1px 0 0 20px;
	font-weight:bold; color:#333333; min-height:18px; font-size:90%;  }
dl.about dd{ margin:10px 0 10px 30px; font-size:90%;  }

dl.about-sub{ margin:0 0 10px 0; width:100%; }
dl.about-sub dt{ background:none; padding:0; font-size:100%; width:15%;  font-weight:normal; }
dl.about-sub dd{ margin:0 0 10px 0;  font-size:100%; width:83%;  }
dl.about-sub dt.long{ background:none; padding:0; font-size:100%; width:90%; float:none; font-weight:normal; }
dl.about-sub dd.long{ margin:0 0 10px 15%;  font-size:100%; width:83%; float:none; }

dl.about-sub2{ margin:0 0 10px 10px; width:100%; }
dl.about-sub2 dt{ background:none; padding:0; font-size:100%; width:35%; float:left; font-weight:normal; }
dl.about-sub2 dd{ margin:0;  font-size:100%; width:65%; float:left; }

ul.about1{ margin:10px 0 0 0; width:80%; list-style-type:disc; list-style-position:outside; }
ul.about1 li{ margin:0 0 10px 0; }

/* iroha */
dl.iroha{ margin:10px 0 0 10px; width:90%; }
dl.iroha dt{ font-weight:bold; font-size:90%;}
dl.iroha dd{ margin:5px 0 10px 20px; font-size:90%; }

ul.iroha{ margin:10px 0 0 10px; list-style-type:none; width:80%; }
ul.iroha li{ background:url("./images/list_top.gif") left top no-repeat; padding: 0 0 0 20px; 
	font-size:90%; margin:0 0 10px -40px; }

/* policy */
/* privacy policy */
ol.policy{ margin:20px 0 20px 10px; line-height:150%; width:85%; list-style-position:outside; }
ol.policy li{ margin:0 0 10px -20px; line-height:130%; font-size:90%; }
p.policy2{ float:right; text-align:right; line-height:130%; width:80%; margin:0 50px; }

/* link */
ul.link{ margin:10px 0 0 10px; list-style-type:none; list-style-position:outside;}
ul.link li{ margin:0 0 10px -40px; background:url("./images/list_top.gif") left top no-repeat; padding:0 0 0 20px; font-size:90%;  }

/* group */
.group{ margin:10px 0 0 30px; width:90%; padding:5px; font-size:90%; text-align:center; }
.group img.centerimg{ margin:auto; padding:auto; display:block; }
.group p{ margin:0 0 0 10px; display:block; text-align:left;  }
.group p.center{ margin:auto; padding:auto; display:block; margin:0 0 0 10px;  }
.group img{ padding:5px;  }
.group div.photoarea{ margin:10px 0; width:100%; text-align:center; 	}
.group div.photoarea img{ padding:0 0 0 50px; }

ul.group{ margin:0; width:90%; list-style-type:none; }
ul.group li{ float:left;  background:url("./images/list_top.gif") left top no-repeat;
	padding:0 0 0 20px; margin:0 30px 5px 0; font-size:90%; height:20px; }

/* news */
.title{ margin:5px 0 10px 10px; background:url("./images/title_top.gif") left 2px no-repeat; padding:0 0 0 20px; 
	font-weight:bold; width:85%;}
.kiji{ margin:10px 0 0 10px; width:90%; padding:5px; font-size:90%; }
.kiji img{ margin:auto; padding:auto; display:block;}
.linkbtn{ margin:10px 0 20px 0; width:95%; text-align:right; }

.next{ width:100%; margin:10px 0; text-align:center; }

.detail{ margin:10px 0 0 10px; width:90%; padding:5px; font-size:90%; text-align:center; }
.detail img.centerimg{ margin:auto; padding:auto; display:block; }
.detail p{ margin:0 0 0 10px; display:block; text-align:left;  }
.detail p.center{ margin:auto; padding:auto; display:block; margin:0 0 0 10px;  }
.detail img{ padding:0 5px 0 5px;  }
.detail div.photoarea{ width:90%; text-align:center; margin:10px 0 0 10px;	}
.detail div.photoarea p{ margin:10px 0 0 10px;   	}
.caption{ font-size:85%; color:#0000FF; }

table.detail-tbl{ width:90%; border:none; margin:30px 0 0 20px; }
table.detail-tbl td{ border:none; width:33%; font-size:85%; text-align:center; vertical-align:top; }

/* kaiin */
table.kaiin{	width:90%; margin:20px 0 20px 10px; border:none; }
table.kaiin th{ border:none; width:30%; text-align:left; vertical-align:top; padding:5px ;
	font-weight:normal;	background:url("./images/list_top.gif") left 6px no-repeat; padding-left:20px;
	font-size:90%; }
table.kaiin td{ border:none; width:70%; padding:5px; line-height:120%; text-align:left; vertical-align:text-top; 
	font-size:90%;}

/* mail */
table.mail{	width:90%; margin:20px 0 20px 20px; border:none; }
table.mail th{ border:none; width:30%; text-align:left; vertical-align:top; padding:5px ;
	font-weight:normal;	background:url("./images/list_top.gif") left 6px no-repeat; padding-left:20px;
	font-size:90%; }
table.mail td{ border:none; width:70%; padding:5px; line-height:120%; text-align:left; vertical-align:text-top; 
	font-size:90%;}

table.mail td.conf{ border:none; width:70%; padding:5px; line-height:120%; text-align:left; 
	vertical-align:text-top; border:solid #cccccc 1px; background-color:#FFFFFF; }
.error{ text-align:center; width:100%; margin:30px 0 20px 0;  }
.error_conf{ text-align:center; width:100%; margin:0 0 20px 0;  }

/* ~~ フッター ~~ */
.footer {
	padding: 0 0 10px 0; 
	background-color: #fff;
	position: relative;/* IE6 に、適切にクリアするための hasLayout を指定します。 */
	clear: both; /* この clear プロパティにより .container は、カラムの範囲がどこまでかを認識してその範囲を含めるようになります。 */
	height:240px;
}
.footer img.logo{ position:absolute; top:35px; left:30px;  }
.footer img.addr{  display:none;  }
.footer img.tel{  display:none;  }
.footer img.kaiin{  position:absolute; top:140px; left:60px;  }
.footer img.s-tel{ position:absolute; top:80px; left:100px;  }
.footer img.s-mail{ position:absolute; top:80px; left:190px;  }

/*  b-menu  */
.footer  div.b-menu{ width: 100%; clear:both; position:absolute; margin:auto 0;	padding:auto 0; 
	clear:both; font-size:90%; border-bottom:3px #0F17B3 solid; 	background-color:#fffdef;  }
.footer  div.b-menu div.to-home{ background:url(images/to_home.gif) left 3px no-repeat; padding:0 30px 0 17px; 
	line-height:150%; float:left; margin: 0 0 0 20px; }
.footer  div.b-menu div.to-top{ background:url(images/to_top.gif) left 3px no-repeat; padding-left:20px; 
	line-height:150%; margin-right:30px; float:right; }
.footer  div.b-menu div.to-menu{ line-height:150%; margin-right:150px; float:left; }

/*  copyright  */
.footer  div.copyright{ width: 100%; clear:both; position:absolute; bottom:0; margin:auto 0;	padding:auto 0; 
	border-top:3px #0F17B3 solid; min-height:15px;   }
.footer  div.copyright div{ padding:5px; width:350px; font-size:80%; display:block; text-align:center;  }

/* ~~ その他の float/clear クラス ~~ */
.fltrt {  /* このクラスを使用すると、ページ内でエレメントを右にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスを使用すると、ページ内でエレメントを左にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* このクラスは、#footer が #container から削除されているか取り出されている場合に、<br /> または空の div で、フローティングさせる最後の div に続く最後のエレメントとして (#container 内に) 配置できます。 */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

@media print{
.footer{display:none;} 
}
}