@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700&display=swap&subset=japanese");
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, hr, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; }

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

body { -webkit-text-size-adjust: 100%; /* for iOS, Android */ }

li { list-style: none; }

a, button { -webkit-tap-highlight-color: transparent; /* for iOS, Android */ }

img, picture { max-width: 100%; height: auto; vertical-align: top; }

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

caption, th { text-align: left; }

button { padding: 0; border-style: none; border-radius: 0; background-color: transparent; outline: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; line-height: 1; }

input, select, textarea { padding: 0; border-style: none; border-radius: 0; background-color: transparent; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: inherit; line-height: 1; }

.clearfix::after { content: ""; display: table; clear: both; }

*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }

/* -------------------------------- basics -------------------------------- */
/* ---- colors ---- */
/* ---- media query ---- */
/* ---- basics ---- */
body { position: relative; overflow-x: hidden; overflow-y: scroll; background-color: #f7f6f2; color: #400000; }

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

a { text-decoration: none; color: #400000; }

a:link { color: #400000; }

a:visited { color: #400000; }

a:hover { text-decoration: none; color: #400000; }

a:active { text-decoration: none; color: #400000; }

strong, em, b { font-weight: bold; font-style: normal; }

@media screen and (min-width: 768px) { .pc-hidden { display: none; } }

@media screen and (max-width: 1023px) { .sp-hidden { display: none; } }

.mt0 { margin-top: 0 !important; }

.mt10 { margin-top: 10px !important; }

.mt20 { margin-top: 20px !important; }

.mt30 { margin-top: 30px !important; }

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

.mt50 { margin-top: 50px !important; }

.mt60 { margin-top: 60px !important; }

.mt70 { margin-top: 70px !important; }

.mt80 { margin-top: 80px !important; }

.mt90 { margin-top: 90px !important; }

.mt100 { margin-top: 100px !important; }

@media screen and (max-width: 1023px) { .mt10 { margin-top: 5px !important; }
  .mt20 { margin-top: 10px !important; }
  .mt30 { margin-top: 15px !important; }
  .mt40 { margin-top: 20px !important; }
  .mt50 { margin-top: 25px !important; }
  .mt60 { margin-top: 30px !important; }
  .mt70 { margin-top: 35px !important; }
  .mt80 { margin-top: 40px !important; }
  .mt90 { margin-top: 45px !important; }
  .mt100 { margin-top: 50px !important; } }

/* ---- font ---- */
/*! Yaku Han JP v3.3.1 (OFL-1.1 AND MIT) by Qrac */
/*! Type: YakuHanJPs - Based on Noto Sans CJK JP */
@font-face { font-family: YakuHanMPs_Noto; font-style: normal; font-weight: 200; font-display: swap; src: url(../fonts/YakuHanMPs/YakuHanMPs-ExtraLight.eot); src: url(../fonts/YakuHanMPs/YakuHanMPs-ExtraLight.woff2) format("woff2"), url(../fonts/YakuHanMPs/YakuHanMPs-ExtraLight.woff) format("woff"); unicode-range: U+300a-3011,U+3014-3015,U+ff08-ff09,U+ff3b,U+ff3d,U+ff5b,U+ff5d; }

@font-face { font-family: YakuHanMPs_Noto; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/YakuHanMPs/YakuHanMPs-Light.eot); src: url(../fonts/YakuHanMPs/YakuHanMPs-Light.woff2) format("woff2"), url(../fonts/YakuHanMPs/YakuHanMPs-Light.woff) format("woff"); unicode-range: U+300a-3011,U+3014-3015,U+ff08-ff09,U+ff3b,U+ff3d,U+ff5b,U+ff5d; }

@font-face { font-family: YakuHanMPs_Noto; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/YakuHanMPs/YakuHanMPs-Regular.eot); src: url(../fonts/YakuHanMPs/YakuHanMPs-Regular.woff2) format("woff2"), url(../fonts/YakuHanMPs/YakuHanMPs-Regular.woff) format("woff"); unicode-range: U+300a-3011,U+3014-3015,U+ff08-ff09,U+ff3b,U+ff3d,U+ff5b,U+ff5d; }

@font-face { font-family: YakuHanMPs_Noto; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/YakuHanMPs/YakuHanMPs-Medium.eot); src: url(../fonts/YakuHanMPs/YakuHanMPs-Medium.woff2) format("woff2"), url(../fonts/YakuHanMPs/YakuHanMPs-Medium.woff) format("woff"); unicode-range: U+300a-3011,U+3014-3015,U+ff08-ff09,U+ff3b,U+ff3d,U+ff5b,U+ff5d; }

@font-face { font-family: YakuHanMPs_Noto; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/YakuHanMPs/YakuHanMPs-SemiBold.eot); src: url(../fonts/YakuHanMPs/YakuHanMPs-SemiBold.woff2) format("woff2"), url(../fonts/YakuHanMPs/YakuHanMPs-SemiBold.woff) format("woff"); unicode-range: U+300a-3011,U+3014-3015,U+ff08-ff09,U+ff3b,U+ff3d,U+ff5b,U+ff5d; }

@font-face { font-family: YakuHanMPs_Noto; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/YakuHanMPs/YakuHanMPs-Bold.eot); src: url(../fonts/YakuHanMPs/YakuHanMPs-Bold.woff2) format("woff2"), url(../fonts/YakuHanMPs/YakuHanMPs-Bold.woff) format("woff"); unicode-range: U+300a-3011,U+3014-3015,U+ff08-ff09,U+ff3b,U+ff3d,U+ff5b,U+ff5d; }

@font-face { font-family: YakuHanMPs_Noto; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/YakuHanMPs/YakuHanMPs-Black.eot); src: url(../fonts/YakuHanMPs/YakuHanMPs-Black.woff2) format("woff2"), url(../fonts/YakuHanMPs/YakuHanMPs-Black.woff) format("woff"); unicode-range: U+300a-3011,U+3014-3015,U+ff08-ff09,U+ff3b,U+ff3d,U+ff5b,U+ff5d; }

