@charset "UTF-8";

/* ========================
rakuma css overwite
======================== */
.applicationInner {
  margin-top: 36px;
}

@media screen and (min-width: 768px) {
  .applicationInner {
    margin-top: 45px;
  }

}

.rc-toTop {
  bottom: 50px;
}

/*========================================
common > color
========================================*/
:root {
  --black: #262626;
  --gray: #EBEBEB;
  --white: #ffffff;
  --red: #bf0000;

  --green: #006638;
  --rakumaBlue: #002896;

  --brown: #4C2723;
  --beige: #F4ECE7;
  --gold: #B47F2C;
  --deepYellow: #D06E00;
  --cream: #ffffb9;
  --orange: #FF6D00;
  --pastelPink: #FFABD7;
  --pastelBlue: #5ED7C8;
  --pastelOrange: #FF9E6E;
  --pastelPurple: #A096DC;

  --7A839B: #7A839B;
  --AA6939: #AA6939;

  --mainBg: #FFF9D5;
  --secondaryBg: #FFE678;

  --content-red: #8C0000;

  --form-color: #b6b6b6;
}

/*========================================
common
========================================*/
body {
  position: relative;
}

.--color-gold {
  color: var(--gold);
}

.upperCase {
  text-transform: uppercase
}

/* SP */
.mx374br {
  display: none;
}

/* SP Max370px */
@media (max-width: 374px) {
  .mx374br {
    display: block;
  }
}

