@charset "UTF-8";

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

Layout CSS

・レイアウトコンポネ用クラス「.l-×××」

上記はここに記述する

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

/* Heading
============================================================================= */
/* A */
.l-heading-A {
  display:flex;
  align-items: flex-start;
  gap:1.6rem;
  margin-bottom:4.8rem;
  @media (width > 767px) {
  }
  @media (width <= 767px) {
    gap:.8rem;
    margin-bottom:3.2rem;
  }
  .m-i-treat_in_out {
    width:2.3rem;
    margin-top:.1em;
    @media (width <= 767px) {
      width:1.9rem;
    }
  }
  > span {
    font-size:3.4rem;
    line-height:1;
    letter-spacing: .05em;
    @media (width <= 767px) {
      font-size:2.8rem;
    }
  }
}

/* B */
.l-heading-B {
  display:grid;
  gap:1.6rem;
  margin-bottom:3.6rem;
  @media (width > 767px) {
  }
  @media (width <= 767px) {
    gap:1.0rem;
    margin-bottom:2.4rem;
  }

  .en {
    display:flex;
    gap:1.6rem;
    font-size:3.4rem;
    letter-spacing: .05em;
    line-height:1;
    @media (width <= 767px) {
      gap:.8rem;
      font-size:1.7rem;
    }
    .m-i-treat_in_out {
      flex-shrink: 0;
      @media (width <= 767px) {
        width:1.3rem;
      }
    }
  }
  .ja {
    font-size:6.0rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height:1.5;
    @media (width <= 767px) {
      font-size:3.0rem;
    }
  }
}


/* C */
.l-heading-C {
  margin-bottom:3.6rem;
  position:relative;
  padding-left:3.0rem;
  font-size:2.6rem;
  line-height:1.6;
  letter-spacing: .05em;
  @media (width <= 767px) {
    margin-bottom:2.8rem;
    padding-left:2.0rem;
    font-size:1.6rem;
  }

  &.-no_treat {
    padding-left:0;
    &::before {
      content:none;
    }
  }

  &.p-ff-of {
    font-size:2.8rem;
    line-height:1.4;
    @media (width <= 767px) {
      font-size:1.6rem;
    }
  }
  &:not(.p-ff-of) {
    font-weight:700;
  }

  &::before {
    content:"";
    background-color:currentColor;
    width:2.0rem;
    height:2px;
    position:absolute;
    left:0;
    top:calc(.5lh - 1px);
    @media (width <= 767px) {
      height:1px;
      width:1.0rem;
    }
  }
}


/* D */
.l-heading-D {
  display:flex;
  align-items: center;
  gap:3.0rem;
  margin-bottom:2.8rem;
  position:relative;
  font-size:2.4rem;
  font-weight: 700;
  line-height:1.6;
  letter-spacing: .05em;
  @media (width <= 767px) {
    margin-bottom:2.4rem;
    gap:1.2rem;
    font-size:1.5rem;
  }

  &::after {
    flex:1;
    content:"";
    height:1px;
    background-color:var(--cc-gray-A);
  }
}


/* E */
.l-heading-E {
  display:flex;
  align-items: center;
  justify-content: center;
  margin-bottom:2.8rem;
  border-radius:var(--radius-B);
  padding:.5rem 2.0rem;
  width:fit-content;
  font-size:2.8rem;
  color:#fff;
  font-weight: 700;
  line-height:1.6;
  letter-spacing: .05em;
  background-image:linear-gradient(
    to right,
    #6793EC 0%,
    #32D093 100%
  );
  @media (width > 767px) {
    min-width:18.0rem;
  }
  @media (width <= 767px) {
    margin-bottom:2.0rem;
    padding:.4rem .8rem;
    gap:1.6rem;
    font-size:1.6rem;
  }

}


/* Number
----------------------------------------------------------------------------- */
.l-number-A {
  display:flex;
  align-items: baseline;
  gap:1.2rem;
  margin-bottom:2.8rem;
  width:fit-content;
  font-size:1.8rem;
  letter-spacing: .05em;
  line-height:1;
  @media (width > 767px) {
  }
  @media (width <= 767px) {
    gap:.8rem;
    margin-bottom:1.2rem;
    font-size:1.4rem;
  }
  > span {
    font-size:3.0rem;
    @media (width <= 767px) {
      font-size:2.2rem;
    }
  }

}



