@charset "utf-8";

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


/* ========================================================================
	common
======================================================================== */
@media print, screen and (min-width:768px){
body{
	min-width:1260px;
}

.sp{
	display:none;
}

.inner{
	position:relative;
	width:1200px;
	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{
	min-width:320px;
	font-size:1.6rem;
}

.pc{
	display:none;
}

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

iframe{
	width:100%;
}
}


/* ========================================================================
	loading
======================================================================== */
@keyframes fadeUp{
	from{
		opacity:0;
		transform:translateY(60px);
	}
	to{
		opacity:1;
		transform:translateY(0);
	} 
}

@keyframes fadeIn{
	from{
		opacity:0;
	}
	to{
		opacity:1;
	} 
}

#loading{
	display:flex;
	justify-content:center;
	align-items:center;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	height:100dvh;
	background:#ffffff;
	z-index:100;
}

#loading ul{
	position:relative;
	width:300px;
	height:166px;
}

#loading ul li{
	position:absolute;
	top:0;
	left:0;
	opacity:0;
}

#loading ul li:nth-child(1){
	transform:translateY(40px);
	animation:fadeUp 1.0s 0.4s forwards;
}
#loading ul li:nth-child(2){ animation:fadeIn 0.4s 1.4s forwards; }
#loading ul li:nth-child(3){ animation:fadeIn 0.4s 1.8s forwards; }
#loading ul li:nth-child(4){ animation:fadeIn 0.4s 2.2s forwards; }
#loading ul li:nth-child(5){ animation:fadeIn 0.4s 2.6s forwards; }

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

#loading ul{
	width:200px;
}
}


/* ========================================================================
	header
======================================================================== */
header{
	display:flex;
	justify-content:space-between;
	position:relative;
	z-index:10;
}

header h1,
header > .logo{
	padding:28px 0 0 50px;
}

header h1 img,
header > .logo img{
	width:auto;
	height:76px;
}

@media screen and (max-width:767px){
header{
	display:block;
}

header h1,
header > .logo{
	padding:10px 20px;
}

header h1 img,
header > .logo img{
	width:auto;
	height:60px;
}
}


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

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

#menu .btn span{
	display:none;
}

#menu .btn::before,
#menu .btn.close::before,
#menu .btn.close::after{
	content:"";
	display:block;
	position:relative;
	top:50%;
	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% - 1px);
	box-shadow:none;
	transform:translateX(-50%) rotate(-45deg);
}
}


/* ----------------------------------------
	menu
---------------------------------------- */
#menu .menu{
	padding:14px 20px 0 0;
}

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


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

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

#menu .menu .logo img{
	width:auto;
	height:50px;
}
}


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

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

#menu .menu .gnavi a,
#menu .menu .gnavi .none{
	display:flex;
	align-items:center;
	position:relative;
	height:63px;
	padding:0 0 9px 0;
	font-weight:700;
	line-height:1;
	text-decoration:none;
}

#menu .menu .gnavi > li > a::before,
#menu .menu .gnavi .none::before{
	content:"";
	position:absolute;
	bottom:15px;
	left:0;
	width:100%;
	height:2px;
	background:transparent;
	transition-duration:0.2s;
}
#menu .menu .gnavi > li > a:hover::before,
#menu .menu .gnavi .none:hover::before{ background:#3a3a3a; }

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

#menu .menu .gnavi a,
#menu .menu .gnavi .none{
	height:50px;
	padding:0 20px;
	border-top:1px solid #b0b0b0;
}
#menu .menu .gnavi > li > a::before,
#menu .menu .gnavi .none::before{ content:none; }
}


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

@media screen and (max-width:767px){
#menu .menu .gnavi .open,
#menu .menu .gnavi .open::before{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:0;
	right:0;
	width:60px;
	height:50px;
	font-weight:700;
	cursor:pointer;
}
#menu .menu .gnavi .open::before{
	content:"＋";
	width:59px;
	background:#ffffff;
	border-top:1px solid #b0b0b0;
	border-left:1px solid #b0b0b0;
}
#menu .menu .gnavi .open.close::before{ content:"－"; }
}


/* ---------- child ---------- */
#menu .menu .child{
	display:none;
	position:absolute;
	top:63px;
	left:50%;
	padding:15px 30px 10px 20px;
	background:#eaeff3;
	white-space:nowrap;
	transform:translateX(-50%);
}

#menu .menu .child li{
	display:flex;
	margin:0 0 5px 0;
	line-height:2.6rem;
}

