@charset "utf-8";
@import url("import/attachment.css");


/*PC・タブレット・スマホ共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
}

body {
	margin: 0px;
	padding: 0px;
	background-color: #3CB371;            /* 背景色 */
	background-image: url("../images/bg.jpg"); /* 画像 */
	background-size: cover;               /* 全画面 */
	background-attachment: fixed;         /* 固定 */
	background-position: center center;   /* 縦横中央 */	
	color: #000;	/*全体の文字色*/
	font-family:"ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 14px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	-webkit-text-size-adjust: none;
	text-align: center;
}

@media screen and (max-width:480px){
	body {
		background-size: contain;               /* 全画面 */
	}
}

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}


/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #000;	/*リンクテキストの色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}
a:hover {
	color: #3CB371;			/*マウスオン時の文字色（全体）*/
	border-bottom-style: dotted;/*点線の種類*/
	border-bottom-color: #3CB371;/*点線の色*/
	border-bottom-width: 1px;/*点の大きさ*/
	padding-bottom: 7px;
}

/*テキスト（全般）設定
---------------------------------------------------------------------------*/
.txLeft {
	text-align: left;	/*左寄せ*/
}
.txCenter {
	text-align: center;	/*中央寄せ*/
}
.txRight {
	text-align: right;	/*右寄せ*/
}


/*コンテナー（HPを囲むブロック）
---------------------------------------------------------------------------*/
#container {
	width: 1200px;	/*コンテナー幅*/
	margin: 0 auto;
}
@media screen and (max-width:480px){
	#container {
		max-width: 100%;	/*コンテナー幅*/
	}
}

/*ヘッダー（サイト名ロゴが入ったブロック）
---------------------------------------------------------------------------*/
/*ロゴ画像*/
header #logo {
	width: 1200px;	/*画像の幅*/
	margin: 0px auto 40px;
}
header #logo img {
	display: block;
}

/*上部のメインメニュー
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
nav#menubar ul li,
nav#menubar-s ul li {
	float: left;	/*メニューを左側に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	width: 15%;		/*メニュー幅*/
	margin-left: 1.5%;	/*メニュー同士の隙間*/
	font-size: 16px;		/*文字サイズ*/
}
/*各メニューの写真部分の設定*/
nav#menubar ul li img,
nav#menubar-s ul li img {
	width: 90%;		/*上の15%の幅に対しての写真幅*/
	height: auto;
	border: 7px solid #FFF;	/*枠線の幅、線種、色*/
	border-radius: 50%;		/*角丸の設定*/
	margin-bottom: 10px;	/*写真とメニューテキストの間にとるスペース*/
}
/*各メニューの写真部分のマウスオン時の設定*/
nav#menubar ul li:hover img,
nav#menubar-s ul li:hover img {
	border: 7px solid #3CB371;	/*枠線の幅、線種、色*/
}
/*テキスト部分の設定*/
nav#menubar ul li a,
nav#menubar-s ul li a {
	text-decoration: none;
	color: #FFF;	/*文字色*/
}
nav#menubar ul li a span,
nav#menubar-s ul li a span {
	display: block;
	word-wrap: break-word;
	border-radius: 8px;	/*角丸の設定。大き目に設定しておけばOK。*/
	line-height: 1;			/*高さ*/
	background: rgba(0,0,0,0.5);	/*背景色。左の3つの数字がRGBでの色。0,0,0は黒。最後の小数点の数字が透明度。ここでは30%。*/
	margin-bottom: 30px;	/*下のコンテンツブロックとの余白*/
	padding: 4px;
}
/*テキスト部分のマウスオン時の設定。*/
nav#menubar ul li a:hover span,
nav#menubar-s ul li a:hover span {
	color: #FFF;	/*文字色*/
	background: rgba(60,180,113,100);	/*背景色。左の3つの数字がRGBでの色。0,0,0は黒。最後の小数点の数字が透明度。ここでは60%。*/
}
/*小さい端末用(画面幅800px以下)メニューを表示させない*/
#menubar-s {
	display: none;
}
/*800px以下のメニュー見出し（MENU）を表示させない*/
#menubar_hdr {
	display: none;
}

