﻿/*================================================
 *  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 { margin-left:10px; }
	.header-left img { width:100%; overflow:hidden; }
	.header-right { margin-right:10px; }
	.header-r-l { margin:0 1rem 0 0; }
	.h-r-top li { font-size:0.9rem; }
	.h-r-bottom li { font-size:1.2rem; background-size:1.2rem; }

/* ヘッダー画像 */
	.header-b-frame-hkc { width:100%; }

/* フッター */
	.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 .slick-next { right:25px; }
	.group-box .slick-prev { left:25px; }

}


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

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

}

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

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

}


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

/* 一般・共通設定 */
	h2 { font-size:1.6rem; margin:0; padding:0; text-align:center; border-left:none; }
	h3 { font-size:1.5rem; /*margin:40px 0 20px 0;*/ }
	h4 { font-size:1.4rem; margin:0 0 35px 0; }
	h5 { font-size:1.2rem; }
	.nw1 img { margin:0 0 0.5em 0.5em; }

/* ヘッダー */
	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%; }
	.header-left img { width:147px; height:44px; }
	.header-right { display:none; }
	.header-b-frame-hkc { width:100%; background-image:none; padding:30px 0; }

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

/* フッター */
	.ftr { background-image:url(../images/02.jpg); top:0; left:0; background-size:cover; background-attachment:fixed; background-position:center; height:auto; }
	.hkcadd { margin:60px auto 75px auto; }
	.hkcadd .name { line-height:1.4; }
	.hkcadd .br::before { content:"\A"; white-space:pre; }
	.hkcadd .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-box { margin:0 auto; }
	.group-box .slick-next:before { display:none; }
	.group-box .slick-prev:before { display:none; }
	.copyright span { display:none; }

/* グローバルナビゲーション */
	.ls10 { letter-spacing:0; }
	.ls15 { letter-spacing:0; }
	.ls20 { letter-spacing:0; }
	nav { background:#f26522; }
	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:#f26522; }
	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:#f26522; }
	nav li a:hover { color:#fff; background:#f26522; 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:#c1501b; }
	nav li li a:hover { color:#fff; background:#c1501b; text-decoration:none; }
	nav li li li a { box-sizing:border-box; width:100%; padding:10px 30px 10px 60px; text-align:left; background:#913c14; }
	nav li li li a:hover { color:#fff; background:#913c14; text-decoration:none; }

	.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:#f26522; }
	#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:#f26522; position:absolute; top:24px; right:-9px; width:38px; }

}