#menu .menu .child li::before{
	content:"・";
}

#menu .menu .child a{
	display:inline-block;
	height:auto;
	padding:0;
	font-size:1.6rem;
	line-height:2.6rem;
}
#menu .menu .child a:hover{ text-decoration:underline; }

@media screen and (max-width:767px){
#menu .menu .child{
	position:static;
	padding:0;
	transform:none;
}

#menu .menu .child li{
	display:block;
	margin:0;
}
#menu .menu .child li::before{ content:none; }

#menu .menu .child li a{
	display:flex;
	height:50px;
	padding-left:calc(20px + 1.0em);
}
#menu .menu .child a:hover{ text-decoration:none; }
}


/* ---------- contact ---------- */
#menu .menu .contact a{
	padding:0 38px;
	height:54px;
	background:#7498b3;
	border-radius:27px;
	color:#ffffff;
}
#menu .menu .gnavi .contact a::before{ content:none; }

@media screen and (max-width:767px){
#menu .menu .contact a{
	padding:0 20px;
	height:54px;
	border-radius:0;
}
}


/* ========================================================================
	main
======================================================================== */
main{
}


/* ----------------------------------------
	table
---------------------------------------- */
main table{
	margin:0 0 100px 0;
	line-height:3.0rem;
}

main table th{
	width:220px;
	padding:25px 40px;
	background:#cddbea;
	border-top:1px solid #7498b3;
	border-bottom:1px solid #7498b3;
	text-align:center;
	font-weight:700;
	white-space:nowrap;
}

main table td{
	padding:25px 0 25px 70px;
	border-top:1px solid #c7c7c7;
	border-bottom:1px solid #c7c7c7;
}

@media screen and (max-width:767px){
main table{
	margin:0 0 40px 0;
	border-bottom:1px solid #7498b3;
}

main table th,
main table td{
	display:block;
	width:auto;
	padding:12px 20px;
	border-bottom:none;
	text-align:left;
}
main table td{ border:none; }
}


/* ========================================================================
	footer
======================================================================== */
footer{
	padding:92px 0 80px 0;
	background:#3a3a3a;
	color:#ffffff;
}

footer .logo{
	margin:0 0 30px 0;
}

footer dl{
	margin:0 0 83px 0;
}

footer dl dt{
	margin:0 0 13px 0;
	font-size:2.0rem;
	font-weight:500;
	line-height:1;
}

footer dl dd{
	font-size:1.6rem;
	line-height:3.0rem;
}

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

footer .inner{
	display:flex;
	flex-direction:column;
	align-items:center;
}

footer .logo{
	margin:0 0 40px 0;
	text-align:center;
}

footer dl{
	margin:0 0 30px 0;
}

footer dl dt{
	margin:0 0 10px 0;
	font-size:1.8rem;
}

footer dl dd{
	font-size:1.4rem;
	line-height:2.8rem;
}
}


/* ----------------------------------------
	menu
---------------------------------------- */
footer .menu{
	display:flex;
	gap:0 80px;
	position:absolute;
	top:58px;
	right:0;
}

footer .menu ul{
	padding:0 24px 10px 50px;
	border-left:1px solid #767676;
}

footer .menu a{
	display:block;
	margin:4px 0 0 0;
	font-size:1.6rem;
	font-weight:500;
	color:#ffffff;
	line-height:3.6rem;
	text-decoration:none;
}
footer .menu a:hover{ text-decoration:underline; }

@media screen and (max-width:767px){
footer .menu{
	display:none;
}
}


/* contact
---------------------------------------- */
footer .menu .contact a{
	margin:14px 0 10px -8px;
	padding:0 16px;
	background:#7498b3;
	border-radius:18px;
	text-decoration:none;
}


/* ----------------------------------------
	copyright
---------------------------------------- */
footer .copyright{
	position:relative;
}

footer .copyright ul{
	display:flex;
	gap:0 40px;
	position:absolute;
	top:0;
	right:0;
}

footer .copyright ul li a,
footer .copyright small{
	display:block;
	font-size:1.4rem;
	color:#ffffff;
	line-height:3.4rem;
	text-decoration:none;
}
footer .copyright small{
	font-weight:600;
}
footer .copyright ul li a:hover{
	text-decoration:underline;
}

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

footer .copyright ul{
	justify-content:center;
	position:static;
	margin:0 0 10px 0;
}

footer .copyright ul li a,
footer .copyright small{
	font-size:1.2rem;
	line-height:3.2rem;
}
}