@charset "utf-8";

:root {
  --rem: 1rem / var(--root-font-size);
  --vw-small: (100vw / 375);
}

/* ------------------------------- */

/* MV h1 */

/* ------------------------------- */
.mv_wrap {
  position: relative;
}

.mv_inner {
  position: relative;
}

.mv_inner_position {
  position: relative;
  inline-size: 100%;
}

.mv_img {
  text-align: center;
}

.mv_annotation {
  position: absolute;
  font-size: 0.75em;
  color: #777372;
}

@media (min-width: 769px) {
  .mv_wrap::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 1;
    display: block;
    inline-size: 100%;
    block-size: 65%;
    content: "";
    background: linear-gradient(to right, #f7feff 0%, #fefcfe 50%, #fffafd 100%);
  }

  .mv_inner {
    z-index: 2;
    inline-size: 100%;
    max-inline-size: 1700px;
    padding-block: 0;
    padding-inline: 50px;
    margin-inline: auto;
    overflow: hidden;
  }

  .mv_annotation {
    inset-block-end: 2.8%;
    inset-inline-end: 22px;

    /* right: calc(100px + 5%); */
    letter-spacing: 0.1em;
  }

  .mv_scroll {
    position: absolute;
    inset-block-end: 20%;
    inset-inline-start: -29px;
  }

  .mv_scroll::before,
  .mv_scroll::after {
    position: absolute;
    inset-block-start: calc(100% + 9px);
    inset-inline-start: 49%;
    z-index: 1;
    display: block;
    inline-size: 1px;
    content: "";
    animation-name: flow;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-iteration-count: infinite;
    animation-direction: normal;
  }

  .mv_scroll::before {
    block-size: 160px;
    background-color: #d8c357;
    animation-delay: 2s;
  }

  .mv_scroll::after {
    block-size: 0;
    background-color: #fff;
    animation-delay: 3s;
  }
}

/* @media (min-width:1440px) {
  .mv_annotation {
    bottom: 2.8%;
    right: 22px;
    letter-spacing: 0.1em;
  }
} */

@keyframes flow {
  0% {
    z-index: 2;
    transform: translateY(0);
  }

  50% {
    z-index: 2;
    block-size: 160px;
    transform: translateY(0);
  }

  100% {
    z-index: 2;
    block-size: 160px;
    transform: translateY(100%);
  }
}

@media (max-width: 768px) {
  .mv_img img {
    inline-size: 100%;
  }

  .mv_annotation {
    inset-block-end: 3%;
    inset-inline-end: 10px;
    font-size: 0.667em;
  }
}

/* ------------------------------- */

/* contents */

/* ------------------------------- */
.all_wrap {
  overflow: hidden;
}

/* ------------------------------- */

/* bnr_sec */

/* ------------------------------- */
.bnr_sec {
  inline-size: 100%;
  max-inline-size: 1150px;
  padding-inline: 10px;
  margin-inline: auto;
}

.bnr_sec .bnr_cnt1 {
  max-inline-size: 600px;
  margin-block: 0;
  margin-inline: auto;
}

@media (min-width: 769px) {
  .bnr_sec .bnr_cnt1:hover {
    opacity: 0.6;
  }
}

.bnr_sec .link_arrowA1 {
  position: relative;
  display: inline-block;
  padding-inline-start: 1.3em;
  color: #00a3db;
  text-decoration: underline;
}

.bnr_sec .link_arrowA1::before {
  position: absolute;
  inset-block-start: 0.5em;
  inset-inline-start: 0.35em;
  display: block;
  inline-size: 0.39em;
  block-size: 0.39em;
  content: "";
  border-block-start: 2px solid #33c2e7;
  border-inline-end: 2px solid #33c2e7;
  transform: rotate(45deg);
}

@media (min-width: 769px) {
  .bnr_sec {
    margin-block: 60px;
  }

  .bnr_sec .detail_textA1 {
    margin-block-start: 20px;
  }

  .bnr_sec .link_arrowA1 {
    font-size: 1.5em;
    line-height: 1.5;
  }
}

@media (max-width: 768px) {
  .bnr_sec {
    margin-block: 30px;
  }

  .bnr_sec .detail_textA1 {
    margin-block-start: 15px;
  }

  .bnr_sec .link_arrowA1 {
    font-size: 1em;
    line-height: 1.5;
  }
}

/* ------------------------------- */

/* intro_sec */

/* ------------------------------- */
.intro_sec_inner {
  position: relative;
  inline-size: 100%;
  max-inline-size: 1150px;
  margin-inline: auto;
}

.intro_sec_contents {
  position: relative;
}

.intro_logo img {
  inline-size: 100%;
}

.intro_txt {
  text-align: center;
  letter-spacing: 0.1em;
}

.intro_txt sup {
  font-size: 0.778em;
  vertical-align: super;
}

.intro_annotation {
  text-align: center;
}

@media (min-width: 769px) {
  .intro_sec {
    margin-block-start: 60px;
  }

  .intro_logo {
    inline-size: 402px;
    margin-block: 0;
    margin-inline: auto;
  }

  .intro_txt_wrap {
    margin-block-start: 30px;
  }

  .intro_txt {
    line-height: 2.4;
  }

  .intro_txt:not(:first-of-type) {
    margin-block-start: 25px;
  }

  .intro_btn_wrap {
    margin-block-start: 35px;
  }

  .intro_annotation {
    margin-block-start: 30px;
    font-size: 0.688em;
    letter-spacing: 0.1em;
  }

  .news {
    max-inline-size: 1030px;
    padding-inline: 15px;
    margin-block-start: 59px;
    margin-inline: auto;
  }

  .news_box {
    padding-block-end: 20px;
    padding-inline: 20px;
    background-color: #fff;
    border: 2px solid #f0e4c3;
  }

  .news_heading {
    inline-size: fit-content;
    margin-block-start: -15px;
    margin-inline: auto;
    text-align: center;
    background-color: #fff;
  }

  .news_column {
    display: flex;
    column-gap: 41px;
    align-items: center;
    justify-content: center;
  }

  .news_column_unit:has(.news_note) {
    margin-block-start: 19px;
  }

  .news_note {
    position: relative;
    inset-inline-start: 2.5em;
    margin-block-start: 16px;
    font-size: 11px;
    text-align: end;
  }
}

@media (max-width: 768px) {
  .intro_sec {
    margin-block-start: 40px;
  }

  .intro_logo {
    inline-size: 57.6%;
    margin-block: 0;
    margin-inline: auto;
  }

  .intro_txt_wrap {
    margin-block-start: 20px;
  }

  .intro_txt {
    font-size: 3.21vi;
    line-height: 2.5;
  }

  .intro_txt:not(:first-of-type) {
    margin-block-start: 20px;
  }

  .intro_btn_wrap {
    margin-block-start: 30px;
  }

  .intro_annotation {
    margin-block-start: 15px;
    font-size: 0.667em;
    line-height: 1.6;
    letter-spacing: 0.05em;
  }

  .news {
    max-inline-size: 100%;
    padding-inline: 20px;
    margin-block: 40px 20px;
    margin-inline: auto;
  }

  .news_box {
    padding-block-end: 20px;
    padding-inline: 20px;
    background-color: #fff;
    border: 1px solid #f0e4c3;
  }

  .news_heading {
    inline-size: 34.47%;
    margin-block-start: -2.67vi;
    margin-inline: auto;
    text-align: center;
    background-color: #fff;
  }

  .news_column {
    display: flex;
    flex-direction: column;
    row-gap: 2.67vi;
    align-items: center;
    justify-content: center;
    margin-block-start: 5.33vi;
  }

  .news_column_unit:nth-child(1) {
    max-inline-size: 86.69%;
    margin-inline: auto;
  }

  .news_column_unit:nth-child(2) {
    max-inline-size: 84.3%;
    margin-inline: auto;
  }

  .news_note {
    position: relative;
    inset-inline-start: 4.5em;
    margin-block-start: 2.67vi;
    font-size: 2.13vi;
    text-align: end;
  }
}

/* particle */
.particle_img {
  position: absolute;
}

