@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp.css");
@import url("lib/remodal.css");
@import url("lib/swiper-bundle.min.css");
/* ------------------------------------------------
 vars
------------------------------------------------ */
:root {
  --nvw: 1vw;
  --font-base: YakuHanJP, "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --color-black: #303030;
  --color-gold: #CEB167;
  --color-gold2: #A7925B;
  --color-blue: #1E4D9E;
  --color-green: #08968A;
  --color-lgreen: #A0C536;
  --color-pink: #DB5580;
  --drop-shadow-white: drop-shadow(0 0 0.5em #fff);
  --height-header: 51px;
}
@media screen and (max-width: 767px) {
  :root {
    --height-header: 56px;
  }
}

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

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  font-size: 1em;
  margin: 0;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

input, button,
textarea, select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

img {
  vertical-align: top;
}

/* -------------------------------------------------------
 base
---------------------------------------------------------- */
html {
  position: relative;
}
html.is-locked {
  touch-action: none;
  overflow: hidden;
}

body {
  padding-top: var(--height-header) !important;
}

#contents {
  color: var(--color-blue);
  font-family: var(--font-base);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
  position: relative;
}
#contents img {
  max-width: 100%;
  height: auto;
}
#contents sup {
  font-size: 0.5em;
}
@media screen and (min-width: 770px) {
  .sp_show {
    display: none;
  }
}
@media screen and (max-width: 769.9px) {
  body .pc_show {
    display: none;
  }
  body sup {
    font-size: 8px;
  }
}
/* ------------------------------------------------
 font-size
------------------------------------------------ */
#contents, .remodal {
  font-size: 4.1025641026vw;
}
@media screen and (min-width: 770px) {
  #contents, .remodal {
    font-size: min(16px, 1.1940298507vw);
  }
}
/* ------------------------------------------------
 utility
------------------------------------------------ */
/* ------------------------------------------------
 basic_btn
------------------------------------------------ */
button.basic_btn {
  color: inherit;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.basic_btn {
  color: var(--color-blue) !important;
  font-size: 1em;
  text-decoration: none !important;
  line-height: 1;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-radius: 100px;
  background-color: transparent;
  cursor: pointer;
  align-content: center;
  display: block;
}
.basic_btn[disabled] {
  cursor: default;
}
.basic_btn .txt {
  font-size: 0.875em;
  font-weight: bold;
  letter-spacing: 0.15em;
  display: block;
}
@media screen and (any-hover: hover) {
  .basic_btn {
    transition: background-color 0.4s ease;
  }
  .basic_btn:hover {
    background-color: #F2F6FB;
  }
}
@media screen and (min-width: 770px) {
  .basic_btn .txt {
    font-size: 0.875em;
  }
}

/* ----------------------------
 arrow_next
------------------------------*/
.basic_btn.arrow_next {
  display: inline-flex;
  align-items: center;
  gap: 1.5em;
}
.basic_btn.arrow_next .txt {
  letter-spacing: 0.25em;
}
@media screen and (any-hover: hover) {
  .basic_btn.arrow_next .arrow::after {
    transition: opacity 0.4s var(--easeOutCubic);
  }
  .basic_btn.arrow_next:hover .arrow::after {
    opacity: 1;
  }
}

.m-pageTop.fadeOut .m-pageTop_btn {
  opacity: 0;
}

/* ------------------------------------------------
 contents
------------------------------------------------ */
#contents {
  margin: 0 auto;
  overflow: visible;
}
#contents .note {
  font-size: 0.625em;
  font-weight: 500;
  line-height: 1.5;
}
#contents p.note,
#contents .note li {
  text-indent: -1em;
  padding-left: 1em;
}
#contents p.note + li,
#contents .note li + li {
  margin-top: 0.4em;
}
#contents .note.num li {
  text-indent: -1.5em;
  padding-left: 1.5em;
}
@media screen and (min-width: 770px) {
  #contents {
    min-width: 1200px;
    position: relative;
  }
}

