*:focus {
  outline: none;
  box-shadow: none;
}

body {
  margin: 0;
}

a {
  text-decoration: none;
  color: #666666;
}

h1,
h2,
h3,
p,
span {
  color: #666666;
  text-align: center;
}

h2 {
  font-size: 64px;
  font-weight: bold;
  margin-bottom: 30px;
  line-height: 8rem;
  text-align: center;
}

h3 {
  font-size: 54px;
  font-weight: 400;
  margin-bottom: 30px;
  text-align: center;
  line-height: 7.2rem;
}

h4 {
  font-size: 30px;
  text-align: center;
}

p {
  font-size: 22px;
  line-height: 4.2rem;
  text-align: center;
}

span {
  font-size: 16px;
  text-align: center;
}

.pc-only,
.sp-only {
  display: none;
}

video {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .pc-only {
    display: block;
  }

  .sp-only {
    display: none;
  }

  .sp_br {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .sp-only {
    display: block;
  }

  .pc-only {
    display: none;
  }

  .sp_br {
    display: block;
  }
}

.fv_wrap {
  width: 100%;
  position: relative;
  padding: 0;
}

.fv_img_content_01 {
  width: 100%;
  position: relative;
}

.fv_img_content_02 {
  width: 100%;
  margin: 5vw auto 2.5vw;
  padding: 0 0 2.5vw;
  position: relative;
}

.fv_img img {
  width: 100%;
}

.fv_img {
  margin: 0 auto;
  width: 100%;
  position: relative;
  margin-top: 120px;
  margin-bottom: 200px;
}

.fv_img_text {
  margin: 0 auto;
  width: 80%;
  max-width: 800px;
  position: relative;
}

.fv_img_text img {
  width: 100%;
}

@media screen and (max-width: 599px) {
  .fv_img img {
    width: 100%;
  }

  .fv_text {
    left: 50%;
  }

  .fv_text img {
    width: 65vw;
    max-width: 500px;
  }
}

.fv_logo {
  text-align: center;
  padding-bottom: 3vw;
}

.fv_logo img {
  width: 40vw;
  max-width: 350px;
}

.fv_product {
  position: absolute;
  top: 28%;
  left: 68%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 10;
}

.fv_product img {
  width: 23vw;
}

.fv_box {
  width: 100%;
}

.fv_box {
  width: 100%;
  overflow: hidden;
}

.fv_box_img {
  width: 100%;
  height: 65vw;
  object-fit: cover;
}

.campaign {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
}

.campaign img {
  width: 100%;
}


.ryl2027-image-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  max-width: 1000px;
  margin: 0 auto;
  justify-content: start;
}

.ryl2027-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  opacity: 1;
  transition: 0.2s;
  border: 2px solid transparent;
}

.ryl2027-thumb:focus {
  outline: none;
}



.ryl2027-thumb:hover {
  opacity: 0.8;
}

.ryl2027-thumb.active {
  opacity: 1;
  transform: scale(1.2);
}

.ryl2027-section {
  display: none;
  margin-bottom: 20px;
}

.ryl2027-sections {
  width: 100%;
}

.ryl2027-section.active {
  display: block;
}

/* スライダー */
.swiper {
  padding-bottom: 24px;
  /* pagination分の余白（適当に調整） */
  overflow: visible;
}

.swiper-pagination {
  bottom: 0;
  /* 枠内の一番下に固定 */
}

.swiper-slide {
  flex-shrink: 0;
  width: auto;
  margin: 0 auto;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.main_wrap {
  width: 100%;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  color: #666666;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: 20% !important;
  left: auto;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: 20% !important;
  right: auto;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: #525252 !important;
}

/* ===== 画像クリック可能にする ===== */
.swiper-slide img {
  cursor: zoom-in;
  transition: transform 0.3s ease;
}

.swiper-slide img:hover {
  transform: scale(1.02);
}

/* ===== モーダル本体 ===== */
.image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
}

/* 拡大画像 */
.image-modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 90vh;
  animation: zoomFade 0.3s ease;
}

/* 閉じるボタン */
.image-modal-close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.image-links-inner p {
  font-size: 16px;
}

.product-card__title {
  max-width: 970px;
  margin: 0 auto;
  text-align: center;
}

.product-card__title p {
  color: #ffffff;
  font-size: clamp(15px, 1.95vw, 20px);
  text-align: center;
  padding: 13px 13px;
  background: #666666;
  width: max-content;
  margin: 0 auto 1rem;
  border-radius: 5px;
  line-height: 1rem;
}

.product-card__title span {
  color: #666666;
  font-size: clamp(15px, 1.95vw, 24px);
  font-weight: 500;
  text-align: center;
}

/* アニメーション */
@keyframes zoomFade {
  from {
    transform: scale(0.8);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== モーダル本体（普段は非表示） ===== */
.image-modal {
  display: none;
  position: fixed;
  z-index: 9999;

  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  background-color: rgba(0, 0, 0, 0.85);

  /* 中央配置の準備（開いた時に効かせる） */
  justify-content: center;
  align-items: center;
}

/* 開いた時だけflexにする */
.image-modal.is-open {
  display: flex;
}

/* 拡大画像 */
.image-modal-content {
  display: block;
  max-width: 90%;
  max-height: 90vh;
  margin: 0;
  animation: zoomFade 0.3s ease;
}

/* 閉じるボタン */
.image-modal-close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

@media (max-width: 768px) {
  .image-modal-close {
    top: 10px;
    right: 20px;
    font-size: 32px;
  }
}

/* 画像の外枠（ここでクリップ） */
.image-modal-viewport {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* はみ出しを隠す */
  touch-action: none;
  /* ★これがピンチ実装に重要（ブラウザの拡大を止める） */
}

/* 画像：transformで拡大縮小＆移動する */
.image-modal-content {
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  /* iOS対策 */
  cursor: grab;
}

.image-modal-content:active {
  cursor: grabbing;
}

.ryl2027-sections {
  margin: 0 auto;
}


.ryl2027-thumb {
  width: 230px;
  height: 230px;
  margin-bottom: 10px;
}

.standardcolor,
.newcolor,
.limitedcolor {
  max-width: 970px;
  margin: 0 auto;
  margin-bottom: 30px;
}

.select_color {
  text-align: center;
  margin-bottom: 20px;
}

.select_color_p {
  margin-bottom: 30px;
}

.ryl2027-image-links {
  margin-bottom: 50px;
}

.ryl2027_color {
  margin-top: 200px;
  margin-bottom: 200px;
}


/* 回遊 */

.nine_mix_link {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 200px;
  background: #EFEFEF;
  background: linear-gradient(0deg, rgba(239, 239, 239, 1) 0%, rgba(243, 243, 243, 1) 100%);
  padding: 60px 0px;
}

.nine_mix_link_inner {
  display: flex;
  flex-direction: row;
  max-width: 970px;
  margin: 0 auto;
  text-align: center;
  gap: 30px;
}


.nine_mix_link img {
  width: 100%;
  border-radius: 20px;
  margin-bottom: 30px;
}

.nine_link,
.mix_link {
  width: 100%;
}

.nine_link_h,
.mix_link_h {
  margin-bottom: 10px;
}

.nine_link_p,
.mix_link_p {
  margin-bottom: 10px;
  line-height: 3.2rem;
}

.nine_link_price,
.mix_link_price {
  font-size: 18px;
}

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

.scroll_down {
  padding: 50px 0px;
  margin-bottom: 80px;
  position: relative;
  width: 100%;
  height: auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.scroll_down:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: linear-gradient(180deg, rgba(#000, 0) 0, rgba(#000, .8) 80%, rgba(#000, .8) 100%);
}

.scroll_down a {
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 13px;
  padding: 10px 20px 110px;
  color: #666666;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
  transition: .2s;
  overflow: hidden;
  margin: auto;
}

.scroll_down a:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 100px;
  background: #ddd;
}

.scroll_down a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 100px;
  background: #000;
}

.scroll_down a:hover {
  opacity: .5;
}

#type01 a:after {
  animation: sdl01 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }

  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }

  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }

  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* 問題提起 */

