@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,700;1,500&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
	/*サイズ・配置・形状*/
	--border-radius-s: 3px;
	--border-radius-reg: 8px;
	--clip-path-01: polygon(0 0, 100% 0, 95% 100%, 0 100%);
	/*色*/
  --color-font-reg: #111;
  --color-or: #f86c0e;
  --color-or-op: #f86c0eef;
  --color-be: #ede8e4;
	/*フィルター*/
	--filter-wh: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(1%) hue-rotate(193deg) brightness(104%) contrast(100%);
	--filter-or: brightness(0) saturate(100%) invert(59%) sepia(59%) saturate(5290%) hue-rotate(356deg) brightness(99%) contrast(96%);
	/*文字サイズ*/
	--font-size-sml: 1.2rem;
	--font-size-reg: 1.6rem;/*base*/
	--font-size-00: .6875em;/*1.1rem*/
	--font-size-01: .8125em;/*1.3rem*/
	--font-size-02: .875em;/*1.4rem*/
	--font-size-03: .9375em;/*1.5rem*/
	--font-size-04: 1.125em;/*1.8rem*/
	--font-size-05: 1.34em;/*2rem*/
	--font-size-06: 1.625em;/*2.6rem*/
	--font-size-07: 1.875em;/*3rem*/
	@media (max-width: 767px) {
		--font-size-sml: 1.1rem;
		--font-size-reg: 1.5rem;/*base*/
		--font-size-00: .734em;/*1.1rem*/
		--font-size-01: .8em;/*1.2rem*/
		--font-size-02: .867em;/*1.3rem*/
		--font-size-03: .934em;/*1.4rem*/
		--font-size-04: 1.14em;/*1.7rem*/
		--font-size-05: 1.34em;/*2rem*/
		--font-size-06: 1.6em;/*2.4rem*/
		--font-size-07: 1.94em;/*2.9rem*/
	}
}



/*共通 *****************************************************************/
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

img { width: 100%; }
p { text-align: justify; }
a { color: inherit; text-decoration: none; }
ul,li { list-style: none; }

html { font-size: 62.5%; }
body {
	width: 100%; min-width: 360px; font-family: "Montserrat", "Noto Sans JP", sans-serif; font-size: var(--font-size-reg); letter-spacing: .025em; line-height: 1.7; color: var(--color-font-reg); }
h1,h2,h3,h4 { font-weight: 500; line-height: 1; letter-spacing: .1em; }
h1 { font-size: var(--font-size-06); }
h2 { font-size: var(--font-size-05); }
h2 .h2-en { font-size: var(--font-size-sml); color: var(--color-or); }
h2.bottom-border {
	margin-bottom: 12px; padding: 16px 0; border-bottom: 4px solid var(--color-or); }
h2.bottom-border .h2-en { margin-left: 8px; }
h3 { font-size: var(--font-size-04); }
h3.left-slash { padding-left: 24px; line-height: 1.3; position: relative; }
h3.left-slash::before {
	content: ""; display: block; width: 16px; height: 22px; background: var(--color-or); position: absolute; left: 0; top: -3px; clip-path: polygon(70% 0, 100% 0, 30% 100%, 0% 100%); }

/*共通class*/
.flex { display: flex; }
.cont-wrap { width: 85%; max-width: 1120px; margin: 0 auto; padding-top: 88px; }
.cont-wrap.narrow { width: 80%; max-width: 1000px; }

.text-en { letter-spacing: .05em; }

.text-sml { font-size: var(--font-size-01); }
.text-mark { display: inline-block; padding-left: 1.2em; position: relative; }
.text-mark::before { content: "・"; position: absolute; left: 0; top: 0; }
.text-mark.caution::before { content: "※"; }

.text-link { text-decoration: underline; }
.arw-link::after {
	content: ""; display: inline-block; width: .7em; height: .7em; padding-left: .7em;
	background-position: top center; background-size: contain; background-repeat: no-repeat; }
.arw-link::after {
	background-image: url("../images/icon_arrow.svg"); filter: var(--filter-font-reg); }
.nonelink { pointer-events: none; }

.button a {
	display: block; min-width: 100%; padding: 1.2em 32px 1.2em 24px; border-radius: var(--border-radius-s); background: var(--color-font-reg); line-height: 1; letter-spacing: .1em; color: #fff; position: relative; }
.button.sml-btn a {
	display: inline-block; min-width: 160px; padding: 8px 48px 8px 12px;  font-size: var(--font-size-01); }
.button a::after {
	content: ""; display: block; width: 5%; min-width: 8px; max-width: 12px; height: 100%; background: url("../images/icon_arrow.svg") center / contain no-repeat; position: absolute; top: 50%; right: 5%; translate: 0 -50%; filter: var(--filter-wh); }

.bg-box { position: relative; }
.bg-img {
	width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0; z-index: -5; }
.bg-img.contain { background-size: contain; }
.bg-img.wall { background-image: url("../images/bg-img.webp"); }



/*トップページ以外のMV（h1とパンくず）設定*/
.underpage #mv {
	justify-content: space-between; width: 80%; margin: 32px auto 0; padding: 48px 4%; }
