* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: 'Noto Sans JP', sans-serif;

    background: #ece8e6;

    color: #333;

    line-height: 1.6;



}



img {

    width: 100%;

}



html,

body {

    margin: 0;

    padding: 0;

}



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

   layout

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

.l-header {

    position: fixed;

    inset: 0 0 auto 0;

    z-index: 100;

    transition: background-color 0.3s ease, box-shadow 0.3s ease;

}



/* 初期状態（FV上部） */

.l-header.is-fv-top {

    background-color: transparent;

    box-shadow: none;

}



/* スクロール後（ナビ表示状態） */

.l-header.is-scrolled {

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

}



.l-main {

    padding-top: 0;

}



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

   header

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

.p-header {

    width: 100%;

}

.is-scrolled .p-header {

    width: 100%;

    background: linear-gradient(

      to bottom,

      #ff0000 0%,

      #d10000 100%

    );

}



.p-header__inner {

    max-width: 1120px;

    margin: 0 auto;

    padding: 8px 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.p-header__inner div {

    display: flex;

    align-items: center;

    gap: 35px;

}



.p-global-nav__link {

  text-decoration: none;

}



.p-header__logo {

    margin-left: 11vw;

}



/* ロゴ */

.p-header__logo-link {

    display: inline-flex;

    align-items: center;

    text-decoration: none;

}



.p-header__logo-link h1 {

    display: flex;

}



.p-header__logo-text {

    font-size: 25px;

    font-weight: 700;

    letter-spacing: 0.06em;

    color: #fff;

}



/* SNSアイコン */

.is-scrolled .p-header__SNS {

  display: flex;

}



ul.p-header__SNS {

    display: none;

    list-style-type: none;

    align-items: center;

    flex-wrap: nowrap;

    flex-direction: row;

    justify-content: center;

    gap: 10px;

}



li.p-header__SNS-item {

    max-width: 30px;

    width: 30px;

    flex-shrink: 0;

}



.p-header__SNS-link img {

    vertical-align: middle;

}



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

   global nav (PC / scroll後)

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

.p-global-nav {

    display: none;

    /* 初期状態は非表示（FVではハンバーガーだけ） */

}



.p-global-nav__list {

    display: flex;

    gap: 24px;

    margin: 0;

    padding: 0;

    list-style: none;

}



.p-global-nav__link {

    display: inline-block;

    font-size: 14px;

    text-decoration: none;

    color: #fff;

    position: relative;

    border: 1px solid #fff;

    padding: 5px;

    width: 170px;

    text-align: center;

    margin: 0;

}



.p-global-nav__link:hover {

    color: #ff0000;

    background: #fff;

    transition: width 0.2s ease;

}



/* スクロール後にナビ表示（PC幅） */

.l-header.is-scrolled .p-global-nav {

    display: none;

}



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

   hamburger

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

.c-hamburger {

    position: relative;

    width: 40px;

    height: 27px;

    padding: 0;

    border: none;

    background: none;

    display: inline-flex;

    flex-direction: column;

    justify-content: space-between;

    cursor: pointer;

    z-index: 91;

}



.c-hamburger__line {

    display: block;

    width: 100%;

    height: 3px;

    border-radius: 2px;

    background-color: #fff;

    transition: transform 0.3s ease, opacity 0.3s ease;

}



/* 開閉アニメーション */

.c-hamburger.is-open .c-hamburger__line:nth-child(1) {

    transform: translateY(12px) rotate(45deg);

}



.c-hamburger.is-open .c-hamburger__line:nth-child(2) {

    opacity: 0;

}



.c-hamburger.is-open .c-hamburger__line:nth-child(3) {

    transform: translateY(-12px) rotate(-45deg);

}







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

   drawer

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

.p-drawer {

    position: fixed;

    inset: 0;

    z-index: 90;

    display: none;

}



.p-drawer.is-open {

    display: block;

    overflow: hidden;

}



.p-drawer__inner {

    position: absolute;

    inset: 0 0 0 auto;

    width: 75%;

    max-width: 375px;

    background-color: rgb(0 0 0 / 75%);

    padding: 24px;

    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.16);

    overflow: auto;

    margin-top: 88px;

}



.p-drawer__bg {

    position: absolute;

    inset: 0;

    border: none;

    padding: 0;

    background-color: unset;

    cursor: pointer;

}



/* ドロワーナビ */

.p-drawer-nav__list {

    margin: 0;

    padding: 0;

    list-style: none;

}



.p-drawer-nav__item {

    border-bottom: 1px solid #666;

}



.p-drawer-nav__item:first-child {

    border-top: 1px solid #666;

}



.p-drawer-nav__link {

    display: flex;

    align-items: center;

    padding: 16px 0;

    font-size: 14px;

    text-decoration: none;

    color: #fff;

    transition: color 0.2s ease;

}



.p-drawer-nav__link::before {

    content: '>';

    display: inline-block;

    margin-right: 12px;

    font-weight: bold;

    color: #fff;

}



.p-drawer-nav__link:hover {

    color: #ccc;

}



/* カテゴリーグループ */

.p-drawer-nav__group {

    margin-bottom: 24px;

}



.p-drawer-nav__group:last-child {

    margin-bottom: 0;

}



.p-drawer-nav__group-title {

    padding: 16px 0 12px 0;

    font-size: 16px;

    font-weight: 600;

    color: #fff;

    border-bottom: 1px solid #666;

    margin: 0;

}



.p-drawer-nav__group-title a {

    color: #fff;

    text-decoration: none;

}



.p-drawer-nav__group-list {

    margin: 0;

    padding: 0;

    list-style: none;

}



.main-menu .p-drawer-nav__group-item {

    margin-left: 0;

    margin-bottom: 5px;

    padding-bottom: 5px;

    border-bottom: 1px solid #666;

}



.p-drawer-nav__group-item {

    margin-left: 20px;

}



.main-menu .p-drawer-nav__group-item {

    margin-left: 0;

}