/* ヘッダーロゴ
----------------------------------------------------------------------------- */
.l-header-logos {
  display:flex;
  align-items: center;
  column-gap: 3.0rem;
  @media (width <= 767px) {
    height:var(--header-height);
    column-gap: 1.6rem;
  }

  > a {
    &.jr {
      display:flex;
      justify-content: center;
      align-items: center;
      height:auto;
      aspect-ratio: 1/1;
      @media (width <= 767px) {
      }
    }
  }
}

/* グローバルメニューボタン
----------------------------------------------------------------------------- */
.l-global_menu-button {
  display:flex;
  justify-content: center;
  align-items: center;
  width:8.0rem;
  height:auto;
  aspect-ratio: 1/1;
  border-radius:var(--radius-B);
  background-color:var(--cc-blue-A);
  @media (width > 767px) {
  }
  @media (width <= 767px) {
    width:5.0rem;
  }

  > .inner {
    --bar-h: 2px;
    --gap: calc(1.0rem - (var(--bar-h) * .5));
    display:flex;
    width:3.0rem;
    gap:var(--gap);
    pointer-events: none;
    position:relative;
    @media (width <= 767px) {
      --gap: calc(.8rem - (var(--bar-h) * .5));
      width:2.0rem;
    }
  }
  .bar {
    width:100%;
    height: var(--bar-h);
    background-color: var(--cc-white-A);
    transition-duration: var(--duration-hover-A);
    position:absolute;
    @media (width <= 767px) {
    }

    &:nth-child(1),&:nth-child(3) {
      width:100%;
      transition-property: transform;
    }
    &:nth-child(1) {
      transform:translateY(calc(var(--gap) * -1));
      body[data-modal-open="GlobalMenu"] & {
        transform: rotate(30deg);
      }
    }
    &:nth-child(2) {
      width:50%;
      transition-property: opacity;
      body[data-modal-open="GlobalMenu"] & {
        opacity:0;
      }
      @media (width <= 767px) {
        width:1.4rem;
      }
    }
    &:nth-child(3) {
      transform:translateY(var(--gap));
      body[data-modal-open="GlobalMenu"] & {
        transform: rotate(-30deg);
      }
    }
  }
}


/* Button
----------------------------------------------------------------------------- */
[class*="l-button"] {
  &.-right {
    margin-right:0;
  }
  &.-left {
    margin-left:0;
  }
  @media (width > 767px) {
    &.-pc_right {
      margin-right:0;
    }
    &.-pc_left {
      margin-left:0;
    }
  }
  @media (width <= 767px) {
    &.-sp_right {
      margin-right:0;
    }
    &.-sp_left {
      margin-left:0;
    }
  }
}

.l-button-A {
  --my-color:var(--cc-white-A);
  --my-bg:var(--cc-blue-A);
  display:flex;
  justify-content: center;
  align-items: center;
  padding-inline:.5em 1em;
  border-radius:100px;
  margin-inline:auto;
  padding-bottom:.1em;
  width:fit-content;
  min-width:28.0rem;
  min-height:6.0rem;
  font-weight:700;
  font-size:1.5rem;
  line-height:1.4;
  text-align: center;
  letter-spacing: .05em;
	color:var(--my-color);
  background-color:var(--my-bg);
  position:relative;
	transition-property:background-color,color,border-color;
	transition-duration: var(--duration-hover-A);
  z-index: 1;

  @media (width <= 767px) { /* SP */
    font-size:1.3rem;
    min-width:22.0rem;
    min-height:5.0rem;

    &.-sp_variation {
      padding-top:.5em;
      padding-inline:0;
      flex-direction: column;
      row-gap:.8rem;
      border-radius:var(--radius-A);
      min-height:8.4rem;
      font-size:1.2rem;

      > span {
        display:grid;
        align-items: center;
        min-height:2lh;
      }
      &::after {
        position:static;
      }
    }
  }

  @media (hover:hover) {
    &:hover {
      --my-bg:var(--cc-green-C);
    }
  }

  &::after {
    position:absolute;
    right:2.0rem;
  }

}