.underpage #mv .bg-img {
	background-image: url("../images/mv-bg-under.webp"); background-position: top right; }
.underpage h1 {
	width: 344px; padding-left: 120px; padding-top: 32px; line-height: 1; letter-spacing: .1em; color: #fff; white-space: nowrap; position: relative; }
.underpage h1 .text-sml {
	width: 108px; font-size: var(--font-size-reg); text-align: right; letter-spacing: .18em; position: absolute; left: 0; top: 0; }
.underpage h1 .text-sml::after {
	content: ""; display: block; width: 1px; height: 80px; background: #fff; position: absolute; top: -8px; right: 2px; rotate: 35deg; }
.underpage .breadcrumb {
	justify-content: flex-end; align-items: center; gap: 0 12px; color: #fff; }
.underpage .breadcrumb-item { font-size: var(--font-size-00); white-space: nowrap; }
.underpage .breadcrumb-item::after {
	content: ">"; display: inline-block; padding-left: 12px; }
.underpage .breadcrumb-item:last-child::after { content: none; }

@media (max-width: 767px) {
	.cont-wrap { width: 88%; }
	.underpage #mv { margin-top: 40px; }
	.underpage h1 { width: auto; padding: 0 0 24px 0; font-size: var(--font-size-05); }
	.underpage h1 .text-sml { width: auto; bottom: 0; top: unset; left: 106%; }
	.underpage h1 .text-sml::after {
		height: 60px; top: unset; bottom: -8px; right: unset; left: -3%; }
	.underpage .breadcrumb {
		color: var(--color-font-reg); position: absolute; bottom: calc(100% + 4px); right: 0; }
}
@media (max-width: 600px) {
	.cont-wrap { padding-top: 104px; }
}
@media (max-width: 520px) {
	.cont-wrap.narrow { width: 88%; }
	.underpage #mv {
		width: 100%; margin-top: 0; margin-bottom: 32px; padding-right: 6%; padding-left: 6%; }
	.underpage .breadcrumb { top: calc(100% + 8px); bottom: unset; right: 5%; }
}


/*順番に表示 --------------------*/
.slidein-wrap { overflow: hidden; }
.fadein { opacity: 0;  transition: 1s cubic-bezier(0.75, 0, 0.25, 1); }
.fadein.active { opacity: 1; transform: translateX(0); }
.slide_left { transform: translateX(calc(-50vw - 50%)); }
.slide_right { transform: translateX(calc(50vw + 50%)); }


/*レスポンシブ時の非表示設定 --------------------*/
.min768-none,
.min521-none,
.min429-none { display: none; }

@media (max-width: 767px) {
	.min768-none { display: block; }
}
@media (max-width: 520px) {
	.min521-none { display: block; }
}
@media (max-width: 428px) {
	.min429-none { display: block; }
}





/*ヘッダー *****************************************************************/
#header {
	justify-content: space-between; align-items: center; height: 70px; padding: 0 3%; background: #fff; border-bottom: 2px solid; position: sticky; top: 0; z-index: 99999; transition: .8s; }

/*ロゴ・社名 --------------------*/
#header .logo-area a { gap: 0 8px; }
#header .logo-area .image01 { width: 36px; }
#header .logo-area .image02 { width: 96px; }

/*Gナビ、問い合わせ、SNS --------------------*/
#header .gnav-area { justify-content: flex-end; align-items: flex-end; gap: 0 16px; }
#header .gnav { justify-content: flex-end; align-items: flex-end; }
#header .gnav .gnav-item a { display: block; transition: .2s; }

#header .main-nav { gap: 0 24px; }
#header .main-nav .gnav-item a {
	 padding: 0 4px 3px; font-size: var(--font-size-02); line-height: 1; letter-spacing: .1em; position: relative; }
#header .main-nav .gnav-item a::after {
	content: ""; display: inline-block; width: 0; height: 1px; background: var(--color-or); position: absolute; bottom: -3px; left: 0; transition: .4s; }

#header .sns-nav .gnav-item a { width: 24px; height: 24px; }
#header .sns-nav .gnav-item img { vertical-align: middle; }
#header .sns-nav .gnav-item.line a {
	width: auto; margin-right: 12px; margin-left: 16px; }
#header .sns-nav .gnav-item.line img { width: auto; height: 100%; } 


/*バーガー --------------------*/
.toggle-menu { display: none; }


