@charset "UTF-8";
/**
 * トップページ専用CSS。
 * コーディングガイドラインの「<page>/css/unique.css（そのページのみで使うCSS）」に相当し、
 * ルート（トップページ）用として /drivers/kouhougallery/aak-pr2026/css/unique.css へ出力されます。
 * 共通部分（_foundation/_layout/_object）は /drivers/kouhougallery/aak-pr2026/common/css/_style.css 側で読み込みます。
 *
 * ユーティリティ（u-）はガイドライン上 unique に含まれるため、このファイルにまとめています。
 */
/**
 * ▼ メディアクエリ用ブレイクポイント
 *
 * - $bp-sp:
 *   スマホの上限幅（例: ~767px）
 * - $bp-tab:
 *   タブレットの上限幅（例: ~1023px）
 */
/**
 * ▼ メディアクエリミックスイン
 *
 * - media-pc:
 *   PC向けのスタイルを適用するためのメディアクエリ。
 * - media-tab:
 *   タブレット向けのスタイルを適用するためのメディアクエリ。
 * - media-sp:
 *   スマホ向けのスタイルを適用するためのメディアクエリ。
 */
/**
 * ▼ fluidスケーリングに関する設定
 *
 * - $fluid-vw-min / $fluid-vw-max:
 *   clamp()で滑らかに変化させる際のビューポート最小・最大値。
 *   → 通常はスマホ〜PCの幅（375〜1280pxなど）を想定。
 */
/**
 * ▼ c-section-layout__wrap の ::before（切れ込み装飾）の高さ
 *
 * - $section-deco-height:
 *   PC〜1200px以下でclampする通常時の高さ。padding側と必ず同じ値を使うこと。
 * - $section-deco-height-sp:
 *   SP時（sp_section_img_deco.svg使用時）の固定高さ。
 */
/**
 * ▼ fluid()
 *
 * - clamp()を生成するSass関数。
 * - 引数に最小サイズ・最大サイズを渡すことで、
 *   指定したビューポート範囲内で値を滑らかに変化させる。
 *
 * 使用例:
 *   font-size: fluid(14, 20);
 */
/**
 * @function vw-○○()
 * 指定されたサイズを基準に、ビューポート幅に応じたvw単位の値を計算します。
 * 
 * @param {Number} $size - 基準となるサイズ（ピクセル単位）。
 * @param {Number} $viewport - ビューポートの幅（デフォルトは1920px, 768px, 375px）。
 * @return {String} - 計算されたvw単位の値。
 */
/**
 * ユーティリティクラス（既存互換用）。
 * u-is-pc-tab / u-is-sp など、実ページで使用中のクラスを含むため出力を維持しています。
 * 新規コンポーネントではこれらのクラスを使わず、_object/component または _object/module で実装してください。
 * ガイドラインの common/css 配下に _utility.css は存在しない（unique＝ユーティリティ）ため、
 * 単独では出力せず unique.scss から @use して /drivers/kouhougallery/aak-pr2026/css/unique.css に含めています。
 */
/**
 * トップページ専用CSS。
 * コーディングガイドラインの「<page>/css/unique.css（そのページのみで使うCSS）」に相当し、
 * ルート（トップページ）用として /drivers/kouhougallery/aak-pr2026/css/unique.css へ出力されます。
 * 共通部分（_foundation/_layout/_object）は /drivers/kouhougallery/aak-pr2026/common/css/_style.css 側で読み込みます。
 *
 * ユーティリティ（u-）はガイドライン上 unique に含まれるため、このファイルにまとめています。
 */
/**
 * トップページ専用CSS。
 * コーディングガイドラインの「<page>/css/unique.css（そのページのみで使うCSS）」に相当し、
 * ルート（トップページ）用として /drivers/kouhougallery/aak-pr2026/css/unique.css へ出力されます。
 * 共通部分（_foundation/_layout/_object）は /drivers/kouhougallery/aak-pr2026/common/css/_style.css 側で読み込みます。
 *
 * ユーティリティ（u-）はガイドライン上 unique に含まれるため、このファイルにまとめています。
 */

