@charset "UTF-8";
@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}

.tab {
  display: none;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .tab {
    display: block;
  }
}

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

section.fv {
  position: relative;
  /* アニメーション対象の1文字ごとのスタイル */
  /* アニメーション発火時のスタイル */
}
section.fv div.texts {
  position: absolute;
  color: #fff;
}
@media screen and (min-width: 768px) {
  section.fv div.texts {
    text-align: right;
    bottom: 70px;
    right: 50px;
  }
}
@media screen and (max-width: 767px) {
  section.fv div.texts {
    bottom: 8vw;
    left: 4vw;
  }
}
section.fv div.texts h2 {
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  section.fv div.texts h2 {
    margin-right: -36px;
    line-height: 1.25;
    font-size: 58px;
  }
}
@media screen and (max-width: 767px) {
  section.fv div.texts h2 {
    line-height: 1.25;
    font-size: 10.6666666667vw;
  }
}
section.fv div.texts p {
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  section.fv div.texts p.txt1 {
    margin-top: 10px;
    font-size: 26px;
  }
}
@media screen and (max-width: 767px) {
  section.fv div.texts p.txt1 {
    margin-top: 3.3333333333vw;
    font-size: 4vw;
  }
}
@media screen and (min-width: 768px) {
  section.fv div.texts p.txt2 {
    margin-top: 3px;
    font-size: 15px;
  }
}
@media screen and (max-width: 767px) {
  section.fv div.texts p.txt2 {
    margin-top: 0.6666666667vw;
    font-size: 2.9333333333vw;
  }
}
section.fv .texts .char {
  display: inline-block; /* transformなどを使えるようにする */
  opacity: 0; /* 初期状態は非表示 */
  /* 少し下からふわっと出す演出（任意） */
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform; /* 描画最適化 */
}
@media screen and (min-width: 768px) {
  section.fv .texts .char {
    transform: translateX(-10px);
  }
}
@media screen and (max-width: 767px) {
  section.fv .texts .char {
    transform: translateX(-5px);
  }
}
section.fv .texts .char.is-active {
  opacity: 1;
  transform: translateX(0);
}
section.fv .sp {
  display: none; /* PCでは改行しない（要件に合わせて調整してください） */
}
@media screen and (max-width: 768px) {
  section.fv .sp {
    display: block; /* SPでは改行 */
  }
}

