@charset "UTF-8";
/* 変数・mixin は config に集約 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap");
/* --------------------------------------------------------------
# common
-------------------------------------------------------------- */
@media print, screen and (min-width: 992px) {
  .sec_aboutus,
  .sec_menu,
  .sec_news,
  .sec_link,
  .sec_sns {
    padding-block: 6.4rem;
  }
}
@media screen and (max-width: 991px) {
  .sec_aboutus,
  .sec_menu,
  .sec_news,
  .sec_link,
  .sec_sns {
    padding-block: 4.8rem;
  }
}

.content_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.content_title .top_section_title_jp {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin: 0;
}
.content_title .top_section_title_en {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
@media print, screen and (min-width: 992px) {
  .content_title .top_section_title_en {
    font-size: 4.8rem;
  }
}
@media screen and (max-width: 991px) {
  .content_title .top_section_title_en {
    font-size: 3.2rem;
  }
}
.content_title .top_section_title_en span {
  color: #E64D4D;
}

/* --------------------------------------------------------------
# mainvisual（背景＝/assets/img/page/index.jpg, キャッチ＝/assets/img/index/catchcopy.jpg）
-------------------------------------------------------------- */
.hero_kv {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  /* キャッチ画像位置（調整用変数） */
  --catch-w: 240px;
  --catch-left: 50%;
  --catch-top: 50%;
  /* ★ 復活：キャッチ左下ロゴ */
}
.hero_kv .hero_bg {
  position: absolute;
  inset: 0;
  margin: 0;
}
.hero_kv .hero_bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}
.hero_kv .hero_inner {
  position: absolute;
  inset: 0;
}
.hero_kv .hero_catchImg {
  position: absolute;
  left: var(--catch-left);
  top: var(--catch-top);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: block;
  width: var(--catch-w);
  max-width: 90svw;
  z-index: 2;
  /* ロゴより下、背景より上 */
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.hero_kv .hero_catchImg img {
  width: 100%;
  height: auto;
  display: block;
}
.hero_kv .hero_logo {
  position: absolute;
  z-index: 3;
  /* キャッチより前面 */
}
.hero_kv .hero_logo img {
  width: clamp(56px, 5.5vw, 88px);
  height: auto;
  display: block;
  -webkit-filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
          filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}
.hero_kv .scroll_hint {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -ms-grid;
  display: grid;
  place-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 0;
  color: #444;
  padding: 0.2rem;
  cursor: default;
}
.hero_kv .scroll_hint .scroll_text {
  font-size: 10px;
  letter-spacing: 0.14em;
  opacity: 0.8;
}
.hero_kv .scroll_hint .scroll_icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
  position: relative;
}
.hero_kv .scroll_hint .scroll_icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 30%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(0, 0, 0, 0.55);
  border-bottom: 2px solid rgba(0, 0, 0, 0.55);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  -webkit-animation: scroll_bounce 1.6s ease-in-out infinite;
          animation: scroll_bounce 1.6s ease-in-out infinite;
}
@-webkit-keyframes scroll_bounce {
  0%, 100% {
    -webkit-transform: translate(-50%, -30%) rotate(45deg);
            transform: translate(-50%, -30%) rotate(45deg);
    opacity: 0.6;
  }
  50% {
    -webkit-transform: translate(-50%, 20%) rotate(45deg);
            transform: translate(-50%, 20%) rotate(45deg);
    opacity: 1;
  }
}
@keyframes scroll_bounce {
  0%, 100% {
    -webkit-transform: translate(-50%, -30%) rotate(45deg);
            transform: translate(-50%, -30%) rotate(45deg);
    opacity: 0.6;
  }
  50% {
    -webkit-transform: translate(-50%, 20%) rotate(45deg);
            transform: translate(-50%, 20%) rotate(45deg);
    opacity: 1;
  }
}

