@charset "UTF-8";
*, *::before, *::after { box-sizing: border-box; }

body { color: #000000; background: #f9f7f5; font-size: 1.1vw; letter-spacing: .03em; line-height: 1.6; font-family: "Zen Old Mincho", serif; font-weight: 500; font-style: normal; font-feature-settings: "palt"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media screen and (max-width: 599px) { body { font-size: 2.4vw; } }

.fnt-s12 { font-size: 75%; }

.fnt-s14 { font-size: 87.5%; }

.fnt-s16 { font-size: 100%; }

.fnt-s18 { font-size: 112.5%; }

.fnt-s20 { font-size: 125%; }

.fnt-s24 { font-size: 150%; }

.fnt-s28 { font-size: 175%; }

.fnt-s32 { font-size: 200%; }

.fnt-s40 { font-size: 250%; }

.fnt-s48 { font-size: 300%; }

p { line-height: 1.8; }

img { border: 0; vertical-align: top; }

input, select { position: relative; top: 1px; }

table, th, td { border-collapse: collapse; border-spacing: 0; }

ul, li { list-style: none; }

a:link, a:visited { color: #000000; text-decoration: none; transition: opacity .3s; }
a:hover, a:active { opacity: .6; }
a.nonlink { pointer-events: none; opacity: 0; }

#cover { width: 100%; height: 100%; position: fixed; background: #f9f7f5; top: 0; left: 0; z-index: 10000; }

#loader { opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 300px; height: 250px; }
#loader img { width: 100%; height: auto; }
@media screen and (max-width: 599px) { #loader { width: 210px; height: 175px; } }

#page-top { opacity: 0; position: fixed; bottom: 20px; right: 20px; z-index: 9000; width: 40px; pointer-events: none; }
#page-top img { width: 100%; height: auto; }
#page-top.fade { opacity: 1; transition: opacity .5s; pointer-events: auto; }

.dd599 { display: none; }
@media screen and (max-width: 599px) { .dd599 { display: block !important; } }

@media screen and (max-width: 599px) { .nn599 { display: none !important; } }

.fadeinS, .fadein1, .fadein2, .fadein3, .fadein4, .fadein5, .fadein6 { opacity: 0; transform: translateY(1rem); transition: opacity .8s ease-in, transform .8s ease-out; }
.fadeinS.active, .fadein1.active, .fadein2.active, .fadein3.active, .fadein4.active, .fadein5.active, .fadein6.active { opacity: 1; transform: translateY(0); }

.poBtn { position: relative; display: inline-block; line-height: 1; padding: 1em 3em; border: 1px solid #000000; border-radius: 2em; }

.poBox { padding: 2em; border: 1px solid #000000; }

#header { overflow: hidden; position: fixed; z-index: 900; display: flex; justify-content: space-between; width: 100%; padding: 1.5em 3% 0; }
@media screen and (max-width: 599px) { #header { padding: 1.5em 6% 0; } }
#header h1 { position: relative; width: 13em; padding-top: 1em; }
#header h1 img { width: 100%; height: auto; }
#header .ecBtn a { display: block; width: 12.5em; text-align: center; background: #a78a5c; color: #ffffff; font-weight: 700; letter-spacing: 0; padding: .5em 0; }

main section { position: relative; }
main section#topMainSct { z-index: 5; background: url("../img/top_main_pic.webp") no-repeat center top/cover; padding: 12em 7% 8em; color: #ffffff; }
@media screen and (max-width: 599px) { main section#topMainSct { padding: 10em 7% 6em; background-position: 80% top; } }
main section#topMainSct .txtB .head { display: block; font-size: 520%; font-weight: 700; line-height: 1.3; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); margin-bottom: .6em; }
@media screen and (max-width: 599px) { main section#topMainSct .txtB .head { white-space: nowrap; font-size: 380%; } }
main section#topMainSct .txtB .copy { display: block; font-weight: 700; line-height: 1.4; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); margin-bottom: 3.5em; }
main section#topMainSct .txtB .btn a { display: block; width: 14.5em; text-align: center; background: #a78a5c; color: #ffffff; font-weight: 700; letter-spacing: 0; padding: .5em 0; }
main section#topAboutSct { z-index: 7; }
main section#topAboutSct::before { content: ""; position: absolute; z-index: 10; left: 0; top: 19.5em; width: 10em; height: 31em; background: url("../img/top_about_awa1.webp") no-repeat center center/contain; }
main section#topAboutSct::after { content: ""; position: absolute; z-index: 10; right: 0; top: 32.5em; width: 10em; height: 22em; background: url("../img/top_about_awa2.webp") no-repeat center center/contain; }
main section#topAboutSct .topB { position: relative; z-index: 2; background: url("../img/top_about_bg1.webp") no-repeat center top/100%; padding: 3.5em 5% 11.2em 56%; }
@media screen and (max-width: 599px) { main section#topAboutSct .topB { background-size: 250%; padding: 7.5em 6% 14em; text-align: right; } }
main section#topAboutSct .topB .kaki { position: absolute; top: -3.5em; left: 8%; width: 43vw; height: auto; }
@media screen and (max-width: 599px) { main section#topAboutSct .topB .kaki { top: -.5em; left: -13%; width: 58vw; } }
main section#topAboutSct .topB .txtB { position: relative; background: url("../img/top_about_hokkaido.webp") no-repeat center center/90%; padding: 3.5em 0; color: #ffffff; }
main section#topAboutSct .topB .txtB .head { display: block; font-weight: 700; line-height: 1.4; margin-bottom: .6em; }
main section#topAboutSct .topB .txtB .head ruby rp, main section#topAboutSct .topB .txtB .head ruby rt { font-size: 35%; }
main section#topAboutSct .topB .txtB .txt { display: block; font-weight: 700; margin-bottom: 1.5em; }
main section#topAboutSct .topB .txtB .txt span { display: block; line-height: 1.4; margin-bottom: .5em; }
main section#topAboutSct .topB .txtB .btn a { color: #ffffff; }
main section#topAboutSct .bottomB { position: relative; z-index: 1; padding-bottom: 5em; }
@media screen and (max-width: 599px) { main section#topAboutSct .bottomB { top: -3em; margin-bottom: -3em; } }
main section#topAboutSct .bottomB .head { display: block; font-weight: 700; text-align: center; line-height: 1.4; margin-bottom: .2em; }
@media screen and (max-width: 599px) { main section#topAboutSct .bottomB .head { padding-left: .5em; margin-bottom: .4em; } }
main section#topAboutSct .bottomB .txt1 { display: block; text-align: center; line-height: 1.4; margin-bottom: 1.5em; }
@media screen and (max-width: 599px) { main section#topAboutSct .bottomB .txt1 { line-height: 1.6; } }
main section#topAboutSct .bottomB .box { position: relative; display: flex; justify-content: space-between; padding: 0 7.5%; }
@media screen and (max-width: 599px) { main section#topAboutSct .bottomB .box { display: block; padding: 0; } }
main section#topAboutSct .bottomB .box::after { content: "CHOOSE YOUR OYSTER."; position: absolute; left: 43.8%; top: 7em; color: #a78a5c; font-size: 90%; transform: rotate(90deg); }
@media screen and (max-width: 599px) { main section#topAboutSct .bottomB .box::after { transform: rotate(0deg); left: 0; width: 100%; text-align: center; top: 50%; } }
main section#topAboutSct .bottomB .box .karaB, main section#topAboutSct .bottomB .box .mukiB { position: relative; width: 49%; display: flex; align-items: center; flex-wrap: wrap; }
@media screen and (max-width: 599px) { main section#topAboutSct .bottomB .box .karaB, main section#topAboutSct .bottomB .box .mukiB { width: 100%; } }
main section#topAboutSct .bottomB .box .karaB .txtB, main section#topAboutSct .bottomB .box .mukiB .txtB { width: 31%; }
main section#topAboutSct .bottomB .box .karaB .txtB .ttl, main section#topAboutSct .bottomB .box .mukiB .txtB .ttl { display: block; font-weight: 700; margin-bottom: .3em; }
main section#topAboutSct .bottomB .box .karaB .txtB .txt2, main section#topAboutSct .bottomB .box .mukiB .txtB .txt2 { display: block; line-height: 1.6; margin-bottom: 1em; }
main section#topAboutSct .bottomB .box .karaB .imgB, main section#topAboutSct .bottomB .box .mukiB .imgB { width: 69%; }
main section#topAboutSct .bottomB .box .karaB .imgB img, main section#topAboutSct .bottomB .box .mukiB .imgB img { width: 100%; height: auto; }
main section#topAboutSct .bottomB .box .karaB .recoB, main section#topAboutSct .bottomB .box .mukiB .recoB { width: 100%; padding-top: 1em; }
main section#topAboutSct .bottomB .box .karaB .recoB .ttl, main section#topAboutSct .bottomB .box .mukiB .recoB .ttl { position: relative; display: block; text-align: center; color: #a78a5c; }
main section#topAboutSct .bottomB .box .karaB .recoB .ttl::before, main section#topAboutSct .bottomB .box .mukiB .recoB .ttl::before { content: ""; position: absolute; z-index: 1; left: 7%; top: 49%; width: 86%; height: 1px; background: #a78a5c; }
main section#topAboutSct .bottomB .box .karaB .recoB .ttl span, main section#topAboutSct .bottomB .box .mukiB .recoB .ttl span { position: relative; z-index: 5; display: inline-block; background: #f9f7f5; padding: 0 1.5em; }
main section#topAboutSct .bottomB .box .karaB .recoB .illst, main section#topAboutSct .bottomB .box .mukiB .recoB .illst { display: block; width: 90%; height: auto; margin: 0 auto; }
@media screen and (max-width: 599px) { main section#topAboutSct .bottomB .box .karaB { margin: 0 0 6em 0; }
  main section#topAboutSct .bottomB .box .karaB .txtB { text-align: right; margin-left: 6%; width: 28%; }
  main section#topAboutSct .bottomB .box .karaB .imgB { margin-right: 2%; width: 64%; } }
@media screen and (max-width: 599px) { main section#topAboutSct .bottomB .box .mukiB { margin: 0 0 3em; } }
main section#topPointSct { z-index: 5; padding: 5em 5% 9.5em; background: url("../img/top_point_bg.webp") no-repeat center top/cover; color: #ffffff; }
@media screen and (max-width: 599px) { main section#topPointSct { padding: 5em 5% 14em; } }
main section#topPointSct .head { display: block; font-weight: 700; }
@media screen and (max-width: 599px) { main section#topPointSct .head { line-height: 1.4; padding-left: 3%; margin-bottom: .4em; } }
main section#topPointSct .head strong { color: #a78a5c; }
main section#topPointSct .txt1 { display: block; font-weight: 700; margin-bottom: 1.4em; }
@media screen and (max-width: 599px) { main section#topPointSct .txt1 { padding-left: 3%; margin-bottom: 1.8em; } }
main section#topPointSct ul { display: flex; justify-content: space-between; }
@media screen and (max-width: 599px) { main section#topPointSct ul { display: block; } }
main section#topPointSct ul li { position: relative; border: 1px solid #a78a5c; width: 23%; padding: 1.5em 1.5em 13em; }
@media screen and (max-width: 599px) { main section#topPointSct ul li { width: 100%; padding: 1.5em; background-size: auto 100% !important; background-position: right top !important; margin-bottom: 1em; } }
main section#topPointSct ul li .no { display: block; color: #a78a5c; font-weight: 700; line-height: 1.4; }
@media screen and (max-width: 599px) { main section#topPointSct ul li .no { display: inline-block; font-size: 175%; padding-right: .3em; } }
main section#topPointSct ul li .ttl { display: block; font-weight: 700; line-height: 1.4; margin-bottom: .5em; }
@media screen and (max-width: 599px) { main section#topPointSct ul li .ttl { display: inline-block; font-size: 175%; } }
main section#topPointSct ul li .txt2 { display: block; font-weight: 700; line-height: 1.4; }
main section#topPointSct ul li:nth-child(1) { background: rgba(0, 0, 0, 0.5) url("../img/top_point_pic1.webp") no-repeat center bottom/100%; }
main section#topPointSct ul li:nth-child(2) { background: rgba(0, 0, 0, 0.5) url("../img/top_point_pic2.webp") no-repeat center bottom/100%; }
main section#topPointSct ul li:nth-child(3) { background: rgba(0, 0, 0, 0.5) url("../img/top_point_pic3.webp") no-repeat center bottom/100%; }
main section#topPointSct ul li:nth-child(4) { background: rgba(0, 0, 0, 0.5) url("../img/top_point_pic4.webp") no-repeat center bottom/100%; }
main section#topBlandSct { z-index: 3; top: -10em; margin-bottom: -23em; }
main section#topBlandSct .itemB { position: relative; z-index: 3; background: url("../img/top_bland_bg.webp") no-repeat center top/100%; padding: 20em 7% 5em; }
@media screen and (max-width: 599px) { main section#topBlandSct .itemB { background-size: 160%; padding: 14em 3% 9em; } }
main section#topBlandSct .itemB .head { display: block; text-align: center; padding-left: .8em; }
@media screen and (max-width: 599px) { main section#topBlandSct .itemB .head { line-height: 1.4; margin-bottom: .3em; } }
main section#topBlandSct .itemB .txt1 { display: block; text-align: center; letter-spacing: .1em; margin-bottom: 2.8em; }
@media screen and (max-width: 599px) { main section#topBlandSct .itemB .txt1 { margin-bottom: 2em; } }
main section#topBlandSct .itemB .item { display: flex; justify-content: space-between; }
main section#topBlandSct .itemB .item li { position: relative; width: 31%; }
@media screen and (max-width: 599px) { main section#topBlandSct .itemB .item li { width: 32%; } }
main section#topBlandSct .itemB .item li .en { display: block; text-align: center; color: #a78a5c; line-height: 1.4; }
main section#topBlandSct .itemB .item li .name { display: block; text-align: center; line-height: 1.4; margin-bottom: .5em; }
@media screen and (max-width: 599px) { main section#topBlandSct .itemB .item li .name { font-size: 200%; } }
main section#topBlandSct .itemB .item li .txt2 { padding: 0 7%; }
main section#topBlandSct .itemB .item li .pic { display: block; width: 100%; height: auto; }
main section#topBlandSct .mtrxB { position: relative; z-index: 1; top: -13em; margin-bottom: -13em; background: url("../img/top_bland_graph.webp") no-repeat center top/100%; padding: 10em 9% 6.5em; }
@media screen and (max-width: 599px) { main section#topBlandSct .mtrxB { padding: 7em 9% 59em; background-size: 190%; background-position: right bottom; } }
main section#topBlandSct .mtrxB .head { display: block; line-height: 1.4; letter-spacing: .1em; margin-bottom: .8em; }
main section#topBlandSct .mtrxB .copy { display: block; line-height: 1.4; letter-spacing: .1em; margin-bottom: 1.8em; }
main section#topBlandSct .mtrxB ul li { display: flex; align-items: center; }
main section#topBlandSct .mtrxB ul li .season { font-size: 390%; line-height: 1.6; padding-right: .4em; }
main section#topBlandSct .mtrxB ul li .txt .month { display: block; line-height: 1.7; }
main section#topBlandSct .mtrxB ul li .txt .point { display: block; line-height: 1.7; }
main section#topBlandSct .mtrxB ul li:nth-child(1) .season { color: #c96586; }
main section#topBlandSct .mtrxB ul li:nth-child(1) .txt .month { color: #c96586; }
main section#topBlandSct .mtrxB ul li:nth-child(2) .season { color: #547ebf; }
main section#topBlandSct .mtrxB ul li:nth-child(2) .txt .month { color: #547ebf; }
main section#topBlandSct .mtrxB ul li:nth-child(3) .season { color: #b56a2d; }
main section#topBlandSct .mtrxB ul li:nth-child(3) .txt .month { color: #b56a2d; }
main section#topBlandSct .mtrxB ul li:nth-child(4) .season { color: #2f3192; }
main section#topBlandSct .mtrxB ul li:nth-child(4) .txt .month { color: #2f3192; }
main section#topMovieSct { background: url("../img/top_movie_bg.webp") no-repeat center top/cover; padding: 6.5em 6% 5em; }
@media screen and (max-width: 599px) { main section#topMovieSct { background: #efeeec url("../img/top_movie_bg-sp.webp") no-repeat left 15em/100%; padding: 5em 7% 6em; } }
main section#topMovieSct .head { display: block; letter-spacing: .2em; line-height: 1.4; margin-bottom: .5em; }
main section#topMovieSct .txt1 { display: block; letter-spacing: .1em; margin-bottom: 2em; }
@media screen and (max-width: 599px) { main section#topMovieSct .txt1 { margin-bottom: 19em; } }
main section#topMovieSct .howto { display: flex; margin-bottom: 3em; }
main section#topMovieSct .howto li { width: 12.5em; padding: 6.6em 1em 1em .5em; text-align: center; }
main section#topMovieSct .howto li .name { display: block; margin-bottom: .2em; }
main section#topMovieSct .howto li .txt2 { display: block; white-space: nowrap; letter-spacing: 0; line-height: 1.45; }
main section#topMovieSct .howto li:nth-child(1) { position: relative; background: url("../img/icn_movie1.svg") no-repeat center top/50%; }
main section#topMovieSct .howto li:nth-child(1)::after { content: "準備中"; font-size: 150%; font-weight: 700; color: #cc0000; position: absolute; top: 1.3em; left: 50%; transform: translateX(-50%) rotate(-25deg); }
main section#topMovieSct .howto li:nth-child(2) { background: url("../img/icn_movie2.svg") no-repeat center top/50%; }
main section#topMovieSct .howto li:nth-child(3) { background: url("../img/icn_movie3.svg") no-repeat center top/50%; }
main section#topMovieSct .btn a { display: inline-block; background: #0c233a url("../img/icn_arrow-r.svg") no-repeat 82% center/0.7em; color: #ffffff; font-weight: 700; letter-spacing: .02em; padding: .3em 6em .3em 4em; }
@media screen and (max-width: 599px) { main section#topMovieSct .btn a { display: block; width: 90%; padding: .5em 0; margin: 0 auto; text-align: center; background-position: 85% center; } }
main section#topMovieSct .mBtn { position: absolute; z-index: 100; top: 3em; right: 4%; width: 12em; }
main section#topMovieSct .mBtn img { width: 100%; height: auto; }
main section#topFaqSct { background: #ffffff; padding: 6em 5% 7em; }
main section#topFaqSct .head { text-align: center; margin-bottom: .8em; }
@media screen and (max-width: 599px) { main section#topFaqSct .head { margin-bottom: 1.2em; } }
main section#topFaqSct .faqB { display: flex; flex-wrap: wrap; }
main section#topFaqSct .faqB li { width: 24%; margin: 0 calc(4%/3) 1.2em 0; border: 1px solid #e5e6e8; padding: 1.8em 1.5em 5em 1.5em; }
@media screen and (max-width: 599px) { main section#topFaqSct .faqB li { width: 49%; margin: 0 2% 1.2em 0; } }
@media screen and (max-width: 599px) { main section#topFaqSct .faqB li:nth-child(2n) { margin-right: 0; } }
main section#topFaqSct .faqB li:nth-child(4n) { margin-right: 0; }
main section#topFaqSct .faqB li .qt { position: relative; display: block; letter-spacing: 0; padding-left: 2em; margin-bottom: .8em; }
@media screen and (max-width: 599px) { main section#topFaqSct .faqB li .qt { white-space: nowrap; } }
main section#topFaqSct .faqB li .qt::before { content: "Q."; font-size: 150%; font-weight: 700; line-height: 1; color: #a78a5c; position: absolute; left: 0; top: 0; }
main section#topFaqSct .faqB li .at { position: relative; display: block; letter-spacing: 0; line-height: 1.6; padding-left: 2.2em; }
main section#topFaqSct .faqB li .at::before { content: "A."; font-size: 125%; font-weight: 700; line-height: 1.2; position: absolute; left: .15em; top: 0; }
main section#topFaqSct .faqB li:nth-child(1) { background: url("../img/icn_faq1.svg") no-repeat right 95%/6em; }
main section#topFaqSct .faqB li:nth-child(2) { background: url("../img/icn_faq2.svg") no-repeat right 95%/6em; }
main section#topFaqSct .faqB li:nth-child(3) { background: url("../img/icn_faq3.svg") no-repeat right 95%/6em; }
main section#topFaqSct .faqB li:nth-child(4) { background: url("../img/icn_faq4.svg") no-repeat 95% 95%/6em; }
main section#topShopSct { background: url("../img/top_ec_bg.webp") no-repeat center top/cover; padding: 3em 3% 0; color: #ffffff; }
@media screen and (max-width: 599px) { main section#topShopSct { padding: 5em 3% 3em; } }
@media screen and (max-width: 599px) { main section#topShopSct { background-position: 45% top; } }
main section#topShopSct .head { display: block; padding-left: 45%; letter-spacing: .15em; margin-bottom: .1em; }
@media screen and (max-width: 599px) { main section#topShopSct .head { padding: 0; text-align: right; line-height: 1.4; margin-bottom: .5em; } }
main section#topShopSct .head span { color: #a78a5c; }
main section#topShopSct .txt1 { display: block; padding-left: 45%; font-weight: 700; margin-bottom: 1em; }
@media screen and (max-width: 599px) { main section#topShopSct .txt1 { padding: 0 3% 0 0; text-align: right; margin-bottom: 2em; } }
main section#topShopSct .btnB { position: relative; display: flex; justify-content: flex-end; margin-bottom: .5em; }
@media screen and (max-width: 599px) { main section#topShopSct .btnB { display: block; width: 90%; margin: 0 auto 1em; } }
main section#topShopSct .btnB li { padding-left: 1em; }
@media screen and (max-width: 599px) { main section#topShopSct .btnB li { width: 100%; padding: 0 0 2em; } }
main section#topShopSct .btnB li a { position: relative; display: block; color: #ffffff; padding: 3em 3.5em 3em 14.5em; }
@media screen and (max-width: 599px) { main section#topShopSct .btnB li a { padding: 3.5em 1em 3.5em 18em; } }
main section#topShopSct .btnB li a p { font-weight: 700; line-height: 1.4; }
main section#topShopSct .btnB li a::before { content: ""; position: absolute; right: 8%; bottom: 32%; width: 1.2em; height: 1.2em; background: url("../img/icn_arrow-r.svg") no-repeat center center/contain; }
main section#topShopSct .btnB li:nth-child(1) a { background: url("../img/top_ec_pic1.webp") no-repeat center center/contain; }
main section#topShopSct .btnB li:nth-child(2) a { background: url("../img/top_ec_pic2.webp") no-repeat center center/contain; }
main section#topShopSct .atnB { position: relative; display: flex; justify-content: flex-end; }
main section#topShopSct .atnB li { padding: 1.5em 0 1.5em 1.5em; }
@media screen and (max-width: 599px) { main section#topShopSct .atnB li { padding: 0 0 1em; width: calc(100% / 3); } }
main section#topShopSct .atnB li p { display: block; border-right: 2px dotted #a78a5c; font-weight: 700; line-height: 1.6; }
@media screen and (max-width: 599px) { main section#topShopSct .atnB li p { text-align: center; } }
main section#topShopSct .atnB li p small { display: block; }
main section#topShopSct .atnB li:nth-child(1) p { padding: 0 1.8em 0 4em; background: url("../img/icn_ec1.svg") no-repeat left center/3.6em; }
@media screen and (max-width: 599px) { main section#topShopSct .atnB li:nth-child(1) p { padding: 4em 1em 0; background-size: 4em; background-position: center top; } }
main section#topShopSct .atnB li:nth-child(2) p { padding: 0 1.8em 0 4em; background: url("../img/icn_ec2.svg") no-repeat left center/3.8em; }
@media screen and (max-width: 599px) { main section#topShopSct .atnB li:nth-child(2) p { padding: 4em 1em 0; background-size: 4em; background-position: center top; } }
main section#topShopSct .atnB li:nth-child(3) p { padding: 0 .5em 0 4em; border-right: none; background: url("../img/icn_ec3.svg") no-repeat 6% center/2.4em; }
@media screen and (max-width: 599px) { main section#topShopSct .atnB li:nth-child(3) p { padding: 4em 1em 0; background-size: 3em; background-position: center top; } }

#footer { position: relative; padding: 2em 0; background: #002245; color: #ffffff; text-align: center; border-top: 1px solid #e5e6e8; }
#footer a { color: #ffffff; }
#footer p { padding-top: 1em; }
@media screen and (max-width: 599px) { #footer p { padding-top: 2em; } }