@charset "UTF-8";
/*――――――――――――――――――
	リセット
―――――――――――――――――――*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:400;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}

:root {
	--black: #000;
	--mc: #8ba4b3;
	--tc: #2E2D2C;
	--noto: 'Noto Sans JP', sans-serif;
	--en: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
}
main{
    margin-bottom: -2em;
}
main#top{
    margin-bottom: 0em;
}

/*――――――――――――――――――
	共通
―――――――――――――――――――*/
* {
	box-sizing: border-box;
	-webkit-appearance: none;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	font-feature-settings: "palt";
	font-size: 18px;
	line-height: 2;
	letter-spacing: 0.19em;
	color:#2E2D2C;
	font-family: var(--noto);
}

a {
	color: var(--black);
	text-decoration: none;
}
a.link {
	color: var(--black);
	text-decoration: none;
	font-weight: bold;
	border-bottom: solid 1px #76A0F4;
	transition: opacity .4s ease;
}
.hover{
	transition: opacity .4s ease;
}
.hover:hover{
	opacity: 0.6;
}

img {
	max-width: 100%;
	height: auto;
}
.w1000 {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.spnone {
	display: block;
}
.caption {
	font-size: 14px;
}

@media only screen and (max-width: 1023px) {
	.w1000 {
		padding-left: 3%;
		padding-right: 3%;
	}

	body {
		font-size: 16px;
	}
}

@media only screen and (max-width: 767px) {
	body {
		font-size: 15px;
		line-height: 1.8;
	}

	.w1000 {
		padding-left: 4%;
		padding-right: 4%;
	}
	.spnone {
		display: none;
	}
}

/*――――――――――――――――――
under_mv
―――――――――――――――――――*/
@media only screen and (max-width: 767px) {
	#under_mv .w1000 {
		padding-top: 125px;
	}
	#under_mv .ttl .ja {
		line-height: 1.6;
	}
	#under_mv .ttl br {
		display: block;
	}
}

/*――――――――――――――――――
btn
―――――――――――――――――――*/
.btn01 {
	font-family: var(--noto);
	color: var(--mc);
	font-weight: 500;
	font-size: 13px;
	position: relative;
	padding-right: 40px;
	transition: opacity .4s ease;
}
.btn01.right {
	display: block;
	margin-left: auto;
	max-width: fit-content;
}
.btn01:before,
.btn01:after {
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -20px;
	display: block;
	content: '';
	width: 34px;
	height: 39px;
	background: url(../img/common/btn01.svg) no-repeat center;
}
.btn01:hover {
	opacity: 0.6;
}
.btn01:before {
	opacity: 0;
}
.btn01:hover:before {
	animation: btn_hover 1s ease;
	animation-fill-mode: forwards;
}

