@charset "Shift_JIS";

/*==========================================
  Base style（Shift_JISシフトジス）
=============================================*/
@media not print {
  @media not all and (min-width: 768px) {

  }
}
@media all and (min-width: 768px), print {

}

/*------------------------------
  Title
--------------------------------*/
/* -title01 */

/*------------------------------
  Text
--------------------------------*/
/* text01 */
.text01 {
  font-size: var(--text-x-large);
  font-weight: 700;
}
/* text02 */
.text02 {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}
/* underline-text01 */
.underline-text01 {
  background: linear-gradient(transparent 50%, var(--color-cv-yellow) 50%);
  color: var(--color-mufg-red);
  font-weight: 700;
  margin-inline: 0.2em;
  padding-bottom: 0.05em;
}
@media all and (min-width: 768px), print {
  /* text02 */
  .text02 {
    font-size: 2.8rem;
  }
}

/*------------------------------
  List
--------------------------------*/
/* list01 */
.list01 {
  display: grid;
  row-gap: var(--spacing-16);
}
.list01:not(:first-child) {
  margin-top: var(--spacing-20);
}
.list01__item {
  column-gap: var(--spacing-8);
  display: grid;
  font-size: var(--text-medium);
  font-weight: 700;
  grid-template-columns: 1em minmax(0, 1fr);
}
.list01__marker {
  color: var(--color-mufg-red);
}
@media all and (min-width: 768px), print {
  /* list01 */
  .list01 {
    display: flex;
    flex-wrap: wrap;
  }
  .list01__item {
    column-gap: var(--spacing-12);
  }
  .list01__item:not(:last-child) {
    margin-right: var(--spacing-40);
  }
  :where(.list01.list01--narrow-margin) .list01__item:not(:last-child) {
    margin-right: var(--spacing-20);
  }
}

/*------------------------------
  Detail
--------------------------------*/
/* detail01 */
.detail01 {
  display: grid;
  row-gap: 8px;
}
.detail01__title {
  font-size: var(--text-medium);
  font-weight: 700;
  text-align: center;
}
.detail01__title span {
  background: linear-gradient(transparent 30%, var(--color-cv-yellow) 70%);
  padding-bottom: 0.05em;
}
.detail01__catch {
  font-size: var(--text-medium);
  text-align: center;
}
.detail01__group {
  display: grid;
  gap: var(--spacing-20) 0;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin-top: 20px;
}
.detail01__thumnail img {
  margin-inline: auto;
  width: 192px;
}
@media all and (min-width: 768px), print {
  .detail01 {
    padding: 0 18px;
    row-gap: 9px;
  }
  .detail01__group {
    gap: 0 var(--spacing-16);
    grid-template-columns: 192px 1fr;
  }
  .detail01__thumnail img {
    width: 100%;
  }
}