.common_probrem {
  margin-bottom: 200px;
}

.common_probrem_img {
  width: 100%;
  margin-bottom: 120px;
}

.common_probrem img {
  width: 100%;
}

/* アバウト */

.ryussel_about {
  margin-bottom: 200px;
}

.ryussel_about_img {
  position: relative;
  width: 60%;
  margin: 0 auto;
  padding-top: 80px;
}

.ryussel_about img {
  width: 100%;
  margin: 0 auto;
}

.ryussel_about_p {
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  line-height: 3.4rem;
}

/* ポイント */

.fly_point {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 200px;
}

.fly_point_img {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}

.fly_point_img img {
  width: 20%;
}

.fly_point_h {
  text-align: center;
  font-size: 54px;
  margin-bottom: 30px;
}

.fly_point_h h3 {
  margin-top: 0px;
}

.fly_point_wrapper {
  text-align: center;
  background: #EFEFEF;
  background: linear-gradient(0deg, rgba(239, 239, 239, 1) 0%, rgba(243, 243, 243, 1) 100%);
  margin-bottom: 100px;
}

.fly_point_wrapper_inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 50px;
  align-items: center;
  max-width: 970px;
  margin: 0 auto;
}

.fly_point_01,
.fly_point_02,
.fly_point_03 {
  background-color: #fff;
  padding: 50px 80px;
  border-radius: 20px;
  margin: 60px 0px;
}

.fly_point_01_img,
.fly_point_02_img,
.fly_point_03_img {
  width: 100px;
  margin: 0 auto;
  margin-bottom: 0px;
}

.fly_point_01_img img,
.fly_point_02_img img,
.fly_point_03_img img {
  text-align: center;
  margin-bottom: 10px;
}

.fly_point_01_p,
.fly_point_02_p,
.fly_point_03_p {
  font-size: 22px;
  line-height: 3.4rem;
  margin-bottom: 20px;
}

.ryl_light_reason_img,
.ryl_light_reason_img02 {
  width: 100%;
}

.ryl_light_reason01_02_img {
  margin-bottom: 80px;
}

.ryl_light_reason_img img,
.ryl_light_reason01_02_img img {
  width: 100%;
}


/* ポイント01 */

.fly_point01 {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 100px;
}

.fly_point01_img {
  width: 100%;
  background: #EBE2E3;
  background: linear-gradient(90deg, rgba(235, 226, 227, 1) 0%, rgba(220, 212, 209, 1) 100%);
  text-align: center;
}

.fly_point01_img img {
  width: 100%;
}

.fly_point01_02 {
  max-width: 970px;
  margin: 0 auto;
}

.fly_point01_02 h3 {
  color: #b1b1b1;
}

.fly_point01_02 span {
  color: #b1b1b1;
  font-size: 70px;
}


.fly_point01_02img {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 30px;
}

.fly_point01_02_img {
  width: 100%;
  background: #EDE5E6;
  background: linear-gradient(90deg, rgba(237, 229, 230, 1) 0%, rgba(218, 210, 207, 1) 100%);
  text-align: center;
}

.fly_point01_02img_01,
.fly_point01_02img_02 {
  width: 48%;
}

.fly_point01_02 img {
  width: 100%;
}

.fly_point_h {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  text-align: left;
  justify-content: center;
}

.fly_point_h span {
  font-family: "Jost", sans-serif;
  font-size: 100px;
  font-weight: 600;
  padding-right: 20px;
}

.fly_point02 {
  width: 100%;
  margin-bottom: 100px;
}

.fly_point02_img_pc {
  width: 100%;
}

.fly_point02_img {
  width: 100%;
  margin-bottom: 100px;
  background: #FEE9D8;
  background: linear-gradient(90deg, rgba(254, 233, 216, 1) 0%, rgba(249, 226, 209, 1) 100%);
}

.fly_point02_img img {
  width: 100%;
  margin: 0 auto;
}

.fly_point02_02 {
  max-width: 970px;
  margin: 0 auto;
  margin-bottom: 100px;
}

.fly_point02_02 h2 {
  text-align: center;
}

.fly_point02_02_img {
  max-width: 970px;
  margin: 0 auto;
  margin-bottom: 20px;
  width: 100%;
}

.fly_point02_02_01 {
  width: 100%;
}

.fly_point02_02_list_inner img {
  width: 100%;
}

.fly_point02_02_list {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-bottom: 20px;
}

.fly_point02_02_list_inner {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-bottom: 20px;
}

.fly_point02_02_list_inner video,
.fly_point02_02_list_inner img {
  width: 100%;
}


.fly_point02_02_list_inner {
  width: 48%;
}

.fly_point02_02_list_inner img,
.fly_point02_02_list_inner video {
  width: 100%;
}

.fly_point02_02_list_inner video {
  border-radius: 20px;
}

.shoulderbelt_img {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-bottom: 20px;
}

