:root {
  /* フォント */
  --ff-gothic: "Noto Sans JP", sans-serif;
  --ff-roboto: "Roboto", sans-serif;
  --fw-base: 400;

  /* 「まなパ」カラー（1） - アクセント色として使用 */
  --color-manapa-accent: #3A4D8A;
  /* 「まなパ」カラー（2） - テキストやベタ塗りに使用 */
  --color-manapa-text: #1F3F3F;
  /* 「まなパ」カラー（3） - 『数字で読む』のパネル背景に使用 */
  --color-manapa-panel: #AA8241;
  
  /* 一部アクセントに使用 */
  --color-accent-sub: #EFE6D9;
  /* 装飾帯やアイコンに使用 */
  --color-decoration: #EFE6D9;
  /* 『学科紹介』Topicsに使用 */
  --color-topics: #EFE6D9;
  /* ベースカラー */
  --color-base: #FDFAE8;
  /* 学科紹介のベースカラー */
  --color-department-base: #FF8899;

  /* 土木工学科 - 学科色1 */
  --color-civil-1: #EB6052;
  /* 土木工学科 - 学科色2 */
  --color-civil-2: #E84433;
  /* 土木工学科 - 学科色3 */
  --color-civil-3: #FBE7E5;

  /* 建築学科 - 学科色1 */
  --color-architecture-1: #CF9C41;
  /* 建築学科 - 学科色2 */
  --color-architecture-2: #C78B1E;
  /* 建築学科 - 学科色3 */
  --color-architecture-3: #F8F1E1;

  /* 機械工学科 - 学科色1 */
  --color-mechanical-1: #29B359;
  /* 機械工学科 - 学科色2 */
  --color-mechanical-2: #00A63C;
  /* 機械工学科 - 学科色3 */
  --color-mechanical-3: #DFF4E6;

  /* 電気電子工学科 - 学科色1 */
  --color-electrical-1: #27B2A5;
  /* 電気電子工学科 - 学科色2 */
  --color-electrical-2: #00A395;
  /* 電気電子工学科 - 学科色3 */
  --color-electrical-3: #DEF4F2;

  /* 生命応用化学科 - 学科色1 */
  --color-life-1: #25B1EB;
  /* 生命応用化学科 - 学科色2 */
  --color-life-2: #00A2E8;
  /* 生命応用化学科 - 学科色3 */
  --color-life-3: #DEF3FC;

  /* 情報工学科 - 学科色1 */
  --color-information-1: #9159A2;
  /* 情報工学科 - 学科色2 */
  --color-information-2: #7E3C92;
  /* 情報工学科 - 学科色3 */
  --color-information-3: #EFE6F1;

  /* フォーカスリング */
  --color-focus: #005FCC;

  /* 基本テキスト色 */
  --color-text-base: #2C4B52;

  /* 白 */
  --color-white: #FFF;

  /* 赤（メインアクセント） */
  --color-red: #EA3044;

  /* 赤（濃いめ） */
  --color-red-dark: #E8003D;

  /* 黄色 */
  --color-yellow: #FFFF00;

  /* 薄緑背景 */
  --color-bg-green-light: #EEF9F0;

  /* バナー背景 */
  --color-banner: #BBEFC7;

  /* 統計アイコン背景 */
  --color-stat-icon: #556E73;

  /* 統計コンテンツ背景 */
  --color-stat-content: #57C76F;

  /* ライトボーダー */
  --color-border-light: #E2E6ED;

  /* Topicsアクセントグリーン */
  --color-topics-accent: #46DB66;

  /* 学科紹介背景 */
  --color-introduction-bg: #F0F2F6;

  /* タブ英語名 */
  --color-tab-en: #BEC7C9;

  /* 破線ボーダー */
  --color-border-dashed: #999;

  /* リンク色 */
  --color-link: #005FE2;
  --color-link-default: #0000EE;
  --color-link-hover: #009DFF;
}

#contents {
  padding: unset;

  &>#breadClumb {
    padding-inline-start: 10px !important;
  }
}

