/*
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: 1440; --sp-size: 100vw; --pc-size: 532px; }

* { box-sizing: border-box; }

@media screen and (max-width: 767px) { html { font-size: 3.46666666vw; } }
body { font-family: "dnp-shuei-mgothic-std", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; font-weight: 400; color: #000; line-height: 1.2; word-wrap: break-word; }
@media screen and (max-width: 767px) { body { font-size: calc(24 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { body { font-size: calc(24 / var(--campus-sp-size) * var(--pc-size)); } }

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

ul, li { list-style: none; }

img { max-width: 100%; height: auto; vertical-align: bottom; pointer-events: none; }

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

.pc { display: none; }

@media screen and (min-width: 768px) { .pc { display: inline-block; }
  .sp { display: none; } }
video { max-width: 100%; }

.ingredients-detail__button { background-color: #fff; }
.ingredients-detail__button.is-active::after { transform: rotate(0); }

.ingredients-detail__contents { font-size: .8461538462rem; font-weight: 600; line-height: 1.71; text-align: left; color: #5F3300; display: none; }
.ingredients-detail__contents:not([aria-hidden=false]) { height: auto; overflow: visible; }

.ingredients-detail__credit { font-size: .8461538462rem; font-weight: 600; line-height: 1.71; text-align: center; color: #5F3300; }

/*--------------------------------------------------------------------------------------- animation
----------------------------------------------------------------------------------------*/
.fade-in { opacity: 0; position: relative; transform: translate(0, calc(30 / var(--campus-sp-size) * var(--sp-size))); }
.fade-in.fade-in-right { transform: translate(calc(20 / var(--campus-sp-size) * var(--sp-size)), 0); }
.fade-in.fade-in-left { transform: translate(calc(-20 / var(--campus-sp-size) * var(--sp-size)), 0); }
.fade-in.fade-in-active { transform: translate(0, 0); opacity: 1; transition: transform .5s, opacity .7s; }