/* SP：レイアウトは維持しつつスケールのみ調整 */
@media screen and (max-width: 991px) {
  .hero_kv {
    /* ブラウザUIに強い 100svh を優先しつつ、対応外は 100dvh にフォールバック */
    min-height: calc(100svh - var(--topbar-h));
    /* 一部古いブラウザ向けの保険（後行で上書きされるので OK） */
    min-height: calc(100dvh - var(--topbar-h));
    /* 既存のキャッチ位置（必要に応じて微調整） */
    --catch-w: 240px;
    --catch-left: 50%;
    --catch-top: 47%;
  }
}
/* 非表示テキスト用ユーティリティ */
.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* --------------------------------------------------------------
# sec_aboutus
-------------------------------------------------------------- */
.sec_aboutus {
  /* 左カラム */
  /* 右カラム（右端まで寄せる） */
  /* 上の横長画像 */
  /* 下の 2 枚（左：横 / 右：縦） */
}
.sec_aboutus .inner {
  overflow: visible;
}
.sec_aboutus .aboutus {
  display: -ms-grid;
  display: grid;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -webkit-column-gap: clamp(2rem, 2vw, 3.2rem);
     -moz-column-gap: clamp(2rem, 2vw, 3.2rem);
          column-gap: clamp(2rem, 2vw, 3.2rem);
  /* PC：本文1 + 右メディア1 の2カラム */
  /* SP：縦並び */
}
@media print, screen and (min-width: 992px) {
  .sec_aboutus .aboutus {
    -ms-grid-columns: clamp(400px, 50vw, 640px) auto;
    grid-template-columns: clamp(400px, 50vw, 640px) auto;
  }
}
@media screen and (max-width: 991px) {
  .sec_aboutus .aboutus {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}
.sec_aboutus .aboutus_head {
  max-width: 66ch;
}
.sec_aboutus .aboutus_head .aboutus_title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(2.2rem, 1.2rem + 1.6vw, 3.2rem);
  line-height: 1.5;
  margin: 0 0 1.6rem;
}
.sec_aboutus .aboutus_head .aboutus_title strong {
  color: #E64D4D;
}
.sec_aboutus .aboutus_head .aboutus_text p {
  margin: 0 0 1.2rem;
}
.sec_aboutus .aboutus_media {
  /* ★right-bleed：右端をビューポートに合わせる */
  margin-right: calc(50% - 50vw);
  /* 右列全体の最大幅（レイアウト画像と同じくらい） */
  inline-size: min(560px, 50vw);
  display: -ms-grid;
  display: grid;
  row-gap: 4rem;
  justify-items: end;
  /* 右寄せが強めに出る */
}
@media screen and (max-width: 991px) {
  .sec_aboutus .aboutus_media {
    row-gap: 2rem;
    margin-right: 0;
    /* SP は通常幅 */
    inline-size: 100%;
    justify-items: stretch;
  }
}
.sec_aboutus .ph-top {
  margin: 0;
  inline-size: 100%;
}
.sec_aboutus .ph-top img {
  width: 100%;
  height: auto;
  display: block;
}
.sec_aboutus .ph_grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2rem 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  inline-size: 100%;
}
@media print, screen and (min-width: 992px) {
  .sec_aboutus .ph_grid {
    margin-right: 25%;
  }
}
.sec_aboutus .ph_grid .ph {
  margin: 0;
}
@media print, screen and (min-width: 992px) {
  .sec_aboutus .ph_grid .ph:first-child {
    margin-top: -25%;
  }
}
.sec_aboutus .ph_grid .ph img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

