@charset "utf-8";

/*
Theme Name: Harry's Golf
Description: Harry's Golf
Author: The company co.,ltd.
Version: 1.0.0
*/


/* RESET */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block
}

body {
	line-height: 1
}

ol,
ul {
	list-style: none
}

blockquote,
q {
	quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

*:focus {
	outline: 0;
}

/* padding,border内側設定 */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/* HTML5 */
article,
aside,
figure,
figcaption,
footer,
header,
nav,
section {
	display: block;
}

/*------------------------------------------------------------
	BASE
------------------------------------------------------------*/

:root {
	--black: #000;
	--brown: #796707;
	--beige: #DEDCCF;
	--greyd: #D9D9D9;
	--grey: #F0F0F0;
	--mincho: "Yu Mincho", "游明朝", YuMincho, "游明朝体", serif;
	--mincho2: "Marcellus", "Yu Mincho", "游明朝", YuMincho, "游明朝体", serif;
	--gothic: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
}



html,
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	-webkit-text-size-adjust: none;
}

a:link {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: inherit;
	text-decoration: none;
}

a:active {
	color: inherit;
	text-decoration: none;
}

a:visited {
	color: inherit;
	text-decoration: none;
}


/* clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: "";
	clear: both;
	height: 0;
}

/* clearfix for ie7 */
.clearfix {
	display: inline-block;
}

.clearfix {
	display: block;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

iframe {
	max-width: 100%;
	vertical-align: bottom;
}



body {
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", sans-serif;
	font-size: 15px;
	font-weight: 400;
	background-color: #fff;
	color: #000;
	color: var(--black);
	line-height: 2;
	position: relative;
	width: 100%;
	min-width: 1060px;
	min-height: 100%;
	height: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}



.invisible {
	visibility: hidden;
}

.visible {
	visibility: visible;
}

.pc {
	display: block;
}

.sp {
	display: none;
}

img.pc {
	display: inline-block;
}

img.sp {
	display: none;
}

.elm {
	opacity: 0;
	-webkit-transition: .3s linear .2s;
	-o-transition: .3s linear .2s;
	transition: .3s linear .2s;
}

.elm.inView {
	opacity: 1;
}

.bgNone .bg {
	display: none !important;
}

@media screen and (max-width: 800px) {
	body {
		min-width: 0;
	}

	.pc {
		display: none;
	}

	.sp {
		display: block;
	}

	img.sp {
		display: inline-block;
	}

	img.pc {
		display: none;
	}
}



/*------------------------------------------------------------
	Header
------------------------------------------------------------*/

#header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	z-index: 100;
}

.header-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;
	z-index: 11;
	background-color: #000;
	transition: .3s;
}

.header-wrap>.logo {
	position: absolute;
	top: 50%;
	left: 20px;
	width: 216px;
	transform: translateY(-50%);
	line-height: 1;
}

.header-wrap>.logo-t {
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
	line-height: 1;
}

.header-wrap>.logo-t a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.8rem;
	color: #fff;
	font-family: var(--mincho);
	font-size: 14px;
	font-weight: 700;
}

.header-wrap>.logo-t img {
	display: block;
	width: 170px;
}

@media screen and (max-width: 800px) {
	.header-wrap>.logo-t a {
		font-size: 12px;
	}

	.header-wrap>.logo-t img {
		width: 150px;
	}
}

.header-wrap>.logo img {
	display: block;
	width: 216px;
	vertical-align: top;
}

.header-wrap>.logo a {
	display: block;
	transition: .3s;
	line-height: 1;
}

.header-wrap>.logo a:hover {
	opacity: .6;
}

@media screen and (max-width: 800px) {
	.header-wrap {
		height: 50px;
	}

	.header-wrap>.logo {
		width: 144px;
		left: 15px;
	}
}


.menu .main-nav {
	font-family: var(--mincho);
	font-weight: 700;
	position: absolute;
	top: 50%;
	right: 30px;
	z-index: 100;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	align-content: center;
	font-size: 13px;
	line-height: 24px;
}

.menu .main-nav li {
	margin: 0 10px;
}

.menu .main-nav li a {
	transition: .3s;
	color: #fff;
}

.menu .main-nav li a img {
	width: 24px;
	transition: 0.3s;
}

.menu .main-nav li a:hover img {
	opacity: 0.6;
}

.menu .main-nav li.instagram {
	margin: 0;
}



.menu-close {
	width: 30px;
	height: 30px;
	position: absolute;
	top: 10px;
	right: 15px;
	z-index: 102;
	opacity: 0;
	background-color: transparent;
	display: none;
}

.opened .menu-close {
	display: block;
}

.menu-trigger {
	width: 30px;
	height: 30px;
	position: absolute;
	top: 10px;
	right: 15px;
	z-index: 101;
	cursor: pointer;
	display: none;
	transition: opacity .3s linear 0s;
}

.menu-trigger:hover {
	opacity: .6;
}

.menu-trigger span {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	opacity: 1;
	background-color: #fff;
	backface-visibility: hidden;
	transition: .3s;
}

.menu-trigger span:nth-of-type(1),
.menu-trigger span:nth-of-type(3) {
	transition: top .2s ease .4s, transform .4s ease 0s;
}

.menu-trigger span:nth-of-type(1) {
	top: 7px;
}

.menu-trigger span:nth-of-type(2) {
	top: 14px;
	transition: opacity .4s ease 0s;
}

.menu-trigger span:nth-of-type(3) {
	top: 21px;
}

.opened .menu-trigger span:nth-of-type(1),
.opened .menu-trigger span:nth-of-type(3) {
	transition: top .2s ease 0s, transform .2s ease .3s;
}

.opened .menu-trigger span:nth-of-type(1) {
	top: 14px;
	transform: rotate(-45deg);
}

.opened .menu-trigger span:nth-of-type(2) {
	opacity: 0;
}

.opened .menu-trigger span:nth-of-type(3) {
	top: 14px;
	transform: rotate(45deg);
}







@media screen and (max-width: 800px) {

	.menu {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		z-index: 100;
		max-height: 100vh;
		overflow-y: scroll;
		opacity: 0;
		padding: 100px 8.4vw 60px;
		transition: transform .5s ease-in 0s, opacity .3s ease-in 0s;
		transform: translateY(-100%);
	}

	.opened .menu {
		opacity: 1;
		transform: translateY(0);
		transition: transform .4s ease-out .2s, opacity .4s ease-out .3s;
	}

	.menu .main-nav {
		position: static;
		width: 100%;
		max-width: 274px;
		margin: auto;
		transform: none;
		font-size: 14px;
		line-height: 1;
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		text-align: left;
	}

	.menu .main-nav li {
		margin: 0;
	}

	.menu .main-nav li.txt {
		margin-bottom: 24px;
	}

	.menu .main-nav li.txt a {
		padding-left: 10px;
		position: relative;
	}

	.menu .main-nav li.txt a::before {
		content: '';
		display: block;
		background: url(images/icon-arrow-w.svg) center center/contain no-repeat;
		width: 4px;
		height: 7px;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0, -50%);
	}

	.menu .main-nav li.feature {
		order: 1;
		width: 136px;
		margin-right: 30px;
	}

	.menu .main-nav li.price {
		order: 3;
		width: 136px;
		margin-right: 30px;
	}

	.menu .main-nav li.recommended {
		order: 5;
		width: 136px;
		margin-right: 30px;
	}

	.menu .main-nav li.news {
		order: 7;
		width: 136px;
		margin-right: 30px;
	}

	.menu .main-nav li.access {
		order: 2;
	}

	.menu .main-nav li.faq {
		order: 4;
	}

	.menu .main-nav li.recruitment {
		order: 6;
	}

	.menu .main-nav li.contact {
		order: 8;
	}

	.menu .main-nav li a {
		white-space: nowrap;
	}

	.menu .main-nav li.logo {
		order: 0;
		width: 100%;
		text-align: center;
		margin-bottom: 56px;
	}

	.menu .main-nav li.logo a {
		width: 152px;
		display: inline-block;
	}

	.menu .main-nav li.logo a img {
		width: 100%;
	}

	.menu .main-nav li.booking {
		order: 8;
		width: 100%;
		margin-bottom: 20px;
		margin-top: 16px;
	}

	.menu .main-nav li.booking a {
		font-family: var(--gothic);
		color: #fff;
		background: #00B900;
		font-weight: 700;
		width: 100%;
		display: flex;
		border-radius: 10px;
		height: 60px;
		align-items: center;
		font-size: 14px;
		line-height: 1.5;
		padding-left: 30px;
		margin-bottom: 20px;
	}

	.menu .main-nav li.booking a.mail {
		color: #fff;
		line-height: 1.5;
		background: #000;
		border: 1px solid #fff;
		margin-bottom: 20px;
	}

	.menu .main-nav li.booking a img {
		width: 37px;
		margin-right: 1.2em;
	}

	.menu .main-nav li a img {
		width: 30px;
	}

	.menu .main-nav li.line {
		order: 9;
		width: 50%;
		text-align: right;
		padding-right: 10px;
	}

	.menu .main-nav li.instagram {
		order: 10;
		width: 100%;
		text-align: center;
		padding-left: 0px;
		margin-top: 0;
	}


	.menu-trigger {
		display: block;
	}

	.opened .menu-close {
		visibility: visible;
		opacity: 1;
	}
}









