@charset "UTF-8";

/* トップページ　スマホ版スタイルシート */

/* 640px以下の画面用 */
@media screen and (max-width : 640px){
	body {
		width: 100%;
		height: 100%;
	}
	a img:hover {
		filter: alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}
	.layout_inner {
		width: 100%;
	}
	#container .wrap {
		width: 100%;
	}
	#coverLayer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		opacity: 0.5;
	}
	.sp_only_disp01 {
		display: inline-block;
	}
	.sp_only_disp02 {
		display: block;
	}
	.sp_disp_none {
		display: none;
	}

/******* header ******/
	#header {
		position: relative;
		z-index: 100;
		min-width: inherit;
		border-top-width: 3px;
	}
	#header .logo {
		width: 30%;
		margin: 6px;
	}
	#header .logo img {
		width: 100%;
		height: auto;
	}
	#header .site_type {
		width: auto;
		margin: 6% 6px 0 0;
		font-size: 75%;
	}
	#header .h-menu {
		width: 50%;
	}
	#header .h-menu li {
		font-size: 62.5%;
	}
	#header .contact {
		width: 40%;
	}
	#header .contact a {
		height: 100%;
		padding: 18.7% 3px;
	}
	#header .contact a:hover {
		filter: alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}
	#header .h-menu .gn {
		width: 60%;
		padding: 7.4% 3px;
	}
       #header .h-menu .gn {padding: 0;}
       #header .h-menu .gn  a {padding: 12.4% 3px;}
        #header .gn a span {
		padding: 0 0 0 12px;
		background-size: 10px;
    }
	#header .gn:hover {
		filter: alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}
	#header .gn span {
		padding: 0 0 0 12px;
		background-size: 10px;
	}


/******* gnav ******/
	#gnav {
		min-width: inherit;
	}
	#gnav ul {
		border-top: 1px solid #555;
	}
	#gnav .state_close {
		display: none;
	}
	#gnav li {
		float: none;
		width: 100%;
		border-bottom: 1px solid #555;
	}
	#gnav li:before {
		display: none !important;
	}
	#gnav li:after {
		display: none !important;
	}
	#gnav li a {
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		position: relative;
		display: block;
		width: 100%;
		height: auto;
		padding: 10px 12% 10px 5%;
		color: #FFF;
		background: #333;
		text-align: left;
	}
	#gnav li a:hover {
		background: #333;
	}
	#gnav li a:after {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		right: 10px;
		width: 10px;
		height: 10px;
		margin: -5px 0 0;
		border-top: 3px solid #FFF;
		border-right: 3px solid #FFF;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#gnav a:hover:after {
		display: block !important;
	}
	#main_image #gnav {
		z-index: 1;
		top: 0;
	}
	#gnav .menu_trigger {
		display: block;
		height: 40px;
		margin: 0;
		padding: 10px 0 5px;
		color: #FFF;
		background: #000;
		font-size: 75%;
		text-align: center;
	}
	.menu_trigger a,
	.menu_trigger a span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu_trigger a {
		position: relative;
		width: 18px;
		height: 18px;
	}
	.menu_trigger a span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 4px;
		background-color: #FFF;
		border-radius: 3px;
	}
	.menu_trigger a span:nth-of-type(1) {
		top: 0;
	}
	.menu_trigger a span:nth-of-type(2) {
		top: 7px;
	}
	.menu_trigger a span:nth-of-type(3) {
		bottom: 0;
	}
	.menu_trigger > span {
		display: block;
		margin: 3px 0 0;
	}
	.menu_trigger a:after {
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		content: '';
		width: 20px;
		height: 20px;
		margin: -12px 0 0 -12px;
		border: 2px solid transparent;
		transition: all .75s;
	}
	.menu_trigger a.active span:nth-of-type(1) {
		-webkit-transform: translateY(7px) rotate(-45deg);
		transform: translateY(7px) rotate(-45deg);
	}
	.menu_trigger a.active span:nth-of-type(2) {
		left: 60%;
		opacity: 0;
		-webkit-animation: active-menu-bar02 .8s forwards;
		animation: active-menu-bar02 .8s forwards;
	}
	@-webkit-keyframes active-menu-bar02 {
		100% {
			height: 0;
		}
	}
	@keyframes active-menu-bar02 {
		100% {
			height: 0;
		}
	}
	.menu_trigger a.active span:nth-of-type(3) {
		-webkit-transform: translateY(-7px) rotate(45deg);
		transform: translateY(-7px) rotate(45deg);
	}
	.menu_trigger a.active::after {
		-webkit-animation: circle .4s .25s forwards;
		animation: circle .4s .25s forwards;
	}
	.menu_trigger a.def::after {
		-webkit-animation: circle02 .4s 0s forwards;
		animation: circle02 .4s 0s forwards;
	}
/******* totop ******/
	#totop {
		padding: 10px 0 0;
		border-top: 2px solid #166493;
	}
	#totop p {
		left: 50%;
		margin-left: -4em;
	}

