@charset "utf-8";

/*		Contents
---------------------------------------------------------------------------
	common
	loading
	header
	menu
	main
	footer
------------------------------------------------------------------------ */


/* ========================================================================
	common
======================================================================== */
:root{
	--bg_history:#2AD4DB;
	--bg_diary:#FF8525;
	--bg_teacher:#8C5BD0;
	--bg_turning-point:#21D551;
	--bg_essay:#E83E99;
}

@media print, screen and (min-width:768px){
body{
	position:relative;
	min-width:1260px;
}

body::before{
	content:"";
	position:absolute;
	bottom:0;
	right:0;
	width:100%;
	padding-top:56.875%;
	background:url(../../img/common/bg_body.png) no-repeat center;
	background-size:cover;
}

.sp{
	display:none;
}

.inner{
	position:relative;
	width:1140px;
	margin:0 auto;
}

a img, .fade, .fades a{ transition-duration:0.2s; }
a:hover img, .fade:hover, .fades a:hover{ opacity:0.8; }
.fade:hover img, .fades a:hover img{ opacity:1; }
}

@media screen and (max-width:767px){
body{
	position:relative;
	min-width:320px;
	background:#000436;
	font-size:1.4rem; /* 14px */
}

body::before{
	content:"";
	position:absolute;
	bottom:0;
	right:0;
	width:100%;
	height:546px;
	background:url(../../img/common/bg_body.png) no-repeat right bottom;
	background-size:960px 546px;
}

.pc{
	display:none;
}

.inner{
	position:relative;
	padding:0 20px;
}

iframe{
	width:100%;
}
}


/* ========================================================================
	loading
======================================================================== */
@keyframes fadein{
	from{ opacity:0; }
	to  { opacity:1; } 
}

@keyframes fadeup{
	from{ opacity:0; transform:translateY(20px); }
	to  { opacity:1; transform:translateY(0); } 
}

@keyframes fadedown{
	from{ opacity:0; transform:translateY(-20px); }
	to  { opacity:1; transform:translateY(0); } 
}

#loading{
	position:fixed;
	width:100%;
	height:100%;
	background:#001336;
	z-index:100;
}

#loading .logo{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size:12.0rem;
	font-weight:500;
	color:#FFFFFF;
	letter-spacing:0.02em;
	white-space:nowrap;
	opacity:0;
	animation:fadein 1.0s 1.0s forwards;
	z-index:1;
}

#loading ul{
	display:grid;
	grid-template-columns:repeat(6,1fr);
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	max-width:1920px;
	width:100%;
	height:100%;
}

#loading ul li{
	opacity:0;
	animation:fadedown 1.0s 2.0s forwards;
}
#loading ul li:nth-child(2n){ animation:fadeup 1.0s 2.0s forwards; }

#loading ul li::after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,19,54,0.9);
	mix-blend-mode:color;
}

#loading ul li img{
	width:100%;
	height:100%;
	object-fit:cover;
}

@media screen and (max-width:767px){
#loading .logo{
	font-size:4.0rem;
}
}

@media screen and (max-width:767px),
screen and (orientation: portrait){ /* 縦向き用 */
#loading ul{
	display:flex;
	flex-wrap:wrap;
}

#loading ul li,
#loading ul li:nth-child(2n){
	width:33.33%;
	height:50%;
	animation:fadedown 1.0s 2.0s forwards;
}
#loading ul li:nth-child(2),
#loading ul li:nth-child(5){ animation:fadeup 1.0s 2.0s forwards; }
}

@media screen and (orientation:landscape){ /* 横向き用 */
#loading ul{
	display:grid;
}

#loading ul li,
#loading ul li:nth-child(2n){
	width:auto;
	height:auto;
}
#loading ul li:nth-child(2n){ animation:fadeup 1.0s 2.0s forwards; }
#loading ul li:nth-child(5){ animation:fadedown 1.0s 2.0s forwards; }
}


/* ========================================================================
	header
======================================================================== */
header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
}