.shoulderbelt_img_01,
.shoulderbelt_img_02 {
  width: 47%;
}

.shoulderbelt_img_01 img,
.shoulderbelt_img_02 img {
  width: 100%;
}

.fly_point02_03 {
  background-color: #E6DEDB;
  margin-bottom: 120px;
}

.point02_03_inner {
  max-width: 970px;
  margin: 0 auto;
  padding: 100px 0px;
}

.point02_03_inner h2 {
  max-width: 970px;
  margin: 0 auto;
  text-align: center;
}

.point02_03_inner img {
  max-width: 970px;
  margin: 0 auto;
  width: 100%;
  margin-bottom: 30px;
}

.fly_point02_02 p {
  text-align: center;
  line-height: 3.6rem;
}

.fly_point02_02 span {
  color: #B3A262;
  text-align: center;
}

.fly_point02_02 h2 {
  text-align: center;
}

.fly_point02_02_img {
  width: 100%;
}

.fly_point02_02_01 img,
.fly_point02_02_02 img,
.fly_point02_02_03 img {
  width: 100%;
}

.fly_point02_03 {
  margin-bottom: 100px;
}

.fly_point02_03 h2 {
  text-align: center;
}

.fly_point02_03_img {
  max-width: 970px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-bottom: 30px;
  width: 100%;
}

.fly_point02_03_01,
.fly_point02_03_02 {
  width: 48%;
}

.fly_point02_03_01 video,
.fly_point02_03_02 img {
  width: 100%;
}

.fly_point02_03_01 video {
  border-radius: 20px;
}

.fly_point02_03 p {
  text-align: center;
  line-height: 3.6rem;
}

.fly_point02_03 span {
  color: #B3A262;
}

.fly_point02_04 {
  max-width: 970px;
  margin: 0 auto;
}

.fly_point02_04 h2 {
  text-align: center;
}

.fly_point02_04 img {
  max-width: 950px;
  margin: 0 auto;
  width: 100%;
  margin-bottom: 30px;
}

.fly_point03_pc {
  width: 100%;
  margin: 0 auto;
  background: #F5EFEE;
  background: linear-gradient(180deg, rgba(245, 239, 238, 1) 100%, rgba(237, 234, 235, 1) 0%);
}

.fly_point03_pc img {
  width: 100%;
}

.fly_point03_02 {
  background: #F5EFEE;
  background: linear-gradient(180deg, rgba(245, 239, 238, 1) 100%, rgba(237, 234, 235, 1) 0%);
  padding-bottom: 60px;
  padding: 60px 0px 120px;
}

.fly_point03_02_h {
  max-width: 780px;
  margin: 0 auto;
}

.fly_point03_02_mv {
  max-width: 780px;
  margin: 0 auto;
  margin-bottom: 30px;
}

.fly_point03_02_mv video {
  width: 100%;
  border-radius: 20px;
}

.fly_point03_02_img {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: space-between;
  max-width: 780px;
  margin: 0 auto;
  margin-bottom: 30px;
}

.fly_point03_02_img img {
  width: 48%;
}

.fly_point03_02_p {
  max-width: 780px;
  margin: 0 auto;
}

.fly_point03_list {
  background: #F5EFEE;
  background: linear-gradient(180deg, rgba(245, 239, 238, 1) 100%, rgba(237, 234, 235, 1) 0%);
  padding-bottom: 60px;
  margin-bottom: 100px;
}

.fly_point03_03 {
  padding-bottom: 120px;
}

.fly_point03_03 img {
  width: 100%;
}

.fly_point03_03_inner {
  max-width: 780px;
  margin: 0 auto;
}

.fly_point03_03_inner_mv {
  margin-bottom: 30px;
}

.fly_point03_03_inner video {
  width: 100%;
  border-radius: 20px;
}

.fly_point03_03_inner img {
  width: 100%;
}



.fly_point03_04,
.fly_point03_05,
.fly_point03_06,
.fly_point03_07,
.fly_point03_08,
.fly_point03_09,
.fly_point03_10 {
  padding-bottom: 100px;
}

.fly_point03_04 {
  text-align: center;
}

.fly_point03_04,
.fly_point03_05,
.fly_point03_06,
.fly_point03_07,
.fly_point03_09,
.fly_point03_10 {
  max-width: 780px;
  margin: 0 auto;
}

.fly_point03_04 img,
.fly_point03_05 img,
.fly_point03_06 img,
.fly_point03_07 img {
  width: 100%;
  margin-bottom: 20px;
}

.fly_point03_04 video {
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
}

.fly_point03_04 span {
  text-align: center;
}

.fly_point03_06 p {
  margin-bottom: 30px;
}

.fly_point03_06_02 {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 30px;
}


.fly_point03_07_img {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.fly_point03_07_img01 {
  width: 100%;
  margin: 0 auto;
}

.fly_point03_07_img01 video {
  display: block;
  border-radius: 20px;
}

.fly_point03_07_img02 {
  width: 100%;
}

.fly_point03_08 {
  background-color: #000;
  padding: 50px 0px;
  margin-bottom: 50px;
}

.fly_point03_08 h3 {
  color: #fff;
}

.fly_point03_08_img_list_inner {
  max-width: 500px;
  margin: 0 auto;
}

.fly_point03_08_img_list {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
}

.fly_point03_08_img_list img {
  width: 48%;
}

.fly_point03_09 img {
  width: 100%;
  margin-bottom: 30px;
}

.fly_point03_09 p {
  margin-bottom: 30px;
}

.fly_point03_10_img_list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 30px;
}

.fly_point03_10_img_list img {
  width: 30%;
}

.media {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
  margin-bottom: 200px;
}

.media h2 {
  text-align: center;
}

.media_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 50px;
}

.media_list img {
  width: 30%;
}

.media_youtube_list {
  max-width: 970px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}