/* --------------------------------------------------------------
# sec_menu
-------------------------------------------------------------- */
.sec_menu .card_grid {
  display: -ms-grid;
  display: grid;
  gap: 2rem;
}
@media print, screen and (min-width: 992px) {
  .sec_menu .card_grid {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 991px) {
  .sec_menu .card_grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.sec_menu .card_item {
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.sec_menu .card_item:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.sec_menu .card_thumb {
  position: relative;
}
.sec_menu .card_thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.sec_menu .card_thumb .card_arrow {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  background: #fff;
  border-radius: 50%;
  padding: 0.5rem;
}
.sec_menu .card_thumb .card_arrow .icon {
  width: 1.2rem;
  height: 1.2rem;
}
.sec_menu .card_meta {
  padding: 1rem;
}
.sec_menu .card_meta .card_title {
  font-weight: bold;
}
.sec_menu .card_meta .card_title .dot {
  color: #E64D4D;
}
.sec_menu .card_meta .card_sub {
  font-size: 1.2rem;
  color: #666;
}

/* よさこいライブラリー */
.feature_library {
  display: -ms-grid;
  display: grid;
  gap: 2rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 6rem;
}
@media print, screen and (min-width: 992px) {
  .feature_library {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 991px) {
  .feature_library {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.feature_library .feature_head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1rem;
}
.feature_library .feature_head .accent_bar {
  display: inline-block;
  width: 0.4rem;
  height: 2rem;
  background: #E64D4D;
  margin-right: 0.8rem;
}
.feature_library .feature_head .feature_title {
  font-size: 1.8rem;
  font-weight: bold;
}
.feature_library .feature_lead {
  margin-bottom: 1.5rem;
  color: #444;
}
.feature_library .feature_thumb img {
  border-radius: 0.5rem;
  width: 100%;
  height: auto;
}

.sec_news .link_box {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 4rem;
}

/* --------------------------------------------------------------
# sec_link（外部リンク）
-------------------------------------------------------------- */
.sec_link .ext_head {
  margin-bottom: 1.6rem;
}
.sec_link .ext_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0.8rem;
  margin: 0;
  font-weight: 700;
  color: #555;
  letter-spacing: 0.02em;
}
.sec_link .ext_title .ext_title_l {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1;
  color: rgba(230, 77, 77, 0.35);
  margin-right: 0.2rem;
}
.sec_link .ext_title .ext_title_sub {
  font-size: 1.4rem;
  color: #888;
  font-weight: 400;
}
.sec_link .ext_grid {
  display: -ms-grid;
  display: grid;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media print, screen and (min-width: 992px) {
  .sec_link .ext_grid {
    -ms-grid-columns: 1fr 2rem 1fr 2rem 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem 2rem;
  }
}
@media screen and (max-width: 991px) {
  .sec_link .ext_grid {
    -ms-grid-columns: 1fr 1.2rem 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
  }
}
.sec_link .ext_item {
  margin: 0;
}
.sec_link .ext_link {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 2px solid #dfe5eb;
  border-radius: 0.5rem;
  -webkit-transition: border-color 0.18s ease, -webkit-transform 0.18s ease, -webkit-box-shadow 0.18s ease;
  transition: border-color 0.18s ease, -webkit-transform 0.18s ease, -webkit-box-shadow 0.18s ease;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, -webkit-transform 0.18s ease, -webkit-box-shadow 0.18s ease;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.sec_link .ext_link:hover, .sec_link .ext_link:focus-visible {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.sec_link .ext_thumb {
  margin: 0;
  overflow: hidden;
  border-radius: calc(0.5rem - 2px);
  aspect-ratio: 3/1;
}
.sec_link .ext_thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------
# sec_sns
-------------------------------------------------------------- */
.sec_sns .sns_title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 1.2rem;
  margin: 0 0 1.6rem;
}
.sec_sns .sns_title .label {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(2.6rem, 2rem + 1vw, 3.6rem);
  line-height: 1;
  background: -webkit-gradient(linear, left top, right top, from(#EE7E7E), to(#9E9E9E));
  background: linear-gradient(90deg, #EE7E7E 0%, #9E9E9E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sec_sns .sns_title .sub {
  color: #888;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}
.sec_sns .sns_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
}
.sec_sns .sns_list .sns_link {
  display: -ms-inline-grid;
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #BEBEBE;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  -webkit-transition: border-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.sec_sns .sns_list .sns_link img {
  width: 60%;
  height: auto;
  display: block;
}
.sec_sns .sns_list .sns_link:hover, .sec_sns .sns_list .sns_link:focus-visible {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  border-color: #858585;
  outline: none;
}
@media screen and (max-width: 991px) {
  .sec_sns .sns_list {
    gap: 1.6rem;
  }
  .sec_sns .sns_link {
    width: 64px;
    height: 64px;
  }
}