@charset "UTF-8";

/* -------------------------------------------
	top_title
---------------------------------------------- */
.top_title { position: relative; height: 740px; }
.top_title > img { display: none; }
.top_title > p { background-color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 0; line-height: 0; position: absolute; top: 0px; left: 0; width: 80px; height: 100%; z-index: +1; }
.top_title > p img { width: 15px; }
.top_title::before { background: url("/club-me/food/season/img/top/bg_title.jpg") center center/cover no-repeat; content: ""; position: absolute; top: 0px; right: 0px; width: calc(100% - 80px); height: 100%; }
.top_title::after { background-color: #f26179; content: ""; position: absolute; top: 0px; right: 0px; width: 0; height: 100%; }
.top_title .container { display: flex; align-items: center; position: relative; padding-left: 80px; padding-right: 80px; max-width: 1414px; height: 740px; }
.top_title .container > div { min-width: 0%; }
.top_title_heading { font-size: 0; line-height: 0; margin-left: 30px; }
.top_title_heading img { width: 666px; max-width: 100%; }
.top_title_lead { color: #ffffff; font-family: 'Noto Serif JP',sans-serif; line-height: 1.9375; font-weight: 500; text-shadow: 0 0 15px #000000, 0 0 15px #000000, 0 0 15px #000000; margin: 20px 0 0 110px; }
.top_title_scroll { font-size: 0; line-height: 0; overflow: hidden; position: absolute; bottom: -40px; left: 130px; padding-bottom: 90px; }
.top_title_scroll span { display: block; overflow: hidden; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 40px; }
.top_title_scroll span:nth-of-type(1) { bottom: 40px; }
.top_title_scroll span:nth-of-type(1)::after { background-color: #ffffff; content: ""; position: absolute; bottom: 40px; left: 0px; width: 1px; height: 80px; }
.top_title_scroll span:nth-of-type(2)::after { background-color: #222222; content: ""; position: absolute; bottom: 80px; left: 0px; width: 1px; height: 80px; }

/* animation */
.top_title.is-active::after { animation: imgInRight 0.8s cubic-bezier(.15,.85,.47,1.01) forwards; }
.top_title::before { opacity: 0; }
.top_title.is-active::before { animation: imgInRightImg 0.8s cubic-bezier(.15,.85,.47,1.01) forwards; }
.top_title > p img { transition: opacity 1s ease-out; opacity: 0; }
.top_title.is-active > p img { opacity: 1; }
.top_title_heading { transition: opacity 1s 1s ease-out; opacity: 0; }
.top_title.is-active .top_title_heading { opacity: 1; }
.top_title_lead { transition: opacity 1s 1s ease-out; opacity: 0; }
.top_title.is-active .top_title_lead { opacity: 1; }
.top_title_scroll { transition: opacity 1s 2s ease-out; opacity: 0; }
.top_title.is-active .top_title_scroll { opacity: 1; }
.top_title_scroll span:nth-of-type(1)::after { animation: scrollWhite 2s cubic-bezier(.65,.01,.31,.99) infinite; }
.top_title_scroll span:nth-of-type(2)::after { animation: scrollBlack 2s cubic-bezier(.65,.01,.31,.99) infinite; }
@media only screen and (max-width: 767px) {
.top_title { height: 350px; }
.top_title > p { width: 25px; }
.top_title > p img { width: 10px; }
.top_title::before { width: calc(100% - 25px); }
.top_title .container { padding-left: 25px; padding-right: 15px; max-width: none; height: 350px; }
.top_title_heading { font-size: 0; line-height: 0; margin-left: 5px; }
.top_title_heading img { width: 332px; max-width: 100%; }
.top_title_lead { font-size: 85.7142%; text-shadow: 0 0 10px #000000, 0 0 10px #000000, 0 0 10px #000000; margin: 15px 0 0 40px; }
.top_title_scroll { bottom: -20px; left: 40px; padding-bottom: 45px; }
.top_title_scroll img { width: 7px; }
.top_title_scroll span { height: 20px; }
.top_title_scroll span:nth-of-type(1) { bottom: 20px; }
.top_title_scroll span:nth-of-type(1)::after { bottom: 20px; height: 40px; }
.top_title_scroll span:nth-of-type(2)::after { bottom: 40px; height: 40px; }
}
@keyframes scrollWhite {
	0% { bottom: 100%; }
	50% { bottom: -300%; }
	100% { bottom: -300%; }
}
@keyframes scrollBlack {
	0% { bottom: 200%; }
	50% { bottom: -200%; }
	100% { bottom: -200%; }
}


/* -------------------------------------------
	top_links
---------------------------------------------- */
.top_links { overflow: hidden; position: relative; margin-bottom: -40px; padding: 110px 0 175px 0; }
.top_links .container { padding-left: 80px; padding-right: 80px; max-width: 1414px; }
.top_links_inner { position: relative; margin: 0 auto; max-width: 1320px; }
.top_links_column { display: flex; align-items: flex-start; flex-wrap: wrap; }
.top_links_column > a { color: #222222; display: block; position: relative; margin-right: 6%; width: 20.5%; }
.top_links_column > a:hover { text-decoration: none; }
.top_links_column > a::before { border-radius: 50%; background-color: #4c4a42; content: ""; position: absolute; bottom: 0px; right: 0px; margin-bottom: 1.5%; width: 14.76%; padding-bottom: 14.76%; }
.top_links_column > a::after { background: url("/club-me/food/season/img/common/arw_link.svg") center center/cover no-repeat; content: ""; position: absolute; bottom: 0px; right: 0px; margin: 0 4.097% 7.38% 0; width: 6.642%; padding-bottom: 2.952%; }
.top_links_column > a figure { font-size: 0; line-height: 0; }
.top_links_column > a figure img { width: 100% }
.top_links_column > a p { display: inline-block; font-family: 'Noto Serif JP',sans-serif; font-size: 2.5675vw; font-weight: 500; line-height: 1; vertical-align: bottom; position: relative; margin: -8% 0 0 7%; }
.top_links_column > a p::before { background-color: #222222; content: ""; position: absolute; left: 65%; top: 0%; transform-origin: top right; transform: rotate(45deg); width: 1px; padding-bottom: 100%; }
.top_links_column > a p span { display: block; vertical-align: bottom; }
.top_links_column > a p span:nth-of-type(2) { text-align: right; margin-left: 1.2em; }
.top_links_column > a p span small { font-size: 47.3684%; }

/* animation */
.top_links_bg { transition: opacity 0.75s ease-out; opacity: 0; }
.top_links_bg.is-active { opacity: 1; }
.top_links_column > a::before { transition: transform 0.3s ease-out, opacity 0.5s 0.5s ease-out; opacity: 0; }
.top_links_column > a.is-active::before { opacity: 1; }
.top_links_column > a::after { transition: transform 0.25s 0.75s ease-out, opacity 0.25s 0.75s ease-out; transform: translateX(-10px); opacity: 0; }
.top_links_column > a.is-active::after { transform: translateX(0); opacity: 1; }
.top_links_column > a p::before { transition: padding-bottom 0.25s 0.5s ease-out; padding-bottom: 0%; }
.top_links_column > a.is-active p::before { padding-bottom: 100%; }
.top_links_column > a p span:nth-of-type(1) { transition: opacity 0.5s 0.65s ease-out; opacity: 0; }
.top_links_column > a.is-active p span:nth-of-type(1) { transform: translateX(0); opacity: 1; }
.top_links_column > a p span:nth-of-type(2) { transition: opacity 0.5s 0.65s ease-out; opacity: 0; }
.top_links_column > a.is-active p span:nth-of-type(2) { transform: translateX(0); opacity: 1; }
@media only screen and (min-width: 768px) {
.top_links_column > a:hover::before { transform: scale(1.6); }
}
@media (min-width: 768px) {
.top_links_column > a:nth-of-type(4n) { margin-right: 0; }
.top_links_column > a:nth-of-type(4n+1) { margin-top: 8.2817%; }
.top_links_column > a:nth-of-type(4n+3) { margin-top: 14.2414%; }
.top_links_column > a:nth-of-type(4n+4) { margin-top: 3.8699%; }
.top_links_column > a:nth-of-type(4n+5) { margin-top: 4.2817%; }
.top_links_column > a:nth-of-type(4n+6) { margin-top: -4%; }
.top_links_column > a:nth-of-type(4n+7) { margin-top: 10.2414%; }
.top_links_column > a:nth-of-type(4n+8) { margin-top: -0.134%; }
}
@media (min-width: 1480px) {
.top_links_column > a p { font-size: 237.5%; }
}
@media only screen and (max-width: 767px) {
.top_links { overflow: hidden; position: relative; margin-bottom: -40px; padding: 9.3333% 0 50px 0; }
.top_links .container { padding-left: 35px; padding-right: 35px; max-width: none; }
.top_links_inner { margin: 0; max-width: none; }
.top_links_column > a { margin-right: 11.1476%; width: 44.4262%; }
.top_links_column > a:nth-of-type(even) { margin-right: 0; }
.top_links_column > a:nth-of-type(1),
.top_links_column > a:nth-of-type(2n+3) { margin-top: 11.4754%; }
.top_links_column > a:nth-of-type(2n+4) { margin-top: 0; }
.top_links_column > a p { font-size: 5.0666vw; }
}

/* -------------------------------------------
	top_illust
---------------------------------------------- */
.top_illust { position: absolute; top: 0px; left: 0px; width: 100%; }
.top_illust.illust-01 { margin-top: calc(((35 / 1320) * -100%) + 15px); }
.top_illust.illust-01 img { margin-left: calc((10 / 1320) * -100%); width: calc((123 / 1320) * 100%); }
.top_illust.illust-02 { margin-top: calc(((50 / 1320) * 100%) + 15px); }
.top_illust.illust-02 img { margin-left: calc((742 / 1320) * 100%); width: calc((124 / 1320) * 100%); }
.top_illust.illust-03 { margin-top: calc(((50 / 1320) * -100%) + 15px); }
.top_illust.illust-03 img { margin-left: calc((1347 / 1320) * 100%); width: calc((52 / 1320) * 100%); }
.top_illust.illust-04 { margin-top: calc(((540 / 1320) * 100%) + 15px); }
.top_illust.illust-04 img { margin-left: calc((40 / 1320) * -100%); width: calc((58 / 1320) * 100%); }
.top_illust.illust-05 { margin-top: calc(((420 / 1320) * 100%) + 15px); }
.top_illust.illust-05 img { margin-left: calc((438 / 1320) * 100%); width: calc((151 / 1320) * 100%); }
.top_illust.illust-06 { margin-top: calc(((490 / 1320) * 100%) + 15px); }
.top_illust.illust-06 img { margin-left: calc((996 / 1320) * 100%); width: calc((82 / 1320) * 100%); }
.top_illust.illust-07 { margin-top: calc(((520 / 1320) * 100%) + 15px); }
.top_illust.illust-07 img { margin-left: calc((1336 / 1320) * 100%); width: calc((61 / 1320) * 100%); }
.top_illust.illust-08 { margin-top: calc(((1070 / 1320) * 100%) + 15px); }
.top_illust.illust-08 img { margin-left: calc((42 / 1320) * -100%); width: calc((152 / 1320) * 100%); }
.top_illust.illust-09 { margin-top: calc(((1140 / 1320) * 100%) + 15px); }
.top_illust.illust-09 img { margin-left: calc((730 / 1320) * 100%); width: calc((78 / 1320) * 100%); }
@media only screen and (max-width: 767px) {
.top_illust { display: none; }
}