@charset "utf-8";
/* pc / sp
============================================================================================================ */
header .d_sp, header .d_sps {
	display: none !important;
}
@media screen and (max-width: 979px) {
	header .d_pc {
		display: none !important;
	}
	header .d_sp {
		display: block !important;
	}
}
@media screen and (max-width: 480px) {
	header .d_sps {
		display: block !important;
	}
}
/* *****************************************************************************
   PC用のスタイル記述
***************************************************************************** */
@media screen and (min-width: 980px), print {
	header {
		position: fixed;
		top: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		z-index: 9999;
		transition: .3s;
		background: #fff;
		/*background: -moz-linear-gradient(top,  rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.1) 70%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.1) 70%,rgba(0,0,0,0) 100%);*/
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d000000', endColorstr='#00000000', GradientType=0);
	}
	header.change {
		background: none;
		background-color: rgba(255, 255, 255, 1);
		filter: none;
		transition: .3s;
	}
	header .logo a {
		background: #fff;
		transform: skewX(-12deg);
		transform-origin: right top;
		display: block;
	}
	header .logo a span {
		width: 140px;
		height: 95px;
		transform: skewX(12deg);
		transform-origin: right top;
		padding: 27px 20px 0 0;
		text-align: center;
		display: block;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		transition: .3s;
	}
	header.change .logo a span {
		width: 110px;
		height: 55px;
		padding: 17px 10px 0 0;
	}
	header .logo img {
		width: 66px;
		height: auto;
	}
	header nav {
		display: flex;
		justify-content: space-between;
	}
	header nav .inner {
		display: block !important;
		padding-right: 2em;
	}
	header nav .inner ul {
		display: flex;
		justify-content: flex-end;
	}
	header nav .inner ul li {
		padding-top: 20px;
		margin-left: 2vw;
	}
	header.change nav .inner ul li {
		padding-top: 25px;
	}
	/*
header nav .inner ul li:first-child {
	padding-top: 20px;
}
*/
	header nav .inner ul li.bnr {
		padding-top: 13px;
	}
	header nav .inner ul li.bnr img {
		height: 30px;
	}
	/*aタグ全体*/
	header nav .inner ul a {
		/*	color: #fff;*/
		color: #000;
		display: block;
		transition: .3s;
	}
	/*第二 第三 change*/
	header.change nav .inner ul a {
		color: #000;
		transition: .3s;
	}
	/*第二 第三*/
	header nav .inner ul a {
		display: flex;
		justify-content: center;
		align-content: center;
		/* height: 3em;*/
		flex-direction: column;
	}
	/*第二*/
	header nav .inner ul > li > ul > li > a {
		color: #fff;
		font-weight: normal;
	}
	header nav .inner ul.sub {
		font-size: 16px;
		font-weight: bold;
		margin-right: 20px;
	}
	header.change nav .inner ul.sub {
		display: none;
	}
	header nav .inner ul.social {
		display: none;
	}
	header nav .inner ul.menu {
		font-size: 18px;
		font-weight: bold;
		margin-right: 30px;
	}
	header nav .inner ul.menu a {
		position: relative;
	}
	/*現在地矢印*/
	/*header nav .inner ul.menu > li.has_snav > a:after {
	content:"";
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 5px 15px 5px;
	border-color: transparent transparent #1677B7 transparent;
	position: absolute;
	left: 50%;
	bottom: -21px;
	margin-left: -5px;
	opacity: 0;
	transition: all 0.3s ease-out 0.3s;
}*/
	/*現在地下線*/
	header nav .inner ul.menu a:before {
		content: "";
		display: inline-block;
		width: 100%;
		height: 3px;
		bottom: -9px;
		background: #1677B7;
		position: absolute;
		left: 0;
		opacity: 0;
		transition: all 0.3s ease-out 0.3s;
	}
	header nav .inner ul.menu > li > ul > li > a:before {
		background: #fff;
		bottom: 7px;
	}
	header nav .inner ul.menu > li > ul > li > ul li a:before {
		bottom: 7px;
	}
	/*階層でだし分け*/
	/*1*/
	header nav .inner ul.menu > li > a.current_line_parent1:before {
		opacity: 1;
	}
	/*2*/
	header nav .inner ul.menu .current_02 > li > a.current_line:before {
		opacity: 1;
	}
	/*3*/
	header nav .inner ul.menu .current_03 > li > a.current_line:before {
		opacity: 1;
	}
	/*3の時の2*/
	header nav .inner ul.menu .current_line_parent3 > a:before {
		opacity: 1;
	}
	/*
header.change nav .inner ul.menu > li.has_snav > a:after {
    border-width: 0px 5px 15px 5px;
    bottom: -32px;
}
*/
	/*  header nav .inner ul.menu > li.current_loca > a:after {
    opacity: 1;
  }*/
	/*header nav .inner ul.menu > li.has_snav:hover > a {
	opacity: 1;
}     
 
*/
	/*header nav .inner ul.menu > li.has_snav:hover > a:after, */header nav .inner ul.menu > li.has_snav.active > a:after {
		opacity: 1;
	}
	/*    header nav .inner ul.menu > li.has_snav:hover >ul  > li >  a 
	{
			 height: 3em;
	}
	*/
	header nav .inner ul.menu > li.has_snav > ul {
		position: absolute;
		/*left: 5px;*/
		left: 0;
		top: 100%;
		width: 100%;
		/* padding: 0 0 0 115px;*/
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex !important;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: center;
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		/*    transition: all 0.3s ease-out 0.3s;*/
		z-index: 999;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	header nav .inner ul.menu > li.has_snav.active > ul {
		z-index: 990;
	}
	/*  header.change nav .inner ul.menu > li.has_snav > ul {
    padding: 0 0 0 85px;
  }*/
	/*open 第二*/
	header nav .inner ul.menu > li.has_snav > ul.current_02, header nav .inner ul.menu > li.has_snav.active > ul {
		padding-top: 0;
		max-height: 9999px;
		opacity: 1;
		visibility: visible;
		z-index: -1;
	}
	/*	
header nav .inner ul.menu > li.has_snav:hover > ul,
header nav .inner ul.menu > li.has_snav.active > ul {
	padding-top: 0;
	max-height: 9999px;
	opacity: 1;
	visibility: visible;
}*/
	/*	header nav .inner ul.menu > li.has_snav:hover > ul, */ header nav .inner ul.menu > li.has_snav.active > ul {
		padding-top: 0;
		max-height: 9999px;
		opacity: 1;
		visibility: visible;
	}
	header nav .inner ul.menu > li.has_snav > ul:after {
		content: "";
		display: inline-block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		/*	left: 115px;*/
		z-index: -1;
		background: #1677B7;
		/*transform: skewX(-12deg);*/
		transform-origin: right top;
	}
	/*
header nav .inner ul.menu > li.has_snav.active > ul:after {
	left: 0;
	background: #24272a;
	transform: skewX(0);
}
*/
	header.change nav .inner ul.menu > li.has_snav > ul:after {
		/*		left: 85px;*/
		left: 0;
	}
	/*
header.change nav .inner ul.menu > li.has_snav.active > ul:after {
	left: 0;
}
*/
/*	header nav .inner ul.menu > li.has_snav:hover > ul {
		z-index: 999;
	}*/
	/*第二、第三*/
	header nav .inner ul.menu > li.has_snav > ul li a {
		height: 3em;
	}
	header nav .inner ul.menu > li.has_snav > ul li {
		padding-top: 0;
		/*    margin-left: 1.5em;*/
	}
	/*  header nav .inner ul.menu > li.has_snav > ul > li > a {
    font-weight: normal;
    padding: 1em 0;
    display: inline-block;
    transition: all 0s;
  }*/
	header.change nav .inner ul.menu > li.has_snav > ul > li > a {
		color: #fff;
	}
	header nav .inner ul li.search img {
		width: 15px;
		height: auto;
		vertical-align: top;
	}
	header nav .inner ul li ul {
		position: absolute;
		display: none;
	}
	header nav .inner ul > li:hover > ul {
		display: block;
		text-align: left;
	}
	header nav .inner ul li ul li ul {
		position: absolute;
		/*    left: 55px;*/
		left: 0;
		top: 100%;
		width: 100%;
		padding-top: 0;
		opacity: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		visibility: hidden;
		/*    transition: all 0.9s ease-out 0.4s;*/
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: center;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		z-index: 1;
	}
	header.change nav .inner ul li ul li ul {
		position: absolute;
		/*left: 25px;*/
		left: 0;
		top: 100%;
		width: 100%;
		padding-top: 0;
		opacity: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		visibility: hidden;
		transition: all 0.9s ease-out 0.4s;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: center;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	/*open 第三*/
	header nav .inner ul > li > ul.current_02 > li > ul.current_03 {
		visibility: visible;
		display: flex;
		opacity:1 ;
	
	}
	
/*open 第二に属さない第三がある時
--------------------------------------------------------------------------------------------------------------*/
	.current_03.no_ul {
		visibility: hidden!important;
		display: none!important;
		opacity: 0!important;
		height: 0!important;
	}
	
		/*open 第二に属さない第三がある時　end
--------------------------------------------------------------------------------------------------------------*/
	
	/*高さ*/
	/*	
	
	header nav .inner ul > li > ul.current_02 > li >a {
			 height: 3em;
	}
		header nav .inner ul > li > ul.current_02 > li > ul.current_03  >li a {
			 height: 3em;
	}*/
	/*hover*/
	/*	header nav .inner ul > li > ul > li:hover > ul {
		visibility: visible;
		display: flex;
		opacity: 1;
	}*/
	header nav .inner ul li ul li ul:after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		/*	left: 48px;*/
		z-index: -1;
		background: #1677B7;
		/*transform: skewX(-12deg);*/
		transform-origin: right top;
		background-color: #D6EAF2;
	}
	/*  header nav .inner ul > li > ul > li > ul > li {
    padding-top: 0 !important;
    margin-left: 1.5em;
    line-height: 3rem;
  }*/
	header nav .inner ul > li > ul > li > ul li a {
		color: #24272A !important;
		font-weight: normal;
	}
/*	header nav .inner ul li ul li ul li:hover ul {
		display: none;
	}*/
	header nav .contact a {
		position: relative;
		top: 0;
		right: -24px;
		background-color: #000;
		transform: skewX(-12deg);
		transform-origin: right top;
		display: block;
	}
	header.change nav .contact a {
		position: relative;
		top: 0;
		right: -24px;
		background-color: #000;
	}
	header nav .contact a span {
		color: #29abe2;
		font-weight: bold;
		width: 148px;
		height: 95px;
		padding: 60px 10px 0 0;
		background: url("../images/icon_contact.svg") right 60px top 14px no-repeat;
		background-size: 35px auto;
		transform: skewX(12deg);
		text-align: center;
		display: block;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 14px;
		transition: 0.3s;
	}
	header.change nav .contact a span {
		width: 110px;
		height: 75px;
		padding: 47px 17px 0 0;
		background: url(../images/icon_contact.svg) right 45px top 10px no-repeat;
		background-size: 35px auto;
		transition: 0.3s;
	}
	header #search-area {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		background-color: #fff;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		z-index: 999;
		display: none;
	}
	header #search-area .btn-close {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 60px;
		height: 60px;
		z-index: 999;
		cursor: pointer;
	}
	header #search-area .btn-close::before, header #search-area .btn-close::after {
		position: absolute;
		top: 50%;
		right: 0;
		content: "";
		width: 50px;
		height: 1px;
		background-color: #1677B7;
		display: block;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	header #search-area .btn-close::after {
		-moz-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	header #search-area p {
		color: #1677B7;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		padding: 40px 0 20px;
	}
	header #search-area form {
		display: flex;
		justify-content: center;
		padding-bottom: 50px;
	}
	header #search-area input {
		color: #333;
		font-size: 20px;
		padding: 10px;
		height: 50px;
		background-color: #fff;
		border: 2px solid #1677B7;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
	}
	header #search-area input[type="text"] {
		width: 60%;
		margin-right: 20px;
	}
	header #search-area input[type="submit"] {
		color: #fff;
		font-size: 16px;
		padding: 10px 30px;
		background-color: #1677B7;
		border: 2px solid #1677B7;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
	}
}
@media screen and (min-width: 1400px), print {
	header nav .inner ul.menu {
		font-size: 20px;
	}
	header nav .inner ul li {
		margin-left: 3vw;
	}
}
@media (min-width: 980px) and (max-width:1041px) {
	header nav .inner ul.menu {
		font-size: 1.6vw;
	}
	header nav .contact a span {
		font-size: 12px;
	}
}
/* *****************************************************************************
   スマートフォン用のスタイル記述
***************************************************************************** */
@media screen and (max-width: 980px) {
	header {
		position: inherit !important;
		background-color: transparent !important;
	}
	.contents_top {
		margin-top: 0 !important;
	}
	header nav .inner ul li {
		margin-left: 10px;
	}
	header .logo {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 999;
	}
	header .logo a {
		width: 88px;
		height: 60px;
		background: #fff;
		transform: skewX(-12deg);
		transform-origin: right top;
		display: block;
	}
	header .logo a span {
		width: 88px;
		height: 60px;
		transform: skewX(12deg);
		transform-origin: right top;
		padding: 13px 8px 0 0;
		text-align: center;
		display: block;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		transition: .3s;
	}
	header .logo img {
		width: 58px;
		height: auto;
	}
	header #menu_open {
		position: fixed;
		top: 0;
		right: 0;
		width: 60px;
		height: 60px;
		z-index: 888;
	}
	header #menu_open:hover {
		cursor: pointer;
	}
	header #menu_open span {
		position: absolute;
		top: 50%;
		right: 14px;
		width: 32px;
		height: 1px;
		background-color: #80b5dc;
	}
	header #menu_open span::before {
		position: absolute;
		top: -10px;
		right: 0;
		content: "";
		width: 32px;
		height: 1px;
		background-color: #80b5dc;
		display: block;
	}
	header #menu_open span::after {
		position: absolute;
		top: 10px;
		right: 0;
		content: "";
		width: 32px;
		height: 1px;
		background-color: #80b5dc;
		display: block;
	}
	header nav {
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		z-index: 999;
	}
	header nav .inner {
		position: absolute;
		/*top: 60px;*/
		top: 0;
		right: 0;
		font-size: 15px;
		width: 100%;
		background: #1677B7;
		text-align: left;
		overflow-y: scroll;
		/*height: calc(100vh - 60px);*/
		height: 100vh;
		display: none;
		z-index: 999;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	header #menu_close {
		position: absolute;
		top: 0;
		right: 0;
		width: 60px;
		height: 60px;
		z-index: 888;
	}
	header #menu_close:hover {
		cursor: pointer;
	}
	header #menu_close span {
		position: absolute;
		top: 50%;
		right: 14px;
		width: 32px;
		height: 1px;
	}
	header #menu_close span::before {
		position: absolute;
		top: 0;
		right: 0;
		content: "";
		width: 32px;
		height: 1px;
		background-color: #fff;
		display: block;
		-moz-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	header #menu_close span::after {
		position: absolute;
		top: 0;
		right: 0;
		content: "";
		width: 32px;
		height: 1px;
		background-color: #fff;
		display: block;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	header nav .inner a {
		color: #fff;
	}
	header nav .inner > ul.menu {
		margin-top: 60px;
		border-top: 1px solid #ffffff4d;
	}
	header nav .inner > ul.sub {
		padding: 0.5em 0;
		border-top: 1px solid #ffffff4d;
	}
	header nav .inner > ul.active {
		display: block;
		left: 0;
	}
	header nav .inner > ul:before {
		content: none;
	}
	header nav .inner > ul li {
		margin: 0;
	}
	header nav .inner > ul li a {
		display: block;
		padding: 0.75em 5%;
		opacity: 1;
		height: auto;
		position: relative;
		z-index: 100;
	}
	header nav .inner > ul.menu > li + li {
		border-top: 1px solid rgba(255, 255, 255, 0.30);
	}
	header nav .inner > ul > li > ul {
		padding: 0.5em 0;
		border-top: 1px solid rgba(255, 255, 255, 0.30);
		display: none;
	}
	header nav .inner > ul > li > ul > li > ul {
		display: none;
	}
	header nav .inner > ul li {
		position: relative;
	}
	header nav .inner > ul li.bnr img {
		height: 30px;
	}
	header nav .inner > ul ul li + li {
		border-top: none;
	}
	header nav .inner > ul ul li a {
		display: block;
		font-size: 13px;
		padding: 0.5em 5%;
		opacity: 1;
		position: relative;
	}
	header nav .inner > ul.sub a {
		display: block;
		font-size: 13px;
		padding: 0.5em 5%;
		opacity: 1;
		position: relative;
	}
	header nav .inner > ul li > ul > li > ul > li a {
		position: relative;
	}
	header nav .inner > ul li > ul > li > ul > li a:before {
		content: "・";
		display: inline-block;
		color: #fff;
	}
	header nav .inner ul > li.has_snav:after {
		content: "";
		display: block;
		width: 8px;
		height: 8px;
		border-top: #fff 2px solid;
		border-right: #fff 2px solid;
		-webkit-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		transform: rotate(135deg);
		position: absolute;
		right: 10.5%;
		top: 1em;
	}
	header nav .inner ul > li.has_snav.open:after {
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		position: absolute;
		right: 10.5%;
		top: 1.2em;
	}
	header nav .inner ul.social {
		font-size: 14px;
		padding: 0 5%;
		display: flex;
	}
	header nav .inner ul.social li {
		padding-right: 10px;
	}
	header nav .inner ul.social li img {
		width: 30px;
		height: auto;
	}
	/* +、- */
	header nav .inner > ul_menu span {
		position: absolute;
		right: 10%;
		top: 50%;
		width: 15px;
		height: 15px;
		margin-top: -7px;
	}
	header nav .inner > ul_menu span:before {
		content: "";
		display: inline-block;
		position: absolute;
		right: 0;
		top: 7px;
		width: 15px;
		height: 1px;
		background: #fff;
	}
	header nav .inner > ul_menu span:after {
		content: "";
		display: inline-block;
		position: absolute;
		right: 7px;
		top: 0;
		width: 1px;
		height: 15px;
		background: #fff;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	header nav .inner > ul_menu.active span:after {
		right: 7px;
		top: 0;
		transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
	}
	header nav .inner ul li.search img {
		width: 15px;
		height: auto;
		vertical-align: top;
	}
	header #search-area {
		display: none !important;
	}
	header #search-area-sp {
		position: relative;
		width: 90%;
		margin: 0 5%;
		border: 1px solid rgba(255, 255, 255, 0.30);
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		z-index: 999;
		display: none;
	}
	header #search-area-sp .btn-close {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 30px;
		height: 30px;
		z-index: 999;
		cursor: pointer;
	}
	header #search-area-sp .btn-close::before, header #search-area-sp .btn-close::after {
		position: absolute;
		top: 50%;
		right: 0;
		content: "";
		width: 30px;
		height: 1px;
		background-color: #fff;
		display: block;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	header #search-area-sp .btn-close::after {
		-moz-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	header #search-area-sp p {
		color: #fff;
		font-size: 13px;
		font-weight: bold;
		text-align: center;
		padding: 10px 0 10px;
	}
	header #search-area-sp form {
		display: flex;
		justify-content: center;
		padding-bottom: 15px;
	}
	header #search-area-sp input {
		color: #333;
		font-size: 13px;
		padding: 5px 10px;
		background-color: #fff;
		border: none;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
	}
	header #search-area-sp input[type="text"] {
		margin-right: 5px;
		width: 60%;
	}
	header #search-area-sp input[type="submit"] {
		color: #1677B7;
		font-size: 13px;
		padding: 5px 20px;
		background-color: #fff;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
	}
}