/*------------------------------------------------------------
	FOOTER
------------------------------------------------------------*/

#footer {
	text-align: center;
}

#footer .footer-wrap {
	padding-bottom: 50px;
}

#footer a:hover {
	text-decoration: underline;
}

#footer .footer-contact {
	display: flex;
	flex-wrap: wrap;
	column-gap: 30px;
	justify-content: center;
	font-size: 13px;
	line-height: 20px;
	font-weight: 700;
}

#footer .footer-contact a {
	display: block;
}

#footer .footer-contact img {
	width: 20px;
	vertical-align: middle;
	margin-right: 8px;
}

#footer .footer-nav {
	display: flex;
	margin-top: 20px;
	flex-wrap: wrap;
	column-gap: 1em;
	justify-content: center;
	font-size: 12px;
	line-height: 1;
}

#footer .copyright {
	margin-top: 25px;
	font-size: 12px;
	line-height: 1;
}

.fix-mail {
	position: fixed;
	z-index: 50;
	width: 90px;
	bottom: 120px;
	right: 0;
	transition: 0.5s;
}

.fix-line {
	position: fixed;
	z-index: 50;
	width: 90px;
	bottom: 20px;
	right: 0;
	transition: 0.5s;
}

@media screen and (max-width: 800px) {
	#footer .footer-wrap {
		padding: 0 8.4vw 50px;
	}

	#footer .footer-contact {
		justify-content: flex-start;
	}

	#footer .footer-contact li {
		width: 100%;
		text-align: left;
	}

	#footer .footer-contact li:not(:first-child) {
		margin-top: 10px;
	}

	#footer .footer-nav {
		justify-content: flex-start;
	}

	#footer .copyright {
		text-align: left;
	}

	.fix-mail {
		width: 64px;
		bottom: 80px;
	}

	.fix-line {
		width: 64px;
		bottom: 10px;
	}
}


/*------------------------------------------------------------
	TOP - MV
------------------------------------------------------------*/

#mv {
	position: relative;
	width: 100%;
	height: 100vh;
}

#mv .bg {
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: table;
}

#mv .bg>img {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
	font-family: 'object-fit: cover; object-position: bottom;';
}

#mv .txt {
	height: 100%;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	text-align: center;
	padding-bottom: 17.5vh;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
}

#mv .txt>* {
	width: 100%;
}

#mv .txt h1 img {
	width: 260px;
}

#mv .txt h2 {
	font-family: var(--mincho);
	color: #fff;
	letter-spacing: 0.75em;
	text-indent: 0.75em;
	font-size: 24px;
	line-height: 1;
	margin-top: 24px;
}

@media screen and (max-width: 800px) {
	#mv .txt h1 img {
		width: auto;
		height: 202px;
	}

	#mv .txt h2 {
		font-size: 18px;
		letter-spacing: 0.25em;
		text-indent: 0.25em;
	}
}

/*------------------------------------------------------------
	TOP - Common
------------------------------------------------------------*/
.section-wrap {
	padding: 150px 30px;
}

.section-title {
	padding-bottom: 50px;
	max-width: 1000px;
	width: 100%;
	margin: auto;
	position: relative;
}

.section-title::after {
	content: '';
	display: block;
	height: 1px;
	width: 100vw;
	position: absolute;
	top: 24px;
	right: 100%;
	margin-right: 10px;
	background-color: currentcolor;
}

.section-title h2 {
	font-family: var(--mincho);
	font-size: 30px;
	line-height: 1;
}

.section-title h2 .en {
	font-family: var(--mincho2);
	display: block;
	font-size: 20px;
	line-height: 25px;
	margin-top: 10px;
}

.section-content {
	max-width: 1000px;
	width: 100%;
	margin: auto;
}

@media screen and (max-width: 800px) {
	.section-wrap {
		padding: 80px 8.4vw;
	}

	.section-title {
		padding-bottom: 40px;
	}

	.section-title h2 {
		font-size: 28px;
	}

	.section-title::after {
		top: 23px;
	}
}



/*------------------------------------------------------------
	TOP - About
------------------------------------------------------------*/

#about .section-wrap {
	background: #fff;
	padding: 150px 0;
}

#about .section-content {
	max-width: 1600px;
	margin: auto;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-content: center;
	align-items: center;
}

#about .section-content .thumb .inner {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	min-height: 372px;
}

#about .section-content .thumb .inner video,
#about .section-content .thumb .inner img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;';
}

#about .section-content .txt {
	padding: 0 74px;
	font-size: 15px;
	line-height: 28px;
}

#about .section-content p {
	margin-top: 28px;
}

#about .section-content h2 {
	font-family: var(--mincho);
	font-size: 30px;
	line-height: 40px;
	margin-bottom: 1em;
}


#about .about-gallery {
	margin-top: 150px;
}

#about .about-gallery .gallery-list.reverse {
	margin-top: 40px;
}

#about .about-gallery div {
	line-height: 1;
	vertical-align: top;
}

#about .gallery-item img {
	width: 450px;
	margin-right: 10px;
}

#about .slick-prev:before,
#about .slick-next:before {
	display: none;
}

#about .about-gallery .slick-prev {
	width: 28px;
	height: 28px;
	left: 30px;
	z-index: 10;
	background: url(images/btn-prevnext.png) center center/contain no-repeat;
}

#about .about-gallery .slick-next {
	width: 28px;
	height: 28px;
	right: 30px;
	z-index: 10;
	background: url(images/btn-prevnext.png) center center/contain no-repeat;
	transform: rotate(180deg) translate(0, 50%);
}

#about .about-carousel {
	margin-top: 150px;
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	height: 300px;
	position: relative;
	transition: 0.3s;
}

#about .carousel-item {
	white-space: nowrap;
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	animation: carousel 172s linear infinite;
}

#about .carousel-item img {
	display: inline-block;
	width: auto;
	max-width: none;
	height: 300px;
	margin-right: 10px;
}

@keyframes carousel {
	0% {
		transform: translateX(300%);
	}

	100% {
		transform: translateX(-100%)
	}
}

#about .carousel-item:nth-of-type(1) {
	animation-delay: calc(-172s / 4 * 0);
}

#about .carousel-item:nth-of-type(2) {
	animation-delay: calc(-172s / 4 * 1);
}

#about .carousel-item:nth-of-type(3) {
	animation-delay: calc(-172s / 4 * 2);
}

#about .carousel-item:nth-of-type(4) {
	animation-delay: calc(-172s / 4 * 3);
}