/*テキスト装飾
---------------------------------------------------------------------------*/
.marker {
	background: linear-gradient(transparent 50%, #ffffcc 0%);
	font-size: 16px;
	line-height: 2rem
}
@media screen and (max-width:480px){
	.spDiv {
    background: none;
    border-bottom: 1px dotted #333;
    padding-bottom: 27px;
    display: block;
    font-weight: bold;
	}
	.spDiv1st {
	 padding-top: 15px;
	}
}
.bgcolor p,.bgcolor li {
    padding: 0.5rem 2rem;
    margin: 0 0 2em 0;
    color: #FFF;
    background: #3CB371;/*背景色*/
}



/*コンテンツ
---------------------------------------------------------------------------*/
#contents {
	clear: left;
	overflow: hidden;
	background: rgba(255,255,255,0.95);	/*背景色。左の3つの数字がRGBでの色。0,0,0は黒。最後の小数点の数字が透明度。ここでは60%。*/
	padding: 5%;			/*ボックス内の余白*/
}


/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
	width: 100%;	/*メインコンテンツ幅*/
	padding-bottom: 40px;
}
/*sectionの設定*/
section {
	padding: 0 0 50px 0;
	clear: both;
	overflow: hidden;
}

section p {
    width: 100%;
    margin: 0 auto;
}

.indexPage #mainimg {
    background: url(../images/img_index_main.jpg) no-repeat center top;
    background-size: cover;
    padding: 250px 0;
}
@media screen and (max-width:480px){
	.indexPage #mainimg {
	    padding: 80px 0;
	}
}
.businessPage #mainimg {
 background: url(../images/img_business_main.jpg) no-repeat center top;
 background-size: cover;
 padding: 70px 0;
}
.contactPage #mainimg {
 background: url(../images/img_contact_main.jpg) no-repeat center top;
 background-size: cover;
 padding: 70px 0;
}
.lessonPage #mainimg {
 background: url(../images/img_lesson_main.jpg) no-repeat center top;
 background-size: cover;
 padding: 70px 0;
}
.voicePage #mainimg {
 background: url(../images/img_voice_main.jpg) no-repeat center top;
 background-size: cover;
 padding: 70px 0;
}

.entryBlock {
 overflow: hidden;
}
.entryBlockLImg {
 width: 18%;
 float: left;
}
.entryBlockLImg img {
 width: 100%;
 display: block;
 margin-bottom: 10px;
}
.entryBlockLImg h3 {
 background: transparent !important;
    padding: 0 !important;
    margin-bottom: 0px !important;
    text-align: center;
}
.entryBlockRExpl {
 width: 78%;
 float: right;
}
@media screen and (max-width:480px){
	.entryBlockLImg {
	 width: 100%;
	 float: none;
	 text-align: center;
	 margin-bottom: 15px;
	}
	.entryBlockLImg img {
	 width: auto;
	 display: inline;
	}
	.entryBlockRExpl {
	 width: 100%;
	 float: none;
	}
}


.application {
 overflow: hidden;
}
.applicationL {
 width: 50%;
 float: left;
 text-align: center;
}
.applicationR {
 width: 50%;
 float: left;
 text-align: center;
}
.applicationR img {
 width: 30%;
}
@media screen and (max-width:480px){
	.applicationL {
	 width: 100%;
	 float: none;
	 margin-bottom: 30px;
	}
	.applicationL img {
	 width: 60%;
	}
	.applicationR {
	 width: 100%;
	 float: none;
	}
	.applicationR img {
	 width: 50%;
	}
}


.application2 {
 overflow: hidden;
}
.application2 h4 {
    width: 50% !important;
}
@media screen and (max-width:480px){
	.application2 h4 {
	    width: 80% !important;
	}
}
.application2L {
 width: 50%;
 float: left;
 text-align: center;
}
.application2 p {
 text-align: center !important;
}
@media screen and (max-width:480px){
	.application2 p {
	 text-align: left !important;
	}
}
.application2L img {
 width: 30%;
 display: block;
 margin: 0 auto;
}
.application2R {
 width: 50%;
 float: left;
 text-align: center;
}
.application2R img {
 width: 30%;
 display: block;
 margin: 0 auto;
}
@media screen and (max-width:480px){
	.application2L {
	 width: 100%;
	 float: none;
	 margin-bottom: 30px;
	}
	.application2L img {
	 width: 50%;
	}
	.application2R {
	 width: 100%;
	 float: none;
	}
	.application2R img {
	 width: 50%;
	}
}




.conceptImg {
 width: 30%;
}
@media screen and (max-width:480px){
	.conceptImg {
	 width: 60%;
	}
}

