@charset "UTF-8";

/* =============================================================================

Preferred CSS
※もしくはparts

・共通CSSでは優先度の最も高い単一パーツクラス「.p-×××」

上記はここに記述する

============================================================================= */

/* Display None
----------------------------------------------------------------------------- */
.p-hidden {
  display:none !important;
}
@media (width > 767px) {
  .p-sp {
    display:none !important;
  }
}
@media (width <= 767px) {
  .p-pc {
    display:none !important;
  }
}


/* PC Contents Width
----------------------------------------------------------------------------- */
@media (width > 767px) {
  :where([class*="p-w-pc-"]) {
    margin-inline:auto;
  }
  .p-w-pc-1400 {
    width:140.0rem;
  }
  .p-w-pc-1300 {
    width:130.0rem;
  }
  .p-w-pc-1200 {
    width:120.0rem;
  }
  .p-w-pc-1100 {
    width:110.0rem;
  }
  .p-w-pc-1000 {
    width:100.0rem;
  }
  .p-w-pc-980 {
    width:98.0rem;
  }
}


/* SP Padding & Negative Margin
----------------------------------------------------------------------------- */
@media (width <= 767px) {
  .p-pi-sp-05 {
    padding-inline:0.5rem;
  }
  .p-mi-sp-05 {
    margin-inline:0.5rem;
  }
  .p-mi-n-sp-05 {
    margin-inline:-0.5rem;
  }
  .p-pi-sp-10 {
    padding-inline:1.0rem;
  }
  .p-mi-sp-10 {
    margin-inline:1.0rem;
  }
  .p-mi-n-sp-10 {
    margin-inline:-1.0rem;
  }
  .p-pi-sp-15 {
    padding-inline:1.5rem;
  }
  .p-mi-sp-15 {
    margin-inline:1.5rem;
  }
  .p-mi-n-sp-15 {
    margin-inline:-1.5rem;
  }
  .p-pi-sp-20 {
    padding-inline:2.0rem;
  }
  .p-mi-sp-20 {
    margin-inline:2.0rem;
  }
  .p-mi-n-sp-20 {
    margin-inline:-2.0rem;
  }
  .p-pi-sp-25 {
    padding-inline:2.5rem;
  }
  .p-mi-sp-25 {
    margin-inline:2.5rem;
  }
  .p-mi-n-sp-25 {
    margin-inline:-2.5rem;
  }
  .p-pi-sp-30 {
    padding-inline:3.0rem;
  }
  .p-mi-sp-30 {
    margin-inline:3.0rem;
  }
  .p-mi-n-sp-30 {
    margin-inline:-3.0rem;
  }
  .p-pi-sp-35 {
    padding-inline:3.5rem;
  }
  .p-mi-sp-35 {
    margin-inline:3.5rem;
  }
  .p-mi-n-sp-35 {
    margin-inline:-3.5rem;
  }
  .p-pi-sp-40 {
    padding-inline:4.0rem;
  }
  .p-mi-sp-40 {
    margin-inline:4.0rem;
  }
  .p-mi-n-sp-40 {
    margin-inline:-4.0rem;
  }
  .p-pi-sp-45 {
    padding-inline:4.5rem;
  }
  .p-mi-sp-45 {
    margin-inline:4.5rem;
  }
  .p-mi-n-sp-45 {
    margin-inline:-4.5rem;
  }
}


/* Font Family
----------------------------------------------------------------------------- */
/* Default */
.p-ff-default {
  font-family:var(--ff-zen);
  font-weight:500;
}

/* Zen Kaku Gothic Antique */
.p-ff-zen {
  font-family:var(--ff-zen);
  font-weight:500;
}
.p-ff-zen-700 {
  font-family:var(--ff-zen);
  font-weight:700;
}

/* Outfit */
.p-ff-of {
  font-feature-settings: "smcp";
  font-family:var(--ff-of);
  font-weight:500;
}


/* Margin Block .p-mb
----------------------------------------------------------------------------- */
.p-mb-0 {
  margin-block:0;
}
@media (width > 767px) {
  .p-mb-pc-0 {
    margin-block:0;
  }
}
@media (width <= 767px) {
  .p-mb-sp-0 {
    margin-block:0;
  }
}


/* Margin Block Start .p-mbs
----------------------------------------------------------------------------- */
.p-mbs-0 {
  margin-block-start:0;
}
@media (width > 767px) {
  .p-mbs-pc-0 {
    margin-block-start:0;
  }
}
@media (width <= 767px) {
  .p-mbs-sp-0 {
    margin-block-start:0;
  }
}


