/* =====================================================
   レスポンシブウェブデザイン用css
   /share/css/default.cssを読み込んだ後に設定すること
   !!! This file should not be edited !!! 編集不可 !!!
===================================================== */

/* --------------------------------------------
 For PC 
-------------------------------------------- */

.headbox {
	height:auto;
}

.head_leftbox {
	height:76px;
}

/* スマフォで見たときのみ"sp"のclassがついた画像非表示 */
@media screen and (max-width: 768px) {
#sp_head .sp { display: none !important; }
}


/* ========= global_navi ========= */

#global_navi {
	float:left;
}

#global_navi:after {
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
	content: '[.]';
	overflow:hidden;
}

header #global_navi ul li a:hover,
header #global_navi ul li#here a {
	color:#f6f6f6 !important;
}

/* --------------------------------------------
 For Mobile 
-------------------------------------------- */

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

/* ========= header ========= */

	.headbox {
		width: 100%;
		height:auto;
		position: relative;
	}
	.head_leftbox {
		height:65px;
	}
	.head_leftbox h1 {
		padding-left:2%;
	}
	.head_leftbox h1 img {
		height:50px;
		width:auto;
		margin-top:3px;
	}
	#sp_head {
		background: #fff;
		width: 100%;
		z-index: 999;
		position: fixed;
		height:65px;
	}
	.head_leftbox,
	.head_rightbox {
		width: 100%;
		float:none;
	}
	.head_rightbox {
		text-align:left;
		padding-top:0;
	}
	.worldwide,
	li.home {
		display:none;
	}
	.head_rightbox li {
		float:none;
		background: none;
		padding: 0 0;
		font-size:14px;
	}
	.head_list li {
		margin-right:0;
	}
	.head_list:after {
		clear: both;
		height: 0;
		visibility: hidden;
		display: block;
		content: '[.]';
		overflow:hidden;
	}

/* ========= Toggle Button, open時ナビゲーション ========= */

	#nav-toggle {
		display: none;
		position: absolute;
		right: 15px;
		top: 22px;
		width: 32px;
		height: 34px;
		cursor: pointer;
		z-index: 101;
	}
	#nav-toggle div {
		position: relative;
	}
	#nav-toggle span {
		display: block;
		position: absolute;
		height: 4px;
		width: 100%;
		background: #666;
		left: 0;
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
	}
	#nav-toggle span:nth-child(1) {
		top: 0;
	}
	#nav-toggle span:nth-child(2) {
		top: 10px;
	}
	#nav-toggle span:nth-child(3) {
		top: 20px;
	}

	#sp_navi {
		/* 開いてないときは画面外に配置 */
		overflow: auto;
		position: fixed;
		right: -100%;
		background: #f6f6f6;
		width: 100%;
		padding:0 0;
		-webkit-transition: transform 0.5s ease;
		/*-webkit-transition: 0.5s ease;*/
		-moz-transition: 0.5s ease;
		transition: 0.5s ease;
		box-shadow: 0px 3px 4px 0px #ddd;
		/* 201805追加 */
		z-index: 9999 !important;
		/* iOS でのちらつきを抑える */
-webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
     -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
	}
	#sp_navi ul {
		list-style: none;
	}
	#sp_navi ul li {
		float: none;
	}
	#nav-toggle {
		display: block;
	}

	/* #nav-toggle 切り替えアニメーション */
	.open #nav-toggle span:nth-child(1) {
		top: 11px;
		-webkit-transform: rotate(315deg);
		-moz-transform: rotate(315deg);
		transform: rotate(315deg);
	}
	.open #nav-toggle span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.open #nav-toggle span:nth-child(3) {
		top: 11px;
		-webkit-transform: rotate(-315deg);
		-moz-transform: rotate(-315deg);
		transform: rotate(-315deg);
	}

	/* #sp_navi スライドアニメーション */
	.open #sp_navi {
		/* translateYの場合：#sp_navi top + .head_leftbox height */
		/* -moz-transform: translateX(800px); */
		/* -webkit-transform: translateX(800px); */
		/* transform: translateX(800px); */
		
		right: 0;
	}

