@charset "UTF-8";
/*! destyle.css v1.0.15 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model */
/* ============================================ */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap");
* { box-sizing: border-box; }

::before, ::after { box-sizing: inherit; }

/* Document */
/* ============================================ */
/** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Remove gray overlay on links for iOS. */
html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -webkit-tap-highlight-color: transparent; /* 3*/ }

/* Sections */
/* ============================================ */
/** Remove the margin in all browsers. */
body { margin: 0; }

/** Render the `main` element consistently in IE. */
main { display: block; }

/* Vertical rhythm */
/* ============================================ */
p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0; }

/* Headings */
/* ============================================ */
h1, h2, h3, h4, h5, h6 { font-size: inherit; line-height: inherit; font-weight: inherit; margin: 0; }

/* Lists (enumeration) */
/* ============================================ */
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Lists (definition) */
/* ============================================ */
dt { font-weight: bold; }

dd { margin-left: 0; }

/* Grouping content */
/* ============================================ */
/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ border: 0; border-top: 1px solid; margin: 0; clear: both; color: inherit; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
pre { font-family: monospace, monospace; /* 1 */ font-size: inherit; /* 2 */ }

address { font-style: inherit; }

/* Text-level semantics */
/* ============================================ */
/** Remove the gray background on active links in IE 10. */
a { background-color: transparent; text-decoration: none; color: inherit; }

/** 1. Remove the bottom border in Chrome 57- 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: inherit; /* 2 */ }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content */
/* ============================================ */
/** Remove the border on images inside links in IE 10. */
img { border-style: none; vertical-align: bottom; }

embed, object, iframe { border: 0; vertical-align: bottom; }

/* Forms */
/* ============================================ */
/** Reset form fields to make them styleable */
button, input, optgroup, select, textarea { -webkit-appearance: none; appearance: none; vertical-align: middle; color: inherit; font: inherit; border: 0; background: transparent; padding: 0; margin: 0; outline: 0; border-radius: 0; text-align: inherit; }

/** Reset radio and checkbox appearance to preserve their look in iOS. */
[type="checkbox"] { -webkit-appearance: checkbox; appearance: checkbox; }

[type="radio"] { -webkit-appearance: radio; appearance: radio; }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }

/** Correct the inability to style clickable types in iOS and Safari. */
button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer; -webkit-appearance: none; appearance: none; }

button[disabled], [type="button"][disabled], [type="reset"][disabled], [type="submit"][disabled] { cursor: default; }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/** Remove arrow in IE10 & IE11 */
select::-ms-expand { display: none; }

/** Remove padding */
option { padding: 0; }

/** Reset to invisible */
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }

/** Remove the default vertical scrollbar in IE 10+. */
textarea { overflow: auto; }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the outline style in Safari. */
[type="search"] { outline-offset: -2px; /* 1 */ }

/** Remove the inner padding in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/** Clickable labels */
label[for] { cursor: pointer; }

/* Interactive */
/* ============================================ */
/* Add the correct display in Edge, IE 10+, and Firefox. */
details { display: block; }

/* Add the correct display in all browsers. */
summary { display: list-item; }

/* Remove outline for editable content. */
[contenteditable] { outline: none; }

/* Table */
/* ============================================ */
table { border-collapse: collapse; border-spacing: 0; }

caption { text-align: left; }

td, th { vertical-align: top; padding: 0; }

th { text-align: left; font-weight: bold; }

/* Misc */
/* ============================================ */
/** Add the correct display in IE 10+. */
template { display: none; }

/** Add the correct display in IE 10. */
[hidden] { display: none; }

/******************************************************

base

******************************************************/
html { font-size: 16px; }