.particle_img.a_type_01 {
  animation-name: particleScale01;
  animation-duration: 1.6s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.particle_img.a_type_02 {
  animation-name: particleScale02;
  animation-duration: 1.6s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.particle_img.a_delay_01 {
  animation-delay: 0.4s;
}

.particle_contents {
  position: relative;
  z-index: 2;
  padding-block: 0;
  padding-inline: 20%;
}

@media (min-width: 769px) {
  .particle_img.a_type_01 {
    inline-size: 16px;
  }

  .particle_img.a_type_02 {
    inline-size: 30px;
  }

  .particle_img:nth-of-type(1) {
    inset-block-start: 4%;
    inset-inline-start: 13%;
  }

  .particle_img:nth-of-type(2) {
    inset-block-start: 14%;
    inset-inline-start: 19%;
  }

  .particle_img:nth-of-type(3) {
    inset-block-start: 28%;
    inset-inline-start: 2%;
  }

  .particle_img:nth-of-type(4) {
    inset-block-start: 50%;
    inset-inline-start: 14%;
  }

  .particle_img:nth-of-type(5) {
    inset-block-start: 57%;
    inset-inline-start: 1%;
  }

  .particle_img:nth-of-type(6) {
    inset-block-start: 68%;
    inset-inline-start: 0;
  }

  .particle_img:nth-of-type(7) {
    inset-block-start: 83%;
    inset-inline-start: 11%;
  }

  .particle_img:nth-of-type(8) {
    inset-block-start: 6%;
    inset-inline-end: 24%;
  }

  .particle_img:nth-of-type(9) {
    inset-block-start: 14%;
    inset-inline-end: 27%;
  }

  .particle_img:nth-of-type(10) {
    inset-block-start: 25%;
    inset-inline-end: 12%;
  }

  .particle_img:nth-of-type(11) {
    inset-block-start: 25%;
    inset-inline-end: 2%;
  }

  .particle_img:nth-of-type(12) {
    inset-block-start: 48%;
    inset-inline-end: 4%;
  }

  .particle_img:nth-of-type(13) {
    inset-block-start: 57%;
    inset-inline-end: 11%;
  }

  .particle_img:nth-of-type(14) {
    inset-block-start: 73%;
    inset-inline-end: 4%;
  }

  .particle_img:nth-of-type(15) {
    inset-block-start: 85%;
    inset-inline-end: 14%;
  }

  .particle_img:nth-of-type(16) {
    inset-block-start: 92%;
    inset-inline-end: 24%;
  }
}

@media (max-width: 768px) {
  .particle_img.a_type_01 {
    inline-size: 10px;
  }

  .particle_img.a_type_02 {
    inline-size: 16px;
  }

  .particle_img:nth-of-type(1) {
    inset-block-start: 4%;
    inset-inline-start: 11%;
  }

  .particle_img:nth-of-type(2) {
    inset-block-start: 8%;
    inset-inline-start: 3%;
  }

  .particle_img:nth-of-type(3) {
    inset-block-start: 57%;
    inset-inline-start: 13%;
  }

  .particle_img:nth-of-type(4) {
    inset-block-start: 30%;
    inset-inline-start: 14%;
  }

  .particle_img:nth-of-type(5) {
    inset-block-start: 36%;
    inset-inline-start: 4%;
  }

  .particle_img:nth-of-type(6) {
    inset-block-start: 93%;
    inset-inline-start: 4%;
  }

  .particle_img:nth-of-type(7) {
    inset-block-start: 82%;
    inset-inline-start: 7%;
  }

  .particle_img:nth-of-type(8) {
    inset-block-start: 7%;
    inset-inline-end: 26%;
  }

  .particle_img:nth-of-type(9) {
    inset-block-start: 11%;
    inset-inline-end: 14%;
  }

  .particle_img:nth-of-type(10) {
    inset-block-start: 74%;
    inset-inline-end: 8%;
  }

  .particle_img:nth-of-type(11) {
    inset-block-start: 53%;
    inset-inline-end: 12%;
  }

  .particle_img:nth-of-type(12) {
    inset-block-start: 64%;
    inset-inline-end: 18%;
  }

  .particle_img:nth-of-type(13) {
    inset-block-start: 60%;
    inset-inline-end: 8%;
  }
}

@keyframes particleScale01 {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }

  100% {
    opacity: 1;
    transform: scale(1.5);
  }
}

@keyframes particleScale02 {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }

  100% {
    opacity: 1;
    transform: scale(1.4);
  }
}

/* popup */
.popup_modal_content_wrap {
  position: relative;
  inline-size: 100%;
  max-inline-size: 900px;
  margin-inline: auto;
  background-color: #fff;
  border: solid 2px #e6dab8;
}

.modal_popup_layer.mfp-close-btn-in .mfp-close {
  padding: 0;
  font-size: 0;
  line-height: 1;
  color: #fff;
  border: 0;
  opacity: 1;
  transition: opacity 0.3s;
}

.modal_popup_layer.mfp-close-btn-in .mfp-close:hover {
  opacity: 0.6;
}

.modal_popup_layer.mfp-close-btn-in .mfp-close::before,
.modal_popup_layer.mfp-close-btn-in .mfp-close::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  display: block;
  inline-size: 100%;
  block-size: 1px;
  content: "";
  background-color: #c1a43c;
}

.modal_popup_layer.mfp-close-btn-in .mfp-close::before {
  transform: rotate(45deg);
}

.modal_popup_layer.mfp-close-btn-in .mfp-close::after {
  transform: rotate(-45deg);
}

.popup_modal_content_wrap img {
  inline-size: 100%;
}

.popup_modal_title,
.popup_modal_subtitle {
  margin-inline: auto;
  text-align: center;
}

.popup_modal_contents {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-inline: auto;
}