/* Margin Block Start > Negative Margin .p-mbs-n
----------------------------------------------------------------------------- */
.p-mbs-n-header {
  margin-block-start:calc(var(--header-height) * -1);
  @media (width <= 767px) {
    margin-block-start:calc((var(--header-height) + var(--topicpath-height)) * -1);
  }
}
@media (width > 767px) {
  .p-mbs-pc-n-header {
    margin-block-start:calc(var(--header-height) * -1);
  }
}
@media (width <= 767px) {
  .p-mbs-sp-n-header {
    margin-block-start:calc(var(--header-height) * -1);
  }
}


/* Margin Block End .p-mbe
----------------------------------------------------------------------------- */
.p-mbe-0 {
  margin-block-end:0;
}
@media (width > 767px) {
  .p-mbe-pc-0 {
    margin-block-end:0;
  }
}
@media (width <= 767px) {
  .p-mbe-sp-0 {
    margin-block-end:0;
  }
}

/* Padding Block .p-pb
----------------------------------------------------------------------------- */
.p-pb-0 {
  padding-block:0;
}
@media (width > 767px) {
  .p-pb-pc-0 {
    padding-block:0;
  }
}
@media (width <= 767px) {
  .p-pb-sp-0 {
    padding-block:0;
  }
}


/* Padding Block Start .p-pbs
----------------------------------------------------------------------------- */
.p-pbs-header {
  padding-block-start:var(--header-height);
}
.p-pbs-0 {
  padding-block-start:0;
}
@media (width > 767px) {
  .p-pbs-pc-0 {
    padding-block-start:0;
  }
}
@media (width <= 767px) {
  .p-pbs-sp-0 {
    padding-block-start:0;
  }
}

/* Padding Block End .p-pbe
----------------------------------------------------------------------------- */
.p-pbe-0 {
  padding-block-end:0;
}
@media (width > 767px) {
  .p-pbe-pc-0 {
    padding-block-end:0;
  }
}
@media (width <= 767px) {
  .p-pbe-sp-0 {
    padding-block-end:0;
  }
}

/* 下層ページmainのpadding-bottom */
.p-lowerpage_pbe-A {
  padding-bottom:18.0rem;
  @media (width <= 767px) {
    padding-bottom:8.0rem;
  }
}


/* Text .p-t-
----------------------------------------------------------------------------- */
.p-t-justify {
  text-align: justify;
}
.p-t-justify_l {
  text-align-last: justify;
}
.p-t-start {
  text-align: start;
}
.p-t-end {
  text-align: end;
}
.p-t-end > img {
  margin-inline-start: auto;
}
.p-t-center {
  text-align: center;
}
.p-t-center > img {
  margin-inline: auto;
}
@media (width > 767px) {
  .p-t-pc-justify {
    text-align: justify;
  }
  .p-t-pc-justify_l {
    text-align-last: justify;
  }
  .p-t-pc-start {
    text-align: start;
  }
  .p-t-pc-end {
    text-align: end;
  }
  .p-t-pc-end > img {
    margin-inline-start: auto;
  }
  .p-t-pc-center {
    text-align: center;
  }
  .p-t-pc-center > img {
    margin-inline: auto;
  }
}
@media (width <= 767px) {
  .p-t-sp-justify {
    text-align: justify;
  }
  .p-t-sp-justify_l {
    text-align-last: justify;
  }
  .p-t-sp-start {
    text-align: start;
  }
  .p-t-sp-end {
    text-align: end;
  }
  .p-t-sp-end > img {
    margin-inline-start: auto;
  }
  .p-t-sp-center {
    text-align: center;
  }
  .p-t-sp-center > img {
    margin-inline: auto;
  }
}


/* .p-t-mb-n-lh
※テキストの上下のline-heightを潰す
----------------------------------------------------------------------------- */
.p-t-mb-n-lh {
  margin-block:calc(.5em - .5lh);
}
.p-t-mbs-n-lh {
  margin-block-start:calc(.5em - .5lh);
}
.p-t-mbe-n-lh {
  margin-block-end:calc(.5em - .5lh);
}


/* Typography .p-tg-
----------------------------------------------------------------------------- */

/* 本文（body指定） */
.p-tg-paragraph-A { /* Body Text Size */
  font-size: var(--tg-text-A-fs);
  font-weight:var(--tg-text-A-fw);
  line-height:var(--tg-text-A-lh);
  letter-spacing:var(--tg-text-A-ls);
}


/* font-weight .p-fw
----------------------------------------------------------------------------- */
.p-fw-400 {
  font-weight:400;
}
.p-fw-500 {
  font-weight:500;
}
.p-fw-600 {
  font-weight:600;
}
.p-fw-700 {
  font-weight:700;
}