#contents .nichidai {
  padding-block-end: 48px;

  & :where(:any-link, :enabled, summary) {
    --default: initial;
    --hover: ;

    &:focus-visible {
      --default: ;
      --hover: initial;
    }
  }

  @media (any-hover: hover) {
    & :where(:any-link, :enabled, summary):hover {
      --default: ;
      --hover: initial;
    }
  }

  & :where(:focus):not(:where(:focus-visible)) {
    outline: none;
  }

  & :where(:focus-visible) {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
  }

  & * {
    color: var(--color-text-base);
    font-family: var(--ff-gothic);
    font-weight: var(--fw-base);
  }

  & .pict {
    display: block flow;

    &>img {
      inline-size: 100%;
    }
  }

  & .redBold {
    color: var(--color-red);
    font-weight: 900;
  }

  & .yellowBold {
    color: var(--color-yellow);
    font-weight: 700;
  }

  & .firstView {
    padding-block: 73px 0;
    background-image: url(../img/background_sp.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
  }

  & .hero {
    display: block grid;
    place-items: center;
  }

  & .heroHead {
    inline-size: 84%;

    &>img {
      inline-size: 100%;
    }
  }

  & .heroCont {
    display: inherit;
    place-items: inherit;
    row-gap: 29px;
    inline-size: 82%;
    margin-block-start: 74px;
  }

  & .heroMessageTtl {
    inline-size: 93%;

    &>img {
      inline-size: 100%;
    }
  }

  & .heroDesc {
    font-weight: 700;
    font-size: 18px;
    line-height: calc(32 / 18);
    margin-block-start: 14px;
    padding-block-end: unset;
  }

  & .sceneGallery {
    display: inherit;
    grid-template-columns: repeat(2, 1fr);
    margin-block-start: 34px;
  }

  & .sceneGalleryImg {
    inline-size: 100%;
  }

  & .about {
    padding-block-end: unset;
  }

  & .aboutInner {
    background: linear-gradient(180deg, var(--color-bg-green-light) 0%, var(--color-bg-green-light) 77%, var(--color-white) 77%, var(--color-white) 100%);
    display: block grid;
    place-items: center;

    &>.pict {
      margin-block-start: -29px;
      background-color: var(--color-white);
    }
  }

  & .aboutHead {
    inline-size: 82%;
    margin-block-start: 40px;
  }

  & .aboutLead {
    font-size: 16px;
    font-weight: 500;
    line-height: calc(28 / 16);
    padding-block-end: unset;
    margin-block-start: 15px;

    & br {
      display: none;
    }
  }

  & .bannerLead {
    font-size: 18px;
    line-height: calc(32 / 18);
    font-weight: 700;
    background-color: var(--color-banner);
    inline-size: 100%;
    text-align: center;
    padding-block: 4px;
    margin-block-start: 24px;
  }

  & .banner {
    background-color: var(--color-white);
    border: 2px solid var(--color-red);
    border-radius: 10px;
    margin-block-start: 16px;
    inline-size: 88.27%;
    box-shadow: 0 6px 6px 0 rgb(0 0 0/.16);
    position: relative;

    &:focus-visible>img {
      opacity: .6;
    }

    &>img {
      inline-size: 100%;
      border-radius: 8px;
    }
  }

  @media (any-hover: hover) {
    & .banner:hover>img {
      opacity: .6;
    }
  }

  & .value {
    padding-block: 31px 16px;
    position: relative;
    z-index: 1;

    &>img {
      display: block flow;
      position: absolute;
      inset-block-end: 16px;
      inset-inline-end: 20px;
    }
  }

  & .valueInner {
    display: block grid;
    row-gap: 30px;
    place-items: center;
  }

  & .valueBody {
    display: inherit;
    place-items: center;
    row-gap: 15px;
  }

  & .valueTtl {
    inline-size: 69%;
  }

  & .valueDesc {
    font-size: 16px;
    font-weight: 500;
    line-height: calc(28 / 16);
    inline-size: 86%;
    padding-block-end: unset;
  }

  & .cardUnit {
    display: block flex;
    flex-wrap: wrap;
    gap: 19px 6%;
    inline-size: 90%;
    padding-block-end: 53px;
    position: relative;

    &>span {
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: 0;
      font-size: 10px;
      line-height: calc(14 / 10);
      inline-size: 43%;
      display: block flex;

      &::before {
        content: "※";
      }
    }
  }

  & .card {
    inline-size: 46.82%;
    aspect-ratio: 158 / 287;
    perspective: 1000px;
    appearance: none;
    background-color: var(--color-white);
    border: unset;
    border-radius: 8px;
    cursor: pointer;
    transition: scale .35s cubic-bezier(.34, 1.56, .64, 1);
    scale: var(--hover, 1.2);
    position: var(--hover, relative);
    z-index: var(--hover, 10);
  }

  & .cardInner {
    display: block flow;
    inline-size: 100%;
    block-size: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .65s cubic-bezier(.645, .045, .355, 1), box-shadow .35s ease;
    box-shadow: var(--hover, 0 0 18px rgb(0 0 0/.3));
    border-radius: inherit;
  }

  & .card.flipped>.cardInner {
    transform: rotateY(180deg);
  }

  & .cardFront,
  & .cardBack {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    backface-visibility: hidden;
    overflow: hidden;
  }

  & .cardFront {
    background-color: var(--color-red);
    display: block grid;
    padding-block: 17px 9px;
  }

  & .valueLabel {
    display: block flex;
    align-items: start;
    justify-content: end;
    column-gap: 8px;
    margin-inline-end: 14px;
    position: relative;

    &>img:first-of-type {
      margin-block-start: 4px;
    }
  }

  & .cardPhoto {
    aspect-ratio: 148/102;
    object-fit: cover;
    margin-block-start: 3px;
    margin-inline-start: 10px;
  }

  & .cardTtl {
    color: var(--color-white);
    font-size: 15px;
    font-weight: 700;
    line-height: calc(22 / 15);
    margin-block-start: 5px;
    margin-inline-start: 10px;

    &>sup {
      color: inherit;
      font-size: .5em;
    }
  }

  & .btnFlip {
    display: block grid;
    place-items: center;
    justify-content: end;
    margin-block-start: 9px;
    margin-inline-end: 10px;

    &>span {
      color: var(--color-white);
      font-size: 9px;
    }
  }

  & .cardBack {
    background-color: var(--color-white);
    border: 2px solid var(--color-red-dark);
    transform: rotateY(180deg);
    display: block grid;
    grid-template-rows: auto 1fr auto;
    padding-block: 14px 12px;
    text-align: start;
  }

  & .backTtl {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-red);
    line-height: calc(20 / 14);
    padding-inline: 10px;

    &>sup {
      color: inherit;
      font-size: .5em;
    }
  }

  & .bacBody {
    font-size: 12px;
    color: var(--color-text-base);
    line-height: calc(20 / 12);
    padding-inline: 10px;
    margin-block-start: 5px;
    position: relative;

    &>sup {
      font-size: .5em;
    }

    &>small {
      font-size: 9px;
      line-height: calc(13 / 9);
      display: block flex;
      padding-inline: inherit;
      position: absolute;
      inset-block-end: -42px;
      inset-inline-start: 0;
      inline-size: 66%;

      &::before {
        content: "※";
      }
    }
  }

  & .btnBack {
    display: block grid;
    place-items: center;
    justify-content: end;
    margin-block-start: 9px;
    margin-inline-end: 10px;

    &>span {
      color: var(--color-red);
      font-size: 9px;
    }
  }

  & .num {
    background-color: var(--color-bg-green-light);
    position: relative;
    padding-block-end: 64px;
  }

  & .illustPen {
    position: absolute;
    inset-block-start: 58px;
    inset-inline-start: -14px;
  }

  & .illustLadder {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 16px;
  }

  & .numInner {
    display: block grid;
    place-items: center;
    row-gap: 16px;
    margin-block-start: -33svi;
  }

  & .numTtl {
    inline-size: 68.54%;
  }

  & .accordion {
    display: block grid;
  }

  & .accordionStat {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 5.3%;
    inline-size: 89%;

    & .accordionTab {
      grid-template-columns: 1fr 32px;
      padding-inline-start: 10px;
      block-size: 32px;

      & .accordionTabTxt {
        color: var(--color-white);
        font-weight: 500;
        font-size: 12px;
        line-height: calc(17 / 12);
      }

      & .accordionTabIcon {
        background-color: var(--color-stat-icon);
        grid-template: 'tab-icon' / 11px;
      }
    }

    & .accordionContent {
      background-color: var(--color-stat-content);
      padding-block: 18.5px;
    }
  }

  & .accordionFig {
    background-color: var(--color-white);
    border-inline: 2px solid var(--color-border-light);
    border-block-start: 2px solid var(--color-border-light);
    border-start-start-radius: 79px;
    border-start-end-radius: 79px;
    padding-block: 56px 18px;
    text-align: center;
  }

  & .accordionTab {
    background-color: var(--color-text-base);
    border: unset;
    cursor: pointer;
    display: block grid;
    align-items: center;
    inline-size: 100%;
    text-align: start;

    &[aria-expanded='true']>.accordionTabIcon::after {
      rotate: 0deg;
    }
  }

  & .accordionTabIcon {
    display: inherit;
    place-content: center;
    block-size: 100%;

    &::before,
    &::after {
      content: "";
      grid-area: tab-icon;
      background-color: var(--color-white);
      block-size: 1px;
    }

    &::after {
      rotate: 90deg;
      transition: rotate .3s;
    }
  }

  & .accordionLead {
    color: var(--color-yellow);
    font-size: 15px;
    font-weight: 700;
    line-height: calc(22 / 15);
    text-align: center;
    padding-block-end: unset;
  }

  & .accordionDesc {
    color: var(--color-white);
    font-size: 13px;
    line-height: calc(21 / 13);
    padding-block: 10px 0;
    padding-inline: 15px;
  }

  & .accordionLink {
    color: var(--default, var(--color-link-default)) var(--hover, var(--color-link));
    font-size: 13px;
    line-height: calc(21 / 13);
    margin-inline: 15px;
    display: inline flow-root;
    text-decoration-line: revert;
  }

  & .accordionNote {
    color: var(--color-white);
    font-size: 10px;
    line-height: calc(15 / 10);
    padding-block: 4px 0;
    padding-inline: 15px;
  }

  & .cta {
    display: block grid;
    place-items: center;
    padding-block: 64px;
  }

  & .ctaLink {
    border: 2px solid var(--color-red);
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 6px 6px 0 rgb(0 0 0/.2);
    position: relative;
    inline-size: min(88.27%, 800px);

    &:focus-visible {
      opacity: .8;

      & img {
        opacity: 1;
      }
    }
  }

  @media (any-hover: hover) {
    & .ctaLink:hover {
      opacity: .8;

      & img {
        opacity: 1;
      }
    }
  }

  & .ctaTtl {
    padding-inline: 5.29%;
    padding-block: 18px;

    &>img {
      inline-size: 100%;
      transition: opacity .4s;
    }
  }

  & .ctaLead {
    background-color: var(--color-red);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    padding-block: 2px 1px;
  }

  & .ctaArrow {
    position: absolute;
    inset-inline-end: -2px;
    inset-block-end: -2px;
    inline-size: 32px;
    block-size: 32px;
    background-color: var(--color-text-base);
    border-end-end-radius: 8px;
    display: block grid;
    place-content: center;
  }

  & .ctaMore {
    padding-block-end: 20px;

    & .ctaTtl {
      padding-inline: 5%;
      padding-block-end: 20px;
    }
  }

  & .topics {
    padding-block-end: unset;
  }

  & .topicsHero {
    position: relative;
  }

  & .topicsPhotos {
    display: grid;
    grid-template-columns: 1fr;

    &>img {
      object-fit: cover;
      inline-size: 100%;
      block-size: 100%;
      aspect-ratio: 375/248;
    }
  }

  & .topicsHeroOverlay {
    position: absolute;
    inset: 0;
    margin-inline: auto;
    display: block grid;
    place-items: center;
    place-content: center;
    row-gap: 15px;
    inline-size: 82%;
  }

  & .topicsTtl {
    inline-size: 84%;

    &>img {
      inline-size: 100%;
    }
  }

  & .topicsHeroDesc {
    color: var(--color-white);
    font-size: 16px;
    font-weight: 500;
    line-height: calc(28 / 16);
    padding-block-end: unset;
  }

  & .topicsBody {
    display: block grid;
    grid-template-columns: 1fr;
    place-items: center;
    row-gap: 47px;
    padding-block-end: 37px;
    background: linear-gradient(var(--color-white) 0%, var(--color-bg-green-light) 100%);
  }

  & .topicsLabel {
    display: inherit;
    place-items: center;
    place-content: center;
    row-gap: 19px;
    text-align: center;
    inline-size: 185px;
    block-size: 189px;
    border-block-start: 10px solid var(--color-topics-accent);
    position: relative;
    z-index: 1;
    margin-block-start: -10px;

    &::before {
      content: "";
      position: absolute;
      inset-block-start: 49%;
      inset-inline: 0;
      margin-inline: auto;
      block-size: 2px;
      inline-size: 68%;
      display: block flow;
      background-color: var(--color-white);
    }
  }

  & .topicsLabelTtl {
    inline-size: 90%;
    margin-block-start: -15px;

    &>img {
      inline-size: 100%;
    }
  }

  & .topicsLabelSub {
    font-size: 15px;
    font-weight: 700;
    line-height: calc(22 / 15);
    padding-block-end: unset;
  }

  & .topicsribbon {
    display: block flow;
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: -1;

    &>img {
      inline-size: 100%;
      block-size: 100%;
    }
  }

  & .topicsIllust {
    position: absolute;
    inset-inline-start: -55px;
    inset-block-end: -23px;
  }

  & .topicsContent {
    inline-size: 81%;
    display: block grid;
  }

  & .topicsContentTtl {
    font-size: 20px;
    font-weight: 700;
    line-height: calc(30 / 20);
  }

  & .topicsContentDesc {
    font-size: 16px;
    line-height: calc(30 / 16);
    padding-block-end: unset;
    margin-block-start: 12px;
  }

  & .topicsContentLink {
    font-size: 16px;
    font-weight: 500;
    line-height: calc(28 / 16);
    color: var(--default, var(--color-link)) var(--hover, var(--color-link-hover));
    text-decoration: underline;
    justify-self: end;
    margin-block-start: 12px;
  }

  & .introduction {
    background-color: var(--color-introduction-bg);
    margin-block-start: 16px;
    padding-block: 29px 64px;
  }

  & .introductionInner {
    display: block grid;
    place-items: center;
    row-gap: 23px;
  }

  & .introductionTtl {
    display: inherit;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 7px;
    inline-size: 91%;

    &>img {
      inline-size: 100%;
    }
  }

  & .accordionDept {
    row-gap: 12px;

    & .accordionItem {
      &.civil {
        & .accordionTab {
          border-color: var(--color-civil-1);
        }

        & .accordionTabIcon {
          background-color: var(--color-civil-1);
        }

        & .deptTag {
          background-color: var(--color-civil-3);
          color: var(--color-civil-2);
        }

        & .deptKeywordTtl {
          color: var(--color-civil-1);
        }

        & .deptBtn {
          background-color: var(--default, var(--color-civil-1)) var(--hover, var(--color-civil-2));
        }
      }

      &.architecture {
        & .accordionTab {
          border-color: var(--color-architecture-1);
        }

        & .accordionTabIcon {
          background-color: var(--color-architecture-1);
        }

        & .deptTag {
          background-color: var(--color-architecture-3);
          color: var(--color-architecture-2);
        }

        & .deptKeywordTtl {
          color: var(--color-architecture-1);
        }

        & .deptBtn {
          background-color: var(--default, var(--color-architecture-1)) var(--hover, var(--color-architecture-2));
        }
      }

      &.mechanicale {
        & .accordionTab {
          border-color: var(--color-mechanical-1);
        }

        & .accordionTabIcon {
          background-color: var(--color-mechanical-1);
        }

        & .deptTag {
          background-color: var(--color-mechanical-3);
          color: var(--color-mechanical-2);
        }

        & .deptKeywordTtl {
          color: var(--color-mechanical-1);
        }

        & .deptBtn {
          background-color: var(--default, var(--color-mechanical-1)) var(--hover, var(--color-mechanical-2));
        }
      }

      &.electrical {
        & .accordionTab {
          border-color: var(--color-electrical-1);
        }

        & .accordionTabIcon {
          background-color: var(--color-electrical-1);
        }

        & .deptTag {
          background-color: var(--color-electrical-3);
          color: var(--color-electrical-2);
        }

        & .deptKeywordTtl {
          color: var(--color-electrical-1);
        }

        & .deptBtn {
          background-color: var(--color-electrical-2);
        }
      }

      &.life {
        & .accordionTab {
          border-color: var(--color-life-1);
        }

        & .accordionTabIcon {
          background-color: var(--color-life-1);
        }

        & .deptTag {
          background-color: var(--color-life-3);
          color: var(--color-life-2);
        }

        & .deptKeywordTtl {
          color: var(--color-life-1);
        }

        & .deptBtn {
          background-color: var(--default, var(--color-life-1)) var(--hover, var(--color-life-2));
        }
      }

      &.information {
        & .accordionTab {
          border-color: var(--color-information-1);
        }

        & .accordionTabIcon {
          background-color: var(--color-information-1);
        }

        & .deptTag {
          background-color: var(--color-information-3);
          color: var(--color-information-2);
        }

        & .deptKeywordTtl {
          color: var(--color-information-1);
        }

        & .deptBtn {
          background-color: var(--default, var(--color-information-1)) var(--hover, var(--color-information-2));
        }
      }
    }

    & .accordionTab {
      border-inline-start: 10px solid;
      grid-template-columns: 1fr 48px;
      grid-template: "tabName tabIcon" auto
        "tabNameEn tabIcon" auto/auto 48px;
      padding-inline-start: 18px;
    }

    & .accordionTabIcon {
      grid-area: tabIcon;

      &::before,
      &::after {
        inline-size: 14px;
        block-size: 2px;
      }
    }

    & .accordionContent {
      background-color: var(--color-white);

      &::before {
        content: "";
        display: block flow;
        inline-size: 100%;
        block-size: 16px;
        background: linear-gradient(rgb(128 128 128/.3) 0%,
            rgb(255 255 255/.3) 100%);
      }
    }
  }

  & .accordionTabName {
    color: var(--color-white);
    font-size: 17px;
    font-weight: 700;
    line-height: calc(21 / 17);
    letter-spacing: calc(80em / 1000);
    grid-area: tabName;
    margin-block-start: 11px;
  }

  & .accordionTabNameEn {
    color: var(--color-tab-en);
    font-family: var(--ff-roboto);
    font-size: 10px;
    line-height: calc(16 / 10);
    letter-spacing: calc(40em / 1000);
    grid-area: tabNameEn;
    margin-block-end: 8px;
  }

  & .deptBody {
    display: block grid;
    row-gap: 23px;
    inline-size: 81%;
    margin-inline: auto;
    padding-block-end: 40px;
  }

  & .deptBodyMain {
    margin-block-start: 16px;
  }

  & .deptTags {
    display: block flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  & .deptTag {
    font-size: 14px;
    font-weight: 500;
    line-height: calc(30 / 14);
    text-align: center;
    padding-inline: 11px;
    inline-size: fit-content;
  }

  & .deptLead {
    font-size: 20px;
    font-weight: 700;
    line-height: calc(30 / 20);
    margin-block-start: 20px;
  }

  & .deptDesc {
    font-size: 16px;
    line-height: calc(28 / 16);
    margin-block-start: 9px;
    padding-block-end: unset;
  }

  & .deptKeyword {
    margin-block-start: 10px;
  }

  & .deptKeywordTtl,
  & .deptKeywordList {
    padding-block-end: unset;
  }

  & .deptKeywordTtl {
    font-family: var(--ff-roboto);
    font-size: 16px;
    font-weight: 700;
    line-height: calc(30 / 16);
    letter-spacing: calc(40em / 1000);
    display: block grid;
    column-gap: 13px;
    align-items: center;
    grid-template-columns: auto 1fr;

    &::after {
      content: "";
      block-size: 1px;
      inline-size: 100%;
      border-block-end: 1px dashed var(--color-border-dashed);
    }
  }

  & .deptKeywordList {
    font-size: 13px;
    line-height: calc(21 / 13);
  }

  & .deptBodySub {
    display: inherit;
    row-gap: 24px;
  }

  & .deptPict {
    & img {
      inline-size: 100%;
      block-size: 100%;
      aspect-ratio: 295/178;
      object-fit: cover;
    }
  }

  & .deptBtn {
    color: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    line-height: calc(20 / 14);
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0px 3px 0px rgb(0 0 0/.1);
    display: block grid;
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
    padding-inline: 17px;
    padding-block: 14px;

    &::before {
      content: "";
    }

    &>span {
      display: block grid;
    }

    & svg {
      justify-self: end;
    }
  }

  & .cenu {
    display: block flow;
    margin-inline: auto;
  }
}

