@charset "UTF-8";
@import url("css/reset.min.css");
/*
theme Name:BAA2026
Author: GROWB
*/

/*フォント設定
-----------------------------------------*/
@font-face
{
  font-family: 'Zen Kaku Gothic New';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('font/ZenKakuGothicNew-Medium.ttf') format('truetype');
}

@font-face
{
  font-family: 'Zen Kaku Gothic New';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('font/ZenKakuGothicNew-Bold.ttf') format('truetype');
}

/*色の設定
-----------------------------------------*/
:root
{
  --orange: #F18C00;
  --green: #007560;
  --green02: #C7CD39;
  --yellow: #FFF691;
  --blue: #50B4E6;
  --blue02: #AFD5F1;
  --white: #fff;
  --black: #221815;
}

/* 全体
-------------------------------------*/
html
{
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: var(--black);
  ;
  font-family: sans-serif;
  line-height: 1.15;
  scroll-behavior: smooth;
  font-size: 62.5%;
}

body
{
  position: relative;
  background: #fff;
  color: var(--black);
  font-family: 'Zen Kaku Gothic New', 'メイリオ', 'Meiryo', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
  font-size: clamp(16px, 0.9vw + 14px, 18px);
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

body,
html
{
  height: 100%;
  width: 100%;
}

img
{
  max-width: 100%;
  height: auto;
  width: 100%;
}

a
{
  display: block;
  color: #000;
  text-decoration-line: none;
  word-break: break-all;
}

a:hover
{
  opacity: 0.8;
  transition-duration: 0.8s;
}

a img:hover
{
  opacity: 0.8;
  transition-duration: 0.8s;
}

.pc-none
{
  display: none;
}

.sp-none
{
  display: block;
}

.wrapper
{
  overflow-x: hidden;
  width: 100%;
}

.container
{
  width: 90%;
  max-width: 1000px;
  margin: auto;
  position: relative;
  z-index: 2;
}

.fade
{
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.fade.show
{
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 820px)
{
  .pc-none
  {
    display: block;
  }

  .sp-none
  {
    display: none;
  }

  body,
  html
  {
    width: auto;
  }
}

/* ヘッダー
-------------------------------------*/
header
{}

.mv
{
  width: 100%;
  overflow: hidden;
}

.mv-svg svg
{
  width: 100%;
  height: auto;
  display: block;
}

/*放射背景回転*/
#radial
{
  transform-origin: center;
  animation: radialRotate 20s linear infinite;
}

@keyframes radialRotate
{

  0%
  {
    transform: rotate(0deg);
  }

  100%
  {
    transform: rotate(360deg);
  }

}

[id^="nyado_group"]
{
  transform-origin: center;
  transform-box: fill-box;
}

#nyado_group01
{
  animation: nyado-float 1s ease-in-out infinite;
}

#nyado_group02
{
  animation: nyado-jump 3s ease-in-out infinite;
  animation-delay: .8s;
}

#nyado_group03
{
  animation: nyado-sway 6s ease-in-out infinite;
  animation-delay: .4s;
}

#nyado_group04
{
  animation: nyado-pop 2.5s cubic-bezier(.17, .67, .83, 1.4) infinite;
  animation-delay: 1s;
}

#nyado_group04-2
{
  animation: nyado-jump 4s ease-in-out infinite;
  animation-delay: 1s;
}

#nyado_group05
{
  animation: nyado-pop 3.2s cubic-bezier(.17, .67, .83, 1.4) infinite;
  animation-delay: 1.8s;
  transform-origin: center;
  transform-box: fill-box;
}

#nyado_group05-2
{
  animation: nyado-bounce 3s ease-in-out infinite;
  animation-delay: 1.8s;
}

#nyado_group06
{
  animation: nyado-bounce 2s ease-in-out infinite;
  animation-delay: 1.2s;
}

#nyado_group07
{
  animation: nyado-dance 1.5s ease-in-out infinite;
  animation-delay: .5s;
}

#nyado_group08
{
  transform-origin: center;
  transform-box: fill-box;
  animation: nyado-pop-in 1.2s cubic-bezier(0.17, 0.67, 0.83, 1.4) forwards;
  animation-delay: 0.5s;
  opacity: 0;
}

@keyframes nyado-jump
{
  0%
  {
    transform: translateY(0) scale(1, 1);
  }

  5%
  {
    transform: translateY(0) scale(1.05, 0.95);
  }

  15%
  {
    transform: translateY(-50px) scale(0.97, 1.03);
  }

  25%
  {
    transform: translateY(0) scale(1.02, 0.98);
  }

  30%,
  100%
  {
    transform: translateY(0) scale(1, 1);
  }
}

@keyframes nyado-sway
{

  0%,
  100%
  {
    transform: rotate(-5deg) translateX(-5px);
  }

  50%
  {
    transform: rotate(5deg) translateX(5px);
  }
}

@keyframes nyado-pop
{

  0%,
  80%,
  100%
  {
    transform: scale(1);
  }

  90%
  {
    transform: scale(1.1);
  }
}

@keyframes nyado-swing
{

  0%,
  100%
  {
    transform: rotate(-8deg);
  }

  50%
  {
    transform: rotate(8deg);
  }
}

@keyframes nyado-bounce
{

  0%,
  20%,
  50%,
  80%,
  100%
  {
    transform: translateY(0);
  }

  40%
  {
    transform: translateY(-40px) scale(0.9, 1.1);
  }

  60%
  {
    transform: translateY(-20px) scale(0.95, 1.05);
  }
}

@keyframes nyado-dance
{

  0%,
  100%
  {
    transform: translateY(0) rotate(0);
  }

  25%
  {
    transform: translateY(-10px) rotate(-3deg);
  }

  75%
  {
    transform: translateY(-10px) rotate(3deg);
  }
}

@keyframes nyado-drift
{

  0%,
  100%
  {
    transform: translate(0, 0) rotate(0);
  }

  33%
  {
    transform: translate(10px, -20px) rotate(2deg);
  }

  66%
  {
    transform: translate(-10px, -10px) rotate(-2deg);
  }
}

@keyframes nyado-float
{

  0%,
  100%
  {
    transform: translateY(0);
  }

  50%
  {
    transform: translateY(-25px);
  }
}

@keyframes nyado-pop-in
{
  0%
  {
    transform: scale(0);
  }

  70%
  {
    transform: scale(1.1);
    opacity: 1;
  }

  100%
  {
    transform: scale(1);
    opacity: 1;
  }
}

/*タイトル*/
#title
{
  transform-origin: center;
  animation: titlePop 1s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes titlePop
{

  0%
  {
    transform: scale(.3);
    opacity: 0;
  }

  70%
  {
    transform: scale(1.15);
  }

  100%
  {
    transform: scale(1);
    opacity: 1;
  }
}
}

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

/* タイトル
-------------------------------------*/
/* h2 */

h2
{
  text-align: center;
  position: relative;
  z-index: 2;
  margin: 0 auto clamp(2rem, 5vw, 6rem);
}


/* h3 */
.profile-label
{
  position: relative;
  display: inline-block;
  padding: 4px 18px;
  background: var(--green);
  color: #fff;
  border: 2px solid var(--black);
  border-radius: 60px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  font-size: clamp(2rem, 3vw, 3rem);
  margin-bottom: 3rem;
}

/* 三角 */
.profile-label::before
{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -21px;
  width: 28px;
  height: 20px;
  background: var(--black);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.profile-label::after
{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -18px;
  width: 24px;
  height: 18px;
  background: var(--green);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media (max-width: 768px)
{
  h3
  {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* 木のイラスト
-------------------------------------*/
.tree-decoration
{
  position: relative;
  height: 0;
  z-index: 100;
}

.tree
{
  position: fixed;
  bottom: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
  z-index: 100;
}

.tree-left
{
  left: 0;
  width: clamp(100px, 14vw, 160px);
}

.tree-right
{
  right: 0;
  width: clamp(100px, 14vw, 160px);
}

.tree.show
{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 768px)
{
  .tree-left
  {
    left: -5%;
  }

  .tree-right
  {
    right: -5%;
  }
}

/* ニュース
-------------------------------------*/
.news
{
  padding: 80px 0;
  background: var(--blue);
  position: relative;
}

.news::before
{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 16rem;
  background: url("images/bg_cloud_top.svg") center top / cover no-repeat;
  z-index: 0;
}

.news::after
{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15rem;
  background: url("images/bg_cloud_bottom.svg") center top / cover no-repeat;
  z-index: 0;
}

.news h2
{
  width: 184px;
}

/* ── ニュースセクション全体 ── */
.news-section
{
  width: 100%;
  max-width: 1000px;
}

/* ── カード外枠 ── */
.news-area
{
  position: relative;
  z-index: 2;
  border: 3px solid var(--black);
  border-radius: 10px;
  background: #fff;
  padding: 40px;
}

/* 4隅のドット */
.news-area::before,
.news-area::after,
.news-area .dot-bl,
.news-area .dot-br
{
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--black);
  border-radius: 50%;
}

/* 左上 */
.news-area::before
{
  top: 10px;
  left: 10px;
  transform: translate(-50%, -50%);
}

/* 右上 */
.news-area::after
{
  top: 10px;
  right: 10px;
  transform: translate(50%, -50%);
}

/* 左下 */
.news-area .dot-bl
{
  bottom: 10px;
  left: 10px;
  transform: translate(-50%, 50%);
}

/* 右下 */
.news-area .dot-br
{
  bottom: 10px;
  right: 10px;
  transform: translate(50%, 50%);
}

/* ── ニュースリスト ── */
.news-list
{
  list-style: none;
}

.news-item
{
  display: flex;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px dashed var(--black);
  text-decoration: none;
  color: var(--black);
  transition: transform 0.2s, opacity 0.2s;
}

.news-item:hover
{
  opacity: 1;
}

.news-item:hover .news-date,
.news-item:hover .news-title,
.news-item:hover .arrow-icon
{
  transform: translateY(3px);
}

.news-date,
.news-title,
.arrow-icon
{
  transition: transform 0.2s ease;
}

/* 日付 */
.news-date
{
  font-size: 18px;
  color: var(--black);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 110px;
}

/* タイトル */
.news-title
{
  font-size: 18px;
  color: var(--black);
  line-height: 1.6;
}

.arrow-icon
{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue02);
  border: 1px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  margin-left: auto;
  position: relative;
  box-shadow: 1px 1px var(--black);
}

.arrow-icon::after
{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 16px;
  height: 12px;
  background: url("images/icon_arrow.svg") center top / contain no-repeat;
  z-index: 1;
}

/* ── 「一覧を見る」ボタン ── */
.news-btn-wrap
{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 28px 0 32px;
}

.news-btn
{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 350px;
  height: 62px;
  border-radius: 30px;
  border: 3px solid var(--black);
  background: #fff;
  color: var(--black);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  box-shadow: 2px 3px 0 0 var(--black);
  transition: transform 0.2s, box-shadow 0.2s;
}

.news-btn .arrow-icon
{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue02);
  border: 1px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  margin-left: 0;
  right: 10px;
  position: absolute;
  box-shadow: 1px 1px var(--black);
}

.news-btn .arrow-icon::after
{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 16px;
  height: 12px;
  background: url("images/icon_arrow.svg") center top / contain no-repeat;
  z-index: 1;
}

.news-btn:hover
{
  transform: translateY(3px) scale(0.98);
  box-shadow: 1px 1px 0 0 var(--black);
  opacity: 1;
}

.news-btn:active
{
  transform: translateY(5px) scale(0.96);
  box-shadow: 0 0 0 0 var(--black);
}

/* ボタン内の矢印アイコン */
.btn-arrow
{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #afd5f1;
  border: 1px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}

@media (max-width: 768px)
{
  .news
  {
    padding: 6rem 0 2rem;
  }

  .news h2
  {
    width: 26%;
  }

  .news::before
  {
    height: 7rem;
  }

  .news::after
  {
    height: 6.5rem;
  }

  .news-area
  {
    padding: 30px 20px;
  }

  .news-item
  {
    display: block;
    position: relative;
    padding: 1rem 4rem 1rem 0;
  }

  .news-list li:last-child .news-item
  {
    border-bottom: none;
  }

  .news-item:active .news-date,
  .news-item:active .news-title,
  .news-item:active .arrow-icon
  {
    transform: translateY(3px);
  }

  .news-item:active
  {
    transform: translateY(3px);
  }

  .news-date
  {
    display: block;
    margin-bottom: 0;
    font-size: clamp(14px, 2vw, 15px);
  }

  .news-title
  {
    display: block;
    line-height: 1.2;
    font-size: clamp(14px, 2vw, 15px);
  }

  .arrow-icon
  {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
  }

  .news-area::before
  {
    top: 12px;
    left: 12px;
    transform: none;
  }

  .news-area::after
  {
    top: 12px;
    right: 12px;
    transform: none;
  }

  .news-area .dot-bl
  {
    bottom: 12px;
    left: 12px;
    transform: none;
  }

  .news-area .dot-br
  {
    bottom: 12px;
    right: 12px;
    transform: none;
  }

  .news-btn
  {
    width: 280px;
    height: 54px;
    font-size: 15px;
  }
}



/* 線
-------------------------------------*/
.line-area
{
  background-image: url("images/bg_line01.svg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 8rem;

}

@media (max-width: 768px)
{
  .line-area
  {
    height: 5rem;
  }
}

/* プロフィール
-------------------------------------*/

.profile
{
  padding: 80px 0 0;
  background: var(--green02);
  position: relative;
}

.profile h2
{
  width: 530px;
}

.profile::before
{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 14rem;
  background: url("images/bg_mountain_top.svg") center top / cover no-repeat;
  z-index: 0;
}

.profile::after
{
  content: "";
  position: absolute;
  bottom: -16rem;
  left: 0;
  width: 100%;
  height: 16rem;
  background: url("images/bg_mountain_bottom.svg") center top / cover no-repeat;
  z-index: 0;
}

.profile-wrapper
{
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* ノート */

.advisor-note
{
  max-width: 1000px;
  margin: auto;
  border: 6px solid var(--black);
  border-radius: 10px;
  padding: 60px 70px 40px;
  background:
    linear-gradient(#e9e9e9 1px, transparent 1px),
    linear-gradient(90deg, #e9e9e9 1px, transparent 1px),
    #fff;
  background-size: 24px 24px;
  position: relative;
  z-index: 2;
}


/* 左穴 */

.advisor-note::before
{
  content: "";
  position: absolute;
  left: 10px;
  top: 20px;
  width: 10px;
  height: 98%;
  background:
    radial-gradient(circle, var(--black) 4px, transparent 5px);
  background-size: 10px 26px;
}


/* 上段 */

.advisor-top
{
  display: flex;
  gap: 40px;
  align-items: flex-end;
}

.frame
{
  position: relative;
  display: inline-block;
  border: 4px solid var(--black);
  background: var(--white);
  padding: 14px;
  margin-top: 40px;
}

.frame::before
{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 2px solid var(--black);
  pointer-events: none;
}

.frame-inner img
{
  display: block;
  width: 225px;
}

.frame-title
{
  position: absolute;
  top: -40px;
  left: 46%;
  transform: translateX(-50%);
  width: clamp(210px, 40vw, 260px);
  z-index: 2;
}

/* プロフィール */

.advisor-profile
{
  flex: 1;
}

.bubble
{
  display: inline-block;
  background: var(--green);
  color: var(--white);
  padding: 10px 30px;
  border-radius: 30px;
  margin-bottom: 20px;
  font-weight: bold;
}


/* テキスト */
.profile-box
{
  border: 3px solid var(--green02);
  padding: 20px;
  border-radius: 10px;
  background: var(--white);
}

.profile-text
{
  line-height: 5rem;
  margin: 0;
  background-image: radial-gradient(var(--green02) 5%, transparent 3%);
  background-size: 0.8rem 5rem;
  background-position: 0 7.4rem;
  background-repeat: repeat;
}

/* マーカー */
.marker
{
  background: linear-gradient(0deg, #c7cd39 0.4em, transparent 0.4em);
  padding: 0 2px;
  font-weight: 900;
  color: var(--green);
}

/* カード */

.advisor-skills
{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 30px;
}

.skill
{

  background: var(--green02);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.skill h4
{
  margin-bottom: 6px;
  border-bottom: 1px solid var(--black);
}

.skill p
{
  line-height: 1.4;
  font-size: 90%;
}


/* ひみつ */

.advisor-secret
{
  margin-top: 50px;
}

.secret-grid
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.secret-box
{
  border: 4px solid var(--black);
  background: var(--white);
  padding: 4px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.secret-box picture img
{
  width: 100%;
  height: auto;
  display: block;
}

.secret-inner01
{}

.secret-inner02
{}

.secret-inner01,
.secret-inner02
{
  display: flex;
  align-items: center;
  width: 100%;
}

@media screen and (max-width: 820px)
{
  .secret-inner01
  {}

  .secret-inner02
  {}
}

@media screen and (max-width: 768px)
{
  .profile
  {
    padding: 6rem 0 0;
  }

  .profile h2
  {
    width: 56%;
  }

  .advisor-skills
  {
    grid-template-columns: 1fr;
  }

  .secret-grid
  {
    grid-template-columns: 1fr;
  }

  .secret-inner01
  {}

  .secret-inner02
  {}

  .advisor-note
  {
    width: 100%;
    padding: 2rem 2rem 3rem 4rem;
  }

  .advisor-note::before
  {
    height: 99%;
  }

  .advisor-top
  {
    flex-direction: column;
    align-items: center;
  }

  .profile-text
  {
    line-height: 3.5rem;
    margin: 0;
    background-image: radial-gradient(var(--green02) 5%, transparent 3%);
    background-size: 0.8rem 3rem;
    background-position: 0 5.4rem;
    font-size: clamp(14px, 2vw, 15px);
  }

  .frame
  {
    width: 80%;
    padding: 2rem;
  }

  .frame-inner img
  {
    width: 100%;
  }

  .skill
  {
    font-size: clamp(14px, 2vw, 15px);
  }

}

@media screen and (max-width: 400px)
{
  .frame
  {
    width: 100%;
    padding: 4rem;
  }

  .profile-text
  {
    background-image: none;
  }
}

/* BAAマークを知ろう
-------------------------------------*/
.about
{
  padding: 180px 0 0;
  position: relative;
}

.about::before
{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 100%;
  height: 40%;
  background: url("images/bg_line_road.svg") center top / cover no-repeat;
  z-index: -2;
}

.about h2
{
  width: 450px;
}

.about-label
{
  background-color: var(--orange);
  margin-bottom: 2rem;
}

.about-label::after
{
  background: var(--orange);
}

.about-label-right
{
  position: absolute;
  right: 0;
}

.baa-section
{
  position: relative;
}

.baa-section::before
{
  content: "";
  position: absolute;
  top: -6rem;
  right: 0;
  width: clamp(120px, 20vw, 220px);
  max-width: 220px;
  aspect-ratio: 220 / 123;
  background: url("images/bg_parts_08.svg") no-repeat center top / contain;
  z-index: 1;
}

/* カード */

.baa-card
{
  position: relative;
  width: 70%;
  border: 4px solid var(--black);
  border-radius: 12px;
  background: var(--white);
  padding: clamp(30px, 4vw, 50px);
  margin-bottom: 80px;
  z-index: 0;
}

.baa-card:nth-of-type(odd)
{
  margin-right: auto;
}

.baa-card:nth-of-type(even)
{
  margin-left: auto;
  margin-top: 15.5rem;
}

.baa-card:first-of-type::before
{
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  width: clamp(156px, 20vw, 232px);
  max-width: 156px;
  aspect-ratio: 156 / 232;
  background: url("images/bg_parts_06.svg") no-repeat center top / contain;
}

.baa-card:first-of-type::after
{
  content: "";
  position: absolute;
  bottom: -12rem;
  left: 0;
  z-index: 1;
  width: clamp(140px, 20vw, 216px);
  max-width: 216px;
  aspect-ratio: 216 / 130;
  background: url("images/bg_parts_09.svg") no-repeat center top / contain;
}

.baa-card:last-of-type::after
{
  content: "";
  position: absolute;
  bottom: -4rem;
  right: 0;
  z-index: 1;
  width: clamp(214px, 20vw, 264px);
  max-width: 264px;
  aspect-ratio: 264 / 126;
  background: url("images/bg_parts_07.svg") no-repeat center top / contain;
}

/* レイアウト */

.baa-content
{
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* テキスト */

.baa-text
{
  flex: 1;
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.8;
}

.baa-text .lead
{
  color: var(--orange);
  font-weight: 700;
}

.note
{
  font-size: 13px;
  margin-top: 20px;
}

/* リンク */
.link-area
{
  display: inline-flex;
  align-items: flex-end;
  transition: transform 0.2s, opacity 0.2s;
}

.link
{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  width: 30px;
  height: 30px;
  background: var(--orange);
  margin-top: 20px;
  text-decoration: none;
  border: 2px solid var(--black);
  border-radius: 50%;
  box-shadow: 2px 2px var(--black);
}

.link::after
{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 16px;
  height: 12px;
  background: url("images/icon_tolink.svg") center top / contain no-repeat;
  z-index: 1;
}

.link-area:hover
{
  transform: translateY(3px);
  opacity: 1;
}

.link-area:active
{
  transform: translateY(5px);
}

/* 画像 */
.baa-img
{
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.baa-img img
{
  width: 100%;
  height: auto;
}

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

  .about
  {
    padding: 140px 0 0;
  }

  .about h2
  {
    width: 56%;
  }

  .baa-card
  {
    width: 100%;
    margin-bottom: 30px;
  }

  .baa-img
  {
    width: 60%;
  }

  .baa-content
  {
    flex-direction: column-reverse;
    align-items: center;
  }

  .baa-section::before
  {
    width: 30%;
    top: 5rem;
    right: -5rem;
  }

  .about-label-right
  {
    position: relative;
  }

  .baa-card:nth-of-type(even)
  {
    margin-top: 0;
  }

  .baa-card:first-of-type::before
  {
    width: 14%;
    bottom: -5rem;
    right: 0;
  }

  .baa-card:first-of-type::after
  {
    width: 20%;
    bottom: -5rem;
    left: 0;
  }

  .baa-card:last-of-type::after
  {
    width: 20%;
    bottom: -4rem;
    right: 0;
  }
}

@media screen and (max-width: 400px)
{
  .baa-card:first-of-type::before
  {
    width: 20%;
    bottom: -5rem;
    right: 0;
  }

  .baa-card:first-of-type::after
  {
    width: 30%;
    bottom: -5rem;
    left: 0;
  }

  .baa-card:last-of-type::after
  {
    width: 30%;
    bottom: -4rem;
    right: 0;
  }
}

/* 区切り
-------------------------------------*/
.scroll-area
{
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
}

.scroll-area img
{
  width: 318px;
  height: 236px;
}

.scroll-img
{
  position: absolute;
  left: -200px;
  animation: moveX 8s linear infinite;
}

@keyframes moveX
{
  0%
  {
    transform: translateX(0);
  }

  100%
  {
    transform: translateX(120vw);
  }
}

.line-banner
{
  width: 100%;
  height: clamp(60px, 8vw, 100px);
  background: url("images/img_line_bg.svg") center/cover no-repeat;
  overflow: hidden;
  position: relative;
}

/* 流れるエリア */
.line-track
{
  display: flex;
  width: max-content;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  animation: scrollLine 20s linear infinite;
}

.line-track img
{
  height: clamp(40px, 6vw, 60px);
  width: auto;
}

@keyframes scrollLine
{

  0%
  {
    transform: translateX(0) translateY(-50%);
  }

  100%
  {
    transform: translateX(-50%) translateY(-50%);
  }
}

@media screen and (max-width: 768px)
{
  .scroll-area
  {
    height: 12rem;
  }

  .scroll-area img
  {
    height: 12rem;
  }
}

/* ダウンロード
-------------------------------------*/
.download
{
  padding: 80px 0;
  background: var(--yellow);
  position: relative;
}

.download::after
{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 100%;
  height: 50%;
  background: url("images/bg_download.svg") center top / cover no-repeat;
  z-index: 1;
}

.download h2
{
  width: 497px;
}

.download .download-label
{
  background: var(--yellow);
  color: var(--black);
  z-index: 2;
  padding: 0 4rem;
}

.download-label::after
{
  background: var(--yellow);
}

.download-note
{
  max-width: 1000px;
  margin: auto;
  border: 6px solid var(--black);
  border-radius: 10px;
  padding: 60px 70px 40px;
  background:
    linear-gradient(#e9e9e9 1px, transparent 1px),
    linear-gradient(90deg, #e9e9e9 1px, transparent 1px),
    #fff;
  background-size: 24px 24px;
  position: relative;
  z-index: 2;
}

.grid
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}

@media (max-width:820px)
{
  .grid
  {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:500px)
{
  .grid
  {
    grid-template-columns: 1fr;
  }
}

.card
{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card figure
{
  margin: 0;
  display: flex;
  justify-content: center;
}

.card img
{
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 3px solid #1a1a1a;
  display: block;
  object-fit: contain;
}

.button-area
{
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.button-area .btn
{
  width: 70%;
  max-width: 260px;
  display: block;
  text-align: center;
  background: var(--yellow);
  color: var(--black);
  font-weight: 700;
  padding: 0 16px;
  border-radius: 999px;
  border: 2px solid var(--black);
  box-shadow: 2px 2px var(--black);
  transition: all .2s;
  font-size: clamp(14px, 1.4vw, 16px);
  transition: transform 0.2s, box-shadow 0.2s;
}

.button-area .btn:hover
{
  transform: translateY(3px) scale(0.98);
  box-shadow: 1px 1px 0 0 var(--black);
  opacity: 1;
}

.button-area .btn:active
{
  transform: translateY(5px) scale(0.96);
  box-shadow: 0 0 0 0 var(--black);
}

@media screen and (max-width: 768px)
{
  .download
  {
    padding: 40px 0;
  }

  .download h2
  {
    width: 46%;
  }
}

/* フッター
-------------------------------------*/
.footer
{
  background: var(--yellow);
  position: relative;
}

.page-top
{
  position: absolute;
  inset: 0;
  margin: -3rem auto 0;
  width: 70px;
  height: 70px;
  z-index: 999;
  border-radius: 100%;
  background-color: var(--green);
  border: 2px solid var(--black);
  box-shadow: 0 2px var(--black);
  display: flex;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.page-top img
{
  width: 50%;
  height: auto;
  display: flex;
  align-items: center;
}

.footer .page-top:hover
{
  transform: translateY(-3px) scale(0.98);
  box-shadow: 1px 1px 0 0 var(--black);
  opacity: 1;
}

.footer .page-top:active
{
  transform: translateY(5px) scale(0.96);
  box-shadow: 0 0 0 0 var(--black);
}

.footer-box
{
  background: var(--white);
  border-top: 4px solid var(--black);
  padding: 0 0 4rem;
}

.footer-box p
{
  text-align: center;
}

.footer-box p a
{
  text-decoration: underline;
  font-size: clamp(14px, 1.2vw, 16px);
}

.footer-town
{
  position: relative;
}

/* ネコ */

.footer-cat
{
  position: absolute;
  left: 22%;
  bottom: 0;
  width: 120px;
  animation: catBounce 1.5s ease-in-out infinite;
}

@keyframes catBounce
{
  0%
  {
    transform: translateY(0) scaleY(0.9) scaleX(1.1);
  }

  /* 最高点 */
  50%
  {
    transform: translateY(-55px);
  }

  /* 元に戻る */
  100%
  {
    transform: translateY(0);
  }

}

.footer-box figure img
{
  display: block;
  margin: 6rem auto 3.2rem;
  width: 300px;
}

@media (max-width:768px)
{
  .footer-cat
  {
    left: 7%;
    bottom: 0;
    width: 9rem;
  }

  .footer-box figure img
  {
    width: 50%;
    margin: 3rem auto 2rem;
  }
}