.p-drawer-nav__group-link {

    display: flex;

    align-items: center;

    padding: 5px 0 5px 16px;

    font-size: 15px;

    text-decoration: none;

    color: #fff;

    transition: color 0.2s ease;

    margin: 0;

}



.main-menu .p-drawer-nav__group-link {

    padding:  5px 0 5px 0;

}



.p-drawer-nav__group-link::before {

    content: '＞';

    font-size: 13px;

    display: inline-block;

    margin-right: 5px;

    font-weight: 400;

    color: #fff;

    margin-left: -16px;

}



.main-menu .p-drawer-nav__group-link::before {

    content: unset;

}



.p-drawer-nav__group-link:hover {

    color: #ccc;

}



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

   fv

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

.p-fv {

  background-image: linear-gradient(180deg, #ff0000, #d10000);

  color: #fff;

}



.p-fv__inner {

  width: 100%;

  position: relative;

  overflow: hidden;

}



/* ------------------------------

  Header overlay

------------------------------ */

.p-fvHeader {

  position: absolute;

  top: 24px;

  left: 32px;

  right: 32px;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  z-index: 30;

}



.p-fvHeader__brand {

  display: flex;

  align-items: center;

  gap: 14px;

  text-decoration: none;

  color: #fff;

}



.p-fvHeader__logo {

  width: 74px;

  height: auto;

  display: block;

}



.p-fvHeader__name {

  font-weight: 700;

  font-size: 18px;

  letter-spacing: 0.08em;

}



/* hamburger */

.p-fvHeader__hamburger {

  width: 52px;

  height: 52px;

  border: none;

  background: transparent;

  padding: 0;

  display: grid;

  place-items: center;

  cursor: pointer;

}



.p-fvHeader__hamburgerLine {

  display: block;

  width: 30px;

  height: 2px;

  background: #fff;

  border-radius: 2px;

}



.p-fvHeader__hamburgerLine + .p-fvHeader__hamburgerLine {

  margin-top: 6px;

}



/* ------------------------------

  Slider

  ※背景画像 + 右キャッチがスライド

------------------------------ */

.p-fvSlider {

  position: relative;

  z-index: 5;

}



.p-fvSlide {

  position: relative;

}



.p-fvSlide__bg {

  inset: 0;

  display: grid;

  place-items: center;

  pointer-events: none;

  z-index: 5;

}



.p-fvSlide__bgImg {

  width: clamp(40vw, 80vw,100%);

  height: auto;

  display: block;

  transform: translateY(0px);

}



/* 右キャッチ（スライド内：背景と一緒に動く） */

.p-fvSlide__catch {

  position: absolute;

  right: 5vw;

  top: 7vw;

  z-index: 10;

}



span.swiper-pagination-bullet.swiper-pagination-bullet-active {

    width: 40px;

    opacity: 1;

    background-color: #fff;

    transform: translateY(1px);

}



span.swiper-pagination-bullet{

    position: relative;

    width: 10px;

    height: 10px;

    padding: 0;

    border: none;

    border-radius: 9999px;

    opacity: 0.35;

    cursor: pointer;

    transition:

        width 0.35s ease,

        opacity 0.35s ease,

        background-color 0.35s ease,

        transform 0.35s ease;

}



/* ------------------------------

  Left copy（固定）

------------------------------ */



@media screen and (max-width:1790px) {

  .p-header__logo {

    margin-left: 10vw;

  }

  .is-scrolled .p-header__logo {

    margin-left: 0;

    transition: 0.1s ease;

  }

}



@media screen and (max-width:1660px) {

  .p-header__logo {

    margin-left: 12vw;

  }

}



@media screen and (max-width:1610px) {

  .p-header__logo {

    margin-left: 14vw;

  }

}



@media screen and (max-width:1390px) {

  .p-header__logo {

    margin-left: 15vw;

  }

}



@media screen and (max-width:1230px) {

  .p-header__logo {

    margin-left: 15vw;

  }

  .p-fvdesign_imgwrap {

    top: -28rem;

    max-width: 150px;

  }

}



.p-fvdesign_imgwrap {

    position: relative;

}



.p-fvdesign_imgwrap {

    position: absolute;

    top: 20px;

    left: 5vw;

    max-width: 10vw;

}



.p-fvdesign_title-img.pc {

    display: block;

    width: 30vw;

}



.p-fvdesign_title-img.sp {

    display: none;

}



.p-fvdesign_title {

    position: absolute;

    bottom: 5vh;

    left: 5vw;

    z-index: 1;

}



@media screen and (max-width: 768px) {

  .p-fvdesign_title-img.pc {

    display: none;

  }



  .p-fvdesign_title-img.sp {

      display: block;

      width: 79vw;

  }

}





/* ------------------------------

  Right vertical catch（共通）

------------------------------ */

.p-fvCatch__text {

  margin: 0;

  writing-mode: vertical-rl;

  text-orientation: mixed;

  font-weight: 800;

  letter-spacing: 0.06em;

  font-size: 70px;

  line-height: 1.1;

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.p-fvCatch__img.pc {

    display: block;

    width: 12vw;

    margin: auto;

}



.p-fvCatch__img.sp {

    display: none;

}



@media screen and (max-width: 768px) {

  .p-fvCatch__img.pc {

      display: none;

  }



  .p-fvCatch__img.sp {

      display: block;

      width: 5.5vw;

      margin-left: auto;

  }

}



/* ------------------------------

  Bottom-right nav（固定）

------------------------------ */

.p-fvNav {

  position: absolute;

  right: 110px;

  bottom: 80px;

  z-index: 25;

  display: flex;

  align-items: center;

  gap: 14px;

  pointer-events: auto;

}



.p-fvNav__pagination {

  display: flex;

  align-items: center;

  gap: 10px;

}



/* Swiper pagination bullet */

.p-fvNav__pagination .swiper-pagination-bullet {

  width: 10px;

  height: 10px;

  border-radius: 999px;

  background: rgba(255,255,255,0.55);

  opacity: 1;

  margin: 0 !important;

}



.p-fvNav__pagination .swiper-pagination-bullet-active {

  background: #fff;

}





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

   section

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

.p-section {

    padding: 80px 16px;

    background-color: #f8f8f8;

}



.p-section:nth-of-type(even) {

    background-color: #ffffff;

}



.p-section__inner {

    max-width: 960px;

    margin: 0 auto;

}



.p-section__title {

    font-size: 22px;

    margin: 0 0 16px;

}



.p-section__text {

    margin: 0;

}



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

   util

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

.u-scroll-lock {

    overflow: hidden;

}



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

   course section

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

.p-course {

    padding: 96px 16px;

    background-color: #ff0000;

    color: #ffffff;

    text-align: center;

}



.p-course__inner {

    max-width: 960px;

    margin: 0 auto;

}



.p-course__head {

    margin-bottom: 48px;

}



.p-course__title {

    margin: 0 0 8px;

    font-size: 26px;

    letter-spacing: 0.16em;

    font-weight: 500;

}



.p-course__subtitle {

    margin: 0;

    font-size: 12px;

    letter-spacing: 0.14em;

}



.p-course__body {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



/* 各段のリスト */

.p-course__list {

    margin: 0;

    padding: 0;

    list-style: none;

    display: flex;

    justify-content: center;

    gap: 16px;

}



/* 2段目を少し細くして中央寄せ */

.p-course__list--row2 {

    max-width: 640px;

    margin-inline: auto;

}



/* アイテム・リンク */

.p-course__item {

    flex: 1 1 auto;

}



.p-course__link {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 180px;

    padding: 16px 24px;

    border: 1px solid #ffffff;

    text-decoration: none;

    color: #ffffff;

    font-size: 16px;

    letter-spacing: 0.14em;

    line-height: 1.4;

}



/* 右下の三角 */

.p-course__link::after {

    content: "";

    position: absolute;

    right: 3px;

    bottom: 3px;

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 0 0 12px 12px;

    border-color: transparent transparent #ffffff transparent;

}



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

   斜めホバーアニメーション（左上→右下）

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

.p-course__link {

    position: relative;

    overflow: hidden;

    z-index: 1;

    transition: color 0.3s ease;

}



/* 文字色・三角の変化 */

.p-course__link:hover {

    color: #ff0000;

}



.p-course__link:hover::after {

    border-color: transparent transparent #ff0000 transparent;

}



/* 白背景アニメーション用 */

.p-course__link::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 170px;

    inset: 0;

    background-color: #ffffff;

    z-index: -1;



    /* 斜めに大きめの背景を仕込む */

    transform: translate(-100%, -100%) rotate(15deg);

    transition: transform 0.85s ease;

}



/* ホバー時：左上→右下へ流れる */

.p-course__link:hover::before {

    transform: translate(0, 0) rotate(0deg);

}



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

   news slider section

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

.p-news {

    padding: 80px 0 72px;

    background-color: #d7d7d7;

    text-align: center;

}



.p-news__inner {

    max-width: 1000px;

    margin: 0 auto;

    position: relative;

}



.p-news__head {

    margin-bottom: 40px;

}



.p-news__title {

    margin: 0 0 4px;

    font-size: 22px;

    letter-spacing: 0.3em;

    font-weight: 500;

    color: #ff0000;

}



.p-news__subtitle {

    margin: 0;

    font-size: 12px;

    letter-spacing: 0.16em;

    color: #ff0000;

}



/* slider base */

.p-news__slider {

    position: relative;

    overflow: hidden;

}



.p-news__track {

    display: flex;

    gap: 24px;

    transition: transform 0.4s ease;

    will-change: transform;

}



/* 両サイドにチラ見えするように、幅を100%より小さく */

.p-news__item {

    flex: 0 0 70%;

    box-sizing: border-box;

}



.p-news__link {

    display: block;

    text-decoration: none;

}



.p-news__thumb {

    margin: 0 auto;

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);

    background-color: #ffffff;

}



.p-news__thumb img {

    display: block;

    width: 100%;

    height: auto;

}



/* dots nav */

.p-news__dots {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin-top: 32px;

}



/* 小さい丸が並んでいて、アクティブだけ棒になるイメージ */

.p-news__dot {

    position: relative;

    width: 10px;

    height: 10px;

    padding: 0;

    border: none;

    border-radius: 9999px;

    background-color: #ff4b4b;

    opacity: 0.35;

    cursor: pointer;

    transition:

        width 0.35s ease,

        opacity 0.35s ease,

        background-color 0.35s ease,

        transform 0.35s ease;

}



.p-news__dot.is-active {

    width: 40px;

    opacity: 1;

    background-color: #ff0000;

    transform: translateY(1px);

}



/* 視覚外テキスト用 */

.u-visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}



