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

body { color: #fff; background: #000; font-size: 1.6vw; letter-spacing: .01em; line-height: 1.6; font-weight: 400; font-style: normal; font-family: "Shippori Mincho", BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, serif; font-feature-settings: "palt"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media screen and (max-width: 599px) { body { font-size: 3.2vw; } }

_:lang(x)::-ms-backdrop, .selector { font-family: "Segoe UI", Meiryo, sans-serif; }

.fnt-sprmS { font-family: "Shippori Mincho", serif; font-weight: 600; font-style: normal; }

.fnt-sprmB { font-family: "Shippori Mincho", serif; font-weight: 800; font-style: normal; }

.fnt-zkgnB { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-style: normal; }

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: #fff; text-decoration: none; transition: opacity 0.5s; }
a:hover, a:active { opacity: .6; }

#cover { width: 100%; height: 100%; position: fixed; background: #fff; 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; } }

#wrapper { position: relative; }

#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, .fadeinF { opacity: 0; transform: translateY(30px); transition: opacity 1s ease-in, transform 1s ease-out; }
.fadeinS.active, .fadein1.active, .fadein2.active, .fadein3.active, .fadein4.active, .fadein5.active, .fadein6.active, .fadeinF.active { opacity: 1; transform: translateY(0); }

#header { overflow: hidden; position: fixed; z-index: 900; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: .6em 1.4em 0; }
@media screen and (max-width: 599px) { #header { padding: 1.2em 1.4em 0; } }
#header h2 { position: relative; width: 15vw; }
@media screen and (max-width: 599px) { #header h2 { width: 38vw; } }
#header h2 img { width: 100%; height: auto; }
#header nav .gMenu { position: relative; }
@media screen and (max-width: 599px) { #header nav .gMenu { position: fixed; display: block; top: 0; left: 0; width: 100%; margin: 0 auto; z-index: 999; opacity: 0; height: 0; max-height: 0; overflow: hidden; transition: max-height 0s, opacity .4s; }
  #header nav .gMenu.active { opacity: 1; height: 100%; max-height: 100%; background: rgba(0, 0, 0, 0.8); } }
#header nav .gMenu ul { position: relative; display: flex; width: 100%; }
@media screen and (max-width: 599px) { #header nav .gMenu ul { display: block; text-align: center; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } }
#header nav .gMenu ul li { padding-left: 1.4em; }
@media screen and (max-width: 599px) { #header nav .gMenu ul li { flex: none; padding-left: 0; } }
#header nav .gMenu ul li a { display: block; text-align: center; font-size: 80%; line-height: 2.2; }
@media screen and (max-width: 599px) { #header nav .gMenu ul li a { width: 80%; margin: 0 auto 1.5em; border: 1px solid #fff; font-size: 180%; font-weight: 400; padding: .15em 0; border-radius: 2em; } }
#header nav .gMenu ul li.cart a { display: block; background: #dd1212; font-size: 60%; letter-spacing: -.1em; line-height: 1; padding: .9em 1.6em; border-radius: 2em; }
@media screen and (max-width: 599px) { #header nav .gMenu ul li.cart a { font-size: 160%; width: 80%; margin: 0 auto; border: 1px solid #dd1212; } }
#header nav .menu-trigger { display: none; }
@media screen and (max-width: 599px) { #header nav .menu-trigger { display: inline-block; transition: all .4s; position: fixed; z-index: 9999; width: 40px; height: 34px; top: 20px; right: 20px; }
  #header nav .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; position: absolute; width: 100%; height: 2px; background-color: #fff; border-radius: 2px; }
  #header nav .menu-trigger span:nth-of-type(1) { top: 0; }
  #header nav .menu-trigger span:nth-of-type(2) { top: 16px; }
  #header nav .menu-trigger span:nth-of-type(3) { bottom: 0; } }
@media screen and (max-width: 599px) { #header nav .menu-trigger.active span:nth-of-type(1) { transform: translateY(16px) rotate(-45deg); }
  #header nav .menu-trigger.active span:nth-of-type(2) { opacity: 0; }
  #header nav .menu-trigger.active span:nth-of-type(3) { transform: translateY(-16px) rotate(45deg); } }

main { position: relative; }
main section { position: relative; overflow: hidden; }
main section#topMainSct .bg1 { position: absolute; z-index: 1; top: 4.9em; left: 3.5%; width: 50%; }
@media screen and (max-width: 599px) { main section#topMainSct .bg1 { top: 8em; left: 7%; width: 123%; } }
main section#topMainSct .bg1 img { width: 100%; height: auto; }
main section#topMainSct .innerT { position: relative; z-index: 5; padding: 16.5em 7% 19em; background: url("../img/top_main_pic.webp") no-repeat right center/auto 100%; }
@media screen and (max-width: 599px) { main section#topMainSct .innerT { padding: 16.5em 7% 30em; background-size: 115% auto; background-position: -30% 29em; } }
@media screen and (max-width: 599px) { main section#topMainSct .innerT h1 { font-size: 135%; white-space: nowrap; margin-bottom: 1em; } }
main section#topMainSct .innerT h1 .en { display: block; font-size: 110%; letter-spacing: .08em; padding: 0 0 .3em .3em; }
main section#topMainSct .innerT h1 .jp { display: flex; }
main section#topMainSct .innerT h1 .jp small { font-size: 320%; font-weight: 400; line-height: 1.08; padding: .05em .3em 0 0; }
main section#topMainSct .innerT h1 .jp strong { font-size: 360%; font-weight: 400; line-height: 1; letter-spacing: -.13em; }
main section#topMainSct .innerT .copy { position: absolute; right: 7%; top: 50%; transform: translateY(-60%); }
@media screen and (max-width: 599px) { main section#topMainSct .innerT .copy { position: relative; right: inherit; top: inherit; transform: none; } }
main section#topMainSct .innerT .copy p { writing-mode: vertical-rl; font-size: 130%; letter-spacing: .05em; }
@media screen and (max-width: 599px) { main section#topMainSct .innerT .copy p { font-size: 150%; writing-mode: horizontal-tb; line-height: 1.5; padding-left: .4em; } }
main section#topMainSct .innerT .copy p span { display: block; }
main section#topMainSct .innerT .copy p span:last-child { padding-top: 3em; }
@media screen and (max-width: 599px) { main section#topMainSct .innerT .copy p span:last-child { padding-top: 0; } }
main section#topMainSct .bg2 { position: absolute; z-index: 1; top: 46%; left: -5%; width: 62%; }
@media screen and (max-width: 599px) { main section#topMainSct .bg2 { top: inherit; bottom: 2em; left: -57%; width: 141%; } }
main section#topMainSct .bg2 img { width: 100%; height: auto; }
main section#topMainSct .bg3 { position: absolute; z-index: 1; top: 50%; right: -33.5%; width: 44%; }
@media screen and (max-width: 599px) { main section#topMainSct .bg3 { top: -5em; right: -20%; width: 70%; } }
main section#topMainSct .bg3 img { width: 100%; height: auto; }
main section#topMainSct .innerB { position: relative; z-index: 5; text-align: center; padding-top: 2em; }
main section#topMainSct .innerB .head { display: block; font-size: 130%; letter-spacing: .4em; padding-left: .4em; margin-bottom: 3em; }
main section#topMainSct .innerB .scroll { display: inline-block; }
main section#topMainSct .innerB .scroll a { display: block; background: url("../img/bar1.svg") no-repeat left bottom/auto 100%; padding-top: 5em; }
@media screen and (max-width: 599px) { main section#topMainSct .innerB .scroll a { background: none; border-left: 1px solid #dda955; } }
main section#topMainSct .innerB .scroll a span { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; letter-spacing: .1em; }
main section#shopLinkSct, main section#shop2LinkSct { padding: 5em 0 0; }
main section#shopLinkSct .shopB, main section#shop2LinkSct .shopB { display: block; width: 76%; margin: 0 auto; }
@media screen and (max-width: 599px) { main section#shopLinkSct .shopB, main section#shop2LinkSct .shopB { width: 90%; } }
main section#shopLinkSct .shopB a, main section#shop2LinkSct .shopB a { display: block; overflow: hidden; border-radius: .5em; }
main section#shopLinkSct .shopB a img, main section#shop2LinkSct .shopB a img { width: 100%; height: auto; }
main section#shop3LinkSct { padding: 1em 0 0; }
main section#shop3LinkSct .shopB { display: block; margin: 0 auto; }
@media screen and (max-width: 599px) { main section#shop3LinkSct .shopB { width: 90%; } }
main section#shop3LinkSct .shopB a { display: block; }
main section#shop3LinkSct .shopB a img { width: 100%; height: auto; }
main section#topConceptSct .inner1 { padding: 7em 7% 4em; background: url("../img/top_concept_bg.webp") no-repeat center bottom/100%; text-align: right; }
@media screen and (max-width: 599px) { main section#topConceptSct .inner1 { padding: 10em 7% 4em; background-image: url("../img/top_concept_bg-sp.webp"); } }
main section#topConceptSct .inner1 .copy { position: relative; }
main section#topConceptSct .inner1 .copy p { display: inline-block; text-align: left; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 130%; letter-spacing: .1em; margin-bottom: 1.4em; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3), 1px -1px 3px rgba(0, 0, 0, 0.3), -1px 1px 3px rgba(0, 0, 0, 0.3), -1px -1px 3px rgba(0, 0, 0, 0.3); }
@media screen and (max-width: 599px) { main section#topConceptSct .inner1 .copy p { font-size: 170%; margin-bottom: 3em; } }
main section#topConceptSct .inner1 .copy p span { display: block; }
main section#topConceptSct .inner1 .copy p span:last-child { padding-top: 3em; }
main section#topConceptSct .inner1 .txt { display: inline-block; text-align: left; letter-spacing: .35em; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3), 1px -1px 3px rgba(0, 0, 0, 0.3), -1px 1px 3px rgba(0, 0, 0, 0.3), -1px -1px 3px rgba(0, 0, 0, 0.3); }
@media screen and (max-width: 599px) { main section#topConceptSct .inner1 .txt { font-size: 140%; letter-spacing: .2em; white-space: nowrap; } }
main section#topConceptSct .inner2 { padding: 3em 7% 4em; background: url("../img/top_concept_bg2.webp") no-repeat center bottom/cover; }
@media screen and (max-width: 599px) { main section#topConceptSct .inner2 { padding: 6em 7% 4em; background-image: url("../img/top_concept_bg2-sp.webp"); } }
main section#topConceptSct .inner2 .copy { position: relative; padding-left: 2em; }
@media screen and (max-width: 599px) { main section#topConceptSct .inner2 .copy { padding-left: .5em; } }
main section#topConceptSct .inner2 .copy p { display: inline-block; text-align: left; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 130%; letter-spacing: .15em; margin-bottom: 1.4em; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3), 1px -1px 3px rgba(0, 0, 0, 0.3), -1px 1px 3px rgba(0, 0, 0, 0.3), -1px -1px 3px rgba(0, 0, 0, 0.3); }
@media screen and (max-width: 599px) { main section#topConceptSct .inner2 .copy p { font-size: 170%; margin-bottom: 2.5em; } }
main section#topConceptSct .inner2 .copy p span { display: block; }
main section#topConceptSct .inner2 .copy p span:nth-child(2) { padding-top: 1.5em; }
main section#topConceptSct .inner2 .copy p span:last-child { padding-top: 8em; }
main section#topConceptSct .inner2 .txt { display: inline-block; text-align: left; letter-spacing: .35em; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3), 1px -1px 3px rgba(0, 0, 0, 0.3), -1px 1px 3px rgba(0, 0, 0, 0.3), -1px -1px 3px rgba(0, 0, 0, 0.3); }
@media screen and (max-width: 599px) { main section#topConceptSct .inner2 .txt { font-size: 150%; letter-spacing: .2em; white-space: nowrap; } }
main section#topKodawariSct { padding-top: 6em; }
@media screen and (max-width: 599px) { main section#topKodawariSct { padding-top: 2em; } }
main section#topKodawariSct .innerT { position: relative; padding: 1em 22% 24em; background: url("../img/bg_fish.webp") no-repeat 78% top, url("../img/top_kodawari_pic.webp") no-repeat center bottom; background-size: 35%, 50%; margin: 0 auto 3em; }
@media screen and (max-width: 599px) { main section#topKodawariSct .innerT { padding: 8em 7% 41em; background-size: 118%, 180%; background-position: -23% top, center bottom; margin: 0 auto; } }
@media screen and (max-width: 599px) { main section#topKodawariSct .innerT h2 { font-size: 90%; white-space: nowrap; margin-bottom: 1em; } }
main section#topKodawariSct .innerT h2 .en { display: block; font-size: 110%; letter-spacing: .08em; padding: 0 0 .3em .3em; }
main section#topKodawariSct .innerT h2 .jp { display: flex; }
main section#topKodawariSct .innerT h2 .jp small { font-size: 320%; font-weight: 400; line-height: 1.08; padding: .05em .3em 0 0; }
main section#topKodawariSct .innerT h2 .jp strong { font-size: 360%; font-weight: 400; line-height: 1; letter-spacing: -.13em; }
main section#topKodawariSct .innerT .copy { position: relative; text-align: right; margin: -2em 0 2em; }
@media screen and (max-width: 599px) { main section#topKodawariSct .innerT .copy { text-align: left; margin: 0 auto 2em; } }
main section#topKodawariSct .innerT .copy p { font-size: 110%; letter-spacing: .2em; }
@media screen and (max-width: 599px) { main section#topKodawariSct .innerT .copy p { font-size: 140%; } }
main section#topKodawariSct .innerT .copy p span { display: block; }
main section#topKodawariSct .innerT .point { position: relative; display: flex; justify-content: space-around; }
@media screen and (max-width: 599px) { main section#topKodawariSct .innerT .point { display: block; } }
main section#topKodawariSct .innerT .point li { width: 30%; background: url("../img/round.svg") no-repeat center center/contain; text-align: center; padding: 1.3em 1em 2.3em; }
@media screen and (max-width: 599px) { main section#topKodawariSct .innerT .point li { width: 70%; margin: 0 auto 1em; font-size: 180%; } }
main section#topKodawariSct .innerT .point li .no { display: block; font-size: 180%; line-height: 1.4; }
main section#topKodawariSct .innerT .point li .txt { display: block; line-height: 1.2; }
main section#topKodawariSct .innerP { position: relative; }
main section#topKodawariSct .innerP ul { display: block; width: 56%; margin: 0 auto; }
@media screen and (max-width: 599px) { main section#topKodawariSct .innerP ul { width: 86%; } }
main section#topKodawariSct .innerP ul li { margin-bottom: 5em; }
@media screen and (max-width: 599px) { main section#topKodawariSct .innerP ul li { font-size: 140%; }
  main section#topKodawariSct .innerP ul li:last-child { margin-bottom: 2em; } }
main section#topKodawariSct .innerP ul li .no { display: block; color: #dda955; font-size: 170%; text-align: center; }
@media screen and (max-width: 599px) { main section#topKodawariSct .innerP ul li .no { font-size: 190%; } }
main section#topKodawariSct .innerP ul li .ttl { display: block; font-size: 140%; text-align: center; letter-spacing: .4em; padding-left: .4em; background: url("../img/bar2.svg") no-repeat center bottom/50%; padding-bottom: .3em; margin-bottom: 1.3em; }
@media screen and (max-width: 599px) { main section#topKodawariSct .innerP ul li .ttl { line-height: 1.6; padding-bottom: 1.2em; background-size: 80% auto; } }
main section#topKodawariSct .innerP ul li .imgB { width: 100%; margin-bottom: 1.8em; }
@media screen and (max-width: 599px) { main section#topKodawariSct .innerP ul li .imgB { overflow: hidden; } }
main section#topKodawariSct .innerP ul li .imgB img { width: 100%; height: auto; }
@media screen and (max-width: 599px) { main section#topKodawariSct .innerP ul li .imgB img { display: block; position: relative; width: 180%; left: -40%; } }
main section#topKodawariSct .innerP ul li .txt { display: block; line-height: 1.5; }
@media screen and (max-width: 599px) { main section#topKodawariSct .innerP ul li .txt { letter-spacing: .08em; text-align: justify; text-justify: inter-ideograph; line-height: 1.6; } }
main section#topEnjoySct { padding: 8em 0 1em; }
main section#topEnjoySct .innerT { padding: 3em 7% 4em; background: url("../img/top_enjoy_pic.webp") no-repeat center bottom/cover; margin-bottom: 10em; }
@media screen and (max-width: 599px) { main section#topEnjoySct .innerT { background-image: url("../img/top_enjoy_pic-sp.webp"); padding: 3em 7% 2em; text-align: right; margin-bottom: 7em; } }
main section#topEnjoySct .innerT .copy { position: relative; color: #000; }
main section#topEnjoySct .innerT .copy p { display: inline-block; text-align: left; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 130%; letter-spacing: .15em; padding-left: 2em; margin-bottom: 1.4em; text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.3), 1px -1px 3px rgba(255, 255, 255, 0.3), -1px 1px 3px rgba(255, 255, 255, 0.3), -1px -1px 3px rgba(255, 255, 255, 0.3); }
@media screen and (max-width: 599px) { main section#topEnjoySct .innerT .copy p { font-size: 190%; margin-bottom: 2.5em; padding-left: 0; } }
main section#topEnjoySct .innerT .copy p span { display: block; }
main section#topEnjoySct .innerT .copy p span:last-child { padding-top: 1em; white-space: nowrap; }
main section#topEnjoySct .innerT .txt { display: inline-block; color: #000; text-align: left; letter-spacing: .35em; text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.3), 1px -1px 3px rgba(255, 255, 255, 0.3), -1px 1px 3px rgba(255, 255, 255, 0.3), -1px -1px 3px rgba(255, 255, 255, 0.3); }
@media screen and (max-width: 599px) { main section#topEnjoySct .innerT .txt { font-size: 150%; letter-spacing: .15em; white-space: nowrap; } }
main section#topEnjoySct .box { position: relative; width: 76%; margin: 0 auto 8em; display: flex; justify-content: space-between; align-items: center; }
@media screen and (max-width: 599px) { main section#topEnjoySct .box { display: block; width: 86%; } }
main section#topEnjoySct .box .txtB { width: 46%; }
@media screen and (max-width: 599px) { main section#topEnjoySct .box .txtB { width: 100%; } }
main section#topEnjoySct .box .txtB .ttl { display: block; font-size: 130%; letter-spacing: .2em; line-height: 1.6; margin-bottom: 1em; white-space: nowrap; }
@media screen and (max-width: 599px) { main section#topEnjoySct .box .txtB .ttl { text-align: center; font-size: 180%; white-space: nowrap; margin-bottom: 13.4em; } }
main section#topEnjoySct .box .txtB .txt { display: block; line-height: 2.2; letter-spacing: .35em; white-space: nowrap; }
@media screen and (max-width: 599px) { main section#topEnjoySct .box .txtB .txt { width: 92%; margin: 0 auto; font-size: 130%; line-height: 1.8; letter-spacing: .15em; white-space: normal; } }
main section#topEnjoySct .box .txtB .txt .dt599 { display: none; }
@media screen and (max-width: 599px) { main section#topEnjoySct .box .txtB .txt .dt599 { display: inline; } }
main section#topEnjoySct .box .imgB { width: 46%; }
@media screen and (max-width: 599px) { main section#topEnjoySct .box .imgB { position: absolute; width: 100%; left: 0; top: 7em; } }
main section#topEnjoySct .box .imgB img { width: 100%; height: auto; }

#footer { position: relative; padding: 3em 0 2em; }
#footer .shopB { position: relative; display: flex; justify-content: space-between; padding: 0 7% 3em; }
@media screen and (max-width: 599px) { #footer .shopB { flex-wrap: wrap; justify-content: center; } }
@media screen and (max-width: 599px) { #footer .shopB .lp_name { width: 100%; text-align: center; margin-bottom: 2em; } }
#footer .shopB .lp_name p { display: inline-block; text-align: left; }
#footer .shopB .lp_name p .en { display: block; font-size: 80%; letter-spacing: .08em; line-height: 1.4; }
#footer .shopB .lp_name p .jp { display: block; font-size: 200%; line-height: 1.2; }
#footer .shopB .lp_name p .jp strong { font-weight: 400; letter-spacing: -.13em; }
@media screen and (max-width: 599px) { #footer .shopB .sp_name { width: 100%; } }
#footer .shopB .sp_name img { width: 17.5vw; height: auto; }
@media screen and (max-width: 599px) { #footer .shopB .sp_name img { display: block; width: 36vw; margin: 0 auto; } }
#footer .cpr { text-align: center; font-size: 60%; letter-spacing: .2em; }
@media screen and (max-width: 599px) { #footer .cpr { font-size: 90%; } }