@media (min-width: 768px) {
  .u-is-sp {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .u-is-pc-tab {
    display: none !important;
  }
}
/**
 * トップページ専用CSS。
 * コーディングガイドラインの「<page>/css/unique.css（そのページのみで使うCSS）」に相当し、
 * ルート（トップページ）用として /drivers/kouhougallery/aak-pr2026/css/unique.css へ出力されます。
 * 共通部分（_foundation/_layout/_object）は /drivers/kouhougallery/aak-pr2026/common/css/_style.css 側で読み込みます。
 *
 * ユーティリティ（u-）はガイドライン上 unique に含まれるため、このファイルにまとめています。
 */

/**
 * トップページ専用CSS。
 * コーディングガイドラインの「<page>/css/unique.css（そのページのみで使うCSS）」に相当し、
 * ルート（トップページ）用として /drivers/kouhougallery/aak-pr2026/css/unique.css へ出力されます。
 * 共通部分（_foundation/_layout/_object）は /drivers/kouhougallery/aak-pr2026/common/css/_style.css 側で読み込みます。
 *
 * ユーティリティ（u-）はガイドライン上 unique に含まれるため、このファイルにまとめています。
 */
/**
 * トップページ専用CSS。
 * コーディングガイドラインの「<page>/css/unique.css（そのページのみで使うCSS）」に相当し、
 * ルート（トップページ）用として /drivers/kouhougallery/aak-pr2026/css/unique.css へ出力されます。
 * 共通部分（_foundation/_layout/_object）は /drivers/kouhougallery/aak-pr2026/common/css/_style.css 側で読み込みます。
 *
 * ユーティリティ（u-）はガイドライン上 unique に含まれるため、このファイルにまとめています。
 */

/**
 * TVCMセクション: MV下ナビの1項目目に対応するコンテンツです。
 */
.c-tvcm {
  position: relative;
  padding: clamp(6.5rem, 10.83vw, 13rem) 0 0;
  padding-top: 13rem !important;
  background-color: var(--color-base-white);
}
@media (max-width: 767px) {
  .c-tvcm {
    padding: 10rem 0 0;
  }
}
.c-tvcm__panel {
  margin: 0 auto;
  padding: 0 21rem 8rem;
  max-width: 1200px;
}
@media (max-width: 767px) {
  .c-tvcm__panel {
    border-radius: 2rem;
    padding: 0 2rem 0;
  }
}
.c-tvcm__banner {
  position: relative;
  margin-top: 7rem;
  padding: 1rem;
  color: var(--color-base-white);
  background-color: var(--color-primary);
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  border-radius: 999px;
  z-index: 1;
}
.c-tvcm__cards {
  position: relative;
  display: flex;
  gap: 2.4rem;
  margin-top: 2.4rem;
  padding: 0 1.5rem 4.8rem;
  z-index: 1;
}
@media (max-width: 767px) {
  .c-tvcm__cards {
    flex-direction: column;
  }
}

.c-webmovie {
  padding: clamp(6.5rem, 10.83vw, 13rem) 0 0;
}
@media (max-width: 767px) {
  .c-webmovie {
    padding: 10rem 0 0;
  }
}
.c-webmovie__panel {
  margin: 0 auto;
  padding: 0 21rem;
  max-width: 1200px;
}
@media screen and (max-width: 1400px) {
  .c-webmovie__panel {
    padding: 0 10.7142857143vw;
  }
}
@media (max-width: 767px) {
  .c-webmovie__panel {
    border-radius: 2rem;
    padding: 0 2rem 4rem;
  }
}
.c-webmovie__banner {
  position: relative;
  margin-top: 7rem;
  padding: 1rem;
  color: var(--color-base-white);
  background-color: var(--color-primary);
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  border-radius: 999px;
  z-index: 1;
}
.c-webmovie__cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.4rem;
  padding: 0 1.5rem 4.8rem;
  z-index: 1;
}
@media screen and (max-width: 1300px) {
  .c-webmovie__cards {
    padding: 0.9230769231vw;
  }
}
@media (max-width: 767px) {
  .c-webmovie__cards {
    grid-template-columns: repeat(1, 1fr);
  }
}
.c-webmovie .c-video-player__character {
  right: 2rem;
}
@media screen and (max-width: 1300px) {
  .c-webmovie .c-card {
    padding: 1.5384615385vw 1.5384615385vw 2.3076923077vw;
  }
}
@media (max-width: 767px) {
  .c-webmovie .c-card {
    padding: 2rem 2rem 3rem;
  }
}
@media (min-width: 768px) {
  .c-webmovie .c-card__title {
    min-height: 4.8rem;
  }
}
.c-webmovie .c-card__text {
  text-align: center;
}
@media (max-width: 767px) {
  .c-webmovie .c-card__text {
    text-align: center;
  }
}