.p-news__link_btn {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  min-width: 180px;

  padding: 16px 24px;

  border: 1px solid #ff0000;

  text-decoration: none;

  color: #ff0000;

  font-size: 16px;

  letter-spacing: 0.14em;

  line-height: 1.4;

  max-width: 320px;

  margin: 40px auto 0;

}



.p-news__link_btn::before {

    content: "";

    position: absolute;

    width: 230px;

    height: 170px;

    inset: 0;

    background-color: #ff0000;

    z-index: -1;

    transform: translate(-100%, -100%) rotate(15deg);

    transition: transform 0.85s ease;

}



.p-news__link_btn::after {

    content: "";

    position: absolute;

    right: 3px;

    bottom: 3px;

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 0 0 12px 12px;

    border-color: transparent transparent #ff0000 transparent;

}



.p-news__link_btn:hover::before {

    transform: translate(0, 0) rotate(0deg);

}



.swiper-button-prev,

.swiper-button-next {

  width: 45px !important;

  height: 45px !important;

  background-color: unset;

  border: none;

  cursor: pointer !important;

  color: #ff0000 !important;

}



.swiper-button-prev::after,

.swiper-button-next::after {

  content: '';

}



.swiper-button-prev {

    left: -4vw!important;

    top: 55%!important;

    transform: translateY(50%)!important;

    margin: auto;

}



.swiper-button-prev:after {

    font-size: 27px!important;

}



.swiper-button-next {

    right: -4vw!important;

    top: 55%!important;

    transform: translateY(50%)!important;

    margin: auto;

}



