﻿/*================================================
 *  1200pxディスプレイ対策
 ================================================*/
@media screen and (max-width:1200px) {

/* 一般・共通設定 */
	.inner { width:100%; }
	#contents { box-sizing:border-box; width:100%; padding:0 15px; }
	h2 { margin:0 0 0 15px; }

/* ヘッダー */
	.h-inner { width:100%; }
	.header-left { width:30%; padding-left:10px; }
	.header-left img { width:85%; overflow:hidden; }
	.header-right { width:70%; padding-right:10px; }
	.header-r-l { margin:0 1rem 0 0; }
	.h-r-top li { font-size:0.8rem; }
	.h-r-bottom li { font-size:1.2rem; background-size:1.2rem; }

/* ヘッダー画像 */
	.header-b-frame-mh01, .header-b-frame-mh02, .header-b-frame-mh03, .header-b-frame-mh04, .header-b-frame-mh05, .header-b-frame-mh06, .header-b-frame-mh07, .header-b-frame-mh08, .header-b-frame-mh09 { width:100%; }

/* グローバルナビゲーション */
	.ls2 { letter-spacing:-0.1em; }

/* フッター */
	.ftr-box { box-sizing:border-box; width:100%; padding:0 15px; }
	.ftr-navi-box { box-sizing:border-box; width:100%; padding:0 15px; margin:0 auto; }
	.button-box p { width:30%; }
	.group-box { width:100%; padding:0 15px; }
	.group-box .slick-next { right:25px; }
	.group-box .slick-prev { left:25px; }

}


/*================================================
 *  タブレット向けデザイン
 ================================================*/
@media screen and (max-width:949px) {

/* ヘッダー */
	.header-r-l { margin:0; }
	.header-r-r { display:none; }

/* グローバルナビゲーション */
	.ls { letter-spacing:-0.1em; }
	.ls2 { letter-spacing:-0.2em; }

}

@media screen and (max-width:849px) {

/* グローバルナビゲーション */
	.ls2 { letter-spacing:-0.3em; }

}


/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {

/* 一般・共通設定 */
	h2 { font-size:2.0rem; margin:0; padding:0; text-align:center; border-left:none; }
	h3 { font-size:1.6rem; }
	h4 { font-size:1.4rem; }
	h5 { font-size:1.2rem; }

/* ヘッダー */
	header { z-index:2; box-sizing:border-box; position:fixed; top:0; left:0; width:100%; height:74px; padding:13px 0; border-bottom:1px solid #dcdcdc; }
	.header-left { width:100%; padding-left:10px; }
	.header-left img { width:147px; height:44px; }
	.header-right { display:none; }
	.header-b-frame-mh01, .header-b-frame-mh02, .header-b-frame-mh03, .header-b-frame-mh04, .header-b-frame-mh05, .header-b-frame-mh06, .header-b-frame-mh07, .header-b-frame-mh08, .header-b-frame-mh09 { background-image:none; padding:40px 0; }

/* トピックパス（パンくずリスト）*/
	#topicpath { display:none; }

/* フッター */
	.ftr { background-image:url(../images/02.jpg); background-size:cover; background-position:right; height:auto; }
	.mhadd { margin:30px auto 45px auto; }
	.mhadd .br::before { content:"\A"; white-space:pre; }
	.mhadd .br { margin:0; }
	.ftr-navi { display:none; }
	.button-box { display:block; }
	.button-box p { width:70%; margin:0 auto 20px auto; }
	.button-box p:last-child { margin:0 auto; }
	.group { padding:15px 0; }
	.group p { padding:0 1px; }
	.group-box { margin:0 auto; }
	.group-box .slick-next:before { display:none; }
	.group-box .slick-prev:before { display:none; }
	.copyright span { display:none; }

/* グローバルナビゲーション */
	nav { background:#009944; }
	nav ul { margin:0; padding:0; }
	nav .inner > ul { z-index:2; overflow:auto; position:fixed; top:auto; right:0; width:100%; height:88%; height:-webkit-calc(100% - auto); height:calc(100% - auto); }
	nav li { position:relative; width:100%; float:none; margin:0; text-align:left; list-style:none; border-bottom:1px solid #fff; background:#009944; }
	nav li:first-child { border-top:0; }
	nav li:last-child { border-bottom:0; }
	nav li a { display:block; padding:10px 30px; color:#fff; text-decoration:none; background:#009944; }
	nav li a:hover { color:#fff; text-decoration:none; }
 	nav li.smh a { background:#505050; }
	nav ul ul { display:none; position:relative; }

	nav li li:first-child { border-top:1px solid #fff; }
	nav li li a { box-sizing:border-box; width:100%; padding:10px 30px 10px 45px; text-align:left; background:#33AD69; }
	nav li li a:hover { color:#fff; background:#33AD69; text-decoration:none; }

	.subnav a.sub01:before { display:block; content:""; position:absolute; -webkit-transform:rotate(45deg); transform:rotate(45deg); top:20px; right:30px; width:10px; height:10px; margin-top:-5px; background:#fff; }
	.subnav a.sub01:after { display:block; content:""; position:absolute; -webkit-transform:rotate(45deg); transform:rotate(45deg); top:20px; right:30px; width:10px; height:10px; margin-top:-10px; background:#009944; }
	.subnav a.sub01:hover:after { background:#009944; }

	.active > a.sub01:before { margin-top:0; }
	.active > a.sub01:after { margin-top:5px; }

	.ls { letter-spacing:normal; }
	.ls2 { letter-spacing:normal; }
	.gnav { display:none; }

	#spMenu { display:block; z-index:2; position:fixed; top:12px; right:10px; }
	#spMenu:hover { cursor:pointer; }
	#navBtn { display:inline-block; position:relative; width:40px; height:40px; border-radius:10%; background:#009944; }
	#navBtnIcon { display:block; position:absolute; top:47%; left:50%; width:20px; height:3px; margin:0 0 0 -10px; background:#fff; transition:0.5s; }
	#navBtnIcon:before, #navBtnIcon:after { display:block; content:''; position:absolute; top:0; left:0; width:20px; height:3px; background:#fff; transition:0.5s; }
	#navBtnIcon:before { margin-top:-7px; }
	#navBtnIcon:after { margin-top:7px; }
	#navBtn .close { background:transparent; }
	#navBtn .close:before, #navBtn .close:after { margin-top:0; }
	#navBtn .close:before { transform:rotate(-45deg); -webkit-transform:rotate(-45deg); }
	#navBtn .close:after { transform:rotate(-135deg); -webkit-transform:rotate(-135deg); }
	#TxtMenu img { color:#009944; position:absolute; top:24px; right:-9px; width:38px;  }

}


