@charset "UTF-8";
/*//////////////////////////////////////////////////

Title : LP CSS

//////////////////////////////////////////////////*/


/* ===================
  　　　RESET
=================== */

.intro_txt::before,
.intro_shop::after,
.event01_section .ttl_main::before,
.event02_section .ttl_main::before,
.event03_section .ttl_main::before,
.calendar_section .calendar_head::before,
.about_area::before {
  display: none;
}

/* ===================
  　　　INTRO
=================== */

.intro_section_inner {
  padding-top: 1rem;
}

.intro_txt {
  margin-bottom: 6.5rem;
}

.mv_img {
  margin-bottom: 0;
}

.intro_shop {
  margin-bottom: 7rem;
}

.btn_shop_check {
  width: 67.3rem;
  margin: 0 auto 7rem;
}

/* ===================
  　　　EVENT01
=================== */

.event01_section {
  padding-top: 14rem;
  background: url(../img/202411/bg_01.png) no-repeat  center -.7rem;
  background-size: 119.8rem;
}

.tab_btn_area .tab_btn {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.event_kit_wrap .ttl_kit_event .logo_area {
  vertical-align: middle;
}

.tag_pointup {
  position: relative;
  top: -.3rem;
  display: inline-block;
  width: auto;
  height: 2.2rem;
  margin: 0 .1rem 0 1.2rem;
  padding: 0.2rem 0.8rem;
  background: #ebfe9a;
  border-radius: 1rem 0 1rem 0;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.4;
  background-color: #ed7553;
  color: #fff;
  vertical-align: middle;
}

.event_kit_wrap .ttl_kit_event .logo_area + .tag_pointup {
  top: -.8rem;
}

.event_section .btn_event {
  font-weight: bold;
}

.event_section .btn_event.btn_shop_event {
  margin-top: 5rem;
}

.event_section .btn_event.btn_shop_event a {
  display: block;
}

.event_section .btn_event.btn_shop_event a::before,
.event_section .btn_event.btn_shop_event a::after {
  display: none;
}

.event_section .btn_event.btn_shop_event img {
  width: 100%;
}

.event01_section {
  margin-bottom: 4rem;
}

.event_kit_wrap .event_kit_img {
  position: relative;
}

.event_kit_img__icn {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 5rem;
  height: 5rem;
}

/* -- ブランド -- */
.event_brand {
  height: 3rem;
}

.event_brand.event_brand_fo img {
  width: 15rem;
}

/* -- タグ -- */
.event_tag {
  display: flex;
  gap: .8rem;
  margin: 2.2rem 0 0;
}

.event_tag .tag {
  display: inline-block;
  width: auto;
  height: 2.3rem;
  padding: 0.2rem 0.8rem;
  background: #ebfe9a;
  border-radius: 1rem 0 1rem 0;
  font-size: 1.4rem;
  line-height: 1.4;
  background-color: #ed7553;
  color: #fff;
  vertical-align: middle;
}

.event_tag .tag.red {
  background-color: #e95d2b;
}

.event_tag .tag.pink {
  background-color: #ed6b7d;
}

.event_tag .tag.yellow {
  background-color: #e2af3d;
}

.event_tag .tag.blue {
  background-color: #7171bf;
}

#panel2 .event_kit_wrap .ttl_kit_event {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#panel2 .event_kit_wrap .event_kit_bottom .btn_link_check {
  margin-right: auto;
}

.logo_trilogy img {
  width: 10rem;
}

/* ===================
  　　　EVENT02
=================== */

.event02_section {
  margin-bottom: 2rem;
  padding-top: 16rem;
}

.event02_section .inner {
  position: relative;
}

.event02_section .inner::before {
  position: absolute;
  top: -16rem;
  right: 5rem;
  width: 24rem;
  height: 16rem;
  background: url(../img/202411/bg_02.png) no-repeat  0 .8rem;
  background-size: 100%;
  content: "";
}

.event02_section .btn_wrap {
  margin-top: 5rem;
  margin-bottom: 0;
}

.event02_section .btn_wrap .btn_link {
  margin: auto;
}

/* ===================
  　　　EVENT03
=================== */

.event03_section {
  margin-bottom: 2rem;
  padding-top: 18rem;
}

.event03_section .inner {
  position: relative;
}

.event03_section .inner::before {
  position: absolute;
  top: -18rem;
  left: 5rem;
  width: 24rem;
  height: 18rem;
  background: url(../img/202411/bg_03.png) no-repeat  0 .8rem;
  background-size: 100%;
  content: "";
}