.swiper-button-next:after {

    font-size: 27px!important;

}



@media (max-width: 1100px) {

  .swiper-button-prev {

    display: none!important;

  }



  .swiper-button-next {

      display: none!important;

  }

}







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

   Career Section

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

.p-career {

    position: relative;

    background-color: #ff0000;

    padding: 7vw 0 0;

    overflow: hidden;

    color: #fff;

    background-image: url(https://www.heisei-music.ac.jp/assets/images/career_img.png);

    background-repeat: no-repeat;

    background-size: contain;

    background-position: 25% 150%;

}



.p-section__inner {

    z-index: 2;

    max-width: unset;

    margin: 0 auto;

    width: fit-content;

}



.p-career__head {

    text-align: center;

    margin-bottom: 60px;

}



.p-career__title {

    font-size: 28px;

    letter-spacing: 0.08em;

    margin-bottom: 12px;

}



.p-career__subtitle {

    font-size: 14px;

    opacity: 0.9;

}



.p-career-flex__wrap {

    display: flex;

    gap: 0 50px;

    margin-bottom: 100px;

}



.p-career-flex__wrap:nth-child(even) {

    margin-left: 7.9vw;

}



.p-career__item {

    margin-top: 4.5vw;

    margin-bottom: 7vw;

}



span.small {

    display: block;

    width: fit-content;

    text-align: center;

    font-size: 17px;

}



.hex {

    cursor: default;

    position: relative;

    width: 250px;

    height: 140px;

    background-color: unset;

    margin: 0;

    border-left: solid 2px #fff;

    border-right: solid 2px #fff;

    display: grid;

    transition: 0s;

}



.hex:before,

.hex:after {

    content: "";

    position: absolute;

    z-index: 1;

    width: 175px;

    height: 175px;

    transform: scaleY(0.5) rotate(-45deg);

    background-color: unset;

    left: 14.5%;

    transition: 0s;

}



.hex:before {

    top: -88px;

    border-top: solid 2px #fff;

    border-right: solid 2px #fff;

}



.hex:after {

    bottom: -88px;

    border-bottom: solid 2px #fff;

    border-left: solid 2px #fff;

}



.hex p {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    position: absolute;

    font-size: 23px;

    color: #fff;

    top: 1.1547005383792515px;

    left: 0;

    width: 250px;

    height: 140px;

    z-index: 2;

    text-align: center;

}







/* -------------------------------------

   Background Hex Images

------------------------------------- */

.p-career__bg {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

}



.p-career__bg-item {

    position: absolute;

    width: 220px;

    height: 240px;

    clip-path: polygon(49.5% 1%,

            94% 24%,

            94% 76.5%,

            49.5% 100%,

            4.5% 76%,

            4.5% 24.5%);

    background-size: cover;

    background-position: center;

}



/* 画像指定（img01.png〜連番） */

.p-career__bg-item.img01 {

    background-image: url("./images/hex-img01.jpg");

    top: 5%;

    left: 7%;

}



.p-career__bg-item.img02 {

    background-image: url("./images/hex-img02.jpg");

    top: 200px;

    left: -40px;

}



.p-career__bg-item.img03 {

    background-image: url("./images/hex-img03.jpg");

    top: 60px;

    right: 80px;

}



.p-career__bg-item.img04 {

    background-image: url("./images/hex-img04.jpg");

    top: 240px;

    right: -40px;

}



.p-career__bg-item.img05 {

    background-image: url("./images/hex-img05.jpg");

    bottom: 40px;

    left: 120px;

}



.p-career__bg-item.img06 {

    background-image: url("./images/hex-img06.jpg");

    bottom: 20px;

    right: 120px;

}







section#sec04 {

    padding: 135px 0 70px;

    position: relative;

}



.p-teachers:after {

    content: "";

    background-image: url(https://www.heisei-music.ac.jp/assets/images/career_img02.png);

    background-repeat: no-repeat;

    display: block;

    background-size: contain;

    background-position: center;

    position: absolute;

    top: -11vw;

    left: -2vw;

    width: 100%;

    height: 20vw;

    z-index: 1;

}



.p-teachers__btn {

    width: fit-content;

    margin: 0 auto;

    text-align: center;

}

.p-teachers__btn a {

    display: block;

    width: fit-content;

    text-align:center;

    padding: 16px 24px;

}



.p-teachers__title {

    width: fit-content;

}





p.p-teachers__subtitle {

    width: fit-content;

    margin: 0 auto;

}



.p-teachers__btn {

    font-size: 14px;

    letter-spacing: 0.08em;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #e60012;

    text-decoration: none;

    color: #e60012;

    font-size: 16px;

    letter-spacing: 0.14em;

    line-height: 1.4;

    }

.p-teachers__btn h2,

.p-teachers__btn p{

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #e60012;

    letter-spacing: 0.14em;

    line-height: 1.4;

    }

.p-teachers__btn h2{

    font-size: 22px;

}

.p-teachers__btn p{

    font-size: 16px;

}

.p-teachers__btn::after {

    content: "";

    position: absolute;

    right: 3px;

    bottom: 3px;

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 0 0 12px 12px;

    border-color: transparent transparent #e60012 transparent;

}

.p-teachers__btn a:link{

    color: #e60012;

    text-decoration: none;

}





.p-campus__flex-wrap {

    display: flex;

    justify-content: center;

    gap: 50px;

}



.p-campus__flex-item a {

    text-decoration: none;

}



section#sec05 {

    padding: 100px 2%;

    background-color: #ff0000;

}



.p-campus__head {

    text-align: center;

    margin-bottom: 50px;

}



img.p-campus__title {

    width: auto;

}

h2.p-campus__title,

p.p-campus__subtitle {

    color: #fff;

}





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

  Project: Footer

  - FLOCSS: p-*

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



.p-footer {

  background: #d8d8d8;

  padding: 70px 0 40px;

}



.p-footer__inner {

  width: min(1060px, calc(100% - 80px));

  margin: 0 auto;

}



