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

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: #fff;
	margin: 0;
	padding: 0;
	color: #000;
	
	min-width:360px;
	background:url(images/sub_bodyback.jpg) left top repeat;
	
	font-size:14px;
	
    position: relative;
    left: 0;
    overflow-x: hidden;
}

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


/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む 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;
}

#slideshow {
   position: relative;
   width:  360px; /* 画像の横幅に合わせて記述 */
   height: 329px; /* 画像の高さに合わせて記述 */
   margin-left:0px;
}
#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;
}

/* スライドメニュー */
#button{ position:absolute; top:20px; right:20px; margin-left:-3px; color:#03C; -webkit-appearance: none; 
	z-index:50;}

#slide_menu{
	position: absolute;
	top: 0;
	right: -240px;
	width: 240px;
	height: 100%;
    background: #d9f4f8;

	z-index:100;
}

#slide_menu ul{ list-style-type:none; } 

#slide_menu li{ color:#fff; 
	margin:7px 0 7px 10px;
	font-family:1.0em;
}
#slide_menu li.sub{ color:#fff; 
	margin:7px 0 7px 25px;
	font-size:0.8em;
}

#slide_menu li a:link {
}
#slide_menu li a:visited {
}


/* ~~ この固定幅コンテナが他の div を囲みます。~~ */
#container {
	width: 100%;

	margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。 */

/*	border:1px #ccc solid;*/
	position: relative;
	top:0 ;
	left:0 ;
	overflow:hidden;
	max-width:600px;

}

/* ~~ ヘッダーには幅は指定されません。ヘッダーはレイアウトの幅全体まで広がります。ヘッダーには、ユーザー独自のリンクされたロゴに置き換えられるイメージプレースホルダーが含まれます。~~ */
.copy-wrap, .copyarea {	display:none; }

.header-wrap {
	width:100%;
	min-height:70px;

	border-top:5px #00b3cd solid;
	border-bottom:15px #00b3cd solid;
}
	
.header {
	width:360px;
	margin:0 auto;
	
	min-height:70px;
	height:auto;
	position:relative;
	
}
.h-logo{ position:absolute; left:5px; top:20px; width:250px;  }
.h-copy, .h-map, .h-mail{ display:none; }

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

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

*/

.content {
	width: 100%;
	margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。 */
	
	padding-bottom:50px;
	
}


/* top page */
.menu2-wrap{ display:none; }
.menu2{ display:none; }

.top-wrap{ width:100%;	 display:block; min-width:360px; text-align:center;
	position:relative; height:100px;	 }
.toparea{ display:none; }
.toparea-s{ width:360px; height:100px; 	margin: 0 auto; position:relative;}

/* 1column */
.main-area{ width:360px; margin:0 auto; margin-top:20px; position:relative;
	 min-height:700px;  }

/* 2column */
.sub-content {
	width: 360px;
	margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。 */
	
}
.sub-area{ width:360px; margin:0 auto; margin-top:20px; position:relative;
	 min-height:500px;  margin:0; }