.txt_brand_area {
  font-size: 1.8rem;
}

.txt_mejirushi {
  margin: 1rem 0 4rem;
  font-size: 1.8rem;
  text-align: center;
}

.txt_mejirushi .tag_pointup {
  margin: 0 2rem 0 0;
}

.event_section .acc_btn .icn_btn::after {
  transform: none;
  top: -2rem;
  left: 50%;
  right: auto;
  width: 13.6rem;
  height: 3rem;
  border: none;
  transform: translateX(-50%);
  background: url(../img/202411/acc_btn.svg) no-repeat 0 0;
  background-size: 100%;
  content: "";
}
/* ===================
  　　　CALENDAR
=================== */

.calendar_section {
  margin-bottom: 2rem;
  padding-top: 16rem;
}

.calendar_section .inner {
  position: relative;
}

.calendar_section .inner::before {
  position: absolute;
  top: -16rem;
  right: 5rem;
  width: 24rem;
  height: 16rem;
  background: url(../img/202411/bg_04.png) no-repeat  0 .8rem;
  background-size: 100%;
  content: "";
}

.calendar_section .calendar_head {
  margin-bottom: 5.5rem;
}

.calendar_section .ttl_main_02 {
  margin-bottom: 5rem;
  font-size: 3rem;
}

.calendar_section .ttl_main_02 span {
  font-size: 4.5rem;
  line-height: 1;
}

/* ---- カレンダーナビ ---- */

.calendar_nav {
  margin-bottom: 5rem;
}

.calendar_nav ul {
  display: flex;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-wrap: nowrap;
}

.calendar_nav li {
  width: 20%;
  padding: 1rem 0rem;
  border: 2px solid;
  border-radius: 1rem;
  background-color: #fff;
  font-size: 2rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.calendar_nav .btn_all {
  border-color: #077a5e;
  color: #077a5e;
}

.calendar_nav .btn_all.active {
  background-color: #caefd6; /* 緑系 */
}

.calendar_nav .btn_event {
  border-color: #b584c1;
  color: #b584c1;
}

.calendar_nav .btn_event.active {
  background-color: #e7d3ec; /* 紫系 */
}

.calendar_nav .btn_off {
  border-color: #06c155;
  color: #06c155;
}

.calendar_nav .btn_off.active {
  background-color: #c1f2db; /* 緑系 */
}

.calendar_nav .btn_present {
  border-color: #e2799c;
  color: #e2799c;
}

.calendar_nav .btn_present.active {
  background-color: #f6d4df; /* ピンク系 */
}

.calendar_nav .btn_x {
  border-color: #f39929;
  color: #f39929;
}

.calendar_nav .btn_x.active {
  background-color: #fde6c5; /* オレンジ系 */
}

.calendar_nav .btn_secret {
  border-color: #d3a251;
  color: #946828;
}

.calendar_nav .btn_secret.active {
  background-color: #f7e4bf; /* ゴールド系 */
}

/* ---- カレンダー ---- */

.calendar_list {
  background: #fff;
}

.calendar_cont {
  margin: 0;
  padding: 0;
  border: none;
}

.calendar_list > ul > li:last-child > dl {
  border-bottom: 1px solid #9b9b9b;
}

.calendar_list_txt {
  padding: 2rem 0;
}

.calendar_list .icn.icn_x {
  width: 3rem;
  margin-left: 1rem;
}

.calendar_list .icn.icn_chusen {
  width: 3.4rem;
}

.calendar_list .icn.icn_present {
  width: 5.4rem;
}

.calendar_list .icn.icn_present2 {
  width: 3.6rem;
  margin-left: .4rem;
}

.calendar_list .icn.icn_event img {
  width: 4.5rem;
}

.calendar_list .icn.icn_time img {
  width: 4.5rem;
  margin-top: .5rem;
}


.calendar_list .tag {
  display: inline-block;
  text-align: left;
  line-height: 1.3;
}

.calendar_list a.tag {
  text-decoration: underline;
}

.calendar_list .tag.tag_orange {
  background-color: #f39929;
}

.calendar_list .tag.tag_brown {
  background-color: #dba231;
}

.calendar_list .tag.tag_green {
  background-color: #06c155;
}

.calendar_list .tag.tag_blue {
  background-color: #29a5dc;
}

.calendar_list .tag.tag_pink {
  background-color: #e2799c;
}

.calendar_list .tag.tag_purple {
  background-color: #b584c1;
}

.calendar_list .tag.tag_none {
  padding-right: 0;
  padding-left: 0;
  color: #000;
}

.calendar_list .tag.icn_blank {
  padding-right: 5.2rem;
  background-image: url(../img/202411/icn_target_white.svg) ;
  background-repeat: no-repeat;
  background-position: 89% center;
  background-size: 1.8rem;
  text-decoration: underline;
}

.calendar_list > ul > li > dl > dt {
  width: 6rem;
  margin-right: 4rem;
}

.calendar_list > ul > li > dl > dd {
  gap: 3rem 6rem;
}

.calendar_list > ul > li > dl > dd .column_area p {
  display: flex;
  align-items: center;
}

.calendar_list > ul > li > dl > dd .column_area {
  height: auto;
}

.calendar_list .time_table {
  margin-bottom: 0;
  padding-top: .8rem;
}

.calendar_section .btn_shop_event {
  padding-top: .5rem;
  padding-bottom: 1.5rem;
}

.calendar_section .btn_shop_event a {
  display: block;
  margin: auto;
  padding: 0;
}

.calendar_section .btn_shop_event a::before {
  display: none;
}

.calendar_section .btn_shop_event img {
  width: 100%;
}



/* ===================
  　　　CONTENTS
=================== */

.contents_section {
  padding-top: 17rem;
}

.contents_section .inner {
  position: relative;
}

.contents_section .inner::before {
  position: absolute;
  top: -17rem;
  left: 5rem;
  width: 26rem;
  height: 17rem;
  background: url(../img/202411/bg_05.png) no-repeat  0 .8rem;
  background-size: 100%;
  content: "";
}

.contents_slide {
  margin: 0 -5rem;
  padding: 1rem;
  overflow: hidden;
}

.contents_slide ul {
}

.contents_slide .img_area img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 3px 6px rgb(0, 0, 0, 0.2);
}