.p-footer__content {

  width: 100%;

}



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

  上段：ボタン（5枚横並び）

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

.p-footer__flex {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 36px;

  margin: 0 0 64px;

}



.p-footer__item {

  width: 150px;

}



.p-footer__item a {

  display: block;

  text-decoration: none;

}



.p-footer__item img {

  display: block;

  width: 100%;

  height: auto;

}



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

  下段：左（キャッチ＋ロゴ） / 右（住所など）

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

.p-footer-info__flex {

  display: flex;

  align-items: flex-end;

  gap: 80px;

  justify-content: space-around;

}



.p-footer-catch {

  width: 420px;

}



.p-footer-catch p {

  margin: 0 0 26px;

  color: #e60012;

  font-weight: 700;

  letter-spacing: 0.08em;

  font-size: 18px;

  margin-left: 80px;

}



.p-footer-catch img {

  display: block;

  width: min(360px, 100%);

  height: auto;

}



.p-footer-info-content {

  flex: 1;

  padding-top: 120px; /* 画像に合わせて右側が下がっている見え方を再現 */

}



.p-footer-info-content p {

  margin: 0 0 10px;

  line-height: 1.8;

  font-size: 14px;

  color: #ff0000;

}



.p-footer-info-content a {

  color: #ff0000;

  text-decoration: none;

}



.p-footer-info-content a:hover {

  opacity: 0.7;

}





.footer {

    background-color: #d8d8d8;

    margin: auto;

    padding: 5rem 0 3rem;

}



.footer p {

    text-align: center;

    color: #ff0000;

    letter-spacing: 1.1px;

}



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

   media query

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

@media (min-width: 768px) {

    .p-header__inner {

        padding: 24px;

    }



    .p-fv__title {

        font-size: 36px;

    }



    .p-fv__text {

        font-size: 16px;

    }



    .p-section {

        padding: 96px 24px;

    }



    /* PC幅では、スクロール後にグローバルナビを表示 */

    .l-header.is-scrolled .p-global-nav {

        display: block;

    }



    .p-course__title {

        font-size: 30px;

    }



    .p-course__subtitle {

        font-size: 13px;

    }



    .u-br-pc {

        display: inline;

    }







    .p-news {

        padding: 96px 24px 80px;

    }



    .p-news__title {

        font-size: 24px;

    }



    .p-news__item {

        flex-basis: 60%;

    }



    img.p-campus__title {

      width: 100%;

    }

}



@media (min-width: 1024px) {

    .p-header__inner {

        max-width: 91vw;

    }





    .p-course {

        padding: 64px 16px;

    }



    .p-course__head {

        margin-bottom: 32px;

    }



    .p-course__body {

        gap: 12px;

    }



    .p-course__list {

        flex-wrap: wrap;

        gap: 12px;

    }



    .p-course__list--row2 {

        max-width: 100%;

        flex-wrap: nowrap;

        width: 70%;

    }



    .p-course__item {

        flex: 0 1 24%;

    }



    ul.p-course__list.p-course__list--row2 li.p-course__item {

        flex: 0 1 100%;

        width: 100%;

    }



    .p-course__link {

        min-width: 0;

        width: 100%;

        padding: 12px 8px;

        font-size: 14px;

        letter-spacing: 0.08em;

    }



    .p-news__item {

        flex-basis: 55%;

    }

}



@media (max-width: 1230px) {

  .l-header.is-scrolled .p-global-nav {

    display: none;

  }

}



@media screen and (max-width: 768px) {

    .p-header__logo {

      margin-left: 0;

    }



    .p-header__logo-text {

      font-size: 19px;

    }



    ul.p-header__SNS {

      display: flex;

      gap: 5px;

    }



    a.p-header__SNS-link {

      margin: auto;

      text-align: center;

      padding: 0;

      width: 100%;

      display: block;

    }



    li.p-header__SNS-item {

      max-width: 100%;

      width: 25px;

      padding: 0;

    }



    .c-hamburger {

        width: 30px;

    }



    .p-header__inner div {

      display: flex;

      align-items: center;

      gap: 10px;

    }



    .p-career {

        padding: 80px 0 100px;

    }



    .p-career-flex__wrap {

        flex-wrap: wrap;

    }



    .p-career-flex__item {

        width: 160px;

        height: 180px;

    }



    .p-career__bg-item {

        width: 160px;

        height: 180px;

        opacity: 0.6;

    }



    .p-campus__flex-wrap {

        flex-direction: column;

    }



    img.p-campus__title {

      width: 100%;

    }

    .p-course__list {

      flex-direction: column;

      width: 100%;

    }

    .p-course__list--row2{

      max-width: 100%;

    }

    /* ヘッダー */

    .p-fv__inner {

      width: 100%;

      min-height: 45vh;

    }

    .p-drawer__inner {

      margin-top: 78px;

    }



    /* SP幅では、スクロール後にグローバルナビを非表示 */

    .l-header.is-scrolled .p-global-nav {

        display: none;

    }



    .p-teachers:after {

      content: none;

    }

}



@media screen and (max-width: 767px ) {

    .p-drawer__inner {

      margin-top: 46px;

    }

}



@media (max-width: 1024px) {

  .p-fvdesign_imgwrap {

    top: 90px;

  }



  .p-fvCatch__img.pc {

    width: 10vw;

  }



  .p-fvSlide__catch {

    right: 5vw;

    top: 9vw;

  }



  .p-header__logo {

    margin-left: 0;

  }



  .p-fvHeader {

    left: 20px;

    right: 20px;

  }



  .p-fvHeader__logo {

    width: 64px;

  }



  .p-fvNav {

    right: 28px;

  }



  .p-footer {

    padding: 56px 0 32px;

  }



  .p-footer__inner {

    width: min(960px, calc(100% - 48px));

  }



  .p-footer__flex {

    gap: 24px;

    margin-bottom: 52px;

  }



  .p-footer__item {

    width: 140px;

  }



  .p-footer-info__flex {

    gap: 56px;

  }



  .p-footer-catch {

    width: 380px;

  }



  .p-footer-info-content {

    padding-top: 100px;

  }

}



