@charset "UTF-8";

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
	margin: 0;
	padding: 0;
}
section,article,aside,nav,header,footer,hgroup,details,figcaption,figure,menu{
	display: block;
}
a{
	outline: none;
	word-break: break-all;
}


/* base
----------------------------------------*/
html {
	font-size: 62.5%;
	overflow: auto;
}
body {
	width: 100%;
	color: #000;
	font-family: "游ゴシック","Yu Gothic","游ゴシック体",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size: 1.6rem;
	line-height: 1;
	overflow: hidden;
	word-break: break-all;
}

a:focus {outline:none;}
a:link {color:#000;text-decoration:underline;}
a:visited {color:#000;text-decoration:underline;}
a:active, a:hover {color:#000;text-decoration:none;}
img{vertical-align: bottom;}
.spview{display: none;}

@media screen and (max-width: 812px){
	body{
		-webkit-text-size-adjust: 100%;
	}
}

@media screen and (max-width: 767px){
	.pcview{display: none;}
	.spview{display: block;}
}


/* localheader
----------------------------------------*/
.nxt_header{
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.nxt_header img{
	max-width: 1000px;
	width: 100%;
}
.logo-sp{
	display: none;
}
@media screen and (max-width: 767px){
	.logo-sp{
		display: block;
		text-align: center;
		padding: 10px 0 10px 0;
		background-color: #fff;
	}
	.logo-sp img{
		width: auto;
		height: 30px;
	}
}


/* header
----------------------------------------*/
.header{
	margin-bottom: 10px;
	padding: 37px 10px;
	background: url(/atclh/NXT/21/fptjapan/bg-series-title.jpg) no-repeat center;
	background-size: cover;
}
.header-heading{
	max-width: 836px;
	margin: 0 auto;
}
.header-heading img{
	width: 100%;
	height: auto;
}
.header-heading a{
	transition: .3s;
}
.header-heading a:hover{
	opacity: 0.8;
}

@media screen and (max-width: 767px){
	.header{
		margin-bottom: 10px;
	}
}


/* nav
----------------------------------------*/
.nav{
	max-width: 1200px;
	margin: 0 auto;
}
.nav-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
.nav-list li{
	position: relative;
	width: calc(100% / 7);
	box-sizing: border-box;
	font-size: 2.0rem;
	font-weight: bold;
	list-style: none;
	text-align: center;
}
.nav-list li::before{
	position: absolute;
	bottom: -2px;
	left: 0;
	display: none;
	width: calc(100% - 1px);
	height: 2px;
	content: "";
}
.nav-list li:nth-child(odd)::before{
	background: #7ad900;
}
.nav-list li:nth-child(even)::before{
	background: #005eb0;
}
.nav-list li::after{
	position: absolute;
	top: 50%;
	right: 0;
	display: inline-block;
	width: 1px;
	height: 60%;
	transform: translateY(-50%);
	background: #ccc;
	content: "";
}
.nav-list li:nth-of-type(7n)::after{
	background: none;
}
.nav-list li.comingsoon{
	padding: 0 3px;
	color: #b2b2b2;
}
.nav-list li a{
	display: block;
	width: calc(100% - 2px);
	height: 100%;
	box-sizing: border-box;
	margin: 0 1px;
	padding: 10px 3px;
	border-bottom: solid 2px transparent;
	text-decoration: none;
	transition: .3s;
	opacity: 0.7;
}
.nav-list li a:hover{
	opacity: 1;
}
.nav-list li:nth-child(odd) a{
	color: #7ad900;
}
.nav-list li:nth-child(odd) a:hover{
	color: #7ad900;
}
.nav-list li:nth-child(odd) a:hover::before{
	position: absolute;
	bottom: -2px;
	left: 0;
	display: inline-block;
	width: calc(100% - 1px);
	height: 2px;
	background: #7ad900;
	content: "";
}
.nav-list li:nth-child(even) a{
	color: #005eb0;
}
.nav-list li:nth-child(even) a:hover{
	color: #005eb0;
}
.nav-list li:nth-child(even) a:hover::before{
	position: absolute;
	bottom: -2px;
	left: 0;
	display: inline-block;
	width: calc(100% - 1px);
	height: 2px;
	background: #005eb0;
	content: "";
}
.nav-list li b{
	font-size: 2.6rem;
}
.nav-list li.seminar{
	font-size: 1.7rem;
}

@media screen and (max-width: 767px){
	.nav-list li{
		width: calc(100% / 5);
		font-size: 1.6rem;
	}
	.nav-list li:nth-of-type(7)::after{
		background: #ccc;
	}
	.nav-list li:nth-child(5n)::after{
		background: none;
	}
	.nav-list li.seminar{
		font-size: 1.3rem;
	}
}



/* contents
----------------------------------------*/
.contents{
	margin-top: 10px;
	border-bottom: solid 1px #ccc;
}
.contents-inner{
	max-width: 900px;
	margin: 0 auto;
	padding: 80px 4%;
}
.contents-heading{
	margin-bottom: 45px;
	color: #000;
	font-feature-settings: "palt";
	font-size: 4.0rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 1.4;
	text-align: center;
}
.green .contents-heading{
	color: #1468b1;
}
.blue .contents-heading{
	color: #75cf00;
}

@media screen and (max-width: 767px){
	.contents{
		margin-top: 10px;
	}
	.contents-inner{
		padding: 40px 4%;
	}
	.contents-heading{
		margin-bottom: 30px;
		font-size: 3.6rem;
	}
}


/* main-img
----------------------------------------*/
.main-img{
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}
.main-img img{
	width: 100%;
	height: auto;
}
.main-keyword{
	position: absolute;
	bottom: 30px;
	left: 0;
	min-width: 440px;
	padding: 20px;
	background: #000;
	color: #fff;
	font-size: 3.0rem;
	font-weight: bold;
	text-align: center;
}
.green .main-keyword{
	background: rgba(122,217,0,0.94);
}
.blue .main-keyword{
	background: rgba(0,94,176,0.94);
}
.main-keyword b{
	font-size: 4.0rem;
}
.main-keyword span{
	margin-left: 0.5em;
	font-size: 2.6rem;
}

@media screen and (max-width: 767px){
	.main-keyword{
		position: static;
		min-width: unset;
		width: 92%;
		margin: 10px auto 0;
		padding: 10px;
		box-sizing: border-box;
	}
}


/* lead
----------------------------------------*/
.lead p{
	font-size: 1.6rem;
	line-height: 2;
}


/* section
----------------------------------------*/
.section::before,
.section::after{
	content: "";
	display: block;
	clear: both;
}
.section{
	margin: 0 auto;
	padding: 80px 4%;
}
.section:nth-child(odd){
	background: #fafafa;
}
.section-inner{
	max-width: 900px;
	margin: 0 auto;
}
.section-heading{
	position: relative;
	margin-bottom: 50px;
	padding-bottom: 25px;
	font-feature-settings: "palt";
	font-size: 3.2rem;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-align: center;
}
.section-heading::before{
	content: " ";
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 80px;
	height: 3px;
	background: #005eb0;
	transform: translateX(-50%);
}
.section-heading::after{
	content: " ";
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 40px;
	height: 3px;
	background: #7ad900;
}
.section-inner > p{
	margin-bottom: 1.5em;
	font-size: 1.6rem;
	line-height: 2;
}
.section-inner > p:last-of-type{
	margin-bottom: 0;
}
.section-inner > p.question{
	color: #4c4c4c;
	font-weight: bold;
}
.section-inner > p.note{
	font-size: 86%;
}

@media screen and (max-width: 767px){
	.section{
		padding: 50px 4%;
	}
	.section-heading{
		margin-bottom: 20px;
	}
}


/* photo
----------------------------------------*/
figure img{
	width: 100%;
	height: auto;
}
.f_left{
	float: left;
	width: 50%;
	margin: 5px 5.55555555555556% 70px 0;
}
.f_right{
	float: right;
	width: 50%;
	margin: 5px 0 40px 5.55555555555556%;
}
figcaption{
	margin-top: 20px;
	font-size: 1.4rem;
	line-height: 1.6;
}
figcaption span{
	font-size: 1.8rem;
}
figcaption b{
	display: block;
	margin-bottom: 5px;
	font-size: 1.8rem;
	font-weight: bold;
}

@media screen and (max-width: 767px){
	.f_left,.f_right{
		float: none;
		width: 80%;
		margin: 40px auto;
	}
}


/* aside
----------------------------------------*/
.aside{
	padding: 80px 4%;
	background: url(/atclh/NXT/21/fptjapan/bg-aside.png);
}
.aside-inner{
	display: flex;
	flex-wrap: wrap;
	max-width: 900px;
	margin: 0 auto;
}
.aside-inner + .aside-inner{
	margin-top: 50px;
}
.aside-heading{
	width: 180px;
}
.aside-heading span{
	display: inline-block;
	padding: 12px 20px;
	background: rgba(255,255,255,0.6);
	border: solid 1px #005eb0;
	color: #005eb0;
	font-feature-settings: "palt";
	font-size: 1.8rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 1;
}
.aside-text{
	width: calc(100% - 180px);
}
.aside-text-list{
	margin-left: 20px;
}
.aside-text-list li{
	margin-top: 10px;
	padding-left: 1em;
	text-indent: -1em;
	color: #5ea600;
}
.aside-text-list li:first-child{
	margin-top: 0;
}
.aside-text-list li,
.aside-text p{
	font-size: 1.6rem;
	line-height: 1.4;
}
.aside-text p a{
	display: inline-block;
	margin-top: 10px;
}
.aside-text a{
	color: #5ea600;
}


@media screen and (max-width: 767px){
	.aside{
		/*padding: 50px 4%;*/
		padding: 50px 4% 80px;
	}
	.aside-heading{
		width: 100%;
		margin-bottom: 10px;
	}
	.aside-heading span{
		display: block;
	}
	.aside-text{
		width: 100%;
		margin-top: 10px;
	}
	.aside-inner + .aside-inner{
		margin-top: 25px;
	}
}


/* back
----------------------------------------*/
.back-index{
	padding: 80px 4%;
}
.back-index-title{
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}
.back-index-btn{
	max-width: 350px;
	margin: 25px auto 0;
	text-align: center;
}
.back-index-btn a{
	display: block;
	padding: 20px 10px;
	background: #7ad900;
	border-radius: 10px;
	color: #fff;
	font-size: 2.0rem;
	font-weight: bold;
	text-decoration: none;
	transition: .3s
}
.back-index-btn a:hover{
	opacity: 0.7;
}

@media screen and (max-width: 767px){
	.back-index{
		padding: 50px 4% 80px;
	}
	.back-index-btn{
		width: 80%;
	}
}


/* pagetop
----------------------------------------*/
.pagetop{
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}
.pagetop p{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 60px;
	height: 60px;
}
.pagetop p img{
	width: 100%;
	height: auto;
}
.pagetop a{
	transition: .3s;
}
.pagetop a:hover{
	opacity: 0.7;
}


/* footer
----------------------------------------*/
footer{
	padding-top: 15px;
	border-top: solid 1px #ebebeb;
}


/* btn
----------------------------------------*/
.contact-btn{
	overflow: hidden;
	position: fixed;
	bottom: 0;
	z-index: 9;
	width: 500px;
	right: -500px;
	margin-bottom: 20px;
	background: url("/atclh/NXT/21/fptjapan/bnr-contact-hover.png") no-repeat right center;
	background-size: auto 100%;
	transition: transform .6s cubic-bezier(.210,.60,.350,1),right .6s cubic-bezier(.210,.60,.350,1);
	transform: translateX(40px);
	opacity: 0;
	padding-left: 60px;
}
.contact-btn.open{
	right: 0 !important
}
.contact-btn.close{
	right: -500px !important
}
.contact-btn .btn{
	position: absolute;
	left: 0;
	top: 0;
	width: 60px;
	height: 150px;
	background-image: url("/atclh/NXT/21/fptjapan/btn-contact-close.png");
	background-position: center;
	background-size: 100%;
	cursor: pointer;
	transition: opacity .6s cubic-bezier(.210,.60,.350,1);
	opacity: 1 !important;
}
.contact-btn.close .btn{
	background-image: url("/atclh/NXT/21/fptjapan/btn-contact.png");
}
.contact-btn.fade{
	transform: translateX(0);
	opacity: 1;
}
.contact-btn a{
	transition: .3s;
}
.contact-btn a:hover{
	opacity: 0.8;
}
.contact-btn img{
	width: 100%;
	height: auto;
}
@media only screen and (max-width: 767px){
	.contact-btn{
		width: 300px;
		right: -300px;
		padding-left: 36px;
	}
	.contact-btn.close{
		right: -300px !important
	}
	.contact-btn .btn{
		width: 36px;
		height: 90px;
	}
}