@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-1440 {
    width:144.0rem;
  }
  .p-w-pc-1200 {
    width:120.0rem;
  }
  .p-w-pc-1100 {
    width:110.0rem;
  }
}


/* SP Padding & Negative Margin
----------------------------------------------------------------------------- */
@media (width <= 767px) {
  .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-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-75 {
    padding-inline:7.5rem;
  }
  .p-mi-sp-75 {
    padding-inline:7.5rem;
  }
  .p-mi-n-sp-75 {
    margin-inline:-7.5rem;
  }
}


/* Font Family
----------------------------------------------------------------------------- */
/* Zen Kaku Gothic New */
[class*="p-ff-zen"] {
  font-family:var(--ff-zen);
  font-feature-settings: "";
}
.p-ff-zen-500 {
  font-weight:500;
}
.p-ff-zen-700 {
  font-weight:700;
}

/* Open Sans */
[class*="p-ff-os"] {
  font-optical-sizing: auto;
  font-family:var(--ff-os);
  font-style: normal;
  font-variation-settings:"wdth" 100;
  font-feature-settings: "smcp";
  font-stretch: 90%;
  transform-origin:0 50%;
}
.p-ff-os-400 {
  font-weight:400;
}
.p-ff-os-600 {
  font-weight:600;
}
.p-ff-os-700 {
  font-weight:700;
}

/* Open Sans 長体化 */
.p-os-lb-c {
  transform:scaleX(.9);
}
.p-os-lb-l {
  transform:scaleX(.9);
  transform-origin:left;
}


/* Margin Inline
----------------------------------------------------------------------------- */
.p-mi-auto { /* center */
  margin-inline:auto;
}
.p-mis-auto { /* right */
  margin-left:auto;
}
@media (width > 767px) {
  .p-mi-pc-auto {
    margin-inline:auto;
  }
  .p-mis-pc-auto {
    margin-left:auto;
  }
}
@media (width <= 767px) {
  .p-mi-sp-auto {
    margin-inline:auto;
  }
  .p-mis-sp-auto {
    margin-left:auto;
  }
}


/* Text .p-t-
----------------------------------------------------------------------------- */
.p-t-justify {
  text-align: justify;
}
.p-t-justify-l {
  text-align-last: justify;
}
.p-t-left {
  text-align: left;
}
.p-t-right {
  text-align: right;
}
.p-t-right > 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-left {
    text-align: left;
  }
  .p-t-pc-right {
    text-align: right;
  }
  .p-t-pc-right > 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-left {
    text-align: left;
  }
  .p-t-sp-right {
    text-align: right;
  }
  .p-t-sp-right > 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-text-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);
}


/* line-clamp .p-lc
styleの場合
<p class="p-lc" style="--lc:2;">text</p> pcとspが同じ
<p class="p-lc" style="--lc-pc:2;--lc-sp:3;">text</p>  pcとspが別
----------------------------------------------------------------------------- */
[class*="p-lc"] {
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lc);
  overflow:hidden;
}
.p-lc-1 {
  --lc:1;
}
.p-lc-2 {
  --lc:2;
}
.p-lc-3 {
  --lc:3;
}
.p-lc-4 {
  --lc:4;
}
.p-lc-5 {
  --lc:5;
}
.p-lc-6 {
  --lc:6;
}
@media (width > 767px) {
  .p-lc-pc-1 {
    --lc:1;
  }
  .p-lc-pc-2 {
    --lc:2;
  }
  .p-lc-pc-3 {
    --lc:3;
  }
  .p-lc-pc-4 {
    --lc:4;
  }
  .p-lc-pc-5 {
    --lc:5;
  }
  .p-lc-pc-6 {
    --lc:6;
  }
}
@media (width <= 767px) {
  .p-lc-sp-1 {
    --lc:1;
  }
  .p-lc-sp-2 {
    --lc:2;
  }
  .p-lc-sp-3 {
    --lc:3;
  }
  .p-lc-sp-4 {
    --lc:4;
  }
  .p-lc-sp-5 {
    --lc:5;
  }
  .p-lc-sp-6 {
    --lc:6;
  }
}