.t-mv__area  {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

section.needs div.inner {
  width: 90%;
  max-width: 1400px;
  margin: 180px auto 90px auto;
}

section.needs div.point-block {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 180px 0 150px;
  width: 120%;
  margin-left: -25%;
  background-color: #EAEAEA;
}

div.point-block div.image {
  margin-right: -80px;
  margin-bottom: -80px;
}

div.point-block div.texts {
    width: 40%;
    padding: 40px 100px 40px 40px;
    border: solid 1px #505050;
    margin-left: 20%;
}

div.point-block div.texts h3 {
    font-size: 28px;
    line-height: 1.2;
}

div.texts p.sm {
  font-size: 34px;
  font-family: 'Times New Roman';
  margin-bottom: 20px;
}

div.texts p.st {
    margin-top: 20px;
    font-size: 18px;
}

/* フェードインの初期状態 */
/* 初期状態：透明で少し下に配置 */
.fade-in-body {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* 表示状態：不透明で元の位置へ */
.fade-in-body.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (max-width: 768px) {
  section.simulator div.inner {
    margin: 150px auto 80px auto;
  }
  section.needs div.point-block {
      flex-direction: column;
      width: 100%;
      margin-left: 0;
      padding-top: 16px;
      background-image: url(../img/top/sp/point-bk-sp.png);
      background-size: contain;
      margin: 80px auto 80px 0;
  }
  div.point-block div.image {
    margin-right: 0;
    margin-bottom: 0;
  }
  div.point-block div.texts {
      width: 100%;
      padding-left: 20px;
      margin-bottom: 20px;
      max-width: 270px;
      margin-right: auto;
  }
  div.texts p.sm {
    font-size: 24px;
    margin-bottom: 5px;
  }
  div.point-block div.texts h3 {
      font-size: 20px;
      line-height: 1.2;
  }
  div.texts p.st {
    margin-top: 5px;
    font-size: 12px;
  }
}



/* =========================================
   ここから シミュレーターセクション用スタイル
   ========================================= */


section.simulator div.inner {
    margin: 280px auto 90px auto;
}

.trackman-features {
    max-width: 1100px;
    margin: 0 auto;
}

.feature-list {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 80px;
}

.feature-list li {
    width: 32%;
    text-align: left;
}

.feature-image {
    width: 100%;
    aspect-ratio: 4 / 3; 
    object-fit: cover;
    margin-bottom: 25px;
    background-color: #f0f0f0;
}

.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.feature-list h3 {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 15px 0;
  text-align: center;
  line-height: 1.4;
}

.feature-list p {
  font-size: 18px;
  margin: 0;
  text-align: justify;
  line-height: 1.8;
}


@media (max-width: 768px) {
    .section-header h2 {
        font-size: 1.8rem;
    }

    /* Trackman 特徴エリア */
    .feature-list {
        flex-direction: column; /* 縦積みに変更 */
        gap: 50px;
    }

    .feature-list li {
        width: 100%;
    }
}


/* =========================================
   ここから feeセクション用スタイル
   ========================================= */



.bg-gray-area {
    background-color: #eeeeee;
    width: 100%;
    padding: 10px 0 50px 0;
    margin-top: 180px;
}


.campaign-container {
    max-width: 1100px;
    margin: 0 auto 100px auto;
}

.campaign-boxes {
    display: flex;
    justify-content: center;
    gap: 30px;
}

/* 特典ボックス */
.campaign-box {
    display: flex;
    background-color: #fff;
    width: 48%; /* 2列並び */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.campaign-container p.cs {
  font-size: 46px;
  padding-top: 20px;
  color: #fff;
}

/* 左側のラベル（斜めカット） */
.campaign-label {
    background-color: #7d3a43; /* 赤茶色 */
    color: #fff;
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 500;
    /* 右側を斜めにする */
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
    padding-right: 15px; /* 文字が斜め部分に被らないように */
}

/* 右側のコンテンツ */
.campaign-content {
    width: 70%;
    padding: 25px 20px;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 500;
    /* ラベルの斜め部分が食い込む分のマージンを調整 */
    margin-left: -20px; 
}

.text-red {
    color: #bf2c2c; /* 強調色の赤 */
    font-weight: 700;
    font-size: 1.3rem;
    margin-left: 5px;
}

/* --- Fee セクション --- */
.fee-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.fee-note {
    font-size: 0.9rem;
    margin-bottom: 40px;
    color: #555;
}

.fee-cards {
    display: flex;
    flex-wrap: wrap; /* 画面が狭い時に折り返す */
    justify-content: center; /* 中央揃え */
    gap: 15px;
}

.fee-card {
    background-color: #fff;
    width: 18%; /* 5列並びの基本幅 */
    min-width: 200px; /* 小さくなりすぎないように */
    padding: 30px 15px;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.plan-name {
    font-size: 1.8rem;
    margin: 0 0 15px 0;
    font-weight: 700;
}

.plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
}

.price-main {
    font-size: 2.4rem;
    font-weight: 700;
    color: #333;
}

.price-sub {
    font-size: 0.8rem;
}

.price-tax {
    font-size: 16px;
    margin: 0 0 15px 0;
}

.plan-detail p {
    font-size: 16px;
    margin: 5px 0;
}


/* --- レスポンシブ対応（スマホ・タブレット） --- */
@media (max-width: 768px) {
    /* 既存スタイルの調整 */
    .section-header h2 {
        font-size: 1.8rem;
    }
    .content-wrapper {
        flex-direction: column;
        margin-bottom: 80px;
    }
    .text-block {
        width: 100%;
        padding: 60px 30px;
        margin-bottom: -40px;
    }
    .image-block {
        width: 90%;
        margin-left: 0;
        margin-right: -20px;
    }
    .feature-list {
        flex-direction: column;
        gap: 50px;
    }
    .feature-list li {
        width: 100%;
    }

    /* --- 新規スタイルの調整 --- */
    
    /* Campaign: 縦並び */
    .campaign-boxes {
        flex-direction: column;
        align-items: center;
    }
    .campaign-box {
        width: 100%;
        max-width: 400px;
    }

    /* Fee: 2列または1列表示 */
    .fee-cards {
        gap: 20px;
    }
    .fee-card {
        width: 45%; /* スマホでは2列 */
    }
    .fee-note {
        font-size: 14px;
        line-height: 1.6;
        padding: 20px 0 0 0;
    }
}

@media (max-width: 480px) {
    /* さらに小さい画面では1列 */
    .fee-card {
        width: 100%;
        max-width: 300px;
    }
}

/* =========================================
   ここから Access セクション用スタイル
   ========================================= */

.access-container {
    margin: 80px auto 300px auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 5%;
}

/* 左側：マップ */
.access-map {
    width: 55%;
    /* 16:9 などの比率を維持したい場合 */
    aspect-ratio: 16 / 9; 
    background-color: #eee;
    min-height: 300px;
}

/* 右側：店舗情報 */
.access-info {
    width: 40%;
    text-align: left;
}

.store-name {
    font-size: 3.4rem;
    margin: 0 0 15px 0;
    font-weight: 500;
}

.store-address {
    font-size: 1.8rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.store-hours {
    font-size: 1.8rem;
    margin-bottom: 30px;
}

/* LINEバナー */
.line-banner {
    display: flex;
    align-items: center;
    border: 2px solid #57bb63;
    border-radius: 8px;
    padding: 15px 20px;
    text-decoration: none;
    position: relative;
    background-color: #fff;
    transition: background-color 0.3s;
    max-width: 520px;
}

.line-banner:hover {
    background-color: #f9fff9;
}

.line-icon-area {
    width: 50px;
    margin-right: 15px;
    flex-shrink: 0;
}

/* アイコン代わりの仮円（画像を配置する場合はimgタグを使用） */
.line-icon-circle {
    display: block;
    width: 40px;
    height: 40px;
    background-color: #06c755; /* LINE Green */
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 0.7rem;
    font-weight: bold;
}

.line-text {
    font-size: 2.4rem;
    line-height: 1.5;
}

.text-green {
    color: #06c755;
    font-weight: bold;
}

.text-highlight {
    background: linear-gradient(transparent 60%, #ffffaa 60%); /* マーカー風 */
    font-weight: bold;
}

/* Clickタグ（右下の三角形） */
.click-tag {
    position: absolute;
    bottom: -1px;
    right: -1px;
    background-color: #71be5d; /* 少し淡い緑 */
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 2px 2px 10px;
    /* 右下が直角の三角形のような形状にする簡易表現 */
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
    width: 40px;
    text-align: center;
    border-bottom-right-radius: 6px; /* バナーの角丸に合わせる */
}


/* --- レスポンシブ対応（スマホ・タブレット） --- */
@media (max-width: 768px) {
    /* 既存スタイルの調整 */
    .content-wrapper { flex-direction: column; margin-bottom: 80px; }
    .text-block { width: 100%; padding: 60px 30px; margin-bottom: -40px; }
    .image-block { width: 90%; margin-left: 0; margin-right: -20px; }
    .feature-list { flex-direction: column; gap: 50px; }
    .feature-list li { width: 100%; }
    .campaign-boxes { flex-direction: column; align-items: center; }
    .campaign-box { width: 100%; max-width: 400px; }
    .fee-cards { gap: 20px; }
    .fee-card { width: 45%; }

    /* --- Access セクション調整 --- */
    .access-container {
        flex-direction: column;
        gap: 30px;
    }
    .access-map {
        width: 100%;
        min-height: 250px;
    }
    .access-info {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .line-banner {
      width: 100%;
    }
    .store-address {
    font-size: 14px;
    margin-bottom: 15px;
  }
  .line-text {
    font-size: 1.8rem;
  }
}

@media (max-width: 480px) {
    .fee-card { width: 100%; max-width: 300px; }
}


/* =========================================
   ここから infoセクション用スタイル
   ========================================= */

  section.info div.inner {
    display: flex;
    justify-content: space-between;
  }

  section.info div.c_tit1 {
    text-align: left;
}

  ul.c_list1 {
    width: 70%;
}

@media (max-width: 768px) {
  section.info div.inner {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: 100px auto 180px auto;
  }
  ul.c_list1 {
    width: 100%;
  }
}