@media screen and (max-width:480px){
	.businessPage #mainimg,
	.contactPage #mainimg,
	.lessonPage #mainimg,
	.voicePage #mainimg {
	 padding: 40px 0;
	}
}
#main p {
	text-align: left;
}

#mainimg p {
    color: #000;
    font-size: 1.2rem;
    text-shadow: #fff 1px 1px 2px, #fff -1px 1px 2px, #fff 1px -1px 2px, #fff -1px -1px 2px;
    line-height: 1.5em;
}

@media screen and (min-width:481px){
	.indexPage #mainimg p {
	 text-align: left;
	 width: 90%;
	 margin: 0 auto;
	}
	.w80PPc {
	 width: 80%;
	 margin-left: auto;
	 margin-right: auto;
	}
}

#mainimg p img {
	border-radius: 30px;
}

/*mainコンテンツのh2タグの設定*/
#main h2 {
    clear: both;
    position: relative;
    display: inline-block;
    padding: 0 80px;
    color: #000;
    font-size: 1.2rem;
    margin-bottom: 30px;
    line-height: 1.5em;
}

#main h2:before,#main h2:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 44px;
	height: 2px;
	background-color: black;
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg);
}
#main h2:before {
	left:0;
}
#main h2:after {
	right: 0;
}

/*mainコンテンツのh3タグの設定*/
#main h3 {
	clear: both;
	padding: 0.6rem 1.2rem;
	background: #EBF0EB;	/*背景色*/
	color: #000;	/*文字色*/
	margin-bottom: 20px;	/*h3下の空き*/
}

/*mainコンテンツのh4タグの設定*/
#main h4 {
	clear: both;
	width: 20%;
	padding-bottom: 1%;
	border-bottom: 2px dotted #000;
	text-align: center;
	margin: 0 auto 20px auto;
}
@media screen and (max-width:480px){
	#main h4 {
		width: 50%;
	}
}

/*メインコンテンツのp(段落)タグ設定*/
#main p {
	padding: 0px 0px 14px;	/*上、左右、下への余白*/
}
#main h2 + p,
#main h3 + p {
	margin-top: -5px;
}
/*ulのフレックスボックス設定*/
ul.x-line {
    display: flex;
	flex-wrap: wrap;
    list-style-type: none;
    margin: 0 0 0 1rem;
    padding: 0;
}
 
ul.x-line li {
	background: #3CB371;
	border-radius: 10rem;
	color: #FFF;
	font-weight: bold;
    margin: 0 0.5rem 1rem 0;
    padding: 0.5rem 1rem;
}

.x-line2 {
    text-align: center;
    line-height: 3.0em;
}
.x-line2 li {
	background: #3CB371;
	border-radius: 10rem;
	color: #FFF;
	font-weight: bold;
  margin: 0 0.5rem 1rem 0;
  padding: 0.5rem 1rem;
  display: inline;
  margin: 0 0px;
  word-break: keep-all;
}

.definitionArea3 {
 overflow: hidden;
}
.definitionArea3 dl {
 overflow: hidden;
 width: 33.3333333%;
 float: left;
}
.definitionArea3 dl dt,
.definitionArea3 dl dd {
 width: 95%;
 margin: 0 auto;
 text-align: left;
}
.definitionArea3 dl dt {
 margin-bottom: 10px;
}
@media screen and (max-width:480px){
	.definitionArea3 dl {
	 width: 100%;
	 float: none;
	}
	.definitionArea3 dl dt,
	.definitionArea3 dl dd {
	 width: 100%;
	 margin-bottom: 10px;
	}
}









.definitionArea5 {
 overflow: hidden;
}
.definitionArea5 dl {
 overflow: hidden;
 width: 20%;
 float: left;
}
.definitionArea5 dl dt,
.definitionArea5 dl dd {
 width: 90%;
 margin: 0 auto;
}
.definitionArea5 dl dt {
 text-align: center;
}
.definitionArea5 dl dd {
 text-align: left;
}
.definitionArea5 dl dt {
 margin-bottom: 10px;
}
@media screen and (max-width:480px){
	.definitionArea5 dl {
	 width: 100%;
	 float: none;
	}
	.definitionArea5 dl dt,
	.definitionArea5 dl dd {
	 width: 100%;
	 margin-bottom: 10px;
	 text-align: center;
	}
}
.inner {
	width: 95%;
	margin: o auto;
}