.popup_modal_diff {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.popup_modal_annotation {
  inline-size: 100%;
  margin-inline: auto;
}

.popup_modal_annotation > li {
  padding-inline-start: 1.5em;
  line-height: 1.4;
  text-indent: -1.5em;
  letter-spacing: 0.1em;
}

@media (min-width: 769px) {
  .modal_popup_layer.mfp-close-btn-in .mfp-close {
    inset-block-start: 24px;
    inset-inline-end: 24px;
    inline-size: 34px;
    block-size: 34px;
  }

  .popup_modal_content_wrap {
    padding-block: 56px 35px;
    padding-inline: 10px;
    box-shadow: 0 14px 20px 0 rgb(102 102 102 / 0.1);
  }

  .popup_modal_title {
    inline-size: 54.91%;
  }

  .popup_modal_subtitle {
    inline-size: 44.75%;
    margin-block-start: 5.5%;
  }

  .popup_modal_contents {
    inline-size: 100%;
    max-inline-size: 748px;
    margin-block-start: 3.1%;
  }

  .popup_modal_diff {
    inline-size: 62.835%;
  }

  .popup_modal_diff_img {
    inline-size: 50%;
    max-inline-size: 230px;
  }

  .popup_modal_graph {
    inline-size: 37.165%;
    padding-block-start: 3.9%;
    padding-inline-start: 9.09%;
    background-image: url("/image/ico_arrow_right_pc.png");
    background-repeat: no-repeat;
    background-position: center left 8%;
    background-size: 10% auto;
  }

  .popup_modal_graph_note {
    margin-block-start: 15px;
    font-size: 0.688em;
    text-align: center;
    letter-spacing: 0.1em;
  }

  .popup_modal_annotation {
    max-inline-size: 730px;
    margin-block-start: 4.6%;
  }

  .popup_modal_annotation > li {
    font-size: 0.688em;
  }

  .popup_modal_annotation > li:not(:first-of-type) {
    margin-block-start: 4px;
  }
}

@media (max-width: 768px) {
  .modal_popup_layer.mfp-close-btn-in .mfp-close {
    inset-block-start: 8px;
    inset-inline-end: 8px;
    inline-size: 22px;
    block-size: 22px;
  }

  .modal_popup_layer .mfp-container {
    padding-inline: 10px;
  }

  .popup_modal_content_wrap {
    max-inline-size: 500px;
    padding-block: 35px 20px;
    padding-inline: 10px;
    box-shadow: 0 8px 12px 0 rgb(102 102 102 / 0.1);
  }

  .popup_modal_title {
    inline-size: 87.615%;
  }

  .popup_modal_subtitle {
    inline-size: 79%;
    margin-block-start: 5.5%;
  }

  .popup_modal_contents {
    inline-size: 100%;
    margin-block-start: 5%;
  }

  .popup_modal_diff {
    inline-size: 100%;
    max-inline-size: 87.615%;
    margin-inline: auto;
  }

  .popup_modal_diff_img {
    inline-size: 46.9%;
  }

  .popup_modal_graph {
    inline-size: 100%;
    padding-block-start: 10%;
    background-image: url("/image/ico_arrow_bottom_sp.png");
    background-repeat: no-repeat;
    background-position: top 3px center;
    background-size: 6.5% auto;
  }

  .popup_modal_graph_img {
    max-inline-size: 39%;
    margin-inline: auto;
    text-align: center;
  }

  .popup_modal_graph_note {
    margin-block-start: -6px;
    font-size: 0.667em;
    text-align: end;
    letter-spacing: 0.1em;
  }

  .popup_modal_annotation {
    margin-block-start: 5%;
  }

  .popup_modal_annotation > li {
    font-size: 0.667em;
  }

  .popup_modal_annotation > li:not(:first-of-type) {
    margin-block-start: 4px;
  }
}

/* ------------------------------- */

/* contents anchor */

/* ------------------------------- */
.contents_anchor_sec {
  padding-inline: 10px;
}

.contents_anchor_sec img {
  inline-size: 100%;
}

.contents_anchor_wrap {
  position: relative;
  inline-size: 90%;
  max-inline-size: 1000px;
  padding: 28px;
  margin-inline: auto;
  background-image: url("/image/bg_anchor_corner_01.png"), url("/image/bg_anchor_corner_02.png"), url("/image/bg_anchor_corner_03.png"), url("/image/bg_anchor_corner_04.png");
  background-repeat: no-repeat;
  background-position:
    left top,
    right top,
    right bottom,
    left bottom;
  background-size: 28px 28px;
}

.contents_anchor_wrap::before,
.contents_anchor_wrap::after,
.contents_anchor_inner::before,
.contents_anchor_inner::after {
  position: absolute;
  display: block;
  content: "";
  background-repeat: repeat;
  background-position: 0 0;
}

.contents_anchor_wrap::before {
  inset-block-start: 0;
  inset-inline-start: 27px;
  background-image: url("/image/bg_anchor_line_top.png");
}

.contents_anchor_wrap::after {
  inset-block-end: 0;
  inset-inline-start: 27px;
  background-image: url("/image/bg_anchor_line_bottom.png");
}

.contents_anchor_inner::before {
  inset-block-start: 27px;
  inset-inline-start: 0;
  background-image: url("/image/bg_anchor_line_left.png");
}

.contents_anchor_inner::after {
  inset-block-start: 27px;
  inset-inline-end: 0;
  background-image: url("/image/bg_anchor_line_right.png");
}

.contents_anchor_heading {
  margin-inline: auto;
  text-align: center;
}

.contents_anchor_list > li {
  border-block-end: solid 1px #efe8d4;
}

.contents_anchor_list > li > a {
  position: relative;
  display: block;
}

.contents_anchor_list > li > a::before,
.contents_anchor_list > li > a::after {
  position: absolute;
  display: block;
  block-size: 2px;
  content: "";
  background-color: #d2c586;
}

@media (min-width: 769px) {
  .contents_anchor_sec {
    padding-block: 60px 75px;
    margin-block-start: 60px;
    background-image: url("/image/bg_star_line_pc_ava_tc.png");
    background-repeat: no-repeat;
    background-position: bottom center;
  }

  .contents_anchor_wrap::before,
  .contents_anchor_wrap::after {
    inline-size: calc(100% - 54px);
    block-size: 28px;
    background-size: 1px 28px;
  }

  .contents_anchor_inner::before,
  .contents_anchor_inner::after {
    inline-size: 28px;
    block-size: calc(100% - 54px);
    background-size: 28px 1px;
  }

  .contents_anchor_inner {
    padding-block: 32px 7px;
    padding-block-end: 40px;
    padding-inline: 0;
  }

  .contents_anchor_heading {
    /* inline-size: 71.294%; */
    inline-size: 673px;
  }

  .contents_anchor_list {
    inline-size: 100%;
    max-inline-size: 760px;
    margin-block: 43px 0;
    margin-inline: auto;
  }

  .contents_anchor_list > li > a {
    padding-block: 16px 15px;
    padding-inline: 12px 0;
  }

  .contents_anchor_list > li > a img {
    inline-size: 55.616%;
  }

  .contents_anchor_list > li > a::before,
  .contents_anchor_list > li > a::after {
    inset-block-start: 50%;
    inline-size: 12px;
  }

  .contents_anchor_list > li > a::before {
    inset-inline-end: 10px;
    transform: rotate(-45deg);
  }

  .contents_anchor_list > li > a::after {
    inset-inline-end: 18px;
    transform: rotate(45deg);
  }
}

@media (max-width: 768px) {
  .contents_anchor_sec {
    padding-block: 30px 45px;
    margin-block-start: 30px;
    background-image: url("/image/bg_star_line_sp_ava_tc.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: calc(100 * var(--vw-small));
  }

  .contents_anchor_wrap {
    max-inline-size: 600px;
    padding: 14px 14px 46px;
    background-size: 14px 14px;
  }

  .contents_anchor_wrap::before,
  .contents_anchor_wrap::after {
    inline-size: calc(100% - 26px);
    block-size: 14px;
    background-size: 1px 14px;
  }

  .contents_anchor_inner::before,
  .contents_anchor_inner::after {
    inline-size: 14px;
    block-size: calc(100% - 26px);
    background-size: 14px 1px;
  }

  .contents_anchor_wrap::before {
    inset-inline-start: 13px;
  }

  .contents_anchor_wrap::after {
    inset-inline-start: 13px;
  }

  .contents_anchor_inner::before {
    inset-block-start: 13px;
  }

  .contents_anchor_inner::after {
    inset-block-start: 13px;
  }

  .contents_anchor_inner {
    padding-block: 6.6% 1.3%;
    padding-inline: 0;
  }

  .contents_anchor_heading {
    inline-size: 69.115%;
  }

  .contents_anchor_list {
    inline-size: 100%;
    margin-block: 6% 0;
    margin-inline: auto;
  }

  .contents_anchor_list > li > a {
    padding-block: 3.2%;
    padding-inline: 5.3% 0;
  }

  .contents_anchor_list > li > a img {
    inline-size: 87%;
  }

  .contents_anchor_list > li > a::before,
  .contents_anchor_list > li > a::after {
    inset-block-start: 50%;
    inline-size: 8px;
  }

  .contents_anchor_list > li > a::before {
    inset-inline-end: 10px;
    transform: rotate(-45deg);
  }

  .contents_anchor_list > li > a::after {
    inset-inline-end: 15px;
    transform: rotate(45deg);
  }
}

/* ------------------------------- */

/* commitment */

/* ------------------------------- */
.commitment_sec {
  margin-block-start: 120px;
}

.commitment_sec_inner {
  inline-size: 100%;
  max-inline-size: 1000px;
  margin-inline: auto;
}

.commitment_heading {
  max-inline-size: 422px;
  margin-inline: auto;
}

.commitment_heading img {
  inline-size: 100%;
}

.commitment_anchor_list {
  display: flex;
  justify-content: space-between;
  inline-size: 100%;
  max-inline-size: 590px;
  margin-block-start: 42px;
  margin-inline: auto;
}

@media (max-width: 768px) {
  .commitment_heading {
    inline-size: 65.824%;
    max-inline-size: 100%;
  }

  .commitment_anchor_list {
    max-inline-size: 86.87%;
  }

  .commitment_anchor_list {
    margin-block-start: 32px;
  }

  .commitment_anchor_list li {
    inline-size: 22%;
  }
}

/* ------------------------------- */

/* contentslist */

/* ------------------------------- */
.contentslist_sec {
  margin-block: 60px;
  border-block-start: 1px solid #efe8d4;
  border-block-end: 1px solid #efe8d4;
}

.contentslist_sec_inner {
  inline-size: 100%;
  max-inline-size: 1000px;
  margin-inline: auto;
}

.contentslist_heading {
  max-inline-size: 490px;
  margin-block-start: 62px;
  margin-inline: auto;
}

.commitment_heading img {
  inline-size: 100%;
}

.contentslist_item > * {
  margin-inline: auto;
}

.contentslist_sec > .item_contents > .contentslist_item_track > .contentslist_item_list > .item_contents_col {
  inline-size: 30%;
  margin-block-end: 60px;
}

.contentslist_sec > .item_contents > .contentslist_item_track > .contentslist_item_list > .item_contents_col > .flexbox {
  flex-direction: column;
  gap: 0.5em;
  align-items: center;
}

.contentslist_sec > .item_contents > .contentslist_item_track > .contentslist_item_list > .item_contents_col > .flexbox > .box1,
.contentslist_sec > .item_contents > .contentslist_item_track > .contentslist_item_list > .item_contents_col > .flexbox > .box2 {
  inline-size: 100%;
}

@media (max-width: 768px) {
  .contentslist_heading {
    inline-size: 64.986%;
  }

  .contentslist_sec {
    padding-block-end: 40px;
    margin-block: 40px 33px;
  }

  .contentslist_sec > .item_contents > .contentslist_item_track > .contentslist_item_list > .item_contents_col {
    margin-block-end: 0;
  }
}

/* ------------------------------- */

/* mechanism */

/* ------------------------------- */
.mechanism_sec {
  padding-inline: 10px;
  background-repeat: no-repeat;
}

.mechanism_sec_inner {
  inline-size: 100%;
  max-inline-size: 900px;
  margin-inline: auto;
}

.mechanism_heading {
  margin-inline: auto;
}

.mechanism_heading img {
  inline-size: 100%;
}

.mechanism_read {
  margin-inline: auto;
}

.mechanism_detail_01_contents {
  border: solid 1px #efe8d4;
}

.mechanism_detail_02_item {
  border: solid 1px #efe8d4;
}

.mechanism_detail_02_note sup {
  font-size: 0.688em;
  vertical-align: super;
}

@media (min-width: 769px) {
  .mechanism_sec {
    padding-block-start: 50px;

    /* margin-block-start: 60px; */
    background-image: url("/image/bg_heading_mechanism_pc.png");
    background-position: top 64px center;
    background-size: 1260px auto;
  }

  .mechanism_heading {
    max-inline-size: 592px;
  }

  .mechanism_read {
    max-inline-size: 832px;
    margin-block-start: 77px;
  }

  .mechanism_detail_01 {
    margin-block-start: 63px;
  }

  .mechanism_detail_01_contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-block: 30px;
    padding-inline: 48px;
    margin-block-start: 40px;
    margin-inline: 30px;
  }

  .mechanism_detail_03 .mechanism_detail_01_contents {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding-block: 30px;
    padding-inline: 20px;
    margin-block-start: 40px;
    margin-inline-start: 30px;
  }

  .mechanism_detail_01_note {
    inline-size: 340px;
    margin-block-start: 15px;
    line-height: 2.5;
    letter-spacing: 0.1em;
  }

  .mechanism_detail_03 .mechanism_detail_01_note {
    inline-size: 270px;
    margin-block-start: 20px;
    margin-inline-start: 30px;
    line-height: 2;
    letter-spacing: 0.1em;
  }

  .mechanism_detail_03 sup {
    font-size: 0.688em;
    vertical-align: super;
  }

  .mechanism_detail_01_img {
    inline-size: calc(100% - 340px);
    text-align: end;
  }

  .mechanism_detail_01_contents img {
    inline-size: 100%;
    max-inline-size: 387px;
  }

  .mechanism_detail_03 .mechanism_detail_01_contents_01 img {
    max-inline-size: 248px;
    block-size: auto;
  }

  .mechanism_detail_03 .mechanism_detail_01_contents_01 .pc_only_img {
    max-inline-size: 280px;
  }

  .mechanism_detail_01_img_02 {
    text-align: center;
  }

  .mechanism_detail_03 .mechanism_detail_01_img {
    inline-size: auto;
    text-align: end;
  }

  .mechanism_detail_02 {
    margin-block-start: 60px;
  }

  .mechanism_detail_02_contents {
    display: flex;
    flex-wrap: wrap;
    margin-block-start: 40px;
    margin-inline: 30px;
  }

  .mechanism_detail_02_item {
    position: relative;
    inline-size: 31.035%;
    padding-block: 11px 16px;
    padding-inline: 5px;
  }

  .mechanism_detail_02_item:not(:first-of-type) {
    margin-inline-start: 3.4475%;
  }

  .mechanism_detail_02_item:not(:first-of-type)::before {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(100% + 1px);
    display: block;
    inline-size: 11.1%;
    block-size: 8.6%;
    content: "";
    background: url("/image/ico_arrow_right_pc.png") no-repeat center center;
    background-size: 100% auto;
    transform: translateY(-50%);
  }

  .mechanism_detail_02_img {
    padding-block: 0;
    padding-inline: 10px 18px;
  }

  .mechanism_detail_02_note {
    padding-inline-start: 16px;
    margin-block-start: 6px;
    line-height: 1.9;
    letter-spacing: 0.1em;
  }

  .mechanism_detail_02_annotation {
    margin-block-start: 20px;
    margin-inline-end: 30px;
    font-size: 0.688em;
    text-align: end;
    letter-spacing: 0.1em;
  }

  .mechanism_detail_02_annotation > span {
    display: inline-block;
  }

  .mechanism_detail_02_annotation > span:not(:first-of-type) {
    margin-inline-start: 10px;
  }
}

.mechanism_detail_03 .mechanism_detail_01_contents {
  margin-block-start: 0;
  background: #fffdf9;
}

.mechanism_detail_03 .mechanism_detail_01_contents:nth-child(1) {
  display: flex;
  justify-content: space-around;
  padding-block: 15px;
  padding-inline: 48px;
  margin-block-start: 50px;
  background: linear-gradient(to right, #e4c883 0, #ddb663 20%, #ddb663 70%, #e4c883 100%);
  border: none;
}

.mechanism_detail_03 .mechanism_detail_01_contents:nth-child(1) img {
  max-inline-size: 600px;
}

.text_mechanism_right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-block: 20px;
  margin-inline: 0;
  margin-inline-end: 30px;
  font-size: 11px;
}

.mechanism_detail_03 sup {
  font-size: 0.688em;
  vertical-align: super;
}

@media (max-width: 768px) {
  .mechanism_detail_03 .mechanism_detail_01_contents:nth-child(1) {
    padding-block: 15px;
    padding-inline: 38px;
    margin-block-start: 140px;
  }

  .text_mechanism_right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-block: 20px;
    margin-inline: 0;
    margin-inline-end: 10%;
    font-size: 11px;
  }

  .mechanism_detail_03 .mechanism_detail_01_contents:nth-child(1) img {
    max-inline-size: 100%;
  }

  .mechanism_sec {
    padding-block-start: 20px;
    margin-block-start: 20px;
    background-image: url("/image/bg_heading_mechanism_sp.png");
    background-position: top 105px center;
    background-size: 100% auto;
  }

  .mechanism_heading {
    inline-size: 73%;
  }

  .mechanism_read {
    inline-size: 94%;
    margin-block-start: 11%;
  }

  .mechanism_detail_01 {
    margin-block-start: 11%;
  }

  .mechanism_detail_01_title {
    max-inline-size: 93%;
    margin-inline: auto;
  }

  .mechanism_detail_01_contents {
    max-inline-size: 83.1%;
    padding-block: 3.7% 7%;
    padding-inline: 5%;

    /* margin: 0 7% auto; */

    /* margin: 0 8% auto 8%; */
    margin-block: 0;
    margin-block-start: 7%;
    margin-inline: auto;
  }

  .mechanism_detail_03 .mechanism_detail_01_contents {
    /* margin: 0 7.2% auto 8%; */
    margin-block: 0;
    margin-inline: auto;
  }

  .mechanism_detail_01_note {
    margin-block-start: 15px;
    font-size: 3.4vi;
    line-height: 1.95;
    letter-spacing: 0.08em;
  }

  .mechanism_detail_01_img {
    padding-inline-end: 2%;
    margin-block-start: 6%;
    text-align: center;
  }

  .mechanism_detail_02 {
    margin-block-start: 11%;
  }

  .mechanism_detail_02_title {
    max-inline-size: 93%;
    margin-inline: auto;
  }

  .mechanism_detail_02_contents {
    max-inline-size: 83.1%;

    /* margin: 8% auto 0; */
    margin-block: 0;
    margin-block-start: 8%;
    margin-inline: auto;
  }

  .mechanism_detail_02_item {
    position: relative;
    padding-block: 3.3% 3.6%;
    padding-inline: 3.5%;
  }

  .mechanism_detail_02_item:not(:first-of-type) {
    margin-block-start: 10%;
  }

  .mechanism_detail_02_item:not(:last-of-type)::before {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    display: block;
    inline-size: 8%;
    block-size: 10.2%;
    content: "";
    background: url("/image/ico_arrow_bottom_sp.png") no-repeat center center;
    background-size: 100% auto;
    transform: translateX(-50%);
  }

  .mechanism_detail_02_img {
    padding-inline-end: 4%;
    text-align: center;
  }

  .mechanism_detail_02_note {
    padding-block: 0;
    padding-inline: 3%;
    margin-block-start: 3.4%;
    font-size: 3.5vi;
    line-height: 1.95;
    letter-spacing: 0.08em;
  }

  .mechanism_detail_02_annotation {
    position: absolute;
    inset-block-start: calc(100% + 16px);
    inset-inline-start: 0;
    inline-size: 100%;
    font-size: 0.667em;
    line-height: 1.8;
    text-align: end;
    letter-spacing: 0.05em;
  }

  /* .mechanism_detail_02_annotation>span {
    display: inline-block;
  } */

  .mechanism_detail_02_annotation > span:not(:first-of-type) {
    margin-inline-start: 10px;
  }
}