/******* footer ******/
	#footer {
		min-width: inherit;
	}

/******* f_global_network（ヘッダ・フッタ共通） ******/
	.global_network_wrap a:hover {
		text-decoration:  none;
	}
	.global_network_wrap .layout_inner {
		min-height: inherit;
		padding: 0 0 5px;
		background: url(../images/global_network_wrap_bg.gif) left top no-repeat;
		background-size: 100%;
	}
	.global_network_wrap .ttl {
		padding: 0 5px 5px 0;
		font-size: 225%;
	}
	.global_network_wrap .gn_wrap {
		font-size: 75%;
	}
	.global_network_wrap .c_left {
		width: 45%;
		margin: 0 0 0 5%;
	}
	.global_network_wrap .gn_article_wrap {
		float: none;
		width: auto;
		margin: 0 0 10px;
		border-left: 1px solid #FFF;
	}
	.global_network_wrap .c_right {
		float: left;
		width: 45%;
		border-right: none;
	}
	.global_network_wrap .gn_article_wrap dd dt {
		width: 60%;
	}
	.global_network_wrap .gn_article_wrap dd dd {
		width: 40%;
	}
	.global_network_wrap li {
		padding: 0 0 0 6px;
	}
	.global_network_wrap li:after {
		width: 3px;
	}

/******* f_global_network(フッタのみ) ******/
	.f_global_network .gn_wrap {
		min-height: inherit;
		padding: 0;
		background: none;
	}

/******* f_sitemap ******/
	.f_sitemap {
		padding: 0;
	}
	.fs_type02 {
		display: none;
	}
	.f_sitemap .fs_type01 {
		font-size: 87.5%;
	}	
	.f_sitemap .fs_t01_linklist {
		margin: 0;
		padding: 0;
		border-top: none;
	}
	.fs_type01 li {
		float: none;
		width: 100%;
		margin: 0;
		border-bottom: 1px solid #FFF;
	}
	.fs_type01 a {
		position: relative;
		display: block;
		padding: 10px 12% 10px 5%;
		color: #0E5580;
		text-decoration: none;
	}
	.fs_type01 a:hover {
		text-decoration: none;
	}
	.fs_type01 a:after{
		content: "";
		position: absolute;
		top: 50%;
		right: 10px;
		width: 10px;
		height: 10px;
		margin: -5px 0 0;
		border-top: 3px solid #FFF;
		border-right: 3px solid #FFF;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.fs_type01 .social_button a:after{display: none;}
        .f_sitemap .fs_t01_linklist li.social_button {
		width: 25%;
        }

/******* f_copy ******/
	.f_copy {
		margin: 1px 0 0;
		padding: 10px 5px;
		font-size: 62.5%;
	}

/******* main_image ******/
	#main_image {
		min-width: inherit;
		margin: 0 0 20px;
		padding: 55px 0 0;
	}
	#main_image .main_image_inner ul{
		width: 100%;
	}
	#main_image .main_image_inner li {
		width: 100%;
	}
	#main_image .main_image_inner img {
		width: 100%;
		height: auto;
	}
	#main_image #pager {
		width: auto;
	}

/******* update_list_wrap01 ******/
	.update_list_wrap01 {
		margin: 0 3.125% 20px;
	}
	.update_list_wrap01 h2 {
		margin: 0 0 20px;
		font-size: 137.5%;
	}
	.update_list_wrap01 .update_list_container {
		padding: 0;
		border: none;
	}
	.update_tab01 li {
		min-width: inherit;
		margin: 0 8px 0 0;
		padding: 5px;
		font-size: 87.5%;
	}
	.update_tab01 .current {
		padding-top: 4px;
	}
	.update_list01 a {
		display: block;
		margin: 3px 0 0;
		padding: 0;
		text-decoration: none;
	}
	.update_list01 a:hover {
		text-decoration: none;
	}
	.update_list_wrap01 .more_btn {
		text-align: center;
	}
	.update_list_wrap01 .more_btn a {
		padding: 5px 40px;
	}
	.update_list_wrap01 .more_btn a:hover {
		filter: alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}