/* 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-black-A {
  --base-color:var(--cc-black-A);
  color:var(--cc-black-A);
}
.p-c-white-A {
  --base-color:var(--cc-white-A);
  --cc-gray_line-A:var(--cc-gray_text-A);
  color:var(--base-color);
}
@media (width > 767px) {
  .p-c-pc-black-A {
    color:var(--cc-black-A);
  }
  .p-c-pc-white-A {
    --base-color:var(--cc-white-A);
    --cc-gray_line-A:var(--cc-gray_text-A);
    color:var(--base-color);
  }
}
@media (width <= 767px) {
  .p-c-sp-black-A {
    color:var(--cc-black-A);
  }
  .p-c-sp-white-A {
    --base-color:var(--cc-white-A);
    --cc-gray_line-A:var(--cc-gray_text-A);
    color:var(--base-color);
  }
}


/* Background .p-bg
----------------------------------------------------------------------------- */
:where([class*="p-bg-"]:not([class*="p-bg-pc"],[class*="p-bg-sp"])) {
  background-color:var(--base-bg);
  color:var(--base-color);
}
.p-bg-white-A {
  --base-bg:var(--cc-white-A);
  --base-color:var(--cc-black-A);
  --base-bg-reverse:var(--cc-black-A);
  --base-color-reverse:var(--cc-white-A);
}
.p-bg-black-A {
  --base-bg:var(--cc-black-A);
  --base-color:var(--cc-white-A);
  --base-bg-reverse:var(--cc-white-A);
  --base-color-reverse:var(--cc-black-A);
  --cc-gray_line-A:var(--cc-gray_text-A);
  background-color:var(--base-bg);
}
.p-bg-gray-A {
  --base-bg:var(--cc-gray-A);
  background-color:var(--base-bg);
}
.p-bg-gray-B {
  --base-bg:var(--cc-gray-B);
  background-color:var(--base-bg);
}
.p-bg-gray-C {
  --base-bg:var(--cc-gray-C);
  background-color:var(--base-bg);
}
@media (width > 767px) {
  :where([class*="p-bg-pc"]) {
    background-color:var(--base-bg);
    color:var(--base-color);
  }
  .p-bg-pc-white-A {
    --base-bg:var(--cc-white-A);
    --base-color:var(--cc-black-A);
    --base-bg-reverse:var(--cc-black-A);
    --base-color-reverse:var(--cc-white-A);
  }
  .p-bg-pc-white-B {
    --base-bg:var(--cc-white-B);
    --base-color:var(--cc-black-A);
    --base-bg-reverse:var(--cc-black-A);
    --base-color-reverse:var(--cc-white-B);
  }
  .p-bg-pc-black-A {
    --base-bg:var(--cc-black-A);
    --base-color:var(--cc-white-A);
    --base-bg-reverse:var(--cc-white-A);
    --base-color-reverse:var(--cc-black-A);
    --cc-gray_line-A:var(--cc-gray_text-A);
    background-color:var(--base-bg);
  }
  .p-bg-pc-gray-A {
    --base-bg:var(--cc-gray-A);
    background-color:var(--base-bg);
  }
  .p-bg-pc-gray-B {
    --base-bg:var(--cc-gray-B);
    background-color:var(--base-bg);
  }
  .p-bg-pc-gray-C {
    --base-bg:var(--cc-gray-B);
    background-color:var(--base-bg);
  }
}
@media (width <= 767px) {
  :where([class*="p-bg-sp"]) {
    background-color:var(--base-bg);
    color:var(--base-color);
  }
  .p-bg-sp-white-A {
    --base-bg:var(--cc-white-A);
    --base-color:var(--cc-black-A);
    --base-bg-reverse:var(--cc-black-A);
    --base-color-reverse:var(--cc-white-A);
  }
  .p-bg-sp-white-B {
    --base-bg:var(--cc-white-B);
    --base-color:var(--cc-black-A);
    --base-bg-reverse:var(--cc-black-A);
    --base-color-reverse:var(--cc-white-B);
  }
  .p-bg-sp-black-A {
    --base-bg:var(--cc-black-A);
    --base-color:var(--cc-white-A);
    --base-bg-reverse:var(--cc-white-A);
    --base-color-reverse:var(--cc-black-A);
    --cc-gray_line-A:var(--cc-gray_text-A);
    background-color:var(--base-bg);
  }
  .p-bg-sp-gray-A {
    --base-bg:var(--cc-gray-A);
    background-color:var(--base-bg);
  }
  .p-bg-sp-gray-B {
    --base-bg:var(--cc-gray-B);
    background-color:var(--base-bg);
  }
  .p-bg-sp-gray-C {
    --base-bg:var(--cc-gray-B);
    background-color:var(--base-bg);
  }
}


/* Radius
----------------------------------------------------------------------------- */
.p-radius-A {
  border-radius:var(--radius-A);
  overflow:hidden;
}
.p-radius_top-A {
  border-radius:var(--radius-A) var(--radius-A) 0 0;
  overflow:hidden;

  &.-nm {
    margin-top:calc(var(--radius-A) * -1);
  }
}
.p-radius_bottom-A {
  border-radius:0 0 var(--radius-A) var(--radius-A);
  overflow:hidden;
}
.p-radius-B {
  border-radius:var(--radius-B);
  overflow:hidden;
}
.p-radius-C {
  border-radius:var(--radius-C);
  overflow:hidden;
}