/* ------------------------------- */

/* light */

/* ------------------------------- */
.light_sec {
  padding-inline: 10px;
  background-repeat: no-repeat;
}

.light_sec_inner {
  inline-size: 100%;
  max-inline-size: 1000px;
  margin-inline: auto;
}

.light_heading {
  margin-inline: auto;
}

.light_heading img {
  inline-size: 100%;
}

.light_read {
  margin-inline: auto;
}

.light_detail_item {
  border-block-end: solid 1px #f0e9d5;
}

.light_detail_note_list > li {
  background-image: url("/image/ico_circle_01.png");
  background-repeat: no-repeat;
}

.light_detail_note_list > li sup {
  font-size: 0.688em;
  vertical-align: super;
}

.light_online_title {
  display: flex;
  justify-content: center;
  max-inline-size: 359px;
  margin-block: 50px;
  margin-inline: auto;
}

@media (min-width: 769px) {
  .light_sec {
    position: relative;
    z-index: 1;
    padding-block-start: 50px;
    margin-block-start: 81px;
    background-image: url("/image/bg_heading_light_pc.png");
    background-position: top 56px center;
    background-size: 550px auto;
  }

  .light_heading {
    max-inline-size: 377px;
  }

  .light_read {
    max-inline-size: fit-content;
    margin-block-start: 81px;
  }

  .light_detail {
    margin-block-start: 4px;
  }

  .light_detail_item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-block: 52px 47px;
    padding-inline: 50px 35px;
  }

  .light_detail_item:nth-of-type(1) {
    padding-block-end: 19px;
  }

  .light_detail_item:nth-of-type(3) {
    padding-block: 30px 37px;
  }

  .light_detail_title {
    inline-size: 40%;
  }

  .light_detail_item:nth-of-type(3) .light_detail_title {
    margin-block-start: 25px;
  }

  .light_detail_item_contents {
    inline-size: 51%;
  }

  .light_detail_note {
    line-height: 2.5;
    letter-spacing: 0.1em;
  }

  .light_detail_note_list > li {
    padding-inline-start: 1.2em;
    line-height: 1.6;
    letter-spacing: 0.08em;
    background-position: top 0.6em left;
    background-size: 8px auto;
  }

  .light_detail_note_list > li:not(:first-of-type) {
    margin-block-start: 5px;
  }

  .light_detail_annotation {
    margin-block-start: 14px;
    font-size: 0.75em;
    letter-spacing: 0.1em;
  }

  .light_detail_annotation > span {
    display: inline-block;
  }

  .light_detail_annotation > span:not(:last-of-type) {
    margin-inline-end: 15px;
  }

  .light_online {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-block-start: 40px;
  }

  .light_online.ZIndex {
    z-index: 2;
  }

  .light_online_item {
    /* display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 45.4%; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    inline-size: 40%;
    margin-block: 0;
    margin-inline: 20px;
  }

  .light_online_item:nth-of-type(2) {
    margin-inline-start: 9.2%;
  }

  .light_online_item_img_wrap {
    inline-size: 35.683%;
  }

  .light_online_item_detail {
    inline-size: 59.472%;
    padding-block-start: 14.7%;
    text-align: center;
  }

  .light_online_item_detail.pt {
    padding-block-start: 5%;
  }

  .light_online_item_detail .grad_btn_02 {
    margin-block-start: 12%;
  }
}

@media (max-width: 768px) {
  .light_online_title {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-inline-size: 100%;
    margin-block: 40px;
    margin-inline: auto;
  }

  .light_online_title img {
    inline-size: 57.6%;
    block-size: auto;
  }

  .light_sec {
    padding-block-start: 30px;
    margin-block-start: 62px;
    background-image: url("/image/bg_heading_light_sp.png");
    background-position: top 65px center;
    background-size: 47% auto;
  }

  .light_heading {
    inline-size: 65%;
  }

  .light_read {
    inline-size: 91.37%;
    margin-block-start: 10.7%;
    text-align: center;
  }

  .light_detail {
    inline-size: 93%;
    margin-block: 2.7% 0;
    margin-inline: auto;
  }

  .light_detail_item {
    padding-block: 8.7%;
    padding-inline: 0;
  }

  .light_detail_title {
    inline-size: 94%;
  }

  .light_detail_item_contents {
    max-inline-size: 90%;
    margin-block: 7% 0;
    margin-inline: auto;
  }

  .light_detail_note {
    margin-block-start: 3.4%;
    font-size: 3.5vi;
    line-height: 1.95;
    letter-spacing: 0.08em;
  }

  .light_detail_note_list > li {
    padding-inline-start: 1.2em;
    font-size: 3.5vi;
    line-height: 1.6;
    letter-spacing: 0.08em;
    background-position: top 0.6em left;
    background-size: 8px auto;
  }

  .light_detail_note_list > li:not(:first-of-type) {
    margin-block-start: 5px;
  }

  .light_detail_annotation {
    margin-block-start: 4%;
    font-size: 0.667em;
    line-height: 1.4;
    letter-spacing: 0.1em;
  }

  .light_detail_annotation > span {
    display: inline-block;
  }

  .light_detail_annotation > span:not(:last-of-type) {
    margin-inline-end: 10px;
  }

  .light_online {
    margin-block-start: 8%;
  }

  .light_online_item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    inline-size: 100%;
    max-inline-size: 83.1%;
    margin-inline: auto;
  }

  .light_online_item:not(:first-of-type) {
    margin-block-start: 5%;
  }

  .light_online_item_img_wrap {
    inline-size: 27.8%;
  }

  .light_online_item_detail {
    inline-size: 64.407%;
    padding-block-start: 1%;
  }

  .light_online_item_detail .grad_btn_02 {
    max-inline-size: 250px;
    margin-block-start: 9%;
  }
}

/* ------------------------------- */

/* online contents */

/* ------------------------------- */
.online_contents_wrap {
  display: none;
}

.online_contents_inner {
  position: relative;
  inline-size: 100%;
  border-radius: 4px;
}

.online_contents_inner.is_blue {
  background-color: #b8e2ef;
}

.online_contents_inner.is_pink {
  background-color: #f8cfe1;
}

.online_contents_inner.is_yellow {
  background-color: #eccd6e;
}

.online_contents_item > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  background-color: #fff;
  background-image: url("/image/ico_online_blank.png");
  background-repeat: no-repeat;
  border-radius: 4px;
}