html { font-size: 62.5%; }

body { font-family: YakuHanMPs_Noto, "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, Meiryo, serif; font-size: 1.6rem; font-weight: normal; letter-spacing: .04em; line-height: 1; }

@media screen\0 { body { font-family: YakuHanMPs_Noto, "Noto Serif JP", HGS明朝E, serif; } }

button, input, select, textarea { font-family: inherit; font-size: 100%; }

.fw-thin { font-weight: 400 !important; }

.fw-light { font-weight: 400 !important; }

.fw-regular { font-weight: 400 !important; }

.fw-medium { font-weight: 700 !important; }

.fw-bold { font-weight: 700 !important; }

.fw-extrabold { font-weight: 700 !important; }

.fw-black { font-weight: 700 !important; }

.txt-vertical { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }

.ast { font-family: sans-serif; }

@media screen and (max-width: 639px) { body { font-size: 1.2rem; } }

/* -------------------------------- body -------------------------------- */
/* ---- frame ---- */
.body-container { display: -webkit-box; display: -ms-flexbox; display: flex; }

.body-container .main-column { width: calc(100% - 400px); }

.body-container .main-column .container-nb { padding: 0 15%; }

.body-container .main-column .container-nb > .inner { max-width: 1064px; margin: 0 auto; }

.body-container .main-column .container-wb { padding: 0 10%; }

.body-container .main-column .container-wb > .inner { max-width: 1216px; margin: 0 auto; }

.body-container .main-column .container-wl { padding: 0 0 0 calc(50% - 608px); }

.body-container .main-column .container-wr { padding: 0 calc(50% - 608px) 0 0; }

.body-container .nav-column { position: relative; width: 399px; border-left: 1px solid #eae5db; }

@media screen and (max-width: 1919px) { .body-container .main-column { width: 80%; }
  .body-container .main-column .container-wl { padding: 0 0 0 10%; }
  .body-container .main-column .container-wr { padding: 0 10% 0 0; }
  .body-container .nav-column { width: calc(20% - 1px); } }

@media screen and (max-width: 1499px) { .body-container .main-column { width: calc(100% - 300px); }
  .body-container .nav-column { width: 299px; } }

@media screen and (max-width: 1023px) { .body-container { display: block; }
  .body-container .main-column { width: auto; }
  .body-container .main-column .container-nb { padding: 0 7%; }
  .body-container .main-column .container-wb { padding: 0 7%; }
  .body-container .main-column .container-wl { padding: 0 7%; }
  .body-container .main-column .container-wr { padding: 0 7%; }
  .body-container .nav-column { display: none; } }

/* ---- main visual ---- */
.main-visual { position: relative; height: 0; padding-bottom: 44.79%; overflow: hidden; /* background: { image: url(../images/tamagococco_2021/mv_pc.jpg); size: cover; position: center; } */ }

.main-visual img { display: block; position: absolute; left: 2.6vw; top: 2.1vw; z-index: 3; width: 5.5vw; }

.main-visual .player { position: absolute; left: 0; top: 50%; z-index: 1; width: 100%; height: 0; padding-bottom: 56.25%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.main-visual #yt-player { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.main-visual .cover { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; }

@media screen and (max-width: 1023px) { .main-visual { height: 96vw; margin-top: 55px; padding-bottom: 0; /* background: { image: url(../images/tamagococco_2021/mv_sp.jpg); size: cover; position: center; } */ }
  .main-visual img { display: none; }
  .main-visual .player { position: absolute; left: 50%; top: 50%; width: 0; height: 100%; padding-right: 177.7778%; padding-bottom: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }

/* ---- pc navigation ---- */
.nav-column .float { position: -webkit-sticky; position: sticky; top: 0; padding-bottom: 40px; }

@media screen\0 { .nav-column .float { position: static; }
  .nav-column .float.fixed { position: fixed; right: 0; top: 0; width: 399px; }
  .nav-column .float.floor { position: absolute; left: 0; top: auto; bottom: 0; width: 100%; } }

@media screen and (max-width: 1919px) { .nav-column .float.fixed { width: calc(20% - 1px); } }

@media screen and (max-width: 1499px) { .nav-column .float.fixed { width: 299px; } }

.nav-column h1.logo { padding: 18% 0; border-bottom: 1px solid #eae5db; text-align: center; }

.nav-column h1.logo img { width: 38%; }

.nav-column .nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 15%; }

.nav-column .nav li { width: 36px; }

.nav-column .nav a { font-size: 1.6rem; letter-spacing: .05em; line-height: 36px; opacity: 1; -webkit-transition: opacity .2s; transition: opacity .2s; }

.nav-column .nav a:hover, .nav-column .nav a:active { opacity: .5; }

.nav-column .sns { width: 60%; max-width: 240px; min-width: 210px; margin: 35% auto 0; }

.nav-column .sns li { margin-bottom: 8%; }

.nav-column .sns a { display: block; position: relative; padding: 16px 0 17px; border: 1px solid #b4a17e; background-color: #f7f6f2; color: #b4a17e; font-size: 1.4rem; letter-spacing: .05em; text-align: center; -webkit-transition: background-color .2s, color .2s; transition: background-color .2s, color .2s; }

.nav-column .sns a::before { content: ""; display: block; position: absolute; right: 15px; top: 50%; width: 25px; height: 1px; background-color: #b4a17e; -webkit-transition: background-color .2s; transition: background-color .2s; }

.nav-column .sns a::after { content: ""; display: block; position: absolute; right: 15px; top: calc(50% - 3px); width: 0; height: 0; border-style: solid; border-width: 3.5px 0 3.5px 6px; border-color: transparent transparent transparent #b4a17e; -webkit-transition: border-color .2s; transition: border-color .2s; }

.nav-column .sns a:hover, .nav-column .sns a:active { background-color: #b4a17e; color: #f7f6f2; }

.nav-column .sns a:hover::before, .nav-column .sns a:active::before { background-color: #f7f6f2; }

.nav-column .sns a:hover::after, .nav-column .sns a:active::after { border-color: transparent transparent transparent #f7f6f2; }

@media screen and (max-height: 640px) { .nav-column .sns { margin-top: 20%; } }

/* ---- sp header ---- */
.sp-header { display: none; position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 55px; border-bottom: 1px solid #eae5db; background-color: #f7f6f2; }

.sp-header a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100px; height: 100%; margin-left: 20px; }

.sp-header a img { display: block; width: 100px; }

@media screen and (max-width: 1023px) { .sp-header { display: -webkit-box; display: -ms-flexbox; display: flex; } }

/* ---- hamburger menu ---- */
.hamburger-button { display: none; position: fixed; right: 0; top: 0; z-index: 103; width: 70px; height: 55px; }

.hamburger-button::before { content: ""; display: block; position: absolute; left: 20px; top: 27px; width: 30px; height: 1px; background-color: #b4a17e; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translate(0, -3px) rotate(0); transform: translate(0, -3px) rotate(0); -webkit-transition: background-color .2s ease-out, -webkit-transform .2s ease-out; transition: background-color .2s ease-out, -webkit-transform .2s ease-out; transition: transform .2s ease-out, background-color .2s ease-out; transition: transform .2s ease-out, background-color .2s ease-out, -webkit-transform .2s ease-out; }

.hamburger-button::after { content: ""; display: block; position: absolute; left: 20px; top: 27px; width: 30px; height: 1px; background-color: #b4a17e; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translate(0, 3px) rotate(0); transform: translate(0, 3px) rotate(0); -webkit-transition: background-color .2s ease-out, -webkit-transform .2s ease-out; transition: background-color .2s ease-out, -webkit-transform .2s ease-out; transition: transform .2s ease-out, background-color .2s ease-out; transition: transform .2s ease-out, background-color .2s ease-out, -webkit-transform .2s ease-out; }

.hamburger-button.close::before { background-color: #fff; -webkit-transform: translate(0, 0) rotate(45deg); transform: translate(0, 0) rotate(45deg); }

.hamburger-button.close::after { background-color: #fff; -webkit-transform: translate(0, 0) rotate(-45deg); transform: translate(0, 0) rotate(-45deg); }

.hamburger-button span { display: none; }

.hamburger-body { display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; left: 0; top: 0; z-index: 102; width: 100%; min-height: 100vh; opacity: 0; pointer-events: none; -webkit-transition: opacity 0.3s 0.1s cubic-bezier(0.36, 0.1, 0.16, 1); transition: opacity 0.3s 0.1s cubic-bezier(0.36, 0.1, 0.16, 1); }

.hamburger-body.show { opacity: 1; pointer-events: auto; -webkit-transition: opacity 1s 0s cubic-bezier(0.36, 0.1, 0.16, 1); transition: opacity 1s 0s cubic-bezier(0.36, 0.1, 0.16, 1); }

.hamburger-body .inner { width: 100%; padding: 70px 7% 50px; opacity: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translateY(-50px); transform: translateY(-50px); -webkit-transition: opacity 0.3s 0s cubic-bezier(0.17, 0.94, 0.3, 1), -webkit-transform 0.4s 0s linear; transition: opacity 0.3s 0s cubic-bezier(0.17, 0.94, 0.3, 1), -webkit-transform 0.4s 0s linear; transition: opacity 0.3s 0s cubic-bezier(0.17, 0.94, 0.3, 1), transform 0.4s 0s linear; transition: opacity 0.3s 0s cubic-bezier(0.17, 0.94, 0.3, 1), transform 0.4s 0s linear, -webkit-transform 0.4s 0s linear; }

.hamburger-body.show .inner { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.8s 0.2s cubic-bezier(0.17, 0.94, 0.3, 1), -webkit-transform 0.8s 0.2s cubic-bezier(0.17, 0.94, 0.3, 1); transition: opacity 0.8s 0.2s cubic-bezier(0.17, 0.94, 0.3, 1), -webkit-transform 0.8s 0.2s cubic-bezier(0.17, 0.94, 0.3, 1); transition: opacity 0.8s 0.2s cubic-bezier(0.17, 0.94, 0.3, 1), transform 0.8s 0.2s cubic-bezier(0.17, 0.94, 0.3, 1); transition: opacity 0.8s 0.2s cubic-bezier(0.17, 0.94, 0.3, 1), transform 0.8s 0.2s cubic-bezier(0.17, 0.94, 0.3, 1), -webkit-transform 0.8s 0.2s cubic-bezier(0.17, 0.94, 0.3, 1); }

.hamburger-body .nav li { margin-top: 15px; }

.hamburger-body .nav li:first-child { margin-top: 0; }

.hamburger-body .nav a { display: block; color: #fff; }

.hamburger-body .nav a:hover, .hamburger-body .nav a:active { color: #fff; }

.hamburger-body .nav .title { display: block; font-size: 2.3rem; font-weight: bold; letter-spacing: .05em; }

.hamburger-body .nav .desc { display: block; margin-top: 7px; font-size: 1.2rem; letter-spacing: .05em; line-height: 1.5; opacity: .5; }

.hamburger-body .sns { display: table; width: 100%; margin-top: 40px; border: 1px solid #a08080; }

.hamburger-body .sns li { display: table-cell; width: 33.3333%; }

.hamburger-body .sns li:nth-child(2) a { border-left: 1px solid #a08080; border-right: 1px solid #a08080; }

.hamburger-body .sns a { display: block; padding: 12px 0; text-align: center; }

.hamburger-body .sns a img { width: 50px; }

.hamburger-cover { display: none; position: fixed; left: 0; top: 0; z-index: 101; width: 100%; height: 100vh; background-color: #400000; opacity: 0; pointer-events: none; -webkit-transition: opacity 0.3s 0.1s cubic-bezier(0.36, 0.1, 0.16, 1); transition: opacity 0.3s 0.1s cubic-bezier(0.36, 0.1, 0.16, 1); }

.hamburger-cover.show { opacity: 1; pointer-events: auto; -webkit-transition: opacity 1s 0s cubic-bezier(0.36, 0.1, 0.16, 1); transition: opacity 1s 0s cubic-bezier(0.36, 0.1, 0.16, 1); }

@media screen and (max-width: 1023px) { .hamburger-button { display: block; }
  .hamburger-body { display: -webkit-box; display: -ms-flexbox; display: flex; }
  .hamburger-cover { display: block; } }

/* ---- common parts ---- */
h2.common { font-size: 4.6rem; font-weight: normal; letter-spacing: .05em; line-height: 1.4; }

h2.common span { display: block; margin-bottom: 25px; padding-left: .3em; font-size: 1.4rem; line-height: 1; }

h2.common.center { text-align: center; }

@media screen and (max-width: 1779px) { h2.common { font-size: 2.52vw; } }

@media screen and (max-width: 1023px) { h2.common { font-size: 2.8rem; text-align: center; }
  h2.common span { margin-bottom: 15px; padding-left: 0; font-size: 1.5rem; } }

@media screen and (max-width: 639px) { h2.common { font-size: 2.3rem; } }

/* ---- news ---- */
#news { padding: 120px 0; background-color: #f3f1eb; }

#news h2 { font-size: 3rem; font-weight: normal; letter-spacing: .07em; }

#news .news-container { margin-top: 40px; border-top: 1px solid #dad1bf; overflow: hidden; -webkit-transition: height .3s ease-out; transition: height .3s ease-out; }

#news li { border-bottom: 1px solid #dad1bf; }

#news .news-container a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; width: 100%; min-height: 87px; padding: 16px 0; opacity: 1; -webkit-transition: opacity .2s; transition: opacity .2s; }

#news .news-container a:hover, #news .news-container a:active { opacity: .6; }

#news .news-container a .date { padding: 0 30px; font-size: 1.4rem; letter-spacing: .05em; line-height: 1.6; text-align: center; }

#news .news-container a .category { min-width: 110px; padding: 4px 20px 5px; border: 1px solid #b4a17e; color: #998153; font-size: 1.35rem; letter-spacing: .05em; text-align: center; }

#news .news-container a .title { padding: 0 100px 0 30px; font-size: 1.4rem; letter-spacing: .05em; line-height: 1.6; }

#news .news-container a::before { content: ""; display: block; position: absolute; right: 30px; top: 50%; width: 35px; height: 1px; background-color: #b4a17e; }

#news .news-container a::after { content: ""; display: block; position: absolute; right: 30px; top: calc(50% - 3px); width: 0; height: 0; border-style: solid; border-width: 3.5px 0 3.5px 6px; border-color: transparent transparent transparent #b4a17e; }

#news button { display: block; width: 180px; margin: 60px auto 0; padding: 18px 0; background-color: #b4a17e; color: #fff; font-size: 1.4rem; letter-spacing: .1em; text-align: center; opacity: 1; -webkit-transition: opacity .2s; transition: opacity .2s; }

#news button:hover, #news button:active { opacity: .7; }

#news button.clicked { opacity: 0; pointer-events: none; }

@media screen\0 { #news .news-container a { height: 87px; } }

@media screen and (max-width: 639px) { #news { padding: 13vw 0; }
  #news h2 { font-size: 1.8rem; }
  #news .news-container { margin-top: 5vw; }
  #news .news-container a { -ms-flex-wrap: wrap; flex-wrap: wrap; height: auto; min-height: 0; padding: 4vw 0 3.5vw; opacity: 1; -webkit-transition: none; transition: none; }
  #news .news-container a:hover, #news .news-container a:active { opacity: 1; }
  #news .news-container a .date { padding: 0 10px 0 5px; font-size: 1.1rem; text-align: left; }
  #news .news-container a .category { min-width: 80px; padding: 2px 10px 3px; font-size: 1rem; }
  #news .news-container a .title { width: 100%; padding: 2vw 40px 0 5px; font-size: 1.2rem; }
  #news .news-container a::before { right: 5px; width: 20px; }
  #news .news-container a::after { right: 5px; }
  #news button { width: 200px; margin: 11vw auto 0; padding: 16px 0; font-size: 1.2rem; }
  #news button:hover, #news button:active { opacity: 1; } }

/* ---- introduction ---- */
#introduction { padding: 180px 0 200px; border-bottom: 1px solid #eae5db; }

#introduction h2 + p { margin-top: 50px; line-height: 2; text-align: center; }

#introduction .chef { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; width: 100%; max-width: 880px; margin: 90px auto 0; padding: 30px 0; }

#introduction .chef .img { width: 37.5%; margin-left: 5%; }

#introduction .chef .txt { width: 45.5%; margin-left: 4%; }

#introduction .chef .txt p:first-child { font-size: 2rem; letter-spacing: .1em; }

#introduction .chef .txt h3 { margin-top: 35px; font-size: 3.6rem; font-weight: normal; letter-spacing: .05em; }

#introduction .chef .txt h3 span { display: block; margin-top: 15px; font-size: 1.6rem; }

#introduction .chef .txt h3 + p { margin-top: 35px; font-size: 1.4rem; letter-spacing: .05em; line-height: 1.7; text-align: justify; }

#introduction .chef::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 50px; height: 60px; border-top: 1px solid #8b7b79; border-left: 1px solid #8b7b79; }

#introduction .chef::after { content: ""; display: block; position: absolute; right: 0; bottom: 0; width: 50px; height: 60px; border-bottom: 1px solid #8b7b79; border-right: 1px solid #8b7b79; }

@media screen and (max-width: 639px) { #introduction { padding: 20vw 0; }
  #introduction h2 + p { margin-top: 5vw; line-height: 1.8; text-align: left; }
  #introduction h2 + p br { display: none; }
  #introduction .chef { display: block; margin: 11vw auto 0; padding: 6vw 0 9vw; }
  #introduction .chef .img { width: 56%; margin: 0 auto; }
  #introduction .chef .txt { width: 85%; margin: 4vw auto 0; }
  #introduction .chef .txt p:first-child { font-size: 1.5rem; text-align: center; }
  #introduction .chef .txt h3 { margin-top: 5vw; font-size: 2.4rem; text-align: center; }
  #introduction .chef .txt h3 span { margin-top: 4vw; font-size: 1.2rem; }
  #introduction .chef .txt h3 + p { margin-top: 7vw; font-size: 1.1rem; line-height: 1.8; }
  #introduction .chef::before { width: 25px; height: 30px; }
  #introduction .chef::after { width: 25px; height: 30px; } }

/* ---- concept ---- */
#concept { padding: 180px 0 200px; border-bottom: 1px solid #eae5db; }

#concept h2 + p { margin: 50px 0 0 30%; letter-spacing: .1em; line-height: 2; text-align: justify; }

#concept picture { display: block; margin-top: 100px; }

#concept .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 100px; }

#concept .row p { width: 46%; letter-spacing: .1em; line-height: 2; text-align: justify; }

@media screen and (max-width: 1023px) { #concept { padding: 20vw 0; }
  #concept h2 + p { margin: 5vw 0 0; line-height: 1.8; }
  #concept picture { margin-top: 12vw; }
  #concept .row { display: block; margin-top: 12vw; }
  #concept .row p { width: auto; line-height: 1.8; }
  #concept .row p + p { margin-top: 8vw; } }

/* ---- motto ---- */
#motto { padding: 180px 0 200px; border-bottom: 1px solid #eae5db; }

#motto .container-wr .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

#motto .container-wr .row .img { width: 53%; text-align: center; }

#motto .container-wr .row .img img { width: 78%; }

#motto .container-wr .row .txt { width: 47%; }

#motto .container-wr .row .txt h2 + p { margin-top: 50px; letter-spacing: .1em; line-height: 2; text-align: justify; }

#motto .container-wl .row { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 100px; }

#motto .container-wl .row .img { width: 59%; text-align: right; }

#motto .container-wl .row .img img { width: 83%; }

#motto .container-wl .row .txt { width: 41%; padding-top: 100px; }

#motto .container-wl .row .txt p { letter-spacing: .1em; line-height: 2; text-align: justify; }

@media screen and (max-width: 1023px) { #motto { padding: 20vw 0 0; border-bottom-style: none; }
  #motto .container-wr .row { display: block; }
  #motto .container-wr .row .img { width: auto; margin-top: 11vw; }
  #motto .container-wr .row .img img { width: auto; }
  #motto .container-wr .row .txt { width: auto; }
  #motto .container-wr .row .txt h2 + p { margin-top: 5vw; line-height: 1.8; }
  #motto .container-wl { padding: 0; }
  #motto .container-wl .row { display: block; margin-top: 11vw; }
  #motto .container-wl .row .img { width: auto; margin-top: 11vw; text-align: center; }
  #motto .container-wl .row .img img { width: auto; }
  #motto .container-wl .row .txt { width: auto; padding: 0 7%; }
  #motto .container-wl .row .txt p { line-height: 1.8; } }

/* ---- menu ---- */
#menu { padding: 180px 0 200px; }

#menu .button.pc { position: relative; z-index: 2; margin-top: 55px; }

#menu .button.pc a { display: block; width: 180px; padding: 18px 0; background-color: #b4a17e; color: #fff; font-size: 1.4rem; letter-spacing: .1em; text-align: center; opacity: 1; -webkit-transition: opacity .2s; transition: opacity .2s; }

#menu .button.pc a:hover, #menu .button.pc a:active { opacity: .7; }

#menu .button.sp { display: none; }

#menu ul { position: relative; z-index: 1; height: 0; margin-top: -90px; overflow: hidden; }

#menu ul li { position: absolute; width: 32%; }

#menu ul li:nth-child(1) { left: 42%; top: 0; }

#menu ul li:nth-child(2) { right: 0; bottom: 7%; }

#menu ul li:nth-child(3) { left: 31%; bottom: 0; }

#menu ul li:nth-child(4) { left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

#menu ul li img { display: block; margin-bottom: 15px; }

#menu ul li h3 { font-size: 3rem; font-weight: normal; letter-spacing: .05em; }

#menu ul li h3 span { display: block; margin: 0 0 10px 3px; font-size: 1.8rem; }

#menu ul li p { margin: 20px 18% 0 3px; font-size: 1.4rem; letter-spacing: .05em; line-height: 1.7; text-align: justify; }

@media screen and (max-width: 1023px) { #menu { padding: 20vw 0; }
  #menu .button.pc { display: none; }
  #menu .button.sp { display: block; }
  #menu .button.sp a { display: block; width: 224px; margin: 12vw auto 0; padding: 16px 0; background-color: #b4a17e; color: #fff; font-size: 1.2rem; letter-spacing: .1em; text-align: center; }
  #menu ul { height: auto !important; margin-top: 0; }
  #menu ul li { position: static; width: 85%; margin-top: 8vw; }
  #menu ul li:nth-child(2) { margin-left: 15%; }
  #menu ul li:nth-child(4) { margin-left: 15%; -webkit-transform: none; transform: none; }
  #menu ul li img { width: 72%; max-width: 300px; margin: 0 auto 4vw; }
  #menu ul li h3 { font-size: 2.8rem; }
  #menu ul li h3 span { margin: 0 0 2vw 2px; font-size: 1.8rem; }
  #menu ul li p { margin: 4vw 0 0 2px; font-size: 1.4rem; } }

@media screen and (max-width: 639px) { #menu ul li h3 { font-size: 1.8rem; }
  #menu ul li h3 span { font-size: 1.2rem; }
  #menu ul li p { font-size: 1.2rem; } }

/* ---- shop design ---- */
#shop_design { padding: 180px 0 140px; }

#shop_design .container-wl .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

#shop_design .container-wl .row .txt { width: 41%; }

#shop_design .container-wl .row .txt p { margin-top: 50px; letter-spacing: .1em; line-height: 2; text-align: justify; }

#shop_design .container-wl .row .img { width: 49%; padding-top: 160px; text-align: center; }

#shop_design .container-wl .row .img p { margin: 30px 22% 0 0; letter-spacing: .1em; line-height: 2; text-align: justify; }

#shop_design .container-nb .img { width: 70%; margin-top: 110px; text-align: center; }

#shop_design .container-nb .img p { margin: 30px 22% 0 0; letter-spacing: .1em; line-height: 2; text-align: justify; }

@media screen and (max-width: 1023px) { #shop_design { padding: 20vw 0; }
  #shop_design .container-wl .row { display: block; }
  #shop_design .container-wl .row .txt { width: auto; }
  #shop_design .container-wl .row .txt p { margin-top: 5vw; line-height: 1.8; }
  #shop_design .container-wl .row .img { width: auto; padding-top: 12vw; }
  #shop_design .container-wl .row .img p { margin: 4vw 0 0; line-height: 1.8; }
  #shop_design .container-nb .img { width: auto; margin-top: 12vw; }
  #shop_design .container-nb .img p { margin: 4vw 0 0; line-height: 1.8; } }

/* ---- access ---- */
#access { padding: 0 0 200px; }

#access .container-wb .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

#access .container-wb .row .map { width: 46%; }

#access .container-wb .row .map .gmap { position: relative; height: 0; padding-bottom: 110%; }

#access .container-wb .row .map .gmap iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; -webkit-filter: brightness(84%) sepia(75%) grayscale(85%); filter: brightness(84%) sepia(75%) grayscale(85%); }

#access .container-wb .row .txt { width: 41%; }

#access .container-wb .row .txt dl { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 50px; letter-spacing: .1em; line-height: 2; }

#access .container-wb .row .txt dl dt { width: 7em; }

#access .container-wb .row .txt dl dd { width: calc(100% - 7em); }

#access + img { display: block; }

@media screen and (max-width: 1539px) { #access .container-wb .row .txt { width: 46%; } }

@media screen and (max-width: 1023px) { #access { padding: 0 0 20vw; }
  #access .container-wb .row { display: block; }
  #access .container-wb .row .map { width: auto; }
  #access .container-wb .row .map .gmap { padding-bottom: 68%; }
  #access .container-wb .row .txt { width: auto; margin-top: 12vw; }
  #access .container-wb .row .txt dl { margin-top: 5vw; line-height: 1.8; }
  #access .container-wb .row .txt dl dt { margin-top: 5px; }
  #access .container-wb .row .txt dl dd { margin-top: 5px; } }

/* ---- conclusion ---- */
#conclusion { padding: 180px 0 0; }

#conclusion .container-nb h2 { padding-left: 1em; }

#conclusion .container-nb h2 span { margin-left: -1em; }

#conclusion .container-nb h2 + img { display: block; width: 70%; margin: 60px auto 0; }

#conclusion .container-nb .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 70px; }

#conclusion .container-nb .row p { width: 46%; letter-spacing: .1em; line-height: 2; text-align: justify; }

#conclusion .container-nb .row img { display: none; }

@media screen and (max-width: 1023px) { #conclusion { padding: 20vw 0 0; }
  #conclusion .container-nb h2 { padding-left: .5em; text-indent: -.5em; }
  #conclusion .container-nb h2 span { margin-left: 0; }
  #conclusion .container-nb h2 + img { display: none; }
  #conclusion .container-nb .row { display: block; margin-top: 5vw; }
  #conclusion .container-nb .row p { width: auto; line-height: 1.8; }
  #conclusion .container-nb .row img { display: block; width: 92%; max-width: 540px; margin: 7vw auto; } }

/* ---- footer ---- */
.foot-logo { margin: 160px 0; text-align: center; }

.foot-logo img { width: 22%; }

@media screen and (max-width: 1023px) { .foot-logo { margin: 12vw 0 15vw; }
  .foot-logo img { width: 43%; max-width: 240px; } }

.footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 25px 5%; border-top: 1px solid #eae5db; font-size: 1.2rem; letter-spacing: .05em; }

.footer li { display: inline-block; margin-right: 2.5em; }

.footer li a { text-decoration: underline; opacity: 1; -webkit-transition: opacity .2s; transition: opacity .2s; }

.footer li a:hover, .footer li a:active { text-decoration: underline; opacity: .6; }

.footer p { opacity: .5; }

@media screen and (max-width: 1299px) { .footer { display: block; }
  .footer p { margin-top: 15px; text-align: right; } }

@media screen and (max-width: 1023px) { .footer { padding: 0; border-top-style: none; font-size: 1rem; }
  .footer ul { text-align: center; }
  .footer li { margin: 0 .7em; line-height: 2; }
  .footer li a { -webkit-transition: none; transition: none; }
  .footer li a:hover, .footer li a:active { opacity: 1; }
  .footer p { margin-top: 4.5vw; padding: 4.5vw 0; border-top: 1px solid #eae5db; font-size: .7rem; line-height: 1.6; text-align: center; }
  .footer p span { display: inline-block; -webkit-transform: scale(0.8); transform: scale(0.8); } }

/* -------------------------------- article -------------------------------- */
/* ---- container ---- */
.article-container { padding: 140px 10% 160px; }

.article-container > .inner { max-width: 880px; margin: 0 auto; }

@media screen and (max-width: 639px) { .article-container { padding: 25vw 7% 15vw; } }

/* ---- parts ---- */
.article-container .meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.article-container .meta .date { margin-right: 16px; font-size: 1.4rem; letter-spacing: .05em; }

.article-container .meta .category { display: block; min-width: 110px; padding: 5px 20px 6px; border: 1px solid #b4a17e; color: #998153; font-size: 1.35rem; letter-spacing: .05em; text-align: center; }

@media screen and (max-width: 639px) { .article-container .meta .date { margin-right: 12px; font-size: 1.2rem; }
  .article-container .meta .category { min-width: 90px; padding: 3px 10px 4px; font-size: 1.2rem; } }

.article-container h1 { margin: 35px 0 50px; font-size: 4.6rem; font-weight: normal; letter-spacing: .05em; line-height: 1.4; }

@media screen and (max-width: 639px) { .article-container h1 { margin: 5vw 0 7vw; font-size: 2.3rem; } }

.article-container h2 { margin: 40px 0 35px; font-size: 3.6rem; font-weight: normal; letter-spacing: .05em; line-height: 1.4; }

@media screen and (max-width: 639px) { .article-container h2 { margin: 7vw 0 5vw; font-size: 2rem; } }

.article-container h3 { margin: 30px 0 0; padding-bottom: 10px; border-bottom: 1px solid #ccc5c2; font-size: 2.4rem; font-weight: normal; letter-spacing: .05em; line-height: 1.4; }

@media screen and (max-width: 639px) { .article-container h3 { margin: 7vw 0 0; padding-bottom: 7px; font-size: 1.5rem; } }

.article-container p { margin-top: 20px; letter-spacing: .1em; line-height: 2; text-align: justify; }

@media screen and (max-width: 639px) { .article-container p { margin-top: 3vw; line-height: 1.8; } }

.article-container ul { margin-top: 24px; list-style-type: none; line-height: 1.4; }

.article-container ul > li { position: relative; margin-top: .7em; padding-left: 15px; }

.article-container ul > li::before { content: ""; position: absolute; left: 3px; top: calc(50% - 1.5px); width: 3px; height: 3px; border-radius: 1.5px; background-color: #400000; }

.article-container ul > li:first-child { margin-top: 0; }

@media screen and (max-width: 639px) { .article-container ul { margin-top: 4vw; }
  .article-container ul > li { position: relative; margin-top: .7em; padding-left: 15px; }
  .article-container ul > li::before { content: ""; position: absolute; left: 3px; top: calc(50% - 1.5px); width: 3px; height: 3px; border-radius: 1.5px; background-color: #400000; } }

.article-container ol { margin-top: 24px; list-style-type: none; counter-reset: ol-count; line-height: 1.4; }

.article-container ol > li { position: relative; margin-top: .7em; padding-left: 1.4em; }

.article-container ol > li::before { counter-increment: ol-count; content: counter(ol-count); position: absolute; left: 2px; top: 0; color: #400000; }

.article-container ol > li:first-child { margin-top: 0; }

@media screen and (max-width: 639px) { .article-container ol { margin-top: 4vw; } }

.article-container .image { margin-top: 40px; text-align: center; }

@media screen and (max-width: 639px) { .article-container .image { margin-top: 7vw; } }

.article-container .row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.article-container .row .col { width: 47.5%; margin-top: 40px; }

.article-container .row .col *:first-child { margin-top: 0; }

@media screen and (max-width: 639px) { .article-container .row { display: block; }
  .article-container .row .col { width: auto; margin-top: 7vw; } }

.article-container p a, .article-container ol a, .article-container ul a { text-decoration: underline; opacity: 1; -webkit-transition: opacity .2s; transition: opacity .2s; }

.article-container p a:hover, .article-container p a:active, .article-container ol a:hover, .article-container ol a:active, .article-container ul a:hover, .article-container ul a:active { text-decoration: underline; opacity: .6; }

@media screen and (max-width: 639px) { .article-container p a, .article-container ol a, .article-container ul a { -webkit-transition: none; transition: none; }
  .article-container p a:hover, .article-container p a:active, .article-container ol a:hover, .article-container ol a:active, .article-container ul a:hover, .article-container ul a:active { opacity: 1; } }

/* ---- sns ---- */
.article-container .sns { display: table; width: 100%; margin-top: 100px; border: 1px solid #8b7b79; }

.article-container .sns a { display: table-cell; width: 33.3333%; padding: 23px 0; background-color: #f7f6f2; -webkit-transition: background-color .2s; transition: background-color .2s; }

.article-container .sns a:nth-child(2) { border-left: 1px solid #8b7b79; border-right: 1px solid #8b7b79; }

.article-container .sns a .icon { display: block; position: relative; width: 36px; height: 36px; margin: 0 auto; }

.article-container .sns a .icon img { display: block; position: absolute; left: 0; top: 0; width: 100%; -webkit-transition: opacity .2s; transition: opacity .2s; }

.article-container .sns a .icon img:first-child { opacity: 1; }

.article-container .sns a .icon img:last-child { opacity: 0; }

.article-container .sns a .txt { display: block; margin-top: 5px; color: #400000; font-size: 1.6rem; letter-spacing: .1em; text-align: center; -webkit-transition: color .2s; transition: color .2s; }

.article-container .sns a:hover, .article-container .sns a:active { background-color: #8b7b79; }

.article-container .sns a:hover .icon img:first-child, .article-container .sns a:active .icon img:first-child { opacity: 0; }

.article-container .sns a:hover .icon img:last-child, .article-container .sns a:active .icon img:last-child { opacity: 1; }

.article-container .sns a:hover .txt, .article-container .sns a:active .txt { color: #fff; }

@media screen and (max-width: 639px) { .article-container .sns { margin-top: 15vw; }
  .article-container .sns a { padding: 12px 0; background-color: #f7f6f2; -webkit-transition: none; transition: none; }
  .article-container .sns a .icon { width: 30px; height: 30px; }
  .article-container .sns a .icon img { -webkit-transition: none; transition: none; }
  .article-container .sns a .txt { margin-top: 4px; font-size: 1.2rem; -webkit-transition: none; transition: none; }
  .article-container .sns a:hover, .article-container .sns a:active { background-color: #f7f6f2; }
  .article-container .sns a:hover .icon img:first-child, .article-container .sns a:active .icon img:first-child { opacity: 1; }
  .article-container .sns a:hover .icon img:last-child, .article-container .sns a:active .icon img:last-child { opacity: 0; }
  .article-container .sns a:hover .txt, .article-container .sns a:active .txt { color: #400000; } }

/* ---- back button ---- */
.article-container .back-button { margin-top: 100px; }

.article-container .back-button a { display: block; width: 180px; margin: 0 auto; padding: 18px 0; background-color: #b4a17e; color: #fff; font-size: 1.4rem; letter-spacing: .1em; text-align: center; opacity: 1; -webkit-transition: opacity .2s; transition: opacity .2s; }

.article-container .back-button a:hover, .article-container .back-button a:active { opacity: .7; }

@media screen and (max-width: 639px) { .article-container .back-button { margin-top: 15vw; }
  .article-container .back-button a { padding: 16px 0; font-size: 1.2rem; -webkit-transition: none; transition: none; }
  .article-container .back-button a:hover, .article-container .back-button a:active { opacity: 1; } }