/*--------------------------------------------------------------------------------------- bg-fixed / bnr-fixed / logo / menu / pagetop
----------------------------------------------------------------------------------------*/
.bg-fixed { margin-top: -100vh; width: 100vw; height: 100vh; background: url(../img/bg_fixed.png) top 0 left 0/cover no-repeat, #fff; position: sticky; display: none; top: 0; left: 0; }

@media screen and (min-width: 768px) { .bg-fixed { display: block; } }
.bnr-fixed { position: fixed; bottom: 0; left: 0; transition: transform .7s; }
.bnr-fixed.is-hidden { transform: translateY(100%); }

@media screen and (max-width: 767px) { .bnr-fixed img { width: 100%; } }
@media screen and (min-width: 768px) { .bnr-fixed { left: calc(50% - var(--pc-size) / 2); }
  .bnr-fixed img { width: var(--pc-size); } }
.logo { position: absolute; top: 45px; left: 45px; }
.logo img { width: 90px; }

.menu.fixed { width: 100vw; height: 100vh; background-color: #fff; position: fixed; top: 0; left: 0; transform: scale(0); opacity: 0; visibility: hidden; transition: transform 0s .5s, opacity .5s, visibility .5s; z-index: 99999999; }
.menu.fixed.is-active { transform: scale(1); opacity: 1; visibility: visible; transition: opacity .5s, visibility .5s; }
.menu.fixed .menu-wrap { padding: calc(115 / var(--campus-sp-size) * var(--sp-size)) calc(40 / var(--campus-sp-size) * var(--sp-size)); border-radius: calc(14 / var(--campus-sp-size) * var(--sp-size)); }
.menu.fixed .menu-cont { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.menu-wrap { height: 100%; background: url(../img/menu_bg.png) 50% 50%/cover no-repeat; }
.menu-logo { margin-bottom: calc(85 / var(--campus-sp-size) * var(--sp-size)); }
.menu-toggle { width: calc(73 / var(--campus-sp-size) * var(--sp-size)); height: calc(73 / var(--campus-sp-size) * var(--sp-size)); display: flex; flex-direction: column; justify-content: center; align-items: center; border: calc(2 / var(--campus-sp-size) * var(--sp-size)) solid #fff; border-radius: calc(50 / var(--campus-sp-size) * var(--sp-size)); box-shadow: 0 calc(3 / var(--campus-sp-size) * var(--sp-size)) calc(6 / var(--campus-sp-size) * var(--sp-size)) rgba(0, 0, 0, 0.5); background-color: #fff; position: fixed; top: calc(18 / var(--campus-sp-size) * var(--sp-size)); right: calc(19 / var(--campus-sp-size) * var(--sp-size)); z-index: 999999999; cursor: pointer; }
.menu-toggle span { width: calc(27 / var(--campus-sp-size) * var(--sp-size)); height: calc(2 / var(--campus-sp-size) * var(--sp-size)); border-radius: calc(8 / var(--campus-sp-size) * var(--sp-size)); background-color: #69BA00; position: relative; transition: transform .5s; }
.menu-toggle span:not(:last-of-type) { margin-bottom: calc(7 / var(--campus-sp-size) * var(--sp-size)); }
.menu-toggle.is-active span:nth-of-type(1) { transform: translateY(1.2vw) rotate(-135deg); }
.menu-toggle.is-active span:nth-of-type(2) { transform: rotate(-135deg); }
.menu-toggle.is-active span:nth-of-type(3) { transform: translateY(-1.2vw) rotate(-45deg); }
.menu-nav { padding: calc(15 / var(--campus-sp-size) * var(--sp-size)) calc(20 / var(--campus-sp-size) * var(--sp-size)) calc(5 / var(--campus-sp-size) * var(--sp-size)); width: calc(420 / var(--campus-sp-size) * var(--sp-size)); border-radius: calc(37 / var(--campus-sp-size) * var(--sp-size)); background: rgba(255, 255, 255, 0.6); }
.menu-list-item { padding: calc(32 / var(--campus-sp-size) * var(--sp-size)) 0; text-align: center; position: relative; }
.menu-list-item a { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-size: calc(25 / var(--campus-sp-size) * var(--sp-size)); color: #5f3301; font-weight: 600; line-height: calc(36 / 25); transition: opacity .3s; }
.menu-list-item a:hover { opacity: .7; }
.menu-list-item:not(:last-of-type)::before { content: ""; width: calc(363 / var(--campus-sp-size) * var(--sp-size)); height: calc(3 / var(--campus-sp-size) * var(--sp-size)); display: block; background: url("../img/menu_line.png") 0 0/contain no-repeat; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

@media screen and (max-width: 767px) { .menu-logo img { width: calc(137 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .menu.fixed { display: none; }
  .menu-toggle { display: none; }
  .menu-nav { padding: 15px 20px 5px; width: 310px; border-radius: 30px; background: rgba(255, 255, 255, 0.6); }
  .menu-list-item { padding: 18px 0; text-align: center; position: relative; }
  .menu-list-item a { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-size: 16px; color: #5f3301; font-weight: 600; line-height: calc(24 / 18); transition: opacity .3s; }
  .menu-list-item a:hover { opacity: .7; }
  .menu-list-item:not(:last-of-type)::before { content: ""; width: 271px; height: 2px; display: block; background: url("../img/pc/menu_line.png") 0 0/contain no-repeat; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } }
.pagetop { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); }
.pagetop-button img { width: 70px; }

/*--------------------------------------------------------------------------------------- wrapper / columns
----------------------------------------------------------------------------------------*/
.wrapper { position: sticky; top: 0; left: 0; z-index: 9999; }

.columns { display: flex; justify-content: center; position: relative; }

/*--------------------------------------------------------------------------------------- main / side
----------------------------------------------------------------------------------------*/
.main { margin: calc(40 / var(--campus-sp-size) * var(--sp-size)) 0; width: 100vw; display: block; text-align: center; position: relative; z-index: 2; margin: 0 auto; border: 1px solid #65b400; border-radius: 2.1812307692rem; background-color: #fff; overflow: hidden; }

@media screen and (max-width: 767px) { .main { border: none; height: 100%; overflow: hidden; border-radius: 0 0 2.1812307692rem 2.1812307692rem; }
  .main .footer { position: relative; } }
@media screen and (min-width: 768px) { .main { margin: 40px 0; width: var(--pc-size); } }
.side-column { width: min(100%, calc((100vw - var(--pc-size)) / 2)); height: 100vh; display: none; flex-direction: column; justify-content: flex-start; align-items: center; position: sticky; top: 0; z-index: 999; }
.side-column.right { padding: 80px 80px 0 80px; justify-content: flex-start; right: 0; }
.side-column.left { left: 0; }

@media screen and (min-width: 1080px) { .side-column { display: flex; }
  .side-column.left { padding-top: calc(200px + 80px); } }
/*--------------------------------------------------------------------------------------- kv
----------------------------------------------------------------------------------------*/
.kv { position: relative; }
@media screen and (max-width: 767px) { .kv { padding: calc(60 / var(--campus-sp-size) * var(--sp-size)) calc(40 / var(--campus-sp-size) * var(--sp-size)) calc(20 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .kv { padding: calc(60 / var(--campus-sp-size) * var(--pc-size)) calc(40 / var(--campus-sp-size) * var(--pc-size)) calc(20 / var(--campus-sp-size) * var(--pc-size)); } }

/*--------------------------------------------------------------------------------------- about
----------------------------------------------------------------------------------------*/
.about { background: url(../img/about_bg.png) top calc(215 / var(--campus-sp-size) * var(--sp-size)) left 0/100% no-repeat; }
@media screen and (max-width: 767px) { .about { padding: calc(40 / var(--campus-sp-size) * var(--sp-size)) 0 0; } }
@media screen and (min-width: 768px) { .about { padding: calc(40 / var(--campus-sp-size) * var(--pc-size)) 0 0; } }
@media screen and (max-width: 767px) { .about-logo { margin-bottom: calc(40 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-logo { margin-bottom: calc(40 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .about-logo img { width: calc(71 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-logo img { width: calc(71 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .about-title { margin-bottom: calc(35 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-title { margin-bottom: calc(35 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .about-title img { width: calc(590 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-title img { width: calc(420 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .about-image.image01 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-image.image01 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .about-image.image01 img { width: calc(463 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-image.image01 img { width: calc(463 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .about-image.image02 { margin-bottom: calc(40 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-image.image02 { margin-bottom: calc(40 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .about-image.image02 img { width: calc(408 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-image.image02 img { width: calc(408 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .about-image.image03 { margin-bottom: calc(60 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-image.image03 { margin-bottom: calc(60 / var(--campus-sp-size) * var(--pc-size)); } }
.about-image.image03 img { width: 100%; }
.about-image.image04 { text-align: right; }
@media screen and (max-width: 767px) { .about-image.image04 { margin-bottom: calc(80 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-image.image04 { margin-bottom: calc(80 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .about-image.image04 img { width: calc(697 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-image.image04 img { width: calc(697 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .about-image.image05 { margin-bottom: calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-image.image05 { margin-bottom: calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
.about-image.image05 img { width: 100%; }
@media screen and (max-width: 767px) { .about-image.image06 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-image.image06 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .about-image.image06 img { width: calc(401 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-image.image06 img { width: calc(401 / var(--campus-sp-size) * var(--pc-size)); } }
.about-image.image07 img { width: 100%; }
@media screen and (max-width: 767px) { .about-text.text01 { margin-bottom: calc(35 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-text.text01 { margin-bottom: calc(35 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .about-text.text01 img { width: calc(364 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-text.text01 img { width: calc(364 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .about-text.text02 { margin-bottom: calc(15 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-text.text02 { margin-bottom: calc(15 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .about-text.text02 img { width: calc(351 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .about-text.text02 img { width: calc(351 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .about { background-position: top calc(215 / var(--campus-sp-size) * var(--pc-size)) left 0; } }
/*--------------------------------------------------------------------------------------- why
----------------------------------------------------------------------------------------*/
.why { background: url(../img/why_bg.png) top calc(835 / var(--campus-sp-size) * var(--sp-size)) left 0/100% no-repeat; }
@media screen and (max-width: 767px) { .why { padding: calc(80 / var(--campus-sp-size) * var(--sp-size)) 0 calc(115 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .why { padding: calc(80 / var(--campus-sp-size) * var(--pc-size)) 0 calc(115 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .why-logo { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .why-logo { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .why-logo img { width: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .why-logo img { width: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .why-title { margin-bottom: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .why-title { margin-bottom: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .why-title img { width: calc(522 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .why-title img { width: calc(522 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .why-image.image01 { margin-bottom: calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .why-image.image01 { margin-bottom: calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .why-image.image01 img { width: calc(463 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .why-image.image01 img { width: calc(463 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .why-image.image02 { margin-bottom: calc(45 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .why-image.image02 { margin-bottom: calc(45 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .why-image.image02 img { width: calc(324 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .why-image.image02 img { width: calc(324 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .why-text.text01 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .why-text.text01 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .why-text.text01 img { width: calc(396 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .why-text.text01 img { width: calc(396 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .why-text.text02 img { width: calc(381 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .why-text.text02 img { width: calc(381 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .why { background-position: top calc(835 / var(--campus-sp-size) * var(--pc-size)) left 0; } }
/*--------------------------------------------------------------------------------------- question
----------------------------------------------------------------------------------------*/
.question { background-color: #f9fded; }
@media screen and (max-width: 767px) { .question { padding: 0 0 calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .question { padding: 0 0 calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .question-logo.logo01 { margin-bottom: calc(40 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .question-logo.logo01 { margin-bottom: calc(40 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .question-logo.logo01 img { margin-top: calc(-45 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .question-logo.logo01 img { margin-top: calc(-45 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .question-logo.logo01 img { width: calc(124 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .question-logo.logo01 img { width: calc(124 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .question-logo.logo02 { margin-bottom: calc(40 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .question-logo.logo02 { margin-bottom: calc(40 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .question-logo.logo02 img { width: calc(128 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .question-logo.logo02 img { width: calc(128 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .question-title.title01 { margin-bottom: calc(35 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .question-title.title01 { margin-bottom: calc(35 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .question-title.title01 img { width: calc(625 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .question-title.title01 img { width: calc(625 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .question-title.title02 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .question-title.title02 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .question-title.title02 img { width: calc(445 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .question-title.title02 img { width: calc(445 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .question-image.image01 { margin-bottom: calc(90 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .question-image.image01 { margin-bottom: calc(90 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .question-image.image01 img { width: calc(560 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .question-image.image01 img { width: calc(560 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .question-image.image02 { margin-bottom: calc(30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .question-image.image02 { margin-bottom: calc(30 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .question-image.image02 img { width: calc(534 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .question-image.image02 img { width: calc(534 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .question-text img { width: calc(514 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .question-text img { width: calc(514 / var(--campus-sp-size) * var(--pc-size)); } }

/*--------------------------------------------------------------------------------------- ugc
----------------------------------------------------------------------------------------*/
.ugc { background: url(../img/ugc_bg.png) top calc(40 / var(--campus-sp-size) * var(--sp-size)) right 0/calc(114 / var(--campus-sp-size) * var(--sp-size)) no-repeat; }
@media screen and (max-width: 767px) { .ugc { padding: calc(65 / var(--campus-sp-size) * var(--sp-size)) 0 0; } }
@media screen and (min-width: 768px) { .ugc { padding: calc(65 / var(--campus-sp-size) * var(--pc-size)) 0 0; } }
@media screen and (max-width: 767px) { .ugc-title { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .ugc-title { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .ugc-title img { width: calc(390 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .ugc-title img { width: calc(390 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .ugc { background-position: top calc(40 / var(--campus-sp-size) * var(--pc-size)) right 0; background-size: calc(114 / var(--campus-sp-size) * var(--pc-size)); } }
/*--------------------------------------------------------------------------------------- create
----------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) { .create { padding: calc(85 / var(--campus-sp-size) * var(--sp-size)) 0 0; } }
@media screen and (min-width: 768px) { .create { padding: calc(85 / var(--campus-sp-size) * var(--pc-size)) 0 0; } }
.create-image.image01 { text-align: left; }
@media screen and (max-width: 767px) { .create-image.image01 { margin-bottom: calc(60 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .create-image.image01 { margin-bottom: calc(60 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .create-image.image01 img { width: calc(681 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .create-image.image01 img { width: calc(681 / var(--campus-sp-size) * var(--pc-size)); } }
.create-image.image02 { text-align: right; }
@media screen and (max-width: 767px) { .create-image.image02 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .create-image.image02 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .create-image.image02 img { margin-right: calc(20 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .create-image.image02 img { margin-right: calc(20 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .create-image.image02 img { width: calc(621 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .create-image.image02 img { width: calc(621 / var(--campus-sp-size) * var(--pc-size)); } }
.create-image.image03 img { width: 100%; }

/*--------------------------------------------------------------------------------------- reason
----------------------------------------------------------------------------------------*/
.reason { background: url(../img/reason_bg.png) top calc(300 / var(--campus-sp-size) * var(--sp-size)) left 0/100% no-repeat; }
@media screen and (max-width: 767px) { .reason { padding: calc(90 / var(--campus-sp-size) * var(--sp-size)) 0; } }
@media screen and (min-width: 768px) { .reason { padding: calc(90 / var(--campus-sp-size) * var(--pc-size)) 0; } }
@media screen and (max-width: 767px) { .reason-logo { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .reason-logo { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .reason-logo img { width: calc(82 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .reason-logo img { width: calc(82 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .reason-title { margin-bottom: calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .reason-title { margin-bottom: calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .reason-title img { width: calc(459 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .reason-title img { width: calc(459 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .reason-image.image01 { margin-bottom: calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .reason-image.image01 { margin-bottom: calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .reason-image.image01 img { width: calc(335 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .reason-image.image01 img { width: calc(335 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .reason-image.image02 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .reason-image.image02 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .reason-image.image02 img { width: calc(514 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .reason-image.image02 img { width: calc(514 / var(--campus-sp-size) * var(--pc-size)); } }
.reason-image.image03 { text-align: right; }
@media screen and (max-width: 767px) { .reason-image.image03 img { margin-right: calc(15 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .reason-image.image03 img { margin-right: calc(15 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .reason-image.image03 img { width: calc(652 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .reason-image.image03 img { width: calc(652 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .reason { background-position: top calc(300 / var(--campus-sp-size) * var(--pc-size)) left 0; } }
/*--------------------------------------------------------------------------------------- balance
----------------------------------------------------------------------------------------*/
.balance { background: url(../img/balance_bg.png) top 0 left 0/100% no-repeat; }
@media screen and (max-width: 767px) { .balance { padding: calc(90 / var(--campus-sp-size) * var(--sp-size)) 0 calc(150 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .balance { padding: calc(90 / var(--campus-sp-size) * var(--pc-size)) 0 calc(150 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .balance { min-height: calc(1800 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .balance { min-height: calc(1800 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .balance-title { margin-bottom: calc(60 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .balance-title { margin-bottom: calc(60 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .balance-title img { width: calc(459 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .balance-title img { width: calc(459 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .balance-image.image01 { margin-bottom: calc(40 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .balance-image.image01 { margin-bottom: calc(40 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .balance-image.image01 img { width: calc(486 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .balance-image.image01 img { width: calc(486 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .balance-image.image02 { margin-bottom: calc(60 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .balance-image.image02 { margin-bottom: calc(60 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .balance-image.image02 img { width: calc(326 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .balance-image.image02 img { width: calc(326 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .balance-text.text01 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .balance-text.text01 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .balance-text.text01 img { width: calc(429 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .balance-text.text01 img { width: calc(429 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .balance-text.text02 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .balance-text.text02 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .balance-text.text02 img { width: calc(387 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .balance-text.text02 img { width: calc(387 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .balance-text.text03 img { width: calc(456 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .balance-text.text03 img { width: calc(456 / var(--campus-sp-size) * var(--pc-size)); } }

/*--------------------------------------------------------------------------------------- vegetable
----------------------------------------------------------------------------------------*/
.vegetable { background: url(../img/vegetable_bg.png) top calc(1000 / var(--campus-sp-size) * var(--sp-size)) left 0/100% no-repeat; }
@media screen and (max-width: 767px) { .vegetable { padding: calc(45 / var(--campus-sp-size) * var(--sp-size)) 0 0; } }
@media screen and (min-width: 768px) { .vegetable { padding: calc(45 / var(--campus-sp-size) * var(--pc-size)) 0 0; } }
@media screen and (max-width: 767px) { .vegetable-title { margin-bottom: calc(40 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .vegetable-title { margin-bottom: calc(40 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .vegetable-title img { width: calc(316 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .vegetable-title img { width: calc(316 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .vegetable-image.image01 { margin-bottom: calc(100 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .vegetable-image.image01 { margin-bottom: calc(100 / var(--campus-sp-size) * var(--pc-size)); } }
.vegetable-image.image01 img { width: 100%; }
@media screen and (max-width: 767px) { .vegetable-image.image02 { margin-bottom: calc(140 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .vegetable-image.image02 { margin-bottom: calc(140 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .vegetable-image.image02 img { width: calc(545 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .vegetable-image.image02 img { width: calc(545 / var(--campus-sp-size) * var(--pc-size)); } }
.vegetable-image.image03 { text-align: right; }
@media screen and (max-width: 767px) { .vegetable-image.image03 { margin-bottom: calc(90 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .vegetable-image.image03 { margin-bottom: calc(90 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .vegetable-image.image03 img { width: calc(702 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .vegetable-image.image03 img { width: calc(702 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .vegetable-image.image04 { margin-bottom: calc(60 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .vegetable-image.image04 { margin-bottom: calc(60 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .vegetable-image.image04 img { width: calc(503 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .vegetable-image.image04 img { width: calc(503 / var(--campus-sp-size) * var(--pc-size)); } }
.vegetable-image.image05 img { width: 100%; }
@media screen and (max-width: 767px) { .vegetable-text.text01 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .vegetable-text.text01 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .vegetable-text.text01 img { width: calc(416 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .vegetable-text.text01 img { width: calc(416 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .vegetable-text.text02 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .vegetable-text.text02 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .vegetable-text.text02 img { width: calc(457 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .vegetable-text.text02 img { width: calc(457 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .vegetable-text.text03 { margin-bottom: calc(100 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .vegetable-text.text03 { margin-bottom: calc(100 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .vegetable-text.text03 img { width: calc(330 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .vegetable-text.text03 img { width: calc(330 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .vegetable { background-position: top calc(1000 / var(--campus-sp-size) * var(--pc-size)) left 0; } }
/*--------------------------------------------------------------------------------------- ashitaba
----------------------------------------------------------------------------------------*/
.ashitaba { background: url(../img/ashitaba_bg.png) top calc(1160 / var(--campus-sp-size) * var(--sp-size)) left 0/100% no-repeat; }
@media screen and (max-width: 767px) { .ashitaba { padding: calc(50 / var(--campus-sp-size) * var(--sp-size)) 0; } }
@media screen and (min-width: 768px) { .ashitaba { padding: calc(50 / var(--campus-sp-size) * var(--pc-size)) 0; } }
@media screen and (max-width: 767px) { .ashitaba-logo { margin-bottom: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .ashitaba-logo { margin-bottom: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .ashitaba-logo img { width: calc(101 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .ashitaba-logo img { width: calc(101 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .ashitaba-title { margin-bottom: calc(60 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .ashitaba-title { margin-bottom: calc(60 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .ashitaba-title img { width: calc(443 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .ashitaba-title img { width: calc(443 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .ashitaba-image.image01 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .ashitaba-image.image01 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
.ashitaba-image.image01 img { width: 100%; }
@media screen and (max-width: 767px) { .ashitaba-image.image02 { margin-bottom: calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .ashitaba-image.image02 { margin-bottom: calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .ashitaba-image.image02 img { width: calc(582 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .ashitaba-image.image02 img { width: calc(582 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .ashitaba-text.text01 { margin-bottom: calc(90 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .ashitaba-text.text01 { margin-bottom: calc(90 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .ashitaba-text.text01 img { width: calc(454 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .ashitaba-text.text01 img { width: calc(454 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .ashitaba-text.text02 { margin-bottom: calc(115 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .ashitaba-text.text02 { margin-bottom: calc(115 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .ashitaba-text.text02 img { width: calc(489 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .ashitaba-text.text02 img { width: calc(489 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .ashitaba-text.text03 img { width: calc(335 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .ashitaba-text.text03 img { width: calc(335 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .ashitaba { background-position: top calc(1160 / var(--campus-sp-size) * var(--pc-size)) left 0; } }
/*--------------------------------------------------------------------------------------- more
----------------------------------------------------------------------------------------*/
.more { background-color: #fff9f0; }
@media screen and (max-width: 767px) { .more { padding: calc(80 / var(--campus-sp-size) * var(--sp-size)) 0 calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .more { padding: calc(80 / var(--campus-sp-size) * var(--pc-size)) 0 calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .more-title { margin-bottom: calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .more-title { margin-bottom: calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .more-title img { width: calc(430 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .more-title img { width: calc(430 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .more-image img { width: calc(580 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .more-image img { width: calc(580 / var(--campus-sp-size) * var(--pc-size)); } }

/*--------------------------------------------------------------------------------------- assignment
----------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) { .assignment { padding: calc(75 / var(--campus-sp-size) * var(--sp-size)) 0 0; } }
@media screen and (min-width: 768px) { .assignment { padding: calc(75 / var(--campus-sp-size) * var(--pc-size)) 0 0; } }
@media screen and (max-width: 767px) { .assignment-title { margin-bottom: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .assignment-title { margin-bottom: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .assignment-title img { width: calc(430 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .assignment-title img { width: calc(430 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .assignment-image.image01 { margin-bottom: calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .assignment-image.image01 { margin-bottom: calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .assignment-image.image01 img { width: calc(569 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .assignment-image.image01 img { width: calc(569 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .assignment-image.image02 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .assignment-image.image02 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--pc-size)); } }
.assignment-image.image02 img { width: 100%; }
.assignment-image.image03 img { width: 100%; }
@media screen and (max-width: 767px) { .assignment-text { margin-bottom: calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .assignment-text { margin-bottom: calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .assignment-text img { width: calc(598 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .assignment-text img { width: calc(549 / var(--campus-sp-size) * var(--pc-size)); } }

/*--------------------------------------------------------------------------------------- proposal
----------------------------------------------------------------------------------------*/
.proposal { background: url(../img/proposal_bg.png) top calc(290 / var(--campus-sp-size) * var(--sp-size)) left 0/100% no-repeat; }
@media screen and (max-width: 767px) { .proposal { padding: calc(65 / var(--campus-sp-size) * var(--sp-size)) 0 0; } }
@media screen and (min-width: 768px) { .proposal { padding: calc(65 / var(--campus-sp-size) * var(--pc-size)) 0 0; } }
@media screen and (max-width: 767px) { .proposal-logo { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .proposal-logo { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .proposal-logo img { width: calc(105 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .proposal-logo img { width: calc(105 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .proposal-title { margin-bottom: calc(150 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .proposal-title { margin-bottom: calc(150 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .proposal-title img { width: calc(430 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .proposal-title img { width: calc(430 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .proposal-image.image01 { margin-bottom: calc(100 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .proposal-image.image01 { margin-bottom: calc(100 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .proposal-image.image01 img { width: calc(335 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .proposal-image.image01 img { width: calc(335 / var(--campus-sp-size) * var(--pc-size)); } }
.proposal-image.image02 { text-align: right; }
@media screen and (max-width: 767px) { .proposal-image.image02 { margin-bottom: calc(80 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .proposal-image.image02 { margin-bottom: calc(80 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .proposal-image.image02 img { width: calc(705 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .proposal-image.image02 img { width: calc(705 / var(--campus-sp-size) * var(--pc-size)); } }
.proposal-image.image03 { text-align: left; }
@media screen and (max-width: 767px) { .proposal-image.image03 img { width: calc(699 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .proposal-image.image03 img { width: calc(699 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .proposal-text { margin-bottom: calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .proposal-text { margin-bottom: calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .proposal-text img { width: calc(549 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .proposal-text img { width: calc(549 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .proposal { background-position: top calc(290 / var(--campus-sp-size) * var(--pc-size)) left 0; } }
/*--------------------------------------------------------------------------------------- materials
----------------------------------------------------------------------------------------*/
.materials { background: url(../img/materials_bg.png) top calc(280 / var(--campus-sp-size) * var(--sp-size)) left 0/100% no-repeat; }
@media screen and (max-width: 767px) { .materials { padding: calc(110 / var(--campus-sp-size) * var(--sp-size)) 0 0; } }
@media screen and (min-width: 768px) { .materials { padding: calc(110 / var(--campus-sp-size) * var(--pc-size)) 0 0; } }
@media screen and (max-width: 767px) { .materials-title { margin-bottom: calc(45 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .materials-title { margin-bottom: calc(45 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .materials-title img { width: calc(619 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .materials-title img { width: calc(619 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .materials-image img { width: calc(635 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .materials-image img { width: calc(635 / var(--campus-sp-size) * var(--pc-size)); } }
.materials-detail { background-color: #fff9f0; }
@media screen and (max-width: 767px) { .materials-detail { padding: calc(70 / var(--campus-sp-size) * var(--sp-size)) 0 calc(110 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .materials-detail { padding: calc(70 / var(--campus-sp-size) * var(--pc-size)) 0 calc(110 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .materials-detail-title { margin-bottom: calc(45 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .materials-detail-title { margin-bottom: calc(45 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .materials-detail-title img { width: calc(430 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .materials-detail-title img { width: calc(430 / var(--campus-sp-size) * var(--pc-size)); } }
.materials-detail-image.image01 { text-align: left; }
@media screen and (max-width: 767px) { .materials-detail-image.image01 { margin-bottom: calc(110 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .materials-detail-image.image01 { margin-bottom: calc(110 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .materials-detail-image.image01 img { width: calc(701 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .materials-detail-image.image01 img { width: calc(701 / var(--campus-sp-size) * var(--pc-size)); } }
.materials-detail-image.image02 { text-align: left; }
@media screen and (max-width: 767px) { .materials-detail-image.image02 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .materials-detail-image.image02 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .materials-detail-image.image02 img { width: calc(698 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .materials-detail-image.image02 img { width: calc(698 / var(--campus-sp-size) * var(--pc-size)); } }
.materials-detail-image.image03 { text-align: right; }
@media screen and (max-width: 767px) { .materials-detail-image.image03 img { width: calc(694 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .materials-detail-image.image03 img { width: calc(694 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .materials { background-position: top calc(290 / var(--campus-sp-size) * var(--pc-size)) left 0; } }
/*--------------------------------------------------------------------------------------- result
----------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) { .result { padding: calc(60 / var(--campus-sp-size) * var(--sp-size)) 0 0; } }
@media screen and (min-width: 768px) { .result { padding: calc(60 / var(--campus-sp-size) * var(--pc-size)) 0 0; } }
@media screen and (max-width: 767px) { .result-title { margin-bottom: calc(45 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .result-title { margin-bottom: calc(45 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .result-title img { width: calc(425 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .result-title img { width: calc(425 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .result-image.image01 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .result-image.image01 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .result-image.image01 img { width: calc(571 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .result-image.image01 img { width: calc(571 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .result-image.image02 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .result-image.image02 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .result-image.image02 img { width: calc(506 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .result-image.image02 img { width: calc(506 / var(--campus-sp-size) * var(--pc-size)); } }
.result-image.image03 img { width: 100%; }
@media screen and (max-width: 767px) { .result-text.text01 { margin-bottom: calc(80 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .result-text.text01 { margin-bottom: calc(80 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .result-text.text01 img { width: calc(400 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .result-text.text01 img { width: calc(400 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .result-text.text02 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .result-text.text02 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .result-text.text02 img { width: calc(581 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .result-text.text02 img { width: calc(581 / var(--campus-sp-size) * var(--pc-size)); } }

/*--------------------------------------------------------------------------------------- meeting
----------------------------------------------------------------------------------------*/
.meeting { background: url(../img/meeting_bg.png) top calc(945 / var(--campus-sp-size) * var(--sp-size)) left 0/100% no-repeat; }
@media screen and (max-width: 767px) { .meeting { padding: calc(65 / var(--campus-sp-size) * var(--sp-size)) 0 0; } }
@media screen and (min-width: 768px) { .meeting { padding: calc(65 / var(--campus-sp-size) * var(--pc-size)) 0 0; } }
@media screen and (max-width: 767px) { .meeting-logo { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-logo { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .meeting-logo img { width: calc(102 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-logo img { width: calc(102 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .meeting-title { margin-bottom: calc(60 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-title { margin-bottom: calc(60 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .meeting-title img { width: calc(304 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-title img { width: calc(304 / var(--campus-sp-size) * var(--pc-size)); } }
.meeting-image.image01 { text-align: left; }
@media screen and (max-width: 767px) { .meeting-image.image01 { margin-bottom: calc(65 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-image.image01 { margin-bottom: calc(65 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .meeting-image.image01 img { width: calc(642 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-image.image01 img { width: calc(642 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .meeting-image.image02 { margin-bottom: calc(115 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-image.image02 { margin-bottom: calc(115 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .meeting-image.image02 img { width: calc(668 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-image.image02 img { width: calc(668 / var(--campus-sp-size) * var(--pc-size)); } }
.meeting-image.image03 { text-align: right; }
@media screen and (max-width: 767px) { .meeting-image.image03 { margin-bottom: calc(85 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-image.image03 { margin-bottom: calc(85 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .meeting-image.image03 img { width: calc(700 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-image.image03 img { width: calc(700 / var(--campus-sp-size) * var(--pc-size)); } }
.meeting-image.image04 img { width: 100%; }
@media screen and (max-width: 767px) { .meeting-text.text01 { margin-bottom: calc(115 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-text.text01 { margin-bottom: calc(115 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .meeting-text.text01 img { width: calc(320 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-text.text01 img { width: calc(320 / var(--campus-sp-size) * var(--pc-size)); } }
.meeting-text.text02 { text-align: right; }
@media screen and (max-width: 767px) { .meeting-text.text02 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-text.text02 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .meeting-text.text02 { padding-right: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-text.text02 { padding-right: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .meeting-text.text02 img { width: calc(468 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-text.text02 img { width: calc(468 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .meeting-text.text03 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-text.text03 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .meeting-text.text03 img { width: calc(337 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .meeting-text.text03 img { width: calc(337 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .meeting { background-position: top calc(945 / var(--campus-sp-size) * var(--pc-size)) left 0; } }
/*--------------------------------------------------------------------------------------- promise
----------------------------------------------------------------------------------------*/
.promise { background: url(../img/promise_bg.png) top 0 left 0/100% no-repeat; }
@media screen and (max-width: 767px) { .promise { padding: calc(50 / var(--campus-sp-size) * var(--sp-size)) 0 0; } }
@media screen and (min-width: 768px) { .promise { padding: calc(50 / var(--campus-sp-size) * var(--pc-size)) 0 0; } }
@media screen and (max-width: 767px) { .promise-logo { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-logo { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-logo img { width: calc(98 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-logo img { width: calc(98 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-title { margin-bottom: calc(75 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-title { margin-bottom: calc(75 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-title img { width: calc(374 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-title img { width: calc(374 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-image.image01 { margin-bottom: calc(130 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-image.image01 { margin-bottom: calc(130 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-image.image01 img { width: calc(642 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-image.image01 img { width: calc(642 / var(--campus-sp-size) * var(--pc-size)); } }
.promise-image.image02 { text-align: right; }
@media screen and (max-width: 767px) { .promise-image.image02 { margin-bottom: calc(135 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-image.image02 { margin-bottom: calc(135 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-image.image02 img { width: calc(701 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-image.image02 img { width: calc(701 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-image.image03 { margin-bottom: calc(35 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-image.image03 { margin-bottom: calc(35 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-image.image03 img { width: calc(553 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-image.image03 img { width: calc(553 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-image.image04 { margin-bottom: calc(80 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-image.image04 { margin-bottom: calc(80 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-image.image04 img { width: calc(201 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-image.image04 img { width: calc(201 / var(--campus-sp-size) * var(--pc-size)); } }
.promise-image.image05 img { width: 100%; }
@media screen and (max-width: 767px) { .promise-text.text01 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-text.text01 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-text.text01 img { width: calc(265 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-text.text01 img { width: calc(265 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-text.text02 { margin-bottom: calc(40 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-text.text02 { margin-bottom: calc(40 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-text.text02 img { width: calc(338 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-text.text02 img { width: calc(338 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-text.text03 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-text.text03 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-text.text03 img { width: calc(446 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-text.text03 img { width: calc(446 / var(--campus-sp-size) * var(--pc-size)); } }
.promise-text.text04 { text-align: right; }
@media screen and (max-width: 767px) { .promise-text.text04 { margin-bottom: calc(30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-text.text04 { margin-bottom: calc(30 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-text.text04 { padding-right: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-text.text04 { padding-right: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .promise-text.text04 img { width: calc(524 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .promise-text.text04 img { width: calc(524 / var(--campus-sp-size) * var(--pc-size)); } }

/*--------------------------------------------------------------------------------------- color
----------------------------------------------------------------------------------------*/
.color { background: url(../img/color_bg.png) top calc(40 / var(--campus-sp-size) * var(--sp-size)) right 0/calc(78 / var(--campus-sp-size) * var(--sp-size)) no-repeat; }
@media screen and (max-width: 767px) { .color { padding: calc(75 / var(--campus-sp-size) * var(--sp-size)) 0 calc(45 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .color { padding: calc(75 / var(--campus-sp-size) * var(--pc-size)) 0 calc(45 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .color-title { margin-bottom: calc(65 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .color-title { margin-bottom: calc(65 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .color-title img { width: calc(378 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .color-title img { width: calc(378 / var(--campus-sp-size) * var(--pc-size)); } }
.color-image { text-align: left; }
@media screen and (max-width: 767px) { .color-image img { width: calc(678 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .color-image img { width: calc(678 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .color { background-position: top calc(40 / var(--campus-sp-size) * var(--pc-size)) right 0; background-size: calc(78 / var(--campus-sp-size) * var(--pc-size)); } }
/*--------------------------------------------------------------------------------------- polyphenols
----------------------------------------------------------------------------------------*/
.polyphenols { background-color: #fff9f0; }
@media screen and (max-width: 767px) { .polyphenols { padding: calc(75 / var(--campus-sp-size) * var(--sp-size)) 0 0; } }
@media screen and (min-width: 768px) { .polyphenols { padding: calc(75 / var(--campus-sp-size) * var(--pc-size)) 0 0; } }
@media screen and (max-width: 767px) { .polyphenols-title { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .polyphenols-title { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .polyphenols-title img { width: calc(358 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .polyphenols-title img { width: calc(358 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .polyphenols-image.image01 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .polyphenols-image.image01 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .polyphenols-image.image01 img { width: calc(536 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .polyphenols-image.image01 img { width: calc(536 / var(--campus-sp-size) * var(--pc-size)); } }
.polyphenols-image.image02 img { width: 100%; }
@media screen and (max-width: 767px) { .polyphenols-text { margin-bottom: calc(85 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .polyphenols-text { margin-bottom: calc(85 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .polyphenols-text img { width: calc(452 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .polyphenols-text img { width: calc(452 / var(--campus-sp-size) * var(--pc-size)); } }

/*--------------------------------------------------------------------------------------- name
----------------------------------------------------------------------------------------*/
.name { background: url(../img/name_bg.png) top calc(35 / var(--campus-sp-size) * var(--sp-size)) left 0/100% no-repeat; }
@media screen and (max-width: 767px) { .name { padding: calc(95 / var(--campus-sp-size) * var(--sp-size)) 0 calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name { padding: calc(95 / var(--campus-sp-size) * var(--pc-size)) 0 calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-title { margin-bottom: calc(30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-title { margin-bottom: calc(30 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-title img { width: calc(268 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-title img { width: calc(268 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-image.image01 { margin-bottom: calc(30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-image.image01 { margin-bottom: calc(30 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-image.image01 img { width: calc(246 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-image.image01 img { width: calc(246 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-image.image02 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-image.image02 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-image.image02 img { width: calc(553 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-image.image02 img { width: calc(553 / var(--campus-sp-size) * var(--pc-size)); } }
.name-image.image03 { text-align: left; }
@media screen and (max-width: 767px) { .name-image.image03 { margin-bottom: calc(80 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-image.image03 { margin-bottom: calc(80 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-image.image03 img { width: calc(704 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-image.image03 img { width: calc(704 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-image.image04 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-image.image04 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-image.image04 img { width: calc(619 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-image.image04 img { width: calc(619 / var(--campus-sp-size) * var(--pc-size)); } }
.name-image.image05 { text-align: right; }
@media screen and (max-width: 767px) { .name-image.image05 { margin-bottom: calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-image.image05 { margin-bottom: calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-image.image05 img { width: calc(698 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-image.image05 img { width: calc(698 / var(--campus-sp-size) * var(--pc-size)); } }
.name-image.image06 { text-align: left; }
@media screen and (max-width: 767px) { .name-image.image06 { margin-bottom: calc(65 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-image.image06 { margin-bottom: calc(65 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-image.image06 img { width: calc(700 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-image.image06 img { width: calc(700 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-image.image07 { margin-bottom: calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-image.image07 { margin-bottom: calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-image.image07 img { width: calc(490 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-image.image07 img { width: calc(490 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-image.image08 img { width: calc(571 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-image.image08 img { width: calc(571 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-text.text01 { margin-bottom: calc(65 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-text.text01 { margin-bottom: calc(65 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-text.text01 img { width: calc(310 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-text.text01 img { width: calc(310 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-text.text02 { margin-bottom: calc(90 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-text.text02 { margin-bottom: calc(90 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-text.text02 img { width: calc(300 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-text.text02 img { width: calc(300 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-text.text03 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-text.text03 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-text.text03 img { width: calc(288 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-text.text03 img { width: calc(288 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-text.text04 { margin-bottom: calc(65 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-text.text04 { margin-bottom: calc(65 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .name-text.text04 img { width: calc(489 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .name-text.text04 img { width: calc(489 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .name { background-position: top calc(35 / var(--campus-sp-size) * var(--pc-size)) right 0; } }
/*--------------------------------------------------------------------------------------- guarantee
----------------------------------------------------------------------------------------*/
.guarantee { background-color: #fff9f0; }
@media screen and (max-width: 767px) { .guarantee { padding: 0 0 calc(60 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .guarantee { padding: 0 0 calc(60 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .guarantee-title.title01 { margin-bottom: calc(60 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .guarantee-title.title01 { margin-bottom: calc(60 / var(--campus-sp-size) * var(--pc-size)); } }
.guarantee-title.title01 img { width: 100%; }
@media screen and (max-width: 767px) { .guarantee-title.title02 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .guarantee-title.title02 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .guarantee-title.title02 img { width: calc(404 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .guarantee-title.title02 img { width: calc(404 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .guarantee-title.title03 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .guarantee-title.title03 { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .guarantee-title.title03 img { width: calc(474 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .guarantee-title.title03 img { width: calc(474 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .guarantee-image.image01 { margin-bottom: calc(60 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .guarantee-image.image01 { margin-bottom: calc(60 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .guarantee-image.image01 img { width: calc(405 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .guarantee-image.image01 img { width: calc(405 / var(--campus-sp-size) * var(--pc-size)); } }
.guarantee-image.image02 { text-align: right; }
@media screen and (max-width: 767px) { .guarantee-image.image02 { padding-right: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .guarantee-image.image02 { padding-right: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .guarantee-image.image02 img { width: calc(603 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .guarantee-image.image02 img { width: calc(603 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .guarantee-text.text01 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .guarantee-text.text01 { margin-bottom: calc(55 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .guarantee-text.text01 img { width: calc(371 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .guarantee-text.text01 img { width: calc(371 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .guarantee-text.text02 { margin-bottom: calc(80 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .guarantee-text.text02 { margin-bottom: calc(80 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .guarantee-text.text02 img { width: calc(401 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .guarantee-text.text02 img { width: calc(401 / var(--campus-sp-size) * var(--pc-size)); } }

/*--------------------------------------------------------------------------------------- product
----------------------------------------------------------------------------------------*/
@keyframes flow-images-sp { 0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(calc(-2004 / var(--campus-sp-size) * var(--sp-size)), 0, 0); } }
@keyframes flow-images-pc { 0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(calc(-2004 / var(--campus-sp-size) * var(--pc-size)), 0, 0); } }
.product { background: url(../img/product_bg01.png) top calc(20 / var(--campus-sp-size) * var(--sp-size)) left 0/100% no-repeat, url(../img/product_bg02.png) top calc(1840 / var(--campus-sp-size) * var(--sp-size)) left 0/100% no-repeat; }
@media screen and (max-width: 767px) { .product { padding: calc(105 / var(--campus-sp-size) * var(--sp-size)) 0; } }
@media screen and (min-width: 768px) { .product { padding: calc(105 / var(--campus-sp-size) * var(--pc-size)) 0; } }
.product-title { text-align: right; }
@media screen and (max-width: 767px) { .product-title { margin-bottom: calc(120 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-title { margin-bottom: calc(120 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-title { padding-right: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-title { padding-right: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-title img { width: calc(542 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-title img { width: calc(542 / var(--campus-sp-size) * var(--pc-size)); } }
.product-image { text-align: left; }
@media screen and (max-width: 767px) { .product-image img { width: calc(689 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-image img { width: calc(689 / var(--campus-sp-size) * var(--pc-size)); } }
.product-button { margin: 1.5384615385rem 0 0; }
.product-button a { position: relative; display: flex; align-items: center; justify-content: center; width: 24.6153846154rem; height: 6.9230769231rem; margin: 0 auto; background: linear-gradient(180deg, #74ce00 0, #64b200 100%); box-shadow: 0 .2211253846rem 0 #5a9f00; border-radius: 4.7910461538rem; }
.product-button a img { position: relative; top: -.0769230769rem; left: 1.3846153846rem; width: 18.7692307692rem; height: 3.9230769231rem; }
.product-gallery { overflow: hidden; }
@media screen and (max-width: 767px) { .product-gallery { margin-bottom: calc(100 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-gallery { margin-bottom: calc(100 / var(--campus-sp-size) * var(--pc-size)); } }
.product-gallery-container { margin: 3.3846153846rem 0 0; display: flex; -webkit-animation: 45s linear infinite flow-images-sp; animation: 45s linear infinite flow-images-sp; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
@media screen and (max-width: 767px) { .product-gallery-container { width: calc(4008 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-gallery-container { width: calc(4008 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-gallery-container { height: calc(632 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-gallery-container { height: calc(632 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-gallery-container img { width: calc(4008 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-gallery-container img { width: calc(4008 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-gallery-container img { height: calc(632 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-gallery-container img { height: calc(632 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-text { margin-bottom: calc(25 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-text { margin-bottom: calc(25 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .product-text img { width: calc(515 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .product-text img { width: calc(515 / var(--campus-sp-size) * var(--pc-size)); } }

@media screen and (min-width: 768px) { .product { background-position: top calc(20 / var(--campus-sp-size) * var(--pc-size)) right 0, top calc(1840 / var(--campus-sp-size) * var(--pc-size)) right 0; }
  .product-gallery-container { -webkit-animation: 45s linear infinite flow-images-pc; animation: 45s linear infinite flow-images-pc; } }
/*--------------------------------------------------------------------------------------- message
----------------------------------------------------------------------------------------*/
.message { background: url(../img/message_bg.png) top 0 left 0/cover no-repeat; }
@media screen and (max-width: 767px) { .message { padding: calc(75 / var(--campus-sp-size) * var(--sp-size)) calc(50 / var(--campus-sp-size) * var(--sp-size)) calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message { padding: calc(75 / var(--campus-sp-size) * var(--pc-size)) calc(50 / var(--campus-sp-size) * var(--pc-size)) calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message { min-height: calc(1870 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message { min-height: calc(1870 / var(--campus-sp-size) * var(--pc-size)); } }
.message-wrap { background-color: rgba(255, 255, 255, 0.9); }
@media screen and (max-width: 767px) { .message-wrap { padding: calc(45 / var(--campus-sp-size) * var(--sp-size)) 0 calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-wrap { padding: calc(45 / var(--campus-sp-size) * var(--pc-size)) 0 calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message-wrap { border-radius: calc(30 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-wrap { border-radius: calc(30 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message-logo { margin-bottom: calc(70 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-logo { margin-bottom: calc(70 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message-logo img { width: calc(105 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-logo img { width: calc(105 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message-title { margin-bottom: calc(60 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-title { margin-bottom: calc(60 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message-title img { width: calc(460 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-title img { width: calc(460 / var(--campus-sp-size) * var(--pc-size)); } }
.message-image { text-align: left; }
@media screen and (max-width: 767px) { .message-image { margin-bottom: calc(50 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-image { margin-bottom: calc(50 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message-image img { width: calc(616 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-image img { width: calc(616 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message-text.text01 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-text.text01 { margin-bottom: calc(75 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message-text.text01 img { width: calc(454 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-text.text01 img { width: calc(454 / var(--campus-sp-size) * var(--pc-size)); } }
@media screen and (max-width: 767px) { .message-text.text02 img { width: calc(482 / var(--campus-sp-size) * var(--sp-size)); } }
@media screen and (min-width: 768px) { .message-text.text02 img { width: calc(482 / var(--campus-sp-size) * var(--pc-size)); } }