.online_contents_annotation {
  padding-inline-start: 1em;
  color: #444;
  text-indent: -1em;
}

.online_contents_close {
  display: block;
  text-align: center;
  border-block-start: solid 1px #fff;
}

.online_contents_close > span {
  position: relative;
  display: inline-block;
  padding-inline-start: 2em;
  color: #444;
  letter-spacing: 0.15em;
}

.online_contents_close > span::before,
.online_contents_close > span::after {
  position: absolute;
  inset-block-start: 50%;
  display: block;
  inline-size: 14px;
  block-size: 1px;
  content: "";
  background-color: #444;
}

.online_contents_close > span::before {
  inset-inline-start: 0.3em;
  transform: rotate(45deg);
}

.online_contents_close > span::after {
  inset-inline-start: 0.3em;
  transform: rotate(-45deg);
}

@media (min-width: 769px) {
  .online_premium .light_online_item_title img {
    max-inline-size: 300px;
  }

  .item_contents_title_img .premium_title_img {
    inline-size: 387px;
    block-size: 29px;
    margin-inline-start: 15px;
    image-rendering: -webkit-optimize-contrast;
  }

  .online_premium {
    margin-inline-end: 5%;
  }

  .online_all_wrap {
    position: relative;
    z-index: 1;
  }

  .online_contents_wrap {
    position: absolute;
    inset-inline-start: 50%;
    inline-size: 452px;
    transform: translateX(-50%);
  }

  .online_contents_wrap.open_bottom {
    inset-block-start: 100%;
    padding-block-start: 11px;
  }

  .online_contents_wrap.open_top {
    inset-block-end: 100%;
    padding-block-end: 11px;
  }

  .online_contents_wrap.open_bottom .online_contents_inner::before,
  .online_contents_wrap.open_top .online_contents_inner::before {
    position: absolute;
    inset-inline-start: 50%;
    display: block;
    inline-size: 0;
    block-size: 0;
    content: "";
    transform: translateX(-50%);
  }

  .online_contents_wrap.open_bottom .online_contents_inner::before {
    inset-block-end: 100%;
    border-color: transparent transparent #b8e2ef;
    border-style: solid;
    border-width: 0 8px 10px;
  }

  .online_contents_wrap.open_bottom .online_contents_inner.is_pink::before {
    border-color: transparent transparent #f8cfe1;
  }

  .online_contents_wrap.open_bottom .online_contents_inner.is_yellow::before {
    border-color: transparent transparent #eccd6e;
  }

  .online_contents_wrap.open_top .online_contents_inner::before {
    inset-block-start: 100%;
    border-color: #b8e2ef transparent transparent;
    border-style: solid;
    border-width: 10px 8px 0;
  }

  .online_contents_wrap.open_top .online_contents_inner.is_pink::before {
    border-color: #f8cfe1 transparent transparent;
  }

  .online_contents_wrap.open_top .online_contents_inner.is_yellow::before {
    border-color: #eccd6e transparent transparent;
  }

  .online_contents {
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
  }

  .online_contents_item:not(:first-of-type) {
    margin-inline-start: 1.8335%;
  }

  .online_contents.col2 .online_contents_item {
    inline-size: 49.083%;
  }

  .online_contents.col3 .online_contents_item {
    inline-size: 32.111%;
  }

  .online_contents_item > a {
    block-size: 60px;
    background-position: right 6px bottom 6px;
    background-size: 10px 9px;
  }

  .online_contents.col3 .online_contents_item > a > img {
    inline-size: 66.43%;
  }

  .online_contents.col2 .online_contents_item > a > img {
    inline-size: 46%;
  }

  .online_contents_annotation {
    max-inline-size: 92.6%;
    margin-block: 3px 0;
    margin-inline: auto;
    font-size: 0.625em;
    line-height: 1.8;
    letter-spacing: 0.01em;
  }

  .online_contents_close {
    inline-size: calc(100% - 16px);
    padding-block: 10px;
    padding-inline: 0;
    margin-block: 8px 0;
    margin-inline: auto;
    font-size: 0.75em;
  }
}

@media (min-width: 871px) and (max-width: 1125px) {
  .online_contents_wrap.adjust_x {
    inset-inline-start: 5%;
  }

  .online_contents_wrap.adjust_x .online_contents_inner::before {
    inset-inline-start: 70%;
  }
}

@media (min-width: 769px) and (max-width: 870px) {
  .online_contents_wrap.adjust_x {
    inset-inline-start: -10%;
  }

  .online_contents_wrap.adjust_x .online_contents_inner::before {
    inset-inline-start: 73%;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .online_contents_wrap.adjust_x2 {
    inset-inline-start: 226px;
  }

  .online_contents_wrap.adjust_x2 .online_contents_inner::before {
    inset-inline-start: calc(80px + ((1vi - 7.69px) * 9.2807));
  }
}

/* @media (min-width: 769px) and (max-width: 1000px) {
  .online_contents_wrap.adjust_x3 {
    left: 25%;
  }
  .online_contents_wrap.adjust_x3 .online_contents_inner::before {
    left: 65%;
  }
} */

@media (max-width: 768px) {
  .online_premium .sp_only {
    margin-block-start: 35px;
  }

  .online_contents_inner {
    max-inline-size: 400px;
    padding-block: 20px 0;
    padding-inline: 20px;
    margin-inline: auto;
    box-shadow: 0 8px 12px 0 rgb(102 102 102 / 0.1);
  }

  .online_contents_item:not(:first-of-type) {
    margin-block-start: 10px;
  }

  .online_contents_item > a {
    block-size: 60px;
    text-align: center;
    background-position: right 10px bottom 10px;
    background-size: 10px 9px;
  }

  .online_contents_item > a img {
    inline-size: 45%;
  }

  .modal_tooltip_layer .mfp-close {
    display: none;
  }

  .online_contents_annotation {
    margin-block-start: 5%;
    font-size: 0.667em;
    line-height: 1.8;
  }

  .online_contents_close {
    inline-size: 100%;
    padding-block: 6%;
    padding-inline: 0;
    margin-block-start: 5%;
    font-size: 0.867em;
    line-height: 1;
  }
}

/* ------------------------------- */

/* flavor */

/* ------------------------------- */
.flavor_sec {
  background-repeat: no-repeat;
}

.flavor_sec_inner {
  inline-size: 100%;
  max-inline-size: 1400px;
  margin-inline: auto;
}

.flavor_heading {
  margin-inline: auto;
}

.flavor_heading img {
  inline-size: 100%;
}

.flavor_contents_item .flavor_contents_img_wrap img {
  inline-size: 100%;
}

@media (min-width: 769px) {
  .flavor_sec {
    padding-block-start: 50px;
    padding-inline: 10px;
    margin-block-start: 58px;
    background-image: url("/image/bg_heading_flavor_pc.png");
    background-position: top 63px center;
    background-size: 694px auto;
  }

  .flavor_heading {
    max-inline-size: 340px;
  }

  .flavor_contents {
    margin-block-start: 80px;
  }

  .flavor_contents_item {
    position: relative;
    display: flex;

    /* flex-wrap: wrap; */
    justify-content: space-between;
  }

  .flavor_contents_item.is_reverse {
    flex-direction: row-reverse;
  }

  .flavor_contents_item::before {
    position: absolute;
    z-index: 1;
    display: block;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
  }

  .flavor_contents_item:nth-of-type(1)::before {
    inset-block-start: -30px;
    inset-inline-end: -24px;
    inline-size: 233px;
    block-size: 556px;
    background-image: url("/image/bg_flavor_03_pc.png");
  }

  .flavor_contents_item:nth-of-type(2)::before {
    inset-block-start: 8px;
    inset-inline-start: -63px;
    inline-size: 291px;
    block-size: 472px;
    background-image: url("/image/bg_flavor_01_pc.png");
  }

  .flavor_contents_item:nth-of-type(3)::before {
    inset-block-start: -8px;
    inset-inline-end: -44px;
    inline-size: 284px;
    block-size: 527px;
    background-image: url("/image/bg_flavor_02_pc.png");
  }

  .flavor_contents_item .flavor_contents_txt_wrap {
    position: relative;
    z-index: 2;
  }

  .flavor_contents_txt_02 {
    margin-block-start: 12.6%;
    line-height: 2.5;
    letter-spacing: 0.1em;

    /* font-size: 16px; */
  }

  .flavor_contents_txt_03 {
    margin-block-start: 11.8%;
  }

  .flavor_contents_item:nth-of-type(1) {
    padding-block: 0;
    padding-inline: 0 17.9%;
  }

  .flavor_contents_item:nth-of-type(1) .flavor_contents_txt_wrap {
    inline-size: 36%;
    padding-block-start: 3.7%;
  }

  .flavor_contents_item:nth-of-type(1) .flavor_contents_img_wrap {
    inline-size: 58.952%;

    /* margin-left: 5.048%; */
  }

  .flavor_contents_item:nth-of-type(3) {
    padding-block: 0;
    padding-inline: 0 15.1%;
    margin-block-start: 99px;
  }

  .flavor_contents_item:nth-of-type(2) {
    padding-block: 0;
    padding-inline: 15.1% 0;
    margin-block-start: 99px;
  }

  .flavor_contents_item:nth-of-type(2) .flavor_contents_txt_wrap {
    inline-size: 34%;
    padding-block-start: 3.5%;
    margin-inline-start: 6.048%;
  }

  .flavor_contents_item:nth-of-type(2) .flavor_contents_img_wrap {
    inline-size: 56.622%;
  }

  .flavor_contents_item:nth-of-type(2) .flavor_contents_txt_02 {
    margin-block-start: 10.7%;
  }
}

@media (max-width: 768px) {
  .flavor_sec {
    padding-block-start: 30px;
    margin-block-start: 26px;
    background-image: url("/image/bg_heading_flavor_sp.png");
    background-position: top 65px center;
    background-size: 61% auto;
  }

  .flavor_heading {
    inline-size: 56%;
  }

  .flavor_contents {
    margin-block-start: 10%;
  }

  .flavor_contents_item {
    position: relative;
  }

  .flavor_contents_item:nth-of-type(2),
  .flavor_contents_item:nth-of-type(3) {
    margin-block-start: 15%;
  }

  .flavor_contents_txt_02 {
    position: absolute;
    font-size: 3.6vi;
    line-height: 1.9;
    letter-spacing: 0.04em;
  }

  .flavor_contents_item:nth-of-type(1) .flavor_contents_txt_02 {
    inset-block-start: 67.5%;
    inset-inline-start: 33%;
    inline-size: 64%;
  }

  .flavor_contents_item:nth-of-type(2) .flavor_contents_txt_02 {
    inset-block-start: 64.1%;
    inset-inline-start: 44.4%;
    inline-size: 55%;
  }

  .flavor_contents_item:nth-of-type(3) .flavor_contents_txt_02 {
    inset-block-start: 70.8%;
    inset-inline-start: 34.1%;
    inline-size: 64%;
  }
}

/* ------------------------------- */

/* study */

/* ------------------------------- */
.study_sec {
  padding-inline: 10px;
  background-repeat: no-repeat;
}

.study_sec_inner {
  inline-size: 100%;
  max-inline-size: 1000px;
  margin-inline: auto;
}

.study_heading {
  margin-inline: auto;
}

.study_heading img {
  inline-size: 100%;
}

@media (min-width: 769px) {
  .study_sec {
    padding-block: 50px 100px;
    padding-inline: 10px;
    margin-block-start: 83px;
    background-image: url("/image/bg_heading_study_pc.png");
    background-position: top 70px center;
    background-size: 974px auto;
  }

  .study_heading {
    max-inline-size: 468px;
  }

  .study_contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-inline-start: 9.8%;
    margin-block-start: 67px;
  }

  .study_contents_txt_wrap {
    inline-size: 59%;
  }

  .study_contents_txt {
    line-height: 2.5;
    letter-spacing: 0.1em;
  }

  .study_contents_txt:not(:first-of-type) {
    margin-block-start: 20px;
  }

  .study_contents_img_wrap {
    inline-size: 41%;
    padding-block-start: 5.8%;
  }

  .study_contents_img {
    inline-size: 70.31%;
    margin-inline-start: -2%;
  }

  .study_link_wrap {
    margin-block-start: 28px;
  }

  .study_link_wrap .grad_btn_01 {
    max-inline-size: 540px;
  }
}