body { font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight: 500; font-style: normal; background: #fff; color: #000; }

a { color: #000; text-decoration: none; transition: 200ms linear; }
a[href*="tel:"] { pointer-events: none; }

.page-wrap { position: relative; background-color: #FFF; }

.aw { display: inline-block; }

.note { font-size: 10px; line-height: 1.6; }
.note.t-shadow { text-shadow: 0 0 5px #000 , 0 0 3px #000; }
.note.t-white { color: #FFF; }
.note.t-white.t-shadow { text-shadow: 0 0 2px #000 , 0 0 3px #000 , 0 0 3px #000 , 0 0 3px #000; }
.note.t-black { color: #000; }
.note.t-black.t-shadow { text-shadow: 0 0 2px #FFF , 0 0 3px #FFF , 0 0 3px #FFF , 0 0 3px #FFF; }

.sp { display: none !important; }

.clearfix { content: ''; display: block; clear: both; }

.img100p { width: 100%; height: auto; display: block; }

.page_title { font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; font-size: 3.8rem; color: #397f9f; text-align: center; margin-bottom: 4rem; }
@media screen and (max-width: 599px) { .page_title { font-size: 3.0rem; } }

h3.en_ttl { text-align: center; color: #fff; margin-bottom: 4rem; }
h3.en_ttl::before { content: ""; display: block; width: 1px; height: 75px; margin: 0 auto 1rem; background: #fff; }
h3.en_ttl.b { color: #000; }
h3.en_ttl.b::before { background: #000; }

.en_midashi { font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; font-size: 1.0rem; }

.en_midashi2 { font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; font-size: 1.7rem; letter-spacing: 0.1em; color: #397f9f; margin-bottom: 1rem; }

.midashi-L { font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight: 500; font-style: normal; font-size: 2.2rem; letter-spacing: 0.15em; line-height: 1.5; }

.midashi-M { font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight: 500; font-style: normal; font-size: 1.5rem; letter-spacing: 0.15em; line-height: 1.5; }

.midashi-S { font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight: 500; font-style: normal; font-size: 1.3rem; letter-spacing: 0.15em; line-height: 1.5; }

.lead { font-size: 16px; letter-spacing: 0.1em; line-height: 1.8; }

.lead2 { font-size: 13px; letter-spacing: 0.1em; line-height: 1.8; }

sup { font-size: 0.4em; vertical-align: text-top; top: 0.5rem; }

.lead sup { top: 0.1em; }

section .inner { max-width: 1080px; width: 90%; margin: auto; }

.bg_radius { background: url("../img/common/bg2.png") top center no-repeat; background-size: cover; }

@media screen and (max-width: 1024px) { html { font-size: 14px; } }
@media screen and (max-width: 599px) { html { font-size: 14px; }
  body { padding-bottom: 50px; }
  a[href*="tel:"] { pointer-events: initial; }
  .sp { display: block !important; }
  .pc { display: none !important; } }
.header-space { width: 100%; height: 70px; }

.flexBox { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: start; align-items: flex-start; }
.flexBox * { min-height: 0%; }
.flexBox.box2 > li, .flexBox.box2 > div, .flexBox.box2 > p, .flexBox.box2 > span { width: 48%; }
.flexBox.box3 > li, .flexBox.box3 > div, .flexBox.box3 > p, .flexBox.box3 > span { width: 31%; }
.flexBox.box4 > li, .flexBox.box4 > div, .flexBox.box4 > p, .flexBox.box4 > span { width: 23%; }

/******************************************************

entryArea

******************************************************/
#fixheadNav { position: fixed; /*top: 7px;*/ top: 12px; right: 10px; padding: 10px; border-bottom-left-radius: 10px; z-index: 500; }
@media screen and (max-width: 930px) { #fixheadNav { text-align: right; } }
@media screen and (max-width: 725px) { #fixheadNav { top: 5px; } }
#fixheadNav #header-subNav { display: flex; justify-content: space-between; flex-wrap: nowrap; width: 100%; max-width: none; }
#fixheadNav #header-subNav li { width: 200px; }
#fixheadNav #header-subNav li a { display: block; width: 100%; }
#fixheadNav #header-subNav li a img { width: 100%; height: auto; transition: 0.5s; }
#fixheadNav #header-subNav li a:hover img { filter: brightness(1.3); }
#fixheadNav #header-subNav li.reserve01, #fixheadNav #header-subNav li.reserve02, #fixheadNav #header-subNav li.entry { margin-left: 10px; }
@media screen and (max-width: 1080px) { #fixheadNav #header-subNav li { /*width: 150px;*/ }
  #fixheadNav #header-subNav li a { /*margin-top: 5px;*/ } }
@media screen and (max-width: 890px) { #fixheadNav #header-subNav li.reserve01, #fixheadNav #header-subNav li.reserve02, #fixheadNav #header-subNav li.map, #fixheadNav #header-subNav li.entry { display: none; } }
#fixheadNav #header-subNav li.menu { position: relative; width: 42px; height: 27px; margin-left: 20px; cursor: pointer; }
#fixheadNav #header-subNav li.menu img { width: 100%; height: auto; }
#fixheadNav #header-subNav li.menu .menu-btn-cls { font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; display: flex; position: absolute; align-items: center; justify-content: space-between; flex-direction: column-reverse; top: 0; left: 0; color: #000; font-size: 12px; letter-spacing: 0.1em; transition: .3s linear opacity; width: 100%; height: 100%; line-height: 0.5; }
#fixheadNav #header-subNav li.menu .menu-btn-cls .dot { width: 5px; height: 5px; position: absolute; top: 5%; right: 0%; border-radius: 50%; background-color: #a73b4e; }
#fixheadNav #header-subNav li.menu .menu-btn-cls .menu-linebox { width: 100%; height: 70%; position: relative; display: flex; flex-direction: column; justify-content: flex-end; }
#fixheadNav #header-subNav li.menu .menu-btn-cls .menu-linebox li { width: 100%; height: 1px; background-color: #fff; margin-top: 12%; }
#fixheadNav #header-subNav li.menu .menu-btn-cls.menu-off { top: 0; }
#fixheadNav #header-subNav li.menu .menu-btn-cls.menu-off .menu-linebox { margin-bottom: 5%; }
#fixheadNav #header-subNav li.menu .menu-btn-cls.menu-on { opacity: 0; }
#fixheadNav #header-subNav li.menu .menu-btn-cls.menu-on .menu-linebox { width: 40px; height: 60%; position: relative; }
#fixheadNav #header-subNav li.menu .menu-btn-cls.menu-on .menu-linebox li { position: absolute; top: 50%; left: 50%; margin-top: 0%; transition: 0.5s ease 0s transform; }
#fixheadNav #header-subNav li.menu .menu-btn-cls.menu-on .menu-linebox li:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg); }
#fixheadNav #header-subNav li.menu .menu-btn-cls.menu-on .menu-linebox li:nth-child(2) { transform: translate(-50%, -50%) rotate(0deg); }
#fixheadNav #header-subNav li.menu.on .menu-btn-cls.menu-off { opacity: 0; }
#fixheadNav #header-subNav li.menu.on .menu-btn-cls.menu-on { opacity: 1; }
#fixheadNav #header-subNav li.menu.on .menu-btn-cls.menu-on .menu-linebox li:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
#fixheadNav #header-subNav li.menu.on .menu-btn-cls.menu-on .menu-linebox li:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
#fixheadNav #header-subNav li.menu .sp-icon { display: none; }
@media screen and (max-width: 725px) { #fixheadNav #header-subNav li.menu .pc-icon { display: none; }
  #fixheadNav #header-subNav li.menu .sp-icon { display: block; } }
@media screen and (max-width: 599px) { #fixheadNav #header-subNav li.menu { width: 36px; height: 42px; }
  #fixheadNav #header-subNav li.menu .menu-btn-cls { flex-direction: column-reverse; letter-spacing: 0.05em; }
  #fixheadNav #header-subNav li.menu .menu-btn-cls.menu-off .menu-linebox { width: 100%; justify-content: center; }
  #fixheadNav #header-subNav li.menu .menu-btn-cls.menu-on .menu-linebox { width: 80%; } }

/******************************************************

header

******************************************************/
h1.h1-cls { display: none; position: fixed; top: 0; left: 0; }

.header { position: fixed; z-index: 300; width: 100%; background-color: #fff; }
.header .header-inner { position: relative; /*height: 70px;*/ height: 80px; }
.header .header-inner__sitename { position: absolute; left: 20px; top: 15px; z-index: 1; /*width: 340px;*/ width: 354px; }
.header .header-inner__sitename img { width: 100%; height: auto; }
@media screen and (max-width: 1024px) { .header .header-inner__sitename { width: 300px; top: 19px; } }
@media screen and (max-width: 599px) { .header .header-inner__sitename { width: 270px; left: 15px; top: 22px; } }
@media screen and (max-width: 380px) { .header .header-inner__sitename { width: calc(86% - 45px); left: 15px; top: 22px; } }
.header #header-subNav { position: absolute; top: 17px; right: 100px; }
.header #header-subNav li a { font-size: 1.2rem; padding: 8px 0; }
.header #header-subNav li a::after { content: none; }
.header .guide-nav { position: absolute; right: 20px; top: 25px; }
.header .guide-nav ul { display: flex; align-items: center; justify-content: flex-end; }
.header .guide-nav__link { font-size: 10px; font-weight: bold; margin-left: 15px; }
.header .guide-nav__link a { background-color: #397f9f; color: #fff; display: block; padding: 3px 20px; border-radius: 30px; text-align: center; }
.header .guide-nav__link a:hover { filter: brightness(110%); }

.nav-switch { background: #397f9f; box-sizing: border-box; display: none; position: fixed; top: 8px; right: 10px; z-index: 3; width: 40px; padding: 14px 10px; border-radius: 5px; cursor: pointer; }
.nav-switch span { background-color: #fff; display: block; margin-bottom: 5px; width: 20px; height: 1px; transition: all 300ms cubic-bezier(1, 0, 0, 1); }
.nav-switch span:last-child { margin-bottom: 0; }

body.menu-opened .nav-switch :nth-child(1) { transform: translate(0, 6px) rotate(135deg); }
body.menu-opened .nav-switch :nth-child(2) { transform: scaleX(0); opacity: 0; }
body.menu-opened .nav-switch :nth-child(3) { transform: translate(0, -6px) rotate(-135deg); }

@media screen and (max-width: 1024px) { .header .guide-nav__link { margin-left: 10px; }
  .header .guide-nav__link a { padding: 3px 5px; } }
@media screen and (max-width: 599px) { .header .guide-nav { display: none; }
  .nav-switch, .sp-nav { display: block; } }
/******************************************************

global nav

******************************************************/
.menu_ttl.pc-item { position: fixed; top: 70px; left: -150%; transition: .5s; }

#gnavArea.on { overflow: scroll; }
#gnavArea.on .menu_ttl.pc-item { left: 0; }

.menu_ttl.sp-item { display: none; }

@media screen and (max-width: 725px) { .menu_ttl.pc-item { display: none; }
  .menu_ttl.sp-item { display: block; } }
.menu_ttl { background: rgba(0, 0, 0, 0.8); color: #fff; font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; letter-spacing: 0.2em; font-size: 1.2rem; text-align: center; padding: 1rem 0; width: 100%; }
.menu_ttl::before, .menu_ttl::after { display: inline-block; content: "／"; margin: 0 20px; color: #fff; }

.global-head { text-align: center; color: #fff; padding-bottom: 1.5em; }
.global-head .menu-logo { margin-bottom: 1em; }
.global-head .menu-logo img { width: 90%; max-width: 380px; }
.global-head h5 { font-size: 1.2em; font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; font-weight: 600; }
@media screen and (max-width: 599px) { .global-head .menu-logo { margin-bottom: 1em; padding-top: 2em; }
  .global-head .menu-logo img { width: 80%; max-width: 300px; } }

.global-nav { width: 100%; position: relative; background: #fff; }
.global-nav ul { letter-spacing: -0.4em; font-size: 0; text-align: center; width: 96%; /*max-width: 1000px;*/ max-width: 1280px; margin: auto; }
.global-nav li { letter-spacing: 0; font-size: 1rem; display: inline-block; width: 14.2857%; padding: 1.5rem 0; position: relative; }
.global-nav li .en { color: #000; font-size: 0.65rem; display: block; font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; }
.global-nav li .ja { color: #000; font-size: 0.9rem; display: block; font-feature-settings: "palt" 1; }
.global-nav li a, .global-nav li .soon { box-sizing: border-box; display: block; }
.global-nav li a { transition: .2s; }
.global-nav li a:hover { opacity: 0.6; }
.global-nav li a:hover .en { color: #e6ce82; }
.global-nav li a:hover .ja { color: #e6ce82; }
.global-nav li a.current .en { color: #e6ce82; }
.global-nav li a.current .ja { color: #e6ce82; }
.global-nav li .soon { opacity: 0.3; }
.global-nav li.border { width: 100%; padding: 0; }
@media screen and (max-width: 870px) { .global-nav li.kitchen .en { letter-spacing: -0.05em; } }
@media screen and (max-width: 599px) { .global-nav ul { width: 100%; border-top: 1px solid #fff; }
  .global-nav li { width: 50%; border-bottom: 1px solid #000; padding: 1.25rem 0; }
  .global-nav li:nth-child(odd) { /**border-right: 1px solid #ccc;**/ }
  .global-nav li:nth-child(odd):before { content: ""; position: absolute; width: 1px; background: #000; right: 0; top: 7px; bottom: 7px; } }

body.menu-opened .global-nav { transform: none; }

/******************************************************

page title

******************************************************/
.page-title-container { width: 100%; background: linear-gradient(180deg, #2f2f2f, #292929, #232323, #1e1e1e, #181818, #121212, #0a0a0a, #000000); position: relative; padding-bottom: 1.5rem; }
.page-title-container .page-title-inner { width: 90%; max-width: 1060px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; position: relative; }
.page-title-container .page-title-inner p { color: #FFF; text-align: center; line-height: 1.5; }
.page-title-container .page-title-inner .line { width: 1px; height: 100%; background-color: #ffffff; display: none; }
.page-title-container .page-title-inner .page-title-name { text-align: center; width: 200px; padding: 1.8rem 0 1rem; border: 1px solid #ffffff; border-width: 0 1px 0 1px; }
.page-title-container .page-title-inner .page-title-name .en { font-size: 0.937rem; letter-spacing: 0.1em; font-weight: 400; font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; }
.page-title-container .page-title-inner .page-title-name .ja { font-size: 0.8rem; letter-spacing: 0.02em; font-weight: 400; }
.page-title-container .page-title-inner .page-title-txt { flex: 1; margin: 0 auto; padding: 1rem 5% 0; }
.page-title-container .page-title-inner .page-title-txt p { font-size: 1.3rem; font-feature-settings: "palt" 1; letter-spacing: 0.15em; text-align: left; display: block; font-weight: 400; }
.page-title-container .page-title-inner .page-title-txt p .number { font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; font-size: 130%; }
@media screen and (max-width: 1024px) { .page-title-container .page-title-inner { margin: 0 auto; }
  .page-title-container .page-title-inner .page-title-name { width: 100%; border: none; padding: 1rem 0 0.5rem; }
  .page-title-container .page-title-inner .page-title-name .en { display: none; }
  .page-title-container .page-title-inner .page-title-name .ja { font-size: 1rem; }
  .page-title-container .page-title-inner .page-title-name::after { content: ""; display: block; margin: 5px auto 0; width: 30px; height: 1px; background-color: #FFF; }
  .page-title-container .page-title-inner .page-title-txt { width: 100%; padding: 0 5%; }
  .page-title-container .page-title-inner .page-title-txt p { text-align: center; } }

/******************************************************

container

******************************************************/
.local-nav { max-width: 730px; margin-inline: auto; }
.local-nav ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.local-nav ul li { display: grid; }
.local-nav ul li.current a { color: #fff; background: #873D22; background: linear-gradient(170deg, #873d22 0%, #511b0f 100%); }
.local-nav ul li a { display: flex; justify-content: center; flex-direction: column; place-content: center; width: 100%; font-feature-settings: "palt"; display: block; padding: 0.5rem; background-color: #dad8d5; color: #999999; font-size: 1.125rem; text-align: center; }
.local-nav ul li a:hover { filter: brightness(0.8); }

@media screen and (max-width: 599px) { .container::before { content: ''; cursor: pointer; position: fixed; left: 0; top: 60px; z-index: 95; width: 100%; height: calc(100% - 60px); visibility: hidden; opacity: 0; transition: 300ms; background: #000; }
  body.menu-opened .container::before { visibility: visible; opacity: .6; }
  .local-nav ul li a { padding: 1rem 5px; font-size: 1rem; } }
/******************************************************

footer-container

******************************************************/
.entryArea { display: flex; justify-content: center; flex-wrap: wrap; max-width: 800px; width: 90%; margin: auto; }
.entryArea li { width: 48%; margin: 0 1%; }
.entryArea li img { width: 100%; height: auto; }

@media screen and (max-width: 599px) { .entryArea { max-width: 360px; }
  .entryArea li { width: 100%; /*margin-bottom: 10px;*/ } }
.informationArea { text-align: center; }
.informationArea .information { color: #fff; margin-bottom: 3rem; }
.informationArea .en_midashi { margin-top: 2rem; font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; letter-spacing: 0.2em; margin-bottom: 2rem; }
.informationArea .scArea { max-width: 800px; width: 90%; margin: auto; }
.informationArea .scArea h5 { font-size: 1.5rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #fff; }
.informationArea .scArea p { font-size: 0.85rem; }

.contentsArea { width: 100%; background: #fff; padding: 0.1rem 0 6rem; }
.contentsArea .contentAreaTitle { color: #000; text-align: center; padding-top: 1rem; padding-bottom: 3rem; letter-spacing: 0.2em; }
.contentsArea .contentsInner { max-width: 1060px; width: calc(100% - 2rem); margin: 0 auto; }
.contentsArea .contentsInner .c-box { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; margin-bottom: 4rem; }
.contentsArea .contentsInner .c-box:nth-child(2n) .c-box-img { order: 2; }
.contentsArea .contentsInner .c-box:nth-child(2n) .c-box-txt { order: 1; }
.contentsArea .contentsInner .c-box .c-box-img { width: calc(637 / 1060 * 100%); }
.contentsArea .contentsInner .c-box .c-box-img .img { width: 100%; height: 282px; }
.contentsArea .contentsInner .c-box .c-box-img .img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.contentsArea .contentsInner .c-box .c-box-txt { width: calc((1060 - 637) / 1060 * 100%); color: #fff; padding-left: 3rem; }
.contentsArea .contentsInner .c-box .c-box-txt .c-pageName { font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; color: #98835c; font-size: 1.75rem; letter-spacing: 0.1em; }
.contentsArea .contentsInner .c-box .c-box-txt .c-pageName .fontSize-L { font-size: 1.5em; }
.contentsArea .contentsInner .c-box .c-box-txt .c-border { margin-left: -3rem; margin-bottom: 1.5rem; width: calc(100% + 3rem); }
.contentsArea .contentsInner .c-box .c-box-txt .c-border::before, .contentsArea .contentsInner .c-box .c-box-txt .c-border::after { content: ""; display: block; width: 80%; height: 2px; background-color: #98835c; }
.contentsArea .contentsInner .c-box .c-box-txt .c-border::before { margin-bottom: 2px; }
.contentsArea .contentsInner .c-box .c-box-txt .c-border::after { width: 100%; height: 1px; }
.contentsArea .contentsInner .c-box .c-box-txt .lead { margin-bottom: 1rem; }
.contentsArea .contentsInner .c-box .c-box-txt .lead sup { vertical-align: super; }
.contentsArea .contentsInner .c-box .c-box-txt .c-btn { width: 210px; padding: 10px 0; text-align: left; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; border: 1px solid #98835c; transition: filter 0.3s ease 0s; }
.contentsArea .contentsInner .c-box .c-box-txt .c-btn span { font-size: 15px; color: #98835c; margin-right: 10px; font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; vertical-align: middle; }
.contentsArea .contentsInner .c-box .c-box-txt .c-btn:hover { filter: brightness(1.5); }
.contentsArea .contentsInner .c-box .c-box-txt .c-btn .c-arrow { width: 120px; overflow: hidden; margin-top: -4px; }
.contentsArea .contentsInner .c-box .c-box-txt .c-btn .c-arrow img { width: 100%; height: 100%; object-fit: contain; object-position: center center; transform: translateX(-100%); animation: c-arrow-motion 3s ease 0s infinite; }
@keyframes c-arrow-motion { 0% { transform: translateX(-100%); }
  30% { transform: translateX(0%); }
  60% { transform: translateX(0%); }
  100% { transform: translateX(100%); } }
@media screen and (max-width: 599px) { .contentsArea .contentsInner { width: 100%; }
  .contentsArea .contentsInner .c-box { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; margin-bottom: 4rem; }
  .contentsArea .contentsInner .c-box:nth-child(2n) .c-box-img { order: 1; }
  .contentsArea .contentsInner .c-box:nth-child(2n) .c-box-txt { order: 2; }
  .contentsArea .contentsInner .c-box .c-box-img { width: 100%; margin-bottom: 2rem; }
  .contentsArea .contentsInner .c-box .c-box-img .img { width: 100%; height: auto; }
  .contentsArea .contentsInner .c-box .c-box-img .img img { width: 100%; height: auto; }
  .contentsArea .contentsInner .c-box .c-box-txt { width: 100%; }
  .contentsArea .contentsInner .c-box .c-box-txt .c-border::before { width: calc(65%); }
  .contentsArea .contentsInner .c-box .c-box-txt .c-border::after { width: calc(95%); } }

#pagetop { text-align: center; margin: 0 auto 20px; width: 75px; }
#pagetop a { display: inline-block; padding: 30px 0; }
#pagetop a:hover { opacity: 0.5; }
#pagetop span { display: block; margin: auto; color: #3e3e3e; font-size: 1rem; }
#pagetop span img { width: 100%; height: auto; }

.page-transition-container { padding: 2rem 0 2rem; }

.page-transition { display: flex; justify-content: space-between; flex-wrap: nowrap; width: 96%; max-width: 670px; margin: 0 auto; font-feature-settings: "palt"; }
.page-transition > div { width: 47%; max-width: 240px; text-align: center; }
.page-transition > div a, .page-transition > div span.soon { display: block; padding: 1rem 0; border-radius: 0.3rem; box-sizing: border-box; border: 1px solid #000; background: #fff; font-size: 0.8rem; }
.page-transition > div span.soon { opacity: 0.3; }
.page-transition > div.line2_pc a { padding: 0.4252929538rem 0; }
.page-transition .prev { position: relative; }
.page-transition .prev::before { content: ""; display: block; position: absolute; top: 38%; left: 5px; box-sizing: border-box; width: 6px; height: 6px; border: 6px solid transparent; border-right: 6px solid #000; }
.page-transition .prev::after { content: ""; display: block; position: absolute; top: 38%; left: 13px; box-sizing: border-box; width: 6px; height: 6px; border: 6px solid transparent; border-right: 6px solid #000; }
.page-transition .next { position: relative; }
.page-transition .next::before { content: ""; display: block; position: absolute; top: 38%; right: 5px; box-sizing: border-box; width: 6px; height: 6px; border: 6px solid transparent; border-left: 6px solid #000; }
.page-transition .next::after { content: ""; display: block; position: absolute; top: 38%; right: 13px; box-sizing: border-box; width: 6px; height: 6px; border: 6px solid transparent; border-left: 6px solid #000; }
.page-transition .next.soon::before, .page-transition .next.soon::after { opacity: 0.3; }
@media screen and (max-width: 599px) { .page-transition > div.line2 a { padding: 0.4rem 0; }
  .page-transition > div.pl a { padding-left: 10px; }
  .page-transition > div.pr a { padding-right: 10px; } }

/******************************************************

footer-container

******************************************************/
#footer_gnav { margin-bottom: 2rem; }
#footer_gnav .global-head { display: none; }
#footer_gnav .global-nav { padding: 2rem 0; }
#footer_gnav .global-nav li { width: auto; display: inline-block; padding: 0 24px; border-left: 1px solid #000; }
#footer_gnav .global-nav li:first-child { border-left: none; }
#footer_gnav .global-nav li.top { display: none; }
#footer_gnav .global-nav li.concept { border-left: none; }
#footer_gnav .global-nav .global-subNav { display: none; }
#footer_gnav .en { font-size: 0.9rem; }
#footer_gnav .en br { display: none; }
#footer_gnav .ja { display: none; }

@media screen and (max-width: 599px) { #footer_gnav .global-nav ul { display: flex; flex-wrap: wrap; border-top: 1px solid #ccc; }
  #footer_gnav .global-nav li { display: flex; justify-content: center; align-items: center; width: 50%; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; }
  #footer_gnav .global-nav li:nth-child(2n+1)::before { content: none; }
  #footer_gnav .global-nav li a { padding: 14px 0; }
  #footer_gnav .global-nav li.dummy { display: block; } }
.footer-container { background-color: #FFF; position: relative; }
.footer-container .tel { background: #e2eced; color: #000; padding: 2rem 0; font-feature-settings: "palt"; letter-spacing: 0.1rem; margin: 3rem auto 2rem; }
.footer-container .tel ul { width: 90%; max-width: 800px; margin: auto; text-align: center; }
.footer-container .tel ul li { display: inline-block; vertical-align: middle; margin: 0.5rem 0.5rem; text-align: left; }
.footer-container .tel ul li img { /*height: 37px;*/ height: 36px; width: auto; }
.footer-container .tel ul li .print-cls { display: none; }
.footer-container .tel ul li .otoiawase-1 { font-size: 0.95rem; margin-bottom: 0.1rem; display: inline-block; }
.footer-container .tel ul li .otoiawase-2 { font-size: 0.85rem; display: block; position: relative; vertical-align: top; /*&::after { content: ""; display: block; width: 100%; height: 1px; background: #ccc; position: absolute; left: 0; top: 50%; z-index: 1;
}*/ }
.footer-container .tel ul li .otoiawase-2 > span { display: inline-block; padding: 0 5px; position: relative; z-index: 2; vertical-align: top; }
.footer-container .tel ul li .otoiawase-3 { font-size: 0.85rem; display: block; position: relative; margin-top: 0.2rem; text-align: left; color: #992200; letter-spacing: 0.05em; }
.footer-container .tel ul li .otoiawase-3 > span { display: inline-block; position: relative; z-index: 2; }
.footer-container .tel .holiday { margin-top: 1rem; text-align: center; font-size: 0.85rem; line-height: 1.4; /*color: $gold;*/ color: #992200; }
.footer-container .tel .holiday .holiday-ttl { display: inline-block; margin-bottom: 0.3rem; font-size: 0.9rem; }
@media screen and (max-width: 1125px) { .footer-container .tel ul li { text-align: center; } }
@media screen and (max-width: 910px) { .footer-container .tel ul li .otoiawase-3 { margin-bottom: 1rem; } }
@media screen and (max-width: 599px) { .footer-container .tel ul li { margin: 5px auto; }
  .footer-container .tel ul li .otoiawase-1 { font-size: 1.1rem; }
  .footer-container .tel ul li .otoiawase-2 { font-size: 1rem; } }
@media screen and (max-width: 569px) { .footer-container .tel ul li .otoiawase-3 { text-align: center; } }
@media screen and (max-width: 380px) { .footer-container .tel ul li img { height: 30px; width: auto; } }

.page-caption { padding-top: 1rem; }
.page-caption p { width: 90%; max-width: 1000px; margin: 0 auto 0; font-feature-settings: "palt"; letter-spacing: 0.05em; }

.company { justify-content: center; width: 90%; margin: 0px auto 0; text-align: center; padding-bottom: 40px; }
.company a { display: inline-block; margin: 0 20px 30px; }
.company a img { height: 66px; width: auto; }
@media screen and (max-width: 599px) { .company { margin-top: 20px; padding-bottom: 60px; }
  .company a { display: block; margin: 0 auto 30px; }
  .company a img { /*height: 70px;*/ } }
@media screen and (max-width: 380px) { .company a img { /*height: 65px;*/ } }

#gnavArea { width: 100%; height: 100%; position: fixed; top: 0%; left: 0%; z-index: 200; transition: 0.3s linear 0s opacity; overflow: hidden; background-color: #000; pointer-events: none; opacity: 0; /*-----------------*/ }
#gnavArea .bg-image { background: url("../img/common/bg1.jpg") left bottom no-repeat; background-position: top center; background-size: cover; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; opacity: 0; transition: 0.3s linear 0s opacity; }
#gnavArea .bg-image .note { position: absolute; bottom: 0.5rem; right: 0.5rem; color: #ccc; }
#gnavArea .nav-wrap { width: 90%; max-width: 1400px; position: absolute; top: calc(70px + 5vh); left: 50%; transform: translateX(-50%); }
@media screen and (max-width: 725px) { #gnavArea .nav-wrap { top: 70px; width: 100%; } }
#gnavArea .inner { max-width: 1000px; margin: auto; opacity: 0; transition: 0.5s linear 0s opacity;     /*@media screen and (max-width: 725px) { top: 70px;
			width:100%;
			left: 0%; }*/ }
#gnavArea .btnArea { margin: 5% auto 0; margin-top: 0%; width: 100%; }
@media screen and (max-width: 1300px) { #gnavArea .btnArea { margin-top: 0%; } }
@media screen and (max-width: 599px) { #gnavArea .btnArea { float: none; width: 100%; height: 100%; position: relative; } }
#gnavArea .btnArea .gnavArea { padding: 1rem 0; }
#gnavArea .btnArea .gnavArea .global-nav { background-color: transparent; }
#gnavArea .btnArea .gnavArea ul { letter-spacing: -0.4em; font-size: 0; text-align: center; width: 96%; max-width: 1000px; margin: auto; display: flex; justify-content: space-between; flex-wrap: wrap; /*&::after {
	content: "";
	display: inline-block;
	width: 23%;
}*/ position: relative; /*&::before,
&::after{ content: ""; display: block; position: absolute; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));
}*/ }
#gnavArea .btnArea .gnavArea ul::before { content: ""; display: block; position: absolute; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), white, rgba(255, 255, 255, 0)); top: 50%; }
#gnavArea .btnArea .gnavArea ul::after { bottom: 0; }
@media screen and (max-width: 599px) { #gnavArea .btnArea .gnavArea ul::before, #gnavArea .btnArea .gnavArea ul::after { content: none; } }
#gnavArea .btnArea .gnavArea li { letter-spacing: 0; font-size: 1rem; display: inline-block; width: 25%; padding: 0; position: relative; padding: 0.5rem 0; /*text-align: left;*/ /*margin-bottom: 1rem;*/ opacity: 0; transform: translateY(20%); transition: 0.5s ease-out 0s transform, 0.3s linear 0s opacity; }
#gnavArea .btnArea .gnavArea li::before { content: ""; display: block; position: absolute; top: 20px; left: 0; width: 1px; height: calc(100% - 40px); background: linear-gradient(0deg, rgba(255, 255, 255, 0), white, rgba(255, 255, 255, 0)); }
#gnavArea .btnArea .gnavArea li:nth-child(4n)::after { content: ""; display: block; position: absolute; top: 20px; right: 0; width: 1px; height: calc(100% - 40px); background: linear-gradient(0deg, rgba(255, 255, 255, 0), white, rgba(255, 255, 255, 0)); }
@media screen and (max-width: 599px) { #gnavArea .btnArea .gnavArea li::before { content: none; }
  #gnavArea .btnArea .gnavArea li:nth-child(4n)::after { content: none; } }
#gnavArea .btnArea .gnavArea li.top a { padding: 1.3rem 0.7rem; }
@media screen and (max-width: 599px) { #gnavArea .btnArea .gnavArea li.top a { padding: 1.61rem 0.7rem; } }
#gnavArea .btnArea .gnavArea li .en { color: #e6ce82; font-size: 1.1rem; display: block; font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; /*padding-bottom: 0.6em;*/ margin-bottom: 0.8em; /*border-bottom: 1px dotted rgba(255,255,255,1);*/ position: relative; z-index: 2; letter-spacing: 0.1em; }
#gnavArea .btnArea .gnavArea li .ja { color: #fff; font-size: 0.7rem; display: block; letter-spacing: 0.05em; font-feature-settings: "palt" !important; position: relative; z-index: 1; font-weight: 400; /*padding-left: 0.8em;*/ /*&:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 0;
	height: 0;
	border-left: 0.4em solid #fff;
	border-top: 0.4em solid transparent;
	border-bottom: 0.4em solid transparent;
}*/ }
#gnavArea .btnArea .gnavArea li a, #gnavArea .btnArea .gnavArea li .soon { box-sizing: border-box; display: block; transition: .2s; padding: 0.7rem; position: relative;           /*
					&::after{
						content:"";
						opacity: 0;
						transition: 0.3s linear 0s opacity;
						background: #fdec00;
						position: absolute;
						top:0; left: 0;
						width:100%; height: 100%;
						border-radius: 0.4em!important;
					}
					&:hover {
						opacity:1;
						.en,
						.ja{color: #000;}
						.en{
							border-bottom: 1px dotted rgba(0,0,0,1);
						}
						.ja{
							&:before{
								border-left: 0.4em solid #000;
							}
						}
						&::after{
						  opacity: 1;
						}
					} */ 					/*&.current {
						opacity:1;
						background: #fdec00;
						border-radius: 0.4em!important;
						.en,
						.ja{color: #000;}
						.en{
							border-bottom: 1px dotted rgba(0,0,0,1);
						}
						.ja{
							&:before{
								border-left: 0.4em solid #000;
							}
						}
						&::after{
						  opacity:1;
						}
						.update-icon {
						  right: 27px;
						}
					} */ }
#gnavArea .btnArea .gnavArea li .soon { opacity: 0.3; }
#gnavArea .btnArea .gnavArea li.illust { text-align: center; margin-top: 2rem; margin-left: auto; margin-right: 0%; width: 20%; display: none; }
#gnavArea .btnArea .gnavArea li.illust img { width: 70%; height: auto; }
#gnavArea .btnArea .gnavArea .global-subNav { display: flex; justify-content: center; gap: 2rem; margin: 2rem auto; }
#gnavArea .btnArea .gnavArea .global-subNav::before, #gnavArea .btnArea .gnavArea .global-subNav::after { content: none; }
#gnavArea .btnArea .gnavArea .global-subNav li { width: auto; padding: inherit; }
#gnavArea .btnArea .gnavArea .global-subNav li .txt { position: relative; display: flex; align-items: center; column-gap: 1.5rem; }
#gnavArea .btnArea .gnavArea .global-subNav li .txt .arrow { position: relative; }
#gnavArea .btnArea .gnavArea .global-subNav li .txt .arrow::before { content: ""; clip-path: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%); position: absolute; top: 50%; left: -6px; transform: translateY(-50%); display: block; height: 10px; aspect-ratio: 1; background-color: #fff; }
#gnavArea .btnArea .gnavArea .global-subNav li .txt .arrow::after { content: ""; clip-path: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%); position: absolute; top: 50%; left: -9px; transform: translateY(-50%); display: block; height: 10px; aspect-ratio: 1; background-color: #fff; }
#gnavArea .btnArea .gnavArea .global-subNav li a { padding: inherit; }
#gnavArea .btnArea .gnavArea .global-subNav li .ja { font-size: 0.85rem; }
@media screen and (max-width: 599px) { #gnavArea .btnArea .gnavArea { padding: 0rem 0; border-top: 1px solid #fff; }
  #gnavArea .btnArea .gnavArea ul { width: 100%; align-items: flex-start; }
  #gnavArea .btnArea .gnavArea li { width: 50%; border-bottom: 1px solid #fff; margin-bottom: 0; }
  #gnavArea .btnArea .gnavArea li:nth-child(odd) { border-right: 1px solid #fff; }
  #gnavArea .btnArea .gnavArea li:last-child { border-right: none; }
  #gnavArea .btnArea .gnavArea li a, #gnavArea .btnArea .gnavArea li .soon { padding: 1rem; overflow: hidden; }
  #gnavArea .btnArea .gnavArea li a::before, #gnavArea .btnArea .gnavArea li .soon::before { opacity: 0; }
  #gnavArea .btnArea .gnavArea li a::after, #gnavArea .btnArea .gnavArea li .soon::after { border-radius: 0 !important; }
  #gnavArea .btnArea .gnavArea li a:hover, #gnavArea .btnArea .gnavArea li a.current, #gnavArea .btnArea .gnavArea li .soon:hover, #gnavArea .btnArea .gnavArea li .soon.current { border-radius: 0 !important; }
  #gnavArea .btnArea .gnavArea li a:hover .en, #gnavArea .btnArea .gnavArea li a.current .en, #gnavArea .btnArea .gnavArea li .soon:hover .en, #gnavArea .btnArea .gnavArea li .soon.current .en { border-bottom: none; }
  #gnavArea .btnArea .gnavArea li .en { border-bottom: none; padding-bottom: 0; margin-bottom: 0.1rem; }
  #gnavArea .btnArea .gnavArea li .ja { white-space: nowrap; }
  #gnavArea .btnArea .gnavArea li:last-child { /*border-bottom: none;*/ text-align: center; }
  #gnavArea .btnArea .gnavArea li:last-child img { margin-top: 1em; width: 60%; max-width: 120px; }
  #gnavArea .btnArea .gnavArea li:before { display: none; }
  #gnavArea .btnArea .gnavArea li.illust { width: 100%; margin: 2% auto 0; }
  #gnavArea .btnArea .gnavArea li.illust img { width: 36%; }
  #gnavArea .btnArea .gnavArea .global-subNav { border-top: none; }
  #gnavArea .btnArea .gnavArea .global-subNav li { border: none; } }
#gnavArea .btnArea #Nav_applika { position: relative; width: 100vw; margin: 4rem calc(50% - 50vw) 0; padding: 6rem 0; text-align: center; color: #fff; background: #022d44; }
#gnavArea .btnArea #Nav_applika .inner { width: 90%; max-width: 900px; }
#gnavArea .btnArea #Nav_applika .applika_ttl { background: rgba(143, 127, 73, 0.7); color: #fff; font-size: 1.2rem; padding: 0.5rem 0; }
#gnavArea .btnArea #Nav_applika .copy { font-size: 1.5rem; margin: 3.0rem auto 1.5rem; padding-bottom: 1.0rem; border-bottom: 1px solid #fff; }
#gnavArea .btnArea #Nav_applika .applika1 { /*@include flex-c;*/ display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 2.5rem 3rem; max-width: 920px; width: 90%; margin: 3rem auto 3rem; }
#gnavArea .btnArea #Nav_applika .applika1 li { /*width: 22%;*/ }
#gnavArea .btnArea #Nav_applika .applika1 li.app_icon01 { width: calc(194 / 920 * 100%); }
#gnavArea .btnArea #Nav_applika .applika1 li.app_icon02 { width: calc(176 / 920 * 100%); }
#gnavArea .btnArea #Nav_applika .applika1 li.app_icon03 { width: calc(178 / 920 * 100%); }
#gnavArea .btnArea #Nav_applika .applika1 li.app_icon04 { width: calc(154 / 920 * 100%); }
#gnavArea .btnArea #Nav_applika .applika2 { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: start; align-items: flex-start; margin: 3rem auto 3rem; }
#gnavArea .btnArea #Nav_applika .applika2 * { min-height: 0%; }
#gnavArea .btnArea #Nav_applika .applika2 li { width: 31%; }
@media screen and (max-width: 599px) { #gnavArea .btnArea #Nav_applika { padding: 2rem 0 5rem; background: #0c3d57; }
  #gnavArea .btnArea #Nav_applika .applika1 { justify-content: flex-start; flex-wrap: wrap; gap: 2.5rem 6%; margin-bottom: 0; }
  #gnavArea .btnArea #Nav_applika .applika1 li { /*width: 47%;*/ /*margin-bottom: 2.5rem;*/ }
  #gnavArea .btnArea #Nav_applika .applika1 li.app_icon01 { width: 47%; }
  #gnavArea .btnArea #Nav_applika .applika1 li.app_icon01 .img { width: calc(194 / 200 * 100%); }
  #gnavArea .btnArea #Nav_applika .applika1 li.app_icon02 { width: 47%; }
  #gnavArea .btnArea #Nav_applika .applika1 li.app_icon02 .img { width: calc(176 / 200 * 100%); }
  #gnavArea .btnArea #Nav_applika .applika1 li.app_icon03 { width: 47%; }
  #gnavArea .btnArea #Nav_applika .applika1 li.app_icon03 .img { width: calc(178 / 200 * 100%); }
  #gnavArea .btnArea #Nav_applika .applika1 li.app_icon04 { width: 47%; }
  #gnavArea .btnArea #Nav_applika .applika1 li.app_icon04 .img { width: calc(154 / 200 * 100%); }
  #gnavArea .btnArea #Nav_applika .applika2 { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: start; align-items: flex-start; max-width: 270px; }
  #gnavArea .btnArea #Nav_applika .applika2 * { min-height: 0%; }
  #gnavArea .btnArea #Nav_applika .applika2 li { width: 100%; margin-bottom: 2rem; } }
#gnavArea.on { opacity: 1; pointer-events: auto; }
#gnavArea.on .inner { opacity: 1; }
#gnavArea.on .bg-image { opacity: 1; transition: 0.3s ease-out 0s opacity; }
#gnavArea.on .btnArea .gnavArea .global-nav { background-color: transparent; }
#gnavArea.on .btnArea .gnavArea li { opacity: 1; transform: translateY(0%); }
#gnavArea.on .btnArea .gnavArea li:nth-child(1) { transition-delay: 0.0s; }
#gnavArea.on .btnArea .gnavArea li:nth-child(2) { transition-delay: 0.05s; }
#gnavArea.on .btnArea .gnavArea li:nth-child(3) { transition-delay: 0.1s; }
#gnavArea.on .btnArea .gnavArea li:nth-child(4) { transition-delay: 0.15s; }
#gnavArea.on .btnArea .gnavArea li:nth-child(5) { transition-delay: 0.2s; }
#gnavArea.on .btnArea .gnavArea li:nth-child(6) { transition-delay: 0.25s; }
#gnavArea.on .btnArea .gnavArea li:nth-child(7) { transition-delay: 0.3s; }
#gnavArea.on .btnArea .gnavArea li:nth-child(8) { transition-delay: 0.35s; }
#gnavArea.on .btnArea .gnavArea li:nth-child(9) { transition-delay: 0.4s; }
#gnavArea.on .btnArea .gnavArea li:nth-child(10) { transition-delay: 0.45s; }
#gnavArea.on .btnArea .gnavArea li:nth-child(11) { transition-delay: 0.5s; }
#gnavArea.on .btnArea .gnavArea li:nth-child(12) { transition-delay: 0.55s; }
#gnavArea.on .btnArea .gnavArea li:nth-child(13) { transition-delay: 0.6s; }
#gnavArea.on .btnArea .gnavArea li:nth-child(14) { transition-delay: 0.65s; }
#gnavArea.on .btnArea .gnavArea li.dummy { display: none; }

#spFooterNav { position: fixed; left: 0; bottom: 0; z-index: 600; background: #FFF; width: 100%; display: none; }
#spFooterNav ul { display: flex; letter-spacing: -0.4em; font-size: 0; }
#spFooterNav li { display: inline-block; width: 50%; pointer-events: none; }
#spFooterNav li a { display: block; box-sizing: border-box; text-align: center; height: 60px; pointer-events: auto; position: relative; transition: .3s; background: #ddd; }
#spFooterNav li a img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: auto; max-width: 140px; }
#spFooterNav li a:before { content: ""; position: absolute; box-sizing: border-box; border: 1px solid #fff; border-radius: 3px; top: 2px; bottom: 2px; left: 2px; right: 2px; }
#spFooterNav li.reserve a { background: linear-gradient(#51273b 50%, #461e2f 50%); }
#spFooterNav li.entry a { /*background:linear-gradient(#374866 50%, #2e3f5c 50%);*/ background: linear-gradient(#8f7f49 50%, #82723f 50%); }
#spFooterNav li.map a { background: linear-gradient(#0e4468 50%, #0b3a5c 50%); }
@media screen and (max-width: 870px) { #spFooterNav { display: block; } }

/*-----------------------------------------*/
[data-aos=fade-up] { transform: translate3d(0, 5rem, 0); }

[data-aos=fade-up2] { transform: translate3d(0, 20%, 0); }

[data-aos=fade-out] { opacity: 1 !important; transition-property: transform,opacity; }

[data-aos=fade-out].aos-animate { opacity: 0 !important; }

/******************************************************
 update-icon 
******************************************************/
.update-icon { width: 4em; height: 4em; max-width: 70px; background: #8b8335; border-radius: 50%; position: absolute; top: 40%; right: 11px; transform: translateY(-50%); font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; padding: 1em 0; text-align: center; color: #FFFFFF; font-size: 0.5em; line-height: 1em; letter-spacing: 0.08em; z-index: 5; display: grid; place-content: center; }
.update-icon.new { background: #6a1c37; }
.update-icon br { display: block; }

@media screen and (max-width: 599px) { #gnavArea .update-icon { top: 8px; right: 8px; font-size: 0.7em; width: auto; height: auto; display: inline-block; line-height: 1em; padding: 0.2rem 0.6em; transform: translateY(0%); border-radius: 3em; }
  #gnavArea .update-icon br { display: none; } }

.bnr_yohacklife { width: 90%; max-width: 400px; margin: 0 auto 3rem; }
.bnr_yohacklife a { display: block; cursor: pointer; }

/******************************************************
 page share 
******************************************************/
.pic-caption { padding: 0.5rem 0; font-size: 0.9rem; text-align: center; }

/* category title
---------------------------------------- */
.category-container { text-align: center; width: 100%; max-width: 960px; padding: 2rem 0 1rem; margin: 0 auto; }

.category-ttl { position: relative; text-align: center; margin-bottom: 1rem; }
.category-ttl::before { content: ""; width: 100%; height: 1px; background-color: #000; position: absolute; top: 50%; left: 0; transform: translateY(-1px); display: block; }
.category-ttl .category-txt { padding: 0.5rem 1rem; font-size: 1rem; font-weight: 500; letter-spacing: 0.1em; background-color: #fff; position: relative; display: inline-block; }

/* localNav
---------------------------------------- */
.localNav-space { width: 100%; height: 2rem; }
@media screen and (max-width: 599px) { .localNav-space { height: 1rem; } }

.localNav { width: 100%; background-color: rgba(255, 255, 255, 0.8); padding: 10px 0; }
.localNav.float { position: fixed; left: 0; top: 70px; z-index: 100; }
.localNav .btnList { display: flex; justify-content: space-between; flex-wrap: wrap; width: 96%; margin: 0 auto; padding: 0; }
.localNav .btnList.btn2 { max-width: 380px; }
.localNav .btnList.btn2 li { width: 49%; }
.localNav .btnList.btn3 { max-width: 574px; }
.localNav .btnList.btn3 li { width: 32.5%; }
.localNav .btnList.btn4 { max-width: 960px; }
.localNav .btnList.btn4 li { width: 24.5%; }
.localNav .btnList.btn5 { max-width: 960px; }
.localNav .btnList.btn5 li { width: 19.5%; }
.localNav .btnList.btn5 li.dummy { display: none; }
.localNav .btnList button { border-radius: 5px; display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; padding: 1rem 0; background-color: #e5e5e5; transition: 0.3s ease-out 0s all; text-align: center; font-size: 15px; position: relative; font-feature-settings: "palt"; }
.localNav .btnList button::after { content: "\025b6"; position: absolute; right: 6px; top: calc(50% - 0.5em); transition: 0.3s ease 0s all; transform: scale(0.5, 0.5); font-size: 18px; /*font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";*/ }
.localNav .btnList li { position: relative; }
.localNav .btnList li.current button { color: #FFF; background-color: #e6ce82; }
.localNav .btnList li.current button::after { color: #FFF; }
.localNav .btnList li.new button { padding-left: 25px; }
@media screen and (max-width: 870px) { .localNav .btnList.btn5 li { width: 32.8%; margin-bottom: 0.3rem; }
  .localNav .btnList.btn5 li.dummy { display: inline-block; } }
@media screen and (min-width: 599px) { .localNav .btnList li:hover button { color: #FFF; background-color: #e6ce82; }
  .localNav .btnList li:hover button::after { color: #FFF; } }
@media screen and (max-width: 599px) { .localNav .btnList { width: 100%; }
  .localNav .btnList button { border-radius: 0; font-size: 14px; position: relative; padding: 24px 0; }
  .localNav .btnList button::after { right: inherit; left: 50%; top: inherit; bottom: 0; translate: -50% 0; rotate: 90deg; font-size: 10px; }
  .localNav .btnList button .aw { display: block; }
  .localNav .btnList button .btnName { /*width:100%;
position: absolute;
top:50%; left: 50%;
transform: translate(-50%,-50%);*/ }
  .localNav .btnList li.new button { padding-left: 15%; }
  .localNav .btnList.btn4 li { width: 49%; margin-bottom: 0.5rem; } }
@media screen and (max-width: 480px) { .localNav .btnList button { font-size: 15px; } }
@media screen and (max-width: 400px) { .localNav .btnList button { font-size: 14px; } }
@media screen and (max-width: 380px) { .localNav .btnList button { font-size: 13px; } }

.new-mark { position: absolute; left: 0; width: 35px; height: 35px; font-size: 12px; background-color: #630026; border-radius: 50%; display: block; color: #FFF; overflow: hidden; margin: 0 5px; z-index: 1; }
.new-mark::after { content: "NEW"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; text-shadow: 0 0 1px; }
@media screen and (max-width: 730px) { .new-mark { /*width:auto;
height: auto;
padding:1em 3em;
margin: 0 auto 0.5em;
border-radius: 10px;
&::after{ transform: translate(-50%,-50%);
}*/ } }

.update-icon_circle { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 35px; height: 35px; font-size: 11px; line-height: 1; background-color: #630026; border-radius: 50%; display: block; color: #FFF; overflow: hidden; margin: 0 5px; z-index: 1; }
.update-icon_circle::after { content: "UP\A DATE"; position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); display: block; text-shadow: 0 0 1px; white-space: pre; }
@media screen and (max-width: 1200px) { .update-icon_circle { position: absolute; top: 12px; left: 0; right: 0; transform: translateY(-50%); width: 90%; height: 14px; max-width: 50px; background-color: #630026; border-radius: inherit; display: block; margin: 0 auto; padding: 0.2em 0; text-align: center; color: #FFFFFF; font-size: 10px; line-height: 1; overflow: hidden; }
  .update-icon_circle br { display: none; }
  .update-icon_circle::after { content: "UPDATE"; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; text-shadow: 0 0 1px; } }
@media screen and (max-width: 725px) { .update-icon_circle { top: 10px; } }

/* section
---------------------------------------- */
.copy { font-size: 1.4rem; letter-spacing: 0.08em; font-feature-settings: "palt"; line-height: 1.6; font-weight: 400; }
.copy .note { letter-spacing: 0.1em; }
@media screen and (max-width: 599px) { .copy { font-size: 1.3rem; line-height: 1.5; } }

.lead { font-size: 1rem; letter-spacing: 0.1em; }
@media screen and (max-width: 599px) { .lead { font-size: 1rem; } }

.tac { text-align: center; }

.img { position: relative; }
.img img { width: 100%; height: auto; display: block; }
.img .note { text-align: right; padding-top: 0.5rem; }
.img .note.absolute { position: absolute; bottom: 5px; right: 5px; }
.img .note.absolute.left { right: auto; left: 5px; text-align: left; }
.img .note.fff { color: #FFF; }
.img .note.shadow { text-shadow: 0 0 2px white; }
.img .note.shadow.fff { color: #FFF; text-shadow: 0 0 2px black; }
.img .note.right { text-align: right; }
.img .note.left { text-align: left; }

.note.note-mini { font-size: 9px; line-height: 1.2; font-feature-settings: "plan" 1; }
.note.float { position: absolute; bottom: 5px; right: 5px; color: #fff; text-shadow: 0px 0px 3px #000000, 0px 0px 3px #000000; }

.section-class { width: 90%; max-width: 960px; margin: 0 auto; padding-top: 3rem; }
.section-class .section-ttl { font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; font-size: 1rem; letter-spacing: 0.2em; margin-bottom: 2rem; vertical-align: middle; color: #988e6a; text-align: center; margin-bottom: 2rem; }
.section-class .section-ttl::after { content: ""; width: 22px; height: 1px; background-color: #988e6a; display: block; margin: 0.5rem auto 0; }
.section-class .section-ttl-sub { font-family: "EB Garamond", serif; font-weight: 300; font-style: normal; font-size: 1.5rem; color: #988e6a; text-align: center; margin: 1rem auto; }
.section-class .copy { text-align: center; padding-bottom: 1.3rem; }
.section-class hr { padding-bottom: 2rem; }
.section-class .lead { padding-bottom: 2rem; text-align: center; }
.section-class .lead .note { display: block; padding-top: 0.5rem; }
.section-class .img-box2 { display: flex; justify-content: space-between; padding-bottom: 2rem; }
.section-class .img-box2 .img, .section-class .img-box2 .txt { width: 48%; }
.section-class .img-box3 { display: flex; justify-content: space-between; padding-bottom: 2rem; }
.section-class .img-box3 .img, .section-class .img-box3 .txt { width: 33%; }
@media screen and (max-width: 599px) { .section-class { padding-top: 2rem; }
  .section-class .section-ttl { font-size: 1.2rem; }
  .section-class .img-box2 { flex-wrap: wrap; }
  .section-class .img-box2 .img, .section-class .img-box2 .txt { width: 100%; margin-bottom: 10%; } }

/* slider
---------------------------------------- */
.mainSlider { margin-bottom: 20px; }
.mainSlider .slick-dots { bottom: -30px; z-index: 100; }
.mainSlider .slick-dots li { width: auto; height: auto; margin: 0; }
.mainSlider .slick-dots li button { padding: 10px; width: auto; height: auto; }
.mainSlider .slick-dots li button::before { display: none; }
.mainSlider .slick-dots li button::after { content: ""; display: block; width: 10px; height: 10px; background-color: #cccccc; border-radius: 50%; }
.mainSlider .slick-dots li.slick-active button::after { background-color: #a79f80; }
@media screen and (max-width: 599px) { .mainSlider { margin-bottom: 0px; width: auto; }
  .mainSlider .slick-dots { top: 50%; right: 10px; left: auto; bottom: auto; width: auto; margin-top: -28px; }
  .mainSlider .slick-dots li { display: block; }
  .mainSlider .slick-dots li button::after { width: 14px; height: 14px; } }

/*.scroll-icon{
	$si-size:80px;
	position: fixed;
	bottom:0; right: 10px;
	width:$si-size; height: $si-size;
	z-index: 150;
	mix-blend-mode: difference;
	.scroll-icon-wave{
		@keyframes scrollWave{
			  0%{ transform: scale(1,1); opacity: 0;}
			 20%{ opacity: 1;}
			 90%{ opacity: 0;}
			100%{ transform: scale(2.5,2.5); opacity: 0;}
		}
		&::before,
		&::after{
			content:"";
			display: block;
			width:100%;
			height: 100%;
			border-radius: 50%;
			border:1px solid rgba(255,255,255,0.5);
			pointer-events: none;
			transition: 0.5s ease-out 0s opacity;
			animation: scrollWave 3s ease-out 0s forwards infinite;
			position: absolute;
			top:0%; left: 0%;
		}
		&::before{
			animation-delay: 0.5s;
		}
		&::after{
			border-width:1.5px;
		}
	}
	.scroll-icon-bg{
		width:100%; height: 100%;
		border-radius: 50%;
		background-color: rgba(255,255,255,0.3);
		margin-top: 15%;
		position: relative;
		//backdrop-filter:blur(10px);
	}
	.scroll-icon-line{
		width:1px; height: 70%;
		position: absolute;
		top:70%; left: 50%;
		transform: translate(-50%,-50%);
		background-color: #FFF;
		opacity: 0.7;
	}
	.scroll-icon-marker{
		width:6px; height: 6px;
		position: absolute;
		top:30%; left: 50%;
		transform: translate(-50%,-50%);
		background-color: #FFF;
		opacity: 0;
		animation: markerMotion 2s ease 0s forwards infinite;
	}
	@keyframes markerMotion{
		  0%{top:40%; opacity: 0;}
		 10%{top:40%; opacity: 1;}
		 80%{top:80%; opacity: 1;}
		 90%{top:80%; opacity: 0;}
		100%{top:80%; opacity: 0;}
	}
	@media screen and (max-width: 870px) {
		bottom:40px;
		width:70px; height: 70px;
	}	
}*/