@charset "UTF-8";

/* 
common
//////////////////////////////////////////////// */

body {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans JP', sans-serif;
	width: 100%;
	height: auto;
}

ul, li, dl, dt, dd {
	display: block;
	margin-left: 0;
	padding-left: 0;
}

ul li, dt, dd {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

img {
	max-width: 100%;
	display: inline-block;
}

@media (min-width: 769px) {

	._sp {
		display: none !important;
	}

	body {
		padding-top: 46px;
	}

}

@media (max-width: 769px) {

	._pc {
		display: none !important;
	}

	body {
		padding-top: 155px;
	}

	#wrapper {
		max-width: 100%;
		overflow: hidden;
	}

}

/* 
header
//////////////////////////////////////////////// */

header {
	position: fixed;
	background: #fff;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 500;
}

header .head_border {
	width: 100%;
	overflow: hidden;
	height: 5px;
	position: absolute;
	left: 0;
	bottom: 0;
}

header .head_border:after {
	content: "";
background: linear-gradient(90deg,rgba(0, 166, 219, 1) 0%, rgba(170, 204, 3, 1) 8%, rgba(247, 210, 0, 1) 17%, rgba(239, 130, 0, 1) 25%, rgba(230, 49, 120, 1) 33%, rgba(239, 130, 0, 1) 42%, rgba(247, 210, 0, 1) 51%, rgba(170, 204, 3, 1) 59%, rgba(0, 166, 219, 1) 67%, rgba(170, 204, 3, 1) 75%, rgba(247, 210, 0, 1) 84%, rgba(239, 130, 0, 1) 92%, rgba(230, 49, 120, 1) 100%);
	width: 300%;
	height: 5px;
	bottom: 0;
	left: 0;
	display: block;
	animation: header_line 20s linear infinite;
	position: absolute;
}

@keyframes header_line {
	0%   { left: 0%; }
	100% { left: -200% }
}

header .headWrap a {
	text-decoration: none;
	color: #1f1f1f;
}

header .headWrap p.groupLogo {
}

header .headWrap ul.global {
}

header .headWrap  {
}

header .subArea {
	background: rgba( 255, 255, 255, 0.9 );
}

header .head_inner {
	position: relative;
}

@media (min-width: 768px) {

	header p#navigation {
		display: none;
	}

	header .headWrap {
		max-width: 1200px;
		margin: 0 auto;
		height: 155px;
	}

	header .headWrap a {
		transition: .3s;
	}

	header .headWrap a:hover {
		opacity: 0.5;
	}

	header .headWrap h1 {
		position: absolute;
		margin: 0;
		padding: 40px 0;
	}

	header .headWrap h1 img {
		width: 280px;
	}

	header .headWrap p.groupLogo {
		max-width: 310px;
		float: right;
		margin: 20px 0 0;
		text-align: right;
	}

	header .headWrap p.groupLogo img {
		width: 270px;
	}

	header .headWrap ul.global {
		display: flex;
		float: right;
		overflow: hidden;
		clear: both;
		align-items: center;
		margin: 10px 0;
	}

	header .headWrap ul.global li {
		border-right: 1px solid #ccc;
		padding: 0 1.5em;
	}

	header .headWrap ul.global li:nth-child(2),
	header .headWrap ul.global li:nth-child(4) {
		padding-right: 0.75em;
	}

	header .headWrap ul.global li span {
		cursor: pointer;
		padding-right: 2rem;
		position: relative;
		transform-origin: center;
		line-height: 1.0;
		transition: .3s;
	}

	header .headWrap ul.global li span:hover {
		opacity: 0.5;
	}

	header .headWrap ul.global li span:after {
		transition: .3s;
		content: "\03e";
		display: inline-block;
		top: 50%;
		transform: scale( 1, 1.4 ) translateY( -50% );
		position: absolute;
		height: 15px;
		width: 15px;
		right: 0.5rem;
	}

	header .headWrap ul.global li span.down:after {
		transform: scale( 1.6, 1 ) rotate( 90deg ) translateX( -25% );
	}

	header .headWrap ul.global li.icons {
		padding: 0 0 0 1em;
		border: none;
		display: block;
	}

	header .headWrap ul.global li.icons a img {
		transition: .3s;
	}

	header .headWrap ul.global li.icons a {
		display: block;
	}

	header .headWrap ul.global li:nth-child(5) a {
		background: url(/shared/image/common/head_btn01_o.png) no-repeat;
		background-size: contain;
	}

	header .headWrap ul.global li:nth-child(6) a {
		background: url(/shared/image/common/head_btn02_o.png) no-repeat;
		background-size: contain;
	}

	header .headWrap ul.global li.icons a:hover img {
		opacity: 0;
	}

	header .headWrap ul.global li img {
		width: 130px;
		vertical-align: text-bottom;

	}

	header .headWrap ul.global li ul.sub {
		display: none;
	}

	header .subArea {
		position: absolute;
		left: 0;
		top: 155px;
		width: 100%;
		z-index: 5;
	}

	header .subArea dl {
		display: none;
		text-align: center;
	}

	header .subArea dl dt {
		padding-right: 1.5em;
		border-right: 5px solid #0ea0d4;
		display: inline;
	}

	header .subArea dl dd {
		display: inline-block;
	}

	header .subArea dl dd ul {
		display: flex;
		margin-left: 0.75em
	}

	header .subArea dl dd ul li {
		margin: 0 0.75em;
	}

}