/* ========= お問い合わせ、サイトマップ ========= */

	#sp_navi ul li.toiawase,
	#sp_navi ul li.sitemap {
		display:inline-block;
		width:50%;
		box-sizing: border-box;
		padding:7px 0;
		float:left;
		text-align:center;
		background-color:#eee;
		border-bottom:1px solid #ddd;
		font-size:0.8rem;
	}
	#sp_navi ul li.toiawase {
		border-right:1px solid #ddd;
	}
	#sp_navi ul li.sitemap {
		border-left:1px solid #fff;
	}
	#sp_navi ul li.toiawase a,
	#sp_navi ul li.sitemap a{
		display:block;
		width:100%;
	}
	#sp_navi ul li.toiawase a:hover,
	#sp_navi ul li.sitemap a:hover{
		text-decoration: none;
	}

/* ========= global_navi ========= */

	#global_navi {
		height: auto;
		width: 100%;
		margin-bottom:0;
		float:none;
	}
	#global_navi ul li{
		width:94%;
		padding:12px 3%;
		margin-bottom:0;
		border-bottom:1px solid #ddd;
		border-right:none;
		border-left:none;
		float:none;
		font-size: 16px;
		letter-spacing:1px;
	}
	#global_navi ul li a {
		display:block;
		width:100%;
		text-align:left;
	}

	#global_navi ul li div {
		border-right:none;
	}

	#global_navi ul li div:first-child {
		width:94%;
		border-left:none;
	}

	header #global_navi ul li a:hover,
	header #global_navi ul li#here a {
		background-color:#f6f6f6;
		border-radius: 0;
		color:#222 !important;
		margin:0 0;
		width:100%;
	}

/* ========= i-search 検索 ========= */

	.search_waku{
		float:none;
		display:block;
		width:100%;
		height:38px;
		margin-bottom:0;
	}

	.i-search {
		padding:7px 10px;
		background-color:#ddd;
	}

	.search_waku input[type="text"] {
		background: #fff none repeat scroll 0 0;
		border: medium none;
		border-radius: 24px;
		box-sizing: border-box;
		font-size: 1rem;
		height: 24px !important;
		margin: 0 !important;
		padding: 0 1em !important;
		width: 75% !important;
		line-height:1;
	}

	/* Search button */
	.i-search input.i-search-button{
		width: 20% !important;
		max-width: 70px;
		min-width: 20%;
		float:right;
		height: 24px !important;
		background-color: #f6f6f6;
		border: 1px solid #ccc;
}



/* ========= contents ========= */
    #topic_path {
        display: none;
    }
    #contents_title{
        border-top: 1px solid #ddd;
    }
    
	#topic_path .inside_box,
	#contents_title h2{
		width:94%;
		padding-left:3%;
		padding-right:3%;
	}

	#contents_title h2 {
		padding-top:30px;
		padding-bottom:30px;
	}

	#container {
		width:100%;
	}

/* ========= footer ========= */

	footer .navi_area {
		padding: 0 0;
	}
	footer #gototop,
	footer nav,
	footer aside,
	footer .category {
		width:100%;
	}
	footer #gototop img{
	margin-right:10px;
	}
	footer nav dt {
		width:94%;
		padding:10px 3%;
		margin-bottom:0;
		border-bottom:1px solid #ddd;
	}
	footer nav dt a {
		display:block;
		width:100%;
	}
	
	footer nav dt a:hover {
		text-decoration:none;
	}
	footer .navi_area dd {
		display:none;
	}
	footer .copyright_area aside {
		width:94%;
		padding:0 3%;
	}
	footer .copyright_area aside li {
	font-size:12px;
	float:left;
	}
	footer .copyright_area aside p {
	clear:both;
	padding-top:5px;
	}

}