@charset "UTF-8";

/* =============================================
共通
============================================= */
/* レイアウト */
.p-character__inner.l-inner {
  max-width: 750px;
  margin-inline: auto;
  font-family: "Noto Sans JP", sans-serif;
}

/* アニメーション関連 */
.fadein-up {
  translate: 0 20px;
  opacity: 0;
  will-change: opacity, translate;
  transition: opacity 1s cubic-bezier(0.7, 0, 0.3, 1), translate 1s cubic-bezier(0.7, 0, 0.3, 1);
}
.fadein-up.is-visible {
  opacity: 1;
  translate: 0;
}

.slidein-left,
.slidein-right {
  opacity: 0;
  will-change: opacity, translate;
  transition: opacity 1s cubic-bezier(0.7, 0, 0.3, 1), translate 1s cubic-bezier(0.7, 0, 0.3, 1);
}
.slidein-left.is-visible,
.slidein-right.is-visible {
  opacity: 1;
  translate: 0;
}
.slidein-right {
  translate: 60px 0;
}
.slidein-left {
  translate: -60px 0;
}

.pop {
  scale: 0;
  opacity: 0;
  transition: all 0.3s;
  transform-origin: right bottom;
}
.pop.is-visible {
  animation: pop 0.7s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
@keyframes pop {
  0% {
    opacity: 0;
    scale: 0.5;
  }
  80% {
    opacity: 1;
    scale: 1.05;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

/* ctaボタン */
.btn-cta {
  display: block;
  width: calc(326px * (750 / 390));
  margin-inline: auto;
  background-color: gray;
  color: #FFF !important;
  font-size: calc(20px * (750 / 390));
  font-weight: 700;
  border-radius: 100px;
  letter-spacing: -0.01em;
  text-align: center;
  background-image:url("data:image/svg+xml,%3Csvg%20width='10'%20height='16'%20viewBox='0%200%2010%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M1%201L8%208L0.999999%2015'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: right calc(26px * (750 / 390)) center;
  background-size: calc(9.4px * (750 / 390)) auto;
  background-repeat: no-repeat;
  box-shadow: 0 calc(4px * (750 / 390)) 0 #000;
  transition: all 0.3s;
  padding-block: calc(24px * (750 / 390));
  line-height: 1.25;
}
@media screen and (max-width: 750px) {
  .btn-cta {
    width: calc(326 / 390 * 100vw);
    font-size: calc(20 / 390 * 100vw);
    padding-block: calc(24 / 390 * 100vw);
    background-position: right calc(26 / 390 * 100vw) center;
    background-size: calc(9.4 / 390 * 100vw) auto;
    box-shadow: 0 calc(4 / 390 * 100vw) 0 #000;
  }
}

.btn-cta--orange {
  background-color: #FF7400;
  box-shadow: 0 calc(4px * (750 / 390)) 0 #C44C12;
}
@media screen and (max-width: 750px) {
  .btn-cta--orange {
    box-shadow: 0 calc(4 / 390 * 100vw) 0 #C44C12;
  }
}

.btn-cta--green {
  background-color: #71D530;
  box-shadow: 0 calc(4px * (750 / 390)) 0 #4DA215;
}
@media screen and (max-width: 750px) {
  .btn-cta--green {
    box-shadow: 0 calc(4 / 390 * 100vw) 0 #4DA215;
  }
}

.btn-cta:hover {
  box-shadow: none;
  transform: translateY(calc(4px * (750 / 390)));
}
@media screen and (max-width: 750px) {
  .btn-cta:hover {
    transform: translateY(calc(4 / 390 * 100vw));
  }
}

.btn-cta + .btn-cta {
  margin-top: calc(20px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .btn-cta + .btn-cta {
    margin-top: calc(20 / 390 * 100vw);
  }
}

.btn-cta--small {
  width: calc(273px * (750 / 390));
  font-size: calc(14.03px * (750 / 390));
  padding-block: calc(16px * (750 / 390));
  background-size: calc(7px * (750 / 390)) auto;
  background-position: right calc(18px * (750 / 390)) center;
}
@media screen and (max-width: 750px) {
  .btn-cta--small {
    width: calc(273 / 390 * 100vw);
    font-size: calc(14.03 / 390 * 100vw);
    padding-block: calc(16 / 390 * 100vw);
    background-size: calc(7 / 390 * 100vw) auto;
    background-position: right calc(18 / 390 * 100vw) center;
  }
}

/* みまもるトークスタンプ */
.talkstamp-tablet {
  position: relative;
}

.talkstamp-tablet .text-note {
  position: absolute;
  bottom: 0;
  left: calc(27px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .talkstamp-tablet .text-note {
    left: calc(27 / 390 * 100vw);
  }
}

.talkstamp-tablet .btn-detail {
  position: absolute;
  bottom: 0;
  right: calc(24px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .talkstamp-tablet .btn-detail {
    right: calc(24 / 390 * 100vw);
  }
}

.talkstamp-tablet .pop1,
.talkstamp-tablet .pop2,
.talkstamp-tablet .pop3 {
  position: absolute;
}

.talkstamp-tablet .pop1 {
  animation-delay: 0.1s;
  width: calc(180px * (750 / 390));
  top: 0;
  left: calc(142px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .talkstamp-tablet .pop1 {
    width: calc(180 / 390 * 100vw);
    left: calc(142 / 390 * 100vw);
  }
}

.talkstamp-tablet .pop2 {
  animation-delay: 0.4s;
  width: calc(138px * (750 / 390));
  top: calc(105px * (750 / 390));
  left: 0;
}
@media screen and (max-width: 750px) {
  .talkstamp-tablet .pop2 {
    width: calc(138 / 390 * 100vw);
    top: calc(105 / 390 * 100vw);
  }
}

.talkstamp-tablet .pop3 {
  animation-delay: 0.7s;
  width: calc(128px * (750 / 390));
  top: calc(210px * (750 / 390));
  left: calc(53px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .talkstamp-tablet .pop3 {
    width: calc(128 / 390 * 100vw);
    top: calc(210 / 390 * 100vw);
    left: calc(53 / 390 * 100vw);
  }
}

/* モーダル起動ボタン */
.btn-detail {
  background-image:url("data:image/svg+xml,%3Csvg%20width='24'%20height='25'%20viewBox='0%200%2024%2025'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M7.28467%2010.9714H14.5154'%20stroke='%23084373'%20stroke-width='3'%20stroke-linecap='round'/%3E%3Cpath%20d='M10.8999%207.32861L10.8999%2014.6143'%20stroke='%23084373'%20stroke-width='3'%20stroke-linecap='round'/%3E%3Cellipse%20cx='10.9'%20cy='10.9714'%20rx='9.4'%20ry='9.47143'%20stroke='%23084373'%20stroke-width='3'%20stroke-linecap='round'/%3E%3Cpath%20d='M18.1309%2018.2571L22.4693%2022.6285'%20stroke='%23084373'%20stroke-width='3'%20stroke-linecap='round'/%3E%3C/svg%3E");
  width: calc(48px * (750 / 390));
  height: calc(48px * (750 / 390));
  background-size: calc(24px * (750 / 390)) auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #FFF;
  border: 1px solid #084373;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 calc(3.4px * (750 / 390)) 0 #084373;
  transition: all 0.3s;
}
@media screen and (max-width: 750px) {
  .btn-detail {
    width: calc(48 / 390 * 100vw);
    height: calc(48 / 390 * 100vw);
    background-size: calc(24 / 390 * 100vw) auto;
    box-shadow: 0 calc(3.4 / 390 * 100vw) 0 #084373;
  }
}

.btn-detail:hover {
  box-shadow: none;
  transform: translateY(calc(3.4px * (750 / 390)));
}
@media screen and (max-width: 750px) {
  .btn-detail:hover {
    transform: translateY(calc(3.4 / 390 * 100vw));
  }
}

.btn-detail--red {
  background-image: url("data:image/svg+xml,%3Csvg%20width='24'%20height='25'%20viewBox='0%200%2024%2025'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M7.28467%2010.9714H14.5154'%20stroke='%23B30000'%20stroke-width='3'%20stroke-linecap='round'/%3E%3Cpath%20d='M10.8999%207.32861L10.8999%2014.6143'%20stroke='%23B30000'%20stroke-width='3'%20stroke-linecap='round'/%3E%3Cellipse%20cx='10.9'%20cy='10.9714'%20rx='9.4'%20ry='9.47143'%20stroke='%23B30000'%20stroke-width='3'%20stroke-linecap='round'/%3E%3Cpath%20d='M18.1309%2018.2571L22.4693%2022.6285'%20stroke='%23B30000'%20stroke-width='3'%20stroke-linecap='round'/%3E%3C/svg%3E");
  border-color: #B30000;
  box-shadow: 0 calc(3.4px * (750 / 390)) 0 #B30000;
}
@media screen and (max-width: 750px) {
  .btn-detail--red {
    box-shadow: 0 calc(3.4 / 390 * 100vw) 0 #B30000;
  }
}

/* テキストノート */
.text-note {
  font-size: calc(10.79px * (750 / 390));
  color: #7D7D7D;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
@media screen and (max-width: 750px) {
  .text-note {
    font-size: calc(10.79 / 390 * 100vw);
  }
}

/* モダール */
.modal2026 {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  font-family: "Noto Sans JP", sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.modal2026.is-active {
  opacity: 1;
  visibility: visible;
}

.modal2026__inner {
  width: 100%;
  height: 100%;
  max-width: calc(358px * (750 / 390));
  padding-top: 60px;
  padding-bottom: 20px;
  margin-inline: auto;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 750px) {
  .modal2026__inner {
    max-width: calc(358 / 390 * 100vw);
    padding-top: calc(60 / 390 * 100vw);
    padding-bottom: calc(20 / 390 * 100vw);
  }
}

.modal2026__box {
  position: relative;
  border-radius: calc(20px * (750 / 390));
  width: 100%;
  max-height: 100%;
  overflow: auto;
  padding-top: calc(40px * (750 / 390));
  padding-bottom: calc(34px * (750 / 390));
  cursor: default;
  /* 閉じるボタンを sticky にするため縦並び flex（子の幅・挙動はほぼ従来のまま） */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
@media screen and (max-width: 750px) {
  .modal2026__box {
    border-radius: calc(20 / 390 * 100vw);
    padding-top: calc(40 / 390 * 100vw);
    padding-bottom: calc(34 / 390 * 100vw);
  }
}

.modal2026__close {
  cursor: pointer;
  /* スクロール領域（このボックス）内の表示位置に固定。absolute だと中身と一緒に流れる */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-end;
  flex-shrink: 0;
  z-index: 20;
  width: calc(24px * (750 / 390));
  height: calc(24px * (750 / 390));
  margin-right: calc(10px * (750 / 390));
  /* フロー上の高さを打ち消し、absolute 時と同様に直下の見出し等と重ねる */
  margin-bottom: calc(-1 * ((24px * (750 / 390)) + (10px * (750 / 390))));
  background-color: #FFF;
  border-radius: 50%;
  border: 1px solid #333333;
  transform: translate(0, calc(-30px * (750 / 390)));
  -webkit-transform: translate(0, calc(-30px * (750 / 390)));
}
@media screen and (max-width: 750px) {
  .modal2026__close {
    top: 0;
    width: calc(24 / 390 * 100vw);
    height: calc(24 / 390 * 100vw);
    margin-right: calc(10 / 390 * 100vw);
    margin-bottom: calc(-1 * ((24 / 390 * 100vw) + (10 / 390 * 100vw)));
    transform: translate(0, calc(-30 / 390 * 100vw));
    -webkit-transform: translate(0, calc(-30 / 390 * 100vw));
  }
}

.modal2026__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(13px * (750 / 390));
  height: calc(13px * (750 / 390));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-image:url("data:image/svg+xml,%3Csvg%20width='13'%20height='13'%20viewBox='0%200%2013%2013'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M2.19189%202L11.3843%2011.1924'%20stroke='%23333333'%20stroke-width='2'%20stroke-linecap='round'/%3E%3Cpath%20d='M11.1929%202L2.00048%2011.1924'%20stroke='%23333333'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E");
}

@media screen and (max-width: 750px) {
  .modal2026__close::after {
    width: calc(13 / 390 * 100vw);
    height: calc(13 / 390 * 100vw);
  }
}

.modal2026__heading {
  display: block;
  margin-inline: auto;
  width: 596px;
}
@media screen and (max-width: 750px) {
  .modal2026__heading {
    width: calc(596 / 750 * 100vw);
  }
}

.modal2026__slider {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url(../images2026/common/bg_modal_type1.webp);
  min-height: calc(300px * (750 / 390));
  height: calc(300px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .modal2026__slider {
    min-height: calc(300 / 390 * 100vw);
    height: calc(300 / 390 * 100vw);
  }
}

.modal2026__box.is-arrow-brown .slick-arrow {
  background-image:url("data:image/svg+xml,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle%20cx='12'%20cy='12'%20r='12'%20fill='%23480A04'/%3E%3Cpath%20d='M14%2017L9%2012L14%207'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.modal2026__slider.is-bg-type2 {
  background-image: url(../images2026/common/bg_modal_type2.webp);
  padding-top: calc(30px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .modal2026__slider.is-bg-type2 {
    padding-top: calc(30 / 390 * 100vw);
  }
}

.modal2026__slider.is-bg-type3 {
  background-image: url(../images2026/common/bg_modal_type3.webp);
  background-size: calc(266px * (750 / 390)) auto;
  background-position: left bottom;
  padding-top: calc(30px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .modal2026__slider.is-bg-type3 {
    background-size: calc(266 / 390 * 100vw) auto;
    padding-top: calc(30 / 390 * 100vw);
  }
}

.modal2026__slider.is-bg-type4 {
  background-image: url(../images2026/common/bg_modal_type4.webp);
  background-size: calc(178px * (750 / 390)) auto;
  background-position: left calc(8px * (750 / 390)) bottom calc(8px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .modal2026__slider.is-bg-type4 {
    background-size: calc(178 / 390 * 100vw) auto;
    background-position: left calc(8 / 390 * 100vw) bottom calc(8 / 390 * 100vw);
  }
}

.modal2026__slider.is-bg-type4 img {
  transform: translate(0, calc(-20px * (750 / 390)));
}
@media screen and (max-width: 750px) {
  .modal2026__slider.is-bg-type4 img {
    transform: translate(0, calc(-20 / 390 * 100vw));
  }
}

.modal2026__slider .slick-list,
.modal2026__slider .slick-track {
  height: 100%;
}

.modal2026__slider .slick-arrow {
  z-index: 10;
  width: calc(24px * (750 / 390));
  height: calc(24px * (750 / 390));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-image:url("data:image/svg+xml,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle%20cx='12'%20cy='12'%20r='12'%20fill='%230E519F'/%3E%3Cpath%20d='M14%2017L9%2012L14%207'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 750px) {
  .modal2026__slider .slick-arrow {
    width: calc(24 / 390 * 100vw);
    height: calc(24 / 390 * 100vw);
  }
}

.modal2026__slider .slick-arrow::before {
  content: none;
}

.modal2026__slider .slick-arrow.slick-prev {
  left: calc(16px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .modal2026__slider .slick-arrow.slick-prev {
    left: calc(16 / 390 * 100vw);
  }
}

.modal2026__slider .slick-arrow.slick-next {
  right: calc(16px * (750 / 390));
  transform: rotate(180deg) translateY(50%);
}
@media screen and (max-width: 750px) {
  .modal2026__slider .slick-arrow.slick-next {
    right: calc(16 / 390 * 100vw);
  }
}

.modal2026__slider__item {
  position: relative;
  height: 100%;
}

.modal2026__slider__item.is-size-midium img {
  display: block;
  margin-inline: auto;
  width: calc(327px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .modal2026__slider__item.is-size-midium img {
    width: calc(327 / 390 * 100vw);
  }
}

.modal2026__slider__item .text-note {
  position: absolute;
  bottom: calc(12px * (750 / 390));
  right: calc(12px * (750 / 390));
  text-align: right;
  color: #666;
}
@media screen and (max-width: 750px) {
  .modal2026__slider__item .text-note {
    bottom: calc(12 / 390 * 100vw);
    right: calc(12 / 390 * 100vw);
  }
}

.modal2026__content {
  background-color: #fff;
  margin-bottom: calc(32px * (750 / 390));
  padding-block: calc(20px * (750 / 390));
  padding-inline: calc(16px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .modal2026__content {
    margin-bottom: calc(32 / 390 * 100vw);
    padding-block: calc(20 / 390 * 100vw);
    padding-inline: calc(16 / 390 * 100vw);
  }
}

.modal2026__content__text1 {
  font-size: calc(12px * (750 / 390));
  line-height: 140%;
  letter-spacing: 0.04em;
  color: #333333;
}
@media screen and (max-width: 750px) {
  .modal2026__content__text1 {
    font-size: calc(12 / 390 * 100vw);
  }
}

.modal2026__content__text2 {
  font-size: calc(10px * (750 / 390));
  line-height: 140%;
  letter-spacing: 0.04em;
  color: #333333;
  margin-top: calc(10px * (750 / 390));
  display: none;
}
@media screen and (max-width: 750px) {
  .modal2026__content__text2 {
    font-size: calc(10 / 390 * 100vw);
    margin-top: calc(10 / 390 * 100vw);
  }
}

.modal2026__content__more {
  width: calc(54px * (750 / 390));
  height: calc(21px * (750 / 390));
  line-height: calc(21px * (750 / 390));
  display: inline-block;
  background-color: #D9D9D9;
  border-radius: calc(5px * (750 / 390));
  text-align: center;
  font-size: calc(10.24px * (750 / 390));
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #333 !important;
  font-family: "Zen Kaku Gothic New", sans-serif;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: calc(12px * (750 / 390));
}
@media screen and (max-width: 750px) {
  .modal2026__content__more {
    border-radius: calc(5 / 390 * 100vw);
    width: calc(54 / 390 * 100vw);
    height: calc(21 / 390 * 100vw);
    line-height: calc(21 / 390 * 100vw);
    font-size: calc(10.24 / 390 * 100vw);
    margin-top: calc(12 / 390 * 100vw);
  }
}

.modal2026__content__more:hover {
  opacity: 0.7;
}