@keyframes btn_hover {
	0% {
		transform: scale(1);
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}

/*――――――――――――――――――
ttl
―――――――――――――――――――*/
.ttl01 {
	color: var(--mc);
	line-height: 1.2;
	margin-bottom: 35px;
}
.ttl01 span {
	display: block;
}
.ttl01 .en {
	font-family: var(--en);
	font-size: 17px;
	margin-bottom: 20px;
}
.ttl01 .ja {
	font-size: 18px;
	font-weight: 500;
	font-family: var(--noto);
}

/*――――――――――――――――――
btm_section
―――――――――――――――――――*/
.btm_section{
	position: relative;
	z-index: 3;
	padding: 70px 0 0px;
}
/*.btm_section p:nth-last-child(1){
	margin-bottom: 0;
}*/
@media only screen and (max-width: 767px) {
	.btm_section{
		padding: 50px 0;
	}
}

/*――――――――――――――――――
btm_ttl
―――――――――――――――――――*/
.btm_ttl {
	font-size: 37px;
	font-weight: bold;
	line-height: 1.86;
	margin-bottom: 60px;
}
.btm_sttl {
	font-size: 24px;
	color: var(--mc);
	line-height: 1.86;
	margin-bottom: 10px;
}
.btm_cttl {
	font-size: 23px;
	color: var(--mc);
	margin-bottom: 25px;
}
.btm_cttl .en {
	font-family: var(--en);
	font-size: 23px;
	letter-spacing: 0.2em;
}
.btm_cttl .en:after {
	position: relative;
	top: 5px;
	content: '';
	display: inline-block;
	width: 2px;
	height: 25px;
	background: #76A0F4;
	margin: 0 20px;
}
.btm_cttl .ja {
	font-size: 23px;
	letter-spacing: 0.35em;
	font-weight: bold;
}
@media only screen and (max-width: 1023px) {
	.btm_ttl {
		font-size: 32px;
	}
}
@media only screen and (max-width: 767px) {
	.btm_ttl {
		font-size: 22px;
		margin-bottom: 50px;
	}
	.btm_ttl br {
		display: none;
	}
	.btm_sttl {
		font-size: 16px;
	}
	.btm_cttl  {
		font-size: 16px;	
		margin-bottom: 20px;
	}
	.btm_cttl  .en {
		font-size: 16px;
	}
	.btm_cttl .en:after {
		top: 3px;
		height: 15px;
		margin: 0 10px;
	}
	.btm_cttl .ja {
		font-size: 15px;
	}
}


/*――――――――――――――――――
body_text
―――――――――――――――――――*/
.body_text {
	margin-bottom: 35px;
}
.body_text_lh {
	line-height: 3;
}
@media only screen and (max-width: 767px) {
	.body_text {
		margin-bottom: 15px;
	}
	.body_text_lh {
		line-height: 2;
	}
}

/*――――――――――――――――――
animation
―――――――――――――――――――*/
.animation01,
.animation02 {
	transition: opacity 1s ease,transform 1s ease;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition-delay: .3s;
}
.animation01.active,
.animation02.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.animation02 {
	transition-delay: .6s;
}

/*――――――――――――――――――
	header
―――――――――――――――――――*/
header {
	z-index: 999;
	line-height: 1;
	height: 80px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	padding-left: 28px;
}
header.under #logo a {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
	padding: 23px 150px 0 0;
	background: url(../img/common/logo_w.svg) no-repeat left top/100% auto;
}
header.under #logo.on a {
	background-image: url(../img/common/logo.svg);
}
header.under #g_nav ul a {
	color: #fff;
}
header.under #g_nav ul a.on {
	color: #2c2d2c;
}
header #logo img {
	width: 150px;
}
header #g_nav {
	font-size: 13px;
	font-family: var(--en);
	font-weight: bold;
	letter-spacing: 0.1em;
	position: absolute;
	top: 165px;
	right: 90px;
	text-align: right;
}
header #g_nav:after {
	position: absolute;
	right: 0;
	bottom: -55px;
	content: '';
	display: inline-block;
	width: 14px;
	height: 21px;
	background: url(../img/common/drop.svg) no-repeat center/cover;
}
header #g_nav ul li {
	margin-bottom: 32px;
}
header #g_nav ul li:last-child {
	margin-bottom: 0;
	margin-top: 65px;
}
header #g_nav ul a {
	color: #2c2d2c;
}
header.under #g_nav ul a.on:hover span:nth-child(1) {
	animation: nav_hover 0.15s 0.05s;
}
header.under #g_nav ul a.on:hover span:nth-child(2) {
	animation: nav_hover 0.15s 0.1s;
}
header.under #g_nav ul a.on:hover span:nth-child(3) {
	animation: nav_hover 0.15s 0.15s;
}
header.under #g_nav ul a.on:hover span:nth-child(4) {
	animation: nav_hover 0.15s 0.2s;
}
header.under #g_nav ul a.on:hover span:nth-child(5) {
	animation: nav_hover 0.15s 0.25s;
}
header.under #g_nav ul a.on:hover span:nth-child(6) {
	animation: nav_hover 0.15s 0.3s;
}
header.under #g_nav ul a.on:hover span:nth-child(7) {
	animation: nav_hover 0.15s 0.35s;
}
header.under #g_nav ul a.on:hover span:nth-child(8) {
	animation: nav_hover 0.15s 0.4s;
}
header.under #g_nav ul a.on:hover span:nth-child(9) {
	animation: nav_hover 0.15s 0.45s;
}
header.under #g_nav ul a.on:hover span:nth-child(10) {
	animation: nav_hover 0.15s 0.5s;
}

@keyframes nav_hover {
	0% {
		color: #2c2d2c;
	}
	15%,95% {
		color: var(--mc);
	}
	100% {
		color: #2c2d2c;
	}
}