@media (min-width: 768px) {
	@media (hover: hover) {
		#header .gnav .gnav-item a:hover { color: var(--color-or); font-weight: bold; }
		#header .main-nav .gnav-item a:hover::after { width: 100%; }
		#header .gnav .contact a:hover { filter: var(--filter-or); }
	}
}
@media (max-width: 960px) {
	#header .logo-area .image02 { width: 88px; }
	#header .main-nav { gap: 0 12px; }
}
@media (max-width: 767px) {
	#header { height: 64px; }
	#header .main-nav {
		flex-direction: column; justify-content: flex-start; align-items: center; width: 0; height: 100svh; padding-top: 5vh; background: var(--color-or-op); position: absolute; top: 64px; right: 0; transition: ease .5s; overflow: hidden; }
	#header .main-nav.active { width: 428px; }
	
	#header .main-nav .gnav-item {
		width: 88%; opacity: 0; visibility: hidden; transition: all 0.5s 0s; }
	#header .main-nav .gnav-item a {
		 margin-right: 0; padding: 16px 5% 16px 10%; border-bottom: 1px solid; font-weight: bold; position: relative; }
	#header .main-nav .gnav-item a::before {
		content: ""; width: 1px; height: 1.5em; background: var(--color-font-reg); position: absolute; top: 50%; left: 5%; translate: 0 -50%; rotate: 32deg; }
	#header .main-nav.active .gnav-item {
		opacity: 1; visibility: visible; transition: all 0.5s .3s; }
	#header .sns-nav { margin-right: 44px; }
	
	.toggle-menu {
		display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; width: 16px; height: 18px; position: absolute; right: 20px; cursor: pointer; transition: transform 0.3s; z-index: 9999; }
	.toggle-menu span {
		display: inline-block; height: 2px; background: var(--color-font-reg); transition: all 0.3s; }
	.toggle-menu span:nth-child(1) { width: 100%; }
	.toggle-menu span:nth-child(2) { width: 75%; }
	.toggle-menu span:nth-child(3) { width: 50%; }
	.toggle-menu.active span:nth-child(1) {
		transform: translateY(8px) rotate(45deg); }
	.toggle-menu.active span:nth-child(2) { opacity: 0; }
	.toggle-menu.active span:nth-child(3) {
		width: 100%; transform: translateY(-8px) rotate(-45deg); }
}
@media (max-width: 428px) {
	#header .logo-area .image01 { width: 32px; }
	#header .logo-area .image02 { width: 80px; }
	#header .main-nav.active { width: 100%; }
	#header .sns-nav .contact { display: none; }
}





/*フッター *****************************************************************/

/*CVエリア --------------------*/
.foot-contact-area {
	justify-content: center; gap: 0 8%; padding: 88px 0; background: var(--color-font-reg); position: relative; }