@media (min-width: 769px) and (max-width: 1000px) {
  .study_contents_txt {
    font-size: 1.6vi;
  }
}

@media (max-width: 768px) {
  .study_sec {
    padding-block: 30px 50px;
    margin-block-start: 38px;
    background-image: url("/image/bg_heading_study_sp.png");
    background-position: top 65px center;
    background-size: 88% auto;
  }

  .study_heading {
    inline-size: 80%;
  }

  .study_contents {
    margin-block-start: 9.3%;
  }

  .study_contents_txt_wrap {
    padding-block: 0;
    padding-inline: 8.5% 3%;
  }

  .study_contents_txt {
    font-size: 3.6vi;
    line-height: 1.8;
    letter-spacing: 0.05em;
  }

  .study_contents_txt:not(:first-of-type) {
    margin-block-start: 5.1%;
  }

  .study_contents_img_wrap {
    inline-size: 54%;
    margin-block: 3.7% 0;
    margin-inline: auto;
  }

  .study_link_wrap {
    margin-block-start: 6%;
  }

  .study_link_wrap .grad_btn_01 {
    max-inline-size: 295px;
  }
}

/* ------------------------------- */

/* item */

/* ------------------------------- */
.item_sec {
  padding-inline: 10px;
  background: linear-gradient(to right, #f7feff 0%, #fefcfe 50%, #fffafd 100%);
}

.item_sec_inner {
  inline-size: 100%;
  max-inline-size: 1000px;
  margin-inline: auto;
}

.item_heading {
  margin-inline: auto;
}

.item_heading img {
  inline-size: 100%;
}

.item_contents_title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  margin-inline: auto;
}

.item_contents_title_img {
  display: block;
}

.item_contents_title_img img {
  inline-size: 100%;
}

.item_contents_title_txt {
  display: block;
  line-height: 1;
  color: #888;
  text-align: center;
  background-color: #fff;
  border: solid 1px #888;
}

.item_contents .online_all_wrap {
  margin-inline: auto;
}

.item_effect {
  margin-inline: auto;
  background-color: #fff;
  border: solid 1px #efe8d4;
}

.item_effect_title {
  text-align: center;
}

.item_effect_title > span {
  position: relative;
  display: inline-block;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
}

.item_effect_title > span::before,
.item_effect_title > span::after {
  position: absolute;
  inset-block-start: 50%;
  display: block;
  content: "";
  background-image: url("/image/ico_star_01.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  transform: translateY(-50%);
}

.item_effect_title > span::before {
  inset-inline-start: 0;
}

.item_effect_title > span::after {
  inset-inline-end: 0;
}

.item_effect_list {
  display: flex;
  flex-wrap: wrap;
}

.item_annotation {
  text-align: center;
}

@media (min-width: 769px) {
  .item_sec {
    padding-block: 60px;
  }

  .item_heading {
    max-inline-size: 164px;
  }

  .item_contents_title {
    inline-size: 328px;
    margin-block-start: 80px;
  }

  .item_contents_title_img {
    inline-size: 220px;
  }

  .item_contents_title_img_premium {
    inline-size: 400px;
  }

  .item_contents_title_premium {
    inline-size: 510px;
    margin-block-start: 42px;
  }

  .item_contents_title_txt {
    inline-size: 90px;
    padding-block: 0.5em 0.3em;
    padding-inline: 0.2em 0.1em;
    font-size: 0.875em;
    letter-spacing: 0.1em;
  }

  .item_contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-block-start: 40px;
  }

  .item_contents2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-block-start: 40px;
  }

  .item_contents_col {
    inline-size: 46%;
  }

  .item_effect {
    max-inline-size: 882px;
    padding-block: 31px 36px;
    padding-inline: 21px;
    margin-block-start: 40px;
  }

  .item_effect_title > span {
    padding-block: 0;
    padding-inline: 53px;
  }

  .item_effect_title > span::before,
  .item_effect_title > span::after {
    inline-size: 15px;
    block-size: 15px;
  }

  .item_effect_list {
    gap: 0.5em 1em;
    align-items: center;
    justify-content: center;
    margin-block-start: 30px;
  }

  .item_effect_list > li {
    inline-size: auto;
    font-size: 15px;
    letter-spacing: 0.1em;
  }

  .item_effect_list.-ls02 > li {
    letter-spacing: 0.025em;
  }

  .item_effect_list span {
    font-size: 11px;
    font-feature-settings: "palt";
  }

  .item_effect_list sup {
    font-size: 0.688em;
    vertical-align: super;
  }

  .item_effect_note {
    margin-block-start: 15px;
    font-size: 11px;
    text-align: end;
  }

  .item_effect_list:not(.-ls02) + .item_effect_note {
    padding-inline-end: 30px;
  }

  .item_annotation {
    margin-block-start: 20px;
    font-size: 0.813em;
    letter-spacing: 0.1em;
  }

  .item_annotation_note {
    display: flex;
    column-gap: 10px;
    align-items: center;
    justify-content: center;
    margin-block-start: 10px;
  }

  .item_annotation_note-box {
    display: inline-block;
    padding-block: 6px;
    padding-inline: 7px;
    font-size: 11px;
    line-height: 1;
    color: #d2096c;
    text-align: center;
    background-color: #fff;
    border: solid 1px #d2096c;
  }

  .item_annotation_note-list {
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .item_sec {
    padding-block: 10.5%;
  }

  .item_heading {
    inline-size: 28.8%;
  }

  .item_contents_title {
    inline-size: 63%;
    margin-block-start: 15%;
  }

  .item_contents_title_img_premium img {
    inline-size: 100%;
  }

  .item_contents_title_premium02 {
    display: flex;
    justify-content: space-evenly;
    inline-size: 90%;
  }

  .item_contents_title_img {
    inline-size: 64%;
  }

  .item_contents_title_premium .item_contents_title_img {
    inline-size: 74%;
  }

  .item_contents_title_txt {
    /* width: 32%; */
    inline-size: auto;
    padding-block: 0.3em;
    padding-inline: 0.2em 0.1em;
    font-size: 2.95vi;
    letter-spacing: 0.1em;
  }

  .item_contents {
    inline-size: 83.1%;
    max-inline-size: 500px;
    margin-block: 8.6% 0;
    margin-inline: auto;
  }

  .item_contents .online_all_wrap {
    margin-block-start: 20px;
  }

  /*
  .item_contents_col:nth-of-type(2) {
    margin-block-start: 20%;
  }
*/
  #anchor02 .item_contents_col:nth-of-type(2) {
    margin-block-start: 20%;
  }

  .item_effect {
    inline-size: calc(100% - 20px);
    padding-block: 7.2% 8.6%;
    padding-inline: 5%;
    margin-block-start: 11.6%;
  }

  .item_effect_title > span {
    padding-block: 0;
    padding-inline: 2.3em;
    font-size: 3.6vi;
    letter-spacing: 0.1em;
  }

  .item_effect_title > span::before,
  .item_effect_title > span::after {
    inline-size: 1.1em;
    block-size: 1.1em;
  }

  .item_effect_list {
    row-gap: 3.47vi;
    align-items: center;
    justify-content: space-between;
    padding-block: 0;
    padding-inline: 3% 6%;
    margin-block-start: 8%;
  }

  .item_effect_list > li {
    inline-size: 49%;
    font-size: 3.6vi;
    text-align: center;
    letter-spacing: 0.1em;
  }

  .item_effect_list span {
    display: block;
    font-size: 2vi;
    font-feature-settings: "palt";
  }

  .item_effect_list sup {
    font-size: 0.688em;
    vertical-align: super;
  }

  .item_effect_note {
    padding-inline-end: 8vi;
    margin-block-start: 3.2vi;
    font-size: 2.13vi;
    text-align: end;
  }

  .item_annotation {
    margin-block-start: 20px;
    font-size: 0.813em;
    letter-spacing: 0.1em;
  }

  .item_annotation_note {
    display: flex;
    column-gap: 1.6vi;
    align-items: center;
    justify-content: center;
    margin-block-start: 1.33vi;
  }

  .item_annotation_note-box {
    display: inline-block;
    padding: 1.33vi;
    font-size: 2.13vi;
    line-height: 1;
    color: #d2096c;
    text-align: center;
    background-color: #fff;
    border: solid 1px #d2096c;
  }

  .item_annotation_note-list {
    font-size: 2.13vi;
  }
}