@media screen and (max-width: 855px) {

  .l-header.is-scrolled .p-global-nav {

    display: none;

  }

}



@media (max-width: 768px) {



  .p-fvHeader {

    top: 16px;

    left: 16px;

    right: 16px;

  }



  .p-fvHeader__logo {

    width: 54px;

  }



  .p-fvHeader__name {

    font-size: 16px;

  }



  .p-fvSlide__bgImg {

    width: min(760px, 96vw);

    transform: translateY(28px);

  }



  .p-fvSlide__catch {

    position: absolute;

    top: 9vh;

    right: 5vw;

    padding: 0;

    display: block;

    margin: auto;

    text-align: left;

  }



  .p-fvSlide__bgImg {

    width: 100%;

  }



  .p-fvNav {

    right: 1vw;

    bottom: 3vw;

  }



  .p-fvdesign_imgwrap {

    top: 10vh;

    max-width: 25vw;

    z-index: 1;

  }



  section#sec04 {

    padding: 64px 0 64px;

    position: relative;

  }



  .p-footer__inner {

    width: calc(100% - 32px);

  }



  .p-footer__flex {

    flex-wrap: wrap;

    justify-content: center;

    gap: 18px;

    margin-bottom: 40px;

  }



  .p-footer__item {

    width: min(44vw, 170px);

  }



  .p-footer-info__flex {

    flex-direction: column;

    align-items: center;

    gap: 40px;

  }



  .p-footer-catch {

    width: 100%;

  }



  .p-footer-catch p {

    font-size: 16px;

    margin-bottom: 18px;

    margin-left: 80px;

  }



  .p-footer-catch img {

    width: min(360px, 100%);

  }



  .p-footer-info-content {

    padding-top: 0;

  }

}



@media (max-width: 480px) {

  .p-footer {

    padding: 44px 0 28px;

  }



  .p-footer__flex {

    gap: 14px;

  }



  .p-footer__item {

    width: 47%;

  }



  .p-footer-info-content p {

    font-size: 13px;

  }



  .p-fvNav__bar {

    width: 44px;

  }



  .p-fvNav__pagination {

    gap: 8px;

  }

}



/* 六角形コンテナ */

.p-hexagon-container {

    width: 100%;

    max-width: 64.323vw;

    margin: auto;

}



.p-hexagon-flex {

    display: flex;

    gap: 2%;

    justify-content: flex-start;

}



.p-hexagon-flex:nth-of-type(2) {

    justify-content: flex-end;

    margin-top: -3vw;

}



/* 六角形ボタン */

.p-hexagon-btn {

    width: 20.7%;

    transition: transform 0.3s ease;

    background: none;

    border: unset;

}



.p-hexagon-btn:hover {

    transform: scale(1.1);

}



.p-hexagon-btn__shape {

    transition: opacity 0.3s ease;

}



.p-hexagon-btn__text {

    transition: opacity 0.3s ease;

}



.p-hexagon-btn__text.is-hidden {

    opacity: 0;

}



.p-hexagon-btn__text.is-visible {

    opacity: 1;

}



.p-hexagon-btn__jp {

    font-size: 14px;

    font-weight: bold;

    color: white;

    text-align: center;

}



.p-hexagon-btn__en {

    font-size: 11px;

    color: white;

    text-align: center;

    margin-top: 5px;

}



/* モーダル */

.p-modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    z-index: 100;

    align-items: center;

    justify-content: center;

}



.p-modal.is-active {

    display: flex;

}



.p-modal__content {

    position: relative;

    background: linear-gradient(#FF0000, #CF0000);

    width: 80%;

    max-width: 950px;

    padding: 40px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

    animation: slideUp 0.3s ease-out;

}



@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.p-modal__close-btn {

    position: absolute;

    top: 20px;

    right: 20px;

    width: 40px;

    height: 40px;

    border: 3px solid #fff;

    border-radius: 50%;

    background: none;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background-color 0.3s ease;

    padding: 0;

}



.p-modal__close-btn:hover {

    background-color: #fff;

}



.p-modal__close-btn::before,

.p-modal__close-btn::after {

    content: '';

    position: absolute;

    width: 20px;

    height: 3px;

    background-color: #fff;

}



.p-modal__close-btn:hover::before,

.p-modal__close-btn:hover::after {

    background-color: #ff0000;

}



.p-modal__close-btn::before {

    transform: rotate(45deg);

}



.p-modal__close-btn::after {

    transform: rotate(-45deg);

}



.p-modal__header {

    margin-bottom: 20px;

}



.p-modal__title {

    font-size: 40px;

    font-weight: bold;

    margin-bottom: 10px;

}



.p-modal__subtitle {

    font-size: 20px;

    color: #ffff;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    gap: 10px;

}



.p-modal__description {

    font-size: 16px;

    color: #333;

    line-height: 1.8;

    margin-top: 20px;

}



.p-modal__description-flex {

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    gap: 2%;

}



img.p-modal__description-img {

    width: 49%;

}



.p-modal__description-text {

    color: #fff;

    width: 49%;

}



.p-modal__description-list {

    list-style-type: none;

    font-size: 20px;

    font-weight: 200;

    margin-bottom: 20px;

}



.p-modal__description-list-item {

    margin-bottom: 5px;

}



.p-modal__description-text-p {

    font-size: 17px;

    font-weight: 200;

}



.p-modal__description-text-course {

    border-top: 2px solid #fff;

    padding-top: 15px;

    margin-top: 15px;

}



.p-modal__description-text-small {

    margin-bottom: 15px;

}



.p-modal__description-text-course-list {

    list-style-type: none;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: 10px 2%;

}



.p-modal__description-text-course-list-item {

    width: 49%;

    background: #fff;

    color: #333;

    text-align: center;

    border-radius: 10rem;

    font-size: 15px;

    position: relative;

    overflow: hidden;

}

.p-modal__description-text-course-list-item-link {

    display: block;

    text-decoration: none;

    color: inherit;

}



.p-modal__description-text-course-list-item-link span{

    z-index: 15;

    position: relative;

}

.p-modal__description-text-course-list-item-link:hover {

    transition: transform 0.35s ease;

    color: #fff;

}

/* 白背景アニメーション用 */

.p-modal__description-text-course-list-item-link:before {

    content: "";

    position: absolute;

    width: 100%;

    height: 170px;

    inset: 0;

    background-color: #d70000;



    /* 斜めに大きめの背景を仕込む */

    transform: translate(-100%, -100%) rotate(15deg);

    transition: transform 0.55s ease;

}



/* ホバー時：左上→右下へ流れる */

.p-modal__description-text-course-list-item-link:hover:before {

    transform: translate(0, 0) rotate(0deg);

}



.p-modal__subtitle:after {

    content: "";

    background-color: #ffffff;

    content: "";

    height: 1px;

    width: 50px;

}



.p-modal__description-text-course-list-item.course-red {

    background: none;

    color: #fff;

    border: 2px solid #fff;

}



/* モーダル矢印ナビゲーション */

.p-modal__arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background-color: rgba(0, 0, 0, 0.5);

  color: white;

  border: none;

  padding: 12px 16px;

  font-size: 24px;

  cursor: pointer;

  border-radius: 4px;

  transition: all 0.3s ease;

  z-index: 1001;

}