/*youtubeで見るボタン*/
a.btn {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 1.5rem;
  text-align: center;
  vertical-align: middle;
  letter-spacing: 0.1em;
  color: #000;
}
a.yt-btn {
  border: 2px solid #000;
  border-radius: 0;
}
a.yt-btn:hover {
  color: #fff;
  border: 2px solid #c4302b;
  background: #c4302b;
}



.appLogo {
 text-align: center !important;
}
.appLogo img {
 width: 50%;
 display: inline;
}
@media screen and (min-width:481px){
	.appLogo img {
    background: #F0F9FE;
    padding: 15px 40px;
	}
}
@media screen and (max-width:480px){
	.appLogo img {
    width: 100%;
    background: #F0F9FE;
    padding: 10px 15px;
    box-sizing: border-box;
	}
}

.column4Area {
 overflow: hidden;
}
.column4 {
 width: 25%;
 float: left;
}
@media screen and (max-width:480px){
	.column4 {
	 width: 100%;
	 float: none;
	 margin-bottom: 10px;
	}
}
.column4Cont {
 width: 90%;
 margin: 0 auto;
}
.column4Cont img {
 width: 90%;
 display: block;
 margin: 0 auto 15px;
}

/*besiness.htmlの経歴の.keyword設定*/
#main strong.keyword {
	font-size: 1.2rem;
	color: #3CB371;

}




/*voice.htmlのお客様の声コンテンツの設定*/
#main .voiceBox {
	overflow: hidden;
}

#main .voiceBox .leftContent {
    float: left;
    width: 48%;
    background: #FFF;
    border-radius: 6px;
    padding: 2%;
    margin: 0 0 15px 0;
    box-sizing:border-box;
}

#main .voiceBox .rightContent {
	float: right;
    width: 48%;
    background: #FFF;
    border-radius: 6px;
    padding: 2%;
    margin: 0 0 15px 0;
    box-sizing:border-box;
}
@media screen and (max-width:480px){
	#main .voiceBox .leftContent {
	    float: none;
	    width: 100%;
      padding: 5%;
	}
	
	#main .voiceBox .rightContent {
	    float: none;
	    width: 100%;
      padding: 5%;
	}
}

#main .voiceBox .leftContent small,
#main .voiceBox .rightContent small {
	background: #f5f5f0;
	border-radius: 6px;
	padding: 1% 10%;
	color: #3CB371;
}


/*menu内のブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#main .list {
    height: 100%;
    width: 31.33333333%;
    border-radius: 6px;
    background: #EBF0EB;
    padding: 2%;
    float: left;
    margin: 0px 1% 30px 1%;
    position: relative;
    box-sizing: border-box;
}
/*ボックス内の段落タグ設定*/
#main .list p {
	padding: 0px;
	color: #000;		/*文字色*/
	font-size: 14px;	/*文字サイズ*/
	line-height: normal;
	width: 100%;
	text-align: center;	/*中央寄せ*/
}
/*ボックス内のh4タグ設定*/
#main .list h4 {
	color: #3CB371;	/*文字色*/
	border-bottom: 1px dashed #ccc;	/*下線の幅、線種、色*/
	margin-bottom: 10px;
	padding-bottom: 5px;
	font-size: 16px;
}

/*ボックス内の写真*/
#main .list figure img {
	margin-bottom: 10px;
}


/*menu内のページ内メニュー（CMS用）
---------------------------------------------------------------------------*/
ul.navmenu {
	padding: 30px 0px;
	text-align: center;
}
ul.navmenu li {
	display: inline;
}
ul.navmenu li a {
	background: url(../images/arrow.png) no-repeat left center;	/*矢印マークの設定*/
	padding-left: 15px;
	text-decoration: none;
}
ul.navmenu li a:hover {
	background: url(../images/arrow.png) no-repeat 2px center;	/*マウスオン時に矢印マークを2pxだけ移動させて表示する設定*/
}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	text-align: center;
	padding: 15px 0px;
}
footer .pr {
	display: block;
	font-size: 80%;
}

footer ul.sns li {
	display: inline;
}

footer ul.sns li a:hover {
	border-bottom: none;
	filter: brightness(0.9);
}

footer ul.sns li img {
	width: 36px;
	padding: 10px 10px 20px;
}

footer a {
	text-decoration: none;
	color: #FFF;
}