.sidebar{ width:360px; margin:20px 0 0 0;
	
}
ul.right{ margin:10px 0 0 0; list-style-type:none; font-weight:normal; border-top:1px #ccc solid;
	border-top:1px #333 solid; }
ul.right li{ font-size:0.9em; margin:0; font-weight:normal; padding:0.8em 0 0.8em 1.5em;
	border-bottom:1px #ccc solid; }
ul.right li::before{
	font-family: FontAwesome;
	content: "\f0da";
	
	color:#00b3cd;
	
	margin:-5px 5px 0 0;
	font-size: 1.3em;
}
ul.right li.bottom{ border-bottom:1px #333 solid; }

.mark{ background-color:#f2f2f2; }


/* program */
.n-title{ margin:10px 0 0 10px; }
.n-title:before{
	font-family: FontAwesome;
	content: "\f111";
	
	margin:-5px 5px 0 0;
	font-size: 1.0em;
}
.new{ vertical-align:middle; }
.next{ width:100%; text-align:center; padding:10px 0; margin:20px 0 0 0; }

.tolist{ width:100%; text-align:right; margin-top:10px; }

/* 共通 */

h2 {
	font-size:1.3em; margin:0 0 20px 0;	font-weight:normal; width:360px;
}

h2.sub{ border-left:10px #00b3cd solid;  border-bottom:1px #00b3cd solid; padding:5px 0 5px 10px; 
	font-size:1.3em; font-weight:normal; width:360px;
	margin:10px 0 20px 0; 
}


.small85{ font-size:85%; }
.large11{ font-size:1.1em; }
.large12{ font-size:1.2em; }
.strong{ font-weight:bold; }

.red{ color:#F00; }

.txt, .txt30{ width:330px; margin:0 0 10px 10px; line-height:1.8em; font-size:1.0em; }
.txt30{margin:0 0 10px 10px; }


.navi{ width:360px; margin:0 auto; text-align:right; margin-top:10px; }

.pdfarea{ width:360px; padding:15px 10px; font-size:0.9em; text-align:left; border:1px #ccc solid; 
	margin-top:20px; }


.link:after{
	font-family: FontAwesome;
	content: "\f08e";
	
	color:#F00;
	
	margin:-5px 0 0 5px;
	font-size: 1.2em;
}

.link2:after{
	font-family: FontAwesome;
	content: "\f101";
	
	color:#039;
	
	margin:-5px 0 0 5px;
	font-size: 1.4em;
}


.pdf:after{
	font-family: FontAwesome;
	content: "\f1c1";
	
	color:#F00;
	
	margin:-5px 0 0 5px;
	font-size: 1.2em;
}

dl.sub1{ list-style-type:none; width:360px; margin:0 0 40px 20px; list-style-position:inside; }
dl.sub1 dt{ margin:10px 0 10px 0; position:relative; width:22%; float:left;  }
dl.sub1 dt.w40{ width:40%; }
dl.sub1 dt:after{
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 6px;
	height: 6px;
	background-color: #0a3bbd;
	border-radius: 100%;
}
dl.sub1 dd{ margin:10px 0 10px 0; position:relative; width:75%; float:left; }
dl.sub1 dd.w40{ width:60%; }
dl.sub1 dd.s-height{ height:40px; display:block; }
dl.sub1 dd.s-height2{ height:60px; display:block; }

ul.sub{ list-style-type:none; width:320px; margin:0 0 10px 40px; list-style-position:inside; }
ul.sub li{ margin:10px 0 0 0; position:relative; line-height:1.5em; font-size:1.0em;  }
ul.sub li:after{
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 6px;
	height: 6px;
	background-color: #0a3bbd;
	border-radius: 100%;
}


/* program */

h2.news{ margin:10px 0 20px 0; }
h2.news:before{
	font-family: FontAwesome;
	content: "\f0c8";
	
	margin:-5px 5px 0 0;
	font-size: 1.0em;
}


.news-ttl{ width:360px; margin:10px 0 10px 20px ; padding:10px 0; }

.imgarea{ width:100%; text-align:center; font-size:1.0em; }
.imgarea img{ padding:5px 0; }
.kiji{ width:340px; margin:10px 0 10px 10px; text-align:left; }

.imgarea20, .imgarea21{ width:360px; text-align:center; font-size:1.0em; 
  display: flex; margin:0 0 10px 0;
  justify-content: center;
  align-items: center;}
.imgarea20 img, .imgarea21 img,{ padding:5px 0; }
.imgarea20{ margin:0 0 10px 0; }

/* policy */
ul.policy{ margin:30px 0 10px 10px; list-style-position:outside; width:340px; list-style-type:none; }
ul.policy li{ margin:0 0 10px 0; }

/* about */
.aisatsu{ width:740px; margin:0 0 40px 20px; text-align:center; padding:20px 0; line-height:1.8em;
	font-size:1.2em; background-color:#99e2eb; }

/* jigyo */
.jigyo{ width:740px; margin:0 0 40px 20px; text-align:center; padding:20px 0; line-height:1.4em;
	font-size:1.0em; background-color:#99e2eb; }

ul.ji{ list-style-type:none; width:340px; margin:0 0 10px 10px; list-style-position:inside; }
ul.ji li{ margin:10px 0 0 0; position:relative; line-height:1.3em; font-size:1.0em;  }
ul.ji li:after{
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 6px;
	height: 6px;
	background-color: #0a3bbd;
	border-radius: 100%;
}

/* mail */
table.mail{	width:360px; margin:0 auto; margin:30px 0 30px 0; border:none; }
table.mail th{ border:none; width:25%; text-align:center; vertical-align:top; padding:5px; font-weight:normal; 
	font-size:90%; background-color:#99e2eb; color:#000;  }
table.mail td{ border:1px #99e2eb solid; width:73%; padding:5px; line-height:120%; text-align:left; vertical-align:text-top; 
	 font-size:90%; }
table.mail td.confirm{ border:none; }

table.mail td.conf{ border:none; width:70%; padding:5px; line-height:120%; text-align:left; 
	vertical-align:text-top; border:solid #cccccc 1px; }

/* recruit */
h3.recruit{ width:360px; padding:10px; font-weight:normal; background-color:#d9f4f8; font-size:1.2em; }
.faq1{ width:342px; background-color:#d9f4f8; padding:10px; font-size:1.0em; }
.faq2{ width:340px; padding:10px; border:1px #d9f4f8 solid; margin:0 0 20px 0; }


.min{	font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; }

.kana{ ime-mode:active; }
.rome{ ime-mode:disabled; }

/* access */
.map{ display:none; }
.map-s{  }

/*****************************************************/
p{ margin:10px 0 0 0; }

/******************************************************************/

.square:before{
	font-family: FontAwesome;
	content: "\f0c8";
	
	color:#333;
	
	margin:-5px 5px 0 0;
	font-size: 1.0em;
}

/* ~~ フッター ~~ */
.fmenu-wrap{ display:none; }
.fmenu {	display:none; }
.fmenu div.fmenu1{ display:none; }
.fmenu ul{ display:none; }
.fmenu li{ display:none; }

.ftitle{ display:none; }

.footer-wrap{ display:none; }

.footer{display:none; }

.f-logo{ display:none; }
.f-addr{ display:none; }

.fcopy{ width:100%; background-color:#fff; display:block; height:15px; text-align:left; padding:3px 0;
	font-size:0.8em; 	border-top:3px #00b3cd solid;
}
.fcopy div {
	width:360px;
	margin:0 auto;
	
	min-height:15px;
	height:auto;
	position:relative;
	
	text-align:left;
	
	font-size:0.85em;
	
}


/* ~~ その他の 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;
}
}