/* Color .p-c
----------------------------------------------------------------------------- */
.p-c-reverse {
  color:var(--cc-white-A);
}

/* Background color .p-bg
----------------------------------------------------------------------------- */
.p-bg-white-A {
  background-color:rgb(from var(--cc-white-A) r g b / .6);
}
.p-bg-blue-A {
  background-color:var(--cc-blue-A);
  color:var(--cc-white-A);
}
.p-bg-blue-B {
  background-color:var(--cc-blue-B);
  color:var(--cc-white-A);
}
.p-bg-green-A {
  background-color:var(--cc-green-A);
  color:var(--cc-white-A);
}
.p-bg-green-B {
  background-color:var(--cc-green-B);
  color:var(--cc-white-A);
}
.p-bg-green-C {
  background-color:var(--cc-green-C);
  color:var(--cc-white-A);
}


/* Text Decoration .p-bd
----------------------------------------------------------------------------- */
.p-bd_inline {
  position:relative;

  &::before, &::after {
    content:"";
    width:1px;
    background-color:var(--cc-gray-A);
    height:100%;
    position:absolute;
    top:0;
    z-index: -1;
    pointer-events: none;
    @media (width > 767px) {
      margin-inline:auto;
    }
  }
  &::before {
    @media (width > 767px) {
      inset-inline:0 140.0rem;
    }
    @media (width <= 767px) {
      left:2.0rem;
    }
  }
  &::after {
    @media (width > 767px) {
      inset-inline:140.0rem 0;
    }
    @media (width <= 767px) {
      right:2.0rem;
    }
  }
}


/* Radius
----------------------------------------------------------------------------- */
.p-radius-A {
  border-radius:var(--radius-A);
  > img,
  > picture img,
  > video {
    border-radius:var(--radius-A);
  }
}
.p-radius-B {
  border-radius:var(--radius-B);
  > img,
  > picture img,
  > video {
    border-radius:var(--radius-B);
  }
}
@media (width > 767px) {
  .p-radius-pc-A {
    border-radius:var(--radius-A);
    > img,
    > picture img,
    > video {
      border-radius:var(--radius-A);
    }
  }
  .p-radius-pc-B {
    border-radius:var(--radius-B);
    > img,
    > picture img,
    > video {
      border-radius:var(--radius-B);
    }
  }
}
@media (width <= 767px) {
  .p-radius-sp-A {
    border-radius:var(--radius-A);
    > img,
    > picture img,
    > video {
      border-radius:var(--radius-A);
    }
  }
  .p-radius-sp-B {
    border-radius:var(--radius-B);
    > img,
    > picture img,
    > video {
      border-radius:var(--radius-B);
    }
  }
}


/* Indent p-indent_list
----------------------------------------------------------------------------- */
.p-indent_list-A {
  > .item {
    display:flex;
    align-items: flex-start;
    gap:.2em;

    .it {
      flex-shrink: 0;
    }
  }
}
.p-indent_text-A {
  display:flex;
  align-items: flex-start;
  gap:.2em;

  .it {
    flex-shrink: 0;
  }
}


/* Link .p-link
----------------------------------------------------------------------------- */
.p-link_text-A {
  color:var(--cc-gray-A);
  text-decoration: underline;
  transition-property: color;
  transition-duration: var(--duration-hover-A);

  @media (hover) {
    &:hover {
      color:var(--cc-black-A);
      text-decoration: none;
    }
  }
}


/* overflow .p-ovf
----------------------------------------------------------------------------- */
.p-ovf-hidden {
  overflow:hidden;
}
.p-ovf-visible {
  overflow:visible;
}
@media (width > 767px) {
  .p-ovf-pc-hidden {
    overflow:hidden;
  }
  .p-ovf-pc-visible {
    overflow:visible;
  }
}
@media (width <= 767px) {
  .p-ovf-sp-hidden {
    overflow:hidden;
  }
  .p-ovf-sp-visible {
    overflow:visible;
  }
}

/* スクリーンリーダーオンリー
----------------------------------------------------------------------------- */
.p-sr_only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* Media Percentage Width
----------------------------------------------------------------------------- */
.p-m_per-100 {
  :is(img,video,iframe) {
    width:100%;
  }
}
@media (width > 767px) {
  .p-m_per-pc-100 {
    :is(img,video,iframe) {
      width:100%;
    }
  }
}
@media (width <= 767px) {
  .p-m_per-sp-100 {
    :is(img,video,iframe) {
      width:100%;
    }
  }
}