@charset "utf-8";

/*		Contents
---------------------------------------------------------------------------
	common
	loading
	header
	menu
	main
	title
	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;
}

.pc{
	display:none;
}

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

iframe{
	width:100%;
}
}


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

#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 > img{
	opacity:0;
	transform:translateY(40px);
	animation:fadeUpAnime 1.0s 0.4s forwards;
}

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

#loading > img{
	width:240px;
}
}


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

header h1,
header > .logo{
	position:absolute;
	top:14px;
	left:30px;
}

@media print, screen and (min-width:768px) and (max-width:1400px){
header h1 img,
header > .logo img{
	width:320px;
}
}

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

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

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


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

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

#menu .switch span{
	display:none;
}

#menu .switch::before,
#menu .switch.close::before,
#menu .switch.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 .switch.close::before{
	box-shadow:none;
	transform:translateX(-50%) rotate(45deg);
}
#menu .switch.close::after{
	top:calc(50% - 1px);
	box-shadow:none;
	transform:translateX(-50%) rotate(-45deg);
}
}


/* ----------------------------------------
	menu
---------------------------------------- */
#menu .menu{
	display:flex;
	gap:0 54px;
	position:absolute;
	top:0;
	right:0;
	z-index:10;
}

#menu .menu ul li a{
	text-decoration:none;
}

@media screen and (max-width:767px){
#menu .menu{
	overflow-y:scroll;
	display:none;
	position:fixed;
	width:100%;
	height:100%;
	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{
	display:flex;
	justify-content:center;
	align-items:center;
	height:80px;
	position:relative;
	font-weight:700;
}

#menu .menu .gnavi a::before{
	content:"";
	position:absolute;
	bottom:20px;
	left:0;
	width:100%;
	height:2px;
	background:transparent;
	transition-duration:0.2s;
}
#menu .menu .gnavi a:hover::before{ background:#1a304d; }

#menu .menu .gnavi > li > span{
	display:none;
}

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

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

#menu .menu .gnavi a{
	justify-content:flex-start;
	height:50px;
	padding:0 20px;
	border-top:1px solid #dfe0e0;
}
#menu .menu .gnavi a::before{ content:none; }

#menu .menu .gnavi > li > span,
#menu .menu .gnavi > li > span::before{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:0;
	right:0;
	width:60px;
	height:50px;
	font-family:"Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight:700;
	cursor:pointer;
}
#menu .menu .gnavi > li > span::before{
	content:"＋";
	width:59px;
	background:#ffffff;
	border-top:1px solid #dfe0e0;
	border-left:1px solid #dfe0e0;
}
#menu .menu .gnavi > li > span.close::before{ content:"－"; }
}


/* ---------- child ---------- */
#menu .menu .gnavi .child{
	display:none;
	position:absolute;
	top:80px;
	left:-30px;
	padding:20px 30px 10px;
	background:#eff1f3;
	white-space:nowrap;
}

#menu .menu .gnavi .child a{
	display:inline-block;
	height:auto;
	margin:0 0 10px 0;
	line-height:3.6rem;
}
#menu .menu .gnavi .child a::before{ bottom:0; }

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

#menu .menu .gnavi .child a{
	display:flex;
	height:50px;
	margin:0;
	padding-left:calc(20px + 1.0em);
}
}


/* btn
---------------------------------------- */
#menu .menu .btn{
	display:flex;
	gap:0 1px;
}

#menu .menu .btn a{
	display:flex;
	justify-content:center;
	align-items:center;
	width:146px;
	height:80px;
	background:#1c375f;
	color:#ffffff;
}

#menu .menu .btn a[target="_blank"]{
	background:#1273bb;
}

#menu .menu .btn a[target="_blank"]::after{
	content:"";
	width:14px;
	height:14px;
	margin:1px 0 0 8px;
	background:url(../../img/common/icon_blank.svg) no-repeat center;
	filter:invert(100%) sepia(2%) saturate(493%) hue-rotate(153deg) brightness(116%) contrast(100%);
}

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

#menu .menu .btn a{
	justify-content:flex-start;
	width:auto;
	height:50px;
	padding:0 20px;
	border-bottom:1px solid #ffffff;
}
}


/* ========================================================================
	main
======================================================================== */
main p,
main li,
main dl dt,
main dl dd{
	font-weight:500;
	line-height:3.6rem;
}


/* ----------------------------------------
	section
---------------------------------------- */
main > div > section{
	padding:0 0 100px 0;
}

@media screen and (max-width:767px){
main > div > section{
	padding:0 0 20px 0;
}
}


/* ----------------------------------------
	table
---------------------------------------- */
main table{
	margin:0 0 100px 0;
	border-top:1px solid #f1f1f1;
	line-height:3.6rem;
}

main table tr{
	border-bottom:1px solid #f1f1f1;
}

main table th{
	width:260px;
	padding:22px 40px;
	background:#f8f8f8;
	text-align:center;
	vertical-align:top;
	font-weight:500;
	white-space:nowrap;
}

main table td{
	padding:22px 20px 22px 90px;
	font-weight:500;
}

main table td ul{
	padding:3px 0;
}

main table td ul li{
	line-height:3.0rem;
}

@media screen and (max-width:767px){
main table{
	margin:0 0 40px 0;
}

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

main table td ul{
	padding:0;
}

main table td ul li{
	padding:5px 0;
	line-height:2.6rem;
}
}


/* ========================================================================
	title
======================================================================== */
#title{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:280px 0 240px 0;
	background:url(../../img/common/bg_h1.png) no-repeat center top;
	background-size:cover;
	text-align:center;
	font-family:"Shippori Mincho B1", serif;
	font-size:5.0rem;
	font-weight:600;
	line-height:1;
	letter-spacing:0.05em;
}

#title::before,
#title::after{
	content:"";
	width:52px;
	height:1px;
	margin:0 30px 0 0;
	background:#1c375f;
}
#title::after{ margin:0 0 0 30px; }

@media screen and (max-width:767px){
#title{
	margin:0;
	padding:150px 20px 80px;
	font-size:2.8rem;
	line-height:3.8rem;
}

#title::before,
#title::after{
	width:24px;
	margin:0 20px 0 0;
}
#title::after{ margin:0 0 0 20px; }
}


/* ========================================================================
	footer
======================================================================== */
footer{
	padding:70px 0 0 0;
	background:#eff1f3;
}

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

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

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

footer .logo img{
	width:140px;
}
}


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


/* ----------------------------------------
	company
---------------------------------------- */
footer .company{
	padding:66px 0 154px 0;
	border-top:1px solid #a9bbce;
}

footer .company dl dt{
	font-size:2.2rem;
	line-height:3.0rem;
}

footer .company dl dd{
	font-size:1.8rem;
	font-weight:500;
	line-height:3.0rem;
}

@media screen and (max-width:767px){
footer .company{
	display:flex;
	justify-content:center;
	padding:36px 0 40px 0;
}

footer .company dl dt{
	font-size:1.8rem;
	line-height:2.6rem;
}

footer .company dl dd{
	font-size:1.4rem;
	line-height:2.6rem;
}
}


/* ----------------------------------------
	copyright
---------------------------------------- */
footer .copyright{
	padding:53px 0;
	background:#1c375f;
}

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

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

footer .copyright ul li a:hover{
	text-decoration:underline;
}

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

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

footer .copyright small{
	text-align:center;
	font-size:1.2rem;
	line-height:2.0rem;
}
}