.media_02_01 a,
.media_02_02 a {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.media_02_01,
.media_02_02 {
  background-color: #D9D9D9;
  padding: 10px 20px;
  border-radius: 20px;
  width: 49%;
}

.media_02_01 img,
.media_02_02 img {
  margin-right: 10px;
}

.media_02_01 p,
.media_02_02 p {
  margin-right: 10px;
  font-size: 20px;
}

.media_02_01 span,
.media_02_02 span {
  font-size: 16px;
}

.media02_text {
  margin-bottom: 20px;
}



.media_youtube_list {
  margin-bottom: 30px;
}

.media_net_list {
  max-width: 970px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.media_net_list img {
  width: 31%;
  box-shadow: 0px 0px 20px 0px #c7c7c7;
  border-radius: 20px;
}

.gooddesign {
  width: 100%;
  ;
  margin-bottom: 200px;
  background: #FEE9D8;
  background: linear-gradient(90deg, rgba(254, 233, 216, 1) 0%, rgba(249, 226, 209, 1) 100%);
}

.gooddesign img {
  width: 100%;
}

.sns {
  max-width: 970px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 100px;
  width: 100%;
}

.sns img {
  width: 100%;
}

.instagram {
  max-width: 970px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 100px;
  width: 100%;
}

.instagram h2 {
  text-align: left;
}

.instagram img {
  width: 40%;
}

.background {
  margin-bottom: 100px;
  background: #EAE6E3;
  background: linear-gradient(0deg, rgba(234, 230, 227, 1) 100%, rgba(245, 239, 239, 1) 0%);
}

.background_inner {
  max-width: 970px;
  margin: 0 auto;
  padding: 100px 0px;
}

.background img {
  max-width: 970px;
  margin: 0 auto;
}

.background h2 {
  margin-bottom: 30px;
  text-align: center;
}

.background p {
  padding: 20px 0px;
}

.ryussel_update {
  max-width: 970px;
  margin: 0 auto;
  margin-bottom: 100px;
}

.ryussel_update h2 {
  margin: 10px 0px 30px;
}

.ryussel_update_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
}

.ryussel_update_list img {
  width: 31%;
}

.ryussel_timeline {
  max-width: 970px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 120px;
}

.ryussel_timeline h2 {
  margin-bottom: 80px;
}

.ryussel_timeline img {
  width: 100%;
}

.message {
  max-width: 970px;
  margin: 0 auto;
  margin-bottom: 100px;
}

.message_img {
  width: 100%;
  margin-bottom: 30px;
}

.message_img img {
  width: 100%;
}

/* コンテナ */
.accordion {
  max-width: 970px;
  text-align: center;
}

/* チェックボックス非表示 */
.accordion__toggle {
  display: none;
}

/* 閉じている状態：3行で省略 */
.accordion__content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;

  line-height: 1.6;
  transition: all 0.3s ease;
}

/* 開いた状態：全文表示 */
.accordion__toggle:checked~.accordion__content {
  display: block;
}


/* ボタン */
.accordion__btn {
  display: inline-block;
  margin-top: 6px;
  color: #B3A262;
  cursor: pointer;
  font-weight: 500;
}

/* ボタン文言 */
.accordion__btn::after {
  content: "もっと見る";
}

.accordion__toggle:checked~.accordion__btn::after {
  content: "閉じる";
}

.accordion {
  position: relative;
}

.accordion:not(:has(.accordion__toggle:checked)) .accordion__content::after {
  content: "";
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, white);
}

.accordion:not(:has(.accordion__toggle:checked)) .accordion__content02::after {
  content: "";
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, #EFEFEF);
}

.ryussel_list {
  background: #EAE6E3;
  background: linear-gradient(0deg, rgba(234, 230, 227, 1) 100%, rgba(245, 239, 239, 1) 0%);
  margin-bottom: 100px;
}

.ryussel_list_wrapper {
  padding: 100px 0px;
  max-width: 970px;
  margin: 0 auto;
}

.ryussel_list h3 {
  text-align: left;
  margin-top: 0px;
}

.ryussel_list_inner {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
}

.ryussel_fly,
.ryussel_fly,
.ryussel_mix {
  width: 100%;
}

.ryussel_list_inner a {
  width: 33%;
}

.ryussel_list_inner img {
  width: 100%;
}

.ryussel_customize {
  max-width: 970px;
  margin: 0 auto;
  margin-bottom: 200px;
}

.ryussel_customize h3 {
  text-align: left;
}

.customize_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
}

.customize_list01,
.customize_list02,
.customize_list03 {
  width: 30%;
  text-align: center;
}

.customize_list01 img,
.customize_list02 img,
.customize_list03 img {
  width: 100%;
  margin-bottom: 30px;
}

.customize_list01 p,
.customize_list02 p,
.customize_list03 p {
  font-size: 16px;
  margin-bottom: 10px;
}

.ryussel_package {
  max-width: 970px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 60px;
}

.package_left,
.package_right {
  width: 48%;
}

.package_right img {
  width: 100%;
}

.package_left h3 {
  margin-bottom: 20px;
  text-align: left;
}

.package_left p {
  text-align: left;
}

.ryussel_gray {
  padding: 60px 0px;
  margin-bottom: 100px;
  background: #EFEFEF;
  background: linear-gradient(0deg, rgba(239, 239, 239, 1) 0%, rgba(243, 243, 243, 1) 100%);
}

.ryussel_schedule,
.ryussel_guarantee {
  max-width: 970px;
  margin: 0 auto;
}


.ryussel_schedule img {
  width: 100%;
  margin-bottom: 30px;
}

.ryussel_faq {
  max-width: 970px;
  margin: 0 auto;
  text-align: center;
  background: #EFEFEF;
  background: linear-gradient(0deg, rgba(239, 239, 239, 1) 0%, rgba(243, 243, 243, 1) 100%);
  padding: 60px 80px;
  border-radius: 20px;
  margin-bottom: 100px;
}

.faq_01,
.faq_02,
.faq_03,
.faq_04 {
  margin-bottom: 30px;
}

.faq_01_q,
.faq_02_q,
.faq_03_q,
.faq_04_q {
  margin-bottom: 10px;
}

.rikomon_care {
  width: 100%;
  margin-bottom: 50px;
}

.rikomon_care img {
  width: 100%;
  margin-bottom: 30px;
}

.rikomon_care p {
  margin-bottom: 30px;
}

.rikomon_care p,
.ryussel_care p {
  font-size: 14px;
  text-align: left;
}

.ryussel_care {
  width: 100%;
}

.rylcare_btn {
  max-width: 450px;
  margin: 0 auto;
  margin-top: 50px;
  background-color: #525252;
  text-align: center;
  margin-top: 50px;
}

.rylcare_btn p {
  color: #fff;
  text-align: center;
}

/* 3行で「…」 */
.clamp-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
  /* ←初期3行 */
  line-height: 1.8;
}

/* 開いた時は制限解除 */
.clamp-box.is-open .clamp-text {
  -webkit-line-clamp: unset;
  overflow: visible;
  display: block;
}

/* ボタン見た目 */
.clamp-toggle {
  margin-top: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  color: #B3A262;
}

