@charset "utf-8";

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


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

.sp{
	display:none;
}

.inner{
	position:relative;
	width:1060px;
	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:768px){
body{
	position:relative;
	min-width:320px;
	font-size:1.6rem; /* 16px */
}

.pc{
	display:none;
}

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

iframe{
	width:100%;
}
}


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

header h1,
header .logo{
	position:absolute;
	top:0;
	left:0;
	padding:36px 40px;
	font-size:2.4rem;
	font-weight:700;
	line-height:1;
	letter-spacing:normal;
	z-index:1;
}
header .logo{ padding:0; }

header h1 a.fade,
header .logo a.fade{
	display:block;
	color:#ffffff;
	text-decoration:none;
}
header .logo a.fade{
	padding:50px;
	background:#0675f3;
	border-bottom-right-radius:40px;
}

header h1 span,
header .logo span{
	display:block;
	padding:10px 0 0 2px;
	font-size:1.4rem;
	letter-spacing:0.16em;
}

@media screen and (max-width:768px){
header h1,
header .logo{
	top:0;
	left:0;
	padding:20px;
	font-size:clamp(1.0rem, 4.7619vw, 2.0rem); /* 420px */
}

header .logo a.fade{
	padding:0;
	background:none;
}
}


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

@media screen and (max-width:768px){
#menu .btn{
	display:block;
	position:fixed;
	top:0;
	right:0;
	width:60px;
	height:60px;
	background:#0675f3;
	border-bottom-left-radius:4px;
	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
---------------------------------------- */
@media screen and (max-width:768px){
#menu .menu{
	overflow-y:scroll;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#0675f3;
	z-index:10;
}
}


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

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

#menu .menu .logo a{
	color:#ffffff;
	text-decoration:none;
}
}


/* gnavi
---------------------------------------- */
#menu .menu .gnavi{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:center;
	position:fixed;
	top:0;
	right:0;
	width:100px;
	height:100%;
	padding:40px 0;
	background:#0675f3;
	z-index:10;
}

#menu .menu .gnavi li{
	position:relative;
	writing-mode:vertical-rl;
}
#menu .menu .gnavi li:first-child,
#menu .menu .gnavi li:last-child{ writing-mode:horizontal-tb; }

#menu .menu .gnavi a{
	display:flex;
	align-items:center;
	position:relative;
	width:70px;
	font-weight:700;
	color:#ffffff;
	line-height:1;
	letter-spacing:0.1em;
	text-decoration:none;
}

#menu .menu .gnavi a::before{
	content:"";
	position:absolute;
	top:0;
	right:0;
	width:1px;
	height:100%;
	background:transparent;
	transition-duration:0.2s;
}
#menu .menu .gnavi a:hover::before{ background:#ffffff; }

#menu .menu .gnavi img{
	opacity:1;
}

@media screen and (max-width:768px){
#menu .menu .gnavi{
	display:block;
	position:static;
	width:100%;
	height:auto;
	padding:110px 0 0 0;
	background:none;
	border-bottom:1px solid #ffffff;
}

#menu .menu .gnavi li{
	border-top:1px solid #ffffff;
	writing-mode:horizontal-tb;
}

#menu .menu .gnavi a{
	justify-content:center;
	width:auto;
	height:60px;
}

#menu .menu .gnavi a::before{
	content:none;
}
}


/* ========================================================================
	main
======================================================================== */
main{
	padding:0 100px 100px 0;
	background:url(../../img/common/bg_main.png) repeat-y center 408px;
}

@media screen and (max-width:768px){
main{
	padding:0 0 20px 0;
	background:none;
}
}


/* ========================================================================
	footer
======================================================================== */
footer{
	position:relative;
	padding:0 100px 0 0;
	background:#f5f5f2;
}

footer .inner{
	display:flex;
	justify-content:space-between;
}

footer small{
	display:block;
	padding:30px 0 20px 0;
	text-align:center;
	font-size:1.4rem;
	color:#6a6a6a;
	line-height:1;
}

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

footer .inner{
	display:block;
}

footer small{
	padding:30px 0 10px 0;
	font-size:1.3rem;
}
}