@media (max-width: 769px) {

	header .headWrap {
		padding: 0.5em;
		display: flex;
		background: #fff;
		align-items: baseline;
	}

	header h1 {
		width: 25%;
		margin: 0 0.25em;
		padding: 0;
	}

	header p.groupLogo {
		width: 30%;
		margin: 0 0.25em;
		padding: 0;
	}

	header ul.global {
		position: fixed;
		width: 80%;
		background: #fff;
		padding: 1em;
		z-index: -1;
		top: 0;
		right: -100%;
		transition:.3s;
		margin-top: 0;
		height: 100vh;
		padding-top: 4.5rem;
		box-sizing: border-box;
		box-shadow: 0 0 0.5em #888;
	}

	header ul.global.slide {
		right: 0%;
	}

	header ul.global li ul {
		display: none;
		padding-left: 1em;
	}

	header ul.global li a,
	header ul.global li span {
		display: block;
		padding: 0.5em;
		border-bottom: 1px solid #ccc;
	}

	header .headWrap ul.global li span:after {
		content: "\03e";
		padding: 0 0 0.35em 0.5em;
		display: block;
		float: right;
		transform-origin: center;
		transform: scale( 1, 1.6 );
		transition: .3s;
		width: 1em;
		height: 1em;
	}

	header .headWrap ul.global li span.down:after {
		transform: scale( 1.6, 1 ) rotate( 90deg );
	}

	header ul.global li.icons {
		float: left;
		width: 50%;
		padding: 1em 0 0;
	}

	header ul.global li.icons a {
		border-bottom: 0;
		padding: 0;
	}

	header ul.global li.icons a img {
		display: block;
		width: 90%;
		margin: 0 auto;
	}

	header p#navigation {
		position: fixed;
		right: 3%;
		top: 0;
		width: 10%;
		margin: 0;
		z-index: 999;
		height:3.2rem;
	}

	header p#navigation a {
		display: block;
		width: 100%;
		padding-top: 100%;
	}

	header p#navigation a span {
		transition: .3s;
		height: 2px;
		background: #000;
		position: absolute;
		display: block;
		transition: .3s;
		top: 50%;
		left: 50%;
		box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
	}

	header p#navigation a span:nth-child(1) {
		transform: translate( -50%, -12px );
		width: 70%;
	}

	header p#navigation a span:nth-child(2) {
		transform: translate( -50%, -4px );
		width: 70%;
	}

	header p#navigation a span:nth-child(3) {
		transform: translate( -50%, 4px );
		width: 70%;
	}

	header p#navigation.open a span:nth-child(1) {
		transform: translate( -50%, -6px ) rotate( 45deg );
		width: 65%;
	}

	header p#navigation.open a span:nth-child(2) {
		width: 0;
	}

	header p#navigation.open a span:nth-child(3) {
		transform: translate( -50%, -6px ) rotate( -45deg );
		width: 65%;
	}

	header p#navigation a small.off,
	header p#navigation a small.on {
		position: absolute;
		bottom: 0;
		width: 100%;
		text-align: center;
	}

	header p#navigation.open a small.off,
	header p#navigation.close a small.on,
	header .subArea {
		display: none;
	}

}