.clamp-toggle {
  display: block;
  margin: 10px auto 0;
  /* ←中央寄せ */
  text-align: center;
}

/* そもそも3行以内ならボタン非表示 */
.clamp-box.is-short .clamp-toggle {
  display: none;
}

/* clamp-boxを基準にしてフェードを重ねる */
.clamp-box {
  position: relative;
}

/* 閉じている時だけ、下部にグラデーション */
.clamp-box:not(.is-open) .clamp-text {
  position: relative;
}

/* フェード（続きがある感） */
.clamp-box:not(.is-open) .clamp-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 3.2em;
  /* フェードの高さ：好みで */
  pointer-events: none;

  /* 背景色が白前提。別色ならここだけ調整 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(239, 239, 239));
}

.ryussel_care img {
  width: 100%;
  margin-bottom: 30px;
}

.offer {
  text-align: center;
}

.offer_line {
  margin-top: 50px;
  margin-bottom: 100px;

}

.offer_line a {
  max-width: 500px;
  margin: 0 auto;
  background-color: #06C755;
  color: #fff;
  font-size: 16px;
  padding: 20px 50px;
  border-radius: 20px;
}

.spec {
  max-width: 970px;
  margin: 0 auto;
  margin-bottom: 100px;
}



@media screen and (max-width: 767px) {
  .fv_img {
    margin: 0 auto;
    width: 100%;
    position: relative;
    margin-top: 30px;
    margin-bottom: 80px;
  }

  h2 {
    font-size: 36px;
    margin-bottom: 20px;
    line-height: 5rem;
  }

  h3 {
    font-size: 28px;
    margin-bottom: 20px;
    line-height: 3.6rem;
  }

  h4 {
    font-size: 20px;
  }

  p {
    font-size: 16px;
    line-height: 2.6rem;
  }

  .campaign {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 50px;
  }

  .swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block;
    height: auto;
  }

  .swiper,
  .swiper-wrapper,
  .swiper-slide {
    height: auto !important;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: auto !important;
    margin: 0 0 30px;
  }

  .swiper-slide {
    height: auto !important;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 20px !important;
  }

  .swiper-button-next,
  .swiper-rtl .swiper-button-prev {
    right: 15% !important;
    left: auto;
  }

  .swiper-button-prev,
  .swiper-rtl .swiper-button-next {
    left: 15% !important;
    right: auto;
  }

  .ryl2027-section {
    margin-bottom: 40px;
  }

  .ryl2027_color {
    margin-top: 100px;
    margin-bottom: 100px;
  }

  .ryl2027-thumb {
    width: 113px;
    height: 113px;
  }

  .select_color_p {
    margin-bottom: 10px;
  }

  .standardcolor,
  .newcolor,
  .limitedcolor {
    max-width: 300px;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  .sp_limited_color_img {
    margin-bottom: 20px;
  }

  .ryl2027-image-links {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    max-width: 350px;
    margin: 0 auto;
    justify-content: start;
    margin-bottom: 30px;
  }

  .image-links-inner p {
    font-size: 10px;
  }

  .limited_color {
    margin-bottom: 100px;
  }

  .limited_color p {
    text-align: center;
  }

  .fly_mix_link img {
    margin-bottom: 20px;
  }

  .fly_mix_link {
    padding: 40px 0px 40px;
    margin-bottom: 150px;
  }

  .nine_mix_link_inner {
    max-width: 340px;
    margin: 0 auto;
    padding: 0;
  }

  .common_probrem {
    margin-bottom: 200px;
  }

  .common_probrem_sp {
    position: relative;
  }

  .common_probrem h2 {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    top: 20%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    color: #fff;
    line-height: 4.2rem;
    ;
  }

  .ryussel_about {
    margin-bottom: 50px;
  }

  .ryussel_about_img {
    position: relative;
    width: 80%;
    margin: 0 auto;
    padding-top: 100px;
  }

  .ryussel_about_img img {
    text-align: center;
    margin: 0 auto;
    display: inline-block;
  }

  .ryussel_about_img p {
    position: absolute;
    text-align: center;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }

  .fly_point {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 60px;
  }

  .fly_point_h {
    margin-bottom: 10px;
  }

  .fly_point_img img {
    width: 40%;
  }

  .fly_point_wrapper {
    margin-bottom: 60px;
  }

  .fly_point_wrapper_inner {
    max-width: 350px;
    margin: 0 auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
  }


  .fly_point_01,
  .fly_point_02,
  .fly_point_03 {
    background-color: #fff;
    padding: 30px 10px;
    border-radius: 20px;
    margin: 0px;
  }

  .fly_point_01 img,
  .fly_point_02 img,
  .fly_point_03 img {
    width: 35px;
    margin-bottom: 5px;
    text-align: center;
  }

  .fly_point_01 p,
  .fly_point_02 p,
  .fly_point_03 p {
    margin-top: 10px;
    margin-bottom: 0px;
    font-size: 15px;
    line-height: 2.4rem;
  }

  .fly_point_h span {
    font-size: 50px;
    font-weight: 600;
    padding-right: 20px;
  }

  .fly_point_h h2 {
    text-align: left;
  }

  .fly_point01 {
    margin-bottom: 60px;
  }

  .fly_point01_img {
    width: 100%;
  }

  .fly_point01_img img {
    width: 100%;
  }

  .fly_point01_02 {
    max-width: 350px;
    margin: 0 auto;
  }

  .fly_point01_02 span {
    color: #b1b1b1;
    font-size: 40px;
  }

  .fly_point01_02img {
    gap: 10px;
    margin-bottom: 20px;
  }

  .ryl_light_reason01_02_img {
    margin-bottom: 0px;
  }

  .ryl_light_reason01_img03 {
    background-color: #E6DEDB;
    padding: 50px 0px;
    margin-bottom: 50px;
  }

  .ryl_light_reason01_img03_img {
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 20px;
    width: 100%;
  }

  .ryl_light_reason01_img03_img img {
    width: 100%;
  }

  .ryl_light_reason01_img03 p {
    max-width: 350px;
    margin: 0 auto;
    text-align: left;
  }

  .fly_point02 {
    margin-bottom: 60px;
  }

  .fly_point02_img_pc {
    width: 100%;
  }

  .fly_point02_img img {
    width: 100%;
    margin: 0 auto;
  }

  .fly_point02_img {
    margin-bottom: 60px;
  }

  .fly_point02_img_sp {
    width: 100%;
    margin-bottom: 60px;
  }

  .fly_point02_img_sp img {
    width: 100%;
  }

  .fly_point02_sp_img {
    margin-bottom: 50px;
  }

  .fly_point02_sp_img img {
    width: 100%;
  }

  .fly_point02_02 {
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 60px;
  }

  .fly_point02_02_img {
    width: 100%;
  }

  .fly_point02_02_img img {
    width: 100%;
  }

  .fly_point02_03 {
    margin-bottom: 60px;
  }

  .fly_point02_03 img {
    margin-bottom: 20px;
  }

  .point02_03_inner {
    max-width: 350px;
    margin: 0 auto;
    padding: 40px 0px;
  }


  .fly_point02_03 {
    margin-bottom: 80px;
  }

  .fly_point02_03_img {
    max-width: 350px;
    gap: 10px;
    margin-bottom: 30px;
    width: 100%;
  }

  .fly_point02_03 p {
    line-height: 2.6rem;
    ;
  }

  .fly_point02_04 {
    max-width: 350px;
    margin: 0 auto;
  }

  .fly_point02_04 img {
    margin-bottom: 20px;
  }

  .fly_point02_02_01,
  .fly_point02_02_02,
  .fly_point02_02_03 {
    width: 100%;
  }

  .fly_point03_list {
    margin-bottom: 80px;
  }

  .fly_point03_sp {
    width: 100%;
  }

  .fly_point03_img {
    padding-top: 30px;
    max-width: 350px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  .fly_point03_sp img {
    width: 100%;
  }

  .fly_point03_img img {
    width: 48%;
  }

  .fly_point03_02 {
    max-width: 350px;
    margin: 0 auto;
    padding-bottom: 60px;
  }

  .fly_point03_02 h3 {
    margin-bottom: 10px;
  }

  .fly_point03_02_img {
    max-width: 350px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
  }

  .fly_point03_02_img img {
    width: 48%;
  }

  .fly_point03_02_mv {
    margin-bottom: 20px;
  }

  .fly_point03_03 {
    max-width: 350px;
    margin: 0 auto;
    padding-bottom: 60px;
  }

  .point03_03_fidlock {
    width: 100%;
  }

  .fly_point03_03_inner_mv {
    margin-bottom: 10px;
  }

  .fly_point03_03_inner_mv video {
    width: 100%;
    margin-bottom: 10px;
  }

  .point03_03_fidlock h3,
  .fly_point03_03_sp p {
    max-width: 350px;
    margin: 0 auto;
  }

  .fly_point03_03_sp h3 {
    margin-bottom: 10px;
  }

  .fly_point03_06 {
    margin-bottom: 30px;
  }

  .fly_point03_06_01 p {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .fly_point03_04 img,
  .fly_point03_05 img,
  .fly_point03_06 img {
    margin-bottom: 10px;
  }

  .fly_point03_04,
  .fly_point03_05,
  .fly_point03_06,
  .fly_point03_07,
  .fly_point03_08,
  .fly_point03_09,
  .fly_point03_10 {
    padding-bottom: 60px;
  }


  .fly_point03_04,
  .fly_point03_05,
  .fly_point03_06,
  .fly_point03_07,
  .fly_point03_09,
  .fly_point03_10 {
    max-width: 350px;
    margin: 0 auto;
  }

  .fly_point03_06_02,
  .fly_point03_07_img,
  .fly_point03_08_img_list,
  .fly_point03_10_img_list {
    gap: 10px;
    justify-content: space-between;
  }

  .fly_point03_09 p {
    margin-bottom: 30px;
  }

  .fly_point03_10_img_list {
    margin-bottom: 20px;
  }

  .fly_point03_10_img_list img {
    width: 31%;
  }

  .fly_point03_10 {
    padding-bottom: 0;
  }

  .media {
    max-width: 350px;
    margin: 0 auto;
  }

  .media h2 {
    font-size: 32px;
  }

  .media_list {
    gap: 12px;
    margin-bottom: 40px;
  }

  .media_list img {
    width: 31%;
  }

  .media_youtube_list {
    max-width: 350px;
    margin: 0 auto;
    flex-direction: column;
    justify-content: space-around;
    margin-bottom: 20px;
  }

  .media_youtube_list img {
    width: 50px;
  }

  .media_youtube_list p {
    margin-bottom: 0px;
  }

  .media02 {
    margin-bottom: 80px;
  }

  .media02 p {
    margin-bottom: 20px;
  }

  .media_02_01,
  .media_02_02 {
    padding: 0;
    width: 100%;
  }

  .media_02_01 p,
  .media_02_02 p {
    font-size: 15px;
    margin-bottom: 0 !important;
  }

  .media_02_01 span,
  .media_02_02 span {
    font-size: 13px;
  }

  .media_02_01 a,
  .media_02_02 a {
    width: 100%;
    padding: 5px;
  }

  .media_02_01 {
    margin-bottom: 10px;
  }


  .media_02_01 {
    margin-right: 0px;
  }

  .media_net_list {
    max-width: 350px;
    margin: 0 auto;
  }

  .media_net_list img {
    width: 100%;
  }

  .gooddesign {
    margin-bottom: 120px;
  }

  .sns {
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 60px;
  }

  .instagram {
    max-width: 350px;
    flex-direction: column;
    margin-bottom: 60px;
  }

  .instagram img {
    width: 70%;
  }

  .instagram h2 {
    text-align: center;
  }

  .background {
    background: #EAE6E3;
    background: linear-gradient(0deg, rgba(234, 230, 227, 1) 100%, rgba(245, 239, 239, 1) 0%);
    margin-bottom: 60px;
  }

  .background_inner {
    max-width: 350px;
    margin: 0 auto;
    padding: 60px 0px;
  }

  .background h3 {
    max-width: 350px;
    margin: 0 auto;
  }

  .background img {
    max-width: 350px;
    margin: 0 auto;
  }

  .ryussel_update {
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 60px;
  }

  .ryussel_update h2 {
    margin-top: 0px;
    margin-bottom: 20px;
  }

  .ryussel_update p {
    margin-bottom: 0px;
  }

  .ryussel_update_list img {
    width: 31%;
  }

  .ryussel_update_list {
    gap: 10px;
  }

  .ryussel_timeline {
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 60px;
  }

  .ryussel_timeline h2 {
    margin-bottom: 20px;
  }

  .message {
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 60px;
  }

  .message p {
    text-align: left;
  }

  .accordion-003 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    color: #666666;
    font-weight: 600;
    cursor: pointer;
    font-size: 16px;
    line-height: 2.4rem;
  }

  .ryussel_list {
    margin-bottom: 60px;
  }

  .ryussel_list_wrapper {
    padding: 60px 0px;
    max-width: 350px;
    margin: 0 auto;
  }

  .ryussel_list h3 {
    margin-bottom: 20px;
  }

  .ryussel_customize {
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 60px;
  }

  .customize_list {
    gap: 10px;
  }

  .customize_list01 img,
  .customize_list02 img,
  .customize_list03 img {
    margin-bottom: 20px;
  }

  .customize_list01,
  .customize_list02,
  .customize_list03 {
    width: 31%;
    text-align: left;
  }

  .customize_list01 p,
  .customize_list02 p,
  .customize_list03 p {
    font-size: 14px;
    line-height: 1.8rem;
    margin-bottom: 10px;
  }

  .customize_list01 span,
  .customize_list02 span,
  .customize_list03 span {
    font-size: 16px;
  }

  .ryussel_customize h3 {
    margin-bottom: 20px;
  }

  .ryussel_package {
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 60px;
  }

  .ryussel_package h3 {
    text-align: left;
    margin-bottom: 20px;
  }

  .ryussel_package img {
    width: 100%;
    margin-bottom: 20px;
  }

  .ryussel_package.pc-only {
    margin: 0;
  }

  .ryussel_schedule {
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 0px;
  }

  .ryussel_faq {
    max-width: 350px;
    margin: 0 auto;
    padding: 10px;
    margin-bottom: 60px;
    padding: 60px 30px;
  }

  .ryussel_faq h3 {
    margin-bottom: 20px;
  }

  .faq_01,
  .faq_02,
  .faq_03,
  .faq_04 {
    margin-bottom: 20px;
  }

  .ryussel_faq p {
    margin-bottom: 0px;
    margin-top: 0px;
  }

  .ryussel_guarantee {
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 0px;
  }

  .ryussel_guarantee h3 {
    margin-bottom: 20px;
    text-align: left;
  }

  .rikomon_care {
    margin-bottom: 60px;
  }

  .rikomon_care img {
    margin-bottom: 20px;
  }

  .rikomon_care p,
  .ryussel_care p {
    font-size: 14px;
    line-height: 2.6rem;
  }

  .ryussel_care img {
    margin-bottom: 20px;
  }

  .rylcare_btn {
    padding: 10px;
  }

  .ryussel_gray {
    margin-bottom: 60px;
    padding: 60px 0px;
  }

  .offer {
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 30px;
  }

  .spec {
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 60px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  p {
    font-size: 18px;
    line-height: 3.2rem;
  }

  .itemInfoContainer {
    padding: 0rem;
  }

  h2 {
    font-size: 54px;
    margin-bottom: 30px;
    line-height: 7rem;
  }

  h3 {
    font-size: 40px;
    margin-bottom: 30px;
    line-height: 5.2rem;
  }

  .fv_img {
    margin: 0 auto;
    width: 100%;
    position: relative;
    margin-top: 100px;
    margin-bottom: 150px;
  }

  .campaign {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }

  .select_color_p {
    margin-bottom: 10px;
  }

  .standardcolor,
  .newcolor,
  .limitedcolor {
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 30px;
  }

  .ryl2027-image-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    max-width: 800px;
    margin: 0 auto;
    justify-content: start;
  }

  .ryl2027-thumb {
    width: 190px;
    height: 190px;
  }

  .nine_mix_link_inner {
    max-width: 800px;
    margin: 0 auto;
  }

  .fly_mix_link {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin-bottom: 200px;
  }

  .ryussel_about_img {
    position: relative;
    width: 60%;
    margin: 0 auto;
    padding-top: 100px;
  }

  .fly_point {
    margin-bottom: 150px;
  }

  .fly_point_img img {
    width: 25%;
  }

  .fly_point_h {
    text-align: center;
    font-size: 54px;
    margin-bottom: 20px;
  }

  .fly_point_wrapper_inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
  }

  .fly_point_01,
  .fly_point_02,
  .fly_point_03 {
    background-color: #fff;
    padding: 50px 50px;
    border-radius: 20px;
    margin: 60px 0px;
  }

  .fly_point_h span {
    font-family: "Jost", sans-serif;
    font-size: 60px;
    font-weight: 600;
    padding-right: 20px;
  }

  .fly_point01_02 {
    max-width: 800px;
    margin: 0 auto;
  }

  .fly_point02 {
    margin-bottom: 100px;
  }

  .shoulderbelt_img {
    max-width: 800px;
    margin: 0 auto;
  }

  .fly_point02_02_01 {
    margin-bottom: 20px;
  }

  .fly_point02_02_img {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    /* width: 100%; */
  }

  .fly_point02_02_img img {
    width: 100%;
  }

  .fly_point02_02_list {
    max-width: 800px;
    margin: 0 auto;
  }

  .fly_point02_03 {
    margin-bottom: 100px;
  }

  .point02_03_inner {
    text-align: center;
    padding: 80px 0px;
  }

  .point02_03_inner img {
    max-width: 800px;
    margin: 0 auto;
  }

  .fly_point02_04 {
    max-width: 800px;
    margin: 0 auto;
  }

  .fly_point03_list {
    background: #F5EFEE;
    background: linear-gradient(180deg, rgba(245, 239, 238, 1) 100%, rgba(237, 234, 235, 1) 0%);
    padding-bottom: 60px;
    margin-bottom: 100px;
  }

  .fly_point03_02 {
    max-width: 800px;
    background: #F5EFEE;
    background: linear-gradient(180deg, rgba(245, 239, 238, 1) 100%, rgba(237, 234, 235, 1) 0%);
    margin: 0 auto;
  }

  .fly_point03_04 video {
    margin-bottom: 20px;
  }

  .fly_point03_04 span {
    text-align: center;
  }

  .fly_point03_04,
  .fly_point03_05,
  .fly_point03_06,
  .fly_point03_07,
  .fly_point03_09,
  .fly_point03_10 {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 100px;
  }

  .media {
    /* width: 100%; */
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 200px;
  }

  .sns {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 200px;
    width: 100%;
  }

  .instagram {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 200px;
    width: 100%;
  }

  .background {
    margin-bottom: 100px;
  }

  .background_inner {
    padding: 120px 0px;
    text-align: center;
  }

  .background img {
    max-width: 800px;
    margin: 0 auto;
  }

  .background {
    max-width: 800px;
    margin: 0 auto;
  }

  .background p {
    max-width: 800px;
    margin: 0 auto;
  }

  .ryussel_update {
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 200px;
  }

  .ryussel_list {
    /* max-width: 800px; */
    /* margin: 0 auto; */
    margin-bottom: 100px;
  }

  .ryussel_list_wrapper {
    padding: 60px 0px;
    max-width: 800px;
    margin: 0 auto;
  }

  .ryussel_update_list img {
    width: 30%;
  }

  .ryussel_timeline {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 120px;
  }

  .message {
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 200px;
  }

  .ryussel_list {
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 200px;
  }

  .ryussel_customize {
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 200px;
  }

  .ryussel_package {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 120px;
  }

  .ryussel_schedule,
  .ryussel_guarantee {
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 60px;
  }

  .ryussel_faq {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 60px 80px;
    border-radius: 20px;
    margin-bottom: 150px;
  }

  .accordion,
  .accordion02 {
    margin-bottom: 50px;
    text-align: center;
  }
}

