@charset "utf-8";

/*		Contents
---------------------------------------------------------------------------
	common
	header
	menu
	path
	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; /* 16px */
}

.pc{
	display:none;
}

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

iframe{
	width:100%;
}
}


/* ========================================================================
	header
======================================================================== */
header{
	position:relative;
}

header h1,
header .logo{
	padding:38px 40px;
	line-height:1;
}

header h1 img,
header .logo img{
	width:auto;
	height:34px;
	filter:invert(73%) sepia(28%) saturate(393%) hue-rotate(136deg) brightness(91%) contrast(97%);
}

@media screen and (max-width:767px){
header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:50px;
	background:#7dbec3;
	z-index:10;
}

header h1,
header .logo{
	padding:16px 20px 16px;
	line-height:1;
}

header h1 img,
header .logo img{
	height:18px;
	filter:invert(100%) sepia(0%) saturate(7424%) hue-rotate(51deg) brightness(113%) contrast(102%);
}
}


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

@media screen and (max-width:767px){
#menu .btn{
	display:block;
	position:absolute;
	top:0;
	right:0;
	width:60px;
	height:50px;
	cursor:pointer;
}

#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%;
	transform:translateX(-50%);
	width:20px;
	height:1px;
	background:#ffffff;
	box-shadow:0 -6px 0 0 #ffffff, 0 6px 0 0 #ffffff;
	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{
}

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


/* gnavi
---------------------------------------- */
#menu .gnavi{
	display:flex;
	gap:0 38px;
	position:absolute;
	top:64px;
	right:100px;
	z-index:1;
}

#menu .gnavi a{
	display:block;
	position:relative;
	font-weight:700;
	color:#7dbec3;
	line-height:3.4rem;
	letter-spacing:0.08em;
	text-decoration:none;
}

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

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

@media screen and (max-width:767px){
#menu .gnavi{
	display:block;
	position:static;
	padding:40px 0 20px 0;
	text-align:center;
}

#menu .gnavi a{
	font-size:1.8rem;
	line-height:5.8rem;
}

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


/* sns
---------------------------------------- */
#menu .sns{
	display:flex;
	gap:0 12px;
	position:absolute;
	top:20px;
	right:100px;
	line-height:1;
	z-index:1;
}

#menu .sns a{
	display:block;
	width:25px;
	text-align:center;
}

#menu .sns img{
	height:25px;
	filter:invert(83%) sepia(45%) saturate(297%) hue-rotate(132deg) brightness(80%) contrast(89%);
}

@media print, screen and (min-width:768px) and (max-width:1340px){
#menu .sns{
	right:40px;
}
}

@media screen and (max-width:767px){
#menu .sns{
	justify-content:center;
	gap:0 30px;
	position:static;
}
}


/* ========================================================================
	path
======================================================================== */
#path{
	display:flex;
	flex-wrap:wrap;
	margin:0 40px 100px;
	padding:20px 0 0 0;
}

#path li{
	font-size:1.6rem;
	font-weight:500;
	color:#7dbec3;
	line-height:2.6rem;
	letter-spacing:0.08em;
}

#path li a{
	display:block;
	position:relative;
	margin:0 34px 0 0;
	color:#7dbec3;
	text-decoration:none;
}
#path li a:hover{ text-decoration:underline; }

#path li a::after{
	content:"";
	position:absolute;
	top:50%;
	right:-20px;
	transform:translateY(-50%);
	width:6px;
	height:6px;
	background:#7dbec3;
	border-radius:50%;
}

@media screen and (max-width:767px){
#path{
	margin:70px 20px 60px;
	padding:0;
}

#path li{
	font-size:1.2rem;
	line-height:2.2rem;
}

#path li a{
	margin:0 24px 0 0;
}
#path li a:hover{ text-decoration:none; }

#path li a::after{
	right:-14px;
	width:4px;
	height:4px;
}
}


/* ========================================================================
	main
======================================================================== */
main p{
	margin:0 0 60px 0;
}

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


/* ========================================================================
	footer
======================================================================== */
footer{
	padding:80px 0 60px 0;
	background:#7dbec3;
	text-align:center;
}

footer .logo{
	margin:0 0 30px 0;
	line-height:1;
}

footer .mail{
	margin:0 0 72px 0;
	font-size:2.2rem;
	font-weight:700;
	color:#ffffff;
	line-height:1;
}

footer .mail span{
	display:block;
	margin:18px 0 0 0;
	font-size:1.6rem;
}

footer small{
	display:block;
	font-size:1.6rem;
	font-weight:700;
	color:#ffffff;
	line-height:1;
}

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

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

footer .logo img{
	width:260px;
}

footer .mail{
	margin:0 0 50px 0;
	font-size:1.8rem;
}

footer .mail span,
footer small{
	font-size:1.4rem;
}
}


/* ----------------------------------------
	menu
---------------------------------------- */
footer .menu ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin:0 0 72px 0;
	gap:0 34px;
}

footer .menu .sns{
	gap:0 20px;
	margin:0 0 80px 0;
}

footer .menu .sns a{
	display:block;
	width:50px;
}

footer .menu .sns img{
	height:50px;
	filter:invert(98%) sepia(100%) saturate(8%) hue-rotate(205deg) brightness(102%) contrast(99%);
}

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

footer .menu .sns{
	gap:0 30px;
	margin:0 0 40px 0;
	line-height:1;
}

footer .menu .sns a{
	width:25px;
}

footer .menu .sns img{
	height:25px;
}
}


/* navi
---------------------------------------- */
footer .menu .navi a{
	display:block;
	position:relative;
	font-size:1.6rem;
	font-weight:700;
	color:#ffffff;
	line-height:3.2rem;
	text-decoration:none;
}

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

@media screen and (max-width:767px){
footer .menu .navi a{
	font-size:1.4rem;
	line-height:3.4rem;
}

footer .menu .navi a::before{
	content:none;
}
}