@charset "UTF-8";
:root {
  --font-noto-sans-jp: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --font-shippori: "Shippori Mincho", "Noto Serif JP", serif;
  --font-scheherazade: "Scheherazade New", serif;
  --font-rig-300: "rig-shaded-light-face", sans-serif;
  --font-rig-500: "rig-shaded-medium-face", sans-serif;
}
:root {
  --swiper-theme-color: #007aff
}
:host {
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative
}
.swiper {
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  list-style: none;
  display: block;
  position: relative;
  overflow: hidden
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column
}
.swiper-wrapper {
  z-index: 1;
  width: 100%;
  height: 100%;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
  display: flex;
  position: relative
}
.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
  transform: translate(0, 0)
}
.swiper-horizontal {
  touch-action: pan-y
}
.swiper-vertical {
  touch-action: pan-x
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  transition-property: transform;
  display: block;
  position: relative
}
.swiper-slide-invisible-blank {
  visibility: hidden
}
.swiper-autoheight, .swiper-autoheight .swiper-slide {
  height: auto
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height
}
.swiper-backface-hidden .swiper-slide {
  backface-visibility: hidden;
  transform: translateZ(0)
}
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d
}
.swiper-3d {
  perspective: 1200px
}
.swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d
}
.swiper-css-mode > .swiper-wrapper {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow: auto
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-slides-offset-before);
  scroll-margin-inline-start: var(--swiper-slides-offset-before)
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper > .swiper-slide:last-child {
  margin-inline-end: var(--swiper-slides-offset-after)
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-slides-offset-before);
  scroll-margin-block-start: var(--swiper-slides-offset-before)
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper > .swiper-slide:last-child {
  margin-block-end: var(--swiper-slides-offset-after)
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none
}
.swiper-css-mode.swiper-centered > .swiper-wrapper:before {
  content: "";
  flex-shrink: 0;
  order: 9999
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before)
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper:before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after)
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before)
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper:before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after)
}
.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom {
  pointer-events: none;
  z-index: 10;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0
}
.swiper-3d .swiper-slide-shadow {
  background: #00000026
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(270deg, #00000080, #0000)
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(90deg, #00000080, #0000)
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(#0000, #00000080)
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(#00000080, #0000)
}
.swiper-lazy-preloader {
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-top-color: #0000;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  margin-left: -21px;
  position: absolute;
  top: 50%;
  left: 50%
}
:is(.swiper:not(.swiper-watch-progress), .swiper-watch-progress .swiper-slide-visible) .swiper-lazy-preloader {
  animation: 1s linear infinite swiper-preloader-spin
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0)
  }
  to {
    transform: rotate(360deg)
  }
}




.footer_trial_button_wrapper {
  gap: calc((100vw / var(--vw-sp)) * 8);
  flex-direction: column;
  align-items: center;
  display: flex
}
@media (min-width:801px) {
  .footer_trial_button_wrapper {
    gap: 10px
  }
}
.footer_trial_button_container {
  min-width: calc((100vw / var(--vw-sp)) * 350);
  background-color: var(--color-rintosull-white);
  border: 3px solid var(--color-rintosull-cta-pink3-500);
  border-radius: calc((100vw / var(--vw-sp)) * 62);
  padding: 1px;
  transition: border-color .6s cubic-bezier(.19, 1, .22, 1);
  display: inline-flex
}
@media (min-width:801px) {
  .footer_trial_button_container {
    border-radius: 62px;
    min-width: 350px
  }
}
.footer_trial_button_container:hover {
  border-color: var(--color-rintosull-cta-pink-500)
}
.footer_trial_button_container:active {
  translate: 0 calc((100vw / var(--vw-sp)) * 2)
}
@media (min-width:801px) {
  .footer_trial_button_container:active {
    translate: 0 2px
  }
}
.footer_trial_button {
  gap: calc((100vw / var(--vw-sp)) * 8);
  width: 100%;
  height: 100%;
  padding: 0;
  padding-top: calc((100vw / var(--vw-sp)) * 11.5);
  padding-right: calc((100vw / var(--vw-sp)) * 10);
  padding-bottom: calc((100vw / var(--vw-sp)) * 12.5);
  font-size: calc((100vw / var(--vw-sp)) * 20);
  color: var(--color-rintosull-white);
  background: 0 0;
  background-color: var(--color-rintosull-cta-pink3-500);
  border-radius: calc((100vw / var(--vw-sp)) * 62);
  border: none;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  line-height: 1.6;
  transition: background-color .6s cubic-bezier(.19, 1, .22, 1);
  display: flex;
  position: relative
}
@media (min-width:801px) {
  .footer_trial_button {
    gap: 8px;
    padding-top: 17.5px;
    padding-bottom: 18.5px;
    padding-right: 0;
    font-size: 20px;
    line-height: 1
  }
}
.footer_trial_button:hover {
  cursor: pointer
}
.footer_trial_button_white .footer_trial_button {
  color: var(--color-rintosull-primary-blue1);
  background-color: var(--color-rintosull-white)
}
.footer_trial_button_container:hover .footer_trial_button {
  background-color: var(--color-rintosull-cta-pink-500)
}
.footer_trial_button_arrow {
  width: calc((100vw / var(--vw-sp)) * 11);
  height: calc((100vw / var(--vw-sp)) * 11);
  border: 1px solid var(--color-rintosull-white);
  border-bottom: none;
  border-left: none;
  transition: translate .6s cubic-bezier(.19, 1, .22, 1);
  display: block;
  rotate: 45deg
}
@media (min-width:801px) {
  .footer_trial_button_arrow {
    width: 11px;
    height: 11px
  }
}
.footer_trial_button_white .footer_trial_button_arrow {
  border-color: var(--color-rintosull-primary-blue1)
}
.footer_trial_button_container:hover .footer_trial_button_arrow {
  translate: calc((100vw / var(--vw-sp)) * 5) 0
}
@media (min-width:801px) {
  .footer_trial_button_container:hover .footer_trial_button_arrow {
    translate: 5px
  }
}
.footer_trial_button_white .footer_trial_button_container {
  background-color: var(--color-rintosull-primary-blue1);
  border-color: var(--color-rintosull-white);
  border-width: 1px;
  padding: 2px
}
.footer_trial_button_white .footer_trial_button_container:hover {
  border-color: var(--color-rintosull-primary-blue3)
}
.footer_trial_button_white .footer_trial_button_container:hover .footer_trial_button {
  background-color: var(--color-rintosull-primary-blue3)
}
.footer_main {
  color: var(--color-rintosull-white);
  background: var(--color-five-primary-pink2);
  padding: 40px 0 80px;
  position: relative
}
@media (max-width:800px) {
  .footer_main {
    padding: calc((100vw / var(--vw-sp)) * 30) 0 calc((100vw / var(--vw-sp)) * 80);
    color: #FFF;
  }
}
@media (min-width:801px) {
  .footer_main {
    padding-top: 60px;
  }
}

.footer_main_inner {
  max-width: 800px;
  margin: 80px auto 0;
}
@media (max-width:800px) {
  .footer_main_inner {
    max-width: 100%;
    padding: 0 calc((100vw / var(--vw-sp)) * 20);
    margin: 0 auto;
  }
}
@media (min-width:801px) {
  .footer_main_inner {
    margin-top: 0;
    padding: 0 40px;
  }
}
@media (max-width:800px) {
  .footer_main_inner img {
    width: calc((100vw / var(--vw-sp)) * 164);
  }
}
.footer_navi {
  border-bottom: 1px solid #fff;
  margin-bottom: 40px;
  padding-bottom: 40px;
}
@media (max-width:800px) {
  .footer_navi {
    padding-bottom: calc((100vw / var(--vw-sp)) * 30);
    margin-bottom: calc((100vw / var(--vw-sp)) * 30);
    border-bottom: 1px solid #fff;
    margin-top: calc((100vw / var(--vw-sp)) * 25);
  }
}
@media (min-width:801px) {
  .footer_navi {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
}
.footer_navi ul {
  flex-wrap: wrap;
  gap: 20px 80px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex
}
@media (max-width:800px) {
  .footer_navi ul {
    gap: calc((100vw / var(--vw-sp)) * 7) calc((100vw / var(--vw-sp)) * 30);
  }
}
@media (min-width:801px) {
  .footer_navi ul  {
    gap: 10px 50px;
  }
}
.footer_navi ul li {
  width: auto
}
@media (max-width:800px) {
  .footer_navi ul li {
    width: auto
  }
}
.footer_copyright {
  transform-origin: 0 0;
  font-size: 10px;
  transform: scale(.9)
}
@media (max-width:800px) {
  .footer_copyright {
    font-size: calc((100vw / var(--vw-sp)) * 10);
    transform-origin: 0 0;
    transform: scale(.9);
    letter-spacing: 0.1em;
  }
}
.footer_navi ul li a {
  color: var(--color-rintosull-white);
  font-size: 14px
}
@media (max-width:800px) {
  .footer_navi ul li a {
    font-size: calc((100vw / var(--vw-sp)) * 12)
  }
}
.footer_navi ul li a:hover {
  text-decoration: underline
}
/* ------------------------------------------------------------------
 * メインビジュアル(.hero)を超えたら：
 *   - ヘッダー背景を白に
 *   - ロゴ/MENU文字色を黒に
 *   - MENU横の丸も濃色に揃える
 * ------------------------------------------------------------------ */

/* 共通：色変化はトランジションで滑らかに */
.site_header,
.site_header_logo img,
.header_navi_burger_label,
.header_navi_burger_circle,
.header_navi_burger_circle::before {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    filter 0.3s ease;
}
/* =========================================================================
 * ヘッダー（カスタム上書き）
 *   状態:
 *     body[data-past-mv]                  … MV を抜けた後（白ヘッダー）
 *     body[data-past-mv][data-spmenu-open] … 白ヘッダー時にメニューを開いた状態
 *                                            （透過時の見た目に戻す）
 *   MV 上（data-past-mv 無し）でメニューを開いても何も変えない。
 * ------------------------------------------------------------------ */

/* 共通：色変化を滑らかに */
.site_header,
.site_header_logo img,
.header_navi_burger_label,
.header_navi_burger_circle,
.header_navi_burger_circle::before {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    filter 0.3s ease;
}

/* .site_header 本体 */
.site_header {
  z-index: 1000;
  padding: calc((100vw / var(--vw-sp)) * 12) calc((100vw / var(--vw-sp)) * 20) calc((100vw / var(--vw-sp)) * 12) calc((100vw / var(--vw-sp)) * 15);
  align-items: center;
  transition: transform .6s cubic-bezier(.19, 1, .22, 1);
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc((100vw / var(--vw-sp)) * 80);
}
body[data-past-mv] .site_header {
  background: #FFF;
}
body[data-past-mv] .site_header .header_navi_secondary_global > li > a {
  color: var(--color-five-beige-200);
}
body[data-past-mv] .site_header .header_navi_secondary_global > li.header_navi_cta > a {
color: #FFF;
}
body[data-past-mv][data-spmenu-open] .site_header {
  background: var(--color-five-beige-100);
}

/* ロゴ（白ロゴをフィルタで切替） */
body[data-past-mv] .site_header_logo img {
  filter: brightness(0);
}
body[data-past-mv][data-spmenu-open] .site_header_logo img {
  filter: none;
}

/* MENU ラベル（MENU ⇄ CLOSE フェード） */
.header_navi_burger_label {
  transition: opacity 0.2s ease;
}
.header_navi_burger_label.is-fading {
  opacity: 0;
}
body[data-past-mv] .header_navi_burger_label {
  color: var(--color-five-beige-200);
}
body[data-past-mv][data-spmenu-open] .header_navi_burger_label {
  color: #FFF;
}

/* MENU 左の丸（外側＝半透明ハロー、内側＝白い点） */
.header_navi_burger span.header_navi_burger_circle {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: calc((100vw / var(--vw-sp)) * 6);
  width: calc((100vw / var(--vw-sp)) * 11);
  height: calc((100vw / var(--vw-sp)) * 11);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}
.header_navi_burger span.header_navi_burger_circle::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc((100vw / var(--vw-sp)) * 7);
  height: calc((100vw / var(--vw-sp)) * 7);
  border-radius: 50%;
  background: #FFF;
}
body[data-past-mv] .header_navi_burger_circle {
  background-color: rgb(from var(--color-five-beige-200) r g b / 0.3);
}
body[data-past-mv] .header_navi_burger_circle::before {
  background: var(--color-five-beige-200);
}
body[data-past-mv][data-spmenu-open] .header_navi_burger_circle {
  background: rgba(255, 255, 255, 0.3);
}
body[data-past-mv][data-spmenu-open] .header_navi_burger_circle::before {
  background: #FFF;
}

/* クリック時の拡大パルス */
.header_navi_burger_circle.is-pulsing {
  animation: header_navi_burger_pulse 0.35s cubic-bezier(.19,1,.22,1);
}
@keyframes header_navi_burger_pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}
@media (min-width:801px) {
  .site_header {
    border-top-width: 6px;
    padding: 0 30px;
    height: 60px;
  }
  .header_navi_burger_label {
    font-size: 13px;
    padding-top: 3px;
  }
  .header_navi_burger span.header_navi_burger_circle {
    width: 11px;
    height: 11px;
  }
  .header_navi_burger span.header_navi_burger_circle::before {
    width: 7px;
    height: 7px;
  }
}
@media (min-width:1000px) {
  .site_header {
    padding-top: 0
  }
}
@media (min-width:1261px) {
  .site_header {
    padding-left: 50px;
    padding-right: 50px
  }
}
.site_header_inner {
  justify-content: space-between;
  align-items: start;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  position: relative
}
@media (min-width:801px) {
  .site_header_inner {
    align-items: center;
  }
}
.site_header_logo_wrapper {
  flex-direction: column;
  align-items: center;
  display: flex
}
@media (min-width:801px) {
  .site_header_logo_wrapper, [data-scrolled] .site_header_logo_wrapper {
    padding-top: 0
  }
}
@media (min-width:1000px) {
  [data-scrolled] .site_header_logo_wrapper {
    padding-top: 16px
  }
}
.site_header_logo {
  z-index: 10;
  width: calc((100vw / var(--vw-sp)) * 130);
  transform-origin: 0 0;
  line-height: 0;
  transition: scale .6s cubic-bezier(.19, 1, .22, 1);
  scale: 1
}
@media (min-width:801px) {
  .site_header_logo {
    width: 138px
  }
}
@media (max-width:1260px) {
  .site_header_logo {
    top: 18px;
    transform: scale(.728)translateY(0)
  }
}
@media (max-width:999px) {
  .site_header_logo {
    position: static;
    transform: none
  }
}
.site_header_logo img {
  width: 100%
}
@media (min-width:801px) {
  [data-scrolled] .site_header_logo {
    scale: 1
  }
}
@media (min-width:1000px) {
  [data-scrolled] .site_header_logo {
    scale: .728
  }
}
.site_header_subtitle {
  max-height: 1lh;
  margin-top: calc((100vw / var(--vw-sp)) * 10);
  margin-bottom: calc((100vw / var(--vw-sp)) * 2);
  font-size: calc((100vw / var(--vw-sp)) * 10);
  color: var(--color-rintosull-primary-blue1);
  opacity: 1;
  line-height: 1;
  transition: all .3s
}
@media (min-width:801px) {
  .site_header_subtitle {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 14px
  }
}
[data-scrolled] .site_header_subtitle {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0
}
.site_header_subtitle span {
  letter-spacing: calc((100vw / var(--vw-sp)) * -1.2)
}
@media (min-width:801px) {
  .site_header_subtitle span {
    letter-spacing: -1.1px
  }
}
.site_header_trial {
  margin-right: calc((100vw / var(--vw-sp)) * 12);
  margin-left: auto
}
@media (min-width:801px) {
  .site_header_trial {
    display: none
  }
}
.header_trial_button {
  gap: calc((100vw / var(--vw-sp)) * 6);
  min-width: 100%;
  height: 100%;
  padding: 0;
  padding-top: calc((100vw / var(--vw-sp)) * 12.21);
  padding-bottom: calc((100vw / var(--vw-sp)) * 14);
  font-size: calc((100vw / var(--vw-sp)) * 18);
  color: var(--color-rintosull-white);
  cursor: pointer;
  background: 0 0;
  background-color: var(--color-rintosull-primary-blue1);
  border-radius: calc((100vw / var(--vw-sp)) * 10);
  border: none;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  line-height: 1.6;
  transition: background-color .6s cubic-bezier(.19, 1, .22, 1);
  display: flex;
  position: relative
}
@media (min-width:801px) {
  .header_trial_button {
    border-radius: 0 0 10px 10px;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 14px;
    padding-right: 0;
    font-size: 14px;
    line-height: 1
  }
}
@media (min-width:1000px) {
  .header_trial_button {
    min-width: 210px
  }
}
.header_trial_button:before {
  width: calc((100vw / var(--vw-sp)) * 16);
  height: calc((100vw / var(--vw-sp)) * 18);
  content: "";
  background-image: url(/images/common/icon-experience.svg);
  background-repeat: no-repeat;
  background-size: contain
}
@media (min-width:801px) {
  .header_trial_button:before {
    width: 16px;
    height: 18px
  }
}
.header_trial_button:hover {
  background-color: var(--color-rintosull-primary-blue2)
}


html {
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  line-height: 1.15
}
body {
  margin: 0
}
main {
  display: block
}
h1 {
  margin: .67em 0;
  font-size: 2em
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}
pre {
  font-family: monospace;
  font-size: 1em
}
abbr[title] {
  border-bottom: none;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}
b, strong {
  font-weight: bolder
}
code, kbd, samp {
  font-family: monospace;
  font-size: 1em
}
sub, sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative
}
sub {
  bottom: -.25em
}
sup {
  top: -.5em
}
img {
  border-style: none
}
button, input, optgroup, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15
}
button, input {
  overflow: visible
}
button, select {
  text-transform: none
}
button, [type=button], [type=reset], [type=submit] {
  appearance: auto
}
button::-moz-focus-inner {
  border-style: none;
  padding: 0
}
[type=button]::-moz-focus-inner {
  border-style: none;
  padding: 0
}
[type=reset]::-moz-focus-inner {
  border-style: none;
  padding: 0
}
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0
}
button:-moz-focusring {
  outline: 1px dotted buttontext
}
[type=button]:-moz-focusring {
  outline: 1px dotted buttontext
}
[type=reset]:-moz-focusring {
  outline: 1px dotted buttontext
}
[type=submit]:-moz-focusring {
  outline: 1px dotted buttontext
}
fieldset {
  padding: .35em .75em .625em
}
legend {
  box-sizing: border-box;
  max-width: 100%;
  color: inherit;
  white-space: normal;
  padding: 0;
  display: table
}
progress {
  vertical-align: baseline
}
textarea {
  overflow: auto
}
[type=checkbox], [type=radio] {
  box-sizing: border-box;
  padding: 0
}
[type=number]::-webkit-inner-spin-button {
  height: auto
}
[type=number]::-webkit-outer-spin-button {
  height: auto
}
[type=search] {
  appearance: textfield;
  outline-offset: -2px
}
[type=search]::-webkit-search-decoration {
  appearance: none
}
::-webkit-file-upload-button {
  font: inherit;
  appearance: auto
}
details {
  display: block
}
summary {
  display: list-item
}
template, [hidden] {
  display: none
}
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-content: ""
    }
  }
}
@layer theme {
  :root, :host {
    --color-gray-100: oklch(96.7% .003 264.542);
    --color-white: #fff;
    --spacing: .25rem;
    --container-7xl: 80rem;
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tighter: -.05em;
    --tracking-normal: 0em;
    --tracking-widest: .1em;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --color-rintosull-primary-blue1: #2b5caa;
    --color-rintosull-primary-blue2: #7595cd;
    --color-rintosull-primary-blue3: #dce4f4;
    --color-rintosull-text-gray: #4c4948;
    --color-rintosull-white: #fff;
    --color-rintosull-secondary1-blue1-800: #284a9f;
    --color-rintosull-secondary1-blue2-600: #5482c9;
    --color-rintosull-secondary1-blue3-200: #cddaf0;
    --color-rintosull-secondary1-blue3-80: #e3eaf7;
    --color-rintosull-secondary2-green-400: #55bec8;
    --color-rintosull-secondary2-purple-500: #a687c8;
    --color-rintosull-secondary2-blue-400: #51addf;
    --color-rintosull-secondary2-pink-100: #fce7e9;
    --color-rintosull-secondary2-pink-400: #ef879a;
    --color-rintosull-secondary2-yellow-400: #fbb24c;
    --color-rintosull-gray-50: #f6f5f5;
    --color-rintosull-gray-100: #e7e6e6;
    --color-rintosull-gray-200: #d2cfcf;
    --color-rintosull-gray-300: #b3aead;
    --color-rintosull-gray-500: #716a69;
    --color-rintosull-gray-600: #605b5a;
    --color-rintosull-gradation-color1: linear-gradient(156.9deg, #e6f2ff 31.99%, #dce4f4 84.92%);
    --color-rintosull-accent-yellow-500: #fff100;
    --color-rintosull-cta-pink-500: #ff436b;
    --color-rintosull-cta-pink2-500: #e63462;
    --color-rintosull-cta-pink3-500: #e63a69;
    --color-rintosull-important-red: #bb1b21;
    --font-noto-sans-jp: var(--font-noto-sans-jp);
    --font-shippori: var(--font-shippori);
    --font-scheherazade: var(--font-scheherazade);
    --vw-pc: 1280;
    --vw-sp: 390;
    --ease-rintosull-out: cubic-bezier(.19, 1, .22, 1);

    --color-five-primary-pink1: #D07573;
    --color-five-primary-pink2: #DC9894;
    --color-five-primary-pink-light: #F9EEEC;
    --color-five-primary-green: #96B3A8;
    --color-five-primary-purple: #AEA2BA;
    --color-five-primary-purple-light: #E3E0E7;
    --color-five-gray-100: #F7F5F2;
    --color-five-gray-150: #828282;
    --color-five-gray-200: #464646;
    --color-five-beige-100: #BCA89F;
    --color-five-beige-200: #8A827A;
    --color-five-beige-300: #E5DDDA;
    /* MV高さ = 自然サイズ(600vw-sp相当) と 90svh の小さい方 */
    --mv-h: min(calc((100vw / var(--vw-sp)) * 600), 90svh);
    @media (min-width: 801px) {
      :root {
        --mv-h: min(calc(100vw * 1321 / 2561), 90svh);
      }
    }
  }
}
@layer base {
  body {
    font-family: var(--font-noto-sans-jp), sans-serif;
    font-size: calc((100vw / var(--vw-sp)) * 14);
    color: var(--color-five-gray-200);
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    line-height: 1.6
  }
  @media (min-width:801px) {
    body {
      font-size: 16px
    }
  }
  a {
    color: var(--color-rintosull-text-gray);
    background-color: #0000;
    text-decoration: none
  }
  p {
    font-size: calc((100vw / var(--vw-sp)) * 14);
    word-break: break-all;
    margin: 0
  }
  @media (min-width:801px) {
    p {
      font-size: 16px
    }
  }
  small {
    font-size: 80%
  }
  img {
    max-width: 100%;
    height: auto;
    display: block
  }
}
@layer components;
@layer utilities {
  
  
  
  
  
  
  
  
  
  
  .start {
    inset-inline-start: var(--spacing)
  }
  .end {
    inset-inline-end: var(--spacing)
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .line-clamp-3 {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
  }
  .line-clamp-6 {
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  }body *{box-sizing:border-box}@keyframes scroll-image-left{0%{transform:translate(0)}to{transform:translate(-100%)}}h1,h2,h3,h4,h5,h6{margin-top:0}.swiperPagination{justify-content:center;margin-top:24px;display:flex}@media (max-width:800px){.swiperPagination{margin-top:calc((100vw / var(--vw-sp)) * 28)}}.swiperPagination .swiper-pagination-bullet{background:var(--color-rintosull-gray-300);border-radius:50%;width:9px;height:9px;margin-right:10px}@media (max-width:800px){.swiperPagination .swiper-pagination-bullet{width:5px;height:5px;margin-right:calc((100vw / var(--vw-sp)) * 5)}}.swiperPagination .swiper-pagination-bullet:last-of-type{margin-right:0}.swiperPagination .swiper-pagination-bullet-active{background:var(--color-rintosull-gray-600)}.swiperButtonPrev,.swiperButtonNext{z-index:100}.swiperButtonPrev{border:solid 1px var(--color-rintosull-primary-blue1);border-radius:50%;width:40px;height:40px;transition:background-color .6s cubic-bezier(.19,1,.22,1);position:absolute;top:50%;left:-60px;transform:translateY(-80%)}@media (max-width:800px){.swiperButtonPrev{top:inherit;width:30px;height:30px;bottom:-35px;left:20px}}.swiperButtonPrev:hover{background:var(--color-rintosull-primary-blue3)}.swiperButtonPrev:before{content:"";border-top:solid 1px var(--color-rintosull-primary-blue1);border-left:solid 1px var(--color-rintosull-primary-blue1);width:10px;height:10px;margin:-5px 0 0 -2px;display:block;position:absolute;top:50%;left:50%;transform:rotate(-45deg)}@media (max-width:800px){.swiperButtonPrev:before{border-top:solid 1px var(--color-rintosull-primary-blue1);border-left:solid 1px var(--color-rintosull-primary-blue1);width:5px;height:5px;margin:-2.5px 0 0 -1px;transform:rotate(-45deg)}}.swiperButtonNext{border:solid 1px var(--color-rintosull-primary-blue1);border-radius:50%;width:40px;height:40px;transition:background-color .6s cubic-bezier(.19,1,.22,1);position:absolute;top:50%;right:-60px;transform:translateY(-80%)}@media (max-width:800px){.swiperButtonNext{top:inherit;width:30px;height:30px;bottom:-35px;right:20px}}.swiperButtonNext:hover{background:var(--color-rintosull-primary-blue3)}.swiperButtonNext:before{content:"";border-top:solid 1px var(--color-rintosull-primary-blue1);border-right:solid 1px var(--color-rintosull-primary-blue1);width:10px;height:10px;margin:-5px 0 0 -8px;display:block;position:absolute;top:50%;left:50%;transform:rotate(45deg)}@media (max-width:800px){.swiperButtonNext:before{border-top:solid 1px var(--color-rintosull-primary-blue1);border-right:solid 1px var(--color-rintosull-primary-blue1);width:5px;height:5px;margin:-2.5px 0 0 -4px;transform:rotate(45deg)}}.scroll-hint{margin-bottom:20px;padding-bottom:3px}@media (max-width:800px){.scroll-hint{width:100vw;margin:0 calc(50% - 50vw) calc((100vw / var(--vw-sp)) * 20)}}.letterSpacing05{letter-spacing:.05em}

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .sp_menu {
    z-index: 900;
    background: var(--color-five-beige-100);
    width: 100%;
    height: 100dvh;
    padding-top: 112px;
    transition: padding-top .6s cubic-bezier(.19, 1, .22, 1), transform .6s cubic-bezier(.19, 1, .22, 1);
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    transform: translate(100%)
  }
  @media (max-width:999px) {
    .sp_menu {
      max-width: 100%;
      padding-top: calc((100vw / var(--vw-sp)) * 70);
      display: block
    }
  }
  @media (min-width:801px) {
    .sp_menu {
      padding-top: 60px;
    }
  }
  .sp_menu.is-open {
    transform: translate(0)
  }
  [data-scrolled] + .sp_menu {
    padding-top: 70px
  }
  @media (max-width:999px) {
    [data-scrolled] + .sp_menu {
      padding-top: 70px
    }
  }
  .sp_menu_inner {
    height: 100%;
    overflow: auto;
    padding: 0 calc((100vw / var(--vw-sp)) * 20);
  }
  @media (min-width:801px) {
    .sp_menu_inner {
      padding: 0 150px;
    }
  }
  .sp_menu_header {
    border-bottom: solid 0.5px #FFF;
    padding: calc((100vw / var(--vw-sp)) * 16) 0;
  }
  .sp_menu_header ul {
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
  }
  .sp_menu_header ul li {
    flex: 1;
    margin-right: 10px
  }
  .sp_menu_main > ul > li {
    border-bottom: solid 0.5px #FFF;
  }
  .sp_menu_main ul li:last-child {
    border-bottom: none;
  }
  .sp_menu_other ul li {
    margin-bottom: 20px
  }
  .sp_menu_header ul li:last-of-type {
    margin-right: 0
  }
  .sp_menu_main > ul > li > a {
    font-size: calc((100vw / var(--vw-sp)) * 18);
    font-weight: 500;
    display: block;
    position: relative;
    text-align: center;
    letter-spacing: 0.05em;
    color: #FFF;
    padding: calc((100vw / var(--vw-sp)) * 8) 0 calc((100vw / var(--vw-sp)) * 10);
    line-height: 1.3;
  }
  @media (min-width:801px)  {
    .sp_menu_main > ul > li > a {
      font-size: 18px;
    }
  }
  .sp_menu_main > ul > li > a > span {
    font-family: var(--font-rig-500);
    font-size: calc((100vw / var(--vw-sp)) * 14);
    opacity: 0.5;
  }
  @media (min-width:801px)  {
    .sp_menu_main > ul > li > a > span {
      font-size: 14px;
    }
  }
  .sp_menu_main ul {
    margin: 0;
    padding: 0;
    list-style: none
  }
  .sp_menu_main > ul > li > details {
    position: relative
  }
  .sp_menu_main > ul > li > details:before {
    content: "";
    background: var(--color-rintosull-primary-blue1);
    width: 16px;
    height: 1px;
    display: block;
    position: absolute;
    top: 36px;
    right: 20px
  }
  .sp_menu_main > ul > li > details:after {
    content: "";
    background: var(--color-rintosull-primary-blue1);
    transform-origin: 50%;
    width: 16px;
    height: 1px;
    transition: transform .6s cubic-bezier(.19, 1, .22, 1);
    display: block;
    position: absolute;
    top: 36px;
    right: 20px;
    transform: rotate(90deg)
  }
  .sp_menu_main > ul > li > details[open]:after {
    transform: rotate(0)
  }
  .sp_menu_main > ul > li > details > summary {
    padding: 27px 50px 27.41px 68px;
    font-size: 16px;
    font-weight: 700;
    list-style: none;
    display: block;
    position: relative
  }
  .sp_menu_main > ul > li > details > summary::-webkit-details-marker {
    display: none
  }
  .sp_menu_main > ul > li.sp_menu_main_program > details > summary:before {
    content: "";
    border: solid 1px var(--color-rintosull-primary-blue1);
    background: url(/images/common/icon-program.svg) 50%/17px 17px no-repeat;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: block;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%)
  }
  .sp_menu_main > ul > li.sp_menu_main_member > details > summary:before {
    content: "";
    border: solid 1px var(--color-rintosull-primary-blue1);
    background: url(/images/common/icon-member.svg) 50%/19px 16.7px no-repeat;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: block;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%)
  }
  .sp_menu_main > ul > li.sp_menu_main_news > details > summary:before {
    content: "";
    border: solid 1px var(--color-rintosull-primary-blue1);
    background: url(/images/common/icon-news.svg) 50%/19px 20.89px no-repeat;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: block;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%)
  }
  .sp_menu_main > ul > li.sp_menu_main_about > details > summary:before {
    content: "";
    border: solid 1px var(--color-rintosull-primary-blue1);
    background: url(/images/common/icon-about.svg) 50%/24.12px 19.36px no-repeat;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: block;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%)
  }
  .sp_menu_main_sub {
    background: var(--color-rintosull-gray-50);
    border-top: solid 1px var(--color-rintosull-gray-200)
  }
  .sp_menu_main_sub ul li:last-of-type {
    border-bottom: none
  }
  .sp_menu_main_sub ul li.sp_menu_main_sub_external a:before {
    background: url(/images/common/icon-external.svg) 0 0/100% 100% no-repeat;
    border-top: none;
    border-right: none;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    right: 20px;
    transform: rotate(0)
  }
  .sp_menu_other ul {
    margin: 0;
    padding: 20px;
    list-style: none
  }
  .sp_menu_other ul li:last-of-type {
    margin-bottom: 0
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .header_trial_circle {
    gap: calc((100vw / var(--vw-sp)) * 3);
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex
  }
  @media (min-width:801px) {
    .header_trial_circle {
      gap: 3px
    }
  }
  .header_trial_circle_button {
    gap: calc((100vw / var(--vw-sp)) * 6);
    width: calc((100vw / var(--vw-sp)) * 34);
    height: calc((100vw / var(--vw-sp)) * 34);
    font-size: calc((100vw / var(--vw-sp)) * 18);
    color: var(--color-rintosull-white);
    cursor: pointer;
    background: 0 0;
    background-color: var(--color-rintosull-primary-blue1);
    border-radius: calc((100vw / var(--vw-sp)) * 34);
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-weight: 700;
    line-height: 1.6;
    transition: background-color .6s cubic-bezier(.19, 1, .22, 1);
    display: flex;
    position: relative
  }
  @media (min-width:801px) {
    .header_trial_circle_button {
      border-radius: 34px;
      gap: 8px;
      width: 34px;
      height: 34px;
      padding-right: 0;
      font-size: 14px;
      line-height: 1
    }
  }
  .header_trial_circle_button:before {
    width: calc((100vw / var(--vw-sp)) * 34);
    height: calc((100vw / var(--vw-sp)) * 34);
    content: url(/images/common/icon-experience.svg);
    justify-content: center;
    align-items: center;
    display: flex
  }
  @media (min-width:801px) {
    .header_trial_circle_button:before {
      width: 34px;
      height: 34px
    }
  }
  .header_trial_circle:hover .header_trial_circle_button {
    background-color: var(--color-rintosull-primary-blue2)
  }
  .header_trial_circle_label {
    font-size: calc((100vw / var(--vw-sp)) * 10)
  }
  @media (min-width:801px) {
    .header_trial_circle_label {
      font-size: 10px
    }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .header_scrolled_links > li {
    width: 50px
  }
  .header_scrolled_trial a {
    position: relative
  }
  .header_scrolled_links > li > a {
    color: var(--color-rintosull-text-gray);
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    display: block
  }
  .header_scrolled_links > li > a > span {
    margin-top: 3px;
    display: block
  }
  .header_scrolled_links > li:first-of-type {
    margin-left: 0
  }
  .header_scrolled_links {
    z-index: 0;
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: visibility .6s cubic-bezier(.19, 1, .22, 1), opacity .6s cubic-bezier(.19, 1, .22, 1);
    display: flex;
    position: absolute;
    top: 10px;
    right: 0
  }
  [data-scrolled] .header_scrolled_links {
    visibility: visible;
    opacity: 1
  }
  .header_scrolled_trial > a:before {
    content: url(/images/common/icon-experience.svg);
    background: var(--color-rintosull-primary-blue1);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    margin: 0 auto;
    display: flex
  }
  .header_navi {
    width: calc((100vw / var(--vw-sp)) * 30);
    flex-direction: column;
    align-items: flex-end;
    height: 100%;
    display: flex
  }
  @media (min-width:801px) {
    .header_navi {
      width: auto
    }
  }
  .header_navi_primary {
    justify-content: flex-end;
    align-items: flex-end;
    transition: max-height .6s cubic-bezier(.19, 1, .22, 1);
    display: flex
  }
  @media (min-width:801px) {
    .header_navi_primary {
      max-height: 42px;
      overflow: hidden
    }
  }
  @media (max-width:999px) {
    .header_navi_primary {
      display: none
    }
  }
  @media (min-width:801px) {
    [data-scrolled] .header_navi_primary {
      max-height: 0
    }
  }
  .header_navi_primary_menu {
    align-items: flex-end;
    height: 1em;
    margin: 0 30px 3px 0;
    padding: 0;
    list-style: none;
    display: flex
  }
  @media (max-width:1080px) {
    .header_navi_primary_menu {
      margin: 0 30px 3px 0
    }
  }
  .header_navi_primary_menu li {
    height: 1em;
    margin-right: calc((100vw / var(--vw-pc)) * 30);
    line-height: 1
  }
  .header_navi_secondary_global > li {
    position: relative
  }
  .header_navi_secondary_sub ul li {
    border-bottom: solid 1px var(--color-rintosull-gray-200)
  }
  .header_navi_primary_menu li:last-of-type {
    margin-right: 0
  }
  .header_navi_primary_cta a {
    width: 210px;
    color: var(--color-rintosull-white);
    text-align: center;
    background: var(--color-rintosull-primary-blue1);
    border-right: solid 1px var(--color-rintosull-primary-blue1);
    border-bottom: solid 1px var(--color-rintosull-primary-blue1);
    border-left: solid 1px var(--color-rintosull-primary-blue1);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 13px;
    font-size: 14px;
    font-weight: 700;
    transition: background-color .6s cubic-bezier(.19, 1, .22, 1);
    display: block
  }
  .header_navi_primary_cta a span {
    padding-left: 22px;
    display: inline-block;
    position: relative
  }
  .header_navi_primary_cta a span:before {
    content: "";
    background: url(/images/common/icon-experience.svg) 0 0/15px 18px no-repeat;
    width: 15px;
    height: 18px;
    display: block;
    position: absolute;
    top: 2px;
    left: 0
  }
  .header_navi_primary_menu li a {
    color: var(--color-gray600);
    font-size: 12px;
    font-weight: 500;
    transition: color .6s cubic-bezier(.19, 1, .22, 1)
  }
  .header_navi_secondary_global > li > a {
    padding: 10px 24px 6px;
    font-size: 14px;
    font-weight: 700;
    transition: color .6s cubic-bezier(.19, 1, .22, 1);
    display: block;
    letter-spacing: 0.05rem;
  }
  @media (min-width:999px) {
    .header_navi_secondary_global > li > a {
      color: #FFF;
      font-family: var(--font-rig-300);
    }
  }
  @media (min-width:1024px) {
    .header_navi_secondary_global > li > a {
      letter-spacing: 0.09rem;
    }
  }
  @media (min-width:1280px) {
    .header_navi_secondary_global > li > a {
      letter-spacing: 0.15rem;
    }
  }
  .header_navi_secondary_sub ul li a {
    padding: 12px 0 14px;
    font-size: 14px;
    font-weight: 500;
    transition: color .6s cubic-bezier(.19, 1, .22, 1);
    display: block
  }
  .header_navi_primary_cta a:hover {
    background-color: var(--color-rintosull-primary-blue2);
    border-color: var(--color-rintosull-primary-blue2)
  }
  .header_navi_primary_menu li a:hover {
    color: var(--color-rintosull-primary-blue1)
  }
  .header_navi_secondary {
    padding-right: 2px;
    line-height: 1;
    transition: transform .6s cubic-bezier(.19, 1, .22, 1);
    display: flex;
    position: relative
  }
  @media (max-width:999px) {
    .header_navi_secondary {
      display: none
    }
  }
  .header_navi_secondary_global {
    z-index: 10;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform .6s cubic-bezier(.19, 1, .22, 1);
    display: flex;
    position: relative
  }
  [data-scrolled] .header_navi_secondary_global {
    transform: translate(-74px)
  }
  .header_navi_secondary_global > li:last-of-type {
    margin-right: 0;
    font-family: var(--font-noto-sans-jp);
    background: var(--color-five-primary-pink1);
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  .header_navi_secondary_global > li:last-of-type:hover {
    background: var(--color-five-primary-pink2);
  }
  @media (max-width:1260px) {
    .header_navi_secondary_global > li > a {
      padding-left: 24px;
      padding-right: 24px;
      font-size: 12px
    }
  }
  @media (max-width:1180px) {
    .header_navi_secondary_global > li > a {
      padding-left: 20px;
      padding-right: 20px
    }
  }
  .header_navi_secondary_global > li:has(.header_navi_secondary_sub) > a > span {
    padding-right: 15px;
    display: inline-block;
    position: relative
  }
  .header_navi_secondary_global > li:has(.header_navi_secondary_sub) > a span:before {
    content: "";
    border-right: solid 1px var(--color-rintosull-primary-blue1);
    border-bottom: solid 1px var(--color-rintosull-primary-blue1);
    transform-origin: 50%;
    width: 7px;
    height: 7px;
    transition: top .6s cubic-bezier(.19, 1, .22, 1), transform .6s cubic-bezier(.19, 1, .22, 1);
    display: block;
    position: absolute;
    top: 1px;
    right: 0;
    transform: rotate(45deg)
  }
  @media (max-width:1080px) {
    .header_navi_secondary_global > li > a {
      top: 0
    }
  }
  .header_navi_secondary_global > li:has(.header_navi_secondary_sub):hover > a span:before {
    top: 6px;
    transform: rotate(225deg)
  }
  .header_navi_secondary_global > li > a:hover {
    color: var(--color-five-primary-pink2)
  }
  .header_navi_secondary_global > li:last-of-type > a:hover {
    color: #FFF;
  }
  .header_navi_secondary_sub {
    visibility: hidden;
    background: var(--color-rintosull-white);
    opacity: 0;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    width: 180px;
    transition: visible .6s cubic-bezier(.19, 1, .22, 1), opacity .6s cubic-bezier(.19, 1, .22, 1);
    position: absolute;
    top: 100%;
    left: 0;
    box-shadow: 2px 2px 10px #0000001a
  }
  .header_navi_secondary_sub:before {
    content: "";
    background: var(--color-rintosull-white);
    width: 100%;
    height: 5px;
    display: block;
    position: absolute;
    top: -5px;
    left: 0
  }
  .header_navi_secondary_link .header_navi_secondary_sub {
    left: -20px
  }
  .header_navi_secondary_member .header_navi_secondary_sub {
    left: 5px
  }
  .header_navi_secondary_news .header_navi_secondary_sub {
    right: 0;
    left: inherit
  }
  .header_navi_secondary_global > li:hover .header_navi_secondary_sub {
    visibility: visible;
    opacity: 1
  }
  .header_navi_secondary_sub ul {
    margin: 0;
    padding: 20px 16px;
    list-style: none
  }
  .header_navi_secondary_sub ul li:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0
  }
  .header_navi_secondary_sub ul li a:hover {
    color: var(--color-rintosull-primary-blue1)
  }
  .header_navi_secondary_sub ul li:first-of-type a {
    padding-top: 0
  }
  .header_navi_secondary_sub ul li:last-of-type a {
    padding-bottom: 0
  }
  .header_navi_burger {
    width: calc((100vw / var(--vw-sp)) * 80);
    height: calc((100vw / var(--vw-sp)) * 46);
    background: 0 0;
    border: none;
    padding: 0;
    transition: transform .6s cubic-bezier(.19, 1, .22, 1);
    display: none;
    position: relative;
    color: #FFF;
    font-family: var(--font-rig-500);
    letter-spacing: calc((100vw / var(--vw-sp)) * 1.5);
  }
  @media (min-width:801px) {
    .header_navi_burger {
      width: 30px;
      height: 26px;
      width: auto;
    }
  }
  html:has(.header_navi[data-spmenu-shown]) .header_navi_burger {
    
  }
  @media (max-width:999px) {
    .header_navi_burger {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
  html:has(.header_navi[data-spmenu-shown]) {
    overflow: hidden
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* ===== /旧 style.css ここまで ===== */
   /* ------------------------------------------------------------------
 * 共通CTA
 * ------------------------------------------------------------------ */
  .cta_common {
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    justify-content: center;
    gap: calc((100vw / var(--vw-sp)) * 12);
    width: 100%;
    height: calc((100vw / var(--vw-sp)) * 60);
    position: relative;
    box-sizing: border-box;
    border-radius: calc((100vw / var(--vw-sp)) * 30);
    background-color: var(--color-five-primary-pink1);
    color: #ffffff;
    font-size: calc((100vw / var(--vw-sp)) * 18);
    font-weight: 500;
    letter-spacing: 0.05em;
    border: calc((100vw / var(--vw-sp)) * 5) solid #E7BBB6;
    overflow: hidden;
    margin: 0 auto;
    transition: all 0.3s ease;
  }
  .cta_common:hover {
    background-color: var(--color-five-primary-pink2);
  }
  @media (min-width: 801px) {
    .cta_common {
      font-size: 18px;
      width: 350px;
      height: 58px;
      border: 5px solid #E7BBB6;
      gap: 12px;
    }
  }
  .cta_common::before {
    content: "";
    position: absolute;
    top: calc((100vw / var(--vw-sp)) * 0);
    left: calc((100vw / var(--vw-sp)) * 0);
    right: calc((100vw / var(--vw-sp)) * 0);
    bottom: calc((100vw / var(--vw-sp)) * 0);
    border: calc((100vw / var(--vw-sp)) * 0.5) solid transparent;
    border-radius: 100px;
    background: linear-gradient(90deg, rgba(179, 131, 59, 1) 0%, rgba(253, 243, 182, 1) 21%, rgba(217, 184, 82, 1) 51%, rgba(239, 220, 144, 1) 68%, rgba(253, 243, 182, 1) 79%, rgba(228, 204, 146, 1) 85%, rgba(210, 174, 118, 1) 91%, rgba(198, 156, 101, 1) 96%, rgba(194, 149, 95, 1) 100%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
  }
  @media (min-width: 801px) {
    .cta_common::before {
      border: 1px solid transparent;;
    }
  }
  .cta_common .arrow {
    position: relative;
    display: inline-block;
    width: 11px;
    height: 1px;
    margin: 5px 0;
    border-radius: 9999px;
    background-color: #ffffff;
  }
  .arrow::before,
  .arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.5px);
    right: 0;
    width: 8px;
    height: 1px;
    border-radius: 9999px;
    background-color: #ffffff;
    transform-origin: calc(100% - 0.5px) 50%;
  }
  .arrow::before {
    transform: rotate(45deg);
  }
  .arrow::after {
    transform: rotate(-45deg);
  }
  /* ------------------------------------------------------------------
 * header 関連の上書き
 *   ※ 既存のモジュール風クラス (.app-header-module__... 等) は
 *      style.css 側で本体スタイルが定義されているため、
 *      ここでは Tailwind で当てていた差分のみを補う。
 * ------------------------------------------------------------------ */
  /* 副題（マシンピラティススタジオ Rintosull）の明朝体指定。
   旧: class="font-shippori site_header_subtitle" */
  .site_header_subtitle {
    font-family: var(--font-shippori);
    white-space: nowrap;
  }
  /* スクロール時の円形 CTA。
   旧: class="bot_open before:content-none!"
   親セレクタ側で擬似要素アイコンが生えるので打ち消す。 */
  .header_scrolled_trial > a::before {
    content: none;
  }
  /* 円形 CTA のラベルは通常太さに戻す。
   旧: class="... font-normal" */
  .header_trial_circle_label {
    font-weight: 400;
  }
  /* ------------------------------------------------------------------
 * .header_reserve_cta
 *   ヘッダー右側の青背景「体験会を予約する」ボタン本体。
 *   旧: class="bot_open group relative flex h-full
 *              min-w-[...] ... bg-rintosull-primary-blue1 ..."
 * ------------------------------------------------------------------ */
  .header_reserve_cta {
    position: relative;
    display: flex;
    height: 100%;
    min-width: calc((100vw / var(--vw-sp)) * 120);
    align-items: center;
    justify-content: flex-start;
    gap: calc((100vw / var(--vw-sp)) * 6);
    padding: calc((100vw / var(--vw-sp)) * 5) calc((100vw / var(--vw-sp)) * 12) calc((100vw / var(--vw-sp)) * 7);
    border-radius: calc((100vw / var(--vw-sp)) * 62);
    background-color: var(--color-rintosull-primary-blue1);
    color: var(--color-rintosull-white);
    font-size: calc((100vw / var(--vw-sp)) * 14);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .6s var(--ease-rintosull-out);
  }
  .header_reserve_cta:hover {
    background-color: var(--color-rintosull-primary-blue2);
  }
  .header_reserve_cta:active {
    transform: translateY(calc((100vw / var(--vw-sp)) * 2));
  }
  @media (min-width: 801px) {
    .header_reserve_cta {
      gap: 8px;
      padding-top: 17.5px;
      padding-right: 0;
      padding-bottom: 18.5px;
      font-size: 20px;
    }
    .header_reserve_cta:active {
      transform: translateY(2px);
    }
  }
  /* ------------------------------------------------------------------
 * .header_reserve_cta_arrow
 *   ↑ のボタン内の右上向き矢印（45deg 回転した枠線で表現）。
 *   旧: <span class="mb-[...] block h-[...] w-[...] rotate-45
 *                    border border-b-0 border-l-0 ..."></span>
 * ------------------------------------------------------------------ */
  .header_reserve_cta_arrow {
    display: block;
    width: calc((100vw / var(--vw-sp)) * 6);
    height: calc((100vw / var(--vw-sp)) * 6);
    margin-bottom: calc((100vw / var(--vw-sp)) * -2);
    border: 1px solid var(--color-rintosull-white);
    border-bottom: 0;
    border-left: 0;
    transform: rotate(45deg);
    transition: transform .6s var(--ease-rintosull-out);
  }
  /* 親ボタンホバーで右にスライドさせる（旧 group-hover の代替） */
  .header_reserve_cta:hover .header_reserve_cta_arrow {
    transform: rotate(45deg) translate(calc((100vw / var(--vw-sp)) * 2), 0);
  }
  @media (min-width: 801px) {
    .header_reserve_cta_arrow {
      width: 11px;
      height: 11px;
    }
    .header_reserve_cta:hover .header_reserve_cta_arrow {
      transform: rotate(45deg) translate(5px, 0);
    }
  }
  /* ==================================================================
 * footer 関連
 *   - 上部の青背景セクション（CTA + ヘルプリンク）は完全に新規クラス化
 *   - その下のサンクスセクション / メインフッターは module class が
 *     既に style.css にあるので、フォント family の補完だけ行う
 * ================================================================== */
  
  /* ==================================================================
 * 汎用ヘルパー
 *   SP / PC 出し分け（旧 Tailwind: "hidden pc:block" / "block pc:hidden"）
 *   将来ページ追加でも使い回す想定で、is_ 接頭辞のユーティリティに昇格
 * ================================================================== */
  .is_sp_only {
    display: block;
  }
  .is_pc_only {
    display: none;
  }
  @media (min-width: 801px) {
    .is_sp_only {
      display: none;
    }
    .is_pc_only {
      display: block;
    }
  }
  .ls_small-005 {
    letter-spacing: -0.05em;
  }
  .ls_small-015 {
    letter-spacing: -0.15em;
  }
  .ls_small-025 {
    letter-spacing: -0.25em;
  }
  .notes {
    color: var(--color-five-gray-150);
  }
 /* ==================================================================
 * 店舗情報共通箇所（各店舗のservice情報）
 * ================================================================== */
  .shop_tags {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .shop_tags li {
    color: #FFF;
    font-family: var(--font-rig-500);
    font-size: calc((100vw / var(--vw-sp)) * 10);
    letter-spacing: 0.1em;
    margin-right: calc((100vw / var(--vw-sp)) * 7);
    border-radius: calc((100vw / var(--vw-sp)) * 15);
    padding: calc((100vw / var(--vw-sp)) * 4) calc((100vw / var(--vw-sp)) * 8) calc((100vw / var(--vw-sp)) * 1);
    white-space: nowrap;
  }
  .shop_tags li.tag_pilates {
    background: var(--color-five-primary-pink2);
  }
  .shop_tags li.tag_yoga {
    background: var(--color-five-beige-100);
  }
  .shop_tags li.tag_bike {
    background: var(--color-five-primary-purple);
  }
  .shop_tags li.tag_kick {
    background: var(--color-five-gray-200);
  }
  .shop_tags li.tag_workout {
    background: var(--color-five-primary-green);
  }
  p.shop_area {
    color: var(--color-five-gray-150);
    font-size: calc((100vw / var(--vw-sp)) * 14);
    margin-top: calc((100vw / var(--vw-sp)) * 8);
  }
  /* ==================================================================
 * floating-cta（フローティングCTA / SP+PC で別 DOM）
 *   - 初期は .is-hidden（opacity:0 + pointer-events:none）
 *   - JS（script.js）が scrollY > 200 で .is-hidden を外して表示
 * ================================================================== */
  /* SP 版: 画面下に幅いっぱいの帯ボタン --------------------------------- */
  .floating_cta_sp {
    position: fixed;
    top: calc(var(--mv-h) - calc((100vw / var(--vw-sp)) * 60));
    bottom: auto;
    right: calc((100vw / var(--vw-sp)) * 16);
    z-index: 10;
  }
  .floating_cta_sp_inner {
    margin: 0 auto;
    width: calc((100vw / var(--vw-sp)) * 127);
  }
  @media (min-width: 801px) {
    .floating_cta_sp {
      /* 100 は MV底からはみ出すボタンの量(px)。
         ボタンを下げたい→値を小さく / 上げたい→値を大きく */
      top: calc(var(--mv-h) - 250px);
      bottom: auto;
    }
    .floating_cta_sp_inner {
      width: 200px;
    }
  }
  /* リンク（SP/PC 共通） ----------------------------------------------- */
  .floating_cta_link {
    display: block;
    padding: 0;
    border: 0;
    background-color: transparent;
    opacity: 1;
    transition: opacity 1.2s;
  }
  .floating_cta_link.is-hidden {
    opacity: 0;
    pointer-events: none;
  }
  .floating_cta_link:hover {
    cursor: pointer;
  }
  .floating_cta_link:active {
    transform: translateY(calc((100vw / var(--vw-sp)) * 2));
  }
  @media (min-width: 801px) {
    .floating_cta_link:active {
      transform: translateY(2px);
    }
  }
  /* 画像（ホバーで明度アップ） ----------------------------------------- */
  .floating_cta_image {
    transition: filter .6s var(--ease-rintosull-out);
  }
  .floating_cta_image:hover {
    filter: brightness(1.1);
  }
  /* キラリンアニメーション ----------------------------------------- */
  .shine_inner {
    position: relative;
    overflow: hidden;
    display: block;
  }
  .shine_inner .shine_mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mask-image: url(../img/floating-ctabutton-sp.webp);
    mask-size: 100% auto;
    mask-repeat: no-repeat;
    mask-position: left top;
    display: block;
  }
  .shine_inner .shine_mask .shine {
    content: "";
    -webkit-animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
    animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
    background-color: #fff;
    width: 140%;
    height: 100%;
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
    top: 0;
    left: -160%;
    opacity: 0.5;
    position: absolute;
    z-index: 1;
    display: block;
  }
  @-webkit-keyframes shine {
    0% {
      left: -200%;
      opacity: 0;
    }
    70% {
      left: -200%;
      opacity: 0.5;
    }
    71% {
      left: -200%;
      opacity: 1;
    }
    100% {
      left: -20%;
      opacity: 0;
    }
  }
  @keyframes shine {
    0% {
      left: -200%;
      opacity: 0;
    }
    70% {
      left: -200%;
      opacity: 0.5;
    }
    71% {
      left: -200%;
      opacity: 1;
    }
    100% {
      left: -20%;
      opacity: 0;
    }
  }
  /* ==================================================================
 * セクション見出しの共通スタイル
 *   各セクションの <h2> "CAMPAIGN / ABOUT / WHY / PLAN / STUDIO / TRIAL"
 *   英字大見出し + 左側に小さな円ドット装飾 + 下に和文サブタイトル。
 *
 *   使い方:
 *     <h2 class="section_title campaign_title">
 *       CAMPAIGN
 *       <small class="section_title_sub">開催中のキャンペーン</small>
 *     </h2>
 *
 *   セクションごとに違う margin-bottom / letter-spacing は
 *   .campaign_title / .about_title 等の派生クラスで上書きする。
 * ================================================================== */
  .section_title {
    display: block;
    margin: 0;
    font-family: var(--font-rig-300);
    font-weight: 500;
    font-size: calc((100vw / var(--vw-sp)) * 32);
    line-height: 1;
    color: var(--color-five-beige-200);
    text-align: center;
    letter-spacing: 0.15em;
  }
  @media (min-width: 801px) {
    .section_title {
      font-size: 36px;
    }
  }
  /* 和文サブタイトル（<small>） */
  .section_title_sub {
    display: block;
    margin-top: calc((100vw / var(--vw-sp)) * 13);
    font-family: var(--font-shippori);
    font-weight: 300;
    font-size: calc((100vw / var(--vw-sp)) * 22);
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--color-five-gray-200);
  }
  @media (min-width: 801px) {
    .section_title_sub {
      margin-top: 28px;
      font-size: 26px;
    }
  }
  .section_title_sub span.section_title_sub_big {
    font-size: calc((100vw / var(--vw-sp)) * 34);
    line-height: 0.8;
  }
  @media (min-width: 801px) {
    .section_title_sub span.section_title_sub_big {
      font-size: 38px;
    }
  }
  .section_title_sub span.section_title_sub_big_more {
    font-size: calc((100vw / var(--vw-sp)) * 45);
  }
  @media (min-width: 801px) {
    .section_title_sub span.section_title_sub_big_more  {
      font-size: 49px;
    }
  }
  /* ==================================================================
 * reveal 系（読み込み時 / スクロール時の演出）
 *   初期は opacity:0 と移動オフセット付与。
 *   JS (script.js) が読み込み完了タイミングで inline style に
 *   transition:none / opacity:1 / transform:none / margin-top:0 を当て
 *   ぱっと表示する（背景タブで止まる事故を避けるため transition も消す）。
 * ================================================================== */
  .reveal_up, .reveal_right, .reveal_left, .reveal_mt, .why_point_reveal_right, .why_point_reveal_left {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .reveal_up {
    transform: translateY(15px);
  }
  @media (max-width: 800px){
    .why_point_reveal_right {
      transform: translateY(15px);
    }
  }
  @media (min-width: 801px){
    .why_point_reveal_right {
      transform: translateX(15px);
    }
  }
  @media (max-width: 800px){
    .why_point_reveal_left {
      transform: translateY(-15px);
    }
  }
  @media (min-width: 801px){
    .why_point_reveal_left {
      transform: translateX(-15px);
    }
  }
  .reveal_right {
    transform: translateX(15px);
  }
  .reveal_left {
    transform: translateX(-15px);
  }
  .reveal_mt {
    margin-top: 15px;
  }
  .reveal_up.is-visible,
  .reveal_right.is-visible,
  .reveal_left.is-visible,
  .reveal_mt.is-visible,
  .why_point_reveal_right.is-visible,
  .why_point_reveal_left.is-visible {
    opacity: 1;
    transform: none;
  }
  /* ==================================================================
 * button_primary
 *   chevron 付きのプライマリボタン（各セクション末尾の「詳しく見る」等で再利用）。
 *   ホバーで背景色変化 + アイコンが右に少しスライド。
 * ================================================================== */
  .button_primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc((100vw / var(--vw-sp)) * 4);
    min-width: calc((100vw / var(--vw-sp)) * 250);
    max-width: 100%;
    min-height: calc((100vw / var(--vw-sp)) * 48);
    padding:
      calc((100vw / var(--vw-sp)) * 3.5) calc((100vw / var(--vw-sp)) * 12.5) calc((100vw / var(--vw-sp)) * 4.5) calc((100vw / var(--vw-sp)) * 24.5);
    border: none;
    border-radius: calc((100vw / var(--vw-sp)) * 50);
    background-color: var(--color-rintosull-primary-blue1);
    color: var(--color-rintosull-white);
    font-size: calc((100vw / var(--vw-sp)) * 16);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .6s var(--ease-rintosull-out);
  }
  .button_primary:hover {
    background-color: var(--color-rintosull-primary-blue2);
  }
  .button_primary:active {
    transform: translateY(2px);
  }
  .button_primary_icon {
    flex: 0 0 auto;
    width: calc((100vw / var(--vw-sp)) * 28);
    height: calc((100vw / var(--vw-sp)) * 28);
    transition: transform .6s var(--ease-rintosull-out);
  }
  .button_primary:hover .button_primary_icon {
    transform: translateX(5px);
  }
  /* button_secondary: 白背景・青ボーダー版（VOICE セクション内など暗背景上で使う） */
  .button_secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc((100vw / var(--vw-sp)) * 4);
    min-width: calc((100vw / var(--vw-sp)) * 250);
    max-width: 100%;
    min-height: calc((100vw / var(--vw-sp)) * 48);
    padding:
      calc((100vw / var(--vw-sp)) * 3.5) calc((100vw / var(--vw-sp)) * 12.5) calc((100vw / var(--vw-sp)) * 4.5) calc((100vw / var(--vw-sp)) * 24.5);
    border: 1px solid var(--color-rintosull-primary-blue1);
    border-radius: calc((100vw / var(--vw-sp)) * 50);
    background-color: var(--color-rintosull-white);
    color: var(--color-rintosull-primary-blue1);
    font-size: calc((100vw / var(--vw-sp)) * 16);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .6s var(--ease-rintosull-out);
  }
  .button_secondary:hover {
    background-color: var(--color-rintosull-secondary1-blue3-80, #d4e3f7);
  }
  .button_secondary:active {
    transform: translateY(2px);
  }
  .button_secondary:hover .button_primary_icon {
    transform: translateX(5px);
  }
  @media (min-width: 801px) {
    .button_primary {
      gap: 4px;
      min-width: 250px;
      min-height: 48px;
      padding: 3.5px 14.5px 4.5px 24.5px;
      border-radius: 50px;
      font-size: 16px;
    }
    .button_primary_icon {
      width: 28px;
      height: 28px;
    }
    .button_secondary {
      gap: 4px;
      min-width: 250px;
      min-height: 48px;
      padding: 3.5px 14.5px 4.5px 24.5px;
      border-radius: 50px;
      font-size: 16px;
    }
  }