@media screen and (max-width: 800px) {
	#about .section-wrap {
		padding: 80px 0;
	}

	#about .section-content {
		grid-template-columns: 1fr;
	}

	#about .section-content .thumb .inner {
		padding-top: 56.25%;
		min-height: 0;
	}

	#about .section-content .txt {
		padding: 40px 8.4vw 0;
	}

	#about .section-content h2 {
		font-size: 26px;
		line-height: 36px;
	}

	#about .section-wrap {
		overflow: hidden;
	}

	#about .slick-list {
		overflow: visible;
	}

	#about .about-gallery {
		max-width: 312px;
		margin: 80px auto 0;
	}

	#about .gallery-item img {
		width: 312px;
		margin-right: 10px;
	}

	#about .slick-prev:before,
	#about .slick-next:before {
		display: none;
	}

	#about .about-gallery .slick-prev {
		width: 28px;
		height: 28px;
		left: auto;
		right: 50%;
		z-index: 10;
		background: url(images/btn-prevnext.png) center center/contain no-repeat;
		transform: translate(-147px, -50%);
	}

	#about .about-gallery .slick-next {
		width: 28px;
		height: 28px;
		right: auto;
		left: 50%;
		margin-right: 156px;
		z-index: 10;
		background: url(images/btn-prevnext.png) center center/contain no-repeat;
		transform: rotate(180deg) translate(-147px, 50%);
	}

	#about .about-carousel {
		margin-top: 80px;
		height: 208px;
	}

	#about .carousel-item img {
		height: 208px;
	}
}

/* ================================
  About 無限ループギャラリー
================================ */

.about-loop-gallery {
	margin-top: 150px;
	overflow: hidden;
}

/* 各行 */
.loop-row {
	width: 100%;
	overflow: hidden;
	margin-bottom: 20px;
}

/* トラック */
.loop-track {
	display: flex;
	width: max-content;
	animation-duration: 100s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* 画像 */
.loop-track img {
	width: 300px;
	height: auto;
	margin-right: 10px;
	flex-shrink: 0;
}

/* 左に流れる */
.loop-row--left .loop-track {
	animation-name: loop-left;
}

/* 右に流れる */
.loop-row--right .loop-track {
	animation-name: loop-right;
}

/* アニメーション */
@keyframes loop-left {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

@keyframes loop-right {
	0% {
		transform: translateX(-50%);
	}

	100% {
		transform: translateX(0);
	}
}

/* ================================
  SP
================================ */
@media screen and (max-width: 800px) {
	.loop-track {
		animation-duration: 60s;
	}

	.about-loop-gallery {
		margin-top: 80px;
	}

	.loop-track img {
		width: 180px;
	}
}


/*------------------------------------------------------------
	TOP - Feature
------------------------------------------------------------*/

/* #feature .section-wrap {
	background: #B4AE8F;
}

#feature .section-title {
	color: #fff;
}

#feature .section-content ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 30px;
	row-gap: 80px;
}

#feature .section-content li {
	position: relative;
	z-index: 1;
	padding: 12px 15px 0;
	background: url(images/shadow.png) left top/314px 314px no-repeat;
}

#feature .section-content li img {
	position: absolute;
	width: 200px;
	top: 12px;
	right: 0;
	z-index: -1;
}

#feature .section-content li h2 {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	height: 200px;
	padding-bottom: 15px;
	position: relative;
	margin-bottom: 24px;
}

#feature .section-content li h2::after {
	content: '';
	display: block;
	height: 1px;
	width: 40px;
	background: #000;
	position: absolute;
	bottom: 0;
	left: 0;
}

#feature .section-content li h2 .number {
	width: 100%;
	display: block;
	color: #fff;
	font-family: var(--mincho2);
	font-size: 20px;
	line-height: 25px;
}

#feature .section-content li h2 .number span {
	display: block;
	font-size: 80px;
	line-height: 100px;
	margin-top: -12px;
}

#feature .section-content li h2 .title {
	width: 100%;
	display: block;
	font-size: 24px;
	line-height: 34px;
	font-family: var(--mincho);
}

#feature .section-content li p {
	font-size: 15px;
	line-height: 24px;
}

@media screen and (max-width: 800px) {
	#feature .section-content ul {
		grid-template-columns: repeat(1, 1fr);
		row-gap: 70px;
	}

	#feature .section-content li img {
		width: 160px;
		top: -30px;
		right: -15px;
	}

	#feature .section-content li p br {
		display: none;
	}
} */

/*------------------------------------------------------------
	TOP - Feature (Horizontal Scroll Version)
------------------------------------------------------------*/

#feature .section-wrap {
	background: #B4AE8F;
	/* 元の背景色を維持 */
	padding-bottom: 80px;
	overflow: hidden;
	/* はみ出しをカット */
}

#feature .section-title {
	color: #fff;
	padding-bottom: 0;
	margin-bottom: 0px;
}

#feature h3 {
	font-family: var(--mincho);
	position: relative;
	padding: .3em 0 .2em 1em;
	border-bottom: 3px solid #ffffff;
	color: #ffffff;
	font-size: 24px;
	font-weight: 500;
	margin-top: 80px;
	margin-bottom: 40px;
}

#feature h3::before {
	position: absolute;
	top: 0;
	left: .3em;
	transform: rotate(55deg);
	height: 11px;
	width: 12px;
	background: #ffffff;
	content: '';
}

#feature h3::after {
	position: absolute;
	transform: rotate(15deg);
	top: .6em;
	left: 0;
	height: 8px;
	width: 8px;
	background: #ffffff;
	content: '';
}

/* スクロールを制御するコンテナ */
#feature .feature-scroll-wrapper {
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0 2% 20px;
	/* 左右に少し余白を作り、下にスクロールバー用隙間 */
	-webkit-overflow-scrolling: touch;
	/* iOSの滑らかなスクロール */
}

/* スクロールバーのデザイン（控えめで上品に） */
#feature .feature-scroll-wrapper::-webkit-scrollbar {
	height: 3px;
}

#feature .feature-scroll-wrapper::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.2);
}

#feature .feature-scroll-wrapper::-webkit-scrollbar-thumb {
	background: #fff;
}

#feature .section-content ul {
	display: flex;
	/* gridからflexに変更して横並びに */
	gap: 40px;
	/* カード同士の間隔 */
	width: max-content;
	/* 中身の合計幅に広げる */
}

#feature .section-content li {
	position: relative;
	z-index: 1;
	padding: 12px 15px 0;
	background: url(images/shadow.png) left top/314px 314px no-repeat;
	/* 元の背景画像を維持 */
	width: 420px;
	/* 各カードの固定幅 */
	flex-shrink: 0;
	/* 幅が縮まないように固定 */
}

#feature .section-content li img {
	position: absolute;
	width: 170px;
	top: 12px;
	right: 0;
	z-index: -1;
}

#feature .section-content li img.min {
	width: 150px;
}

#feature .section-content li h4 {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	height: 200px;
	padding-bottom: 15px;
	position: relative;
	margin-bottom: 24px;
}

#feature .section-content li h4::after {
	content: '';
	display: block;
	height: 1px;
	width: 40px;
	background: #000;
	position: absolute;
	bottom: 0;
	left: 0;
}

#feature .section-content li h4 .number {
	width: 100%;
	display: block;
	color: #fff;
	font-family: var(--mincho2);
	font-size: 20px;
	line-height: 25px;
}

#feature .section-content li h4 .number span {
	display: block;
	font-size: 80px;
	line-height: 100px;
	margin-top: -12px;
}

#feature .section-content li h4 .title {
	width: 100%;
	display: block;
	font-size: 24px;
	line-height: 34px;
	font-family: var(--mincho);
}

#feature .section-content li p {
	font-size: 15px;
	line-height: 24px;
}

/* スマホ・タブレット用調整 */
@media screen and (max-width: 800px) {
	#feature .section-content ul {
		gap: 20px;
		/* カード同士の間隔 */
	}

	#feature .section-content li {
		width: 250px;
		/* スマホでは少し横幅をスリムに */
	}

	#feature h3 {
		font-size: 20px;
		border-bottom: 2px solid #ffffff;
		margin-top: 60px;
		margin-bottom: 30px;
	}

	#feature .section-content li img {
		width: 120px;
		top: 0px;
		right: -10px;
	}
	#feature .section-content li img.min {
		width: 115px;
	}

	#feature .section-content li p br {
		display: none;
		/* スマホでの改行を解除して読みやすく */
	}
}