/* ------------------------------------------------
 rayout
------------------------------------------------ */
.section {
  width: 100%;
  position: relative;
  z-index: 1;
  scroll-snap-align: start;
}
.section img {
  max-width: unset;
  width: 100%;
}
.section .ff_mincho {
  letter-spacing: 0.2em;
}
.section .ff_mincho .kana {
  letter-spacing: 0.05em;
}
.section > .inner {
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
@media screen and (min-width: 770px) {
  .section {
    margin: 0 auto;
    width: 100%;
  }
  .section > .inner {
    width: 62.5em;
  }
}

/* ------------------------------------------------
 basic_style
------------------------------------------------ */
.section.basic_style .sheader .title .en, .section.basic_style .sheader .title .ja {
  line-height: 1;
  display: block;
}
.section.basic_style .sheader .title .en {
  color: rgba(225, 234, 245, 0.5);
  font-size: 4.375em;
  font-weight: 500;
  text-align: left;
}
.section.basic_style .sheader .title .ja {
  color: var(--color-blue);
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.18em;
}
@media screen and (min-width: 770px) {
  .section.basic_style .sheader .title .en {
    font-size: 6.25em;
    text-align: center;
  }
  .section.basic_style .sheader .title .ja {
    font-size: 1.5em;
    margin-top: 2em;
  }
  .section.basic_style .sbody {
    margin-top: 3.75em;
  }
}

/* ------------------------------------------------
 slide-in スクロール連動エフェクト
------------------------------------------------ */
.section .js-anime-ready {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-duration: 0.8s;
  animation-timing-function: ease;
}
.section .cast-group .cast:nth-child(2) {
  animation-delay: 0.2s;
}
.section .cast-group .cast:nth-child(3) {
  animation-delay: 0.4s;
}
.section .cast-group .cast:nth-child(4) {
  animation-delay: 0.6s;
}
.section .cast-group .cast + .cast {
  animation-delay: 0.2s;
}
.section .cast-group .cast + .cast + .cast {
  animation-delay: 0.4s;
}
.section .cast-group .cast + .cast + .cast + .cast {
  animation-delay: 0.6s;
}
.section .js-anime-start.js-anime-active {
  animation-name: fadein_up;
}
.section .js-anime-start.js-anime-fadein-up {
  animation-name: fadein_up;
}
.section .js-anime-start.js-anime-slidein-up {
  animation-name: fadein_up;
}
.section .js-anime-start.js-anime-fadeout-down {
  animation-name: fadeout_down;
}
.section .js-anime-start.js-anime-jumpin {
  animation-name: jumping;
  transform-origin: 50% 100%;
}

@keyframes fadein {
  0% {
    opacity: 0;
    filter: blur(0.625em);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes fadein_up {
  0% {
    opacity: 0;
    transform: translateY(3.125em);
    filter: blur(1.25em);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
@keyframes fadeout_down {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(3.125em);
    filter: blur(1.25em);
  }
}
@keyframes jumping {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  10% {
    transform: scale(1.01, 0.97) translate(0%, 1%);
  }
  40% {
    transform: scale(1.02, 0.95) translate(0%, 2%);
  }
  50% {
    transform: scale(1, 1) translate(0%, 0%);
    opacity: 1;
  }
  60% {
    transform: scale(0.96, 1.03) translate(0%, -4%);
  }
  75% {
    transform: scale(0.97, 1.06) translate(0%, -2%);
  }
  85% {
    transform: scale(1.06, 0.95) translate(0%, 1%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
    opacity: 1;
  }
}
/* ------------------------------------------------
 remodal common
------------------------------------------------ */
.remodal-overlay {
  background-color: #fff;
}
.remodal-overlay.remodal-is-opening, .remodal-overlay.remodal-is-closing {
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
.remodal-overlay.remodal-is-opening {
  animation-name: remodal-overlay-opening-keyframes;
}
.remodal-overlay.remodal-is-closing {
  animation-name: remodal-overlay-closing-keyframes;
}

body:has(.remodal-is-opened) {
  overflow: hidden;
}

/* Default theme styles of the wrapper */
.remodal-wrapper {
  scrollbar-width: none;
  box-sizing: border-box;
  overscroll-behavior-y: contain;
  overflow-y: auto;
  overflow-x: clip;
}
/* Default theme styles of the modal dialog */
.remodal {
  overscroll-behavior-y: contain;
}
.remodal.remodal-is-opening, .remodal.remodal-is-closing {
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
.remodal.remodal-is-opening {
  animation-name: remodal-opening-keyframes;
}
.remodal.remodal-is-closing {
  animation-name: remodal-closing-keyframes;
}

/* ----------------------------
 Keyframes
------------------------------*/
@keyframes remodal-opening-keyframes {
  from {
    transform: scale(1.01);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes remodal-closing-keyframes {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.99);
    opacity: 0;
    filter: blur(0);
  }
}
@keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* ------------------------------------------------
 remodal
------------------------------------------------ */
.remodal {
  color: var(--color-blue);
  font-family: var(--font-base);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: left;
  background-color: #fff;
  margin: 0 auto;
  width: 100%;
}
/* ----------------------------
 remodal_close
------------------------------*/
button.remodal_close.bottom {
  margin: 1.875em auto;
  padding: 0.875em 1.5em 0.875em 1.625em;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
}
button.remodal_close.bottom .txt {
  font-size: 0.75em;
  font-weight: bold;
}
button.remodal_close.bottom::after {
  content: "";
  background: url(../images/common/icon_close.svg) 0/contain no-repeat;
  width: 0.75em;
  aspect-ratio: 1/1;
  display: block;
}
button.remodal_close.top {
  border: none;
  border-radius: 0;
  width: 100%;
  height: 3.4375em;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (min-width: 770px) {
  button.remodal_close.bottom {
    margin: 1.875em auto;
    padding: 1.125em 2.5em;
    -moz-column-gap: 0.5em;
         column-gap: 0.5em;
  }
  button.remodal_close.bottom .txt {
    font-size: 0.875em;
  }
  button.remodal_close.bottom::after {
    width: 0.75em;
  }
  button.remodal_close.top {
    height: 3.4375em;
  }
  button.remodal_close.top:hover {
    background-color: transparent;
  }
}

/* ------------------------------------------------
remodal about_function
------------------------------------------------ */
.remodal.about_function > .inner {
  padding-top: 3.4375em;
  box-sizing: border-box;
  pointer-events: all;
}
.remodal.about_function .sheader {
  padding-top: 1.5625em;
  position: relative;
}
.remodal.about_function .sheader > * {
  position: relative;
}
.remodal.about_function .sheader .f_num {
  font-size: 0.75em;
  font-weight: bold;
  margin: 0.8333333333em 0 1em 2.5em;
}
.remodal.about_function .sheader .title .line {
  color: #fff;
  font-size: 1.875em;
  font-weight: bold;
  line-height: 1.85;
  background-color: var(--color-gold);
  margin-left: 1em;
  padding: 0 0.4em;
  display: inline-block;
}
.remodal.about_function .sheader .title .line:last-child {
  margin-top: 0.3333333333em;
}
.remodal.about_function .sheader .care {
  padding-right: 1.25em;
  display: flex;
  justify-content: end;
  -moz-column-gap: 0.625em;
       column-gap: 0.625em;
  position: relative;
}
.remodal.about_function .sheader .care::before {
  content: "";
  border-top: 1px solid var(--color-blue);
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
}
.remodal.about_function .sheader .care li {
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  line-height: 1.25;
  border-radius: 6.25em;
  background-color: #AEC7E9;
  width: 4.375em;
  aspect-ratio: 1/1;
  align-content: center;
  position: relative;
}
.remodal.about_function .sheader::before {
  content: "";
  border-radius: 1.875em;
  background-color: #FDF8EB;
  width: 25em;
  height: calc(100% - 1em);
  position: absolute;
  left: 3.125em;
  top: 0;
}
.remodal.about_function .sbody {
  margin-top: 3.75em;
}
.remodal.about_function .sbody .material, .remodal.about_function .sbody .fig.function {
  margin-left: auto;
  margin-right: auto;
  width: 20.625em;
}
.remodal.about_function .sbody .material + .note, .remodal.about_function .sbody .fig.function + .note {
  color: var(--color-blue);
  text-align: right;
  margin-top: 1em;
  margin-right: 3em;
}
.remodal.about_function .sbody .material {
  border-top: 1px solid var(--color-blue);
  padding-top: 2.5em;
}
.remodal.about_function .sbody .material .copy {
  font-size: 0.75em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1em;
}
.remodal.about_function .sbody .material .heading {
  font-size: 1.125em;
  font-weight: bold;
  text-align: center;
  line-height: 1.75;
}
.remodal.about_function .sbody .material .heading + .img {
  margin-top: 1.25em;
}
.remodal.about_function .sbody .material .img .ph {
  margin: 0 auto;
}
.remodal.about_function .sbody .material .img .detail {
  font-size: 0.875em;
  line-height: 1.85;
  text-align: left;
  letter-spacing: normal;
  letter-spacing: 0.025em;
  margin-top: 1.4285714286em;
}
.remodal.about_function .sbody .material .img .detail strong {
  font-weight: inherit;
  background-color: #FBF1D7;
}
.remodal.about_function .sbody .material .img + .note {
  color: var(--color-blue);
  text-align: right;
  margin-top: 0.5em;
}
.remodal.about_function .sbody .material + .fig {
  margin-top: 2.8125em;
}
.remodal.about_function .fig.function {
  border-bottom: 1px solid var(--color-blue);
  padding-bottom: 2.5em;
}
.remodal.about_function .fig.function img {
  display: none;
}
.remodal.about_function .study {
  background-color: #FDF8EB;
  margin-top: 3.125em;
  padding: 1.875em 1.5625em;
  display: none;
}
.remodal.about_function .study .heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.remodal.about_function .study .heading .title {
  font-weight: bold;
  display: flex;
  align-items: center;
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
}
.remodal.about_function .study .heading .title::before {
  content: "";
  background: url(../images/common/h_bulet.svg) 0/contain no-repeat;
  width: 0.75em;
  aspect-ratio: 1/1;
  display: inline-block;
}
.remodal.about_function .study .heading .label {
  color: var(--color-pink);
  font-size: 0.75em;
  font-weight: bold;
  border: 1px solid var(--color-pink);
  line-height: 1;
  display: flex;
}
.remodal.about_function .study .heading .label span {
  padding: 0.5em 0.8333333333em 0.6666666667em;
}
.remodal.about_function .study .heading .label span:last-child {
  color: #fff;
  font-size: 1.1666666667em;
  font-style: normal;
  background-color: var(--color-pink);
  padding: 0 0.4166666667em;
  align-content: center;
}
.remodal.about_function .study .results {
  border-radius: 1.875em;
  background-color: #fff;
  margin-top: 0.9375em;
  padding: 1.5625em 1.5625em;
}
.remodal.about_function .study .results .detail, .remodal.about_function .study .results .summary {
  color: #C9A74E;
  text-align: center;
  margin: 0 auto;
}
.remodal.about_function .study .results .detail {
  font-size: 0.625em;
  font-weight: bold;
  line-height: 1;
  letter-spacing: normal;
  border-width: 1px;
  border-style: solid;
  padding: 0.3125em;
}
.remodal.about_function .study .results .summary {
  font-size: 1.375em;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1.65;
  margin-top: 0.2727272727em;
  width: -moz-fit-content;
  width: fit-content;
}
.remodal.about_function .study .results .summary sup {
  font-size: 0.4545454545em;
}
.remodal.about_function .study .results .fig {
  margin-top: 0.9375em;
}
.remodal.about_function .study .results .fig img {
  width: 100%;
  height: auto;
}
.remodal.about_function .study .results .note {
  font-size: 0.5625em;
}
.remodal.about_function .note {
  color: #333;
  font-size: 0.625em;
  line-height: 1.6;
  margin-top: 1.5em;
}
.remodal.about_function[data-calo=premium] .fig.function img.premium {
  display: block;
}
.remodal.about_function[data-calo=premium] .study.premium {
  display: block;
}
.remodal.about_function[data-calo=otona] .sheader .title .line {
  background-color: var(--color-green);
}
.remodal.about_function[data-calo=otona] .sheader::before {
  background-color: #EFFBFA;
}
.remodal.about_function[data-calo=otona] .fig.function img.otona {
  display: block;
}
.remodal.about_function[data-calo=otona] .study {
  background-color: #EFFBFA;
}
.remodal.about_function[data-calo=otona] .study.otona {
  display: block;
}
.remodal.about_function[data-calo=otona] .study .results .detail, .remodal.about_function[data-calo=otona] .study .results .summary {
  color: #079689;
}
.remodal.about_function[data-calo=basic] .sheader .title .line {
  background-color: #A0C536;
}
.remodal.about_function[data-calo=basic] .sheader::before {
  background-color: #F6FAE8;
}
.remodal.about_function[data-calo=basic] .fig.function img.basic {
  display: block;
}
.remodal.about_function[data-calo=basic] .study {
  background-color: #F6FAE8;
}
.remodal.about_function[data-calo=basic] .study.basic {
  display: block;
}
.remodal.about_function[data-calo=basic] .study .results .detail, .remodal.about_function[data-calo=basic] .study .results .summary {
  color: #71BA18;
}
.remodal.about_function#modal_about_f2 .care li:nth-child(1), .remodal.about_function#modal_about_f1 .care li:nth-child(1) {
  background-color: var(--color-blue);
}
.remodal.about_function#modal_about_f3 .care li:nth-child(2), .remodal.about_function#modal_about_f4 .care li:nth-child(2) {
  background-color: var(--color-blue);
}
.remodal.about_function#modal_about_f3 .material .img .ph, .remodal.about_function#modal_about_f4 .material .img .ph {
  width: 13em;
}
.remodal.about_function#modal_about_f3 .fig.function img, .remodal.about_function#modal_about_f4 .fig.function img {
  display: block;
}
.remodal.about_function#modal_about_f5 .care li:nth-child(2) {
  background-color: var(--color-blue);
}
.remodal.about_function#modal_about_f5 .material {
  border-bottom: 1px solid var(--color-blue);
  padding-bottom: 2.5em;
}
.remodal.about_function#modal_about_f5 .material .img .ph {
  width: 11.875em;
}
.remodal.about_function#modal_about_f6 .care li:nth-child(3) {
  background-color: var(--color-blue);
}
.remodal.about_function#modal_about_f6 .material {
  border-bottom: 1px solid var(--color-blue);
  padding-bottom: 2.5em;
}
.remodal.about_function#modal_about_f6 .material .img .ph {
  width: 7.5em;
}
@media screen and (min-width: 770px) {
  .remodal.about_function {
    width: 62.5em;
  }
  .remodal.about_function > .inner {
    padding-top: 3.4375em;
  }
  .remodal.about_function .sheader {
    padding-top: 0.9375em;
    position: relative;
  }
  .remodal.about_function .sheader .f_num {
    font-size: 0.875em;
    margin: 0.3571428571em 0 0.8571428571em;
  }
  .remodal.about_function .sheader .title .line {
    font-size: 2.5em;
    margin-left: 0;
    padding: 0 0.3em;
  }
  .remodal.about_function .sheader .title .line.l1 {
    padding-right: 0;
  }
  .remodal.about_function .sheader .title .line.l2 {
    margin-top: 0;
    margin-left: 0;
    padding-left: 0;
  }
  .remodal.about_function .sheader .care {
    padding-right: 0;
    -moz-column-gap: 0.75em;
         column-gap: 0.75em;
  }
  .remodal.about_function .sheader .care::before {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
  }
  .remodal.about_function .sheader .care li {
    font-size: 1.25em;
    width: 4.5em;
  }
  .remodal.about_function .sheader::before {
    border-radius: 1.875em;
    width: 50vw;
    height: calc(100% + 3.4375em);
    left: unset;
    right: calc(50% + 14.375em);
  }
  .remodal.about_function .sbody {
    margin-top: 8.75em;
  }
  .remodal.about_function .sbody .material, .remodal.about_function .sbody .fig.function {
    width: 62.5em;
  }
  .remodal.about_function .sbody .material + .note, .remodal.about_function .sbody .fig.function + .note {
    margin-right: 0;
  }
  .remodal.about_function .sbody .material {
    padding-top: 2.8125em;
  }
  .remodal.about_function .sbody .material .copy {
    font-size: 1em;
  }
  .remodal.about_function .sbody .material .heading {
    font-size: 1.5em;
  }
  .remodal.about_function .sbody .material .heading + .img {
    margin-top: 2.5em;
  }
  .remodal.about_function .sbody .material .img {
    margin: 0 auto;
    width: 49.375em;
  }
  .remodal.about_function .sbody .material .img .ph img {
    max-width: 100%;
  }
  .remodal.about_function .sbody .material .img .detail {
    font-size: 1.125em;
    text-align: center;
  }
  .remodal.about_function .fig.function img {
    margin: 0 auto;
    width: 49.375em;
  }
  .remodal.about_function .study {
    border-radius: 1.875em;
    margin-top: 5em;
    padding: 1.875em 2.5em;
  }
  .remodal.about_function .study .heading .title {
    font-size: 1.25em;
    -moz-column-gap: 0.4em;
         column-gap: 0.4em;
  }
  .remodal.about_function .study .heading .title::before {
    margin-top: 0.1em;
    width: 0.8em;
  }
  .remodal.about_function .study .heading .label {
    font-size: 0.75em;
  }
  .remodal.about_function .study .heading .label span {
    padding: 0.5833333333em 0.8333333333em 0.5833333333em;
  }
  .remodal.about_function .study .results {
    border-radius: 1.875em;
    margin-top: 1.5625em;
    padding: 2.5em;
  }
  .remodal.about_function .study .results > * {
    margin-left: auto;
    margin-right: auto;
  }
  .remodal.about_function .study .results .detail {
    font-size: 0.875em;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 27.8571428571em;
  }
  .remodal.about_function .study .results .summary {
    font-size: 1.875em;
    margin-top: 0.2em;
    width: -moz-fit-content;
    width: fit-content;
  }
  .remodal.about_function .study .results .fig {
    margin-top: 1.25em;
    width: 25em;
  }
  .remodal.about_function .study .results .note {
    font-size: 0.625em;
    width: 40em;
  }
  .remodal.about_function .note {
    font-size: 0.625em;
    margin-top: 2.5em;
  }
  .remodal.about_function#modal_about_f3 .material .img .ph, .remodal.about_function#modal_about_f4 .material .img .ph {
    width: 15.75em;
  }
  .remodal.about_function#modal_about_f3 .fig.function img, .remodal.about_function#modal_about_f4 .fig.function img {
    width: 56.25em;
  }
  .remodal.about_function#modal_about_f5 .material .img .ph, .remodal.about_function#modal_about_f6 .material .img .ph {
    width: 14.625em;
  }
  .remodal.about_function#modal_about_f5 .study, .remodal.about_function#modal_about_f6 .study {
    grid-column: 1/span 2;
  }
  .remodal.about_function#modal_about_f5 .study .results > *, .remodal.about_function#modal_about_f6 .study .results > * {
    margin-left: auto;
    margin-right: auto;
  }
  .remodal.about_function#modal_about_f5 .study .results .detail, .remodal.about_function#modal_about_f6 .study .results .detail {
    width: 27em;
  }
  .remodal.about_function#modal_about_f5 .study .results .note, .remodal.about_function#modal_about_f6 .study .results .note {
    width: 37.8em;
  }
  .remodal.about_function#modal_about_f5 .study .results .fig, .remodal.about_function#modal_about_f6 .study .results .fig {
    width: 24.8125em;
  }
  .remodal.about_function#modal_about_f6 .material .img .ph {
    width: 11.9375em;
  }
  .remodal.about_function#modal_about_f6 .study .results .fig {
    width: 25em;
  }
}