header .inner{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:0 100px;
	max-width:1760px;
	width:auto;
	height:140px;
	margin:0 auto;
	padding:0 20px;
}

header .inner h1 a{
	display:block;
	font-size:1.8rem;
	color:#FFFFFF;
	letter-spacing:0.2em;
	text-decoration:none;
}

header .inner .logo{
	display:flex;
	align-items:flex-end;
	flex:1;
	height:140px;
}

@media print, screen and (min-width:768px) and (max-width:1600px){
header .inner{
	gap:0 40px;
}
}

@media screen and (max-width:767px){
header .inner{
	height:70px;
}

header .inner h1 a{
	font-size:1.6rem;
}

header .inner .logo{
	flex:none;
	height:70px;
}
}


/* ========================================================================
	menu
======================================================================== */
#menu .btn{
	display:none;
}

@media screen and (max-width:767px){
#menu .btn{
	display:block;
	position:fixed;
	top:0;
	right:0;
	width:70px;
	height:70px;
	cursor:pointer;
	z-index:20;
}

#menu .btn span{
	position:absolute;
	bottom:20px;
	left:0;
	width:100%;
	text-align:center;
	font-size:1.0rem;
	color:#FFFFFF;
	line-height:1;
}

#menu .btn::before,
#menu .btn.close::before,
#menu .btn.close::after{
	content:"";
	display:block;
	position:relative;
	top:calc(50% - 9px);
	left:50%;
	width:20px;
	height:1px;
	background:#FFFFFF;
	box-shadow:0 -6px 0 0 #FFFFFF, 0 6px 0 0 #FFFFFF;
	transform:translateX(-50%);
	transition-duration:0.2s;
}
#menu .btn.close::before{
	box-shadow:none;
	transform:translateX(-50%) rotate(45deg);
}
#menu .btn.close::after{
	top:calc(50% - 10px);
	box-shadow:none;
	transform:translateX(-50%) rotate(-45deg);
}
}


/* ----------------------------------------
	menu
---------------------------------------- */
@media screen and (max-width:767px){
#menu .menu{
	overflow-y:scroll;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000436;
	z-index:10;
}
}


/* logo
---------------------------------------- */
#menu .menu .logo{
	display:none;
}

@media screen and (max-width:767px){
#menu .menu .logo{
	display:block;
	padding:13px 20px;
}
}


/* gnavi
---------------------------------------- */
#menu .menu .gnavi{
	display:flex;
	gap:0 50px;
}

#menu .menu .gnavi li{
	position:relative;
}

#menu .menu .gnavi a{
	display:flex;
	align-items:center;
	position:relative;
	height:35px;
	color:#FFFFFF;
	line-height:1;
	text-decoration:none;
	white-space:nowrap;
}
#menu .menu .gnavi .kmi a{ margin:0 0 0 50px; }

#menu .menu .gnavi a > span{
	display:block;
	transition:all 0.4s cubic-bezier(0.86, 0, 0.07, 1); /* easeInOutQuint */
}

#menu .menu .gnavi a::after{
	content:attr(data-text);
	position:absolute;
	top:-2px;
	left:50%;
	font-size:1.2rem;
	opacity:0;
	transform:translateX(-50%);
	transition:all 0.4s cubic-bezier(0.86, 0, 0.07, 1); /* easeInOutQuint */
}

#menu .menu .gnavi a:hover > span{
	opacity:0;
	transform:translate(0,100%);
}
#menu .menu .gnavi a:hover::after{
	opacity:1;
	transform:translate(-50%,100%);
}

@media print, screen and (min-width:768px) and (max-width:1600px){
#menu .menu .gnavi{
	gap:0 40px;
}

#menu .menu .gnavi a{
	font-size:1.4rem;
}

#menu .menu .gnavi .kmi a{
	margin-left:0;
}

#menu .menu .gnavi a::after{
	top:1px;
	font-size:1.0rem;
}
}