.c-radio {
  padding: clamp(6.5rem, 10.83vw, 13rem) 0 0;
}
@media (max-width: 767px) {
  .c-radio {
    padding: 10rem 0 0;
  }
}
.c-radio__panel {
  margin: 0 auto;
  padding: 0 21rem 15rem;
  max-width: 1200px;
  position: relative;
}
@media (max-width: 767px) {
  .c-radio__panel {
    border-radius: 2rem;
    padding: 3.2rem 2rem 10rem;
  }
}
.c-radio__txt {
  position: relative;
  font-size: 1.6rem;
  margin-top: 3rem;
  z-index: 1;
}
.c-radio__banner {
  position: relative;
  margin-top: 7rem;
  padding: 1rem;
  color: var(--color-base-white);
  background-color: var(--color-primary);
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  border-radius: 999px;
  z-index: 1;
}
.c-radio__slider {
  position: relative;
}
.c-radio__slider .c-radio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 767px) {
  .c-radio__slider .c-radio__grid {
    display: flex;
    gap: 0;
  }
}
.c-radio__slider .c-radio__grid .c-video-player {
  width: 100%;
}
.c-radio__slider.swiper {
  overflow: visible;
}
@media (max-width: 767px) {
  .c-radio__slider.swiper {
    overflow-x: clip;
    overflow-y: visible;
    width: auto;
    margin-inline: -2rem;
  }
}
.c-radio__character {
  display: none;
}
@media (max-width: 767px) {
  .c-radio__character {
    display: block;
    position: absolute;
    right: 1rem;
    bottom: -1rem;
    width: 5.2rem;
    height: auto;
    z-index: 2;
    pointer-events: none;
  }
}
.c-radio__cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2.4rem;
  margin-top: 2.4rem;
  padding: 0 1.5rem 4.8rem;
  z-index: 1;
}
.c-radio__cards .c-link-btn {
  margin-right: auto;
  margin-left: 0;
}
@media (max-width: 767px) {
  .c-radio__cards .c-link-btn {
    margin-left: auto;
  }
}
.c-radio .c-card__title {
  margin-top: 0;
  text-align: left;
}
@media (max-width: 767px) {
  .c-radio .c-card__title {
    text-align: center;
  }
}
.c-radio .c-video-player__play {
  width: 3rem;
  height: 3rem;
}
@media (max-width: 767px) {
  .c-radio .c-video-player__character {
    display: none;
  }
}

.c-newspaper__panel {
  margin: 0 auto;
  padding: 0 21rem 15rem;
  max-width: 1200px;
}
@media (max-width: 767px) {
  .c-newspaper__panel {
    border-radius: 2rem;
    padding: 3.2rem 2rem 0;
  }
}
.c-newspaper__panel:after {
  content: "";
  width: 40px;
  height: 100%;
  background: #E2F0FF;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.c-newspaper__txt {
  font-size: 1.6rem;
  margin-top: 3rem;
}
.c-newspaper__poster {
  margin-top: 3rem;
}
.c-newspaper__poster img {
  width: 100%;
  height: auto;
}
.c-newspaper__btn {
  display: flex;
  align-items: center;
}
.c-newspaper .modal-trigger {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  cursor: pointer;
}
.c-newspaper .modal-trigger__icon {
  display: inline-block;
  width: 4rem;
  height: 4rem;
}
.c-newspaper .modal-trigger__txt {
  font-size: 1.8rem;
  font-weight: 500;
  color: #005BAC;
}