/* ------------------------------------------------
 remodal movie
------------------------------------------------ */
.remodal.movie {
  width: 100% !important;
  position: relative;
}
.remodal.movie .movie {
  width: 100%;
  aspect-ratio: 16/9;
}
.remodal.movie .movie iframe {
  width: 100%;
  height: 100%;
  display: block;
}
.remodal.movie.short {
  padding-top: 1.875em;
  width: -moz-fit-content !important;
  width: fit-content !important;
}
.remodal.movie.short .movie {
  margin: 0 auto;
  max-width: 21.875em;
  max-height: 38.9375em;
  width: auto;
  height: 75dvh;
  aspect-ratio: 9/16;
}
@media screen and (min-width: 770px) {
  .remodal.movie {
    max-width: 62.5em;
  }
}
@media screen and (max-width: 769.9px) {
  .remodal.movie {
    max-width: 21.875em;
  }
}

/* ------------------------------------------------
 stories
------------------------------------------------ */
#stories {
  position: relative;
  width: 100%;
  height: 1230.7692307692vw;
}
#stories > .inner {
  width: 100%;
  height: calc(100svh - var(--height-header));
  position: sticky;
  left: 0;
  top: var(--height-header);
  overflow-x: clip;
}
#stories .scene {
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  align-content: center;
}
#stories .scene .txt {
  font-weight: bold;
  text-align: center;
  line-height: 2;
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  z-index: 2;
}
#stories .scene .stage {
  width: 100%;
  height: 100%;
  min-height: 40em;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#stories .scene .ph {
  position: absolute;
  z-index: 1;
}
#stories .scene.show {
  opacity: 1;
}
#stories #scene_1 .stage .ph {
  opacity: 0;
}
#stories #scene_1 .ph1 {
  width: 13.75em;
}
#stories #scene_1 .ph2 {
  width: 8.1875em;
}
#stories #scene_1 .ph3 {
  width: 8.125em;
}
#stories #scene_1 .ph4 {
  width: 14.5625em;
}
#stories #scene_2 {
  z-index: 2;
}
#stories #scene_2 .ph1 {
  width: 9.8125em;
}
#stories #scene_2 .ph2 {
  width: 7.875em;
}
#stories #scene_2 .ph3 {
  width: 7.4375em;
}
#stories #scene_2 .ph4 {
  width: 15.125em;
  bottom: 0;
}
#stories #scene_3 {
  z-index: 3;
}
@media screen and (max-width: 769.9px) {
  #stories #scene_2 .txt {
    margin-top: 1.75em;
  }
  #stories #scene_3 {
    align-content: center;
  }
  #stories #scene_3 .body {
    padding-top: 1.25em;
    padding-bottom: 0.625em;
    margin-left: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    row-gap: 9.4594594595vh;
  }
  #stories #scene_3 .body img {
    width: auto;
    height: 100%;
  }
  #stories #scene_3 .body .img {
    border-radius: 1.875em 0 0 1.875em;
    width: 21.875em;
    flex: 1;
    overflow: hidden;
  }
  #stories #scene_3 .body .img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 0% 0%;
       object-position: 0% 0%;
    transform-origin: 33% 33%;
  }
  #stories #scene_3 .body .calo {
    margin: 0 auto;
    height: min(9.25em, 20vh);
    height: 9.25em;
    aspect-ratio: 546/323;
    opacity: 0;
  }
}
@media screen and (min-width: 770px) {
  #stories {
    margin-top: 120px;
    height: 343.75em;
  }
  #stories > .inner {
    height: min(100vh - var(--height-header), 56.25em);
  }
  #stories .scene .txt {
    font-size: 1.375em;
    line-height: 2.2;
  }
  #stories .scene .stage {
    min-height: 960px;
    min-height: unset;
    min-height: 43.75em;
  }
  #stories #scene_1 .ph1 {
    width: 23.4375em;
  }
  #stories #scene_1 .ph2 {
    width: 12.1875em;
  }
  #stories #scene_1 .ph3 {
    width: 13.1875em;
  }
  #stories #scene_1 .ph4 {
    width: 24.5625em;
  }
  #stories #scene_2 .ph1 {
    width: 17.9375em;
  }
  #stories #scene_2 .ph2 {
    width: 13.6875em;
  }
  #stories #scene_2 .ph3 {
    width: 11.8125em;
  }
  #stories #scene_2 .ph4 {
    width: 25.25em;
  }
  #stories #scene_3 .body {
    margin: 0 auto;
    max-width: 1920px !important;
    height: 100%;
    align-content: center;
    position: relative;
  }
  #stories #scene_3 .body .img {
    border-radius: 1.875em;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }
  #stories #scene_3 .body .img img {
    margin: 0 auto;
    max-width: unset;
    width: 68.75em;
    transform-origin: 0 0;
    position: relative;
  }
  #stories #scene_3 .body .img.s1 {
    width: 21.875em;
    height: 21.875em;
  }
  #stories #scene_3 .body .img.s1 img {
    transform: translate(-13.4545%, -4.6154%);
  }
  #stories #scene_3 .body .img.s2 {
    width: 1100px;
    height: 650px;
  }
  #stories #scene_3 .body .img.s2 img {
    transform: scale(1.145);
    left: -0.9090909091%;
    top: -4.6153846154%;
  }
  #stories #scene_3 .body .img.s3 {
    border-radius: 0;
    width: 100%;
    height: 100%;
  }
  #stories #scene_3 .body .img.s3 img {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: scale(1.745);
    transform: none;
    transform-origin: 33% 33%;
  }
  #stories #scene_3 .body .calo {
    width: 11.8125em;
    position: absolute;
    left: calc(50% + 15.75em);
    top: calc(50% - 14.75em);
    top: calc(50% - 11.625em);
    opacity: 0;
  }
  #stories.out #scene_3 .body .img img {
    -o-object-fit: cover;
       object-fit: cover;
    transform: none;
  }
}