@media screen and (max-width:767px){
#menu .menu .gnavi{
	display:block;
}

#menu .menu .gnavi li{
	border-top:1px solid #3D3F5D;
}

#menu .menu .gnavi a{
	height:65px;
	padding:0 20px;
	font-size:2.0rem;
	font-weight:500;
}
#menu .menu .gnavi .all a::before,
#menu .menu .gnavi .kmi a::before{ content:none; }

#menu .menu .gnavi a::before{
	content:"";
	position:absolute;
	top:0;
	right:0;
	width:30px;
	height:30px;
	background:var(--bg_history);
}
#menu .menu .gnavi .diary a::before{ background:var(--bg_diary); }
#menu .menu .gnavi .teacher a::before{ background:var(--bg_teacher); }
#menu .menu .gnavi .turning-point a::before{ background:var(--bg_turning-point); }
#menu .menu .gnavi .essay a::before{ background:var(--bg_essay); }

#menu .menu .gnavi a::after{
	position:static;
	margin:0 0 0 16px;
	opacity:1;
	transform:none;
}

#menu .menu .gnavi a:hover > span,
#menu .menu .gnavi a:hover::after{
	opacity:1;
	transform:none;
}

#menu .menu .gnavi .kmi a{
	height:auto;
	margin:50px 0;
}

#menu .menu .gnavi .kmi img{
	width:260px;
}
}


/* ========================================================================
	main
======================================================================== */
main{
	padding:141px 0 0 0;
}

main::before{
	content:"";
	position:absolute;
	top:140px;
	left:0;
	width:100%;
	height:1px;
	background:#3D3F5D;
}

@media screen and (max-width:767px){
main{
	padding:71px 0 0 0;
}

main::before{
	top:70px;
}
}


/* ========================================================================
	footer
======================================================================== */
footer{
	position:relative;
	padding:70px 0 60px 0;
	border-top:1px solid #3D3F5D;
}

footer small{
	display:block;
	font-size:1.2rem;
	color:#FFFFFF;
	line-height:1;
}

@media screen and (max-width:767px){
footer{
	padding:40px 0 30px 0;
}

footer small{
	font-size:1.0rem;
}
}


/* ----------------------------------------
	kmi
---------------------------------------- */
footer .kmi{
	margin:0 0 234px 0;
}

@media screen and (max-width:767px){
footer .kmi{
	margin:0 0 40px 0;
}

footer .kmi img{
	width:260px;
}
}


/* ----------------------------------------
	bnr
---------------------------------------- */
footer .bnr{
	display:flex;
	gap:0 74px;
	height:100%;
	position:absolute;
	top:0;
	right:0;
}

footer .bnr li{
	display:flex;
	align-items:center;
	height:63px;
}

footer .bnr li:last-child{
	position:absolute;
	bottom:0;
	right:0;
	height:auto;
}

@media screen and (max-width:767px){
footer .bnr{
	display:block;
	height:auto;
	position:static;
}

footer .bnr li{
	height:auto;
	margin:0 0 20px 0;
}

footer .bnr li:last-child{
	position:static;
	padding:60px 0 0 0;
}

footer .bnr li img{
	width:140px;
}

footer .bnr li:last-child img{
	width:160px;
}
}


/* ----------------------------------------
	menu
---------------------------------------- */
footer .menu{
	display:flex;
	gap:0 50px;
	margin:0 0 10px 0;
}

footer .menu a{
	display:block;
	padding:0 24px 0 0;
	background:url(../../img/common/arrow.png) no-repeat right center;
	background-size:14px;
	font-size:1.4rem;
	color:#FFFFFF;
	line-height:3.4rem;
	text-decoration:none;
}

footer .menu a:hover{
	text-decoration:underline;
}

@media screen and (max-width:767px){
footer .menu{
	gap:0 40px;
}

footer .menu a{
	padding:0 22px 0 0;
	background-size:12px;
	font-size:1.2rem;
	line-height:3.2rem;
	white-space:nowrap;
}
}