.p-modal__arrow:hover {

  background-color: rgba(0, 0, 0, 0.8);

  transform: translateY(-50%) scale(1.1);

}



.p-modal__arrow--left {

  left: -25px;

}



.p-modal__arrow--right {

  right: -25px;

}



@media (max-width: 768px) {

  .p-modal__arrow {

    padding: 10px 14px;

    font-size: 20px;

  }



  .p-modal__arrow--left {

    left: 10px;

  }



  .p-modal__arrow--right {

    right: 10px;

  }

}



@media screen and (max-width: 768px) {

  .p-career {

    background-image: none;

  }

  /* 六角形コンテナ */

  .p-hexagon-container {

    max-width: 100vw;

    width: 95%;

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    gap: 0;

  }



  .p-hexagon-flex {

      gap: 0;

      flex-direction: column;

      width: 100%;

  }



  .p-hexagon-flex:nth-of-type(2) {

      margin: 0;

      padding: 0;

      margin-left: -2px;

  }



  /* 六角形ボタン */

  .p-hexagon-btn {

      width: 100%;

      line-height: 0;

      position: relative;

  }



  .p-hexagon-btn:hover {

    transform: none;

  }



  .p-hexagon-btn__text {

    margin-top: -2px;

  }



  /* モーダル内の画像とテキスト */

  .p-modal__description-flex {

    flex-direction: column;

  }



  .p-modal__subtitle {

      font-size: 16px;

  }



  .p-modal__title {

      font-size: 20px;

  }

  img.p-modal__description-img {

    width: 100%;

    margin-bottom: 10px;

  }



  .p-modal__description-text {

      color: #fff;

      width: 100%;

  }



  .p-modal__description-list {

      font-size: 16px;

      margin-bottom: 10px;

  }



  .p-modal__description-list-item {

      margin-bottom: 0;

  }



  .p-modal__description-text-p {

      font-size: 17px;

  }



  .p-modal.is-active {

    overflow: hidden;

  }



  .p-modal__content {

    width: 90%;

    padding: 20px;

    height: 150vw;

    overflow: auto;

  }



  .p-modal__header {

    margin-top: 35px;

    margin-bottom: 20px;

  }



  .p-modal__description-text-small {

      margin-bottom: 15px;

  }



  .p-modal__description-text-course-list-item {

      width: 49%;

      font-size: 10px;

  }

}



@media screen and (min-width: 520px) and (max-width: 768px) {

  .p-modal__content {

    height: 100vw;

  }

}



/* メインイメージPCSP場合分け */

.p-fvSlide__bgImg.pc {

  display: block;

}

.p-fvSlide__bgImg.sp {

  display: none;

}



@media (max-width: 768px) {

.p-fvSlide__bgImg.pc {

  display: none;

}

.p-fvSlide__bgImg.sp {

  display: block;

}

}



/* メインイメージPCSP場合分け */

.pc {

  display: block;

}

.sp {

  display: none;

}



@media (max-width: 768px) {

  .pc {

    display: none;

  }

  .sp {

    display: block;

  }

}

/* 教員紹介セクション */

.p-teachers_section {

  margin-bottom: 0;

}



.p-teachers_wrapper {

  overflow: hidden;

}



.p-teachers_track {

  display: flex;

  gap: 0;

  padding: 0 0 90px;

  width: max-content;

  /* GPU加速とカクつき防止 */

  will-change: transform;

  transform: translate3d(0, 0, 0);

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

}



.p-teachers_item {

  flex-shrink: 0;

  width: 180px;

  height: auto;

  aspect-ratio: 25 / 29;

  background: #e0e0e0;

  cursor: pointer;

  transition: transform 0.3s ease;

  margin-right: 20px;

}



.p-teachers_item:last-child {

  margin-right: 20px; /* 変更：0 → 20px（ループ時の間隔統一） */

}



.p-teachers_item:hover {

  transform: scale(1.05);

}



.p-teachers_item-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.p-teachers_item-image a {

  text-decoration: none;

  color: red;

  display: block;

  width: 100%;

  height: 100%;

}



.p-teachers_item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.p-teachers_item-name-title {

  font-size: 19px;

  color: #ff0000;

}



.p-teachers_item-name-subtitle {

  font-size: 12px;

  color: red;

  font-weight: 100;

  font-family: 'Noto Sans JP', sans-serif;

}



.p-teachers_content {

  margin: 50px auto 80px;

}



.p-teachers_item-name {

  margin: 15px auto;

}



.p-teachers__head {

  text-align: center;

  margin: 30px 0 0;

  color: red;

}



.p-teachers__title {

  font-size: 35px;

  letter-spacing: 0.08em;

  text-align: center;

  margin: 0 auto 12px;

  font-weight: 500;

}



.p-teachers__subtitle {

  font-size: 17px;

  letter-spacing: 3px;

  opacity: 0.9;

}