header.under #g_nav ul a:not(.on):hover span:nth-child(1) {
	animation: nav_hover2 0.2s 0.05s;
}
header.under #g_nav ul a:not(.on):hover span:nth-child(2) {
	animation: nav_hover2 0.2s 0.1s;
}
header.under #g_nav ul a:not(.on):hover span:nth-child(3) {
	animation: nav_hover2 0.2s 0.15s;
}
header.under #g_nav ul a:not(.on):hover span:nth-child(4) {
	animation: nav_hover2 0.2s 0.2s;
}
header.under #g_nav ul a:not(.on):hover span:nth-child(5) {
	animation: nav_hover2 0.2s 0.25s;
}
header.under #g_nav ul a:not(.on):hover span:nth-child(6) {
	animation: nav_hover2 0.2s 0.3s;
}
header.under #g_nav ul a:not(.on):hover span:nth-child(7) {
	animation: nav_hover2 0.2s 0.35s;
}
header.under #g_nav ul a:not(.on):hover span:nth-child(8) {
	animation: nav_hover2 0.2s 0.4s;
}
header.under #g_nav ul a:not(.on):hover span:nth-child(9) {
	animation: nav_hover2 0.2s 0.45s;
}
header.under #g_nav ul a:not(.on):hover span:nth-child(10) {
	animation: nav_hover2 0.2s 0.5s;
}

@keyframes nav_hover2 {
	0% {
		color: #fff;
	}
	35%,65% {
		color: #ccc;
	}
	100% {
		color: #fff;
	}
}

@media only screen and (max-width: 1200px) {
	header #g_nav {
		right: 4vw;
	}
}
@media only screen and (min-width: 1024px) {
	header #g_nav {
		display: block !important;
	}
}

@media only screen and (max-width: 1023px) {
	header.under.menu-open #logo a {
		background-image: url(../img/common/logo.svg);
	}
	header.under.menu-open #g_nav ul li a {
		color: #2c2d2c;
	}
	header #logo {
		position: relative;
		z-index: 99;
	}
	header #g_nav {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		text-align: center;
		padding-top: 150px;
	}
	header #g_nav a {
		font-size: 18px;
	}
}



/*――――――――――――――――――
	cta / footer
―――――――――――――――――――*/
#cta {
	position: relative;
	background: #8ba4b3;
	text-align: center;
	color: #fff;
	padding: 80px 0;
}
#cta.under:before {
	background: url(../img/common/cta2.svg) no-repeat;
}
#cta.under2:before {
	background: url(../img/common/cta3.svg) no-repeat;
}
#cta:before {
	position: absolute;
	display: block;
	content: '';
	width: 50px;
	height: 45px;
	background: url(../img/common/cta.svg) no-repeat;
	top: 0;
	right: 72px;
}
#cta h2 {
	line-height: 1.4;
	margin-bottom: 25px;
}
#cta h2 span {
	display: block;
}
#cta h2 .en {
	font-size: 23px;
	font-family: var(--en);
	margin-bottom: 20px;
}
#cta h2 .ja {
	font-size: 14px;
}
#cta p {
	margin-bottom: 40px;
}
#cta a {
	display: block;
	background: #fff;
	color: var(--mc);
	font-weight: bold;
	font-size: 16px;
	padding: 23px 0;
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
	transition: opacity .4s ease;
}
#cta a:hover {
	opacity: 0.6;
}
#cta a span {
	display: inline-block;
	background: url(../img/common/ic_mail.svg) no-repeat left center;
	padding-left: 40px;
}

@media only screen and (max-width: 1200px) {
	#cta:before {
		right: 2.4vw;
	}
}

@media only screen and (max-width: 767px) {
	#cta p br{
		display: none;
	}
}


/*――――――――――――――――――
footer
―――――――――――――――――――*/