.c-archive {
  display: flow-root;
}
.c-archive__panel {
  margin: 0 auto;
  padding: 0 21rem 15rem;
  max-width: 1200px;
}
@media (max-width: 767px) {
  .c-archive__panel {
    border-radius: 2rem;
    padding: 0 2rem 15rem;
  }
}
.c-archive__panel:after {
  background: #E2F0FF;
}
.c-archive__banner {
  position: relative;
  z-index: 1;
  margin-top: 7rem;
  padding: 1rem;
  color: var(--color-base-white);
  background-color: var(--color-primary);
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  border-radius: 999px;
}
.c-archive__slider {
  position: relative;
  z-index: 1;
}
.c-archive__slider .c-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 767px) {
  .c-archive__slider .c-archive__grid {
    display: flex;
    gap: 0;
  }
}
.c-archive__slider.swiper {
  overflow: visible;
}
@media (max-width: 767px) {
  .c-archive__slider.swiper {
    overflow-x: clip;
    overflow-y: visible;
    width: auto;
    margin-inline: -2rem;
  }
}
.c-archive__character {
  display: none;
}
@media (max-width: 767px) {
  .c-archive__character {
    display: block;
    position: absolute;
    right: 1rem;
    bottom: -1rem;
    width: 7.2rem;
    height: auto;
    z-index: 2;
    pointer-events: none;
  }
}
.c-archive .c-video-player {
  border: none;
}
.c-archive .c-video-player__play {
  width: 3rem;
  height: 3rem;
}
@media (max-width: 767px) {
  .c-archive .c-video-player__character {
    display: none;
  }
}