/* ------------------------------------------------
 reviews
------------------------------------------------ */
#reviews {
  color: var(--color-blue);
  margin-top: 4.0625em;
}
#reviews .sheader .title .en {
  margin-left: -0.2285714286em;
}
#reviews .sheader .copy {
  margin-top: 0.5em;
}
#reviews .sbody {
  margin: 2.125em 1.5625em 0;
}
@media screen and (min-width: 770px) {
  #reviews {
    margin-top: 9.375em;
  }
  #reviews .sheader .title {
    margin-left: 0;
  }
  #reviews .sheader .copy {
    margin-top: 2em;
  }
  #reviews .sbody {
    margin-top: 3.75em;
  }
}

/* ----------------------------
 rating-stars
------------------------------*/
.rating-stars {
  background-color: #E4D4A9;
  -webkit-mask: url(../images/common/review_stars.svg) 0 0/contain no-repeat;
          mask: url(../images/common/review_stars.svg) 0 0/contain no-repeat;
  width: 5.75em;
  aspect-ratio: 92/15;
  position: relative;
}
.rating-stars i {
  background-color: var(--color-gold2);
  width: 0%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (min-width: 770px) {
  .rating-stars {
    width: 7.125em;
  }
}

/* ----------------------------
 review_tabs
------------------------------*/
.review_tabs {
  display: flex;
  align-items: stretch;
  -moz-column-gap: 0.3125em;
       column-gap: 0.3125em;
  position: relative;
}
.review_tabs .tab {
  color: inherit;
  border: none;
  background: #F2F6FB;
  padding: 0;
  min-height: 3.375em;
  flex: 1;
  cursor: pointer;
  transition: color 0.4s ease, background-color 0.4s ease;
}
.review_tabs .tab .txt {
  font-size: 0.8125em;
  font-weight: bold;
  line-height: 1.38;
  display: block;
}
.review_tabs .tab::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  top: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.review_tabs .tab:hover {
  color: #fff;
}
.review_tabs .tab.active {
  color: #fff;
  cursor: default;
}
.review_tabs .tab.active::after {
  background-color: inherit;
  opacity: 1;
}
.review_tabs .tab:nth-of-type(1):hover, .review_tabs .tab:nth-of-type(1).active {
  background-color: var(--color-gold);
}
.review_tabs .tab:nth-of-type(2):hover, .review_tabs .tab:nth-of-type(2).active {
  background-color: var(--color-green);
}
.review_tabs .tab:nth-of-type(3):hover, .review_tabs .tab:nth-of-type(3).active {
  background-color: var(--color-lgreen);
}
@media screen and (min-width: 770px) {
  .review_tabs {
    -moz-column-gap: 0.625em;
         column-gap: 0.625em;
  }
  .review_tabs .tab .txt {
    font-size: 1.25em;
  }
}

/* ----------------------------
 review_contents
------------------------------*/
.review_contents {
  position: relative;
  overflow: hidden;
}
.review_contents .btn_more {
  color: var(--color-blue);
  margin: 1.875em auto 0;
  width: 8.125em;
  height: 2.5em;
  display: block;
}
.review_contents .content {
  padding-top: 1.875em;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}
.review_contents .content .heading {
  line-height: 1;
  border-radius: 0.625em;
  background: #FDF8EB;
  min-height: 3.75em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.review_contents .content .heading i {
  font-style: normal;
}
.review_contents .content .heading .label {
  font-size: 0.8125em;
}
.review_contents .content .heading .label.default {
  display: none;
}
.review_contents .content .heading .rating-num {
  color: var(--color-gold2);
  font-size: 1.75em;
  font-weight: 700;
  margin-bottom: 0.1em;
}
.review_contents .content .heading .rating-stars {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
.review_contents .content .list {
  margin-top: 1.875em;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1.875em;
}
.review_contents .content .list li {
  border-bottom: 1px solid var(--color-blue);
  padding-bottom: 1.5625em;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25em;
}
.review_contents .content .list li::before {
  content: "";
  background: url(../images/common/calo_basic.png) 0 0/contain no-repeat;
  width: 3.25em;
  aspect-ratio: 120/173;
  display: block;
}
.review_contents .content .list li .rating-stars {
  grid-row: 1/span 1;
  grid-column: 2/span 1;
}
.review_contents .content .list li .title {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 1.125em;
  grid-row: 1/span 1;
  grid-column: 2/span 1;
}
.review_contents .content .list li .message {
  font-size: 0.875em;
  line-height: 1.75;
  grid-column: 1/span 2;
}
.review_contents .content .list li .profile {
  font-size: 0.75em;
  grid-column: 1/span 2;
}
.review_contents .content .more_list {
  display: none;
}
.review_contents .content.active {
  position: static;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.review_contents .content.premium .list li::before {
  background-image: url(../images/common/calo_premium.png);
}
.review_contents .content.otona .list li::before {
  background-image: url(../images/common/calo_otona.png);
}
@media screen and (min-width: 770px) {
  .review_contents .btn_more {
    margin-top: 3.75em;
    width: 12.5em;
    height: 3.125em;
  }
  .review_contents .content {
    padding-top: 3.75em;
  }
  .review_contents .content .heading {
    border-radius: 0.625em;
    min-height: 5.625em;
  }
  .review_contents .content .heading .label {
    font-size: 1.125em;
  }
  .review_contents .content .heading .rating-num {
    font-size: 2.125em;
  }
  .review_contents .content .heading .rating-stars {
    margin-left: 0.625em;
    margin-right: 0.625em;
  }
  .review_contents .content .list {
    margin-top: 3.125em;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
    gap: 3.125em 3.75em;
  }
  .review_contents .content .list li {
    padding-bottom: 3.125em;
    gap: 1.5625em;
  }
  .review_contents .content .list li::before {
    width: 4.125em;
  }
  .review_contents .content .list li .rating-stars {
    grid-row: 1/span 1;
    grid-column: 2/span 1;
  }
  .review_contents .content .list li .title {
    font-size: 1.25em;
    margin-top: 1.5em;
  }
  .review_contents .content .list li .message {
    font-size: 1em;
  }
  .review_contents .content .list li .profile {
    font-size: 0.875em;
  }
}

/* ----------------------------
 口コミ0の場合
------------------------------*/
.review_contents .content.zero .heading > * {
  display: none;
}
.review_contents .content.zero .heading .default {
  display: block !important;
}
.review_contents .content.zero .list,
.review_contents .content.zero .btn_more {
  display: none;
}

/* ----------------------------
 口コミが少ない
------------------------------*/
.review_contents .content.few .btn_more {
  display: none;
}

/* ------------------------------------------------
 about
------------------------------------------------ */
#about {
  margin-top: 5em;
  overflow: hidden;
}
#about .sheader {
  overflow: hidden;
}
#about .sheader .title {
  display: flex;
  flex-direction: column;
}
#about .sheader .title .en:first-of-type {
  margin-left: -0.2285714286em;
  order: 1;
}
#about .sheader .title .en:nth-of-type(2) {
  text-align: right;
  margin-top: -0.0857142857em;
  margin-right: -0.2285714286em;
  order: 3;
}
#about .sheader .title .ja {
  margin-top: 0.2083333333em;
  order: 2;
}
#about .sbody {
  margin-top: -0.9375em;
  position: relative;
}
@media screen and (min-width: 770px) {
  #about {
    margin-top: 9.375em;
    overflow: visible;
  }
  #about .sheader .title .en:first-of-type {
    margin-left: -2.5em;
  }
  #about .sheader .title .en:nth-of-type(2) {
    text-align: center;
    margin-top: 0.04em;
    margin-right: -4.7em;
  }
  #about .sheader .title .ja {
    margin-top: 0.75em;
  }
  #about .sbody {
    margin-top: -1.5625em;
  }
}

/* ----------------------------
#about_thumb.slider
------------------------------*/
#about_thumb {
  width: 18em;
  height: 12em;
  overflow: visible;
  position: relative;
  z-index: 2 !important;
}
#about_thumb .swiper-slide {
  padding: 0 0.5em;
  width: 6em;
  box-sizing: border-box;
  align-content: center;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
#about_thumb .swiper-slide .img {
  font-size: 1em;
  border: none;
  padding: 0;
  width: 100%;
  height: auto;
  transition: transform 0.8s ease;
}
#about_thumb .swiper-slide-active {
  opacity: 1;
  z-index: 1;
}
#about_thumb .swiper-slide-prev, #about_thumb .swiper-slide-next {
  pointer-events: all;
  opacity: 1;
  cursor: pointer;
}
#about_thumb .ctrl .btn {
  border: none;
  border-radius: 60px;
  background: transparent url(../images/common/slider_arrow.svg) 0 0/contain no-repeat;
  width: 1.875em;
  aspect-ratio: 1/1;
  display: block;
  position: absolute;
  top: calc(50% - 0.9375em);
  z-index: 1;
  cursor: pointer;
}
#about_thumb .ctrl .btn:active {
  outline: none;
}
#about_thumb .ctrl .btn.next {
  right: -2.1875em;
}
#about_thumb .ctrl .btn.prev {
  left: -2.1875em;
  transform: rotate(180deg);
}
@media screen and (min-width: 770px) {
  #about_thumb {
    width: 29.25em;
    height: 20.75em;
  }
  #about_thumb .swiper-slide {
    padding: 0 0.9375em;
    width: 9.75em;
  }
  #about_thumb .ctrl .btn {
    width: 3.125em;
    top: calc(50% - 1.5625em);
  }
  #about_thumb .ctrl .btn.next {
    right: -3.4375em;
  }
  #about_thumb .ctrl .btn.prev {
    left: -3.4375em;
  }
}