/* ----------------------------------------
	pagetop
---------------------------------------- */
footer .pagetop a{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:-80px;
	right:120px;
	width:60px;
	height:60px;
	background:#0675f3;
	border:1px solid #0675f3;
	z-index:1;
}
footer .pagetop a:hover{ background:#ffffff; }

footer .pagetop img{
	opacity:1;
	transform:rotate(-90deg);
	transition-duration:0.2s;
	filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(192deg) brightness(107%) contrast(105%);
}
footer .pagetop a:hover img{ filter:invert(35%) sepia(95%) saturate(4154%) hue-rotate(201deg) brightness(100%) contrast(95%); }

@media screen and (max-width:768px){
footer .pagetop a{
	top:0;
	right:0;
	width:40px;
	height:40px;
}

footer .pagetop img{
	width:14px;
}
}


/* ----------------------------------------
	company
---------------------------------------- */
footer .company{
	padding:88px 0 0 0;
}

footer .company .logo{
	margin:0 0 36px 0;
	font-size:2.8rem;
	font-weight:700;
	line-height:1;
	letter-spacing:normal;
}

footer .company .logo a{
	color:#121212;
	text-decoration:none;
}

footer .company .logo a > span{
	display:block;
	padding:10px 0 0 2px;
	font-size:1.6rem;
	letter-spacing:0.16em;
}
footer .company .logo .blue{ color:#0675f3; }
footer .company .logo .green{ color:#438c13; }

footer .company address{
	font-size:1.6rem;
}

footer .company address	span{
	display:block;
	padding:18px 0 0 0;
	font-size:1.4rem;
}

@media screen and (max-width:768px){
footer .company{
	padding:60px 0 30px 0;
	text-align:center;
}

footer .company .logo{
	margin:0 0 30px 0;
	font-size:2.0rem;
}

footer .company .logo a > span{
	padding:10px 0 0 0;
	font-size:1.4rem;
}

footer .company address	span{
	padding:10px 0 0 0;
}
}


/* ----------------------------------------
	box
---------------------------------------- */
footer .box{
	width:568px;
	padding:84px 0 25px 0;
}

footer .box dl{
	margin:0 0 5px 0;
	padding:30px 30px 24px;
	background:#dce3e3;
}

footer .box dl dt{
	position:relative;
	margin:0 0 14px 0;
	padding:0 0 0 25px;
	font-weight:700;
	line-height:1;
}

footer .box dl dt::before{
	content:"";
	position:absolute;
	top:2px;
	left:0;
	width:15px;
	height:15px;
	background:#0675f3;
}

footer .box dl dd{
	font-size:1.6rem;
}

footer .box dl dd span{
	font-size:1.4rem;
}

footer .box dl dd span.note{
	display:block;
	letter-spacing:normal;
}

footer .box ul{
	display:flex;
	flex-wrap:wrap;
	gap:10px 0;
	padding:6px 0;
}

footer .box ul li{
	display:flex;
	align-items:center;
	gap:0 10px;
	width:244px;
	height:23px;
	line-height:1;
}

footer .box ul li span{
	display:flex;
	justify-content:center;
	align-items:center;
	width:78px;
	height:100%;
	background:#ffffff;
	border-radius:3px;
	font-weight:500;
}

@media screen and (max-width:768px){
footer .box{
	width:auto;
	padding:0 0 30px 0;
}

footer .box dl{
	padding:20px 20px 14px;
}

footer .box dl dt{
	padding:0 0 0 23px;
}

footer .box dl dt::before{
	width:13px;
	height:13px;
}
}


/* ----------------------------------------
	menu
---------------------------------------- */
footer .menu{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:0 50px;
	height:65px;
	background:#ffffff;
}

footer .menu a{
	display:block;
	position:relative;
	padding:0 39px 0 0;
	font-size:1.6rem;
	color:#121212;
	line-height:2.5rem;
	text-decoration:none;
}

footer .menu a::before{
	content:"";
	position:absolute;
	top:0;
	right:0;
	width:25px;
	height:25px;
	background:#0675f3;
	border-radius:50%;
}

footer .menu a::after{
	content:"";
	position:absolute;
	top:0;
	right:8px;
	width:8px;
	height:100%;
	background:url(../../img/common/arrow.svg) no-repeat center;
	background-size:8px auto;
	filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(192deg) brightness(107%) contrast(105%);
}

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

@media screen and (max-width:768px){
footer .menu{
	display:block;
	height:auto;
	border-top:1px solid #d3d3d3;
}

footer .menu a{
	padding:20px 50px 20px 20px;
	border-bottom:1px solid #d3d3d3;
	line-height:2.0rem;
}
footer .menu a:hover{ text-decoration:none; }

footer .menu a::before{
	top:50%;
	right:20px;
	transform:translateY(-50%);
	width:20px;
	height:20px;
}
footer .menu a::after{ right:26px; }
}