/*------------------------------------------------------------
	TOP - Flow
------------------------------------------------------------*/

#flow .section-wrap {
	background: #B4AE8F;
}

#flow .section-title {
	color: #fff;
}

#flow .section-content ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 50px;
	row-gap: 80px;
}

#flow .section-content li {
	position: relative;
	z-index: 1;
	padding: 12px;
	/*background: url(images/shadow.png) left top/314px 314px no-repeat;*/
	background-color: #F0F0F0;
	border: 1px solid #000;
	box-shadow: 0px 0px 15px -2px #777;
}

/*
#flow .section-content li img {
	position: absolute;
	width: 200px;
	top: 12px;
	right: 0;
	z-index: -1;
}
*/
#flow .section-content li h2 {
	/*display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	height: 200px;
	padding-bottom: 15px;*/
	position: relative;
	margin-top: 60px;
	margin-bottom: 10px;
	font-size: 1.5em;
	text-align: center;
	font-family: 'Times New Roman', Times, serif;
}


#flow .section-content li:not(:last-child)::after {
	content: '';
	display: block;
	height: 10px;
	width: 10px;
	border-top: solid 1px #000;
	border-right: solid 1px #000;
	transform: rotate(45deg);
	transform-origin: top right;
	position: absolute;
	top: 50%;
	right: -30px;
}

#flow .section-content li h2 .number {
	width: 100%;
	display: block;
	color: #fff;
	font-family: var(--mincho2);
	font-size: 20px;
	line-height: 25px;
}

#flow .section-content li h2 .number span {
	display: block;
	font-size: 80px;
	line-height: 100px;
	margin-top: -12px;
}

#flow .section-content li h2 .title {
	width: 100%;
	display: block;
	font-size: 24px;
	line-height: 34px;
	font-family: var(--mincho);
}

#flow .section-content li p {
	font-size: 15px;
	line-height: 24px;
	margin-bottom: 20px;
}

#flow .section-content p span {
	font-size: 18px;
	font-weight: bold;
}

#flow .section-content li a {
	text-decoration: underline;
}

#flow .section-content li div.step {
	width: 80px;
	height: 80px;
	line-height: 80px;
	color: #fff;
	text-align: center;
	font-size: 1em;
	position: absolute;
	background-color: #000;
	top: -20px;
	left: -20px;
}

#flow .section-content div.mess {
	margin: 20px auto;
	width: 80%;
	/*text-align: left;*/
}

#flow .section-content div.mess p {
	margin-bottom: 20px;
}

#flow .section-content div.mess p span {
	font-size: 18px;
	font-weight: bold;
}

@media screen and (max-width: 800px) {
	#flow .section-content ul {
		grid-template-columns: repeat(1, 1fr);
		row-gap: 70px;
	}

	#flow .section-content li img {
		width: 160px;
		top: -30px;
		right: -15px;
	}

	#flow .section-content li p br {
		display: none;
	}

	#flow .section-content li:not(:last-child)::after {
		content: '';
		display: block;
		height: 10px;
		width: 10px;
		border-top: solid 1px #000;
		border-right: solid 1px #000;
		transform: rotate(135deg);
		transform-origin: top right;
		position: absolute;
		left: 50%;
		top: 100%;
		margin-top: 30px;
	}
}

/*------------------------------------------------------------
	TOP - Price
------------------------------------------------------------*/
#price {
	position: relative;
}

#price .bg {
	z-index: -2;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.bgChange1 #price .bg {
	z-index: -1;
}

#price .bg img {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
	font-family: 'object-fit: cover; object-position: bottom;';
}

#price .admission {
	text-align: center;
}

#price .admission .inner {
	display: inline-flex;
	align-items: center;
}

#price .campain {
	margin-top: 150px;
}

#price .campain ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 60px;
	column-gap: 30px;
}

#price .campain img {
	width: 40%;
	height: auto;
	margin-bottom: 20px;
}

#price .campain ul>li {
	padding: 27px 15px;
	text-align: center;
	min-height: 180px;
	width: calc(100% / 3 - 20px);
	background: url(images/pricelist-bg.png) center top/cover no-repeat;
	font-size: 24px;
	line-height: 1.5;
	font-family: serif;
}

#price .campain li span {
	font-size: 30px;
	color: #796707;
}

#price .campain li span.min {
	display: block;
	color: #000;
	font-size: 16px;
	line-height: 1.5;
}

#price .campain li span.mt {
	margin-top: 10px;
}

#price .campain h3 {
	text-align: center;
	font-family: var(--mincho);
	font-size: 24px;
	line-height: 1;
	margin-bottom: 50px;
	overflow: hidden;
}

#price .campain h3 span {
	display: inline-block;
	position: relative;
}

#price .campain h3 span::before {
	content: '';
	display: block;
	height: 1px;
	width: 100vw;
	position: absolute;
	right: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
	margin-right: 1em;
	background: currentcolor;
}

#price .campain h3 span::after {
	content: '';
	display: block;
	height: 1px;
	width: 100vw;
	position: absolute;
	left: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
	margin-left: 1em;
	background: currentcolor;
}


#price .admission .title {
	padding-right: 60px;
	font-family: var(--mincho);
	font-size: 30px;
	line-height: 40px;
}

#price .admission .detail {
	padding-left: 60px;
	border-left: 1px solid #000;
}

#price .detail .base {
	font-family: var(--mincho);
	font-size: 18px;
	line-height: 24px;
}

#price .detail .base del {
	font-size: 24px;
	vertical-align: bottom;
}

#price .detail .price {
	font-family: var(--mincho);
	white-space: nowrap;
	font-size: 18px;
	line-height: 42px;
}

#price .detail .base+.price {
	margin-top: 10px;
}

#price .detail .price span {
	font-size: 28px;
	vertical-align: bottom;
}

#price .admission .detail .price {
	font-size: 50px;
	line-height: 50px;
}

#price .admission .detail .price span {
	font-size: 50px;
}

#price small {
	font-size: 11px;
	vertical-align: middle;
	line-height: 1;
}

#price .ribbon {
	background: url(images/ribbon.png) center center/contain no-repeat;
	width: 284px;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	line-height: 30px;
	padding: 5px 15px;
	margin: 30px auto;
}

#price .note {
	font-weight: 700;
	font-size: 12px;
	line-height: 2;
	color: #796707;
	margin-top: 0.2em;
}

#price .admission .ribbon {
	margin-top: 20px;
}

#price .plan {
	margin-top: 150px;
}

#price .plan h3 {
	text-align: center;
	font-family: var(--mincho);
	font-size: 24px;
	line-height: 1;
	margin-bottom: 50px;
	overflow: hidden;
}
@media screen and (max-width: 800px) {
	#price .plan h3 {
		font-size: 20px;
	}
}

#price .plan h3 span {
	display: inline-block;
	position: relative;
}

#price .plan h3 span::before {
	content: '';
	display: block;
	height: 1px;
	width: 100vw;
	position: absolute;
	right: 100%;
	top: 10px;
	margin-right: 1em;
	background: currentcolor;
}

#price .plan h3 span::after {
	content: '';
	display: block;
	height: 1px;
	width: 100vw;
	position: absolute;
	left: 100%;
	top: 10px;
	margin-left: 1em;
	background: currentcolor;
}

#price .plan *+h3 {
	margin-top: 80px;
}

#price .plan ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 60px;
	column-gap: 30px;
}

#price .plan ul>li {
	position: relative;
	padding: 36px 15px 27px 15px;
	text-align: center;
	min-height: 314px;
	width: calc(100% / 3 - 20px);
	background: url(images/pricelist-bg.png) center top/contain no-repeat;
}

#price .plan ul>li .comment {
	position: absolute;
	top: 2px;
	right: 8px;
	/* left: 50%;
  transform: translateX(-50%); */
	color: red;
	font-size: 12px;
}