.c-character {
  background: #F2F8FF;
  border-radius: 10rem 0 0 0;
  position: relative;
  --frame-bar: min(4rem, calc(100vw / 30));
}
@media (max-width: 767px) {
  .c-character {
    position: static;
    background: #fff;
  }
}
.c-character::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: max(0px, 50% - 600px);
  bottom: 0;
  border-left: var(--frame-bar) solid var(--border-light-blue);
  border-top: var(--frame-bar) solid var(--border-light-blue);
  border-top-left-radius: 10rem;
  pointer-events: none;
}
@media (max-width: 767px) {
  .c-character::before {
    content: none;
  }
}
.c-character::after {
  content: "";
  position: absolute;
  top: calc(var(--frame-bar) * -1.5);
  right: max(0px, 50% - 600px);
  width: calc(var(--frame-bar) * 2.5);
  height: calc(var(--frame-bar) * 2.5);
  background: url("/drivers/kouhougallery/aak-pr2026/common/images/section_img_corner.svg") no-repeat center/contain;
  pointer-events: none;
}
@media (max-width: 767px) {
  .c-character::after {
    content: none;
  }
}
.c-character__bg {
  background-image: linear-gradient(0deg, #F2F8FF, transparent);
  position: relative;
  z-index: 5;
}
.c-character__panel {
  margin: 0 auto;
  padding: 10rem 0 15rem;
  width: 1200px;
  max-width: 95%;
  position: relative;
}
@media (max-width: 767px) {
  .c-character__panel {
    padding: 3.2rem 2rem 10rem;
    max-width: 100%;
  }
  .c-character__panel::after {
    height: 106%;
  }
}
@media (min-width: 768px) {
  .c-character__panel {
    background: transparent;
  }
  .c-character__panel::before, .c-character__panel::after {
    content: none;
  }
}
.c-character__layout {
  padding: 4.8rem 0 5rem;
  width: 1200px;
  margin: 0 auto;
  position: relative;
  max-width: 90%;
}
@media (max-width: 767px) {
  .c-character__layout {
    border-radius: 2rem;
    padding: 8rem 2rem 5rem;
  }
}
.c-character__swiper {
  margin-top: 3rem;
  padding-top: 6rem;
  padding-bottom: 4rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .c-character__swiper {
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 8rem;
  }
}
.c-character__swiper .swiper {
  overflow: visible !important;
  position: relative;
}
.c-character__card {
  display: flex !important;
  gap: 2rem;
  flex-direction: column;
  height: auto !important;
}
@media screen and (max-width: 1300px) {
  .c-character__card {
    gap: 1.5384615385vw;
  }
}
@media (max-width: 767px) {
  .c-character__card {
    justify-content: flex-start;
    gap: 2rem;
  }
}
.c-character__card--color-01 .c-character__chapter {
  background: #F96B5A;
}
.c-character__card--color-01 .c-character__name span {
  color: #F96B5A;
}
.c-character__card--color-02 .c-character__chapter {
  background: #EDBE26;
}
.c-character__card--color-02 .c-character__name span {
  color: #EDBE26;
}
.c-character__card--color-03 .c-character__chapter {
  background: #A9D350;
}
.c-character__card--color-03 .c-character__name span {
  color: #A9D350;
}
.c-character__card--color-04 .c-character__chapter {
  background: #68ACEB;
}
.c-character__card--color-04 .c-character__name span {
  color: #68ACEB;
}
.c-character__card--color-05 .c-character__chapter {
  background: #9B7AD8;
}
.c-character__card--color-05 .c-character__name span {
  color: #9B7AD8;
}
.c-character__img {
  position: relative;
}
.c-character__img img {
  width: 100%;
  display: block;
}
.c-character__chapter {
  color: #fff;
  font-weight: bold;
  font-size: 1.4rem;
  padding: 0.5rem 1.5rem;
  background: var(--color-primary);
  border-radius: 0 100px 100px 0;
  position: absolute;
  bottom: 0;
  transform: translateY(40%);
}
@media screen and (max-width: 1300px) {
  .c-character__chapter {
    font-size: 1.0769230769vw;
  }
}
@media (max-width: 767px) {
  .c-character__chapter {
    font-size: 1.4rem;
  }
}
.c-character__chapter span {
  font-family: "Roboto", sans-serif;
  line-height: 1.6;
  font-size: 2.4rem;
  display: inline-block;
  margin-left: 0.5rem;
}
@media screen and (max-width: 1300px) {
  .c-character__chapter span {
    font-size: 1.8461538462vw;
  }
}
@media (max-width: 767px) {
  .c-character__chapter span {
    font-size: 2.4rem;
  }
}
.c-character__name {
  color: var(--color-base);
  font-size: 2.6rem;
  font-weight: bold;
  margin-top: 1rem;
}
@media screen and (max-width: 1300px) {
  .c-character__name {
    font-size: 2vw;
  }
}
@media (max-width: 767px) {
  .c-character__name {
    font-size: 2.6rem;
  }
}
.c-character__name span {
  font-size: 3.2rem;
}
@media screen and (max-width: 1300px) {
  .c-character__name span {
    font-size: 2.4615384615vw;
  }
}
@media (max-width: 767px) {
  .c-character__name span {
    font-size: 3.2rem;
  }
}
.c-character__body {
  color: var(--color-base);
  font-size: 1.6rem;
  line-height: 1.4;
}
@media screen and (max-width: 1400px) {
  .c-character__body {
    font-size: 1.1428571429vw;
  }
}
@media (max-width: 767px) {
  .c-character__body {
    font-size: 1.4rem;
  }
}
.c-character__txt {
  text-align: center;
  position: relative;
  z-index: 1;
}
.c-character__txt span {
  color: var(--color-primary);
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 2;
  padding: 1rem 4rem;
  border: 2px solid var(--color-primary);
  border-radius: 1rem;
  display: inline-block;
}
@media (max-width: 767px) {
  .c-character__txt span {
    font-size: 1.2rem;
  }
}
.c-character .swiper-wrapper {
  align-items: stretch;
}
.c-character .swiper-pagination {
  display: none;
  position: absolute;
  left: 50% !important;
  bottom: -6rem !important;
  transform: translateX(-50%);
}
@media (max-width: 767px) {
  .c-character .swiper-pagination {
    display: block;
    bottom: -4rem !important;
  }
}
.c-character .swiper-pagination-bullet {
  margin: 0 0.5rem;
  opacity: 0.4;
  background: var(--color-primary);
  width: 2.5rem;
  height: 0.5rem;
  border-radius: 0;
}
.c-character .swiper-pagination-bullet-active {
  opacity: 1;
}
.c-character .swiper-button-prev {
  width: 4rem;
  height: 4rem;
  background: url("/drivers/kouhougallery/aak-pr2026/common/images/slide_icn_prev.svg") no-repeat center center;
  background-size: cover;
  top: -6rem !important;
  left: auto !important;
  right: 10rem !important;
  transform: translateY(30%) !important;
}
.c-character .swiper-button-prev svg {
  display: none;
}
@media (max-width: 767px) {
  .c-character .swiper-button-prev {
    top: auto !important;
    bottom: -4rem !important;
    left: 3rem !important;
  }
}
.c-character .swiper-button-next {
  width: 4rem;
  height: 4rem;
  background: url("/drivers/kouhougallery/aak-pr2026/common/images/slide_icn_next.svg") no-repeat center center;
  background-size: cover;
  top: auto !important;
  top: -6rem !important;
  right: 2rem !important;
  transform: translateY(30%) !important;
}
.c-character .swiper-button-next svg {
  display: none;
}
@media (max-width: 767px) {
  .c-character .swiper-button-next {
    top: auto !important;
    bottom: -4rem !important;
    right: 3rem !important;
  }
}
.c-character .c-section-head__title {
  margin-top: 0;
}

.c-more {
  background: linear-gradient(to bottom, #F2F8FF 0%, #F2F8FF 50%, #FFF 50%, #FFF 100%);
}
.c-more__bg {
  background: #E2F0FF;
  border-radius: 5rem;
}
.c-more__panel {
  margin: 0 auto 0;
  padding: 10rem 21rem;
  max-width: 1200px;
  position: relative;
}
@media (max-width: 767px) {
  .c-more__panel {
    border-radius: 2rem;
    padding: 7rem 2rem 10rem;
  }
}
.c-more__txt {
  font-size: 1.6rem;
  text-align: center;
  margin-top: 3rem;
}
.c-more__contents {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-top: 3.6rem;
}
@media (max-width: 767px) {
  .c-more__contents {
    grid-template-columns: repeat(1, 1fr);
  }
}
.c-more__item img {
  width: 100%;
}
.c-more__ttl {
  position: relative;
  text-align: center;
  margin-bottom: 1.6rem;
}
.c-more__ttl::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-image: radial-gradient(circle, var(--color-primary) 1.5px, transparent 1.5px);
  background-size: 13px 3px;
  background-repeat: repeat-x;
  background-position: left center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.c-more__ttl span {
  font-size: 1.6rem;
  color: var(--color-primary);
  font-weight: bold;
  padding: 0 2rem;
  background: #E2F0FF;
  position: relative;
  z-index: 2;
}
.c-more__link {
  transition: 0.2s;
}
.c-more__link:hover {
  opacity: 0.7;
}
.c-more .c-section-head__title span {
  color: #333;
}

.c-sns {
  border-radius: 5rem 5rem 0 0;
}
.c-sns__panel {
  margin: 0 auto;
  padding: 10rem 21rem 10rem;
  max-width: 1200px;
  position: relative;
}
@media (max-width: 767px) {
  .c-sns__panel {
    border-radius: 2rem;
    padding: 8rem 2rem 8rem;
  }
}
.c-sns__items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 3rem;
}
.c-sns__item {
  width: calc((100% - 2.8rem) * 1 / 3);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem;
  border: 1px solid var(--color-primary);
  background: #fff;
  border-radius: 100px;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.4;
  transition: 0.2s;
}
.c-sns__item:hover {
  opacity: 0.7;
}
@media screen and (max-width: 1200px) {
  .c-sns__item {
    gap: 1.6666666667vw;
    padding: 0.8333333333vw;
    font-size: 1.3333333333vw;
  }
}
@media (max-width: 767px) {
  .c-sns__item {
    width: 100%;
    gap: 2rem;
    padding: 1rem;
    font-size: 1.6rem;
  }
}
.c-sns__icon {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
}
@media screen and (max-width: 1200px) {
  .c-sns__icon {
    width: 4.1666666667vw;
    height: 4.1666666667vw;
  }
}
@media (max-width: 767px) {
  .c-sns__icon {
    width: 5rem;
    height: 5rem;
  }
}
.c-sns__icon img {
  display: block;
  width: 100%;
  height: 100%;
}