/* ------------------------------- */

/* CM */

/* ------------------------------- */
.cm_sec {
  padding-inline: 10px;
  background-repeat: no-repeat;
}

.cm_sec_inner {
  inline-size: 100%;
  max-inline-size: 1000px;
  margin-inline: auto;
}

.cm_heading {
  margin-inline: auto;
}

.cm_heading img {
  inline-size: 100%;
}

.cm_movie_wrap {
  inline-size: 100%;
  margin-inline: auto;
}

.cm_movie_inner {
  position: relative;
  padding-block-start: 56.25%;
}

.cm_movie_inner iframe {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
}

.profile_wrap {
  max-inline-size: 740px;
  margin-inline: auto;
}

.profile_name {
  font-weight: 600;
  line-height: 1;
}

@media (min-width: 769px) {
  .cm_sec {
    padding-block: 60px 55px;
    background-image: url("/image/bg_cm_area_pc.png");
    background-position: top 100px center;
    background-size: 1400px auto;
  }

  .cm_heading {
    max-inline-size: 275px;
  }

  .cm_movie_wrap {
    max-inline-size: 740px;
    margin-block-start: 40px;
  }

  .profile_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-block-start: 120px;
  }

  .profile_img_wrap {
    inline-size: 24.325%;
    padding-block-start: 1.9%;
  }

  .profile_detail {
    inline-size: 71%;
  }

  .profile_name {
    font-size: 1.125em;
    letter-spacing: 0.1em;
  }

  .profile_note {
    margin-block-start: 17px;
    font-size: 0.938em;
    line-height: 2;
    letter-spacing: 0.09em;
  }
}

@media (max-width: 768px) {
  .cm_sec {
    padding-block: 10.5%;
    background-image: url("/image/bg_cm_area_sp.png");
    background-position: top center;
    background-size: 100% auto;
  }

  .cm_heading {
    inline-size: 50%;
  }

  .cm_movie_wrap {
    inline-size: calc(100% - 20px);
    margin-block-start: 8.8%;
  }

  .profile_wrap {
    margin-block-start: 26.67%;
  }

  .profile_img_wrap {
    inline-size: 42%;
    max-inline-size: 250px;
    margin-inline: auto;
  }

  .profile_detail {
    margin-block-start: 6%;
  }

  .profile_name {
    font-size: 4vi;
    text-align: center;
    letter-spacing: 0.1em;
  }

  .profile_note {
    padding-block: 0;
    padding-inline: 9%;
    margin-block-start: 3.5%;
    font-size: 3.5vi;
    line-height: 1.95;
    letter-spacing: 0.08em;
  }
}

/* ------------------------------- */

/* Q&A */