.foot-contact-area::before {
	content: ""; width: 100%; height: 4px; background: linear-gradient(90deg, var(--color-or) 30%, #000 90%); position: absolute; top: 0; left: 0; }
	
.foot-contact-area .text-area { width: 30%; min-width: 296px; }
.foot-contact-area .text-area h2 {
	align-items: flex-end; gap: 0 8px; margin-bottom: 56px; }
.foot-contact-area .text-area h2 .h2-en {
	color: var(--color-font-reg); font-size: var(--font-size-reg); position: relative; }
.foot-contact-area .text-area h2 .h2-en::after {
	content: ""; display: inline-block; width: 1px; height: 100%; background: #fff; position: absolute; left: calc(100% + 1px); top: 0; rotate: 17deg; }
.foot-contact-area .text-area h2 .h2-en span {
	display: inline-block; margin-bottom: 2em; padding: 4px 32px 4px 12px; background: var(--color-or); clip-path: var(--clip-path-01); }
.foot-contact-area .text-area h2 .title { color: #fff; }

.foot-contact-area .link-list { flex-wrap: wrap; gap: 8px 16px; }
.foot-contact-area .button { width: 100%; z-index: 10; }
.foot-contact-area .button a { border: 1px solid; color: #fff; z-index: 5; }
.foot-contact-area .button a::after { filter: var(--filter-wh); }

.foot-contact-area .image-area { width: 30%; max-width: 480px; }
.foot-contact-area .image-area .bg-area {
	aspect-ratio: 3 / 2; border: 1px solid #fff; border-radius: var(--border-radius-s); }
.foot-contact-area .image-area .bg-img {
	max-width: 440px; height: 120%; background-image: url("../images/contact_img.svg"); background-position: right bottom; top: unset; left: unset; right: 0; bottom: -88px; z-index: 0; }

/*社名・ナビ・コピーライトエリア --------------------*/
.foot-nav-area { position: relative; }
.foot-nav-area::after {
	content: ""; width: 100%; height: 4px; background: linear-gradient(-90deg, var(--color-or) 30%, #000 90%); position: absolute; top: 0; left: 0; }
.foot-nav-area .cont-wrap {
	justify-content: space-between; flex-wrap: wrap; max-width: unset; padding-top: 56px; }

.foot-nav-area .info-box { width: 360px; gap: 0 16px; }
.foot-nav-area .info-box .logo { width: 48px; margin-top: -8px; }
.foot-nav-area .info-box h2 {
	margin-bottom: 12px; font-size: var(--font-size-reg); font-weight: bold; letter-spacing: 0; white-space: nowrap; }
.foot-nav-area .info-box .address,
.foot-nav-area .info-box .opening-info {
	font-size: var(--font-size-01); white-space: nowrap; }
.foot-nav-area .info-box .address { margin-bottom: 32px; }
.foot-nav-area .info-box .opening-hours,
.foot-nav-area .info-box .opening-day { flex-wrap: wrap; }
.foot-nav-area .info-box .opening-info .title { width: 5.5em; }
.foot-nav-area .info-box .opening-hours { margin-bottom: 8px; }
.foot-nav-area .info-box .opening-hours .week { display: inline-block; width: 5em; }
.foot-nav-area .info-box .opening-hours .hours { width: calc(98% - 43em); }

.foot-nav-area .nav-box { width: calc(93% - 360px); max-width: 480px; }
.foot-nav-area .gnav { justify-content: flex-end; flex-wrap: wrap; gap: 16px 24px; }
.foot-nav-area .main-nav .gnav-item {
	font-size: var(--font-size-01); line-height: 1; letter-spacing: .1em; white-space: nowrap; transition: .2s; }
.foot-nav-area .sns-nav { gap: 0 16px; margin-top: 32px; }
.foot-nav-area .sns-nav .gnav-item { width: 32px; height: 32px; }

.foot-nav-area .copyright {
	width: 100%; margin-top: 64px; padding: 8px 0 4px; border-top: 1px solid; text-align: right; white-space: nowrap; font-size: var(--font-size-sml); }

#pagetop {
	padding: 12px 9px 5px 7px; border-radius: var(--border-radius-s); background: #000; color: #fff; font-size: var(--font-size-00); line-height: 1; position: fixed; right: 0; bottom: 64px; rotate: 90deg; translate: 36px 0; cursor: pointer; z-index: 999; }
#pagetop::before {
	content: ""; display: inline-block; width: 9px; aspect-ratio: 1; margin-right: 6px; background: url("../images/icon_arrow.svg") center bottom / contain no-repeat; filter: var(--filter-wh); rotate: 180deg; }

@media (min-width: 768px) {
	@media (hover: hover) {
		.foot-nav-area .gnav-item a:hover { color: var(--color-or); }
	}
}
@media (max-width: 834px) {
	.foot-nav-area .cont-wrap { padding-top: 104px; }
	.foot-nav-area .info-box { position: relative; }
	.foot-nav-area .info-box .logo { position: absolute; bottom: 103%; left: 0; }
}
@media (max-width: 767px) {
	.foot-contact-area {
		justify-content: flex-start; padding: 56px 8%; }
	.foot-contact-area .text-area { width: 100%; max-width: 480px; }
	.foot-contact-area .text-area h2 { margin-bottom: 96px; }
	.foot-contact-area .image-area { position: absolute; top: 32px; right: 8%; } .foot-contact-area .image-area .bg-img { height: 160%; }
	.foot-nav-area .info-box { width: calc(92% - 120px); }
	.foot-nav-area .main-nav {
		flex-direction: column; align-items: flex-end; }
	.foot-nav-area .nav-box { width: 120px; }
	.foot-nav-area .copyright { margin-top: 16px; }
}
@media (max-width: 520px) {
	.foot-contact-area .text-area h2 {
		flex-direction: column; align-items: flex-start; }
	.foot-contact-area .text-area h2 .h2-en::after { content: none; }
	.foot-contact-area .text-area h2 .h2-en span { margin-bottom: 16px; margin-left: -8px; }
	.foot-contact-area .text-area h2 .title { margin-left: 8px; }
	.foot-contact-area .image-area { width: 40%; top: 40px; right: 5%; }
	.foot-nav-area .cont-wrap { padding-top: 40px; }
	.foot-nav-area .info-box,
	.foot-nav-area .nav-box { width: 100%; }
	.foot-nav-area .info-box .logo { display: none; }
	.foot-nav-area .nav-box {
		display: flex; flex-direction: column; margin-top: 56px; padding-right: 8px; }
	.foot-nav-area .main-nav .gnav-item.display-none { display: none; }
	.foot-nav-area .sns-nav { margin-top: 16px; }
}