#price .plan ul>li h4 {
	font-family: var(--mincho);
	font-size: 24px;
	line-height: 1;
	padding-bottom: 27px;
	border-bottom: 1px solid #796707;
	margin-bottom: 20px;
}

#price .plan .detail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* height: 70px; */
}

#price .plan .detail>* {
	width: 100%;
}

#price .plan .txt {
	margin-top: 5px;
}

#price .plan .txt .grey {
	background: #8e8e8e;
	width: 284px;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	line-height: 22px;
	padding: 9px 15px;

}

#price .plan .txt ol {
	font-size: 15px;
	line-height: 24px;
}

#price .plan .txt *+ol {
	margin-top: 15px;
}

#price .plan .txt ol li::before {
	content: '● ';
	color: #796707;
}


@media screen and (max-width: 800px) {
	#price .admission .inner {
		display: block;
	}

	#price .admission .title {
		padding: 0;
		border-bottom: 1px solid currentcolor;
		line-height: 1;
		padding-bottom: 20px;
		margin-bottom: 20px;
	}

	#price .admission .detail {
		padding: 0;
		border: none;
	}

	#price .admission .detail .price span {
		font-size: 36px;
	}

	#price .campain ul.col1>li {
		width: 100%;
	}

	#price .campain ul img {
		width: 25%;
	}

	#price .campain ul>li {
		padding: 27px 15px;
		text-align: center;
		min-height: 180px;
		width: calc(100% / 3 - 20px);
		background: url(images/pricelist-bg.png) center top/cover no-repeat;
		font-size: 24px;
		font-family: serif;
	}

	#price .plan ul {
		flex-flow: column;
		row-gap: 40px;
		column-gap: 24px;
	}

	#price .plan ul>li {
		/* width: calc(100% / 2 - 12px); */
		width: 100%;
	}

	#price .ribbon {
		width: 100%;
		background: url(images/ribbon.png) center center/100% 100% no-repeat;
		padding: 5px 0;
	}

	#price .plan .txt .grey {
		width: 100%;
	}

	#price .plan {
		margin-top: 80px;
	}

	#price .plan h3 span::before {
		margin-right: 20px;
	}

	#price .plan h3 span::after {
		margin-left: 20px;
	}

	#price .plan ul>li h4 {
		font-size: 20px;
		line-height: 1.3;
		padding-bottom: 14px;
		margin-bottom: 0;
	}

	#price .plan .detail {
		/* height: 155px; */
		align-content: center;
	}

	#price .detail .base {
		font-size: 12px;
		line-height: 26px;
	}

	#price .detail .base del {
		font-size: 18px;
	}

	#price .detail .price {
		font-size: 22px;
		line-height: 28px;
		margin-top: 20px;
	}

	#price .detail .price span {
		font-size: 28px;
	}

	#price .txt .ribbon {
		font-size: 14px;
		line-height: 16px;
	}

	#price .plan .txt {
		margin-top: 0;
	}

	#price .plan .txt ol {
		text-align: left;
		font-size: 12px;
		line-height: 18px;
		margin-top: 10px;
	}

	#price .plan .txt .grey {
		padding: 9px 5px;
	}

	#price .plan ul.col1>li {
		width: 100%;
	}

	#price .plan .col1 .detail {
		/* height: 100px; */
	}

	#price .detail .price span {
		display: block;
	}

	#price small {
		display: block;
		line-height: 2;
	}

	#price .admission .detail .price {
		font-size: 28px;
		line-height: 36px;
	}
}

/*------------------------------------------------------------
	TOP - Introduction
------------------------------------------------------------*/

#introduction .section-wrap {
	background: #f0f0f0;
}

#introduction ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 80px;
	column-gap: 30px;
}

#introduction ul li {
	width: calc(100% / 3 - 20px);
}

#introduction .lower {
	margin-top: 20px;
}

#introduction .lower h3 {
	font-family: var(--mincho);
	font-size: 24px;
	line-height: 34px;
	padding-bottom: 15px;
	margin-bottom: 15px;
	position: relative;
	text-align: center;
}

#introduction .lower p {
	font-size: 15px;
	line-height: 24px;
}

@media screen and (max-width: 800px) {
	#introduction ul {
		flex-wrap: wrap;
		row-gap: 60px;
	}

	#introduction ul li {
		width: 100%;
	}

	#introduction .upper {
		grid-template-columns: 100px auto;
	}
}

/*------------------------------------------------------------
	TOP - Gallery
------------------------------------------------------------*/

#gallery .section-wrap {
	background: #f0f0f0;
	padding: 0px 30px 150px 30px;
}
#gallery .section-exp {
	font-size: 14px;
  text-align: right;
	padding-bottom: 10px;
}
#gallery .section-gallery {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
@media screen and (max-width: 800px) {
	#gallery .section-gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}


/* ======================================================
Lightbox 矢印表示
====================================================== */
/* ナビ全体 */
.lb-nav {
  opacity: 1 !important;
}

/* 左矢印 */
.lb-prev {
  opacity: 1 !important;
  display: block !important;
}

/* 右矢印 */
.lb-next {
  opacity: 1 !important;
  display: block !important;
}

/* ホバーしなくても表示 */
.lb-nav a {
  opacity: 1 !important;
}

/*------------------------------------------------------------
	TOP - Recommended
------------------------------------------------------------*/

#recommended .section-wrap {
	background: #f0f0f0;
}

#recommended ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 80px;
	column-gap: 30px;
}

#recommended ul li {
	width: calc(100% / 3 - 20px);
}

#recommended .upper {
	display: grid;
	grid-template-columns: 120px auto;
	align-items: center;
}

#recommended .upper span {
	font-size: 15px;
	line-height: 22px;
	padding-left: 1em;
}

#recommended .lower {
	margin-top: 20px;
}

#recommended .lower h3 {
	font-family: var(--mincho);
	font-size: 24px;
	line-height: 34px;
	padding-bottom: 15px;
	margin-bottom: 15px;
	position: relative;
}

#recommended .lower h3::after {
	content: '';
	display: block;
	width: 40px;
	height: 1px;
	background-color: currentcolor;
	position: absolute;
	bottom: 0;
	left: 0;
}

#recommended .lower p {
	font-size: 15px;
	line-height: 24px;
}

@media screen and (max-width: 800px) {
	#recommended ul {
		flex-wrap: wrap;
		row-gap: 60px;
	}

	#recommended ul li {
		width: 100%;
	}

	#recommended .upper {
		grid-template-columns: 100px auto;
	}
}



/*------------------------------------------------------------
	TOP - News
------------------------------------------------------------*/

#news .section-wrap {
	background: #000;
	color: #fff;
	padding: 100px 30px;
}

#news .inner {
	max-width: 900px;
	width: 100%;
	margin: auto;
	display: grid;
	grid-template-columns: 180px auto;
}

#news .section-title {
	padding: 26px 60px 26px 0;
	border-right: 1px solid currentcolor;
	white-space: nowrap;
	margin: 0;
}

#news .section-title::after {
	display: none;

}

#news .section-content {
	padding: 0 0 0 60px;
	border-left: 1px solid currentcolor;
	margin-left: -1px;
}

#news .section-content li {
	font-size: 15px;
	line-height: 22px;
}

#news .section-content li:not(:first-child) {
	margin-top: 12px;
}

#news .section-content li a {
	display: grid;
	grid-template-columns: 114px auto;
}

#news .section-content li .date {
	font-family: var(--mincho2);
}

.vbox-inline {
	border-radius: 10px;
}

.vbox-overlay .vbox-close {
	display: none;
}

.news-wrap {
	padding: 50px 30px;
	position: relative;
}

.news-wrap .box-close {
	cursor: pointer;
	position: absolute;
	top: 20px;
	right: 20px;
	width: 30px;
	height: 30px;
	z-index: 1;
	transition: 0.3s;
}

.news-wrap .box-close:hover {
	opacity: 0.6;
}

.news-wrap .inner {
	overflow: scroll;
	max-height: calc(100vh - 200px);
}