footer a:hover {
	color: #FFF;
	border-bottom-style: dotted;/*点線の種類*/
	border-bottom-color: #FFF;/*点線の色*/
	border-bottom-width: 1px;/*点の大きさ*/
	padding-bottom: 3px;
}

/*フッター内のメニュー
---------------------------------------------------------------------------*/
#footermenu	{
	clear: both;
	padding-top: 30px;
	font-size: 12px;
	text-align: center;
}
#footermenu li {
	display: inline;
	padding: 0px 5px;
}

/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl {
	overflow: auto;	/*高さ指定を超えるとiframe風にスクロールが出る設定。全部表示させたいならこの行と下のheightの行を削除。*/
	height: 150px;
	margin: 5px 20px 0px;
}
/*日付設定*/
#new dt {
	font-weight: bold;	/*太字にする設定。標準がいいならこの行削除。*/
	float: left;
	width: 8em;
}
/*記事設定*/
#new dd {
	border-bottom: 1px solid #CCC;	/*下線の幅、線種、色*/
	padding-left: 8em;
}

/*テーブル１
---------------------------------------------------------------------------*/
.ta1 {
	width: 96%;
	margin: 0px auto 15px;
}
.ta1, .ta1 td, .ta1 th {
	border-top: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
}
/*テーブル内の右側*/
.ta1 td {
	padding: 18px;
	text-align: left;
}
/*テーブル内の左側の見出し部分*/
.ta1 th {
	background: #EBF0EB;	/*背景色*/
	width: 25%;	/*幅*/
	padding: 18px;
	text-align: center;
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi {
	width: auto;
	text-align: left;
	background: #3CB371;	/*背景色*/
	color: #FFF;
	padding-left: 20px;
}

/*inputボタンの設定
---------------------------------------------------------------------------*/
input[type="submit"],
input[type="button"],
input[type="reset"] {
	width: 250px;	/*ボタン幅*/
	padding: 10px;	/*ボタン内の余白*/
	font-size: 100%;
	border: none;
	border-radius: 30px;	/*角丸のサイズ*/
	background: #5e9c00;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: -webkit-linear-gradient(#7ab127, #5e9c00);	/*グラデーション*/
	background: linear-gradient(#7ab127, #5e9c00);			/*同上*/
	-webkit-box-shadow: 0px 2px 5px #ccc;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 0px 2px 5px #ccc;			/*同上*/
	color: #FFF;		/*文字色*/
}
/*マウスオン時の設定*/
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
	background: #7ab127;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: -webkit-linear-gradient(#5e9c00, #7ab127);	/*グラデーション*/
	background: linear-gradient(#5e9c00, #7ab127);			/*同上*/
}

/*PAGE TOP設定
---------------------------------------------------------------------------*/
#pagetop {
	clear: both;
}
@media screen and (max-width:480px){
	#pagetop {
		display: none;
	}
}
#pagetop a {
	display: block;
	float: right;
	text-decoration: none;
	text-align: center;
	color: #FFF;		/*文字色*/
	font-size: 20px;	/*文字サイズ*/
	background: #3CB371;/*背景色*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*角丸のサイズ*/
}
/*マウスオン時*/
#pagetop a:hover {
	background: #000;	/*背景色*/
	color: #FFF;		/*文字色*/
	padding:0;
	border: none;
}

/*Copyright設定
---------------------------------------------------------------------------*/
footer small {
	color: #FFF;
}