@media (max-width: 768px) {

  .p-teachers_content {

    margin: 50px auto 30px;

  }

  .p-teachers_item {

    width: 150px;

    aspect-ratio: 25 / 29;

  }

}



/* サイドバー メニュー CSS */



.side-menu-wrapper.sp {

    display: none;

}



@media (max-width: 768px) {

  .side-menu-wrapper.sp {

      display: flex;

  }

}



.side-menu-wrapper {

    position: fixed;

    top: 46px;

    right: 0;

    z-index: 1000;

    transition: transform 0.3s ease;

    /* border-radius: 5px 0 0 5px; */

}



.side-menu-wrapper.closed {

    transform: translateX(145px);

}



.toggle-btn {

    background-color: white;

    border: none;

    width: 20px;

    min-width: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: background-color 0.2s ease;

    font-size: 20px;

    color: #333;

    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2);

    border-radius: 5px 0 0 5px;

}



.toggle-btn:hover {

    background-color: #f0f0f0;

}



.toggle-btn:active {

    transform: scale(0.95);

}



.menu-content {

    background-color: rgba(0, 0, 0, 0.7);

    padding: 5px;

    width: 145px;

    min-height: 100px;

    border-radius: 0;

    overflow: hidden;

    color: white;

    margin-bottom: 15px;

    font-size: 13px;

    display: none;

}



.menu-item {

    color: white;

    padding: 5px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    cursor: pointer;

    transition: color 0.2s ease;

    font-size: 13px;

}



.menu-item a {

    color: #fff;

    text-decoration: unset;

}



.menu-item:last-child {

    border-bottom: none;

}



.menu-item:hover {

    color: #ff6b6b;

}



/* デモ用のメインコンテンツ */

.demo-content {

    text-align: center;

    color: white;

}



.demo-content h1 {

    font-size: 36px;

    margin-bottom: 20px;

}



.demo-content p {

    font-size: 18px;

    opacity: 0.9;

}



/* 指タップモーション */

.scroll-hint {

    display: none;

    flex-direction: column;

    align-items: center;

    gap: 16px;

}

@media (max-width: 768px) {

    .scroll-hint {

        display: flex;

    }

}

.scroll-hint__text {

    color: #fff;

    font-size: 14px;

    letter-spacing: 0.08em;

    font-weight: 500;

    text-align: center;

}



/* 指のモーション */

.scroll-hint__icon {

    position: relative;

    width: 60px;

    height: 50px;

    margin: 0 auto;

}



/* 指の本体 */

.finger {

    position: absolute;

    /* width: 24px; */

    /* height: 40px; */

    /* background: #fff; */

    left: 50%;

    transform: translateX(-50%);

    animation: fingerTap 1.5s ease-in-out infinite;

}



/* 指の爪 */

.finger::before {

    content: '';

    position: absolute;

    width: 8px;

    height: 8px;

    background: #ff0000;

    border-radius: 50%;

    top: -8px;

    left: 50%;

    transform: translateX(-50%);

    opacity: 0.8;

}



/* タップアクション表現 */

.finger::after {

    content: '';

    position: absolute;

    width: 24px;

    height: 24px;

    border: 2px solid rgba(255, 255, 255, 0.4);

    border-radius: 50%;

    left: 50%;

    bottom: 20px;

    transform: translateX(-50%);

    animation: tapWave 1.5s infinite;

}



@keyframes fingerTap {

    0% {

        top: 0;

        opacity: 1;

    }

    50% {

        top: 16px;

        opacity: 0.3;

    }

    100% {

        top: 0;

        opacity: 1;

    }

}



@keyframes tapWave {

    0% {

        width: 24px;

        height: 24px;

        opacity: 1;

    }

    100% {

        width: 48px;

        height: 48px;

        opacity: 0;

    }

}



/* スクロール時にフェードアウト */

.scroll-hint.is-hidden {

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.4s ease;

}



.scroll-hint.is-show {

    opacity: 1;

    transition: opacity 0.4s ease;

}



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

    矢印のスタイル

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

.p-hexagon-btn__arrow {

    position: absolute;

    bottom: 17%;

    left: 50%;

    transform: translateX(-50%);

    z-index: 3;

    display: none;

}



@media (max-width: 768px) {

    .p-hexagon-btn__arrow {

        bottom: 12%;

        display: block;

    }

}



/* くの字矢印 SVG */

.arrow-icon {

    width: 30px;

    height: 30px;

    display: block;

    animation: arrowBounce 1.5s ease-in-out infinite;

}



/* 矢印アニメーション: 100% → 0% で上下移動 */

@keyframes arrowBounce {

    0% {

        transform: translateY(0px);

        opacity: 1;

    }

    50% {

        transform: translateY(10px);

        opacity: 0;

    }

    100% {

        transform: translateY(0px);

        opacity: 1;

    }

}



.demo-container {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 60px;

    max-width: 1200px;

}





@media screen and (max-width: 768px) {

    .footer{

        padding-bottom: 8rem;

    }

    .footer__group-list {

        display: flex;

        position: fixed;

        bottom: 0;

        left: 0;

        list-style: none;

        width: 100%;

        margin: 0;

        padding: 0;

        z-index: 100;

    }

    li.footer__group-item {

        background: linear-gradient(180deg, #e4111c, #9a0d09);

        width: 33.33333333333333333333%;

        border: 1px solid #fff;

        opacity: 0.9;

        display: flex;

    }



    .footer__group.sp {

        width: 100%;

        display: block;

        margin: 0;

        d: 0;

    }



    a.footer__group-link {

        color: #fff;

        text-decoration: none;

        text-align: center;

        display: flex;

        justify-content: center;

        flex-direction: column;

        align-items: center;

        padding: 10px 5px;

        margin: auto;

        font-size: 12px;

        letter-spacing: 0;

        line-height: 1.3;

        gap: 7px;

        font-weight: 500;

    }

    img.footer__group-link_img {

        height: 40px;

        width: fit-content;

        display: block;

        width: auto;

        max-width: 100%;

    }

}