.news-wrap .news-title {
	max-width: 658px;
	width: 100%;
	margin: auto;
}

.news-wrap .news-title h1 {
	font-size: 20px;
	line-height: 1.4;
	padding-bottom: 1em;
	position: relative;
}

.news-wrap .news-title h1::after {
	content: '';
	display: block;
	height: 1px;
	width: 40px;
	background: currentcolor;
	position: absolute;
	bottom: 0;
	left: 0;
}

.news-wrap .news-title h1 .date {
	display: block;
	font-size: 15px;
	line-height: 19px;
	margin-bottom: 10px;
	font-family: var(--mincho2);
}

.news-wrap .news-contents {
	padding-top: 45px;
	max-width: 658px;
	width: 100%;
	margin: auto;
	font-size: 15px;
	line-height: 1.6;
}

.news-wrap .news-contents *+* {
	margin-top: 1.6em;
}

.news-wrap .news-contents h2,
.news-wrap .news-contents strong {
	font-weight: 700;
}

.news-wrap .news-contents p a {
	color: #796707;
	text-decoration: underline;
}

@media screen and (max-width: 800px) {
	#news .section-wrap {
		padding: 80px 8.4vw;
	}

	#news .inner {
		display: block;
	}

	#news .section-content {
		margin: 0;
		padding-left: 0;
		border: none;
	}

	#news .section-title {
		padding: 0;
		padding-bottom: 50px;
		border: none;
	}

	#news .section-title::after {
		display: block;
	}

	#news .section-content li:not(:first-child) {
		margin-top: 18px;
	}

	#news .section-content li a {
		grid-template-columns: 1fr;
	}

	#news .section-content li .date {
		margin-bottom: 3px;
	}

	.news-wrap {
		padding: 50px 18px 18px 18px;
	}

	.news-wrap .box-close {
		top: 10px;
		right: 10px;
	}

	.news-wrap .inner {
		padding-right: 30px;
		padding-bottom: 60px;
	}
}




/*------------------------------------------------------------
	TOP - Access
------------------------------------------------------------*/
#access .section-wrap {
	background: #f0f0f0;
}

#access .section-content.mt {
	margin-top: 80px;
}

#access .inner {
	display: grid;
	grid-template-columns: 400px auto;
	column-gap: 30px;
}

#access .inner dl {
	font-size: 15px;
	line-height: 1.6;
}

#access .inner dt {
	float: left;
}

#access .inner dd {
	margin-left: 94px;
	margin-bottom: 10px;
}

#access .inner dd strong {
	font-weight: 700;
}

#access .inner .map {
	position: relative;
	height: 392px;
}

#access .btn-gm {
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 0;
	font-family: var(--mincho2);
	font-size: 13px;
	line-height: 17px;
	padding-bottom: 5px;
	border-bottom: 1px solid currentcolor;
	transition: 0.3s;
}

#access .btn-gm:hover {
	opacity: 0.6;
}

#access .inner .map iframe {
	height: 350px;
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% + 50vw - 500px);
	max-width: calc(100% + 300px);
}

@media screen and (max-width: 800px) {
	#access .section-content.mt {
		margin-top: 60px;
	}

	#access .inner {
		grid-template-columns: 1fr;
		row-gap: 30px;
	}

	#access .inner .map {
		height: 302px;
	}

	#access .inner .map iframe {
		height: 260px;
		width: calc(100% + 8.4vw);
	}
}


/*------------------------------------------------------------
	TOP - Admission
------------------------------------------------------------*/
#admission {
	position: relative;
	display: table;
	width: 100%;
}

#admission .bg {
	z-index: -2;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.bgChange2 #admission .bg {
	z-index: -1;
}

#admission .bg img {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
	font-family: 'object-fit: cover; object-position: bottom;';
}

#admission .section-wrap {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

#admission .section-content h2 {
	font-family: var(--mincho);
	font-size: 30px;
	line-height: 40px;
	padding: 15px;
	max-width: 580px;
	margin: auto;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
	;
}

#admission .section-content p {
	font-size: 15px;
	line-height: 28px;
	color: #fff;
	padding: 43px 0;
}

#admission .section-content a {
	color: #fff;
	background: #00B900;
	font-weight: 700;
	width: 244px;
	display: flex;
	align-items: center;
	border-radius: 10px;
	height: 70px;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	transition: 0.3s;
	padding-left: 20px;
}

#admission .section-content a:hover {
	background: #008600;
}

#admission .section-content a img {
	width: 40px;
	margin-right: 1em;
}

#admission .section-box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 2.5rem;
}

#admission .section-content a.section-mail {
	color: #fff;
	background: #000;
	font-weight: 700;
	width: 244px;
	display: flex;
	align-items: center;
	border-radius: 10px;
	height: 70px;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	transition: 0.3s;
}

#admission .section-content a.section-mail:hover {
	background: #333;
}

@media screen and (max-width: 800px) {
	#admission .section-box {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-flow: column;
		flex-flow: column;
		gap: 1.5rem;
	}
}

#admission-end {
	position: relative;
	display: table;
	width: 100%;
	margin-bottom: 80px;
}

#admission-end .bg {
	z-index: -2;
	position: absolute;
	display: block !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#admission-end .bg img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
	font-family: 'object-fit: cover; object-position: bottom;';
}

#admission-end .section-wrap {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

#admission-end .section-content h2 {
	font-family: var(--mincho);
	font-size: 30px;
	line-height: 40px;
	padding: 15px;
	max-width: 580px;
	margin: auto;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
	;
}

#admission-end .section-content p {
	font-size: 15px;
	line-height: 28px;
	color: #fff;
	padding: 43px 0;
}

#admission-end .section-content a {
	color: #fff;
	background: #00B900;
	font-weight: 700;
	width: 240px;
	display: flex;
	border-radius: 10px;
	height: 70px;
	align-items: center;
	font-size: 15px;
	line-height: 1.5;
	transition: 0.3s;
	text-align: left;
	padding-left: 30px;
}
@media screen and (max-width: 800px) {
	#admission-end .section-content a {
		color: #fff;
		background: #00B900;
		font-weight: 700;
		width: 244px;
		display: flex;
	}
}

#admission-end .section-content a:hover {
	background: #008600;
}

#admission-end .section-content a img {
	width: 43px;
	margin-right: 1em;
}

#admission-end .section-box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 2.5rem;
}

#admission-end .section-content a.section-mail {
	color: #fff;
	background: #000;
	font-weight: 700;
	width: 260px;
	display: flex;
	align-items: center;
	border-radius: 10px;
	height: 70px;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	transition: 0.3s;
}

#admission-end .section-content a.section-mail:hover {
	background: #333;
}

@media screen and (max-width: 800px) {
	#admission-end {
		margin-bottom: 40px;
	}

	#admission-end .section-box {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-flow: column;
		flex-flow: column;
		gap: 1.5rem;
	}
	#admission .section-content h2 {
		font-size: 24px;
	}
}


/*------------------------------------------------------------
	TOP - FAQ
------------------------------------------------------------*/


#faq {
	position: relative;
	background: #f0f0f0;
}


#faq dl {
	position: relative;
	z-index: 1;
	cursor: pointer;
	background: #dedccf;
	border-radius: 10px;
	transition: 0.5s;
}

#faq dl:hover {
	background: #B4AE8F;
}

#faq dl+dl {
	margin-top: 20px;
}

#faq dl dt {
	width: 100%;
	position: relative;
	font-size: 18px;
	line-height: 26px;
	padding: 27px 80px 27px 95px;
}

#faq dl dt::before {
	content: 'Q';
	font-family: var(--mincho2);
	font-size: 30px;
	line-height: 1.2;
	position: absolute;
	top: 20px;
	left: 34px;
}

#faq dl dt::after {
	content: '';
	display: block;
	width: 21px;
	height: 12px;
	position: absolute;
	top: 34px;
	right: 30px;
	background: url(images/icon-arrow.svg) center center/contain no-repeat;
	transition: 0.25s;
}