/* 
footer
//////////////////////////////////////////////// */

footer {
	background: #000;
	color: #fff;
	text-align: center;
}

footer a {
	color: #fff;
	text-decoration: none;
}

@media (min-width: 768px) {

	footer {
		padding: 1.5em 0;
	}

	footer a {
		transition: .3s;
	}

	footer a:hover {
		opacity: 0.5;
	}

	footer ul {
		display: flex;
		justify-content: center;
		margin: 1em 0;
	}

	footer ul li {
		margin: 0 0.5em;
	}

	footer p {
		margin: 1em 0;
	}

}

@media (max-width: 769px) {

	footer {
		padding: 1.5em;
	}

	footer ul {
		width: 100%;
		text-align: left;
		display: inline-block;
		margin: 0;
		font-size: 80%;
		line-height: 2;
	}

	footer ul li {
		display: inline-block;
		padding-right: 1.5em;
	}

	footer p {
		margin-bottom: 0;
		font-size: 80%;
	}

}


/* inner

//////////////////////////////////////////////// */

.head_wrap {
	background: url(/shared/image/common/common_head01.png) no-repeat;
	background-size: 100%;
	position: relative;
	color: #fff;
	width: 100%;
	overflow: hidden;
}

.head_wrap h1 {
	margin: 0;
	position: absolute;
	top: 50%;
	color: #fff;
	width: 100%;
	text-align: center;
	transform: translateY( -50% );
}

.head_wrap:after {
	content: "";
	background: linear-gradient(90deg,rgba(230, 49, 120, 1) 0%, rgba(239, 130, 0, 1) 8%, rgba(247, 210, 0, 1) 17%, rgba(170, 204, 3, 1) 25%, rgba(0, 166, 219, 1) 33%, rgba(170, 204, 3, 1) 42%, rgba(247, 210, 0, 1) 51%, rgba(239, 130, 0, 1) 59%, rgba(230, 49, 120, 1) 67%, rgba(239, 130, 0, 1) 75%, rgba(247, 210, 0, 1) 84%, rgba(170, 204, 3, 1) 92%, rgba(0, 166, 219, 1) 100%);
	width: 300%;
	height: 5px;
	bottom: 0;
	left: 0;
	display: block;
	animation: header_line 20s linear infinite;
	position: absolute;
}

@keyframes header_line {
	0%   { left: 0%; }
	100% { left: -200% }
}

@media (min-width: 768px) {

	.head_wrap {
		height: 15rem;
		font-size: 1.2rem;
	}

}

@media (max-width: 769px) {


	.head_wrap {
		background-size: cover;
		height: 7.5rem;
		font-size: 1rem;
	}

}



/* fade
************************************************************************************** */

.f_left {
	opacity : 0;
	transform: translateX(-5%);
	transition: 2s;
	position: relative;
}

@media (min-width: 768px) {

	.p_left {
		opacity : 0;
		transform: translateX(-25%);
		transition: 1s;
		position: relative;
	}

	.p_right {
		opacity : 0;
		transform: translateX(25%);
		transition: 1s;
		position: relative;
	}

	.p_bottom {
		opacity : 0;
		transform: translateY(100px);
		transition: 1s;
		position: relative;
	}

}

@media (max-width: 768px) {

	.p_left,
	.p_right,
	.p_bottom {
		opacity : 0;
		transform: translateY(100px);
		transition: 2s;
		position: relative;
	}

}