/******* home_feature ******/
	.home_feature {
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		min-width: inherit;
		padding: 0 3.125%;
	}
	.home_feature h2 {
		padding: 20px 0;
		background: none;
		font-size: 137.5%;
	}
	.home_feature .hf_intro {
		margin: 0 0 20px;
	}
	.home_feature .hf_catch {
		margin: 0 0 10px;
		font-size: 100%;
		text-align: left;
	}
	.home_feature.hf_making_philosophy {
		margin: 0 0 20px;
		border-top: none;
		border-bottom: none;
	}
	.home_feature .piclist_wrap li {
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		width: 50%;
		border-right: 1px solid #FFF;
		border-bottom: 1px solid #FFF;
	}
	.home_feature .piclist_wrap a:hover {
		filter: alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}
	.home_feature .piclist_wrap li .txt_wrap {
		margin: 0;
		padding: 5px 3px;
		background: #166493;
		font-size: 87.5%;
	}
	.home_feature.hf_making_philosophy .hf_piclist {
		background: none;
	}
	.home_feature.hf_making_philosophy .hf_piclist .piclist_wrap {
		margin: 0;
		border-left: none;
	}
	.home_feature.hf_products .hf_piclist .piclist_wrap {
		margin: 0 0 20px;
	}
	.home_feature.hf_products .piclist_wrap li {
		float: none;
		width: 100%;
		border-right: none;
		background: none;
		text-align: left;
	}
	.home_feature.hf_products .piclist_wrap a {
		display: table;
		position: relative;
		width: 100%;
	}
	.home_feature.hf_products .piclist_wrap li img {
		width: 100%;
	}
	.home_feature.hf_products .piclist_wrap li .img_wrap {
		display: table-cell;
		width: 20%;
	}
	.home_feature.hf_products .piclist_wrap li .txt_wrap {
		display: table-cell;
		width: 80%;
		margin: 0;
		padding: 0 20px 0 13px;
		border-left: 1px solid #FFF;
		vertical-align: middle;
		font-size: 100%;
	}
	.home_feature.hf_products .piclist_wrap a:after {
		content: "";
		position: absolute;
		top: 50%;
		right: 10px;
		width: 10px;
		height: 10px;
		margin: -5px 0 0;
		border-top: 3px solid #FFF;
		border-right: 3px solid #FFF;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.home_feature .btn_list_type01 {
		margin: 0 0 20px;
	}
	.home_feature .btn_list_type01 li {
		display: inline-block;
		width: 49%;
		margin: 0;
		text-align: left;
		font-size: 75%
	}
	.home_feature .btn_list_type01 li:first-child {
		margin: 0 2% 0 0;
	}
	.home_feature .btn_list_type01.one_button li {
		width: 100%;
		margin: 0;
	}
	.home_feature .btn_list_type01 a {
		padding: 10px 8px;
		min-width: inherit;
		font-size: 100%;
	}
	.home_feature .btn_list_type01 span {
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		margin: 0 auto;
		padding: 0 0 0 16px;
		background-size: 14px;
	}
	.home_feature .btn_list_type01_btn01 span {
		width: 8em;
		background-position: 0 12px;
	}
	.home_feature .btn_list_type01_btn02 span {
		width: 10em;
		background-position: 0 10px;
	}
	.home_feature .btn_list_type01.one_button .btn_list_type01_btn01 span {
		width: 12em;
		background-position: 0 2px;
	}
	.home_feature .btn_list_type01 a:hover {
		filter: alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}

/******* bnr_list_type01 ******/
	.bnr_list_type01 .layout_inner {
		margin: 0 0 15px;
		padding: 20px 3.125% 0;
	}
	.bnr_list_type01 ul {
		letter-spacing: normal;
	}
	.bnr_list_type01 li {
		float: left;
		display: block;
		width: 47%;
		margin: 0 0 5px;
	}
	.bnr_list_type01 li:first-child {
		margin-right: 6%;
	}
	.bnr_list_type01 img {
		width: 100%;
		height: auto;
	}
	.bnr_list_type01 a:hover {
		filter: alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}
	
/******* bnr_list_type02 ******/
	.bnr_list_type02 .layout_inner {
		margin-bottom: 10px;
		padding: 0 3.125%;
	}
	.bnr_list_type02 p {
		margin: 0 0 5px;
	}
	.bnr_list_type02 img {
		max-width: 100%;
		height: auto;
	}
	.bnr_list_type02 a:hover {
		filter: alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}
}

@-webkit-keyframes circle {
	0% {
		border-color: transparent;
		-webkit-transform: rotate(0);
	}
	25% {
		border-color: transparent #FFF transparent transparent;
	}
	50% {
		border-color: transparent #FFF #FFF transparent;
	}
	75% {
		border-color: transparent #FFF #FFF #FFF;
	}
	100% {
		border-color: #FFF;
		transform: rotate(-720deg);
	}
}
@keyframes circle {
	0% {
		border-color: transparent;
		transform: rotate(0);
	}
	25% {
		border-color: transparent #FFF transparent transparent;
	}
	50% {
		border-color: transparent #FFF #FFF transparent;
	}
	75% {
		border-color: transparent #FFF #FFF #FFF;
	}
	100% {
		border-color: #FFF;
		transform: rotate(-720deg);
	}
}
@-webkit-keyframes circle02 {
	0% {
		border-color: #000;
		transform: rotate(-720deg);
	}
	100% {
		border-color: transparent;
		transform: rotate(0);
	}
}
@keyframes circle02 {
	0% {
		border-color: #FFF;
	}
	25% {
		border-color: transparent #FFF #FFF #FFF;
	}
	50% {
		border-color: transparent #FFF #FFF transparent;
	}
	75% {
		border-color: transparent #FFF transparent transparent;
	}
	100% {
		border-color: transparent;
		transform: rotate(720deg);
	}
}