/* ------------------------------- */
.qa_sec {
  padding-inline: 10px;
  background: linear-gradient(to right, #f7feff 0%, #fefcfe 50%, #fffafd 100%);
}

.qa_sec_inner {
  inline-size: 100%;
  max-inline-size: 1000px;
  margin-inline: auto;
}

.qa_heading {
  margin-inline: auto;
}

.qa_heading img {
  inline-size: 100%;
}

.qa_wrap {
  inline-size: 100%;
  margin-inline: auto;
}

.qa_ac_row {
  list-style-type: none;
  border-block-end: solid 1px #efe8d4;
}

.qa_ac_row:first-of-type {
  border-block-start: solid 1px #efe8d4;
}

.qa_ac_row > li:first-of-type .qa_ac_ques {
  border-block-start: none;
}

.qa_ac_ques {
  position: relative;
  inline-size: 100%;
  font-weight: 600;
  color: #666;
  text-align: start;
  cursor: pointer;
  border-block-start: solid 1px #efe8d4;
}

.qa_ac_ques::before,
.qa_ac_ques::after {
  position: absolute;
  display: block;
  block-size: 2px;
  content: "";
  background-color: #d2c586;
  transition: transform 0.3s;
}

.qa_ac_ques::after {
  transform: rotate(90deg);
}

.qa_ac_ques.is_active::after {
  transform: rotate(0);
}

.qa_ac_anser {
  display: none;
}

/*
.qa_ac_ques.is_active + .qa_ac_anser {
  display: block;
   transition: opacity .3s;
}
*/
.qa_ac_anser .font_b {
  font-weight: 600;
}

.ac_annotation {
  display: block;
  padding-inline-start: 1em;
  text-indent: -1em;
  letter-spacing: 0.1em;
}

.faq_title {
  padding: 18px;
  margin-block: 60px 40px;
  margin-inline: 0;
  text-align: center;
}

.faq_title_01 {
  background: linear-gradient(to right, #8ad3eb 0, #b8bddc 50%, #f3a0c8 100%);
}

.faq_title_02 {
  background: linear-gradient(to right, #e8f8fe 0, #f8f5ff 50%, #feedf6 100%);
}

.faq_title_03 {
  background: #fcf3df;
}

.faq_title_04 {
  background: linear-gradient(to right, rgb(239 252 223) 0, rgb(242 253 230) 20%, rgb(243 253 230) 70%, rgb(242 253 226) 100%);
}

@media (min-width: 769px) {
  .qa_sec {
    padding-block: 60px;
  }

  .qa_heading {
    max-inline-size: 293px;
  }

  .qa_wrap {
    max-inline-size: 1000px;
    margin-block-start: 40px;
  }

  .qa_ac_ques {
    padding-block: 26px 20px;
    padding-inline: 28px 60px;
    line-height: 1.4;
    letter-spacing: 0.1em;
  }

  .qa_ac_anser {
    padding-block: 0 19px;
    padding-inline: 28px 60px;
    line-height: 2;
    letter-spacing: 0.1em;
  }

  .qa_ac_ques::before,
  .qa_ac_ques::after {
    inset-block-start: calc(50% - 5px);
    inset-inline-end: 32px;
    inline-size: 20px;
  }

  .ac_annotation {
    margin-block-start: 10px;
    font-size: 0.688em;
  }
}

@media (max-width: 768px) {
  .faq_title {
    padding-block: 12px;
    padding-inline: 30px;
    margin-block: 40px 20px;
    margin-inline: 10px;
    text-align: center;
  }

  .faq_title_02 img {
    inline-size: 70%;
  }

  .qa_sec {
    padding-block: 8.5% 10.5%;
  }

  .qa_heading {
    inline-size: 50.5%;
  }

  .qa_wrap {
    max-inline-size: calc(100% - 20px);
    margin-block-start: 30px;
  }

  .qa_ac_ques {
    padding-block: 4%;
    padding-inline: 3% 10%;
    font-size: 3.5vi;
    line-height: 1.8;
  }

  .qa_ac_ques::before,
  .qa_ac_ques::after {
    inset-block-start: 1.7em;
    inset-inline-end: 0.9em;
    inline-size: 1.2em;
  }

  .qa_ac_anser {
    padding-block: 4%;
    padding-inline: 3% 10%;
    font-size: 3.5vi;
    line-height: 1.8;
  }

  .ac_annotation {
    margin-block-start: 10px;
    font-size: 0.667em;
    line-height: 1.6;
    letter-spacing: 0.05em;
  }

  .faq_title_04 img {
    inline-size: 15%;
  }
}

/* ------------------------------- */

/* modal */

/* ------------------------------- */
.mfp-bg {
  background-color: #fff;
}

.light_online_top {
  display: flex;
  justify-content: space-around;
}

/* ------------------------------- */

/* 2022/07/07 */

/* ------------------------------- */

.banner {
  max-inline-size: 1030px;
  padding-block: 0 110px;
  padding-inline: 15px;
  margin-block: 25px 0;
  margin-inline: auto;
  transition: opacity 0.3s;
}

.banner a:hover {
  opacity: 0.5;
}

@media (max-width: 768px) {
  .banner {
    padding-block: 0 60px;
    padding-inline: 0;
    margin-block: 0;
    margin-inline: auto;
    transition: opacity 0.3s;
  }
}

.wrap_banner {
  margin-block-start: 59px;
}

@media (max-width: 768px) {
  .wrap_banner {
    margin-block-start: 41px;
  }
}

/* ------------------------------- */

/* 20221016�????�?索追??? */

/* ------------------------------- */

.light_online_item_title01 {
  text-align: center;
}

.light_online_item_title01 {
  inline-size: 98%;
  margin-block: 0;
  margin-inline: auto;
  text-align: center;
}

.light_online_item_title01.-type-02 {
  /* inline-size: 222px; */
  inline-size: 73%;
}

.light_online_item_title01.-type-03 {
  /* inline-size: 201px; */
  inline-size: 63.5%;
}

.light_online_item_img01 {
  /* block-size: 390px; */  /* 美容誌ロゴなど配置時に復活 */
  margin-block: 20px 30px;
  text-align: center;
}

.light_online_item_title01 {
  text-align: center;
}

.light_online_item_img01 {
  margin-block-start: 20px;
  text-align: center;
}

.item_contents_logo {
}

.item_contents_logo ul {
  display: flex;
  justify-content: space-around;
  max-inline-size: 220px;
  margin-block-start: 20px;
  margin-inline: auto;
}

.item_contents_logo ul li {
  inline-size: 48%;
  max-inline-size: 100px;
}

/* ???????????? */

.flexbox {
  display: flex;
  max-inline-size: 460px;
  margin-block-start: 15px;
  margin-inline: auto;
}

.box1 {
  inline-size: 50%;
  margin: auto;
}

.box2 {
  inline-size: 50%;
  margin-block: auto;
  margin-inline: 0.5rem;
}

@media (max-width: 768px) {
  .flexbox {
    display: block;
    max-inline-size: none;
  }

  .flexbox .box1 {
    inline-size: 100%;
    margin-block: 0;
    margin-inline: auto;
  }

  .flexbox .box2 {
    inline-size: 100%;
    margin-block: 0;
    margin-inline: auto;
  }
}

.store01 {
  block-size: 70px;
  font: "#cda346";
  background-color: #ffffff;
  border: solid 1px;
  border-color: #e1cd97;
  border-radius: 5px;
}

.store01link {
  color: #cda346;
}

@media (max-width: 768px) {
  .store01 {
    max-inline-size: 295px;
    block-size: 53px;
    margin-block: 15px 0;
    margin-inline: auto;
  }
}

.store02 {
  block-size: 70px;
  font: "#55b4d2";
  background-color: #ffffff;
  border: solid 1px;
  border-color: #55b4d2;
  border-radius: 5px;
}

.store02link {
  color: #55b4d2;
}

@media (max-width: 768px) {
  .store02 {
    max-inline-size: 295px;
    block-size: 53px;
    margin-block: 15px 0;
    margin-inline: auto;
  }

  .store02link {
    color: #55b4d2;
  }
}

.store03 {
  block-size: 70px;
  font: "#f5a0ca";
  background-color: #ffffff;
  border: solid 1px;
  border-color: #f5a0ca;
  border-radius: 5px;
}

.store03link {
  color: #f5a0ca;
}

@media (max-width: 768px) {
  .store03 {
    max-inline-size: 295px;
    block-size: 53px;
    margin-block: 15px 0;
    margin-inline: auto;
    font: "#f5a0ca";
    background-color: #ffffff;
    border: solid 1px;
    border-color: #f5a0ca;
  }

  .store03link {
    color: #f5a0ca;
  }
}

.store01 img {
  inline-size: 10px;
  block-size: auto;
  vertical-align: middle;
}

.store02 img {
  inline-size: 10px;
  block-size: auto;
  vertical-align: middle;
}

.store03 img {
  inline-size: 10px;
  block-size: auto;
  vertical-align: middle;
}

@media (max-width: 1200px) {
  .anchor_wrap {
    background-position: center 5%;
  }

  .button_banner img {
    inline-size: 100%;
  }

  .sp_menu_logo img {
    margin-block-start: 11vi;
  }

  .sns_icon .anchor_txt {
    font-size: 1em;
  }

  .button_banner {
    inline-size: 55%;
    inline-size: 70%;
    max-inline-size: 570px;
    margin-block: 58px 0;
    margin-block: 10px 0;
    margin-inline: auto;
    margin-inline: auto;
    text-align: start;
    transition: opacity 0.3s;
  }

  .button_banner .sns_flex img {
    inline-size: 100%;
    vertical-align: baseline;
  }
}

@media only (min-device-width: 769px) and (max-device-width: 1024px) and (orientation: landscape) {
  .anchor_wrap {
    background-position: center 10%;
  }

  .anchor_item > a {
    padding-block: 1.5%;
    padding-inline: 0;
    font-size: 1.75em;
  }

  .sns_icon .anchor_txt {
    font-size: 0.7em;
  }

  .sp_menu_logo img {
    inline-size: 50%;
  }
}

@media (min-width: 1024px) {
  .sns_icon .anchor_txt {
    font-size: 0.7em;
  }
}

@media (min-width: 769px) {
  .sp_menu_logo img {
    margin-block-start: 20vi;
  }
}

@media (min-width: 768px) {
  /* .sns_flex a {
    width: 65px;
    margin-right: 10px;
    margin-top: 10px;
} */

  /* .button_banner_02 {
  margin: 20px auto 0;
  width: 70%;
  transition: opacity .3s;
  max-width: 570px;
  font-size: 0.8rem;
} */
  .sns_icon .anchor_txt {
    letter-spacing: 0.2em;
  }
}

@media (max-width: 1200px) {
  .sns_flex {
    display: flex;
  }
}

@media (max-width: 767px) {
  .sp_menu_logo img {
    margin-block-start: 9vi;
  }
}

@media only (min-device-width: 768px) and (max-device-width: 1200px) {
  .button_banner_02 {
    inline-size: 70%;
    max-inline-size: 570px;
    margin-block: 20px 0;
    margin-inline: auto;
    font-size: 0.8rem;
    transition: opacity 0.3s;
  }
}

.cm_movie_ttl {
  margin-block-start: 15px;
  text-align: center;
}

.cm_movie_ttl a {
  color: #555555;
  vertical-align: middle;
}

.cm_movie_ttl span {
  margin-inline-end: 5px;
}

.cm_movie_ttl img {
  inline-size: 13px;
}

.cm_movie_ttl span,
.cm_movie_ttl img {
  vertical-align: baseline;
}

.cm_movie_ttl .cm_movie_detail {
  display: flex;
  justify-content: center;
}

@media (max-width: 767px) {
  .cm_movie_ttl .cm_movie_detail {
    font-size: 3.2vw;
  }
}

.js_tooltip_close:focus-visible,
.js_tooltip_modal_btn:focus-visible,
.js_acc_title:focus-visible {
  outline: -webkit-focus-ring-color auto 1px;
}

.light_item_logo_01::before {
  position: absolute;
  inset-block-start: -5px;
  inset-inline-start: -126px;
  inline-size: 124px;
  block-size: 124px;
  content: "";
  background-size: contain;
}

.light_online_item_img01 span,
.item_contents_img span {
  position: relative;
  display: inline-block;
}

.light_online_item_img01 span.light_item_brown img {
  inline-size: 100%;
  max-inline-size: 161px;
}

.light_online_item_img01 span.light_item_blue img {
  inline-size: 100%;
  max-inline-size: 161px;
}

.light_online_item_img01 span.light_item_pink img {
  inline-size: 100%;
  max-inline-size: 161.5px;
}

.prod_notes {
  inline-size: 100%;
  max-inline-size: 495px;
  margin-block: 20px 0;
  margin-inline: auto 0;
  font-size: 10px;
  text-indent: -10px;
}

.item_contents_img .light_item_logo_01::before {
  inset-block-start: 60px;
  inset-inline-start: -24px;
  inline-size: 124px;
  block-size: 124px;
  content: "";
  background-size: contain;
}

@media (max-width: 1050px) {
  .item_contents_img .light_item_logo_01::before {
    inset-block-start: 14%;
    inset-inline-start: 9px;
    inline-size: 18%;
    block-size: 85px;
    content: "";
    background-size: contain;
  }
}

@media (max-width: 768px) {
  .light_item_logo_01::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -90px;
    inline-size: 85px;
    block-size: 85px;
    content: "";
    background-size: contain;
  }

  .prod_notes {
    inline-size: 100%;
    max-inline-size: 273px;
    margin-block: 15px 0;
    margin-inline: auto;
    font-size: 10px;
    text-indent: -10px;
  }

  .item_contents_img .light_item_logo_01::before {
    inset-block-start: 11.1%;
    inset-inline-start: 1%;
    inline-size: 24%;
    block-size: 100%;
    content: "";
    background-size: contain;
  }
}

/* slide */
.contentslist_item_track {
  margin-inline: auto;
}

.contentslist_item .contentslist_item_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  inline-size: 82vw;
  max-inline-size: 1000px;
  margin-inline: auto;
}

.contentslist_item .contentslist_item_list > .item_contents_col {
  inline-size: 30%;
  margin-block-end: 60px;
}

.contentslist_item .contentslist_item_list > .item_contents_col > .flexbox {
  flex-direction: column;
  gap: 0.5em;
  align-items: center;
}

.contentslist_item .contentslist_item_list > .item_contents_col > .flexbox > .box1,
.contentslist_item .contentslist_item_list > .item_contents_col > .flexbox > .box2 {
  inline-size: 100%;
}

.contentslist_item > *::-webkit-scrollbar {
  block-size: 3px;
}

.contentslist_item > *::-webkit-scrollbar-track {
  margin-inline: 46px;
  background-color: #e5e5e5;
  border-radius: 5px;
}

.contentslist_item > *::-webkit-scrollbar-thumb {
  margin-inline: 46px;
  background-color: #ddb663;
  border-radius: 5px;
}

.contentslist_item_col img {
  vertical-align: top;
}

@media (min-width: 769px) {
  .contentslist_item > * {
    overflow: unset !important;
  }
}

@media (max-width: 768px) {
  .commitment_sec {
    margin-block-start: 35px;
  }

  .contentslist_item_track {
    inline-size: calc(1418px / 2);
    overflow-x: scroll;
    white-space: nowrap;
  }

  .contentslist_item .contentslist_item_list {
    inline-size: 100%;
  }
}