@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
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, small, strong, 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, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }

ul, ol { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

del { text-decoration: line-through; }

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

hr { display: block; height: 1px; border: 0; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

* { box-sizing: border-box; }

:root { --campus-sp-size: 750; --campus-pc-size: 1920; --sp-size: 100vw; --pc-size: 500px; }

* { box-sizing: border-box; }

html { font-size: 62.5%; }

body { width: 100vw; font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, sans-serif; font-weight: 400; line-height: 1.2; word-wrap: break-word; letter-spacing: .04em; overflow-x: hidden; }
@media screen and (max-width: 767px) { body { font-size: calc(26 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { body { font-size: calc(26 / var(--campus-sp-size) * var(--pc-size)); } }

.header, .main { color: #41268b; }
.header a, .main a { color: #b79e66; text-decoration: none; }
.header img, .main img { max-width: 100%; height: auto; vertical-align: bottom; user-drag: none; -webkit-user-drag: none; -moz-user-select: none; }

a { color: #333; text-decoration: none; display: inline-block; }

ul, li { list-style: none; }

img { pointer-events: none; height: auto; }

sup { vertical-align: text-top; font-size: unset; }

sub { vertical-align: sub; font-size: smaller; }

.colorViolet { color: #441e62; }

.colorRich { color: #101010; }

.colorBrown { color: #553b27; }

.pc { display: none; }

.desktop { display: none; }

@media screen and (min-width: 768px) { .pc { display: inline-block; }
  .sp { display: none; } }
@media screen and (min-width: 1501px) { .desktop { display: inline-block; } }
.ep-header-container, .header-container { display: none; }

.button { position: relative; }
@media screen and (max-width: 767px) { .button:not(:last-of-type) { margin-bottom: calc(15 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .button:not(:last-of-type) { margin-bottom: calc(15 / var(--campus-sp-size) * var(--pc-size)); } }
.button::before { content: ""; display: block; background: url(../img/button_arrow.png) 0 0/contain no-repeat; position: absolute; }
@media screen and (max-width: 767px) { .button::before { width: calc(37 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .button::before { width: calc(37 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .button::before { height: calc(9 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .button::before { height: calc(9 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .button::before { bottom: calc(54 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .button::before { bottom: calc(54 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .button::before { right: calc(44 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .button::before { right: calc(44 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .button img { width: calc(530 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .button img { width: calc(530 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .button-wrapper { margin-top: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .button-wrapper { margin-top: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (max-width: 767px) { .button.favorite { margin-right: auto; } }
@media screen and (max-width: 767px) and (max-width: 767px) { .button.favorite { margin-left: calc(20 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (max-width: 767px) and (min-width: 768px) { .button.favorite { margin-left: calc(20 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .button.favorite::before { display: none; } }
@media screen and (max-width: 767px) and (max-width: 767px) { .button.favorite img { width: calc(246 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (max-width: 767px) and (min-width: 768px) { .button.favorite img { width: calc(246 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .button::before { transition: transform .3s; }
  .button:not([tabindex="-1"]):hover::before { transform: translateX(6px); } }
@media screen and (min-width: 768px) and (max-width: 767px) { .button.favorite img { width: calc(185 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) and (min-width: 768px) { .button.favorite img { width: calc(185 / var(--campus-sp-size) * var(--pc-size)); } }

.ep-layout-sp { display: block; visibility: visible; }
.ep-layout-sp .main { width: 100%; box-shadow: none; }

/*--------------------------------------------------------------------------------------- fadeIn
----------------------------------------------------------------------------------------*/
.fade-in { opacity: 0; transition: opacity .7s ease-out, transform .7s ease-out; }
.fade-in.fade-in-top { transform: translate(0, -30px); }
.fade-in.fade-in-right { transform: translate(50px, 0); }
.fade-in.fade-in-bottom { transform: translate(0, 50px); }
.fade-in.fade-in-left { transform: translate(-30px, 0); }
.fade-in.fade-in-scale { transform: scale(0.995); }
.fade-in.fade-in-active { opacity: 1; transform: translate(0, 0) scale(1); }
.fade-in.duration2s { transition-duration: 2s; }
.fade-in.delay5ms { transition-delay: .5s; }
.fade-in.delay7ms { transition-delay: .7s; }
.fade-in.delay1s { transition-delay: 1s; }

@media screen and (max-width: 767px) { .fade-in.fade-in-top { transform: translate(0, calc(-60 / 750 * 100vw)); }
  .fade-in.fade-in-right { transform: translate(var(--transform-x), 0); } }
@media screen and (max-width: 767px) and (max-width: 767px) { .fade-in.fade-in-right { transform-x: calc(60 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (max-width: 767px) and (min-width: 768px) { .fade-in.fade-in-right { transform-x: calc(60 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .fade-in.fade-in-bottom { transform: translate(0, var(--transform-y)); } }
@media screen and (max-width: 767px) and (max-width: 767px) { .fade-in.fade-in-bottom { transform-y: calc(60 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (max-width: 767px) and (min-width: 768px) { .fade-in.fade-in-bottom { transform-y: calc(60 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .fade-in.fade-in-left { transform: translate(calc(-60 / 750 * 100vw), 0); }
  .fade-in.fade-in-active { opacity: 1; transform: translate(0, 0) scale(1); } }
/*--------------------------------------------------------------------------------------- header
----------------------------------------------------------------------------------------*/
.header { position: fixed; top: 0; left: 0; z-index: 9999; }
@media screen and (max-width: 767px) { .header { padding-top: calc(45 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .header { padding-top: calc(45 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .header { padding-left: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .header { padding-left: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (max-width: 767px) and (max-width: 767px) { .header-logo img { width: calc(234 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (max-width: 767px) and (min-width: 768px) { .header-logo img { width: calc(234 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .header { padding-top: 40px; padding-left: 40px; }
  .header-logo img { width: 158px; } }
/*--------------------------------------------------------------------------------------- bg-fixed
----------------------------------------------------------------------------------------*/
.bg-fixed { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.bg-fixed img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bg-fixed.fixed2 { opacity: 0; transition: opacity .5s ease-out; }
.bg-fixed.fixed2.is-fade-in { opacity: 1; }

@media screen and (max-width: 767px) { .bg-fixed { display: flex; justify-content: flex-end; }
  .bg-fixed img { object-position: right; } }
/*--------------------------------------------------------------------------------------- fixed
----------------------------------------------------------------------------------------*/
.fixed { position: fixed; z-index: 999; }
@media screen and (max-width: 767px) { .fixed-button:not(:last-of-type) { margin-right: calc(10 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .fixed-button:not(:last-of-type) { margin-right: calc(10 / var(--campus-sp-size) * var(--pc-size)); } }
.fixed-button-wrapper { width: 100%; display: flex; justify-content: center; align-items: flex-start; left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; }
@media screen and (max-width: 767px) { .fixed-button-wrapper { bottom: calc(20 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .fixed-button-wrapper { bottom: calc(20 / var(--campus-sp-size) * var(--pc-size)); } }
.fixed-button-wrapper.is-show { opacity: 1; visibility: visible; }
@media screen and (max-width: 767px) { .fixed-button img { width: calc(360 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .fixed-button img { width: calc(360 / var(--campus-sp-size) * var(--pc-size)); } }
.fixed-date.is-hide { display: none; }

@media screen and (max-width: 767px) { .fixed-date { bottom: 0; right: calc(-10 / var(--campus-sp-size) * var(--sp-size)); }
  .fixed-date img { width: calc(299 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (max-width: 767px) and (max-width: 767px) { .fixed img { width: calc(360 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (max-width: 767px) and (min-width: 768px) { .fixed img { width: calc(360 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .fixed-button::before { transition: transform .3s; }
  .fixed-button:not([tabindex="-1"]):hover::before { transform: translateX(10px); }
  .fixed-button-wrapper.windows { left: calc(50% - 235px); transform: translateX(0); }
  .fixed-button-wrapper.sp { display: none; } }
/*--------------------------------------------------------------------------------------- wrapper / columns
----------------------------------------------------------------------------------------*/
.wrapper { position: sticky; top: 0; left: 0; z-index: 999; }

.columns { width: 100vw; display: flex; justify-content: space-between; position: relative; }

/*--------------------------------------------------------------------------------------- main
----------------------------------------------------------------------------------------*/
.main { width: 100vw; display: block; text-align: center; position: relative; z-index: 10; }

@media screen and (max-width: 767px) { .main { height: 100%; overflow: hidden; } }
@media screen and (min-width: 768px) { .main { margin-left: auto; width: var(--pc-size); } }
/*--------------------------------------------------------------------------------------- side
----------------------------------------------------------------------------------------*/
.side-column { width: min(100%, calc((100vw - var(--pc-size)))); height: 100vh; display: none; flex-direction: column; justify-content: flex-start; align-items: center; position: sticky; top: 0; z-index: 99; }
.side-column.left { left: 0; }

@media screen and (min-width: 1080px) { .side-column { display: flex; }
  .side-item { text-align: center; bottom: 25px; left: 10px; position: absolute; z-index: 10; }
  .side-item .fixed { position: relative; top: 0; left: 0; }
  .side-image img { width: 261px; }
  .side-button-wrapper { margin: -50px auto 0; max-width: 210px; }
  .side-button-wrapper .button:not(:last-of-type) { margin-bottom: 2px; }
  .side-button-wrapper .button::before { width: 16px; height: 5px; bottom: 25px; right: 20px; }
  .side-button-wrapper .button.favorite::before { width: 18px; height: 17px; background: url(../img/button_icon_heart.png) 0 0/contain no-repeat; bottom: 23px; right: 20px; }
  .side-button-wrapper .button.favorite:hover::before { transform: translateX(0) scale(1.2); }
  .side-button-wrapper .button img { width: 210px; } }
/*--------------------------------------------------------------------------------------- kv
----------------------------------------------------------------------------------------*/
.kv { width: 100%; position: relative; }
.kv-title { position: fixed; opacity: 0; transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); transform: translateY(20px); }
.kv-title.is-visible { animation: kv-slide-up 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }
.kv-title.is-hiding { animation: kv-slide-down 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }
@media screen and (max-width: 767px) { .kv-title img { width: calc(677 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .kv-title img { width: calc(677 / var(--campus-sp-size) * var(--pc-size)); } }
.kv-image img { width: 100%; }

@media screen and (max-width: 767px) { .kv-title { position: absolute; width: 100%; left: 50%; transform: translateX(-50%) translateY(1px); } }
@media screen and (max-width: 767px) and (max-width: 767px) { .kv-title { top: calc(545 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (max-width: 767px) and (min-width: 768px) { .kv-title { top: calc(545 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .kv-title.is-visible { animation: kv-slide-up-sp 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }
  .kv-title.is-hiding { animation: kv-slide-down-sp 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } }
@media screen and (min-width: 768px) { .kv-title { top: 100px; right: 50px; animation-delay: .5s; }
  .kv-title img { max-width: calc(753 / 1920 * 100vw); width: 620px; } }
/*--------------------------------------------------------------------------------------- product
----------------------------------------------------------------------------------------*/
.product { position: relative; z-index: 20; background: url(../img/product_bg.png) 0 0/100% no-repeat; }
@media screen and (max-width: 767px) { .product { padding: calc(70 / var(--campus-sp-size) * var(--sp-size)) 0 calc(80 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product { padding: calc(70 / var(--campus-sp-size) * var(--pc-size)) 0 calc(80 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product { height: calc(2776 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product { height: calc(2776 / var(--campus-sp-size) * var(--pc-size)); } }
.product-title { position: relative; }
@media screen and (max-width: 767px) { .product-title { margin-bottom: calc(780 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-title { margin-bottom: calc(780 / var(--campus-sp-size) * var(--pc-size)); } }
.product-title::before { content: ""; display: block; background: url(../img/product_title_before.png) 0 0/contain no-repeat; position: absolute; }
@media screen and (max-width: 767px) { .product-title::before { width: calc(220 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-title::before { width: calc(220 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-title::before { height: calc(224 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-title::before { height: calc(224 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-title::before { top: calc(120 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-title::before { top: calc(120 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-title::before { left: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-title::before { left: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-title img { width: calc(361 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-title img { width: calc(361 / var(--campus-sp-size) * var(--pc-size)); } }
.product-catch { position: relative; }
@media screen and (max-width: 767px) { .product-catch { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-catch { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-catch { padding-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-catch { padding-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
.product-catch::before { content: ""; display: block; background: url(../img/product_catch_before.png) 0 0/contain no-repeat; position: absolute; z-index: -1; }
@media screen and (max-width: 767px) { .product-catch::before { width: calc(145 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-catch::before { width: calc(145 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-catch::before { height: calc(173 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-catch::before { height: calc(173 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-catch::before { left: calc(20 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-catch::before { left: calc(20 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-catch::before { bottom: calc(-50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-catch::before { bottom: calc(-50 / var(--campus-sp-size) * var(--pc-size)); } }
.product-catch::after { content: ""; display: block; background: url(../img/product_catch_line.png) 0 0/contain no-repeat; position: absolute; left: 50%; transform: translateX(-50%); z-index: -1; }
@media screen and (max-width: 767px) { .product-catch::after { width: calc(448 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-catch::after { width: calc(448 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-catch::after { height: calc(14 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-catch::after { height: calc(14 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-catch::after { bottom: 0; } }
@media screen and (min-width: 768px) { .product-catch::after { bottom: 0; } }
@media screen and (max-width: 767px) { .product-catch img { width: calc(594 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-catch img { width: calc(594 / var(--campus-sp-size) * var(--pc-size)); } }
.product-text { color: #41268b; line-height: 2; }
@media screen and (max-width: 767px) { .product-text { margin-bottom: calc(28 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-text { margin-bottom: calc(28 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-text { font-size: calc(26 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-text { font-size: calc(26 / var(--campus-sp-size) * var(--pc-size)); } }
.product-item { position: relative; z-index: 10; }
.product-item::before { content: ""; display: block; background: url(../img/product_item_before.png) 0 0/contain no-repeat; position: absolute; z-index: -1; }
@media screen and (max-width: 767px) { .product-item::before { width: calc(101 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-item::before { width: calc(101 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-item::before { height: calc(262 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-item::before { height: calc(262 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-item::before { top: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-item::before { top: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-item::before { left: calc(20 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-item::before { left: calc(20 / var(--campus-sp-size) * var(--pc-size)); } }
.product-item::after { content: ""; display: block; background: url(../img/product_item_after.png) 0 0/contain no-repeat; position: absolute; z-index: -1; }
@media screen and (max-width: 767px) { .product-item::after { width: calc(146 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-item::after { width: calc(146 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-item::after { height: calc(429 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-item::after { height: calc(429 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-item::after { top: calc(-285 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-item::after { top: calc(-285 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-item::after { right: calc(10 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-item::after { right: calc(10 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-item-title { margin-bottom: calc(46 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-item-title { margin-bottom: calc(46 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-item-title img { width: calc(581 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-item-title img { width: calc(581 / var(--campus-sp-size) * var(--pc-size)); } }
.product-item-image-wrapper { position: relative; z-index: 10; }
.product-item-image-wrapper::before { content: ""; display: block; background: url(../img/product_item_image_before.png) 0 0/contain no-repeat; position: absolute; z-index: -10; left: 50%; transform: translateX(-50%); }
@media screen and (max-width: 767px) { .product-item-image-wrapper::before { width: calc(647 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-item-image-wrapper::before { width: calc(647 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-item-image-wrapper::before { height: calc(621 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-item-image-wrapper::before { height: calc(621 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-item-image-wrapper::before { top: calc(-25 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-item-image-wrapper::before { top: calc(-25 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-item-image-wrapper img { width: calc(232 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-item-image-wrapper img { width: calc(232 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (max-width: 767px) and (max-width: 767px) { .product { margin-top: calc(-180 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (max-width: 767px) and (min-width: 768px) { .product { margin-top: calc(-180 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .product { margin-top: 115vh; } }
/*--------------------------------------------------------------------------------------- curler
----------------------------------------------------------------------------------------*/
.curler { position: relative; z-index: 1; }
.curler-container { margin: 0 auto; background: url(../img/curler_container_bg.png) 0 0/cover no-repeat; }
@media screen and (max-width: 767px) { .curler-container { padding: calc(65 / var(--campus-sp-size) * var(--sp-size)) 0; } }
@media screen and (min-width: 768px) { .curler-container { padding: calc(65 / var(--campus-sp-size) * var(--pc-size)) 0; } }
@media screen and (max-width: 767px) { .curler-container { width: calc(694 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-container { width: calc(694 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .curler-container { height: calc(1600 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-container { height: calc(1600 / var(--campus-sp-size) * var(--pc-size)); } }
.curler-title { text-align: center; }
@media screen and (max-width: 767px) { .curler-title { margin-bottom: calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-title { margin-bottom: calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .curler-title img { width: calc(533 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-title img { width: calc(533 / var(--campus-sp-size) * var(--pc-size)); } }
.curler-item-image-wrapper { position: relative; z-index: 10; }
.curler-item-image-wrapper::before { content: ""; display: block; background: url(../img/curler_item_image_before.png) 0 0/contain no-repeat; position: absolute; z-index: -1; }
@media screen and (max-width: 767px) { .curler-item-image-wrapper::before { width: calc(264 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-item-image-wrapper::before { width: calc(264 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .curler-item-image-wrapper::before { height: calc(267 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-item-image-wrapper::before { height: calc(267 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .curler-item-image-wrapper::before { top: calc(250 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-item-image-wrapper::before { top: calc(250 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .curler-item-image-wrapper::before { left: calc(-15 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-item-image-wrapper::before { left: calc(-15 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .curler-item-image-wrapper img { width: calc(261 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-item-image-wrapper img { width: calc(261 / var(--campus-sp-size) * var(--pc-size)); } }
.curler-name { font-weight: 400; line-height: calc(42 / 26); letter-spacing: .01em; }
@media screen and (max-width: 767px) { .curler-name { margin-bottom: calc(22 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-name { margin-bottom: calc(22 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .curler-name { padding-top: calc(35 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-name { padding-top: calc(35 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .curler-name { font-size: calc(26 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-name { font-size: calc(26 / var(--campus-sp-size) * var(--pc-size)); } }
.curler-price { font-weight: 400; line-height: 1; letter-spacing: .01em; }
@media screen and (max-width: 767px) { .curler-price { margin-bottom: calc(40 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-price { margin-bottom: calc(40 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .curler-price { font-size: calc(28 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-price { font-size: calc(28 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .curler-price small { font-size: calc(18 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-price small { font-size: calc(18 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .curler-calendar { margin-bottom: calc(10 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-calendar { margin-bottom: calc(10 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .curler-calendar img { width: calc(520 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler-calendar img { width: calc(520 / var(--campus-sp-size) * var(--pc-size)); } }
.curler.curler1 { background: url(../img/curler_bg.png) 0 0/100% no-repeat; position: relative; overflow: hidden; }
@media screen and (max-width: 767px) { .curler.curler1 { margin-top: calc(-180 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler.curler1 { margin-top: calc(-180 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .curler.curler1 { padding-top: calc(940 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler.curler1 { padding-top: calc(940 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .curler.curler1 { height: calc(2865 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler.curler1 { height: calc(2865 / var(--campus-sp-size) * var(--pc-size)); } }
.curler.curler1 .circle-mask-overlay-curler1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: #daeaf0; z-index: 1; pointer-events: none; opacity: 1; }
.curler.curler1 .circle-mask-overlay-curler1.is-active { -webkit-mask-image: radial-gradient(circle at center, transparent 0%, transparent 8%, #fff 10%, #fff 100%); mask-image: radial-gradient(circle at center, transparent 0%, transparent 8%, #fff 10%, #fff 100%); -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: circle-reveal-curler1 2s ease forwards; }
.curler.curler1 .curler-wrapper { position: relative; z-index: 2; }
.curler.curler2 { backdrop-filter: blur(10px); z-index: -20; }
@media screen and (max-width: 767px) { .curler.curler2 { margin-top: calc(-180 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler.curler2 { margin-top: calc(-180 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .curler.curler2 { padding: calc(265 / var(--campus-sp-size) * var(--sp-size)) 0 calc(255 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .curler.curler2 { padding: calc(265 / var(--campus-sp-size) * var(--pc-size)) 0 calc(255 / var(--campus-sp-size) * var(--pc-size)); } }

@keyframes circle-reveal-curler1 { 0% { -webkit-mask-size: 100% auto; mask-size: 100% auto; }
  100% { -webkit-mask-size: 5000% auto; mask-size: 5000% auto; } }
/*--------------------------------------------------------------------------------------- bg-area
----------------------------------------------------------------------------------------*/
.bg-area { background: url(../img/bg_area.png) 0 0/cover no-repeat; position: relative; z-index: 20; }
@media screen and (max-width: 767px) { .bg-area { margin-top: calc(-200 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .bg-area { margin-top: calc(-200 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .bg-area { padding: calc(160 / var(--campus-sp-size) * var(--sp-size)) calc(50 / var(--campus-sp-size) * var(--sp-size)) calc(200 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .bg-area { padding: calc(160 / var(--campus-sp-size) * var(--pc-size)) calc(50 / var(--campus-sp-size) * var(--pc-size)) calc(200 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .bg-area { height: calc(3870 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .bg-area { height: calc(3870 / var(--campus-sp-size) * var(--pc-size)); } }

/*--------------------------------------------------------------------------------------- point
----------------------------------------------------------------------------------------*/
.point { position: relative; z-index: 10; background: url(../img/point_bg.png) 0 0/100% no-repeat; }
@media screen and (max-width: 767px) { .point { margin-bottom: calc(80 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point { margin-bottom: calc(80 / var(--campus-sp-size) * var(--pc-size)); } }
.point-container { background-color: #fff; position: relative; }
@media screen and (max-width: 767px) { .point-container { padding: calc(45 / var(--campus-sp-size) * var(--sp-size)) calc(40 / var(--campus-sp-size) * var(--sp-size)) calc(40 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-container { padding: calc(45 / var(--campus-sp-size) * var(--pc-size)) calc(40 / var(--campus-sp-size) * var(--pc-size)) calc(40 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .point-container { border-radius: calc(30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-container { border-radius: calc(30 / var(--campus-sp-size) * var(--pc-size)); } }
.point-container::before { content: ""; display: block; background: url(../img/point_before.png) 0 0/contain no-repeat; position: absolute; }
@media screen and (max-width: 767px) { .point-container::before { width: calc(147 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-container::before { width: calc(147 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .point-container::before { height: calc(136 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-container::before { height: calc(136 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .point-container::before { top: calc(-30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-container::before { top: calc(-30 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .point-container::before { left: calc(-40 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-container::before { left: calc(-40 / var(--campus-sp-size) * var(--pc-size)); } }
.point-title.title1 { position: relative; }
@media screen and (max-width: 767px) { .point-title.title1 { margin-bottom: calc(40 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-title.title1 { margin-bottom: calc(40 / var(--campus-sp-size) * var(--pc-size)); } }
.point-title.title1::before { content: ""; display: block; background: url(../img/point_title_before.png) 0 0/contain no-repeat; position: absolute; z-index: -1; }
@media screen and (max-width: 767px) { .point-title.title1::before { width: calc(700 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-title.title1::before { width: calc(700 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .point-title.title1::before { height: calc(376 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-title.title1::before { height: calc(376 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .point-title.title1::before { top: calc(-30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-title.title1::before { top: calc(-30 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .point-title.title1::before { right: calc(-50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-title.title1::before { right: calc(-50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .point-title.title1 img { width: calc(498 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-title.title1 img { width: calc(498 / var(--campus-sp-size) * var(--pc-size)); } }
.point-title.title2 { background: url(../img/point_title_line.png) left 50% bottom 0/100% no-repeat; }
@media screen and (max-width: 767px) { .point-title.title2 { margin-bottom: calc(28 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-title.title2 { margin-bottom: calc(28 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .point-title.title2 { padding-bottom: calc(34 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-title.title2 { padding-bottom: calc(34 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .point-title.title2 img { width: calc(409 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-title.title2 img { width: calc(409 / var(--campus-sp-size) * var(--pc-size)); } }
.point-text { line-height: calc(36 / 24); letter-spacing: .01em; color: #41268b; text-align: center; font-weight: 400; }
@media screen and (max-width: 767px) { .point-text { margin-bottom: calc(40 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-text { margin-bottom: calc(40 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .point-text { font-size: calc(24 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-text { font-size: calc(24 / var(--campus-sp-size) * var(--pc-size)); } }
.point-image img { position: relative; }
@media screen and (max-width: 767px) { .point-image img { width: calc(537 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-image img { width: calc(537 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .point-image img { right: calc(-5 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .point-image img { right: calc(-5 / var(--campus-sp-size) * var(--pc-size)); } }

/*--------------------------------------------------------------------------------------- howto
----------------------------------------------------------------------------------------*/
.howto { position: relative; z-index: 10; background: url(../img/howto_bg.png) 0 0/100% no-repeat; }
@media screen and (max-width: 767px) { .howto { margin-bottom: calc(80 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto { margin-bottom: calc(80 / var(--campus-sp-size) * var(--pc-size)); } }
.howto-container { background-color: #fff; position: relative; }
@media screen and (max-width: 767px) { .howto-container { padding: calc(60 / var(--campus-sp-size) * var(--sp-size)) calc(10 / var(--campus-sp-size) * var(--sp-size)) calc(10 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-container { padding: calc(60 / var(--campus-sp-size) * var(--pc-size)) calc(10 / var(--campus-sp-size) * var(--pc-size)) calc(10 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .howto-container { border-radius: calc(30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-container { border-radius: calc(30 / var(--campus-sp-size) * var(--pc-size)); } }
.howto-container::before { content: ""; display: block; background: url(../img/howto_before.png) 0 0/contain no-repeat; position: absolute; z-index: 10; }
@media screen and (max-width: 767px) { .howto-container::before { width: calc(224 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-container::before { width: calc(224 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .howto-container::before { height: calc(209 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-container::before { height: calc(209 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .howto-container::before { top: calc(-70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-container::before { top: calc(-70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .howto-container::before { right: calc(-40 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-container::before { right: calc(-40 / var(--campus-sp-size) * var(--pc-size)); } }
.howto-box { position: relative; }
@media screen and (max-width: 767px) { .howto-box { margin-bottom: calc(75 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-box { margin-bottom: calc(75 / var(--campus-sp-size) * var(--pc-size)); } }
.howto-box::before { content: ""; display: block; background: url(../img/howto_arrow.png) 0 0/contain no-repeat; position: absolute; left: 50%; transform: translateX(-50%); }
@media screen and (max-width: 767px) { .howto-box::before { width: calc(78 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-box::before { width: calc(78 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .howto-box::before { height: calc(30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-box::before { height: calc(30 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .howto-box::before { bottom: calc(-50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-box::before { bottom: calc(-50 / var(--campus-sp-size) * var(--pc-size)); } }
.howto-box:nth-of-type(3) { margin-bottom: 0; }
.howto-box:nth-of-type(3)::before { display: none; }
.howto-box:nth-of-type(3) .howto-text { line-height: 2; }
.howto-title { position: relative; }
@media screen and (max-width: 767px) { .howto-title { margin-bottom: calc(40 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-title { margin-bottom: calc(40 / var(--campus-sp-size) * var(--pc-size)); } }
.howto-title::before { content: ""; display: block; background: url(../img/howto_title_before.png) 0 0/contain no-repeat; position: absolute; z-index: -1; }
@media screen and (max-width: 767px) { .howto-title::before { width: calc(738 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-title::before { width: calc(738 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .howto-title::before { height: calc(327 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-title::before { height: calc(327 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .howto-title::before { top: calc(-30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-title::before { top: calc(-30 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .howto-title::before { left: calc(-55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-title::before { left: calc(-55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .howto-title img { width: calc(409 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-title img { width: calc(409 / var(--campus-sp-size) * var(--pc-size)); } }
.howto-text { line-height: 1; letter-spacing: .01em; color: #41268b; text-align: center; font-weight: 400; }
@media screen and (max-width: 767px) { .howto-text { margin-bottom: calc(40 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-text { margin-bottom: calc(40 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .howto-text { font-size: calc(24 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-text { font-size: calc(24 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .howto-image { margin-bottom: calc(15 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-image { margin-bottom: calc(15 / var(--campus-sp-size) * var(--pc-size)); } }
.howto-image img { position: relative; }
@media screen and (max-width: 767px) { .howto-image img { width: calc(537 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-image img { width: calc(537 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .howto-image img { right: calc(-5 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .howto-image img { right: calc(-5 / var(--campus-sp-size) * var(--pc-size)); } }

/*--------------------------------------------------------------------------------------- message
----------------------------------------------------------------------------------------*/
.message { position: relative; background: url(../img/message_bg.png) 0 0/100% no-repeat; }
@media screen and (max-width: 767px) { .message { padding-top: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message { padding-top: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message { height: calc(380 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message { height: calc(380 / var(--campus-sp-size) * var(--pc-size)); } }
.message-title { background: url(../img/message_title_line.png) left 50% bottom 0/100% no-repeat; }
@media screen and (max-width: 767px) { .message-title { margin-bottom: calc(30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-title { margin-bottom: calc(30 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message-title { padding-bottom: calc(34 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-title { padding-bottom: calc(34 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message-title { background-size: calc(528 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-title { background-size: calc(528 / var(--campus-sp-size) * var(--pc-size)); } }
.message-title::before { content: ""; display: block; background: url(../img/message_icon.png) 0 0/contain no-repeat; position: absolute; }
@media screen and (max-width: 767px) { .message-title::before { width: calc(131 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-title::before { width: calc(131 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message-title::before { height: calc(141 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-title::before { height: calc(141 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message-title::before { top: calc(20 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-title::before { top: calc(20 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message-title::before { right: calc(30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-title::before { right: calc(30 / var(--campus-sp-size) * var(--pc-size)); } }
.message-title img { position: relative; }
@media screen and (max-width: 767px) { .message-title img { width: calc(338 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-title img { width: calc(338 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message-title img { left: calc(-35 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-title img { left: calc(-35 / var(--campus-sp-size) * var(--pc-size)); } }
.message-text { line-height: 2; letter-spacing: .01em; color: #41268b; text-align: center; }
.message-text strong { font-weight: 400; color: #e1519e; }

/*--------------------------------------------------------------------------------------- movie
----------------------------------------------------------------------------------------*/
.movie { position: relative; z-index: 10; background: url(../img/movie_bg.png) left 50% bottom 0/100% no-repeat; }
@media screen and (max-width: 767px) { .movie { margin-top: calc(-180 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie { margin-top: calc(-180 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .movie { padding: calc(280 / var(--campus-sp-size) * var(--sp-size)) 0 calc(200 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie { padding: calc(280 / var(--campus-sp-size) * var(--pc-size)) 0 calc(200 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .movie { height: calc(1410 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie { height: calc(1410 / var(--campus-sp-size) * var(--pc-size)); } }
.movie-wrapper { text-align: center; position: relative; }
.movie-title { line-height: 1; position: relative; z-index: 10; }
@media screen and (max-width: 767px) { .movie-title { margin-bottom: calc(65 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-title { margin-bottom: calc(65 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .movie-title img { width: calc(432 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-title img { width: calc(432 / var(--campus-sp-size) * var(--pc-size)); } }
.movie-image { line-height: 1; position: relative; }
.movie-image::before { content: ""; display: block; background: url(../img/movie_image_before.png) 0 0/contain no-repeat; position: absolute; z-index: -1; }
@media screen and (max-width: 767px) { .movie-image::before { width: calc(233 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-image::before { width: calc(233 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .movie-image::before { height: calc(223 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-image::before { height: calc(223 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .movie-image::before { top: calc(-56 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-image::before { top: calc(-56 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .movie-image::before { right: calc(10 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-image::before { right: calc(10 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .movie-image img { width: calc(321 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-image img { width: calc(321 / var(--campus-sp-size) * var(--pc-size)); } }
.movie-item::before { content: ""; display: block; background: url(../img/movie_item_before.png) 0 0/contain no-repeat; position: absolute; }
@media screen and (max-width: 767px) { .movie-item::before { width: calc(187 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-item::before { width: calc(187 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .movie-item::before { height: calc(371 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-item::before { height: calc(371 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .movie-item::before { bottom: calc(-60 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-item::before { bottom: calc(-60 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .movie-item::before { left: calc(75 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-item::before { left: calc(75 / var(--campus-sp-size) * var(--pc-size)); } }
.movie-item::after { content: ""; display: block; background: url(../img/movie_item_after.png) 0 0/contain no-repeat; position: absolute; }
@media screen and (max-width: 767px) { .movie-item::after { width: calc(182 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-item::after { width: calc(182 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .movie-item::after { height: calc(384 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-item::after { height: calc(384 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .movie-item::after { bottom: calc(-60 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-item::after { bottom: calc(-60 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .movie-item::after { right: calc(75 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-item::after { right: calc(75 / var(--campus-sp-size) * var(--pc-size)); } }
.movie-button { border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); position: absolute; left: 50%; transform: translateX(-50%); }
@media screen and (max-width: 767px) { .movie-button { width: calc(236 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-button { width: calc(236 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .movie-button { height: calc(236 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-button { height: calc(236 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .movie-button { bottom: calc(-137 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-button { bottom: calc(-137 / var(--campus-sp-size) * var(--pc-size)); } }
.movie-button::before { content: ""; display: block; border-radius: 50%; position: absolute; background-color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); }
@media screen and (max-width: 767px) { .movie-button::before { width: calc(187 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-button::before { width: calc(187 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .movie-button::before { height: calc(187 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-button::before { height: calc(187 / var(--campus-sp-size) * var(--pc-size)); } }
.movie-button img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
@media screen and (max-width: 767px) { .movie-button img { width: calc(172 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .movie-button img { width: calc(172 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .movie-button::before { transition: width .3s, height .3s; } }
@media screen and (min-width: 768px) and (max-width: 767px) { .movie-button:hover::before { width: calc(236 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) and (min-width: 768px) { .movie-button:hover::before { width: calc(236 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (min-width: 768px) and (max-width: 767px) { .movie-button:hover::before { height: calc(236 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) and (min-width: 768px) { .movie-button:hover::before { height: calc(236 / var(--campus-sp-size) * var(--pc-size)); } }

/*--------------------------------------------------------------------------------------- modal
----------------------------------------------------------------------------------------*/
.modal { display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; margin: auto; z-index: 10010; aspect-ratio: 9 / 16; }
.modal video { width: 100%; height: 100%; }
.modal.is-active { display: block; }
.modal .button { width: 27px; height: 27px; position: absolute; bottom: 5px; right: -40px; border-radius: 100%; border: 1px solid #fff; cursor: pointer; transition: .4s; }
.modal .button::before, .modal .button::after { content: ""; display: block; position: absolute; margin: auto; width: 1px; height: 10px; background-color: #fff; top: 0; right: 0; bottom: 0; left: 0; }
.modal .button::before { transform: rotate(45deg); }
.modal .button::after { transform: rotate(-45deg); }
.modal-bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-color: rgba(0, 0, 0, 0.8); transition: .4s; }
.modal-bg.is-active { display: block; }

@media screen and (max-width: 767px) { .modal { width: calc(550 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .modal { max-width: 600px; min-width: 300px; width: 25%; }
  .modal .button:hover { opacity: 0.8; } }
/*--------------------------------------------------------------------------------------- lineup
----------------------------------------------------------------------------------------*/
.lineup { background: url(../img/lineup_bg.png) left 50% top 0/cover no-repeat; position: relative; }
@media screen and (max-width: 767px) { .lineup { margin-top: calc(-180 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup { margin-top: calc(-180 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup { padding-top: calc(260 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup { padding-top: calc(260 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup { height: calc(3540 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup { height: calc(3540 / var(--campus-sp-size) * var(--pc-size)); } }
.lineup-container { background: url(../img/lineup_container_bg.png) 0 0/100% no-repeat; }
@media screen and (max-width: 767px) { .lineup-container { padding-top: calc(100 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-container { padding-top: calc(100 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-container { height: calc(2955 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-container { height: calc(2955 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-title.title1 { margin-bottom: calc(35 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-title.title1 { margin-bottom: calc(35 / var(--campus-sp-size) * var(--pc-size)); } }
.lineup-title.title1::before { content: ""; display: block; background: url(../img/lineup_title_before.png) 0 0/contain no-repeat; position: absolute; }
@media screen and (max-width: 767px) { .lineup-title.title1::before { width: calc(168 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-title.title1::before { width: calc(168 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-title.title1::before { height: calc(122 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-title.title1::before { height: calc(122 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-title.title1::before { top: calc(-70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-title.title1::before { top: calc(-70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-title.title1::before { left: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-title.title1::before { left: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-title.title1 img { width: calc(527 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-title.title1 img { width: calc(527 / var(--campus-sp-size) * var(--pc-size)); } }
.lineup-title.title2 { font-weight: 700; line-height: 1; letter-spacing: -.025em; text-align: left; }
@media screen and (max-width: 767px) { .lineup-title.title2 { margin-bottom: calc(10 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-title.title2 { margin-bottom: calc(10 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-title.title2 { font-size: calc(26 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-title.title2 { font-size: calc(26 / var(--campus-sp-size) * var(--pc-size)); } }
.lineup-title.title2 small { color: #7b7a7a; }
@media screen and (max-width: 767px) { .lineup-title.title2 small { font-size: calc(18 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-title.title2 small { font-size: calc(18 / var(--campus-sp-size) * var(--pc-size)); } }
.lineup-package-title { color: #34adb7; line-height: 1.5; letter-spacing: -.025em; text-align: center; background: url(../img/lineup_package_title_line.png) left 50% bottom 0/contain no-repeat; }
@media screen and (max-width: 767px) { .lineup-package-title { margin-bottom: calc(30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-package-title { margin-bottom: calc(30 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-package-title { padding-bottom: calc(30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-package-title { padding-bottom: calc(30 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-package-title { font-size: calc(30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-package-title { font-size: calc(30 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-package-title { background-size: calc(526 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-package-title { background-size: calc(526 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-package-image { margin-bottom: calc(25 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-package-image { margin-bottom: calc(25 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-package-image img { width: calc(233 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-package-image img { width: calc(233 / var(--campus-sp-size) * var(--pc-size)); } }
.lineup-package-name { color: #101010; line-height: 1; letter-spacing: -.025em; text-align: center; }
@media screen and (max-width: 767px) { .lineup-package-name { margin-bottom: calc(25 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-package-name { margin-bottom: calc(25 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-package-name { font-size: calc(24 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-package-name { font-size: calc(24 / var(--campus-sp-size) * var(--pc-size)); } }
.lineup-package-price { color: #101010; line-height: 1; letter-spacing: -.025em; text-align: center; }
@media screen and (max-width: 767px) { .lineup-package-price { font-size: calc(28 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-package-price { font-size: calc(28 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-package-price small { font-size: calc(18 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-package-price small { font-size: calc(18 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-point { margin-top: calc(45 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-point { margin-top: calc(45 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-point-title { margin-bottom: calc(30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-point-title { margin-bottom: calc(30 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-point-title img { width: calc(530 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-point-title img { width: calc(530 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-point-image img { width: calc(530 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-point-image img { width: calc(530 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-inner { margin-top: calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-inner { margin-top: calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
.lineup-box { display: flex; justify-content: flex-start; align-items: flex-start; }
@media screen and (max-width: 767px) { .lineup-box { margin-bottom: calc(30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-box { margin-bottom: calc(30 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-box { padding-left: calc(115 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-box { padding-left: calc(115 / var(--campus-sp-size) * var(--pc-size)); } }
.lineup-item { position: relative; }
@media screen and (max-width: 767px) { .lineup-item { margin-bottom: calc(18 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-item { margin-bottom: calc(18 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-item.item1 img { width: calc(249 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-item.item1 img { width: calc(249 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-item.item2 img { width: calc(249 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-item.item2 img { width: calc(249 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-item.item3 img { width: calc(274 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-item.item3 img { width: calc(274 / var(--campus-sp-size) * var(--pc-size)); } }
.lineup-image { position: relative; }
@media screen and (max-width: 767px) { .lineup-image { margin-right: calc(22 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-image { margin-right: calc(22 / var(--campus-sp-size) * var(--pc-size)); } }
.lineup-image::before { content: ""; display: block; background: url(../img/lineup_icon-basic.png) 0 0/contain no-repeat; position: absolute; z-index: 10; }
@media screen and (max-width: 767px) { .lineup-image::before { width: calc(109 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-image::before { width: calc(109 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-image::before { height: calc(98 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-image::before { height: calc(98 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-image::before { top: calc(-20 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-image::before { top: calc(-20 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-image::before { left: calc(-45 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-image::before { left: calc(-45 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-image img { width: calc(230 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-image img { width: calc(230 / var(--campus-sp-size) * var(--pc-size)); } }
.lineup-catch { line-height: 1; letter-spacing: -.025em; text-align: left; }
@media screen and (max-width: 767px) { .lineup-catch { font-size: calc(20 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-catch { font-size: calc(20 / var(--campus-sp-size) * var(--pc-size)); } }
.lineup-note { color: #7b7a7a; line-height: calc(28 / 20); letter-spacing: -.025em; text-align: center; }
@media screen and (max-width: 767px) { .lineup-note { font-size: calc(20 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-note { font-size: calc(20 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-note { margin-top: calc(30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-note { margin-top: calc(30 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-point-title { margin: calc(45 / var(--campus-sp-size) * var(--sp-size)) 0 calc(35 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-point-title { margin: calc(45 / var(--campus-sp-size) * var(--pc-size)) 0 calc(35 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-point-title img { width: calc(530 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-point-title img { width: calc(530 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .lineup-point-image img { width: calc(530 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .lineup-point-image img { width: calc(530 / var(--campus-sp-size) * var(--pc-size)); } }
.lineup .colorRich { color: #101010; }
.lineup .colorBrown { color: #553b27; }
.lineup .colorNavy { color: #2e2252; }

.shop .ep-store { padding: 0 5%; margin: 40px 0; position: relative; z-index: 5; }

.shop .ep-store ul { display: flex; justify-content: center; }

.shop .ep-store ul li { border: 1px solid #d2f2f4; width: 46%; text-align: center; }

.shop .ep-store ul li:last-child { margin-left: 4%; }

.shop .ep-store ul li:last-child a p:before { content: ''; display: inline-block; width: 26px; height: 26px; background-image: url("/share/img/sp/list.jpg"); background-repeat: no-repeat; position: absolute; background-size: contain; right: 50%; margin-right: -15px; top: -35px; }

.shop .ep-store ul li:first-child { margin-left: 4%; }

.shop .ep-store ul li:first-child a p:before { content: ''; display: inline-block; width: 26px; height: 26px; background-image: url("/share/img/sp/cart.jpg"); background-repeat: no-repeat; position: absolute; background-size: contain; right: 50%; margin-right: -15px; top: -35px; }

.shop .ep-store ul li a { text-decoration: none; color: #9ad4d8; padding: 70px 0 40px; display: inline-block; width: 100%; }

.shop .ep-store ul li a p { font-size: 16px; letter-spacing: 0.5px; margin-top: 5px; position: relative; font-family: 'Tenali Ramakrishna'; }

.shop { padding-bottom: 0; }

.shop .ep-store { background-repeat: no-repeat; background-size: cover; margin: 0; padding: 0 5% 0; z-index: 0; }
@media screen and (max-width: 767px) { .shop .ep-store { padding-top: calc(35 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .shop .ep-store { padding-top: calc(35 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .shop .ep-store { padding-bottom: calc(112 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .shop .ep-store { padding-bottom: calc(112 / var(--campus-sp-size) * var(--pc-size)); } }

.shop .ep-store ul li { background-color: rgba(255, 255, 255, 0.6); border: 1px solid #d2f2f4; }

.shop .ep-store ul li:first-child { margin-left: 0; }

.shop .ep-store ul li:first-child a p:before { background-image: url("/share/img/sp/cart.png"); }

.shop .ep-store ul li:last-child a p:before { background-image: url("/share/img/sp/list.png"); }

@media screen and (min-width: 749px) { .ep-main-container .ep-section-links { padding-top: 25px; } }
.footer-container { background-color: #f7f9f9; position: relative; z-index: 100; }

.footer-container footer { font-family: 'Tenali Ramakrishna'; }
@media screen and (max-width: 767px) { .footer-container footer { padding-bottom: calc(290 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .footer-container footer { padding-bottom: calc(290 / var(--campus-sp-size) * var(--pc-size)); } }

.footer-container footer h3 { padding-top: 50px; text-align: center; }

.footer-container footer h3 img { max-width: 235px; width: 36vw; }

.footer-container footer .mt-50 { margin-top: 50px; }

.footer-container footer ul { display: flex; align-items: center; justify-content: center; margin: 20px 0; }

.footer-container footer ul li { margin: 0 2%; }

.footer-container footer ul li a { text-decoration: none; color: #202020; font-size: 14px; }

.footer-container footer ul li a img { max-width: 50px; width: 100%; }

.footer-container footer div { display: flex; justify-content: center; margin-bottom: 10px; }

.footer-container footer div p { font-size: 14px; margin: 0 3%; }

.footer-container footer div p a { text-decoration: none; color: #888888; }

.footer-container footer p { color: #888888; font-size: 11px; text-align: center; }

@media screen and (min-width: 768px) { .footer-container footer { padding-bottom: 60px; } }
@media screen and (min-width: 768px) and (max-width: 767px) { .footer-container footer.is-active { padding-bottom: calc(280 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) and (min-width: 768px) { .footer-container footer.is-active { padding-bottom: calc(280 / var(--campus-sp-size) * var(--pc-size)); } }

.circle-mask-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #daeaf0; z-index: 9999; pointer-events: none; -webkit-mask-image: radial-gradient(circle at center, transparent 0%, transparent 5%, white 6%, white 100%); mask-image: radial-gradient(circle at center, transparent 0%, transparent 5%, white 6%, white 100%); -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 0% auto; mask-size: 0% auto; animation: circle-reveal 2.5s ease forwards; }

@keyframes circle-reveal { 0% { -webkit-mask-size: 100% auto; mask-size: 100% auto; }
  100% { -webkit-mask-size: 2500% auto; mask-size: 2500% auto; } }
@keyframes kv-slide-up { 0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); } }
@keyframes kv-slide-up-sp { 0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes kv-slide-down { 0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(20px); } }
@keyframes kv-slide-down-sp { 0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(8px); } }