@media screen and (706px <=width) {
  #contents {
    padding-block-start: 10px;

    &>#breadClumb {
      padding-inline-start: unset !important;
    }
  }

  #contents .nichidai {
    padding-block-end: 80px;

    & .firstView {
      padding-block: 124px 343px;
      background-image: url(../img/background.png);
    }

    & .heroHead {
      inline-size: 71%;
    }

    & .heroCont {
      grid-template-columns: 460px 1fr;
      column-gap: 19px;
      inline-size: 71.75%;
      margin-block-start: 119px;
    }

    & .heroMessage {
      margin-block-start: 22px;
    }

    & .heroMessageTtl {
      inline-size: 460px;

      &>img {
        inline-size: 100%;
      }
    }

    & .heroDesc {
      margin-block-start: 20px;
    }

    & .brandMark {
      translate: 9px -2px;

      &>img {
        inline-size: 100%;
      }
    }

    & .sceneGallery {
      margin-block-start: 44px;
      inline-size: 100%;
      grid-template-columns: repeat(4, 1fr);
    }

    & .sceneGalleryImg-lab {
      margin-block-start: 38%;
    }

    & .sceneGalleryImg-field {
      margin-block-start: 25%;
    }

    & .sceneGalleryImg-craft {
      margin-block-start: 13%;
    }

    & .about {
      margin-block-start: -302px;
    }

    & .aboutInner {
      background: unset;

      &>.pict {
        margin-block-start: -115px;
      }
    }

    & .aboutHead {
      display: block grid;
      grid-template-columns: 53.3% 1fr;
      column-gap: 3.9%;
      align-items: end;
      inline-size: 78%;
      margin-block-start: unset;
    }

    & .aboutTtl {
      &>img {
        inline-size: 100%;
      }
    }

    & .aboutLead {
      margin-block-start: unset;
    }

    & .bannerLead {
      margin-block-start: 39px;
      inline-size: 77.5%;
      font-size: 20px;
      line-height: calc(32 / 20);
    }

    & .banner {
      inline-size: 77.29%;
      border-width: 3px;
    }

    & .value {
      padding-block: 48px 0;

      &>img {
        inset-block-start: -55px;
        inset-block-end: unset;
        inset-inline-end: 12px;
        inline-size: 186px;
        block-size: 344px;
      }
    }

    & .valueInner {
      row-gap: 46px;
    }

    & .valueBody {
      row-gap: 22px;
    }

    & .valueTtl {
      inline-size: 67.77%;
      margin-inline-start: -3%;
    }

    & .valueDesc {
      inline-size: 71%;
    }

    & .cardUnit {
      gap: 26px;
      inline-size: 93.5%;
      justify-content: center;
      padding-block-end: 58px;

      &>span {
        inset-inline-start: unset;
        inset-inline-end: 18%;
        font-size: 12px;
        line-height: calc(16 / 12);
        inline-size: 18%;
      }
    }

    & .card {
      inline-size: 22.95%;
      aspect-ratio: 221/285;
      border-radius: 10px;

      &:first-of-type {
        & .valueLabel>img:last-of-type {
          inline-size: 36px;
        }
      }

      &:nth-of-type(2),
      &:nth-of-type(3),
      &:nth-of-type(4),
      &:nth-of-type(5),
      &:nth-of-type(6),
      &:nth-of-type(7) {
        & .valueLabel>img:last-of-type {
          inline-size: 41px;
        }
      }
    }

    & .cardFront,
    & .cardBack {
      border-radius: inherit;
    }

    & .cardFront {
      padding-block: 12px;
    }

    & .valueLabel {
      margin-inline-end: 19px;
    }

    & .cardPhoto {
      aspect-ratio: 207 / 128;
      margin-block-start: -7px;
      margin-inline-start: 15px;
    }

    & .cardTtl {
      font-size: 17px;
      line-height: calc(24 / 17);
      text-align: start;
      margin-block-start: 8px;
      margin-inline-start: 15px;
    }

    & .btnFlip {
      margin-inline-end: 14px;
      margin-block-start: unset;
      translate: 0 -12px;

      &>img {
        inline-size: 28px;
        block-size: 28px;
      }

      &>span {
        translate: 0 2px;
      }
    }

    & .cardBack {
      padding-block-start: 18px;
    }

    & .backTtl {
      font-size: 18px;
      line-height: calc(24 / 18);
    }

    & .bacBody {
      font-size: 13px;
      line-height: calc(22 / 13);
      margin-block-start: 10px;

      &>small {
        font-size: 10px;
        line-height: calc(15 / 10);

        & br {
          display: none;
        }
      }
    }

    & .btnBack {
      &>img {
        inline-size: 28px;
        block-size: 28px;
      }
    }

    & .num {
      margin-block-start: -175px;
    }

    & .illustPen {
      inline-size: 180px;
      inset-block-start: 279px;
      inset-inline-start: -28px;
    }

    & .illustLadder {
      inline-size: 190px;
      inset-block-end: unset;
      inset-block-start: 199px;
      inset-inline-end: -4px;
    }

    & .numInner {
      margin-block-start: -114px;
      row-gap: 33px;
    }

    & .numTtl {
      inline-size: 40.54%;
    }

    & .accordionStat {
      grid-template-columns: repeat(5, 1fr);
      column-gap: 20px;
      inline-size: 92%;

      & .accordionItem:last-of-type {
        position: relative;
        z-index: 1;
      }

      & .accordionTabTxt {
        padding-block-end: 1px;
      }
    }

    & .accordionFig {
      border-start-start-radius: 87px;
      border-start-end-radius: 87px;
      padding-block: 61px 24px;
    }

    & .cta {
      padding-block: 100px;
    }

    & .ctaLink {
      border-radius: 10px;
      border-width: 3px;
    }

    & .ctaTtl {
      padding-inline: 12.5%;
      padding-block: 28px 20px;
    }

    & .ctaLead {
      font-size: 20px;
      padding-block: 7px 6px;
    }

    & .ctaArrow {
      inline-size: 64px;
      block-size: 64px;

      &>svg {
        inline-size: 12.33px;
        block-size: 20px;
      }
    }

    & .ctaMore {
      padding-block-end: 23px;

      & .ctaTtl {
        padding-inline: 10.8%;
        padding-block: 31px 28px;
      }
    }

    & .topicsPhotos {
      grid-template-columns: 1fr 1fr;

      &>img {
        aspect-ratio: 516/340;
      }
    }

    & .topicsHeroOverlay {
      inline-size: 57.5%;
      row-gap: 19px;
      margin-block-start: 11px;
    }

    & .topicsTtl {
      inline-size: 66%;
    }

    & .topicsBody {
      grid-template-columns: 28.7% 1fr;
      place-items: end start;
      column-gap: 35px;
      padding-block-end: 39px;
    }

    & .topicsLabel {
      inline-size: 210px;
      block-size: 246px;
      border-block-start: 12px solid var(--color-topics-accent);
      margin-block-start: -12px;
      row-gap: 25px;
      justify-self: end;

      &::before {
        inset-block-start: 48%;
      }
    }

    & .topicsIllust {
      inline-size: 132px;
      inset-inline-start: -39px;
    }

    & .topicsContent {
      inline-size: 88%;
      margin-block-end: 3px;
    }

    & .topicsLabelTtl {
      inline-size: 100%;
      margin-block-start: -32px;
    }

    & .topicsContentTtl {
      font-size: 24px;
      line-height: calc(28 / 24);
    }

    & .topicsContentDesc {
      margin-block-start: 16px;
    }

    & .introduction {
      padding-block: 55px 80px;
    }

    & .introductionInner {
      row-gap: 32px;
    }

    & .introductionTtl {
      inline-size: 57%;
      column-gap: 10px;
    }

    & .accordionDept {
      inline-size: 83.5%;
      row-gap: 20px;

      & .accordionItem.mechanicale {
        & .deptBody {
          grid-template:
            "tags tags" auto
            "lead bodySub" auto
            "desc bodySub" auto
            "keyword bodySub" /61.69% 38.31%;

          & .deptTag:nth-of-type(2) {
            margin-inline-end: 45px;
          }
        }
      }

      & .accordionTab {
        border-inline-start-width: 16px;
        grid-template-columns: 1fr 72px;
        grid-template: "tabName tabNameEn tabIcon" auto
          /auto 1fr 72px;
        column-gap: 23px;
        padding-inline-start: 29px;
        block-size: 72px;
      }

      & .accordionTabIcon {

        &::before,
        &::after {
          inline-size: 19px;
        }
      }
    }

    & .accordionTabName {
      margin-block-start: unset;
      font-size: 24px;
      line-height: calc(30 / 24);
    }

    & .accordionTabNameEn {
      margin-block-end: unset;
      justify-self: end;
      font-size: 15px;
      line-height: calc(30 / 15);
      letter-spacing: calc(40em / 1000);
    }

    & .deptBody {
      inline-size: 89.54%;
      margin-block-start: 33px;
      row-gap: unset;
      grid-template:
        "tags bodySub" auto
        "lead bodySub" auto
        "desc bodySub" auto
        "keyword bodySub" /61.69% 38.31%;
      padding-block-end: 44px;
    }

    & .deptBodyMain {
      display: contents;
    }

    & .deptTags {
      grid-area: tags;
    }

    & .deptLead {
      font-size: 22px;
      line-height: calc(30 / 22);
      grid-area: lead;
    }

    & .deptDesc {
      font-size: 15px;
      line-height: calc(26 / 15);
      margin-block-start: 13px;
      grid-area: desc;
      inline-size: 94%;
    }

    & .deptKeyword {
      margin-block-start: 11px;
      grid-area: keyword;
      inline-size: 92%;
    }

    & .deptBodySub {
      row-gap: 32px;
      grid-area: bodySub;
      align-items: start;
      grid-template-rows: auto 1fr;
    }

    & .deptBtn {
      padding-inline: 10px;
    }

    & .cenu {
      inline-size: 400px;
    }
  }
}