#faq dl.active dt::after {
	transform: rotate(180deg);
}

#faq dl dd {
	display: none;
	font-size: 15px;
	line-height: 24px;
	padding: 23px 80px 23px 95px;
	position: relative;
}

#faq dl dd::before {
	content: '';
	display: block;
	width: 40px;
	height: 1px;
	position: absolute;
	top: 0;
	left: 95px;
	background: currentcolor;
}

#faq .morefaq {
	display: none;
	margin-top: 20px;
}

#faq .more {
	display: block;
	width: 103px;
	position: relative;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	margin: 30px auto 0;
	cursor: pointer;
	transition: 0.3s;
}

#faq .more:hover {
	color: #796707;
}

#faq .more::before {
	content: 'さらに表示';
}

#faq .more.active::before {
	content: '少なく表示';
}

#faq .more::after {
	content: '';
	display: block;
	width: 18px;
	height: 10px;
	position: absolute;
	top: 2px;
	right: 0;
	background: url(images/icon-arrow.svg) center center/contain no-repeat;
	transition: 0.25s;
	cursor: pointer;
}

#faq .more.active::after {
	transform: rotate(180deg);
}



@media screen and (max-width: 800px) {
	#faq .section-content {
		width: 100vw;
		position: relative;
		left: 50%;
		margin-left: -50vw;
		padding: 0 15px;
	}

	#faq dl dt {
		padding: 27px 50px 27px 57px;
	}

	#faq dl dt::before {
		left: 16px;
	}

	#faq dl dd {
		padding: 27px 50px 27px 57px;
	}

	#faq dl dd::before {
		left: 57px;
	}
}

/*------------------------------------------------------------
	TOP - Recruitment
------------------------------------------------------------*/
#recruitment {
	background: #d9d9d9;
}

#recruitment ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 30px;
}

#recruitment .txt {
	margin-top: 25px;
	padding-right: 40px;
}

#recruitment h3 {
	font-family: var(--mincho);
	font-size: 24px;
	line-height: 34px;
	padding-bottom: 15px;
	margin-bottom: 20px;
	position: relative;
}

#recruitment h3::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 40px;
	height: 1px;
	background: currentcolor;
}

#recruitment p {
	font-size: 15px;
	line-height: 1.6;
}

#recruitment .btn {
	color: #fff;
	background: #00B900;
	font-weight: 700;
	width: 130px;
	display: flex;
	margin-top: 30px;
	justify-content: center;
	border-radius: 10px;
	height: 50px;
	align-items: center;
	font-size: 13px;
	transition: 0.3s;
}

#recruitment .btn:hover {
	background: #008600;
}

#recruitment .btn img {
	width: 30px;
	margin-right: 1em;
}

@media screen and (max-width: 800px) {
	#recruitment ul {
		grid-template-columns: 1fr;
		row-gap: 60px;
	}

	#recruitment .thumb img {
		width: calc(100% + 8.4vw);
		max-width: calc(100% + 8.4vw);
	}

	#recruitment .txt {
		padding-right: 0;
	}

}

/*------------------------------------------------------------
	TOP - Instagram
------------------------------------------------------------*/
#instagram {
	background: #fff;
}

#instagram .section-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#instagram .btn-insta {
	display: inline-flex;
	align-items: center;
	height: 24px;
	font-family: var(--mincho2);
	font-size: 13px;
	line-height: 20px;
	text-decoration: underline;
	text-underline-offset: .4em;
	transition: 0.3s;
}

#instagram .btn-insta:hover {
	color: #796707;
}

#instagram .btn-insta svg,
#instagram .btn-insta img {
	width: 24px;
	margin-left: 1em;
}

#instagram .btn-insta svg path {
	fill: currentcolor;
}

#instagram .section-content {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	margin-left: -50vw;
}

#instagram .insta-carousel {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	height: 300px;
	position: relative;
	transition: 0.3s;
}

#instagram .carousel-item {
	white-space: nowrap;
	position: absolute;
	top: 0;
	left: 0;
	width: calc((300px + 10px) * 8);
	animation: carousel 172s linear infinite;
}

#instagram .carousel-item img {
	display: inline-block;
	width: auto;
	max-width: none;
	height: 300px;
	margin-right: 10px;
}

#instagram #sb_instagram.sbi_fixed_height {
	padding: 0 !important;
}

#instagram #sb_instagram #sbi_images {
	padding: 0 !important;
}

#instagram #sb_instagram.sbi_col_8 #sbi_images .sbi_item {
	padding-right: 10px !important;
}

#instagram .carousel-item:nth-of-type(1) {
	animation-delay: calc(-172s / 4 * 0);
}

#instagram .carousel-item:nth-of-type(2) {
	animation-delay: calc(-172s / 4 * 1);
}

#instagram .carousel-item:nth-of-type(3) {
	animation-delay: calc(-172s / 4 * 2);
}

#instagram .carousel-item:nth-of-type(4) {
	animation-delay: calc(-172s / 4 * 3);
}


@media screen and (max-width: 800px) {
	#instagram .btn-insta.pc {
		display: none;
	}

	#instagram .btn-wrap {
		padding: 30px 8.4vw 0;
		text-align: right;
	}

	#instagram .insta-carousel {
		height: 260px;
	}

	#instagram .carousel-item {
		width: calc((260px + 10px) * 8);
	}
}



/*------------------------------------------------------------
	Page
------------------------------------------------------------*/
#page .section-content {
	padding-top: 20px;
	font-size: 14px;
	line-height: 20px;
}

#page .section-content .inner {
	width: 100%;
}

#page .section-content .inner h2 {
	font-family: var(--mincho);
	font-size: 30px;
	line-height: 1.5;
	position: relative;
	margin-bottom: 50px;
}

#page .section-content .inner *+h2 {
	padding-top: 150px;
}

#page .section-content .inner h3 {
	font-weight: 700;
	margin-top: 20px;
}

#page .section-content .inner h2::after {
	content: '';
	display: block;
	height: 1px;
	width: 100vw;
	position: absolute;
	top: 24px;
	right: 100%;
	margin-right: 20px;
	background-color: currentcolor;
}

#page .section-content ol {
	list-style: decimal;
	margin-left: 2em;
}



@media screen and (max-width: 800px) {
	#page .section-content {
		padding-top: 50px;
	}

	#page .section-content .inner h2 {
		font-size: 20px;
		margin-bottom: 40px;
	}

	#page .section-content .inner *+h2 {
		padding-top: 120px;
	}

	#page .section-content .inner h2::after {
		top: 16px;
	}
}

/*------------------------------------------------------------
	TOP - news
------------------------------------------------------------*/


@media screen and (max-width: 800px) {}





/*------------------------------------------------------------
	Keyframes
------------------------------------------------------------*/