/*FAQ・LINK
---------------------------------------------------------------------------*/
.faq {
	padding: 0px 15px;
}
.faq dt,.faq dt a {
	color: #5e9c00;
	font-weight: bold;
}
.faq dd {
	border-bottom: 1px solid #CCC;
	overflow: hidden;
}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
	background: #F00;
	color: #FFF;
	font-size: 10px;
	padding: 0px 5px;
	border-radius: 2px;
	margin: 0px 5px;
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #dcdcdc;padding: 4px;border-radius: 4px;}
.mb1em,.mb15 {margin-bottom: 15px;}
.clear {clear: both;}
ul.disc {padding: 0em 25px 1em;list-style: disc;}
.color1 {color: #3CB371;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
img.fl {margin: 0px 10px 10px 0px;float: left;}
img.fr {margin: 0px 0px 10px 10px;float: left;}






/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	
	/*ヘッダー（サイト名ロゴが入ったブロック）
	---------------------------------------------------------------------------*/
	header {
		margin-bottom: 20px;
	}
	/*ロゴ画像*/
	header #logo {
		width: 80%;	/*画像の幅*/
		margin: 0px auto 20px;
	}
	
	/*上部のメインメニュー
	---------------------------------------------------------------------------*/
	/*小さい端末用(画面幅800px以下)メニューを非表示から表示に切り替える*/
	#menubar-s {
		display: block;
	}
	/*メニュー１個あたりの設定*/
	nav#menubar-s ul li {
		float: left;		/*メニューを左側に回り込み*/
		text-align: center;	/*内容をセンタリング*/
		width: 28%;			/*メニュー幅*/
		margin-left: 4%;	/*メニュー同士の隙間*/
		font-size: 12px;	/*文字サイズ*/
	}
	/*大きな端末用(画面幅801px以上)メニューを非表示にする*/
	#menubar {
		display: none;
	}
	
	/*800px以下のメニュー見出し（MENU）
	---------------------------------------------------------------------------*/
	#menubar_hdr {
		display: block;
		margin: 0 auto;
		color: #fff;	/*文字色*/
		letter-spacing: 0.3em;
		border-radius: 50px;
		width: 40%;		/*幅*/
		line-height: 36px;	/*高さ*/
		text-align: center;
	}
	/*メニューopen時のアイコン（アイコンはマイナス表示中）と背景色の設定。480px以下の設定の「更新情報・お知らせ」ブロックと合わせるとOK。*/
	#menubar_hdr.open {
		background: url(../images/btn_minus.png) no-repeat right center, -webkit-linear-gradient(#49a09a, #49a09a);
		background: url(../images/btn_minus.png) no-repeat right center, linear-gradient(#49a09a, #49a09a);
	}
	/*メニューclose時のアイコン（アイコンはプラス表示中）と背景色の設定。480px以下の設定の「更新情報・お知らせ」ブロックと合わせるとOK。*/
	#menubar_hdr.close {
    background: url(../images/btn_plus.png) no-repeat right center, -webkit-linear-gradient(#3cb371, #3cb371);
    background: url(../images/btn_plus.png) no-repeat right center, linear-gradient(#3cb371, #3cb371);
	}
	
	/*menu.html内のメニューブロック
	---------------------------------------------------------------------------*/
	/*各ボックスの設定*/
	#main .list {
		width: 41%;	/*ボックスの幅*/
	}
	
	/*その他
	---------------------------------------------------------------------------*/
	body.s-n #sub {display: none;}
	
}
	
	
	
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	
	/*ヘッダー（サイト名ロゴが入ったブロック）
	---------------------------------------------------------------------------*/
	/*ロゴ画像*/
	header #logo {
		width: 100%;	/*画像の幅*/
	}
	
	/*menu内のブロック
	---------------------------------------------------------------------------*/
	/*各ボックスの設定*/
	#main .list {
		float: none;
		width: auto;
		height: auto;
		margin: 0;
		margin-bottom: 20px;
		padding: 5%;	/*ボックス内の余白*/
	}
	
	/*menu内のページ内メニュー（CMS用）
	---------------------------------------------------------------------------*/
	ul.navmenu {
		padding-top: 0px;
		padding-bottom: 10px;
		text-align: left;
	}
	ul.navmenu li {
		display: block;
	}
	
	/*トップページ内「更新情報・お知らせ」ブロック
	---------------------------------------------------------------------------*/
	/*お知らせ情報open時のアイコン（アイコンはマイナス表示中）と背景色の設定*/
	section#new h2.open {
		background: url(../images/btn_minus.png) no-repeat right center, -webkit-linear-gradient(#7ab127, #5e9c00);
		background: url(../images/btn_minus.png) no-repeat right center, linear-gradient(#7ab127, #5e9c00);
	}
	/*お知らせ情報close時のアイコン（アイコンはプラス表示中）と背景色の設定*/
	section#new h2.close {
		background: url(../images/btn_plus.png) no-repeat right center, -webkit-linear-gradient(#7ab127, #5e9c00);
		background: url(../images/btn_plus.png) no-repeat right center, linear-gradient(#7ab127, #5e9c00);
	}
	
	/*その他
	---------------------------------------------------------------------------*/
	.ws,.wl {width: 95%;}
	
	
}
.blue {
 color: #118bbb;
}