/* CSS Document */

* {
	padding:0;
	margin:0px;
	outline:none;
	}
html {
	overflow: auto;
	}

body {
	overflow: hidden;
	text-align:center;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
	-webkit-text-size-adjust:100%;
	color: #727171;
}
.min {
	font-family: 'Hiragino Mincho Pro','游明朝','Yu Mincho',YuMincho,"Noto Serif JP",serif;
	font-weight: 600;
}
img {
	vertical-align:top;
	border:0;
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
	}
ul { display: block;}
li {
	list-style-type: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
p,a,li,div {
	max-height: 100%;
}

/* --- class and other set --- */
.shadow {
	box-shadow:rgba(0, 0, 0, 0.15) 4px 5px 8px 8px;
}
.just {
	text-align: justify;
	/*text-justify: inter-ideograph;*/
}
a {
	text-decoration: none;
	color: #443520;
}
.clearfix::after { content: ""; display: block; clear: both;}
.inner {
	width: 100%;
	height: 100%;
}

@media only screen and (min-width: 768px) {
	html, body {
		font-size: 1.2vw;
	}
	.sp {
		display: none;
	}
	.contents {
		width: 60%;
		margin: 0 auto;
	}
}
@media only screen and (min-width: 1667px) {
	.contents {
		width:1000px;
		font-size: 20px;
	}
}
@media only screen and (max-width: 767px) {
	html, body {
		font-size: 3.125vw;
	}
	.pc {
		display: none;
	}
	.contents {
		margin: 0 1.8rem;
	}
}
/* --- originals --- */

/* --- navi --- */
#wrap { transition: opacity ease 1s;}
nav { width: 100%; position: fixed; left: 0; top: 0; background-color: rgba(255,255,255,0); z-index: 3;  transition: all ease .3s;}
nav.float { background-color: rgba(255,255,255,.8);}
nav #menu li a { font-weight: 700;}
nav.menubar { display: flex; align-items:center; justify-content: space-between;}
nav.menubar h1 { font-size: 0; transition: all ease .3s; }
nav.menubar img.fixed { display: block;}
nav.menubar img.float { display: none;}
nav.menubar.float img.fixed { display: none;}
nav.menubar.float img.float { display: block;}
a.contact { display: inline-block; color: #fff; font-weight: 600; background-color: #ba9c3d; padding: 0 3.5em; line-height: 2.6; border-radius: 1.3em;}
/* --- common --- */
@media only screen and (min-width: 768px) {
nav { height: 110px;}
nav.float { height: 60px;}
nav.menubar h1 { margin-left: 2rem; width: 100px; }
nav.menubar.float h1 { width: 68px;}
ul.menu { display: grid; grid-auto-flow: column; margin-right: 1.6rem;}
nav.menubar ul.menu li a { font-size: 13px; font-weight: 600; }
ul.menu li a.contact { margin: 0 0 0 1em; }
ul.menu li a span { display: inline-block;  vertical-align: middle; margin: 0.3em 0.5em; padding: 0 1em; color: #4fbfd3; border-radius: 1em; line-height: 2; background-color: rgba(255,255,255,.0); transition: background-color ease .3s; }
ul.menu li a:hover span { background-color: rgba(255,255,255,.5);}
a.contact { transition: background-color ease .3s;}
/*a.contact:hover { background-color: #4fbfd3;}*/
nav.menubar.float ul.menu li a span { color: #4fbfd3;}
#toppage ul.menu li a span { color: #fff;}
#toppage nav.menubar.float ul.menu li a span { color: #4fbfd3;}
}/* --- pc --- */
@media only screen and (max-width: 767px) {
.naviContainer { padding-top: 5rem;}
nav { height: 5rem; z-index: 3;}
nav .menubtn { width: 5rem; height: 100%; position: absolute; right: 0; top: 0; }
nav.menubar .logo { width:5.5rem; margin-left: 1.4rem;}
nav.menubar.float { height: 3.5rem; background-color: rgba(255,255,255,0.8);}
nav.menubar.float h1 { width:3.6rem;}
nav #menu { position: fixed; left: 100%; top: 0; width: 100vw; height: 100vh; background-color: #4fbfd3; overflow: hidden;  transition: left ease .5s; z-index: 1; }
nav #menu .logo { height: 5rem; line-height: 5rem; margin-bottom: calc(50svh - 18rem);}
nav #menu .logo img { vertical-align: middle;}
nav #menu .cnt { position: relative; width: 100%;}
nav.open #menu .cnt,nav.open #menu { left: 0;}
nav.open #menu .menubtn { width: 5rem; height: 5rem; position: absolute; right: 0; top: 0; }
nav #menu li { margin: 3rem 10%;}
nav #menu li:nth-of-type(5) { margin-top: 3.25rem;}
nav #menu li a { color: #fff; font-size: 1.45rem; }
nav .menubtn a {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
nav .menubtn.open img {width: 1.25rem;}
nav .menubtn.close img { width: 1.05rem;}
nav.open .menubtn.open { display: none;}
nav .menubtn.close { position: fixed; display: none;}
nav.open .menubtn.close { display: flex;}
section a.contact { display: block; color: #fff; background-color: #E4007A; width: 10em; font-size: 1.15rem; padding: 0; line-height: 2.7rem; height: 2.7rem; border-radius: 1.35rem;}
}/* --- sp --- */

/* --- top --- */
#top { position: relative; width: 100%;  overflow: hidden; background-repeat: no-repeat; background-position: center center; background-size: cover;}
#toppage #top { background-image: url(../images/main.jpg);}
/* --- common --- */
@media only screen and (min-width: 768px) {
#top { aspect-ratio: 28 / 10; min-height: 550px; background-size: cover; }
}/* --- pc --- */
@media only screen and (max-width: 767px) {
#toppage #top { height: 95svh; background-image: url(../images/main_sp.jpg);}
}/* --- sp --- */

/* --- main --- */
.httl { color: #4fbfd3;}
h2.httl { text-align: left;}
a.btn_arw { display: block; color: #fff; background-color: #ba9c3d; text-align: left; line-height: 3; width: 12.5em; padding: 0 1em; position: relative;}
a.btn_arw::after { content: ""; display: block; position: absolute; width: 0.5em; height: 0.5em; border-top: 0.1rem solid #fff; border-right: 0.1rem solid #fff; transform:rotate(45deg); top: 1.15em; right: 1em;}
.link p { font-size: 1.15rem; margin-bottom: 0.75em;}
.link a { font-size: 1.1rem;}
.shelf.dot li { border-bottom: 1px dotted #ddd; text-align: left; line-height: 2; padding: 0.75em 0;}
.shelf.dot li:nth-of-type(1) { border-top: 1px dotted #ddd;}
/* --- common --- */
@media only screen and (min-width: 768px) {
section { padding-bottom: 5.5rem;}
#toppage h2.httl { font-size: 4.25rem; line-height: 1; padding: 0 0 2.75rem; }
section .shelf.dot li { font-size: 0.9rem;}
}/* --- pc --- */
@media only screen and (max-width: 767px) {
section { padding-bottom: 5.5rem;}
#toppage h2.httl { font-size: 4rem; line-height: 1; padding: 0 0 2rem; }
section .shelf.dot li { font-size: 0.9rem;}
section .shelf.dot li span { display: block;}
}/* --- sp --- */


/* --- top_head --- */
section#top_head p.httl,
section#top_head p.sub { line-height: 2; }
section#top_head .linkbox { position: relative; background-size: cover; background-repeat: no-repeat; background-position: left top; display: block;}
section#top_head .linkbox.frmr { background-image: url(../images/main01.jpg);}
section#top_head .linkbox.frml { background-image: url(../images/main02.jpg);}
section#top_head .linkbox p.httl { line-height: 1;text-align: left;}
section#top_head .linkbox.frml p.httl { text-align: right;}
section#top_head .linkbox .link { text-align: left; position: absolute;}
/* --- common --- */
@media only screen and (min-width: 768px) {
section#top_head p.httl { font-size: 1.8rem; margin-top: 8rem;}
section#top_head p.sub { margin-top: 3.5em; }
section#top_head .logo { width: 5.6rem; margin: 7rem auto 0;}
section#top_head .linkbox { aspect-ratio: 28 / 10; width: 80svw; max-height: 440px; position: relative; background-color: #000;}
section#top_head .linkbox p.httl { padding-top: 2.5rem; font-size: 4.25rem;}
section#top_head .linkbox .link { bottom: 3.5rem;}
section#top_head .linkbox.frmr p.httl { margin-left: -6rem; margin-top: 8rem;}
section#top_head .linkbox.frml p.httl { margin-right: -6rem; margin-top: 6rem;}
section#top_head .linkbox.frmr { box-shadow:#ddd -1.8rem 1.8rem 0 0; margin-left: 6rem;}
section#top_head .linkbox.frml { box-shadow:#ddd 1.8rem 1.8rem 0 0; margin-left: calc(-20svw - 6rem); }

section#top_head .linkbox.frmr .link { right: calc(20svw + 6rem);}
section#top_head .linkbox.frml .link { left: calc(20svw + 6rem);}
}/* --- pc --- */
@media only screen and (max-width: 767px) {
section#top_head p.httl { font-size: 1.8rem; margin-top: 5.5rem;}
section#top_head p.sub { font-size: 1rem; margin-top: 3.25rem; }
section#top_head .logo { width: 5.6rem; margin: 6.5rem auto 6.5rem;}
section#top_head .linkbox { aspect-ratio: 1.8 / 1; width: 100%; position: relative; background-color: #000;}
section#top_head .linkbox p.httl { padding-top: 1.5rem; font-size: 4rem; margin-top: 0;}
section#top_head .linkbox .link { bottom: 2rem;}
section#top_head .linkbox.frmr p.httl { margin-left: -1em;}
section#top_head .linkbox.frml p.httl { margin-right: -1em;}
section#top_head .linkbox.frmr { box-shadow:#ddd -1.8rem 1.8rem 0 0; margin-left: 4.1rem; margin-bottom: 4.5rem;}
section#top_head .linkbox.frml { box-shadow:#ddd 1.8rem 1.8rem 0 0; margin-left: -4.1rem; margin-bottom: 4.5rem;}

section#top_head .linkbox.frmr .link { right: calc(50% - 4.1rem);}
section#top_head .linkbox.frml .link { left: calc(50% - 4.1rem);}
section#top_head .linkbox.frml .link { text-align: right;}
}/* --- sp --- */


/* --- #top_news --- */
section#top_news p a.btn_arw { margin: 0 0 0 auto;}
/* --- common --- */
@media only screen and (min-width: 768px) {
section#top_news { padding-top: 4rem;}
section#top_news .shelf.dot li { font-size: 0.9rem; padding-left: 9em;}
section#top_news .shelf.dot li span { display: inline-block; width: 9em; margin-left: -9em;}
section#top_news p { margin-top: 3rem; text-align: right;}

}/* --- pc --- */
@media only screen and (max-width: 767px) {
section#top_news p { margin-top: 3rem; text-align: right;}
}/* --- sp --- */


/* --- footer --- */
.ftcontact { width: 100%; display: flex; align-items: center; justify-content: center; color: #727171; background-repeat: no-repeat; background-size: cover; background-position: center center; background-image: url(../images/bg_foot.jpg);}
.ftcontact .link a { margin-inline: auto; vertical-align: middle;}
.ftcontact p { font-weight: 600;}

#footer { background-color: #4fbfd3; color: #fff;}
#footer .menu a span { color: #fff; }
#footer .pagetop a { display: flex; align-items: center; justify-content: center; width: 1em; height: 1em; border-radius: 50%; background-color: #fff; position: relative;}
#footer .pagetop a::after { content: ""; display: block; width: 0.3em; height: 0.3em; border-top: 0.1rem solid #4fbfd3; border-right: 0.1rem solid #4fbfd3; transform: rotate(-45deg); margin-top: 0.15em;}
/* --- common --- */
@media only screen and (min-width: 768px) {
.ftcontact { width: 100%; aspect-ratio: 42 / 10;}
.ftcontact .link { margin-bottom: .75rem;}
.ftcontact .link p { font-size: 1rem; margin-bottom: 1em;}
.ftcontact .link a { font-size: 1rem; line-height: 2.9; padding-bottom: 0.1em; width: 13.5em; }
#footer { padding: 10rem 30px 24px; font-size: 0;}
#footer .logo { text-align: left; margin-bottom: 0.65rem;}
#footer .logo img { width: 80px;}
#footer .shelf { display: flex; justify-content: space-between; align-items: start;}
#footer .menu { text-align: left; margin: 0 0 0 -16px;}
#footer .menu a { font-size: 13px;}
#footer .menu a span { margin-left: 0.25em; margin-right: 0.25em;}
#footer .copyright { width: 130px; display: flex; justify-content: space-between; align-items: end; margin-top: -22px;}
#footer .pagetop a { font-size: 48px;}
#footer .copyright p { font-size: 10px;}
}/* --- pc --- */
@media only screen and (max-width: 767px) {
.ftcontact { width: 100%; aspect-ratio: 1.8 / 1;}
#footer { padding: 2.7rem 1.2rem 2rem; font-size: 0; position: relative;}
.ftcontact a.btn_arw { width: 13.5em;}
#footer .logo { text-align: left; margin-bottom: 1.8rem;}
#footer .logo img { width: 5.5rem;}
#footer .menu { text-align: left; margin: 0 0 0.6rem; width: 89%;}
#footer .menu a { font-size: 1rem; line-height: 2.4;}
#footer .menu a span { margin-left: 0.25em; margin-right: 0.25em;}
#footer .copyright { text-align: right; margin: -2.2rem 4.5rem 0 0;}
#footer .pagetop a { font-size: 4rem; position: absolute; right: 1.2rem; bottom: 2rem; border: 1px solid #4fbfd3;}
#footer .copyright p { font-size: 0.8rem;}
}/* --- sp --- */



/* --- lower pages --- */
.lower #top .box { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center;}
/* --- common --- */
@media only screen and (min-width: 768px) {
.lower #top { margin-bottom: 5.5rem;}
.lower #top .box h1 { font-size: 4.25rem; color: #727171;}
.lower section h2 { font-size: 3.25rem; line-height: 1; margin-bottom: 2.75rem;}
}/* --- pc --- */
@media only screen and (max-width: 767px) {
.lower #top { margin-bottom: 5.5rem; aspect-ratio: 3 / 4;}
.lower #top .box h1 { font-size: 4.25rem; color: #727171;}
.lower section h2 { font-size: 3rem; line-height: 1; margin-bottom: 2rem;}
}/* --- sp --- */