/* ----------------------------
 #about_detail.slider
------------------------------*/
#about_detail {
  margin: -3.125em -0.9375em 0;
  width: calc(100vw + 1.875em);
}
#about_detail .contents {
  padding: 0 0.9375em;
}
#about_detail .contents > .inner {
  border-radius: 1.875em;
  background: linear-gradient(270deg, #FAFFE6 0%, #FFF 50%, #FAFFE6 100%);
  padding-top: 4.0625em;
  padding-bottom: 3.125em;
}
#about_detail .contents .heading {
  text-align: center;
}
#about_detail .contents .heading .name {
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1.5;
  display: block;
}
#about_detail .contents .heading .label {
  font-size: 0.75em;
  font-weight: normal;
  line-height: 1;
  border-style: solid;
  border-width: 1px;
  margin-top: 0.6666666667em;
  padding: 0.5em 0.8333333333em 0.5833333333em;
  display: inline-block;
}
#about_detail .contents .functions {
  color: #fff;
  background: var(--C_grd2, linear-gradient(270deg, #95CE2D 0%, #B0DB35 50%, #95CE2D 100%));
  margin-top: 1.875em;
  padding: 1.25em 1em;
}
#about_detail .contents .functions .copy {
  font-size: 1.125em;
  font-weight: bold;
  text-align: center;
}
#about_detail .contents .functions .list {
  margin-top: 1.25em;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625em 0.5em;
}
#about_detail .contents .functions .list button {
  color: #71BA18;
  font-size: 1em;
  border-radius: 0.3125em;
  background-color: #fff;
  width: 100%;
  display: flex;
  padding: 0.625em 0.5em;
  justify-content: space-between;
  align-items: center;
}
#about_detail .contents .functions .list button::after {
  content: "";
  background-color: #71BA18;
  -webkit-mask: url(../images/common/icon_link_arrow.svg) 0 0/contain no-repeat;
          mask: url(../images/common/icon_link_arrow.svg) 0 0/contain no-repeat;
  width: 0.3125em;
  aspect-ratio: 5/8;
  display: block;
  animation-name: arrow_blinking;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
#about_detail .contents .functions .list button .txt {
  font-size: 0.875em;
  font-weight: bold;
  text-align: left;
  letter-spacing: normal;
  line-height: 1.3;
}
#about_detail .contents .functions .list button .txt .s {
  font-size: 0.8571428571em;
  display: block;
}
#about_detail .contents .functions .list button[disabled] {
  opacity: 0.4;
  pointer-events: none;
}
#about_detail .contents .functions .list button[disabled]::after {
  content: none;
}
@media screen and (any-hover: hover) {
  #about_detail .contents .functions .list button {
    transition: all 0.4s ease;
  }
  #about_detail .contents .functions .list button:hover {
    color: #fff !important;
    background-color: #71BA18;
    background-color: rgba(113, 186, 24, 0.9);
  }
  #about_detail .contents .functions .list button:hover::after {
    background-color: #fff !important;
  }
}
#about_detail .contents .prices {
  margin: 1.875em auto 0;
  width: calc(100% - 3.75em);
  border-collapse: collapse;
}
#about_detail .contents .prices th, #about_detail .contents .prices td {
  font-size: 0.75em;
  text-align: center;
  padding: 0.8333333333em;
}
#about_detail .contents .prices th:not(:first-child), #about_detail .contents .prices td:not(:first-child) {
  border-left: 1px solid #fbffe9;
}
#about_detail .contents .prices thead th {
  color: #fff;
  background-color: var(--color-blue);
  font-weight: bold;
  text-align: center;
}
#about_detail .contents .prices tbody td {
  font-weight: 500;
  background-color: #fff;
}
#about_detail .contents .prices tbody td:not(:first-child) {
  font-size: 0.875em;
}
#about_detail .contents .prices tbody td i {
  color: #fff;
  font-style: normal;
  font-size: 0.8333333333em;
  border-radius: 0.25em;
  line-height: 1;
  background-color: #DB5580;
  margin-right: 0.5em;
  padding: 0.4em 0.5em 0.5em;
  display: inline-block;
}
#about_detail .contents .prices tbody tr:last-child td {
  background-color: #FFE1D9;
}
#about_detail .contents .prices + .note {
  font-size: 0.625em;
  text-align: center;
  margin-top: 1em;
}
#about_detail .contents .link {
  margin-top: 1.875em;
}
#about_detail .contents .link .basic_btn {
  margin: 0 auto;
  width: 13.75em;
  height: 3.125em;
}
#about_detail .contents .guideline {
  margin: 1.25em 1.5625em 0;
}
#about_detail .contents .guideline .label {
  font-size: 0.75em;
  font-weight: bold;
}
#about_detail .contents .guideline .txt {
  font-size: 0.625em;
  line-height: 1.6;
}
#about_detail .contents .guideline .note {
  font-size: 0.625em;
  margin-top: 0.5em;
}
#about_detail .contents.premium > .inner {
  background: linear-gradient(270deg, rgba(244, 220, 155, 0.3) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(244, 220, 155, 0.3) 100%);
}
#about_detail .contents.premium .functions {
  background: linear-gradient(270deg, #C5A34C 0%, #E0C171 50%, #C5A34C 100%);
}
#about_detail .contents.premium .functions button {
  color: #A7925B;
}
#about_detail .contents.premium .functions button::after {
  background-color: #A7925B;
}
@media screen and (any-hover: hover) {
  #about_detail .contents.premium .functions button:hover {
    background-color: #A7925B;
    background-color: rgba(167, 146, 91, 0.9);
  }
}
#about_detail .contents.premium .prices th, #about_detail .contents.premium .prices td {
  border-left-color: #fcf5e2;
}
#about_detail .contents.otona > .inner {
  background: linear-gradient(270deg, #E9FBFA 0%, #FFF 50%, #E9FBFA 100%);
}
#about_detail .contents.otona .functions {
  background: linear-gradient(270deg, #079689 0%, #1EB7A9 50%, #079689 100%);
}
#about_detail .contents.otona .functions button {
  color: #036D64;
}
#about_detail .contents.otona .functions button::after {
  background-color: #036D64;
}
@media screen and (any-hover: hover) {
  #about_detail .contents.otona .functions button:hover {
    background-color: #036D64;
    background-color: rgba(3, 109, 100, 0.9);
  }
}
#about_detail .contents.otona .prices th, #about_detail .contents.otona .prices td {
  border-left-color: #ebfcfb;
}
@media screen and (min-width: 770px) {
  #about_detail {
    margin: -5.3125em 0 0;
    width: 195em;
    max-width: max(var(--nvw) * 100, 1200px);
    left: 50%;
    transform: translateX(-50%);
  }
  #about_detail .contents {
    padding: 0 1.25em;
    width: 65em !important;
    transition: opacity 0.8s ease;
    opacity: 0.4;
    pointer-events: none;
  }
  #about_detail .contents.swiper-slide-active {
    opacity: 1;
    pointer-events: all;
  }
  #about_detail .contents > .inner {
    border-radius: 1.875em;
    padding-top: 6.875em;
    padding-bottom: 1.875em;
  }
  #about_detail .contents .heading .name {
    font-size: 2em;
    line-height: 1.1;
  }
  #about_detail .contents .heading .label {
    font-size: 0.75em;
    margin-top: 1.25em;
    padding: 0.5em 0.8333333333em 0.6666666667em;
  }
  #about_detail .contents .functions {
    margin-top: 2.8125em;
    padding: 1.875em 3.125em 2.8125em;
  }
  #about_detail .contents .functions .copy {
    font-size: 1.5em;
  }
  #about_detail .contents .functions .list {
    margin-top: 1.5625em;
    gap: 1.25em;
  }
  #about_detail .contents .functions .list button {
    border-radius: 0.375em;
    padding: 1.25em 1.125em;
  }
  #about_detail .contents .functions .list button::after {
    width: 0.5em;
  }
  #about_detail .contents .functions .list button .txt {
    font-size: 1.25em;
    line-height: 1;
  }
  #about_detail .contents .functions .list button .txt .s {
    font-size: 1em;
    display: inline;
  }
  #about_detail .contents .prices {
    margin-top: 2.5em;
    width: 38.125em;
  }
  #about_detail .contents .prices th, #about_detail .contents .prices td {
    font-size: 1.125em;
    padding: 0.5555555556em;
  }
  #about_detail .contents .prices tbody td:not(:first-child) {
    font-size: 1.25em;
  }
  #about_detail .contents .prices tbody td i {
    font-size: 0.7777777778em;
  }
  #about_detail .contents .prices + .note {
    font-size: 0.75em;
  }
  #about_detail .contents .link {
    margin-top: 2.5em;
  }
  #about_detail .contents .link .basic_btn {
    width: 18.75em;
    height: 4.375em;
  }
  #about_detail .contents .link .basic_btn .txt {
    font-size: 1.25em;
  }
  #about_detail .contents .guideline {
    margin: 1.875em 3.125em 0;
  }
  #about_detail .contents .guideline .label {
    font-size: 0.75em;
  }
  #about_detail .contents .guideline .txt {
    font-size: 0.625em;
    margin-top: 0.5em;
  }
  #about_detail .contents .guideline .note {
    font-size: 0.625em;
  }
}

@keyframes arrow_blinking {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* ------------------------------------------------
 cases
------------------------------------------------ */
#cases {
  margin-top: 4.0625em;
  overflow: hidden;
}
#cases > .inner {
  position: relative;
}
#cases > .inner::before {
  content: "";
  background-color: #F2F6FB;
  width: 100%;
  height: calc(100% - 13.75em);
  position: absolute;
  left: 0;
  bottom: 0;
}
#cases .sheader {
  position: relative;
}
#cases .sheader::before {
  content: "";
  background-color: #F2F6FB;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 13.75em;
}
#cases .sheader .title {
  position: relative;
}
#cases .sheader .title .en {
  margin-left: -0.2571428571em;
  white-space: nowrap;
}
#cases .sheader .title .ja {
  font-size: 1.125em;
  line-height: 1.85;
  letter-spacing: 0.1em;
  margin-left: 1.6666666667em;
  width: -moz-fit-content;
  width: fit-content;
}
#cases .sheader .title .ja.l {
  color: #fff;
  font-size: 1.875em;
  background-color: var(--color-blue);
  margin-top: 0.3333333333em;
  margin-left: 1em;
  padding: 0 0.4em;
}
#cases .sheader .chara {
  width: 6.25em;
  position: absolute;
  right: 0.875em;
  top: 5em;
  z-index: -1;
}
#cases .sheader .summary {
  font-size: 0.875em;
  line-height: 2;
  margin-top: 2.8571428571em;
  margin-left: 3.5714285714em;
  position: relative;
}
#cases .sbody {
  margin-top: 2.1875em;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
}
#cases .sbody .case {
  padding: 1.875em 0;
}
#cases .sbody .case::before {
  content: "";
  border-radius: 0 1.875em 1.875em 0;
  background-color: #fff;
  width: 9.0625em;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}