.contents_slide .ttl_area {
  padding: 1.8rem 1rem 1rem;
  font-size: 2rem;
}

.contents_slide .txt_area {
  padding: 0 1rem;
  font-size: 1.8rem;
  text-align: left;
  word-break: break-all;
}

.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  width: calc(100% / 5);
  box-sizing: border-box;
}

.swiper-pagination-bullet {
  background: #333;
}

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

.swiper-slide-number {
  margin: 2rem 0;
  font-size: 2rem;
  text-align: center;
}

/* ---- モーダル ---- */

.contents_btn_all {
  width: 14.2rem;
  margin-top: -5rem;
  margin-left: auto;
}

.contents_btn_all img {
  cursor: pointer;
}

.modal_contents_list {
  background-color: rgba(0, 0, 0, 0.5);
}

.modal_contents_list .modal-content {
  overflow: hidden;
  overflow-y: scroll;
  height: 70dvh;
  margin-top: 10dvh;
  margin-bottom: 10dvh;
  border-radius: 1rem;
}

.modal_contents_list .close-btn {
  top: 3rem;
  left: 50%;
  right: auto;
  width: 5rem;
  height: 5rem;
  margin-left: 55rem;
  background: url(../img/202411/modal_btn_close.png) no-repeat 0 0;
  background-size: 100%;
}

.modal_contents_list .close-btn::before,
.modal_contents_list .close-btn::after {
  display: none;
}

.modal_contents_list .modal-content .close-btn {
  display: block;
  position: inherit;
  top: auto;
  right: auto;
  left: auto;
  margin: auto;
}

.modal_contents_list .contents_list {
  padding: 1rem;
}

.modal_contents_list .contents_list ul {
  margin-bottom: 5rem;
  gap: 2.5rem;
}

.modal_contents_list .contents_list ul li {
  width: calc(33.33% - 2.5rem);
}

.modal_contents_list .img_area img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 3px 6px rgb(0, 0, 0, 0.2);
}

.modal_contents_list .ttl_area {
  padding: 2rem 1rem 1rem;
  font-size: 2rem;
}

.modal_contents_list .txt_area {
  padding: 0 1rem;
  font-size: 1.8rem;
  text-align: left;
  word-break: break-all;
}

/* ---- 動画 ---- */

.contents_video {
  margin-top: 5rem;
  padding-top: 5rem;
  border-top: 1px solid #595757;
  text-align: center;
  font-size: 1.8rem;
}

.contents_video p {
  text-align: center;
  line-height: 1.5;
}

.contents_video .contents_youtube {
  margin-bottom: 10rem;
}