/* PC */
.slPCbr,
.smPCbr,
.sxPCbr,
.ssxPCbr {
  display: none;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .slPCbr {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 910px) {
  .smPCbr {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 860px) {
  .sxPCbr {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 800px) {
  .ssxPCbr {
    display: block;
  }
}

/* ========================
Timer
======================== */
.js-period-before,
.js-period-after,
.js-period-ontheday,
.js-periodBanner-ontheday {
  display: none;
}

body.js-before-default .js-period-before,
body.js-after-default .js-period-after,
body.js-ontheday-default .js-period-ontheday,
body.js-ontheday-banner .js-periodBanner-ontheday {
  display: block;
}


/*========================================
common > section | title | text
========================================*/
.sectionL {
  /* padding: 40px 0; */
  /* background-color: var(--yellow); */
}

.sectionL__inner {
  position: relative;
  margin: 0 auto;
  padding: 24px 0;
  width: calc(343 / 375 * 100%);
  max-width: 600px;
}

.sectionL__inner.--bg-white {
  padding-bottom: 12px;
  background-color: var(--white);
}

.titleH2 {
  position: relative;
  text-align: center;
  color: var(--black);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
}

.fv .titleH2 {
  font-size: 13px;
}

.titleH2::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12px;
  width: 36px;
  height: 2px;
  background-color: var(--black);
}

.fv .titleH2::before {
  content: none;
}

.titleH2Inner {
  position: relative;
}

.about .titleH2Inner {
  background: linear-gradient(transparent 50%, var(--cream) 50%);
}

.titleH2Inner::before,
.titleH2Inner::after {
  position: absolute;
  content: "";
  bottom: -2px;
  width: 38px;
  height: 41px;
  /* background-image: url(../img/title_icon.svg); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.titleH2Inner::before {
  left: -60px;
}

.titleH2Inner::after {
  right: -36px;
  transform: scale(-1, 1);
}

.sectionM {
  /* padding: 32px 0; */
}

.titleH3 {
  color: var(--black);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
}

.textM {
  font-size: 16px;
  line-height: 1.4;
}

.noteList {
  margin: 8px auto 0;
}

.about .noteList {
  margin: 24px auto 0;
}

.noteListItem {
  position: relative;
  text-align: left;
  padding-left: 12px;
  font-size: 10px;
}

.noteListItem::before {
  position: absolute;
  content: "※";
  top: 0;
  left: 0;
}

.noteListItem:nth-of-type(n + 2) {
  margin-top: 4px;
}

.linkTextWrapper {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.linkText {
  font-size: 14px;
  line-height: 1.4;
}

@media (min-width: 768px) {

  /* .sectionL {
    padding: 60px 0;
  } */
  .sectionL__inner {
    padding: 36px 0;
    max-width: 960px;
  }

  .sectionL__inner.--bg-white {
    padding-bottom: 36px;
  }

  .titleH2 {
    font-size: 32px;
  }

  .fv .titleH2 {
    /* font-size: 32px; */
    font-size: 26px;
  }

  .titleH2::before,
  .fv .titleH2::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -12px;
    width: 48px;
    height: 2px;
    background-color: var(--black);
  }

  .titleH2Inner::before,
  .titleH2Inner::after {
    bottom: -6px;
    width: 61px;
    height: 68px;
  }

  .titleH2Inner::before {
    left: -96px;
  }

  .titleH2Inner::after {
    right: -66px;
  }

  .sectionM {
    /* padding: 48px 0; */
  }

  /* .sectionM:nth-of-type(n + 2) {
    margin-top: 48px;
  } */
  .titleH3 {
    font-size: 24px;
    line-height: 1.4;
  }

  .textM {
    font-size: 20px;
  }

  .noteList {
    display: flex;
    justify-content: space-around;
    align-items: start;
    flex-direction: column;
    margin: 12px auto 0;
    max-width: 460px;
  }

  .noteListItem {
    font-size: 12px;
  }

  .about .noteList {
    margin: 32px auto 0;
  }

  .note {
    display: inline-block;
  }

  .linkTextWrapper {
    margin-top: 32px;
  }

  .linkText {
    font-size: 16px;
  }
}


/*========================================
common titleH3
========================================*/
.common__titleH3 {
  /* margin-top: 48px; */
  text-align: center;

  color: var(--rakumaBlue);
  font-weight: 600;
  font-size: 20px;

  position: relative;
  display: inline-block;
}

.common__titleH3::before,
.common__titleH3::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 27.45px;
  background-image: url(../img/title_deco.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.common__titleH3::before {
  left: -40px;
}

.common__titleH3::after {
  right: -40px;
}

@media (min-width: 768px) {
  .common__titleH3 {
    /* margin-top: 60px; */
    font-size: 32px;
  }

  .common__titleH3::before,
  .common__titleH3::after {
    width: 28px;
    height: 32px;
  }

  .common__titleH3::before {
    left: -52px;
  }

  .common__titleH3::after {
    right: -52px;
  }
}

/*========================================
card
========================================*/
.cardList {
  display: grid;
  margin-top: 24px;
  row-gap: 24px;
}

.card {
  /* box-shadow: 0px 1px 4px 0.5px rgba(0, 0, 0, 0.15); */
  overflow: hidden;
}

.cardTextBox {
  padding: 16px calc(16 / 343 * 100%) 24px;
  background-color: var(--white);
}

.cardTitle {
  text-align: center;
  color: var(--black);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
}

.cardText {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .cardList {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 36px;
    gap: 36px 24px;
  }

  .card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 10px;
    /* box-shadow: 0px 1px 4px 0.5px rgba(0, 0, 0, 0.15); */
  }

  .cardImage {
    display: block;
  }

  .cardTextBox {
    padding: 24px 24px;
  }

  .cardTitle {
    font-size: 24px;
  }

  .cardText {
    margin-top: 18px;
    font-size: 16px;
  }
}


/*========================================
mv
========================================*/
@media (min-width: 768px) {
  .mv {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: start;
    height: 315px;
    background: linear-gradient(#fce678, #fce678 80%, #ebebeb 81% 100%);
    overflow: hidden;
  }

  .mv__titleH1 {
    /* width: auto; */
    /* height: 303px; */
  }

  .mv__image {
    width: 1020px;
    max-width: inherit;
    height: 315px;
  }
}

/*========================================
fv
========================================*/
.sectionL.fv {
  background-color: var(--mainBg);
}

.fv .sectionL__inner {
  padding-top: 32px;
  text-align: center;
}

.fv__titleLeadWrapper {
  text-align: center;

}

.fv__titleLead {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
}

.fv__titleLead::before,
.fv__titleLead::after {
  position: absolute;
  content: '';
  top: 4px;
  width: 13px;
  height: 13px;
  background: url(../img/common/icon_kaiun.svg) center center / contain no-repeat;
}

.fv__titleLead::before {
  left: -19px;
}

.fv__titleLead::after {
  right: -19px;
}

.fv__title {
  font-size: 20px;
  font-weight: 600;
}

.fv__title .emphasis {
  font-weight: 600;
  color: var(--gold);
}

.fv__text {
  position: relative;
  display: inline-block;
  margin-top: 12px;
  color: var(--black);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}

.fv__text::before,
.fv__text::after {
  position: absolute;
  content: "";
  display: inline-block;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url(../img/common/icon_kaiun.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.fv__text::before {
  left: -24px;
}

.fv__text::after {
  right: -24px;
}

.fv__text .emphasis {
  margin-top: 12px;
  color: var(--gold);
  font-size: 18px;
}

@media (min-width: 768px) {
  .fv.sectionL {
    padding-bottom: 0;
  }

  .fv__text {
    margin-top: 20px;
    font-size: 18px;
  }
}

/*========================================
accordion
========================================*/
.accordion {
  margin: 20px auto 0;
  width: 100%;
  max-width: 360px;
}

.accordion__button {
  display: flex;
  justify-content: center;
  /* 水平方向の中央揃え */
  align-items: center;
  /* 垂直方向の中央揃え */
  width: 100%;
  height: 40px;
  background-color: var(--gold);
  text-align: center;
  cursor: pointer;
  position: relative;
  /* 子要素の位置調整のため */
}

.accordion__buttonText {
  position: relative;
  color: var(--white);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}

.accordion__buttonText::after {
  position: relative;
  /* 親要素であるテキストに対して相対的に配置 */
  content: "";
  display: inline-block;
  margin-left: 8px;
  /* テキストと矢印の間にスペースを追加 */
  top: 50%;
  width: 16px;
  height: 10px;
  background-image: url(../img/fv/icon_button.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: rotate(0deg);
  /* 初期状態は回転なし */
  transform-origin: center;
  /* 回転の中心を画像の中央に設定 */
  transition: transform 0.3s ease;
  /* 回転アニメーション */
}

/* ボタンがアクティブな場合の矢印の回転 */
.accordion__button.active .accordion__buttonText::after {
  transform: rotate(180deg);
  /* 上向きに回転 */
}

.accordion__content {
  max-height: 0;
  /* 初期状態では非表示 */
  overflow: hidden;
  /* コンテンツがはみ出さないようにする */
  /* background-color: var(--white); */
  /* padding: 0 16px; */
  /* 初期状態ではパディングをリセット */
  transition: all 0.8s ease;
  /* すべてのプロパティを均一にアニメーション */
}

.accordion__content.open {
  max-height: 1000px;
  /* 十分大きな値を設定 */
  padding: 24px 16px;
  /* 開いた状態のパディング */
  padding: 0.00001px 0;
  /* 開いた状態のパディング */
}

.accordion__list {
  background-color: var(--white);
  padding: 24px 16px;
  /* 開いた状態のパディング */
}

.accordion__item {
  text-align: center;
}

.accordion__item:nth-of-type(n + 2) {
  margin-top: 16px;
}

.accordion__term {
  position: relative;
  display: inline-block;
  color: var(--gold);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.03em;
}

.accordion__term::before,
.accordion__term::after {
  position: absolute;
  content: "";
  display: inline-block;
  top: 50%;
  transform: translateY(-50%);
  width: 90px;
  height: 9px;
  background-image: url(../img/fv/deco_title.svg);
  background-repeat: repeat;
  background-position: center;
  background-size: contain;
}

.accordion__term::before {
  left: -100px;
}

.accordion__term::after {
  right: -100px;
}

.accordion__description {
  text-align: left;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .accordion {
    margin: 20px auto 0;
    max-width: 714px;
  }

  .accordion__buttonText {
    font-size: 20px;
    letter-spacing: 0.05em;
  }

  .accordion__content {
    padding: 0;
    /* 初期状態ではパディングをリセット */
  }

  /* .accordion__content.open {
    padding: 32px;
  } */
  .accordion__item:nth-of-type(n + 2) {
    margin-top: 24px;
  }

  .accordion__term {
    font-size: 20px;
    /* line-height: 1.3;
    letter-spacing: 0.03em; */
  }

  .accordion__term::before,
  .accordion__term::after {
    position: absolute;
    content: "";
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 10px;
    background-image: url(../img/fv/deco_title.svg);
    background-repeat: repeat;
    background-position: center;
    background-size: contain;
  }

  .accordion__term::before {
    left: -130px;
  }

  .accordion__term::after {
    right: -130px;
  }

  .accordion__description {
    margin-top: 16px;
    font-size: 14px;
  }

  .accordion .noteList {
    margin-top: 12px !important;
    max-width: initial;
  }
}

/*========================================
nav
========================================*/
.sticky {
  position: relative;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav__nav {
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  background: var(--brown);
}

.nav__list {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

.nav__listItem {
  position: relative;
  width: 25%;
}

.nav__link {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 62px;
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

.nav__linkText {
  position: relative;
  display: inline-block;
  width: fit-content;
  padding-bottom: 10px;
}

.nav__link .nav__linkText::before {
  position: absolute;
  content: "";
  display: block;
  margin: auto;
  right: 0;
  left: 0;
  bottom: -3px;
  width: 12px;
  height: 7px;
  background-image: url('data:image/svg+xml,<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0.707107L5.65685 6.36396L11.3137 0.707107L10.6066 0L5.65685 4.94975L0.707107 0L0 0.707107Z" fill="white"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.nav__link--active .nav__linkText::before {
  content: "";
  position: absolute;
  bottom: -12px;
  margin: auto;
  right: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--white);
  border-left: 1px solid var(--white);
  transform: rotate(45deg);
}

.nav__listItem+.nav__listItem::before {
  content: "";
  pointer-events: none;
  display: block;
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  border-left: 1px solid var(--white);
  height: calc(100% - 44px);
  z-index: 2;
}

@media (min-width: 768px) {


  .nav__list {
    max-width: 960px;
  }

  .nav__link {
    height: 80px;
    font-size: 16px;
  }

  .nav__linkText {
    padding-bottom: 15px;
  }

  .nav__link .nav__linkText::before {
    bottom: -13px;
    width: 17px;
    height: 18px;
  }

  .nav__link--active .nav__linkText::before {
    bottom: -8px;
    width: 17px;
    height: 18px;
  }

  .nav__listItem+.nav__listItem::before {
    height: 48px;
    /* transform: translateY(-50%); */
  }
}

/*========================================
navNav
========================================*/
.floatNav {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: var(--black);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  transform: translateY(-1000px);
  width: 100%;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  pointer-events: none;
}

.floatNav.slide_in {
  pointer-events: auto;
}

@media (min-width: 768px) {
  .floatNav {
    width: 100%;
    border-top: 2px solid var(--black);
    border-bottom: 2px solid var(--black);
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
  }
}

/* animation */
@keyframes slide_in {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide_in {
  animation: slide_in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide_out {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-500px);
    opacity: 0;
  }
}

.slide_out {
  animation: slide_out 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

/*========================================
item
========================================*/
.sectionL.item {
  background-color: var(--mainBg);
}

.item__read {
  margin-top: 16px;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .item .sectionL__inner {
    /* padding: 80px 0; */
    max-width: 714px;
  }

  .item__read {
    margin-top: 24px;
    font-size: 18px;
  }
}

/*========================================
item > sectionM
========================================*/
.sectionM {
  /* margin-top: 24px; */
  margin-top: 45px;
}

.sectionM:nth-of-type(1) {
  position: relative;
  margin-top: 60px;
}

.sectionM:nth-of-type(1)::before {
  content: "";
  position: absolute;
  top: -43px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 20px;
  background-color: var(--gold);
  border-radius: 100vh;
}

.item__titleM {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
}

.item__readM {
  margin-top: 6px;
  text-align: center;
  font-size: 14px;
}

.item__readM .emphasis {
  font-weight: 600;
}

.yellow .item__readM .emphasis {
  color: var(--gold);
}

.green .item__readM .emphasis {
  color: var(--green);
}

.red .item__readM .emphasis {
  color: var(--red);
}

.item__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 16px;
  gap: 24px calc(8 / 343 * 100%);
}

.item__card {
  /* width: calc((343 - (8 * 1)) / 2 / 343 * 100%); */
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border: 1px solid #EBEBEB;
}

.item__link {
  position: relative;
  padding: 8px;
}

.item__link::after {
  position: absolute;
  content: "";
  display: block;
  bottom: 4px;
  right: 0px;
  transform: rotate(135deg);
  border-bottom: 7.5px solid var(--black);
  border-right: 7.5px solid transparent;
  border-left: 7.5px solid transparent;
}

.item__cap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
}

.item__capText {
  text-align: center;
  font-weight: 600;
  font-size: 12px;
}

@media (min-width: 768px) {
  .sectionM {
    margin-top: 72px;
  }

  .sectionM:nth-of-type(1) {
    margin-top: 80px;
  }

  .sectionM:nth-of-type(1)::before {
    top: -55px;
  }

  .sectionM {
    margin-top: 30px;
  }

  .item__titleM {
    font-size: 24px;
  }

  .item__readM {
    margin-top: 12px;
    font-size: 16px;
  }

  .item__list {
    margin-top: 43px;
    gap: 24px 16px;
  }

  .item__link {
    padding-top: 24px;
    padding-bottom: 20px;
  }

  .item__link::after {
    bottom: 4px;
    right: -4px;
    border-bottom: 15px solid #333;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
  }

  .item__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .item__picture {
    display: inline-block;
    width: 140px;
  }

  .item__cap {
    margin-top: 36px;
    height: 46px;
  }

  .item__capText {
    font-size: 16px;
  }
}

/*========================================
ranking
========================================*/
.sectionL.ranking {
  background-color: var(--secondaryBg);

  .sectionM {
    margin-top: 24px;
  }

  .sectionM:nth-of-type(1) {
    margin-top: 60px;
  }
}

@media screen and (min-width: 768px) {
  .sectionL.ranking {
    padding-bottom: 0;

    .sectionM:nth-of-type(1) {
      margin-top: 80px;
    }

    .sectionM {
      margin-top: 36px;
    }

    .noteList {
      max-width: 620px;
    }
  }


}

/*========================================
ranking > sectionM
========================================*/

.ranking__titleM {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
}

.ranking__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-inline: auto;
  margin-top: 24px;
  margin-bottom: 16px;
  gap: 8px;
  max-width: 713px;
}

.ranking__card {
  position: relative;
  display: grid;
  background-color: var(--white);
  border: 1px solid #ebebeb;
}

.ranking__link {
  position: relative;
  width: 100%;
  height: 100%;
}

.ranking__link::after {
  position: absolute;
  content: "";
  display: block;
  bottom: 3px;
  right: -1px;
  transform: rotate(135deg);
  border-bottom: 7px solid var(--black);
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}

.ranking__figure {
  position: relative;
  padding: 8px;
  width: 100%;
  height: 100%;
}

.ranking__image {
  margin-inline: auto;
  max-width: 153px;
}

.ranking__figure::before {
  z-index: 10;
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: 0;
  width: 22px;
  height: 26px;
}

.ranking__card:nth-of-type(1) .ranking__figure::before {
  background-color: var(--gold);
}

.ranking__card:nth-of-type(2) .ranking__figure::before {
  background-color: #b6b6b6;
}

.ranking__card:nth-of-type(3) .ranking__figure::before {
  background-color: #6a0024;
}

.ranking__figure::after {
  z-index: 11;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 22px;
  height: 26px;
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
}

.ranking__card:nth-of-type(1) .ranking__figure::after {
  content: "1";
}

.ranking__card:nth-of-type(2) .ranking__figure::after {
  content: "2";
}

.ranking__card:nth-of-type(3) .ranking__figure::after {
  content: "3";
}

.ranking__cap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.ranking__capBrand {
  text-align: center;
  font-weight: 600;
  font-size: 12px;
}

.ranking__card:nth-of-type(2) .ranking__capBrand,
.ranking__card:nth-of-type(3) .ranking__capBrand {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {

  .sectionL__inner {
    /* padding: 80px 0; */
    max-width: 714px;
  }

  .ranking__titleM {
    font-size: 24px;
  }

  .ranking__list {
    flex-wrap: nowrap;
    margin-top: 20px;
    margin-bottom: 24px;
    gap: 16px 24px;
  }

  .ranking__link::after {
    position: absolute;
    content: "";
    display: block;
    transform: rotate(135deg);
    bottom: 4px;
    right: -4px;
    border-bottom: 15px solid #333;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
  }

  .ranking__figure {
    padding: 34px 18px 27px;
  }

  .ranking__figure::before {
    width: 44px;
    height: 52px;
  }

  .ranking__figure::after {
    width: 44px;
    height: 52px;
    font-size: 24px;
  }

  .ranking__cap {
    margin-top: 24px;
  }

  .ranking__capBrand {
    margin-top: 12px;
    font-size: 16px;
  }

}

/*========================================
searchBrand
========================================*/
.sectionL.searchBrand {
  background-color: var(--secondaryBg);
}

.searchBrand__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 32px;
  margin-bottom: 16px;
  gap: 12px calc(8 / 343 * 100%);
}

.searchBrand__listItem {
  display: grid;
  place-items: center;
  background-color: #fff;
  border: 1px solid var(--gold);
}

.searchBrand__btn {
  display: grid;
  grid-template-columns: 1fr 71px;
  place-items: center;
  width: 100%;
  background-color: var(--gold);
  /* border-radius: 2px; */
  text-align: center;
  color: var(--white);
  font-weight: 600;
}

.searchBrand__listItemText {
  display: grid;
  place-items: center;
  padding: 4px 12px 4px 4px;
  font-size: 12px;
  white-space: normal;
  width: 100%;
  height: 45px;
  letter-spacing: 0;
}

.searchBrand__listItemImage {
  position: relative;
  display: grid;
  place-items: center;
}

.searchBrand__listItemImage::before {
  position: absolute;
  content: '';
  top: 50%;
  transform: translateY(-50%);
  left: -12px;
  width: 10px;
  height: 10px;
  background: url('data:image/svg+xml,<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.63492 10L5.71428 5L0.63492 1.64118e-06L0 0.625002L4.44444 5L0 9.375L0.63492 10Z" fill="white"/></svg>')center center / contain no-repeat;
}

/* .searchBrand__listItemImage img {
    border-radius: 0 2px 2px 0;
  } */

@media (min-width: 768px) {
  .searchBrand .sectionL__inner {
    max-width: 713px;
  }

  .searchBrand__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 11px;
    margin-top: 32px;
  }

  /* .searchBrand__listItem {
    padding: 11px;
  } */

  .searchBrand__listItemImage::before {
    left: -16px;
    width: 15px;
    height: 13px;
  }

  .searchBrand__btn {
    grid-template-columns: 1fr 98px;
  }

  /* .searchBrand__listItemImage img {
    border-radius: 0 3px 3px 0;
  } */

  .searchBrand__listItemText {
    font-size: 16px;

  }

  .searchBrand .noteList {
    margin-top: 24px;
    max-width: 100%;
    align-items: center;

  }
}

@media screen and (max-width: 767px) {
  .searchBrand__listItemText.--font-small .upperCase {
    margin-top: -5px;
  }

}

@media screen and (max-width: 375px) {
  .searchBrand__listItemText.--font-small {
    font-size: 11px;
  }
}

/*========================================
searchCategory
========================================*/
.sectionL.searchCategory {
  background-color: var(--mainBg);
}

.searchCategory .common__title {
  font-size: 24px;
}

.searchCategory__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 32px;
  gap: 8px calc(8 / 343 * 100%);
}

.searchCategory__card {
  background-color: var(--white);
}

.searchCategory__link {
  position: relative;
  display: block;
  z-index: 3;
  /* リンクを最前面に配置 */
}

.searchCategory__link::after {
  position: absolute;
  content: "";
  bottom: 3px;
  right: 0;
  transform: rotate(135deg);
  border-bottom: 7px solid #333;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  z-index: 2;
}

.searchCategory__figure {
  position: relative;
  /* 子要素の絶対位置指定の基準にする */
  display: flex;
  justify-content: center;
  align-items: center;
}

.searchCategory__figure::before {
  /* content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(51, 51, 51, 0.3);
  z-index: 1; */
}

.searchCategory__image {
  width: 100%;
  height: auto;
  display: block;
}

.searchCategory__cap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  z-index: 2;
}

@media (min-width: 768px) {
  .searchCategory .sectionL__inner {
    max-width: 496px;
  }

  .searchCategory__list {
    margin-top: 32px;
    gap: 16px;
  }

  .searchCategory__link {
    position: relative;
    z-index: 3;
    /* リンクを最前面に配置 */
  }

  .searchCategory__link::after {
    bottom: 4px;
    right: -4px;
    border-bottom: 15px solid #333;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
  }

  .searchCategory__cap {
    font-size: 16px;
  }

  .searchCategory .noteList {
    max-width: 540px;
  }

}

/*========================================
searchItem
========================================*/
.category__subTitle {
  text-align: center;
}

.sectionL.searchItem {
  background-color: var(--mainBg);
}

.searchItem .common__title {
  position: relative;
  display: inline-block;
  font-size: 20px;
}


@media (min-width: 768px) {
  .searchItem .sectionL__inner {
    /* padding: 80px 0; */
    max-width: 680px;
  }

  .searchItem .common__title {
    font-size: 28px;
  }

  .searchItem .common__title::before {
    left: -36px;
  }

  .searchItem .common__title::after {
    right: -36px;
  }
}

.search {
  .search__inner {
    width: calc(343 / 375 * 100%);
    margin-inline: auto;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .search__form {
    background-color: var(--gray);
    padding: 20px;

    select,
    input {
      outline: 0;
      cursor: pointer;
    }

    select:focus,
    input:focus {
      border: 1px solid var(--orange);
    }
  }

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

  .search__formTitle {
    font-weight: 600;
    text-align: center;
    line-height: 2;
    margin-inline: auto;
  }

  .search__formList {
    margin-top: 8px;
    display: grid;
    row-gap: 16px;

    .hide {
      display: none;
    }
  }

  .search__formLabel {
    display: block;
    font-size: 12px;
    font-weight: 600;
    position: relative;
    line-height: 1;
    cursor: pointer;

    &::after {
      content: "";
      display: block;
      position: absolute;
      right: 16px;
      bottom: 16px;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid var(--orange);
      width: 10px;
      height: 6px;
    }
  }

  .search__formPrice {
    display: grid;
    grid-template-columns: auto 12px auto;
    column-gap: 16px;
    margin-top: 8px;
  }

  .search__formPriceRange {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    padding-top: 6px;
  }

  .search__formPriceNote {
    font-size: 12px;
    margin-top: 4px;
  }

  .search__formSelect,
  .search__formInput {
    color: var(--main-textColor);
    border: 1px solid var(--form-color);
    width: 100%;
    background-color: var(--white);
    margin-top: 6px;
    font-size: 12px;
    line-height: 1;
    color: #878787;

  }


  .search__formSelect {
    padding: 16px;
  }

  .search__formInput {
    padding: 6px 16px;
  }

  .search__optionWrapper {
    margin-inline: auto;
    max-width: 348px;
  }

  .search__formOption {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 12px;
    margin-top: 30px;
  }

  .search__formOptionCheck {
    display: grid;
    grid-template-columns: 20px auto;
    column-gap: 6px;
    font-size: 12px;
    line-height: 20px;
    position: relative;
    white-space: nowrap;
    letter-spacing: 0.01em;
    cursor: pointer;

    &::after {
      content: '';
      position: absolute;
      display: block;
      width: 20px;
      height: 20px;
      border: 2px solid var(--orange);
      border-radius: 2px;
      left: 0px;
      top: 0;
      bottom: 0;
      margin: auto;
      z-index: 1;
    }
  }

  .search__formOptionCheckBox {
    accent-color: var(--orange);
    width: 20px;
    height: 20px;
    border-radius: 2px;
    appearance: none;
    background-color: var(--white);

    &:checked {
      background-color: var(--orange);
      background-image: url('data:image/svg+xml,<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.675781 5.48438L5.92578 10.2969L14.6758 0.671875" stroke="white" stroke-width="2"/></svg>');
      background-position: center;
      background-size: 16px 16px;
      background-repeat: no-repeat;
    }
  }

  .search__formOptionAbout {
    display: block;
    color: var(--orange);
    font-size: 12px;
    line-height: 20px;
    position: relative;
    padding-left: 24px;
    white-space: nowrap;
    letter-spacing: 0.01em;

    &::before {
      content: "";
      position: absolute;
      left: 0px;
      top: 0;
      bottom: 0;
      margin: auto;
      display: block;
      width: 20px;
      height: 20px;
      border: 1px solid var(--orange);
      border-radius: 50%;
      background-color: var(--white);
    }

    &::after {
      content: "?";
      position: absolute;
      font-size: 12px;
      left: 0px;
      top: 0;
      bottom: 0;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 1;
      width: 20px;
      height: 12px;
      text-align: center;
    }
  }

  .search__formWord {
    margin-top: 24px;
  }

  .search__formBtns {
    display: grid;
    grid-template-columns: calc(100 / 300 * 100%) auto;
    column-gap: 24px;
    padding-top: 24px;
  }

  .search__formBtnReset {
    display: block;
    background-color: var(--gold);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 20px;
    padding: 10px 0;
  }

  .search__formBtnSubmit {
    display: block;
    background-color: var(--orange);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 20px;
    padding: 10px 24px 10px 0;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 24px;
      margin: auto;
      width: 18px;
      height: 18px;
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjE1NzExIDguNzA1OTZDMy4xNTcxMSA4LjA4MzkgMy4yNzk2NCA3LjQ2NzkzIDMuNTE3NjkgNi44OTMyMkMzLjc1NTc0IDYuMzE4NTEgNC4xMDQ2NiA1Ljc5NjMyIDQuNTQ0NTMgNS4zNTY0NUM0Ljk4NDM5IDQuOTE2NTkgNS41MDY1OCA0LjU2NzY3IDYuMDgxMjkgNC4zMjk2MkM2LjY1NiA0LjA5MTU3IDcuMjcxOTcgMy45NjkwNCA3Ljg5NDAzIDMuOTY5MDRDOC41MTYxIDMuOTY5MDQgOS4xMzIwNiA0LjA5MTU3IDkuNzA2NzcgNC4zMjk2MkMxMC4yODE1IDQuNTY3NjcgMTAuODAzNyA0LjkxNjU5IDExLjI0MzUgNS4zNTY0NUMxMS42ODM0IDUuNzk2MzIgMTIuMDMyMyA2LjMxODUxIDEyLjI3MDQgNi44OTMyMkMxMi41MDg0IDcuNDY3OTMgMTIuNjMxIDguMDgzOSAxMi42MzEgOC43MDU5NkMxMi42MzEgOS45NjIyNyAxMi4xMzE5IDExLjE2NzEgMTEuMjQzNSAxMi4wNTU1QzEwLjM1NTIgMTIuOTQzOCA5LjE1MDM0IDEzLjQ0MjkgNy44OTQwMyAxMy40NDI5QzYuNjM3NzIgMTMuNDQyOSA1LjQzMjg3IDEyLjk0MzggNC41NDQ1MyAxMi4wNTU1QzMuNjU2MTggMTEuMTY3MSAzLjE1NzExIDkuOTYyMjcgMy4xNTcxMSA4LjcwNTk2Wk03Ljg5NDAzIDAuODExMDk2QzYuNjYyOTYgMC44MTEyMjYgNS40NDg5NyAxLjA5OTI1IDQuMzQ5MDUgMS42NTIxNkMzLjI0OTEzIDIuMjA1MDcgMi4yOTM3NSAzLjAwNzU1IDEuNTU5MjIgMy45OTU0OUMwLjgyNDcwNCA0Ljk4MzQzIDAuMzMxMzk5IDYuMTI5NDUgMC4xMTg3MTQgNy4zNDIwMkMtMC4wOTM5NzE3IDguNTU0NTggLTAuMDIwMTQyNCA5LjgwMDA4IDAuMzM0MzA0IDEwLjk3OUMwLjY4ODc1IDEyLjE1OCAxLjMxMzk5IDEzLjIzNzcgMi4xNjAwOCAxNC4xMzE5QzMuMDA2MTcgMTUuMDI2MiA0LjA0OTY2IDE1LjcxMDIgNS4yMDcyMSAxNi4xMjkzQzYuMzY0NzUgMTYuNTQ4NCA3LjYwNDI2IDE2LjY5MDkgOC44MjY3MyAxNi41NDU2QzEwLjA0OTIgMTYuNDAwMyAxMS4yMjA3IDE1Ljk3MTIgMTIuMjQ3OCAxNS4yOTI0TDE3LjMwMzcgMjAuMzQ5M0MxNy41OTk5IDIwLjY0NTUgMTguMDAxNiAyMC44MTE5IDE4LjQyMDUgMjAuODExOUMxOC44Mzk0IDIwLjgxMTkgMTkuMjQxMiAyMC42NDU1IDE5LjUzNzQgMjAuMzQ5M0MxOS44MzM2IDIwLjA1MzEgMjAgMTkuNjUxNCAyMCAxOS4yMzI1QzIwIDE4LjgxMzUgMTkuODMzNiAxOC40MTE4IDE5LjUzNzQgMTguMTE1NkwxNC40ODA1IDEzLjA1OTdDMTUuMjY3MSAxMS44Njk4IDE1LjcxNjYgMTAuNDg5IDE1Ljc4MTMgOS4wNjQwNkMxNS44NDYgNy42MzkxMiAxNS41MjM1IDYuMjIzMjYgMTQuODQ3OSA0Ljk2Njk2QzE0LjE3MjQgMy43MTA2NiAxMy4xNjkxIDIuNjYwODYgMTEuOTQ0NyAxLjkyOTFDMTAuNzIwMiAxLjE5NzM1IDkuMzIwNDUgMC44MTA5OTcgNy44OTQwMyAwLjgxMTA5NloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }

  @media (min-width: 768px) {
    .search__inner {
      width: 100%;
      max-width: 713px;
      padding-top: 36px;
      padding-bottom: 36px;
    }

    .search__formList {
      row-gap: 4px;
    }

    .searchFormWrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .search__formInput {
      padding: 10px 16px;
    }

    .search__formLabel {
      font-size: 14px;
    }

    .search__formOption {
      grid-template-columns: auto 100%;
      margin-top: 16px;
    }

    .search__formOptionCheck,
    .search__formOptionAbout {
      font-size: 14px;
    }

    .search__formInner {
      max-width: 400px;
    }

    .search__formWord {
      margin-top: 14px;
    }

    .search__formBtnReset,
    .search__formBtnSubmit {
      font-size: 16px;
      padding-top: 17px;
      padding-bottom: 17px;
    }
  }
}

@media screen and (max-width: 767px) {
  .search__formInner {

    &+.search__formInner {
      margin-top: 24px;
    }
  }

}


/*
========================================
common / search
========================================
/* SP */
.inputSearch {

  .inputSearch__inner {
    width: 100%;
  }

  .inputSearch__form {
    display: flex;
    justify-content: space-between;
    height: 48px;
    text-align: left;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--black);
    box-shadow: 0px 4px 10px 1px var(--shadow);
  }

  .inputSearch__input {
    padding: 8px;
    width: calc(100% - 38px);
    font-size: 13px;
    line-height: 1em;
    background-color: #ffffff;
  }

  .inputSearch__input:focus {
    outline: none;
  }

  .inputSearch__input::placeholder {
    color: #aaaaaa;
  }

  .inputSearch__btn {
    position: relative;
    display: block;
    width: 48px;
    height: 100%;
    background-color: var(--main-textColor);
  }

  .inputSearch__btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjE1NzExIDguNzA1OTZDMy4xNTcxMSA4LjA4MzkgMy4yNzk2NCA3LjQ2NzkzIDMuNTE3NjkgNi44OTMyMkMzLjc1NTc0IDYuMzE4NTEgNC4xMDQ2NiA1Ljc5NjMyIDQuNTQ0NTMgNS4zNTY0NUM0Ljk4NDM5IDQuOTE2NTkgNS41MDY1OCA0LjU2NzY3IDYuMDgxMjkgNC4zMjk2MkM2LjY1NiA0LjA5MTU3IDcuMjcxOTcgMy45NjkwNCA3Ljg5NDAzIDMuOTY5MDRDOC41MTYxIDMuOTY5MDQgOS4xMzIwNiA0LjA5MTU3IDkuNzA2NzcgNC4zMjk2MkMxMC4yODE1IDQuNTY3NjcgMTAuODAzNyA0LjkxNjU5IDExLjI0MzUgNS4zNTY0NUMxMS42ODM0IDUuNzk2MzIgMTIuMDMyMyA2LjMxODUxIDEyLjI3MDQgNi44OTMyMkMxMi41MDg0IDcuNDY3OTMgMTIuNjMxIDguMDgzOSAxMi42MzEgOC43MDU5NkMxMi42MzEgOS45NjIyNyAxMi4xMzE5IDExLjE2NzEgMTEuMjQzNSAxMi4wNTU1QzEwLjM1NTIgMTIuOTQzOCA5LjE1MDM0IDEzLjQ0MjkgNy44OTQwMyAxMy40NDI5QzYuNjM3NzIgMTMuNDQyOSA1LjQzMjg3IDEyLjk0MzggNC41NDQ1MyAxMi4wNTU1QzMuNjU2MTggMTEuMTY3MSAzLjE1NzExIDkuOTYyMjcgMy4xNTcxMSA4LjcwNTk2Wk03Ljg5NDAzIDAuODExMDk2QzYuNjYyOTYgMC44MTEyMjYgNS40NDg5NyAxLjA5OTI1IDQuMzQ5MDUgMS42NTIxNkMzLjI0OTEzIDIuMjA1MDcgMi4yOTM3NSAzLjAwNzU1IDEuNTU5MjIgMy45OTU0OUMwLjgyNDcwNCA0Ljk4MzQzIDAuMzMxMzk5IDYuMTI5NDUgMC4xMTg3MTQgNy4zNDIwMkMtMC4wOTM5NzE3IDguNTU0NTggLTAuMDIwMTQyNCA5LjgwMDA4IDAuMzM0MzA0IDEwLjk3OUMwLjY4ODc1IDEyLjE1OCAxLjMxMzk5IDEzLjIzNzcgMi4xNjAwOCAxNC4xMzE5QzMuMDA2MTcgMTUuMDI2MiA0LjA0OTY2IDE1LjcxMDIgNS4yMDcyMSAxNi4xMjkzQzYuMzY0NzUgMTYuNTQ4NCA3LjYwNDI2IDE2LjY5MDkgOC44MjY3MyAxNi41NDU2QzEwLjA0OTIgMTYuNDAwMyAxMS4yMjA3IDE1Ljk3MTIgMTIuMjQ3OCAxNS4yOTI0TDE3LjMwMzcgMjAuMzQ5M0MxNy41OTk5IDIwLjY0NTUgMTguMDAxNiAyMC44MTE5IDE4LjQyMDUgMjAuODExOUMxOC44Mzk0IDIwLjgxMTkgMTkuMjQxMiAyMC42NDU1IDE5LjUzNzQgMjAuMzQ5M0MxOS44MzM2IDIwLjA1MzEgMjAgMTkuNjUxNCAyMCAxOS4yMzI1QzIwIDE4LjgxMzUgMTkuODMzNiAxOC40MTE4IDE5LjUzNzQgMTguMTE1NkwxNC40ODA1IDEzLjA1OTdDMTUuMjY3MSAxMS44Njk4IDE1LjcxNjYgMTAuNDg5IDE1Ljc4MTMgOS4wNjQwNkMxNS44NDYgNy42MzkxMiAxNS41MjM1IDYuMjIzMjYgMTQuODQ3OSA0Ljk2Njk2QzE0LjE3MjQgMy43MTA2NiAxMy4xNjkxIDIuNjYwODYgMTEuOTQ0NyAxLjkyOTFDMTAuNzIwMiAxLjE5NzM1IDkuMzIwNDUgMC44MTA5OTcgNy44OTQwMyAwLjgxMTA5NloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .inputSearch__errText {
    display: none;
    font-size: 16px;
    color: #ff0000;
    text-align: center;
    padding-top: 5px;
  }

  /* PC */
  @media (min-width: 768px) {
    .inputSearch__inner {
      max-width: 680px;
      margin: 0 auto;
    }

    .inputSearch__form {
      margin: 0 auto;
      height: 56px;
    }

    .inputSearch__input {
      padding: 10px 10px 10px 20px;
      font-size: 16px;
      width: calc(100% - 42px);
    }

    .inputSearch__btn {
      width: 56px;
    }

    .inputSearch__btn::after {
      content: "";
      width: 25px;
      height: 25px;
    }

    .inputSearch__errText {
      font-size: 20px;
    }
  }
}

/*========================================
common
========================================*/
.common__title {
  text-align: center;
  font-weight: 600;
  font-size: 20px;
}

.common__btn {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  margin: 24px auto 0;
  padding: 8px 16px;
  /* width: calc(280 / 343 * 100%); */
  max-width: 360px;
  /* border-radius: 2px; */
  height: 60px;
  background-color: var(--black);
  text-align: center;
  color: var(--white);
  font-size: 20px;
  font-weight: 600;
}

.common__btn::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: url('data:image/svg+xml,<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.875 14L7.875 7L0.875 2.10752e-06L0 0.875002L6.125 7L0 13.125L0.875 14Z" fill="white"/></svg>')center center / contain no-repeat;
  position: absolute;
  right: 16px;
  top: 0;
  bottom: 0;
  margin: auto;
}

@media (min-width: 768px) {
  .common__title {
    font-size: 28px;
  }

  .common__btn {
    margin: 36px auto 0;
    font-size: 20px;
    width: 468px;
    max-width: 468px;
    height: 78px;

  }

  .common__btn::after {
    width: 16px;
    height: 16px;
    right: 24px;
  }
}

.yellow .common__btn {
  background-color: var(--gold);
}

.green .common__btn {
  background-color: var(--green);
}

/* ========================
personal
======================== */
.personal {
  padding-bottom: 24px;
  background-color: var(--mainBg);
}

.personal__list {
  margin-inline: auto;
  padding: 0 16px 16px 16px;
  width: calc(360 / 390 * 100%);
  max-width: 640px;
}

.personal__listItem {
  &+.personal__listItem {
    margin-top: 24px;
  }
}

.personal__listItemHead {
  margin-bottom: 18px;
  padding: 2px 4px;
  font-weight: 600;
  text-align: center;
  color: var(--white);
  border-radius: 10px;

}

.personal__listItemtext {
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  text-align: center;
}

.personal__listItemImage {
  margin-inline: auto;
}


.personal__linkList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  gap: 12px;
  padding: 0 12px 8px;
  border-radius: 0 12px 0 12px;
  aspect-ratio: 300 / 175;
}

.personal__listItem.--spring {
  .personal__listItemHead {
    background-color: var(--pastelPink);
  }

  .personal__linkList {
    background: url(../img/personal/bg_personal01.png)center center / contain no-repeat;
  }
}

.personal__listItem.--summer {
  .personal__listItemHead {
    background-color: var(--pastelBlue);
  }

  .personal__linkList {
    background: url(../img/personal/bg_personal02.png)center center / contain no-repeat;
  }
}

.personal__listItem.--autumn {
  .personal__listItemHead {
    background-color: var(--pastelOrange);
  }

  .personal__linkList {
    background: url(../img/personal/bg_personal03.png)center center / contain no-repeat;
  }
}

.personal__listItem.--winter {
  .personal__listItemHead {
    background-color: var(--pastelPurple);
  }

  .personal__linkList {
    background: url(../img/personal/bg_personal04.png)center center / contain no-repeat;
  }
}


.personal__linkListLink {
  display: block;
  text-align: center;
  transition: .3s ease-in-out;
}

.personal__linkListLink:hover {
  text-decoration: underline;
  opacity: 1;
  transition: .3s ease-in-out;
}

.personal__linkListText {
  position: relative;
  margin-top: 8px;
  margin-inline: auto;
  padding: 3px 4px 2px;
  border-radius: 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  max-width: 200px;
  background-color: #fff;
}

.personal__linkListText::after {
  position: absolute;
  content: '';
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 10px;
  height: 11px;
  background: url('data:image/svg+xml,<svg width="8" height="17" viewBox="0 0 8 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.888889 17L8 8.5L0.888889 -1.58064e-07L0 1.0625L6.22222 8.5L0 15.9375L0.888889 17Z" fill="%23333333"/></svg>') center center / contain no-repeat;
}

@media screen and (min-width: 768px) {
  .personal {
    padding-bottom: 24px;
  }

  .personal__list {
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
    padding: 0;
  }

  .personal__listItem {
    &+.personal__listItem {
      margin-top: 0;
    }
  }

  .personal__listItemHead {
    font-size: 16px;
  }

  .personal__listItemtext {
    font-size: 16px;
  }

}

/* ========================
floatingBanner
======================== */
.floatingBanner {
  position: fixed;
  /* display: none; */
  bottom: 115px;
  right: 10px;
  z-index: 100;

}

.floatingBannerContent {
  position: relative;
  width: 191px;

  &+.floatingBannerContent {
    margin-top: 20px;
  }
}

.floatingBanner__link {
  position: relative;
  z-index: 100;
}

.js_closeButton {
  position: absolute;
  top: -11px;
  right: -6px;
  width: 28px;
  height: 28px;
  z-index: 120;
}

.js_closeButton:hover {
  opacity: 1;
}

@media screen and (min-width: 768px) {
  .floatingBanner {
    right: 15px;
  }

  .floatingBannerContent {
    width: 230px;
  }

  .js_closeButton {
    top: -11px;
    right: -7px;
    width: 30px;
    height: 30px;
  }

}

/* animation */
@keyframes slide_content_in {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide_content_in {
  animation: slide_content_in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide_content_out {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(30px);
    opacity: 0;
  }
}

.slide_content_out {
  animation: slide_content_out .3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}