@charset "UTF-8";

/* -------------------------------------------
	top_title
---------------------------------------------- */
.top_title { position: relative; height: 740px; }
.top_title .container { position: relative; padding-left: 80px; padding-right: 80px; max-width: 1414px; }
.top_title_main > img { position: relative; display: none; }
.top_title_main::before { background: url("/club-me/food/oyatsu_otsumami/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_main .container { display: flex; align-items: center; justify-content: center; text-align: center; height: 740px; }
.top_title_heading { font-size: 0; line-height: 0; }
.top_title_heading img { width: 568px; max-width: 100%; }
.top_title_lead { color: #ffffff; font-family: 'Noto Serif JP',sans-serif; font-size: calc((18 / 16) * 100%); line-height: calc(30 / 18); font-weight: 400; text-shadow: 0 0 15px #000000, 0 0 15px #000000, 0 0 15px #000000; margin-top: -35px; }
.top_title_recope { 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_recope img { width: 15px; }
.top_title_scroll { font-size: 0; line-height: 0; overflow: hidden; position: absolute; bottom: -40px; left: 50px; width: 100%; }
.top_title_scroll-text { position: relative; padding-bottom: 90px; }
.top_title_scroll-text span { display: block; overflow: hidden; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 40px; }
.top_title_scroll-text span:nth-of-type(1) { bottom: 40px; }
.top_title_scroll-text span:nth-of-type(1)::after { background-color: #ffffff; content: ""; position: absolute; bottom: 40px; left: 0px; width: 1px; height: 80px; }
.top_title_scroll-text span:nth-of-type(2)::after { background-color: #222222; content: ""; position: absolute; bottom: 80px; left: 0px; width: 1px; height: 80px; }

/* animation */
.top_title_main {-webkit-mask-image: url(/club-me/food/oyatsu_otsumami/img/common/mask.svg);-webkit-mask-mode: alpha;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center center;-webkit-mask-size: 0%;}
.top_title.is-active .top_title_main{animation: maskzoom 0.8s cubic-bezier(.63,.02,.87,.44) forwards;}
.top_title_heading { transition: opacity 1.5s 0.7s ease-out; opacity: 0; }
.top_title.is-active .top_title_heading { opacity: 1; }
.top_title_lead { transition: opacity 1.5s 0.7s ease-out; opacity: 0; }
.top_title.is-active .top_title_lead { opacity: 1; }
.top_title_recope img { transition: opacity 1s 1.5s ease-out; opacity: 0; }
.top_title.is-active .top_title_recope img { opacity: 1; }
.top_title_scroll { transition: opacity 1s 1.5s ease-out; opacity: 0; }
.top_title.is-active .top_title_scroll { opacity: 1; }
.top_title_scroll-text span:nth-of-type(1)::after { animation: scrollWhite 2s cubic-bezier(.65,.01,.31,.99) infinite; }
.top_title_scroll-text 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 .container { padding-left: 25px; padding-right: 0; }
.top_title_main > img { position: relative; display: none; }
.top_title_main::before { background: url("/club-me/food/oyatsu_otsumami/img/top/bg_title_sp.jpg") center center/cover no-repeat; width: calc(100% - 25px); }
.top_title_main .container { height: 350px; }
.top_title_recope  { width: 25px; }
.top_title_recope  img { width: 10px; }
.top_title_heading img { width: 292px; }
.top_title_lead { font-size: calc((11 / 14) * 100%); line-height: calc(34 / 21); text-shadow: 0 0 10px #000000, 0 0 10px #000000, 0 0 10px #000000; margin: -15px 0 0 0; }
.top_title_scroll { bottom: -20px; left: 15px; }
.top_title_scroll img { width: 7px; }
.top_title_scroll-text { padding-bottom: 45px; }
.top_title_scroll-text span { height: 20px; }
.top_title_scroll-text span:nth-of-type(1) { bottom: 20px; }
.top_title_scroll-text span:nth-of-type(1)::after { bottom: 20px; height: 40px; }
.top_title_scroll-text span:nth-of-type(2)::after { bottom: 40px; height: 40px; }
}
@keyframes maskzoom {
	0% { -webkit-mask-size: 0%; }
	100% { -webkit-mask-size: 200%; }
}
@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; padding: 90px 0 125px 0; }
.top_links .container { padding-left: 80px; padding-right: 80px; max-width: 1414px; }
.top_links_inner { position: relative; }
.top_links_column { display: flex; align-items: flex-start; flex-wrap: wrap; margin: 0 calc((11 / 1414) * -100%); }
.top_links_column > a { color: #222222; display: block; position: relative; margin: 0 calc((11 / 1436) * 100%); width: calc(25% - ((22 / 1436) * 100%)); }
.top_links_column > a:hover { text-decoration: none; }
.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: flex; justify-content: center; font-family: 'Noto Serif JP',sans-serif; font-size: calc((38 / 1480) * 100vw); font-weight: 500; letter-spacing: 0.1em; line-height: 1; vertical-align: bottom; position: relative; margin-top: calc((15 / 1480) * 100vw); }
.top_links_column > a p span { display: block; position: relative; padding-right: calc((60 / 1480) * 100vw); }
.top_links_column > a p span::before { border-radius: 50%; background-color: #4c4a42; content: ""; position: absolute; bottom: calc(50% - ((20 / 1480) * 100vw)); right: 0px; width: calc((40 / 1480) * 100vw); padding-bottom: calc((40 / 1480) * 100vw); }
.top_links_column > a p span::after { background: url("/club-me/food/oyatsu_otsumami/img/common/arw_link.svg") center center/cover no-repeat; content: ""; position: absolute; bottom: calc(50% - ((4 / 1480) * 100vw)); right: calc((12 / 1480) * 100vw); width: calc((16 / 1480) * 100vw); padding-bottom: calc((7 / 1480) * 100vw); }
.top_links_column > a p span small { font-size: calc((18 / 38) * 100%); letter-spacing: .05em; }
@media only screen and (min-width: 768px) {
.top_links_column > a p span::before { transition: transform 0.3s ease-out; }
.top_links_column > a:hover p span::before { transform: scale(1.6); }
}
@media (min-width: 768px) {
.top_links_column > a:nth-of-type(even) { margin-top: calc((35 / 1436) * -100%); }
.top_links_column > a:nth-of-type(odd) { margin-top: calc((101 / 1436) * 100%); }
.top_links_column > a:nth-of-type(1),
.top_links_column > a:nth-of-type(3) { margin-top: calc((136 / 1436) * 100%); }
.top_links_column > a:nth-of-type(2),
.top_links_column > a:nth-of-type(4) { margin-top: 0; }
}
@media (min-width: 1480px) {
.top_links_column > a p { font-size: calc((38 / 16) * 100%); margin-top: 15px; }
.top_links_column > a p span { padding-right: 60px; }
.top_links_column > a p span::before { bottom: calc(50% - 20px); width: 40px; padding-bottom: 40px; }
.top_links_column > a p span::after { bottom: calc(50% - 4px); right: 12px; width: 16px; padding-bottom: 7px; }
}
@media only screen and (max-width: 767px) {
.top_links { padding: 25px 0 50px 0; }
.top_links .container { padding-left: 15px; padding-right: 15px; max-width: none; }
.top_links_column > a { margin: 0 calc((10 / 750) * 100%); width: calc(50% - ((20 / 750) * 100%)); }
.top_links_column > a p { font-size: calc((38 / 750) * 100vw); margin-top: calc((10 / 750) * 100vw); }
.top_links_column > a p span { padding-right: calc((60 / 750) * 100vw); }
.top_links_column > a p span::before { bottom: calc(50% - ((20 / 750) * 100vw)); width: calc((40 / 750) * 100vw); padding-bottom: calc((40 / 750) * 100vw); }
.top_links_column > a p span::after { bottom: calc(50% - ((4 / 750) * 100vw)); right: calc((12 / 750) * 100vw); width: calc((16 / 750) * 100vw); padding-bottom: calc((7 / 750) * 100vw); }
.top_links_column > a:nth-of-type(even) { margin-top: calc((35 / 750) * -100vw); }
.top_links_column > a:nth-of-type(odd) { margin-top: calc((45 / 750) * 100vw); }
.top_links_column > a:nth-of-type(1) { margin-top: calc((80 / 750) * 100vw); }
.top_links_column > a:nth-of-type(2) { margin-top: 0; }
}

/* -------------------------------------------
	top_illust
---------------------------------------------- */
.top_illust { position: absolute; top: 0px; left: 0px; width: 100%; }
.top_illust.illust-01 { margin-top: calc(((10 / 1414) * 100%) + 15px); }
.top_illust.illust-01 img { margin-left: calc((40 / 1414) * 100%); width: calc((123 / 1414) * 100%); }
.top_illust.illust-02 { margin-top: calc(((10 / 1414) * -100%) + 15px); }
.top_illust.illust-02 img { margin-left: calc((822 / 1414) * 100%); width: calc((124 / 1414) * 100%); }
.top_illust.illust-03 { margin-top: calc(((50 / 1414) * -100%) + 15px); }
.top_illust.illust-03 img { margin-left: calc((1400 / 1414) * 100%); width: calc((52 / 1414) * 100%); }
.top_illust.illust-04 { margin-top: calc(((460 / 1414) * 100%) + 15px); }
.top_illust.illust-04 img { margin-left: calc((30 / 1414) * -100%); width: calc((58 / 1414) * 100%); }
.top_illust.illust-05 { margin-top: calc(((320 / 1414) * 100%) + 15px); }
.top_illust.illust-05 img { margin-left: calc((540 / 1414) * 100%); width: calc((151 / 1414) * 100%); }
.top_illust.illust-06 { margin-top: calc(((470 / 1414) * 100%) + 15px); }
.top_illust.illust-06 img { margin-left: calc((976 / 1414) * 100%); width: calc((82 / 1414) * 100%); }
.top_illust.illust-07 { margin-top: calc(((620 / 1414) * 100%) + 15px); }
.top_illust.illust-07 img { margin-left: calc((1380 / 1414) * 100%); width: calc((61 / 1414) * 100%); }
.top_illust.illust-08 { margin-top: calc(((1170 / 1414) * 100%) + 15px); }
.top_illust.illust-08 img { margin-left: calc((72 / 1414) * -100%); width: calc((152 / 1414) * 100%); }
.top_illust.illust-09 { margin-top: calc(((1110 / 1414) * 100%) + 15px); }
.top_illust.illust-09 img { margin-left: calc((650 / 1414) * 100%); width: calc((78 / 1414) * 100%); }
@media only screen and (max-width: 767px) {
.top_illust { display: none; }
}