footer {
	padding: 50px 0;
}
footer a {
	transition: opacity .4s ease;
}
footer a:hover {
	opacity: 0.6;
}
footer .w1000 {
	display: flex;
	justify-content: space-between;
}
footer #f_logo {
	font-size: 0;
	line-height: 1;
	margin-bottom: 12px;
}
footer #f_logo img {
	width: 240px;
}
footer small {
	display: block;
	font-size: 12px;
	font-family: var(--noto);
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 20px;
}
footer .privacy {
	font-size: 12px;
	font-family: var(--noto);
	font-weight: 400;
}
footer .privacy a {
	background: url(../img/common/arrow.svg) no-repeat center left;
	padding-left: 20px;
}
footer nav {
	line-height: 1.4;
}
footer nav > ul > li {
	margin-bottom: 18px;
}
footer nav > ul > li:last-child {
	margin-bottom: 0;
}
footer nav > ul > li > a {
	font-size: 13px;
	color: var(--mc);
	font-family: var(--en);
	letter-spacing: 0.1em;
}
footer nav .sub {
	font-family: var(--noto);
	font-size: 14px;
	font-weight: 400;
	margin-top: 15px;
}
footer nav .sub > li > a {
	font-weight: 500;
}
footer nav .sub > li ul {
	margin-top: 15px;
}
footer nav .sub > li ul li {
	margin-bottom: 15px;
}
footer nav .sub > li ul li a {
	position: relative;
	padding-left: 14px;
}
footer nav .sub > li ul li a:before {
	position: absolute;
	top: 50%;
	left: 0;
	content: '';
	display: inline-block;
	width: 10px;
	height: 1px;
	background: var(--black);
}

@media only screen and (max-width: 767px) {
	footer {
		padding-bottom: 80px;
		position: relative;
	}
	footer .w1000 {
		display: block;
	}
	footer .w1000 > div {
		margin-bottom: 18px;
	}
	footer .w1000 nav {
		margin-bottom: 18px;
	}
	footer #f_logo {
		text-align: center;
	}
	footer #f_logo img {
		max-width: 180px;
	}
	footer .privacy {
		text-align: center;
	}
	footer small {
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translate(-50%, 0);
	}
}

/*――――――――――――――――――
	under_mv
―――――――――――――――――――*/
#under_mv {
	background: url(../img/marketing_support/under_mv.jpg) no-repeat center/cover;
}
#under_mv .w1000 {
	height: 390px;
	padding-top: 165px;
}
#under_mv .ttl {
	position: relative;
	line-height: 1.2;
	color: #fff;
}
#under_mv .ttl:before {
	position: absolute;
	top: -20px;
	bottom: -20px;
	left: -38px;
	content: '';
	display: block;
	width: 1px;
	background: #fff;
}
#under_mv .ttl span {
	display: block;
}
#under_mv .ttl .ja {
	font-size: 37px;
	font-weight: bold;
	letter-spacing: 0.35em;
	margin-bottom: 10px;
	line-height: 1.2;
}
#under_mv .ttl .en {
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.13em;
	line-height: 1.2;
}

@media only screen and (max-width: 1200px) {
	#under_mv .ttl {
		padding-left: 38px;
	}
	#under_mv .ttl:before {
		left: 0;
	}
}

@media only screen and (min-width: 1024px) {
	#hb_menu {
		display: none;
	}
}
@media only screen and (max-width: 1023px) {
	#hb_menu {
		position: fixed;
		right: 10px;
		top: 10px;
		z-index: 9999;
		width: 60px;
		height: 60px;
		background: var(--orange);
		padding: 21px 17px 0;
		cursor: pointer;
	}
	#hb_menu.on span {
		background: #fff;
	}
	#hb_menu span {
		height: 2px;
		background: var(--black);
		display: block;
		margin-bottom: 5px;
		transition: .4s ease;
	}
	#hb_menu.open span {
		background: var(--black) !important;
	}
	#hb_menu.open span:nth-child(1) {
		transform: translate(0, 8px) rotate(45deg);
	}
	#hb_menu.open span:nth-child(2) {
		opacity: 0;
	}
	#hb_menu.open span:nth-child(3) {
		transform: translate(0, -6px) rotate(-45deg);
	}

	#under_mv .ttl .ja {
		font-size: 32px;
	}
}


@media only screen and (max-width: 767px) {
	#under_mv .w1000 {
		height: 300px;
		padding-top: 145px;
	}
	#under_mv .ttl {
		padding-left: 20px;
	}
	#under_mv .ttl:before {
		top: -10px;
		bottom: -12px;
	}
	#under_mv .ttl .ja {
		font-size: 22px;
		letter-spacing: 0.1em;
	}
	#under_mv .ttl .en {
		font-size: 14px;
	}
}