@charset "utf-8";
/* ===================================================
	Base CSS
====================================================== */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

/* zen-maru-gothic-regular - japanese_latin */
@font-face {
  	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Zen Maru Gothic';
	font-style: normal;
	font-weight: 400;
  	src: url('../fonts/zen-maru-gothic-v18-japanese_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* zen-maru-gothic-500 - japanese_latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Zen Maru Gothic';
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/zen-maru-gothic-v18-japanese_latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* zen-maru-gothic-700 - japanese_latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Zen Maru Gothic';
	font-style: normal;
	font-weight: 700;
  	src: url('../fonts/zen-maru-gothic-v18-japanese_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	--color01: #105600;
	--color02: #fcf9f2;
	--color03: #e7eadc;
	--color04: #e29b2a;
	--color05: #dc755a;
	--color06: #1599b8;
	--color07: #cc5131;
	--txtsize01: 40px;
}

body {
	min-width: 1300px; min-height: 100vh; background: var(--color02); color: #000;
	font-size: 16px; font-weight: normal; line-height: 1.8; letter-spacing: 0.05em; font-weight: 400;
	font-family: 'Zen Maru Gothic', sans-serif;
	-webkit-text-size-adjust: 100%; position: relative;
}

input,
select,
textarea { font-size: 16px; font-family: 'Zen Maru Gothic', sans-serif; }
button { font-family: 'Zen Maru Gothic', sans-serif; }

div { box-sizing: border-box;}

a { color: #000; text-decoration: none; transition: opacity .5s; }

@media screen and (hover: hover) {
	a:hover { color: #000; opacity: .7; text-decoration: none; }
}

#lineup-font-size-sampler { bottom: 0; left: 0;}
.fixed { width: 100%; min-width: 1300px; position: fixed; z-index: 999;}
.pos_fix { overflow: hidden; }

.ofi { object-fit: cover; width: 100%; height: 100%;}
.view_sp { display: none;}

@media screen and (min-width: 601px) {
}
@media screen and (max-width: 600px) {
	:root {
		--txtsize01: 24px;
	}

	body { font-size: 14px;}
	input,
	select,
	textarea { font-size: 16px;}

	body { min-width: 0;}
	.view_sp { display: block;}
	.view_pc { display: none !important;}

	.fixed { min-width: auto; }
}

/* 公開後削除 */
#g_header #h_top .h_top_nav li:not(:nth-child(3)) a,
#g_header #h_btm .h_btm_nav li:not(.reserve_btn) a { pointer-events: none; opacity: .3; }
#g_header #h_btm .h_btm_nav li .img { filter: brightness(0); }


/* ---------------------------------------------------
	Base Layout
------------------------------------------------------ */
.inner_md { width: min(1200px, 92%); margin: 0 auto;}
.inner_sm { width: min(1100px, 90%); margin: 0 auto;}

@media screen and (max-width: 600px) {
	.inner_md,
	.inner_sm { width: 88%; }
}

/* ---------------------------------------------------
	Header
------------------------------------------------------ */
#g_header { width: 100%; position: absolute; top: 0; left: 0; z-index: 10; background: var(--color02); }
#g_header .h_inner{ display: flex; justify-content: space-between; width: 92%; max-width: 1200px; margin: 0 auto; box-sizing: border-box;}
#g_header #h_top { background: var(--color01); color: #fff; padding: 18px 0; font-size: 14px; line-height: 1; position: relative; z-index: 1; }
#g_header #h_top .h_top_txt { margin-left: 30px; background: #fff; color: var(--color01); padding: 5px 15px 5px 25px; border-radius: 100px; }
#g_header #h_top .h_top_nav { display: flex; gap: 35px; align-items: center; }
#g_header #h_top .h_top_nav a { display: flex; align-items: center; color: #fff;  }
#g_header #h_top .h_top_nav a:after { content: '＞'; font-size: 10px; margin-left: 0.5em; }

#g_header #h_btm { display: flex; padding: 15px 0; }
#g_header #h_btm .h_logo { width: 290px; height: 210px; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); background: var(--color02); border-radius: 50%; z-index: 0; }
#g_header #h_btm .h_logo img { margin: 25px 0 0;}
#g_header #h_btm .h_btm_nav { width: 100%; display: flex; justify-content: space-between; }
#g_header #h_btm .h_btm_nav li { flex: 1; display: flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box; }
#g_header #h_btm .h_btm_nav li:not(.reserve_btn, :first-child) { border-left: 1px dashed #bebebe; }
#g_header #h_btm .h_btm_nav li a { display: flex; flex-direction: column; align-items: center; justify-content: center;}
#g_header #h_btm .h_btm_nav li a img { margin-bottom: 10px;}
#g_header #h_btm .h_btm_nav li:nth-child(4) { margin-right: 360px; border-right: 1px dashed #bebebe; }
#g_header #h_btm .h_btm_nav li.reserve_btn { flex: auto; max-width: 105px; }
#g_header #h_btm .h_btm_nav li.reserve_btn a { background: var(--color01); border: 1px solid var(--color01); border-radius: 10px; width: 100%; height: 100%; color: #fff; font-weight: 500; }
#g_header #h_btm .h_btm_nav li.reserve_btn + li.reserve_btn { margin-left: 5px; }
#g_header #h_btm .h_btm_nav li.reserve_btn + li.reserve_btn a { background: #fff; border: 1px solid  var(--color01); color: var(--color01); letter-spacing: -1px; }

@keyframes h-top {
	0% { position: fixed; transform: translateY(0); }
	80% { transform: translateY(-100%); }
}
@keyframes h-fixed {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(0); }
}

@media screen and (hover: hover) {
}
@media screen and (min-width: 601px) {
	#g_header.fixed #h_top .h_top_txt { margin-left: 205px;}
	#g_header.fixed #h_btm .h_logo { width: 195px; height: 115px; position: absolute; left: max(130px, calc(50vw - 600px)); border: 1px solid var(--color01); flex-shrink: 0; z-index: 2; transform: translate(-50%, -50%); bottom: auto; top: 50%; background: #fff; }
	#g_header.fixed #h_btm .h_logo img { display: block; width: 139px; height: auto; margin: 0 0 4px; }
	#g_header.fixed #h_btm { padding: 10px 0; }
	#g_header.fixed #h_btm .h_btm_nav { margin-left: 175px;}
	#g_header.fixed #h_btm .h_btm_nav li:nth-child(4) { margin-right: 0; border-right: none; }
	#g_header.fixed #h_btm .h_btm_nav li.reserve_btn { max-width: 200px; width: 200px; }
	#g_header.fixed #h_btm .h_btm_nav li.reserve_btn a { padding: 22px 0; box-sizing: border-box; }

	#g_header.fixed { animation: h-fixed 1s; }
	#g_header.top { animation: h-top 1s; left: 0 !important; transition: left 0s 0.5s, background 0s 0.7s; left: 0!important; }
}
@media screen and (max-width: 600px) {
	#open_menu { position: absolute; top: 29px; right: 0; z-index: 9999; height: 12vw; width: 12vw; font-size: 0; transform: none; opacity: 1; overflow: hidden; }
	#open_menu a { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; width: 100%; background: var(--color02); }
	#open_menu .line { display: block; width: 60%; background: var(--color01); height: 1px; transition: opacity .5s, transform .5s; }
	#open_menu .line + .line { margin-top: 12%;}

	.pos_fix #open_menu,
	.pos_fix #open_menu.fixed { filter: none;}
	.pos_fix #open_menu a,
	.pos_fix #open_menu.fixed a { background: transparent; }
	.pos_fix #open_menu .line + .line,
	.pos_fix #open_menu.fixed .line + .line { margin: 0; }
	.pos_fix #open_menu .line:nth-child(2) { opacity: 0; }
	.pos_fix #open_menu .line:nth-child(1) { transform: rotate(45deg) translateY(1px);}
	.pos_fix #open_menu .line:nth-child(3) { transform: rotate(-45deg) translateY(-1px);}

	#open_menu.fixed { position: fixed; top: 0; width: 15.33vw; height: 16.67vw; filter: drop-shadow(0 0 5px #b6b6b6a3);  }
	#open_menu.fixed a { padding: 0 0 8% 20%; box-sizing: border-box; background: url(../img/sp_menu_bg.png) no-repeat top right/contain; animation: sp-fixed 0.8s; }
	#open_menu.fixed .line { width: 53%; }
	#open_menu.fixed .line + .line { margin-top: 11.5%;}
	#open_menu.top a { animation: sp-top 0.5s; }

	@keyframes sp-top {
		0% { transform: translateX(0); }
		100% { transform: translateX(100%); }
	}
	@keyframes sp-fixed {
		0% { transform: translateX(100%); }
		100% { transform: translateX(0); }
	}

	#g_header .h_inner { max-width: 100%;}
	#g_header #h_top { padding: 3px 0;}
	#g_header #h_top .h_top_txt { margin: 0 auto; background: transparent; color: #fff; font-size: 13px; }
	#g_header #h_btm { position: relative; height: 12vw; }
	#g_header #h_btm .h_logo { width: 38.4vw; height: 28vw; bottom: auto; top: -15px; transform: translate(-50%, 0); background: var(--color02); }
	#g_header #h_btm .h_logo img { margin: 18px 0 0;}
	#g_header #h_btm .h_logo a { width: 65%; }
}

@media screen and (hover: hover) {
	#open_menu.fixed a:hover { opacity: 1; }
}

/* ---------------------------------------------------
	G-nav
------------------------------------------------------ */

@media screen and (hover: hover) {
}
@media screen and (min-width: 601px) {
}
@media screen and (max-width: 600px) {
	#gnav {
		width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9990;
		background: var(--color02); overflow: auto; pointer-events: none;
		transition: 0.75s; opacity: 0;
	}
	#gnav.active {
		pointer-events: auto; opacity: 1;
	}
	.gnav_inner { width: 86%; padding: 0; margin: 0 auto calc(100px + env(safe-area-inset-bottom)); position: relative; }

	#gnav .logo { margin: 0 auto; width: 50%; padding: 60px 0 40px; text-align: center;}

	#gnav ul:not(.reserve_btn) { display: block;}
	#gnav ul:not(.reserve_btn) li a { display: flex; align-items: center; }
	#gnav ul:not(.reserve_btn) li { height: auto; border-right: none; border-bottom: 1px dashed #b4b4b4;}
	#gnav ul:not(.reserve_btn) li a { padding: 8px 20px; position: relative; color: #000; font-size: 16px; line-height: 2;}
	#gnav ul:not(.reserve_btn) li a .img { display: flex; align-items: center; width: 20px; height: 22px; }
	#gnav ul:not(.reserve_btn) li a .img img { width: 100%; height: 100%; object-fit: contain;}
	#gnav ul:not(.reserve_btn) li a .txt { margin-left: 15px;}

	#gnav .reserve_btn { display: flex; flex-direction: column; align-items: center; margin-top: 45px; }
	#gnav .reserve_btn li + li { margin-top: 10px; }
	#gnav .reserve_btn li:has(.cmn_btn01) { width: 90%; }
	#gnav .reserve_btn .cmn_btn01 { width: 100%; border-radius: 15px; background: var(--color01); border: 1px solid var(--color01); font-weight: 500; color: #fff; }
	#gnav .reserve_btn a:not(.cmn_btn01):after { content: '＞'; font-size: 10px; margin-left: 0.5em; }
	#gnav .reserve_btn li:has(.cmn_btn01) + li:has(.cmn_btn01) a { background: #fff; border: 1px solid  var(--color01); color: var(--color01); letter-spacing: -1px; }

	#gnav .tel { text-align: center; padding: 20px 0 0; line-height: 1; font-size: 18px;}
	#gnav .tel .tel-link { color: #000; font-size: 18px; }
}


/* ---------------------------------------------------
	Main img
------------------------------------------------------ */
#main_img { padding: 0; position: relative; }
#main_img .img { height: 100vh; }
#main_img .main_tit { width: 80%; font-size: 32px; position: absolute; top: calc(50% + 100px); left: 50%; text-align: center; transform: translate(-50%, -50%); line-height: 1.3; letter-spacing: 0.05em; filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.6)); }
#main_img .main_tit h1 { font-size: 70px; text-transform: uppercase; font-weight: 700; }

@media screen and (max-width: 600px) {
	#main_img .img { height: calc(70svh - (60px + env(safe-area-inset-bottom)));}
	#main_img .main_tit { font-size: 16px; top: calc(50% + 50px); }
	#main_img .main_tit h1 { font-size: 30px;  }
}


/* ---------------------------------------------------
	Contents
------------------------------------------------------ */
#contents_wrap { position: relative; }
#sec_lead { padding: 110px 0 95px; text-align: center; background: url(https://fujimilkland.com/common/img/bg_illust01_sp02.png) no-repeat 0 0/417px;  }
#sec_lead h2 { padding-top: 55px; font-size: 30px; font-weight: 500; color: var(--color01); position: relative; }
#sec_lead h2::before { content: ''; width: 40px; height: 40px; background: url(../img/icon_cuisine.svg) no-repeat center center/contain; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
#sec_lead h2 + p { margin-top: 30px; }
#sec_lead p { font-size: 18px; }

/* section */
.circle_bg { position: absolute; pointer-events: none; }
.circle_bg::before { content: ''; width: 190px; height: 190px; background: var(--bg-color01); display: block; position: absolute; border-radius: 50%; z-index: -1; }
.circle_bg.stripe::after { content: ''; width: 245px; height: 245px; background: repeating-linear-gradient(46deg, var(--bg-color02), var(--bg-color02) 3px, transparent 3px, transparent 13px); display: block; position: absolute; border-radius: 50%; z-index: -1; }
.circle_bg.dots::after { content: ''; width: 245px; height: 245px; background-color: transparent; background-image: radial-gradient(circle, var(--bg-color03) 7.5px, transparent 7.5px), radial-gradient(circle, var(--bg-color03) 7.5px, transparent 7.5px); background-size: 73px 46px; background-position: 0 0, 36px 23px; display: block; position: absolute; border-radius: 50%; z-index: -1; transform: rotate(4deg); }
[class*="bg_illust"] { position: absolute; pointer-events: none; z-index: 0; left: 50%;  }

.cmn_tit01 { text-align: center; line-height: 1; margin-bottom: 50px; }
.cmn_tit01 span { display: block; }
.cmn_tit01 .en { color: var(--color01); font-size: 45px; font-weight: 500; letter-spacing: 0.1em; }
.cmn_tit01 .jp { font-size: 20px; margin-top: 30px; letter-spacing: 0.15em; }
.cmn_tit02 { font-weight: 700; color: #fff; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--color01); }

.cmn_btn01 { display: flex; align-items: center; justify-content: center; width: 280px; height: 52px; border-radius: 100px; transition: color .3s  ease-in-out; background: #fff; color: var(--color01); border: 1px solid var(--color01); position: relative; opacity: 1; overflow: hidden; }
.cmn_btn01 span { position: relative; z-index: 1; }
.cmn_btn01::before { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; background: var(--color01); width: 0; transition: .3s; z-index: 0; }
.cmn_btn01.gr::before { background: #fff;}

@media screen and (hover: hover) {
	.cmn_btn01:hover { color: #fff!important; opacity: 1; }
	.cmn_btn01:hover::before { width: 100%; }
	.cmn_btn01.gr:hover { color: var(--color01)!important; }
}
@media screen and (min-width: 601px) {
}
@media screen and (max-width: 600px) {
	#sec_lead { padding: 90px 0 80px; background-size: 55vw;  }
	#sec_lead h2 { padding-top: 40px; font-size: 24px; text-align: center; }
	#sec_lead h2::before { width: 30px; height: 30px; }
	#sec_lead h2 + p { margin-top: 20px; }
	#sec_lead p { font-size: 16px; }

	.circle_bg::before { width: 25vw; height: 25vw; }
	.circle_bg.stripe::after { width: 30vw; height: 30vw; background: repeating-linear-gradient(46deg, var(--bg-color02), var(--bg-color02) 2px, transparent 2px, transparent 7px); }
	.circle_bg.dots::after { width: 30vw; height: 30vw; background-color: transparent; background-image: radial-gradient(circle, var(--bg-color03) 3px, transparent 3px), radial-gradient(circle, var(--bg-color03) 3px, transparent 3px); background-size: 30px 19px; background-position: 0 0, 15px 10px; }
	[class*="bg_illust"] img { width: auto; height: 100%; object-fit: contain; }

	.cmn_tit01 { margin-bottom: 40px; }
	.cmn_tit01 .en { font-size: 24px;  letter-spacing: 0.08em; }
	.cmn_tit01 .jp { font-size: 17px; margin-top: 15px; letter-spacing: 0.1em; }
	.cmn_tit02 {  -webkit-text-stroke-width: 0.5px; }

	.cmn_btn01 { width: min(100%, 240px); height: auto; padding: 10px 0; }
}


/* slick */
.slick.slick-dotted.slick-slider { margin-bottom: 0; }
[class*="slick_"] .slick-track { display: flex; }
[class*="slick_"] .slick-slide { height: auto !important; }
[class*="slick_"] .slick-slide > div { height: 100%; }
[class*="slick_"] .slick-slide div { vertical-align: bottom; }
[class*="slick_"] .slick-slide a { outline: none; }
[class*="slick_"] .slick-dots { display: flex;	justify-content: flex-end; margin: 0 0 30px; padding: 0 30px; box-sizing: border-box; position: absolute; right: 0; bottom: 0; font-size: 0; }
[class*="slick_"] .slick-dots li { display: flex; align-items: center; width: 38px; height: 10px; margin: 0 3px; }
[class*="slick_"] .slick-dots li button { width: 100%; height: 2px; padding: 0; background: var(--bg-color03); opacity: 1; transition: background .5s; }
[class*="slick_"] .slick-dots li button::before { content: none; }
[class*="slick_"] .slick-dots .slick-active button { background: var(--bg-color01); }
.slick-initialized .slick-slide > div { font-size: 0; line-height: 0;}

[class*="slick_"] { margin: 0 -30px; }
[class*="slick_"] .slick-prev,
[class*="slick_"] .slick-next { width: 60px; height: 60px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; z-index: 1; box-shadow: 0 0 13px 3px #cbcdc166; }
[class*="slick_"] .slick-prev { left: 0; }
[class*="slick_"] .slick-next { right: 0; }
[class*="slick_"] .slick-prev::before,
[class*="slick_"] .slick-next::before { content: ''; width: 23px; height: 15px; display: block; background-size: contain; opacity: 1; transition: all .5s; }
[class*="slick_"] .slick-prev::before { background: url(../img/icon_arrow01_gr.svg)no-repeat center; transform: rotate(-90deg); }
[class*="slick_"] .slick-next::before { background: url(../img/icon_arrow01_gr.svg)no-repeat center; transform: rotate(90deg); }
[class*="slick_"].center .slick-list { padding-top: 0!important; padding-bottom: 30px!important; }
[class*="slick_"] .slick-slide { margin: 0 30px;}
[class*="slick_"] .slick-prev:hover , [class*="slick_"] .slick-prev:focus, [class*="slick_"] .slick-next:hover, [class*="slick_"] .slick-next:focus { background: #fff; }
[class*="slick_"] .slick-prev:hover::before , [class*="slick_"] .slick-prev:focus::before, [class*="slick_"] .slick-next:hover::before, [class*="slick_"] .slick-next:focus::before { background: url(../img/icon_arrow01_gr.svg)no-repeat center; opacity: 0.7; }
.slick_fade .slick-slide { margin: 0; }

@media screen and (max-width: 600px) {
	[class*="slick_"] .slick-dots { margin: 0 0 13px; padding: 0 4%; }
	[class*="slick_"] .slick-dots li { width: 30px; }

	[class*="slick_"] .slick-prev,
	[class*="slick_"] .slick-next { width: 40px; height: 40px; }
	[class*="slick_"] .slick-prev::before,
	[class*="slick_"] .slick-next::before { width: 18px; height: 10px; }
	[class*="slick_"] .slick-prev { right: calc(7% + 90px); }
	[class*="slick_"] .slick-next { right: calc(7% + 20px); }
	[class*="slick_"] .slick-slide { margin: 0 10px;}
	.slick_fade .slick-list { padding: 0 0 30px!important;}
	.slick_fade .slick-slide { margin: 0; }
}


/* breadcrumb */
#contents_wrap #breadcrumb { display: flex; justify-content: flex-end; flex-wrap: wrap; margin: 5px auto 25px; width: 100%; font-size: 14px; text-align: right; padding: 0 80px; box-sizing: border-box; position: absolute; top: 0; right: 0; }
#contents_wrap #breadcrumb li { display: flex; align-items: center; line-height: 1; margin: 0.2em 0; }
#contents_wrap #breadcrumb li a { transition: border .5s;  border-bottom: 1px solid transparent; padding: 0.2em 0;}
#contents_wrap #breadcrumb li:before { content: '>'; margin: 0 5px;}
#contents_wrap #breadcrumb li:first-child:before { display: none; }

@media screen and (hover: hover) {
	#contents_wrap #breadcrumb li a:hover { border-color: #000; opacity: 1; }
}
@media screen and (max-width: 600px) {
	#contents_wrap #breadcrumb { font-size: 12px; padding: 0 2%; }
	#contents_wrap #breadcrumb li a { padding: 0;}
}



/* ---------------------------------------------------
	Footer
------------------------------------------------------ */
#pagetop { position: fixed; bottom: 20px; right: 20px; z-index: 999;
	display: flex; align-items: center; justify-content: center; flex-direction: column;
	width: 80px; height: 80px; background: transparent; color: #fff;
	overflow: hidden; transition: background 0.5s; border-radius: 50%; text-align: center; font-size: 12px; line-height: 1; cursor: pointer;
}
#pagetop::before,
#pagetop::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; transition: all .15s ease-in-out; z-index: -1; }
#pagetop::before { background: var(--color01); transform: scale(1); }
#pagetop::after { background: var(--color04); transform: scale(0); }
#pagetop .arrow { width: 22px; height: 14px; background: url(../img/icon_arrow01.svg) no-repeat center center/contain; transition: all .15s ease-in-out; }
#pagetop span { margin-bottom: 8px; }

#footer_wrap { background: var(--color01); }
#footer { color: #fff; }
#footer a { color: #fff;}

#f_logo { background: #000; position: relative; padding: 80px 0 70px; }
#f_logo::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; height: 100%; background: url(../img/f_bg.webp) no-repeat center center/cover; z-index: 0; opacity: .6; }
#f_logo .logo { display: block; margin: 0 auto 30px; position: relative; }
#f_logo address { position: relative; text-align: center; font-size: 18px; letter-spacing: 0.05em; }
#f_logo address > span { display: block; }
#f_logo address .lg_txt { font-size: 20px; }
#f_logo .f_sns { margin-top: 15px; position: relative; display: flex; align-items: center; justify-content: center; gap: 20px;  }
#f_logo .f_reserve { margin-top: 35px; position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px 15px; }
#f_logo .f_reserve .btn { width: 250px; }
#f_logo .f_reserve .btn a { display: flex; align-items: center; justify-content: center; background: #fff; color: var(--color01); border: 1px solid var(--color01); border-radius: 10px; padding: 18px 0; font-size: 18px; font-weight: 500; width: auto; height: auto; }
#f_logo .f_reserve .txt_btn { width: 100%; }
#f_logo .f_reserve .txt_btn a { display: block; width: fit-content; margin: 0 auto; position: relative; padding: 7px 0; line-height: 1; }
#f_logo .f_reserve .txt_btn a:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background: rgba(255, 255, 255, 0.6); transform: scale(0, 1); transform-origin: center top; transition: transform 0.3s; }

#f_nav { padding: 50px 0 35px; }
#f_nav .f_inner { width: 92%; max-width: 1200px; margin: 0 auto; }
#f_nav ul { display: flex; justify-content: space-between; }
#f_nav li a { display: inline-block; position: relative; padding: 7px 0; line-height: 1;  }
#f_nav li a:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background: #88ab80; transform: scale(0, 1); transform-origin: center top; transition: transform 0.3s; }

#copyright { width: 100%; color: #88ab80; width: 92%; max-width: 1200px; margin: 0 auto; padding: 15px 0; text-align: center; box-sizing: border-box; font-size: 13px; }

@media screen and (hover: hover) {
	#pagetop:hover { opacity: 1; }

	#f_logo .f_reserve .txt_btn a:hover,
	#f_nav li a:hover { opacity: 1; }
	#f_logo .f_reserve .txt_btn a:hover:after,
	#f_nav li a:hover:after { transform: scale(1,1);}
}
@media screen and (min-width: 601px) {
	@media screen and (hover: hover) {
		#pagetop:hover .arrow { transform: translateY(-5px); }
		#pagetop:hover::before { transform: scale(0); }
		#pagetop:hover::after { transform: scale(1); }
	}
}
@media screen and (max-width: 600px) {
	#pagetop { bottom: calc(75px + env(safe-area-inset-bottom)); right: 15px; width: 65px; height: 65px; font-size: 10px;  }
	#pagetop .arrow { width: 17px; height: 10px; }
	#pagetop span { margin-bottom: 5px; }

	#f_logo::before { background-position: left calc(50vw - 510px) center; }
	#f_logo { padding: 60px 0 50px; }
	#f_logo .logo { width: 45%; margin: 0 auto 20px; }
	#f_logo address { font-size: 16px; padding: 0 6%; }
	#f_logo address .lg_txt { font-size: 18px; }
	#f_logo .f_sns { margin-top: 10px; gap: 20px;  }
	#f_logo .f_reserve { width: 88%; margin: 35px auto 0; gap: 15px 2%; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
	#f_logo .f_reserve li:first-child { width: 100%; }
	#f_logo .f_reserve .btn { width: min(250px, 49%); }
	#f_logo .f_reserve .btn a { padding: 13px 0; font-size: 16px; }
	#f_logo .f_reserve .txt_btn a { padding: 5px 0; }

	#f_nav { padding: 40px 0 25px; }
	#f_nav .f_inner { width: 88%; }
	#f_nav ul { display: block; column-count: 2; }
	#f_nav li { padding-bottom: 10px; }
	#f_nav li a { display: inline-block; position: relative; padding: 7px 0; line-height: 1;  }

	#copyright { padding: 15px 0 calc(75px + env(safe-area-inset-bottom)); font-size: 12px; }

}


/* ---------------------------------------------------
	sp_nav
------------------------------------------------------ */

@media screen and (max-width: 600px) {
	#sp_nav { display: block; width: 100%; position: fixed; bottom: 0; left: 0; background: var(--color02); color: #fff; border-top: 1px solid #dbdbdb; z-index: 9999; }
	#sp_nav ul,
	#sp_nav a { display: flex; width: 100%; height: 100%; box-sizing: border-box;}
	#sp_nav li { width: 100%; padding-bottom: env(safe-area-inset-bottom); }
	#sp_nav a {
		flex-direction: column; align-items: center; justify-content: center;
		padding: 10px 0 5px; color: #fff; font-size: 12px;
	}
	#sp_nav a .img { width: 25px; height: 18px; margin-bottom: 5px; }
	#sp_nav a .img img { width: 100%; height: 100%; object-fit: contain;}
	#sp_nav li:nth-child(1) { width: 20%; }
	#sp_nav li:nth-child(1) a { color: var(--color01); }
	#sp_nav li:nth-child(2) { background: var(--color04); flex: 1; }
	#sp_nav li:nth-child(3) { background: var(--color01); flex: 1; }
	#sp_nav img { width: 30px; margin: 0 0 3px; opacity: 1;}
}


/* ---------------------------------------------------
	更新履歴
------------------------------------------------------

------------------------------------------------------ */