#cases .sbody .case .label {
  color: var(--color-blue);
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1;
  opacity: 0.5;
  position: absolute;
  top: -0.5em;
}
#cases .sbody .case .people {
  display: flex;
  align-items: center;
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
}
#cases .sbody .case .people .img {
  width: 3.375em;
}
#cases .sbody .case .people .txt .name {
  font-size: 0.875em;
  font-weight: bold;
  display: block;
}
#cases .sbody .case .people .txt .age {
  font-size: 0.75em;
}
#cases .sbody .case .meal {
  margin-top: 1.5625em;
  display: flex;
  flex-direction: column;
}
#cases .sbody .case .meal + .meal {
  margin-top: 1.875em;
}
#cases .sbody .case .meal .ph {
  width: 10.625em;
  height: 11.25em;
}
#cases .sbody .case .meal .calo {
  font-weight: bold;
  margin-top: -0.625em;
  display: flex;
  align-items: center;
  -moz-column-gap: 0.75em;
       column-gap: 0.75em;
}
#cases .sbody .case .meal .calo .copy {
  font-size: 0.875em;
  letter-spacing: normal;
}
#cases .sbody .case .meal .calo .tag {
  font-size: 0.625em;
  margin-top: 0.5em;
}
#cases .sbody .case .meal .calo::before {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  width: 3.9375em;
  aspect-ratio: 63/100;
  display: block;
}
#cases .sbody .case .meal .calo.premium::before {
  background-image: url(../images/common/calo_premium.png);
}
#cases .sbody .case .meal .calo.premium .tag {
  color: #C3A65C;
}
#cases .sbody .case .meal .calo.otona::before {
  background-image: url(../images/common/calo_otona.png);
}
#cases .sbody .case .meal .calo.otona .tag {
  color: #036D64;
}
#cases .sbody .case .meal .calo.basic::before {
  background-image: url(../images/common/calo_basic.png);
}
#cases .sbody .case .meal .calo.basic .tag {
  color: #98C026;
}
#cases .sbody .timeline {
  background-color: var(--color-blue);
  width: 1px;
  height: calc(100% - 5em);
  position: absolute;
  left: 50%;
  top: 3.125em;
  overflow: visible;
}
#cases .sbody .timeline::before, #cases .sbody .timeline::after {
  content: "";
  border-radius: 12px;
  width: 0.375em;
  aspect-ratio: 1/1;
  background-color: var(--color-blue);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#cases .sbody .timeline::before {
  top: 0;
}
#cases .sbody .timeline::after {
  bottom: 0;
}
#cases .sbody .timeline li {
  width: 4.375em;
  aspect-ratio: 1/1;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#cases .sbody .timeline li.morning {
  top: 7.375em;
}
#cases .sbody .timeline li.day {
  top: 26.25em;
}
#cases .sbody .timeline li.night {
  top: 44.75em;
}
#cases aside {
  position: relative;
  z-index: 1;
}
#cases aside .note {
  margin-top: 2em;
  margin-left: 2em;
}
#cases aside .message {
  margin-top: 3.125em;
}
#cases aside .message .banzai {
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 1em;
       column-gap: 1em;
}
#cases aside .message .banzai .txt {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.65;
  text-align: center;
}
#cases aside .message .banzai::before, #cases aside .message .banzai::after {
  content: "";
  background-color: var(--color-blue);
  width: 1px;
  height: 2.5em;
  display: block;
}
#cases aside .message .banzai::before {
  transform: skewX(30deg);
}
#cases aside .message .banzai::after {
  transform: skewX(-30deg);
}
#cases aside .message .img {
  margin: 0.9375em auto 0;
  width: 21.25em;
  height: 6.875em;
  position: relative;
}
#cases aside .message .img > * {
  position: absolute;
}
#cases aside .message .img .caluro1 {
  width: 7.9375em;
  left: 0.875em;
  top: 0.625em;
}
#cases aside .message .img .caluro2 {
  width: 4.75em;
  left: 8em;
  top: 0;
}
#cases aside .message .img .caluro3 {
  width: 8em;
  left: 13.25em;
  top: 0;
}
@media screen and (max-width: 769.9px) {
  #cases .sbody .case.case_1::before {
    left: 0;
  }
  #cases .sbody .case.case_1 .label {
    left: 1.75em;
  }
  #cases .sbody .case.case_1 .people {
    margin-left: 0.9375em;
  }
  #cases .sbody .case.case_1 .meal .calo {
    margin-left: 0.9375em;
  }
  #cases .sbody .case.case_2::before {
    border-radius: 1.875em 0 0 1.875em;
    right: 0;
  }
  #cases .sbody .case.case_2 .label {
    right: 1.75em;
  }
  #cases .sbody .case.case_2 .people {
    margin-right: 0.9375em;
    flex-direction: row-reverse;
  }
  #cases .sbody .case.case_2 .people .txt {
    text-align: right;
  }
  #cases .sbody .case.case_2 .meal .calo {
    text-align: right;
    margin-right: 0.9375em;
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 770px) {
  #cases {
    margin-top: 8.75em;
    width: 100%;
  }
  #cases > .inner::before {
    width: max(var(--nvw) * 100, 1200px);
    height: calc(100% - 17.125em);
    left: 50%;
    transform: translateX(-50%);
  }
  #cases .sheader::before {
    top: 17.125em;
  }
  #cases .sheader .title .en {
    margin-left: 5.5em;
    text-align: left;
  }
  #cases .sheader .title .ja {
    font-size: 1.5em;
    line-height: 1.6;
    margin-top: -0.625em;
    margin-left: 0;
  }
  #cases .sheader .title .ja.l {
    font-size: 2.75em;
    margin-top: 0.2272727273em;
    margin-left: 0;
    padding: 0 0.2727272727em;
  }
  #cases .sheader .chara {
    width: 9.375em;
    left: 21.875em;
    right: unset;
    top: 5.3125em;
  }
  #cases .sheader .summary {
    font-size: 1.125em;
    margin: 0;
    position: absolute;
    left: 33.8888888889em;
    top: 10em;
  }
  #cases .sbody {
    margin-top: 6.25em;
    position: relative;
    flex-direction: column;
    row-gap: 1.875em;
  }
  #cases .sbody .case {
    padding: 0 0 0 2.8125em;
    width: 67.8125em;
    display: flex;
    align-items: start;
    justify-content: end;
    position: relative;
  }
  #cases .sbody .case::before {
    border-radius: 1.875em 0 0 1.875em;
    width: 100vw;
    height: 12.5em;
    box-sizing: border-box;
    top: 0;
    left: 0;
  }
  #cases .sbody .case .label {
    text-align: center;
    width: 1em;
    height: 10em;
    word-break: break-all;
    left: 0;
    transform: translateX(-50%);
    align-content: center;
  }
  #cases .sbody .case .people {
    margin-right: auto;
  }
  #cases .sbody .case .meal {
    margin-top: 0 !important;
  }
  #cases .sbody .case .meal + .meal {
    margin-left: 3.125em;
  }
  #cases .sbody .case .meal .ph {
    width: 16.25em;
    height: 11.25em;
  }
  #cases .sbody .case .meal .calo {
    margin: 0 0 0 1.875em;
    position: relative;
    z-index: 1;
  }
  #cases .sbody .case .meal .calo .copy {
    font-size: 0.875em;
    letter-spacing: normal;
  }
  #cases .sbody .case .meal .calo .tag {
    font-size: 0.75em;
  }
  #cases .sbody .case .meal .calo::before {
    width: 4.125em;
  }
  #cases .sbody .case.case_1 {
    padding-top: 2.8125em;
    order: 1;
  }
  #cases .sbody .case.case_1 .label {
    top: 0;
  }
  #cases .sbody .case.case_1 .people {
    margin-top: 2.1875em;
  }
  #cases .sbody .case.case_1 .meal {
    flex-direction: column-reverse;
  }
  #cases .sbody .case.case_1 .meal .calo {
    margin-bottom: -1.5625em;
    align-items: start;
  }
  #cases .sbody .case.case_2 {
    padding-bottom: 2.1875em;
    order: 3;
  }
  #cases .sbody .case.case_2::before {
    top: unset;
    bottom: 0;
  }
  #cases .sbody .case.case_2 .label {
    top: unset;
    bottom: 0;
  }
  #cases .sbody .case.case_2 .people {
    margin-bottom: 2.5em;
    align-self: end;
  }
  #cases .sbody .case.case_2 .meal {
    flex-direction: column;
  }
  #cases .sbody .case.case_2 .meal .calo {
    margin-top: -1.5625em;
    align-items: end;
  }
  #cases .sbody .timeline {
    width: 68.75em;
    height: 1px;
    position: relative;
    left: -0.9375em;
    top: 0;
    order: 2;
    z-index: 1;
  }
  #cases .sbody .timeline::before, #cases .sbody .timeline::after {
    aspect-ratio: 1/1;
    background-color: var(--color-blue);
    position: absolute;
    top: 50%;
    bottom: unset;
    transform: translateY(-50%);
  }
  #cases .sbody .timeline::before {
    left: 0;
  }
  #cases .sbody .timeline::after {
    left: unset;
    right: 0;
  }
  #cases .sbody .timeline li {
    width: 5em;
    top: 50% !important;
    transform: translateY(-50%);
  }
  #cases .sbody .timeline li.morning {
    left: 20em;
  }
  #cases .sbody .timeline li.day {
    left: 39.375em;
  }
  #cases .sbody .timeline li.night {
    left: 58.75em;
  }
  #cases aside .note {
    margin-right: -8.5em;
    text-align: right;
  }
  #cases aside .note li {
    display: inline;
  }
  #cases aside .message {
    margin-top: 3.4375em;
    display: flex;
    justify-content: center;
    align-items: end;
    -moz-column-gap: 1.375em;
         column-gap: 1.375em;
  }
  #cases aside .message .banzai {
    margin-bottom: 5em;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 0.5em;
  }
  #cases aside .message .banzai .txt {
    font-size: 1.25em;
  }
  #cases aside .message .banzai::before, #cases aside .message .banzai::after {
    width: 2.5em;
    width: 100%;
    height: 1px;
    transform-origin: 100% 0;
  }
  #cases aside .message .banzai::before {
    transform: skewY(10deg);
  }
  #cases aside .message .banzai::after {
    transform: skewY(-10deg);
  }
  #cases aside .message .img {
    margin: 0;
    width: 29.75em;
    height: 12.625em;
  }
  #cases aside .message .img .caluro1 {
    width: 11.875em;
    left: 0;
    top: 1.125em;
  }
  #cases aside .message .img .caluro2 {
    width: 7.5625em;
    left: 12.5em;
    top: 0;
  }
  #cases aside .message .img .caluro3 {
    width: 9em;
    left: 20.75em;
    top: 0.75em;
  }
}
@media screen and (min-width: 770px) and (max-width: 1170px) {
  #cases .sbody .case {
    margin-right: 0;
    width: 100%;
  }
  #cases .sbody .case .people {
    flex-direction: column;
  }
  #cases .sbody .case .people .txt {
    text-align: center;
  }
  #cases .sbody .case.case_1 .people {
    margin-top: 0.625em;
  }
  #cases .sbody .case.case_2 .people {
    margin-bottom: 0.625em;
  }
  #cases .sbody .timeline {
    width: calc(100% + 0.9375em);
  }
  #cases .sbody .timeline li.morning {
    left: 14.375em;
  }
  #cases .sbody .timeline li.day {
    left: 33.75em;
  }
  #cases .sbody .timeline li.night {
    left: 53.125em;
  }
  #cases aside .note {
    margin-right: 0;
  }
}