/*------------------------------
  Card
--------------------------------*/
/* card01 */
.card01 {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray02);
  border-radius: 8px;
  box-shadow: var(--box-shadow-type07);
  column-gap: var(--spacing-20);
  display: grid;
  grid-template-columns: 1fr 2.143fr;
  overflow: hidden;
  padding: 20px;
  place-items: center start;
  position: relative;
}
.card01::before {
  background-color: var(--color-white);
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  position: absolute;
  pointer-events: none;
  right: 0;
  top: 0;
  transition: opacity 0.4s 0s ease;
  z-index: 1;
}
.card01__thumnail {
  display: block;
}
.card01__text {
  font-size: 1.6rem;
  font-weight: 700;
}
@media all and (min-width: 768px), print {
  .card01 {
    column-gap: var(--spacing-24);
    grid-template-columns: 135px 1fr;
    padding: 37px 56px;
  }
  .card01__text {
    font-size: 2.0rem;
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .card01:hover::before {
    opacity: var(--opacity-hover-50per);
  }
}
@media (hover: none) {
  .card01:active::before {
    opacity: var(--opacity-hover-50per);
  }
}

/*------------------------------
  Box
--------------------------------*/
.box01 {
  background-color: var(--color-light-red03);
  padding: 20px;
}
@media all and (min-width: 768px), print {
  .box01 {
    padding: 30px;
  }
  .box01__inner {
    margin-inline: auto;
    width: 878px;
  }
}

/*------------------------------
  Panel
--------------------------------*/
/* panel-wrapper01 */
.panel-container01 {
  gap: var(--spacing-20) 0;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.panel-container01__panel {
  margin-top: 0;
}
/* panel01 */
:where(.panel01:not(:first-child)) {
  margin-top: 32px;
}
.panel01__title {
  background-color: var(--color-light-red01);
  border-radius: 8px 8px 0 0;
  padding: 16px 12px;
}
.panel01__heading {
  color: var(--color-white);
  font-size: 2.0rem;
  font-weight: 700;
  text-align: center;
}
.panel01__body {
  --panel01__body-border-width: 1px;
  background-color: var(--color-white);
  border: var(--panel01__body-border-width) solid var(--color-light-red01);
  border-radius: 0 0 8px 8px;
  padding: calc(var(--spacing-20) - var(--panel01__body-border-width));
}
@media all and (min-width: 768px), print {
  /* panel-wrapper01 */
  .panel-container01 {
    gap: 0 var(--spacing-24);
    grid-template-columns: 422px 1fr;
  }
  .panel-container01__panel {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
  /* panel01 */
  :where(.panel01:not(:first-child)) {
    margin-top: 40px;
  }
  .panel01__title {
    padding-left: 32px;
    padding-right: 32px;
  }
  .panel01__body {
    padding: 32px;
  }
  .panel01__body.panel01__body--wide-padding {
    padding: 40px 40px 56px;
  }
}

/*------------------------------
  Column
--------------------------------*/
/* column01 */
.column01 {
  gap: var(--spacing-28) 0;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
/* column02 */
.column02 {
  gap: var(--spacing-12) 0;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
/* column03 */
.column03 {
  gap: var(--spacing-20) 0;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media all and (min-width: 768px), print {
  /* column01 */
  .column01 {
    gap: 0 var(--spacing-40);
    grid-template-columns: 1fr 340px;
  }
  /* column02 */
  .column02 {
    gap: var(--spacing-20) var(--spacing-40);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: auto;
    width: fit-content;
  }
  /* column03 */
  .column03 {
    gap: 0 var(--spacing-24);
    grid-template-columns: 422px 1fr;
  }
}

/*------------------------------
  Tab
--------------------------------*/
/* tab01 */
.tab01:not(:first-child) {
  margin-top: 32px;
}
.tab01__tablist {
  column-gap: 11px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tab01__tab {
  background-color: var(--color-light-red03);
  border: 2px solid var(--color-gray02);
  border-radius: 8px;
  display: block;
  padding: 8px;
  position: relative;
  transition: opacity 0.4s 0s ease;
}
.tab01__tab::before,
.tab01__tab::after {
  border: 12px solid transparent;
  border-bottom: none;
  content: none;
  height: 0;
  left: 50%;
  position: absolute;
  translate: -50%;
  width: 0;
}
.tab01__tab::before {
  border-top: 16px solid var(--color-light-red02);
  bottom: -13px;
  z-index: 1;
}
.tab01__tab::after {
  border-top: 16px solid var(--color-light-red01);
  bottom: -16px;
}
.tab01__tab[aria-selected="true"] {
  background-color: var(--color-light-red02);
  border-color: var(--color-light-red01);
  font-weight: 700;
}
.tab01__tab[aria-selected="true"]::before,
.tab01__tab[aria-selected="true"]::after {
  content: "";
}
.tab01__tab-inner {
  display: block;
  margin-inline: auto;
  text-align: left;
  width: fit-content;
}
.tab01__tab-num {
  align-items: center;
  background-color: var(--color-light-red01);
  border-radius: 50%;
  color: var(--color-white);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 1.6rem;
  height: 24px;
  justify-content: center;
  line-height: 1;
  margin-right: 8px;
  padding: 0 0 0.1em 0.04em;
  place-content: center;
  width: 24px;
}
.tab01__tab[aria-selected="true"] .tab01__tab-num {
  background-color: var(--color-white);
  color: var(--color-light-red01);
}
.tab01__tab-text {
  font-size: var(--text-large);
}
.tab01__content {
  --tab01__content-border-width: 2px;
  background-color: var(--color-white);
  border: var(--tab01__content-border-width) solid var(--color-light-red01);
  border-radius: 5px;
  margin-top: 32px;
  padding: 32px calc(20px - var(--tab01__content-border-width));
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .tab01__tab:hover {
    opacity: var(--opacity-hover-50per);
  }
}
@media (hover: none) {
  .tab01__tab:hover {
    opacity: var(--opacity-hover-50per);
  }
}
@media all and (min-width: 768px), print {
  /* tab01 */
  .tab01:not(:first-child) {
    margin-top: 56px;
  }
  .tab01__tablist {
    column-gap: 20px;
  }
  .tab01__tab {
    padding: 7px 8px;
  }
  .tab01__tab-inner {
    align-items: center;
    column-gap: 12px;
    display: flex;
    justify-content: center;
  }
  .tab01__tab-num {
    font-size: 2.1rem;
    height: 36px;
    margin-right: 0;
    width: 36px;
  }
  .tab01__content {
    border-radius: 8px;
    margin-top: 35px;
    padding: calc(40px - var(--tab01__content-border-width));
  }
}

/*==========================================
  Override common style
=============================================*/
/*------------------------------
  Button-card02
--------------------------------*/
@media not print {
  @media not all and (min-width: 768px) {
    .c-button-card02.override01 {
      padding-left: 17px;
      padding-right: 17px;
    }
    :is(.c-button-card02__title.override01, .c-button-card02__title.override02) {
      grid-template-columns: 56px 1fr;
    }
    .c-button-card02__title.override01 {
      column-gap: var(--spacing-12);
    }
  }
}
/*------------------------------
  Button-quaternary
--------------------------------*/
.column02 .c-button-quaternary {
  margin-top: 0;
}