.contents_video .contents_youtube .youtube_area {
  width: 65rem;
  margin: auto auto 5rem;
  line-height: 0;
}

.contents_video .contents_special_video h4 {
  font-size: 4.5rem;
  font-weight: 500;
  color: var(--main-dark-color);
  text-align: center;
  letter-spacing: 0.01em;
  line-height: 1;
  margin-bottom: 5rem;
}

.contents_video .contents_special_video p {
  margin-bottom: 5rem;
}

.contents_video .contents_special_video .video_area {
  width: 30rem;
  margin: auto;
  line-height: 0;
}



/*=======================================
                    SP
========================================*/

/* SP用*/
@media (max-width: 768px) {

  /* ===================
    　　　INTRO
  =================== */

  .mv_img {
    margin-bottom: 0;
  }

  .btn_shop_check {
    width: calc(650 * (100vw / 760));
    margin: 0 auto calc(60 * (100vw / 760));
  }

  .lp_menu_top {
    margin-bottom: calc(90 * (100vw / 760));
  }

  .intro_shop dt {
    padding: calc(12 * (100vw / 760)) 0 calc(8 * (100vw / 760));
    letter-spacing: 0.1em;
  }

  /* ===================
    　　　EVENT01
  =================== */

  .event01_section {
    padding-top: calc(165 * (100vw / 750));
    background-position: 0 0;
    background-image: url(../img/202411/bg_01_sp.png);
    background-size: calc(755 * (100vw / 750));
  }

  .tab_btn_area .tab_btn {
    padding-top: calc(30 * (100vw / 750));
    padding-bottom: calc(30 * (100vw / 750));
  }

  .event_kit_wrap .ttl_kit_event .logo_area {
    vertical-align: middle;
  }

  .tag_pointup {
    top: calc(-3*(100vw / 390));
    height: calc(18*(100vw / 390));
    margin: 0 calc(1*(100vw / 390)) 0 calc(5*(100vw / 390));
    padding: calc(2*(100vw / 390)) calc(7*(100vw / 390));
    border-radius: calc(10*(100vw / 390)) 0 calc(10*(100vw / 390)) 0;
    font-size: calc(10*(100vw / 390));
  }

  .event_kit_wrap .ttl_kit_event .logo_area + .tag_pointup {
    top: -.8rem;
  }

  .event_section .btn_event {
    font-weight: bold;
  }

  .event_section .btn_event.btn_shop_event {
    margin-top: calc(65*(100vw / 750));
    margin-bottom: 0;
  }

  .btn_event .btn_link,
  .btn_wrap .btn_link {
    width: calc(650*(100vw / 750));
    max-width: 100%;
  }

  .event01_section {
    margin-bottom: calc(10*(100vw / 750));
  }

  .event01_section .btn_event,
  .event01_section .btn_event .btn_link {
    margin-bottom: 0;
  }

  .event01_section .btn_event {
    margin-bottom: calc(20*(100vw / 750));
  }

  .event_kit_img__icn {
    top: calc(10*(100vw / 750));
    left: calc(10*(100vw / 750));
    width: calc(80*(100vw / 750));
    height: calc(80*(100vw / 750));
  }

  /* -- ブランド -- */
  .event_brand {
    height: calc(45*(100vw / 750));
  }

  .event_brand.event_brand_fo img {
    width: calc(190*(100vw / 750));
  }


  /* -- タグ -- */
  .event_tag {
    gap: calc(5*(100vw / 390));
    margin: calc(10*(100vw / 390)) 0 0;
  }

  .event_tag .tag {
    height: calc(18*(100vw / 390));
    padding: calc(2*(100vw / 390)) calc(7*(100vw / 390));
    border-radius: calc(10*(100vw / 390)) 0 calc(10*(100vw / 390)) 0;
    font-size: calc(10*(100vw / 390));
  }

  #panel2 .event_kit_wrap .ttl_kit_event {
    padding-top: calc(20*(100vw / 750));
    padding-bottom: calc(10*(100vw / 750));
  }

  .event_brand.event_brand_toone img {
    width: calc(160*(100vw / 760));
  }

  .logo_trilogy img {
    width: calc(110*(100vw / 750));
  }

  /* ===================
    　　　EVENT02
  =================== */

  .event02_section {
    margin-bottom: calc(10*(100vw / 750));
    padding-top: calc(240*(100vw / 750));
  }

  .event02_section .inner::before {
    top: calc(-240*(100vw / 750));
    right: calc(50*(100vw / 750));
    width: calc(320*(100vw / 750));
    height: calc(240*(100vw / 750));
  }

  .event02_section .btn_wrap {
    margin-top: calc(65*(100vw / 750));
    margin-bottom: 0;
  }

  .event02_section .btn_wrap .btn_link {
    margin: auto;
  }

  /* ===================
    　　　EVENT03
  =================== */

  .event03_section {
    margin-bottom: calc(10*(100vw / 750));
    padding-top: calc(240*(100vw / 750));
  }

  .event03_section .inner::before {
    top: calc(-240*(100vw / 750));
    left: 0;
    width: calc(320*(100vw / 750));
    height: calc(240*(100vw / 750));
  }

  .txt_brand_area {
    font-size: calc(28*(100vw / 750));
  }

  .txt_mejirushi {
    margin: calc(50*(100vw / 750)) 0 calc(50*(100vw / 750));
    font-size: calc(28*(100vw / 750));
  }

  .txt_mejirushi .tag_pointup {
    margin: 0 calc(10*(100vw / 750)) 0 0;
  }

  .event_section .acc_btn .icn_btn::after {
    top: calc(-10*(100vw / 760));
    width: calc(200*(100vw / 760));
    height: calc(30*(100vw / 760));
    left: calc(-79*(100vw / 760));
    right: 0;
    margin: auto;
    transform: none !important;
  }

  .event_section .item_list_common .item_list__item {
    padding-bottom: calc(18 * (100vw / 760));
  }

  /* ===================
    　　　CALENDAR
  =================== */

  .calendar_section {
    padding-top: calc(260*(100vw / 760));
  }

  .calendar_section .inner::before {
    top: calc(-260*(100vw / 760));
    right: 0;
    width: calc(346*(100vw / 760));
    height: calc(260*(100vw / 760));
  }

  .calendar_section .calendar_head {
    margin-bottom: calc(65*(100vw / 760));
  }

  .calendar_section .ttl_main_02 {
    margin-bottom: calc(65*(100vw / 760));
    font-size: calc(45*(100vw / 760));
  }

  .calendar_section .ttl_main_02 span {
    font-size: calc(58*(100vw / 760));
  }

  /* ---- カレンダーナビ ---- */

  .calendar_nav {
    margin-bottom: calc(65*(100vw / 760));
  }

  .calendar_nav ul {
    gap: calc(23*(100vw / 760));
    flex-wrap: wrap;
  }

  .calendar_nav li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 31%;
    padding: calc(20*(100vw / 760)) 0;
    border-radius: calc(10*(100vw / 760));
    font-size: calc(28*(100vw / 760));
    line-height: 1.24;
  }

  /* ---- カレンダー ---- */

  .calendar_list {
    padding: calc(10*(100vw / 760));
    border-bottom: none;
  }

  .calendar_cont {
    background: none;
  }

  .calendar_list_txt {
    padding: calc(30*(100vw / 760)) calc(10*(100vw / 760));
    font-size: calc(21*(100vw / 760));
  }

  .calendar_list .icn {
    width: calc(80*(100vw / 760)) !important;
  }

  .calendar_list .icn.icn_x {
    margin-left: calc(0*(100vw / 760));
  }

  .calendar_list .icn.icn_x img {
    width: calc(55*(100vw / 760));
  }

  .calendar_list .icn.icn_chusen img {
    width: calc(55*(100vw / 760));
  }

  .calendar_list .icn.icn_present img {
    width: calc(54*(100vw / 760));
  }

  .calendar_list .icn.icn_present2 {
    margin-left: 0;
  }

  .calendar_list .icn.icn_present2 img {
    width: calc(54*(100vw / 760));
  }

  .calendar_list .icn.icn_event img {
    width: calc(60*(100vw / 760));
  }

  .calendar_list .icn.icn_time img {
    width: calc(60*(100vw / 760));
  }

  .calendar_list .tag {
  }

  .calendar_list .tag.tag_none {
    padding-left: calc(10*(100vw / 760));
  }

  .calendar_list .tag.icn_blank {
    padding-right: calc(65*(100vw / 760));
    background-size: calc(20*(100vw / 760));
  }

  .calendar_list > ul > li > dl > dt {
    width: calc(90*(100vw / 760));
    margin-right: calc(40*(100vw / 760));
  }

  .calendar_list > ul > li > dl > dd {
    gap: calc(30*(100vw / 760)) 0;
  }

  .calendar_list > ul > li > dl > dd .column_area p {
    display: flex;
    align-items: center;
  }

  .calendar_list > ul > li > dl > dd .column_area {
    height: auto;
  }

  .calendar_list .time_table {
    margin-bottom: 0;
    padding-top: .8rem;
  }

  .calendar_section .btn_shop_event {
    padding-top: calc(30*(100vw / 760));
    padding-bottom: calc(0*(100vw / 760));
  }

  .calendar_section .btn_shop_event a {
    margin: auto;
  }

  .calendar_section .btn_shop_event img {
    width: 100%;
  }

  .calendar_section .btn_shop_event a::before {
    display: none;
  }

  /* ===================
    　　　CONTENTS
  =================== */

  .contents_section {
    padding-top: calc(218*(100vw / 760));
  }

  .contents_section .inner::before {
    top: calc(-218*(100vw / 760));
    left: 0;
    width: calc(334*(100vw / 760));
    height: calc(218*(100vw / 760));
  }

  .contents_slide {
    margin: 0 calc(-30*(100vw / 760));
    padding: 0;
  }

  .contents_slide ul {
  }

  .contents_slide .img_area img {
    border-radius: calc(10*(100vw / 760));
  }

  .contents_slide .ttl_area {
    padding: calc(27*(100vw / 760)) calc(20*(100vw / 760)) calc(20*(100vw / 760));
    font-size: calc(28*(100vw / 760));
  }

  .contents_slide .txt_area {
    padding: 0 calc(20*(100vw / 760));
    font-size: calc(26*(100vw / 760));
  }

  .swiper-slide-number {
    margin: calc(20*(100vw / 760)) 0;
    font-size: calc(33*(100vw / 760));
  }

  /* ---- モーダル ---- */

  .contents_btn_all {
    width: calc(180*(100vw / 760));
    margin-top: calc(-64*(100vw / 760));
  }

  .modal_contents_list .modal-content {
    height: 80dvh;
    margin-top: 12dvh;
    margin-bottom: 5dvh;
    padding-bottom: 0;
    border-radius: calc(10*(100vw / 760));
  }

  .modal_contents_list .close-btn {
    top: calc(30*(100vw / 760));
    right: calc(-20*(100vw / 760));
    width: calc(90*(100vw / 760));
    height: calc(90*(100vw / 760));
    padding: 0;
    margin-left: auto;
  }

  .modal_contents_list .modal-content .close-btn {
    display: block;
    position: inherit;
    top: auto;
    right: auto;
    left: auto;
    margin: auto;
    transform: none;
  }

  .modal_contents_list .contents_list {
    padding: calc(25*(100vw / 760)) 0 0;
  }

  .modal_contents_list .contents_list ul {
    display: flex;
    flex-wrap: wrap;
    gap: calc(30*(100vw / 760));
    flex-direction: row;
  }

  .modal_contents_list .contents_list ul li {
    width: calc(285*(100vw / 760)) !important;
  }

  .modal_contents_list .contents_list li a {
    display: block;
  }

  .modal_contents_list .contents_list .img_area {
    width: calc(285*(100vw / 760));
    height: calc(285*(100vw / 760));
  }

  .modal_contents_list .contents_list .img_area img {
    border-radius: calc(10*(100vw / 760));
  }

  .modal_contents_list .contents_list .ttl_area {
    width: auto;
    padding: calc(30*(100vw / 760)) calc(10*(100vw / 760)) calc(10*(100vw / 760));
    font-size: calc(23*(100vw / 760));
  }

  .modal_contents_list .contents_list .txt_area {
    width: auto;
    padding: 0 calc(10*(100vw / 760)) calc(40*(100vw / 760));
    font-size: calc(23*(100vw / 760));
    line-height: 1.5;
  }

  /* ---- 動画 ---- */

  .contents_video {
    margin-top: calc(70*(100vw / 760));
    padding-top: calc(70*(100vw / 760));
    font-size: calc(28*(100vw / 760));
  }

  .contents_video .contents_youtube {
    margin-bottom: calc(150*(100vw / 760));
  }

  .contents_video .contents_youtube .youtube_area {
    width: calc(650*(100vw / 760));
    margin: auto auto calc(55*(100vw / 760));
  }

  .contents_video .contents_special_video h4 {
    font-size: calc(58*(100vw / 760));
    margin-bottom: calc(50*(100vw / 760));
  }

  .contents_video .contents_special_video p {
    margin-bottom: calc(70*(100vw / 760));
  }

  .contents_video .contents_special_video .video_area {
    width: calc(540*(100vw / 760));
  }

}