/* ----------------------------
 cases anime
------------------------------*/
#cases .timeline {
  transform-origin: 0% 0%;
}
#cases .timeline li {
  opacity: 0;
}
#cases .js-anime-start {
  opacity: 1;
}
#cases .js-anime-start .case {
  animation-name: case_fade_slidein;
}
#cases .js-anime-start .case .meal {
  animation-name: case_fade_slidein;
}
#cases .js-anime-start .case .morning {
  animation-delay: 0.4s;
}
#cases .js-anime-start .case .day {
  animation-delay: 0.8s;
}
#cases .js-anime-start .case .night {
  animation-delay: 1.2s;
}
#cases .js-anime-start .timeline {
  opacity: 1;
  animation-name: case_timeline_in;
  animation-duration: 1.2s;
}
#cases .js-anime-start .timeline li {
  animation-name: case_fadein;
  animation-fill-mode: forwards;
  animation-duration: 0.8s;
  animation-timing-function: ease;
}
#cases .js-anime-start .timeline .morning {
  animation-delay: 0.8s;
}
#cases .js-anime-start .timeline .day {
  animation-delay: 1.2s;
}
#cases .js-anime-start .timeline .night {
  animation-delay: 1.6s;
}

@keyframes case_fadein {
  0% {
    opacity: 0;
    filter: blur(0.625em);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes case_fade_slidein {
  0% {
    opacity: 0;
    transform: translateY(2.5em);
    filter: blur(1.25em);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
@media screen and (min-width: 770px) {
  @keyframes case_fade_slidein {
    0% {
      opacity: 0;
      transform: translateX(2.5em);
      filter: blur(1.25em);
    }
    100% {
      opacity: 1;
      filter: blur(0);
      transform: translateX(0);
    }
  }
}
@keyframes case_timeline_in {
  0% {
    transform: scaleY(0%);
  }
  100% {
    transform: scaleY(100%);
  }
}
@media screen and (min-width: 770px) {
  @keyframes case_timeline_in {
    0% {
      transform: scaleX(0%);
    }
    100% {
      transform: scaleX(100%);
    }
  }
}
/* ------------------------------------------------
 hero
------------------------------------------------ */
#hero > .inner {
  width: 100%;
  max-width: 1440px;
  position: relative;
}
#hero .txt {
  color: var(--color-blue);
}
#hero .txt .calo {
  display: flex;
  align-items: end;
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
}
#hero .txt .calo .ph {
  width: 5.8125em;
}
#hero .txt .calo .patent {
  font-size: 0.625em;
  writing-mode: vertical-rl;
}
#hero .txt .calo .patent > * {
  line-height: 1;
}
#hero .txt .calo .patent .label {
  border-width: 1px;
  border-style: solid;
  border-radius: 0.2em;
  padding: 0.3em;
  margin-bottom: 0.3em;
  display: inline-block;
}
#hero .js-anime-ready {
  opacity: 0;
}
@media screen and (max-width: 769.9px) {
  #hero .txt {
    color: var(--color-blue);
    margin-left: 2.5em;
    padding-top: 2.8125em;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    -moz-column-gap: 1.75em;
         column-gap: 1.75em;
  }
  #hero .txt .copy {
    width: 9.875em;
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
  #hero .txt .note {
    font-size: 0.5625em;
    grid-column: 2/span 1;
    grid-row: 2/span 1;
    align-self: end;
  }
  #hero .txt .calo {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
  }
}
@media screen and (min-width: 770px) {
  #hero {
    background: linear-gradient(180deg, #DAE1E7 0%, #E5EBF1 50%, #D3DCE5 100%);
    position: relative;
  }
  #hero > .inner {
    max-width: 100%;
  }
  #hero .kv {
    text-align: center;
    width: 100%;
    height: 50em;
  }
  #hero .kv img {
    max-width: 2100px;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  #hero .txt > * {
    position: absolute;
  }
  #hero .txt .copy {
    left: calc(50% + 28.125em);
    top: 9.875em;
  }
  #hero .txt .note {
    color: #868687;
    font-size: 0.625em;
    text-align: right;
    max-width: 144em;
    width: 100%;
    left: calc(50% - 720px);
    bottom: 1.6em;
  }
  #hero .txt .calo {
    left: calc(50% + 28.125em);
    top: 21.5625em;
  }
  #hero .txt .calo {
    display: flex;
    align-items: end;
    -moz-column-gap: 0.625em;
         column-gap: 0.625em;
    flex-direction: row-reverse;
  }
  #hero .txt .calo .ph {
    width: 11.375em;
  }
  #hero .txt .calo .patent {
    font-size: 0.75em;
  }
  #hero .txt .calo .patent .label {
    border-radius: 0.1666666667em;
    padding: 0.2916666667em;
    margin-bottom: 0.25em;
  }
}
/* ----------------------------
 anime
------------------------------*/
#hero .kv {
  opacity: 0;
  animation-duration: 1s;
  animation-name: fadein;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
}
@media screen and (max-width: 769.9px) {
  #hero .txt {
    opacity: 0;
    animation-duration: 1.6s;
    animation-name: fadein_up;
    animation-delay: 1.4s;
    animation-fill-mode: forwards;
  }
}
@media screen and (min-width: 770px) {
  #hero .kv {
    animation-duration: 1.2s;
  }
  #hero .copy,
  #hero .note,
  #hero .calo {
    opacity: 0;
    animation-name: fadein_up;
    animation-fill-mode: forwards;
  }
  #hero .copy {
    animation-duration: 1.8s;
    animation-delay: 0.8s;
  }
  #hero .note {
    animation-duration: 1.8s;
    animation-delay: 1.2s;
  }
  #hero .calo {
    animation-duration: 1.8s;
    animation-delay: 1s;
  }
}

@keyframes case_fadein {
  0% {
    opacity: 0;
    filter: blur(0.625em);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
/* ------------------------------------------------
 intro
------------------------------------------------ */
#intro {
  margin-top: 6.25em;
  overflow-x: clip;
}
#intro .sbody {
  margin-top: 0 !important;
  padding: 3.625em 0 2.5em 3.125em;
  position: relative;
}
#intro .sbody::before {
  content: "";
  border-radius: 1.875em;
  background: #F2F6FB;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 5.625em;
  top: 0;
  z-index: -1;
}
#intro .copy {
  width: 16.0625em;
}
#intro .img {
  margin-top: 2.8125em;
}
#intro .img .pasta {
  width: 17.75em;
  aspect-ratio: 716/720;
  position: relative;
}
#intro .img .pasta img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#intro .img .pasta img.s1 {
  visibility: hidden;
  z-index: 2;
}
#intro .note {
  margin-top: 1em;
  width: 31em;
}
#intro.active .s1 {
  animation-name: blinking;
  animation-duration: 1.2s;
  animation-iteration-count: 3;
}
@media screen and (max-width: 769.9px) {
  #intro > .inner {
    width: 100%;
  }
}
@media screen and (min-width: 770px) {
  #intro {
    margin-top: 13.75em;
  }
  #intro .sbody {
    padding: 0 0 0.625em 0;
    display: flex;
    justify-content: space-between;
    align-items: start;
  }
  #intro .sbody::before {
    width: 100vw;
    height: 30.625em;
    left: 12.5em;
  }
  #intro .copy {
    margin-top: 4.0909090909em;
    width: 22em;
  }
  #intro .img {
    margin-top: 4.375em;
    margin-right: 5.3125em;
    position: static;
  }
  #intro .img .pasta {
    width: 29.9375em;
  }
  #intro .note {
    margin-top: 1em;
    width: 31em;
    position: absolute;
    right: 38em;
    bottom: -1em;
  }
  #intro .note li {
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media screen and (min-width: 1440.1px) {
  #intro .note {
    right: -24.5em;
  }
}