@-webkit-keyframes fadeInUpC {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 20px, 0);
		transform: translate3d(0, 20px, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInUpC {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 20px, 0);
		transform: translate3d(0, 20px, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@-webkit-keyframes slideInUp20 {
	0% {
		-webkit-transform: translate3d(0, 20vh, 0);
		transform: translate3d(0, 20vh, 0)
	}

	to {
		-webkit-transform: none;
		transform: none
	}
}

@keyframes slideInUp20 {
	0% {
		-webkit-transform: translate3d(0, 20vh, 0);
		transform: translate3d(0, 20vh, 0)
	}

	to {
		-webkit-transform: none;
		transform: none
	}
}

@-webkit-keyframes slideInUp15 {
	0% {
		-webkit-transform: translate3d(0, 15vh, 0);
		transform: translate3d(0, 15vh, 0)
	}

	to {
		-webkit-transform: none;
		transform: none
	}
}

@keyframes slideInUp15 {
	0% {
		-webkit-transform: translate3d(0, 15vh, 0);
		transform: translate3d(0, 15vh, 0)
	}

	to {
		-webkit-transform: none;
		transform: none
	}
}

.fadeInUpC {
	-webkit-animation-name: fadeInUpC;
	animation-name: fadeInUpC;
	-webkit-animation-duration: 1.5s;
	-o-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-delay: .5s;
	-o-animation-delay: .5s;
	animation-delay: .5s;
}

.fadeInUpC {
	-webkit-animation-name: fadeInUpC;
	animation-name: fadeInUpC;
	-webkit-animation-duration: 1.5s;
	-o-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-delay: .5s;
	-o-animation-delay: .5s;
	animation-delay: .5s;
}

.slideInUp20 {
	-webkit-animation-name: slideInUp20;
	animation-name: slideInUp20;
	-webkit-animation-duration: .5s;
	-o-animation-duration: .5s;
	animation-duration: .5s;
}

.slideInUp15 {
	-webkit-animation-name: slideInUp15;
	animation-name: slideInUp15;
	-webkit-animation-duration: .5s;
	-o-animation-duration: .5s;
	animation-duration: .5s;
}

@media screen and (max-width: 800px) {
	.fadeInUpC {
		-webkit-animation-name: fadeInUpC;
		animation-name: fadeInUpC;
		-webkit-animation-duration: 1.5s;
		-o-animation-duration: 1.5s;
		animation-duration: 1.5s;
		-webkit-animation-delay: .3s;
		-o-animation-delay: .3s;
		animation-delay: .3s;
	}
}

/* ----------------------------------------------------------------------
 Contactform - Luxury Black（GOLD無し / sub-item枠無し）
---------------------------------------------------------------------- */

:root {
	--cf-black: #000;
	--cf-panel: #0b0b0b;
	--cf-panel2: #060606;
	--cf-white: #fff;
	--cf-text: rgba(255, 255, 255, .92);
	--cf-muted: rgba(255, 255, 255, .70);
	--cf-border: rgba(255, 255, 255, .14);
	--cf-border2: rgba(255, 255, 255, .22);
}

/* フォーム全体 */
.wpcf7 {
	width: 100%;
	margin: 50px 0 2.5em !important;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .10);
	background: linear-gradient(180deg, var(--cf-panel) 0%, var(--cf-panel2) 100%);
	color: var(--cf-text);
	font-size: 14px;
	border-radius: 16px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .20);
	overflow: hidden;
}

.wpcf7 .mt {
	margin-top: 40px !important;
}

/* 内側余白 */
.wpcf7 form {
	margin: 0 !important;
	padding: 28px 28px 18px;
}

/* 行 */
.wpcf7 p {
	margin-bottom: 14px;
	font-size: 15px;
	line-height: 1.8;
}

/* ラベル */
.wpcf7 label {
	display: block;
	font-family: var(--mincho, "Yu Mincho", serif);
	letter-spacing: .04em;
	color: var(--cf-text);
}

/* 入力共通 */
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	border-radius: 12px;
	border: 1px solid var(--cf-border);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	padding: 12px 14px;
	line-height: 1.2;
	transition: border-color .25s, background-color .25s, box-shadow .25s;
}

/* placeholder */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: rgba(255, 255, 255, .55);
}

/* select（100%に統一・矢印は白） */
.wpcf7 select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	background-image:
		linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .75) 50%),
		linear-gradient(135deg, rgba(255, 255, 255, .75) 50%, transparent 50%),
		linear-gradient(to right, rgba(255, 255, 255, .16), rgba(255, 255, 255, .16));
	background-position:
		calc(100% - 18px) 52%,
		calc(100% - 12px) 52%,
		calc(100% - 40px) 50%;
	background-size:
		6px 6px,
		6px 6px,
		1px 20px;
	background-repeat: no-repeat;
}

/* textarea */
.wpcf7 textarea {
	height: 260px;
	resize: vertical;
}

/* hover */
.wpcf7 input:hover,
.wpcf7 textarea:hover,
.wpcf7 select:hover {
	border-color: var(--cf-border2);
	background: rgba(255, 255, 255, .08);
}

/* focus（ゴールド無し：白いリングだけ） */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	outline: none;
	border-color: rgba(255, 255, 255, .35);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .09);
}

/* ---------------------------------
  sub-item（第◯希望）= 枠を消して整理
---------------------------------- */
.wpcf7 .sub-item {
	margin-top: 10px;
	padding: 0;
	/* 枠が無い分、余白も控えめ */
	border: none;
	background: transparent;
	border-radius: 0;
}

/* 「第一希望」などの見出しを少しだけ強調したい場合 */
.wpcf7 .sub-item {
	color: #fff;
	border-left: 2px solid #fff;
	padding-left: 10px;
}

.wpcf7 .sub-item br {
	line-height: 1;
}

/* 「日付：」「時間：」の入力は見やすく間隔 */
.wpcf7 .sub-item input,
.wpcf7 .sub-item select {
	margin-top: 6px;
}

/* 日付入力（datepicker用） */
.wpcf7 input.js-thu-datepicker {
	cursor: pointer;
	padding-right: 46px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' fill-opacity='.72' d='M7 2v2H5a2 2 0 0 0-2 2v2h18V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm14 8H3v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
}

/* readonlyでも薄くしない */
.wpcf7 input.js-thu-datepicker[readonly] {
	opacity: 1;
	-webkit-text-fill-color: #fff;
}

/* 送信ボタン（黒×白で高級感） */
.wpcf7 .wpcf7-submit {
	display: block;
	width: 260px;
	height: 52px;
	margin: 26px auto 0;
	border: 1px solid rgba(255, 255, 255, .55) !important;
	border-radius: 999px;
	background: #000;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .14em;
	font-family: var(--mincho2, var(--mincho, serif));
	cursor: pointer;
	transition: transform .08s, box-shadow .25s, background-color .25s, border-color .25s;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .40);
}

.wpcf7 .wpcf7-submit:hover {
	border-color: rgba(255, 255, 255, .85) !important;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
}

.wpcf7 .wpcf7-submit:active {
	transform: translateY(1px);
}

/* メッセージ */
.wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 12px;
	background: rgba(255, 255, 255, .06);
	text-align: center;
	color: rgba(255, 255, 255, .9);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border-color: rgba(255, 80, 80, .45);
	background: rgba(255, 80, 80, .10);
	color: #ffd7d7;
}

.wpcf7-not-valid-tip {
	color: #ffd7d7;
	font-size: 12px;
	margin-top: 6px;
}

.wpcf7 {
	color-scheme: dark;
}

.wpcf7 select {
	color: #fff;
	-webkit-text-fill-color: #fff;
}

.wpcf7 select option {
	color: #000;
	background: #fff;
}

/* -----------------------------
  jQuery UI Datepicker（黒×白）
------------------------------ */
.ui-datepicker {
	border: 1px solid rgba(255, 255, 255, .18) !important;
	background: #0b0b0b !important;
	color: #fff !important;
	border-radius: 14px !important;
	padding: 10px !important;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

.ui-datepicker .ui-datepicker-header {
	background: transparent !important;
	border: 0 !important;
	color: #fff !important;
}

.ui-datepicker th {
	color: rgba(255, 255, 255, .7) !important;
	font-weight: 700;
}

.ui-datepicker td a {
	background: rgba(255, 255, 255, .06) !important;
	border: 1px solid rgba(255, 255, 255, .10) !important;
	color: #fff !important;
	border-radius: 10px !important;
	text-align: center !important;
	padding: 8px 0 !important;
}

.ui-datepicker td a:hover {
	border-color: rgba(255, 255, 255, .35) !important;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .10);
}

.ui-datepicker td.ui-state-disabled {
	opacity: .25;
}

.ui-datepicker td a.ui-state-active,
.ui-datepicker td a.ui-state-highlight {
	background: rgba(255, 255, 255, .18) !important;
	border-color: rgba(255, 255, 255, .40) !important;
}

/* SP */
@media screen and (max-width: 800px) {
	.wpcf7 {
		border-radius: 14px;
	}

	.wpcf7 form {
		padding: 20px 16px 14px;
	}

	.wpcf7 p {
		font-size: 14px;
	}

	.wpcf7 .wpcf7-submit {
		width: 100%;
		max-width: 320px;
	}

	.wpcf7 textarea {
		height: 220px;
	}
}