@media screen and (min-width: 600px) and (max-width: 767px) {
  .itemInfoContainer {
    padding: 0rem;
  }

  .fv_img {
    margin: 0 auto;
    width: 100%;
    position: relative;
    margin-top: 100px;
    margin-bottom: 80px;
  }

  .campaign {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  .select_color {
    text-align: center;
    margin-bottom: 40px;
  }

  .standardcolor,
  .newcolor,
  .limitedcolor {
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  .ryl2027-image-links {
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    max-width: 500px;
    margin: 0 auto;
    justify-content: start;
    margin-bottom: 30px;
  }

  .ryl2027-thumb {
    width: 120px;
    height: 120px;
  }

  .fly_mix_link {
    margin-bottom: 100px;
  }

  .ryussel_about {
    margin-bottom: 80px;
  }

  .ryussel_about_img {
    position: relative;
    width: 80%;
    margin: 0 auto;
    padding-top: 50px;
  }

  .fly_point_img img {
    width: 30%;
  }

  .fly_point_01,
  .fly_point_02,
  .fly_point_03 {
    background-color: #fff;
    padding: 30px 50px;
    border-radius: 20px;
    margin: 0px;
  }

  .fly_point_wrapper_inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
    align-items: center;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .fly_point01_img {
    width: 100%;
    background: #EBE5E5;
    background: linear-gradient(320deg, rgba(235, 229, 229, 1) 0%, rgba(234, 228, 227, 1) 100%);
    text-align: center;
  }

  .fly_point01_img img {
    max-width: 500px;
    margin: 0 auto;
  }

  .fly_point01_02_img {
    width: 100%;
    background: #F4F2F3;
    background: linear-gradient(155deg, rgba(244, 242, 243, 1) 0%, rgba(219, 211, 209, 1) 100%);
    text-align: center;
  }

  .fly_point01_02_img img {
    max-width: 500px;
    margin: 0 auto;
  }

  .fly_point01_img03_img {
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 20px;
    text-align: center;
  }

  .fly_point02 {
    width: 100%;
  }

  .fly_point02_sp {
    width: 100%;
    text-align: center;
    background: #F0D7C1;
    background: linear-gradient(0deg, rgba(240, 215, 193, 1) 0%, rgba(251, 224, 197, 1) 100%);
    margin-bottom: 50px;
  }

  .fly_point02_sp img {
    max-width: 500px;
    margin: 0 auto;
  }

  .fly_point02_02_img {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    gap: 10px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  .fly_point02_03 {
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 80px;
  }

  .fly_point02_03_img {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 30px;
  }

  .fly_point02_04 {
    max-width: 500px;
    margin: 0 auto;
  }

  .fly_point03_sp {
    width: 100%;
    text-align: center;
    background: #EAE6E3;
    background: linear-gradient(0deg, rgba(234, 230, 227, 1) 0%, rgba(245, 239, 239, 1) 100%);
  }

  .fly_point03_sp img {
    max-width: 500px;
    margin: 0 auto;
  }

  .fly_point03_img {
    padding-top: 30px;
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* justify-content: space-between; */
  }

  .fly_point03_02 h3 {
    margin-bottom: 30px;
  }

  .fly_point03_02_img {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
  }

  .fly_point03_02 {
    max-width: 500px;
    margin: 0 auto;
    padding-bottom: 60px;
    background: #EAE6E3;
    background: linear-gradient(0deg, rgba(234, 230, 227, 1) 0%, rgba(245, 239, 239, 1) 100%)
  }

  .fly_point03_03 {
    max-width: 500px;
    margin: 0 auto;
  }

  .fly_point03_03 h3 {
    margin-bottom: 30px;
  }

  .fly_point03_04,
  .fly_point03_05,
  .fly_point03_06,
  .fly_point03_07,
  .fly_point03_09,
  .fly_point03_10 {
    max-width: 500px;
    margin: 0 auto;
  }

  .fly_point03_06_01 p {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .media {
    max-width: 500px;
    margin: 0 auto;
  }

  .media_youtube_list {
    max-width: 500px;
    margin: 0 auto;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 20px;
  }

  .media_net_list {
    max-width: 500px;
    margin: 0 auto;
    flex-direction: row;
    justify-content: flex-start;
  }

  .media_02_01,
  .media_02_02 {
    padding: 0;
    width: 48%;
  }

  .media_net_list img {
    width: 48%;
  }

  .media_youtube_list img {
    width: 40px;
  }

  .media_02_01 p,
  .media_02_02 p {
    font-size: 13px;
    margin-bottom: 0 !important;
    line-height: 1.4rem;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .media_02_01 span,
  .media_02_02 span {
    font-size: 12px;
  }

  .sns {
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 120px;
  }

  .instagram {
    max-width: 500px;
    flex-direction: row;
    margin-bottom: 120px;
  }

  .instagram img {
    width: 45%;
  }

  .background {
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 120px;
  }

  .ryussel_update {
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 60px;
  }

  .ryussel_timeline {
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 60px;
  }

  .message {
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 120px;
  }

  .ryussel_list {
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 120px;
  }

  .ryussel_customize {
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 120px;
  }

  .ryussel_package {
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 80px;
  }

  .background img {
    width: 100%;
  }

  .ryussel_gray {
    margin-bottom: 60px;
    padding: 60px 0px 20px;
  }

  .ryussel_schedule {
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 60px;
  }

  .ryussel_faq {
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 80px;
    padding: 30px;
  }

  .ryussel_guarantee {
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 60px;
  }
}