/* 下層ページヘッダー
----------------------------------------------------------------------------- */
/* A */
.l-lowerpage_header-A {
  margin-bottom:10.0rem;
  border-bottom:1px solid var(--cc-gray-A);
  padding-block:8.8rem 10.0rem;
  @media (width <= 767px) {
    padding-block:6.0rem 4.0rem;
    margin-bottom:6.0rem;
  }

  .l-heading-B {
    margin-bottom:0;
  }
}


/* Flow
============================================================================= */
.l-flow-A {
  --row-gap:4.0rem;
  --dt-w:6.8rem;
  --dd-pis:2.4rem;
  --ico-w:2.1rem;
  display:grid;
  grid-template-columns: var(--dt-w) 1fr;
  row-gap:var(--row-gap);

  .flow {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:subgrid;

    > dt {
    }
    > dd {
      padding-left:var(--dd-pis);
      position:relative;

      &::before {
        content:"";
        width:var(--ico-w);
        height:var(--ico-w);
        background-image:url(../img/common/flow-separator.svg);
        background-size:contain;
        background-repeat:no-repeat;
        position:absolute;
        left:calc(var(--ico-w) * -.5);
        top:calc(.5lh - (var(--ico-w) * .5));
        z-index:1;
      }
    }
    &:not(:last-child) {
      > dd::after {
        content:"";
        width:1px;
        height:calc(100% + var(--row-gap));
        background-color:var(--cc-gray-A);
        position:absolute;
        top:.5lh;
        left:0;
      }
    }
  }
}



/* Table
============================================================================= */
/* A */
.l-table-A {
  --tc:22.8rem;
  display:grid;
  grid-template-columns:var(--tc) 1fr;
  line-height:1.8;
  letter-spacing: 0;

  @media (width <= 767px) {
    --tc:6.4rem;
    font-size:1.1rem;
  }
  > div {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:subgrid;
    align-items: flex-start;
    grid-auto-flow:column;
    border-bottom:1px solid var(--cc-gray-A);
    padding-block:2.0rem;
    position:relative;

    @media (width <= 767px) {
      padding-block:1.2rem;
    }
  }

  :is(dt,dd) {
  }
  dt {
    font-weight:700;
  }
  dd {
    word-break: break-all;
    p + p {
      margin-top:1em;
    }
    .bnr {
      display:block;
      margin-top:.5em;
      width:fit-content;
    }
    small {
      font-size:1.3rem;
      @media (width <= 767px) {
        font-size:1.0rem;
      }
    }
  }

  &.-sp_row {
    @media (width <= 767px) {
      grid-template-columns:1fr;
      > div {
        grid-template-rows:auto 1fr;
        grid-template-columns:1fr;
        row-gap:.8rem;
      }
      dt {
        font-size:1.4rem;
      }
    }
  }
}


/* Tab Buttons
============================================================================= */
.l-tab-buttons-A {
  display:flex;
  justify-content: center;
  font-size:2.0rem;
  font-weight:700;
  letter-spacing: 0;
  @media (width > 767px) {
    gap:2.0rem;
  }
  @media (width <= 767px) {
    gap:.8rem;
    font-size:1.6rem;
  }

  .js-tab-button {
    display:flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius:var(--radius-A);
    border-top-right-radius:var(--radius-A);
    min-height:8.0rem;
    text-align: center;
    line-height:1.4;
    background-color:rgb(from var(--cc-white-A) r g b / .6);
    transition-property: color,background-color;
    transition-duration:var(--duration-hover-A);
    cursor:pointer;
    @media (hover:hover) {
      &:hover {
        color:var(--cc-red-A);
      }
    }
    @media (width > 767px) {
      width:30.0rem;
    }
    @media (width <= 767px) {
      flex:1;
      min-height:5.2rem;
    }
    &:not([aria-expanded="true"]) {
      color:var(--cc-white-A);
      background-color:var(--cc-gray-B);
    }
  }
}




/* Sample
============================================================================= */
.l-selectorName {
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }
}