@keyframes blinking {
  0% {
    visibility: hidden;
  }
  10% {
    visibility: visible;
  }
  20% {
    visibility: hidden;
  }
}
/* ------------------------------------------------
 awards
------------------------------------------------ */
#awards {
  margin-top: 5.625em;
}
#awards .heading {
  font-size: 1em;
  font-weight: bold;
  text-align: center;
}
#awards .img {
  margin: 1.5625em auto 0;
  display: flex;
  flex-direction: column;
  row-gap: 1.5625em;
}
#awards .note {
  margin-top: 2.5em;
}
@media screen and (max-width: 769.9px) {
  #awards > .inner {
    width: 21.25em;
  }
}
@media screen and (min-width: 770px) {
  #awards {
    margin-top: 9.375em;
  }
  #awards .heading {
    font-size: 1.5em;
  }
  #awards .img {
    margin-top: 3.4375em;
    width: auto;
    flex-direction: row;
    justify-content: space-between;
  }
  #awards .img img {
    width: 29.25em;
  }
  #awards .note {
    margin-top: 4em;
  }
}

/* ------------------------------------------------
 tvcm
------------------------------------------------ */
#tvcm {
  margin-top: 4.375em;
  overflow: hidden;
}
#tvcm > .inner {
  padding-bottom: 6.25em;
}
#tvcm .sheader .en {
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-align: center;
}
#tvcm .sbody {
  margin: 1.25em auto 0;
  width: 21.25em;
}
#tvcm .sbody .heading {
  font-weight: bold;
  margin-bottom: 1.25em;
  display: flex;
  align-items: center;
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
}
#tvcm .sbody .heading::before {
  content: "";
  background: url(../images/common/h_bulet.svg) 0/contain no-repeat;
  width: 0.75em;
  aspect-ratio: 1/1;
  display: inline-block;
}
#tvcm .sbody .movie .thumb {
  border-radius: 0.9375em;
  display: block;
  overflow: hidden;
}
#tvcm .sbody .movie .thumb + .link {
  margin-top: 1.5625em;
}
#tvcm .sbody .movie .link {
  display: flex;
  flex-direction: column;
  row-gap: 1.25em;
}
#tvcm .sbody .movie .link .basic_btn {
  height: 5em;
}
#tvcm .sbody .movie .link .basic_btn .txt {
  font-size: 0.875em;
  line-height: 1.8;
}
#tvcm .sbody .web_movies {
  margin-top: 2.5em;
}
#tvcm .sbody .web_movies .list {
  display: flex;
  justify-content: center;
  -moz-column-gap: 1.25em;
       column-gap: 1.25em;
}
#tvcm .sbody .web_movies .list li {
  width: 8.75em;
}
#tvcm .sbody .web_movies .list li .thumb_btn {
  border-radius: 0.9375em;
  overflow: hidden;
}
#tvcm .sbody .web_movies .list li .label {
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  margin: 0.3125em;
  display: block;
}
@media screen and (min-width: 770px) {
  #tvcm {
    margin-top: 9.375em;
  }
  #tvcm > .inner {
    padding-bottom: 10.625em;
  }
  #tvcm .sheader .en {
    margin-left: 0;
  }
  #tvcm .sbody {
    margin-top: 3.75em;
    width: 50em;
  }
  #tvcm .sbody .movie .thumb {
    border-radius: 1.25em;
  }
  #tvcm .sbody .movie .thumb + .link {
    margin-top: 3.125em;
  }
  #tvcm .sbody .movie .link {
    flex-direction: row;
    gap: 2.5em;
  }
  #tvcm .sbody .movie .link .basic_btn {
    width: 23.125em;
    height: 7.8125em;
  }
  #tvcm .sbody .movie .link .basic_btn .txt {
    font-size: 1em;
  }
  #tvcm .sbody .web_movies {
    margin-top: 3.125em;
  }
  #tvcm .sbody .web_movies .list {
    -moz-column-gap: 2.5em;
         column-gap: 2.5em;
  }
  #tvcm .sbody .web_movies .list li {
    width: 15em;
  }
}

/* ----------------------------
 #web_movies
------------------------------*/
#web_movies .swiper-slide {
  transition: opacity 0.8s ease;
}
#web_movies .swiper-slide-prev {
  opacity: 0;
}
@media screen and (max-width: 769.9px) {
  #web_movies {
    margin-right: -1.5625em;
    width: calc(100vw - 1.5625em);
    overflow: visible;
  }
  #web_movies li {
    padding-right: 1.25em;
    width: 10.625em;
    box-sizing: border-box;
  }
}
@media screen and (min-width: 770px) {
  #web_movies .swiper-wrapper {
    flex-direction: column;
    row-gap: 1.5625em;
  }
  #web_movies .swiper-wrapper li:nth-of-type(n + 4) {
    display: none;
  }
}

/* ------------------------------------------------
 kodawari
------------------------------------------------ */
#kodawari {
  background: url(../images/kodawari_bg-sp.webp) 0/100% auto no-repeat;
}
#kodawari > .inner {
  padding: 5.625em 1.875em;
  box-sizing: border-box;
}
#kodawari .sheader .copy {
  font-weight: 500;
}
#kodawari .sheader .title {
  font-size: 1.75em;
  font-weight: bold;
  line-height: 1.5;
  margin-top: 0.2857142857em;
}
#kodawari .sheader .summary {
  font-size: 0.875em;
  font-weight: 500;
  line-height: 2;
  margin-top: 1.4285714286em;
}
#kodawari .sbody {
  margin-top: 2.8125em;
}
#kodawari .sbody .list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5625em 1.25em;
}
#kodawari .sbody .list .img {
  border-radius: 0.9375em;
  border-top-right-radius: 0;
  overflow: hidden;
}
#kodawari .sbody .list .txt {
  font-size: 0.625em;
  line-height: 1.4;
  margin-top: 1em;
}
#kodawari .sbody .list .txt b {
  font-size: 1.3em;
  padding-top: 0.0666666667em;
}
#kodawari aside {
  margin-top: 3.125em;
}
#kodawari aside .basic_btn {
  margin: 0 auto;
  width: 15em;
  height: 3.125em;
}
#kodawari aside .basic_btn .txt {
  font-size: 1em;
}
@media screen and (min-width: 770px) {
  #kodawari {
    background-image: url(../images/kodawari_bg.webp);
    background-size: cover;
  }
  #kodawari > .inner {
    padding: 10.625em 0 9.375em;
    display: grid;
    grid-template-columns: 24.75em 32.5em;
    grid-template-rows: auto 1fr;
    justify-content: space-between;
  }
  #kodawari .sheader .copy {
    font-size: 1.5em;
  }
  #kodawari .sheader .title {
    font-size: 2.75em;
    margin-top: 0.3409090909em;
  }
  #kodawari .sheader .summary {
    font-size: 1.125em;
    margin-top: 2.7777777778em;
  }
  #kodawari .sbody {
    margin-top: 0;
    grid-row: 1/span 2;
  }
  #kodawari .sbody .list {
    gap: 2.5em;
  }
  #kodawari .sbody .list .img {
    border-radius: 1.5em;
    border-top-right-radius: 0;
  }
  #kodawari .sbody .list .txt {
    font-size: 0.875em;
  }
  #kodawari .sbody .list .txt b {
    font-size: 1.4285714286em;
    padding-top: 0.25em;
  }
  #kodawari aside {
    grid-column: 1/span 1;
    grid-row: 2/span 1;
  }
  #kodawari aside .basic_btn {
    margin-left: 0;
    width: 18.75em;
    height: 4.375em;
  }
  #kodawari aside .basic_btn .txt {
    font-size: 1.25em;
  }
}

/* ------------------------------------------------
 micle_banner
------------------------------------------------ */
#micle_banner .inner {
  padding: 4.6875em 0.9375em;
}
#micle_banner .inner a {
  text-decoration: none;
  border-radius: 0.5em;
  border: 1px solid var(--color-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#micle_banner .inner a .txt {
  line-height: 1;
  padding: 0.9375em 0;
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 0.625em;
       column-gap: 0.625em;
}
#micle_banner .inner a .txt::after {
  content: "";
  background-color: var(--color-blue);
  -webkit-mask: url(../images/common/icon_link_arrow.svg) 50% 50%/contain no-repeat;
          mask: url(../images/common/icon_link_arrow.svg) 50% 50%/contain no-repeat;
  margin-top: 0.2em;
  width: 0.5em;
  aspect-ratio: 5/8;
  display: block;
}
#micle_banner .inner a .txt span {
  color: var(--color-blue);
  font-size: 1.125em;
  font-weight: bold;
}
@media screen and (min-width: 770px) {
  #micle_banner .inner {
    padding: 9.375em 0 2.5em;
  }
  #micle_banner .inner a .txt {
    padding: 1.875em 0;
  }
  #micle_banner .inner a .txt::after {
    margin-top: 0;
  }
}

/* ------------------------------------------------
 float_btn
------------------------------------------------ */
#float_btn {
  position: fixed;
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: 150;
  pointer-events: none;
  transition: all 0.4s ease;
}
#float_btn.hide {
  opacity: 0;
  visibility: hidden;
}
#float_btn .basic_btn {
  color: #fff;
  border: 1px solid var(--color-blue);
  background-color: var(--color-blue);
  margin: 0 0 2.6666666667vw 20.6666666667vw;
  padding: 0;
  width: 13.75em;
  height: 3.125em;
  box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.5);
  position: absolute;
  z-index: 150;
  bottom: 0;
  left: 0;
  pointer-events: all;
}
#float_btn .basic_btn .txt {
  color: #fff;
  font-size: 0.875em;
}
@media screen and (any-hover: hover) {
  #float_btn .basic_btn {
    transition: background-color 0.4s ease;
  }
  #float_btn .basic_btn:hover {
    background-color: rgba(30, 77, 158, 0.8);
    background-color: hsl(218, 68%, 42%);
  }
}
@media screen and (min-width: 770px) {
  #float_btn {
    margin: 0 auto;
    right: 0;
    max-width: 1200px;
  }
  #float_btn .basic_btn {
    margin: 0 -20px 10px 0;
    box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.5);
    width: 18.75em;
    height: 4.375em;
    bottom: 0;
    left: auto;
    right: 0;
  }
  #float_btn .basic_btn .txt {
    color: #fff;
    font-size: 1.25em;
  }
}