/* 基本的なスタイルリセット */
body, p, a {
    margin: 0;
    padding: 0;
    font-family: "ryo-gothic-plusn", sans-serif; /* 本文フォント */
    font-size: 1.2rem;
}

h1, h2, h3, .h1, .h2, .h3 {
    margin: 0;
    padding: 0;
    font-family: "ryo-text-plusn", sans-serif; /* 見出しフォント */
}

/* コンテナの最大幅を上書き */
.container {
    max-width: 1300px;
}

/* セクション共通のパディング */
section {
    padding: 100px 0; /* 上下100pxのパディングを設定 */
    overflow: hidden;
}
.disp_pc{
    display: block;
}
.disp_sp{
    display: none;
}

/* ファーストビュー */
#fv {
    background: url('./img/hero_pc.jpg') no-repeat center center;
    background-size: cover;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    min-height: 100vh; /* PCでの背景画像表示のための最低限の高さ */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* 子要素を絶対位置で配置するための基準点 */
}

#fv .container {
    max-width: 100%; /* PCでは背景画像がfullwidth */
    padding-top: 0; 
    padding-bottom: 0; 
    position: static; /* containerは通常の位置指定に戻す */
}

.hero-text-content {
  position: absolute;   /* 絶対位置指定 */
  top: 25%;             /* 上から50%の位置に配置 */
  left: 50%;            /* 左から50%の位置に配置 */
  transform: translate(-50%, -50%); /* 要素自体のサイズを考慮して真ん中に */
  width: 100%;          /* 幅をコンテナに合わせる */
  max-width: 960px; /* PC表示での最大幅（必要に応じて調整） */
  padding: 0 15px; /* 左右の余白 */
}

#fv .company-name {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    letter-spacing: 1px;
    font-weight: 500;
}

#fv h1 {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

#fv .lead-text-pc {
    display: none; /* SPでは非表示 */
}

.hero-text-content p {
    color: #1e2b50;
    text-shadow: none !important;
    font-size: 1.4rem;
    line-height: 1.7;
}

/* SP-only lead text, placed outside #fv section */
.lead-text-sp {
    font-size: 1rem;
    line-height: 1.8;
    text-align: center;
    padding: 20px;
    background-color: #fff;
    color: #333;
}

/* レスポンシブ対応 */
@media (max-width: 767.98px) {
    #fv {
        background: url('./img/hero_sp.jpg') no-repeat center center;
        background-size: cover;
        min-height: 400px; /* SPでの背景画像表示のための最低限の高さ */
    }

    #fv .company-name {
        font-size: 1rem;
    }

    #fv h1 {
        font-size: 2rem;
        writing-mode: vertical-rl; /* 縦書き */
        text-orientation: upright; /* 文字の向き */
        line-height: 1.5; /* 行間調整 */
        margin-left: 1rem; /* 左に少し余白 */
    }
}

/* お問い合わせセクション */
#contact-cta {
    background-color: #434463; /* PDF指示の背景色 */
    color: #fff;
    position: relative;
    overflow: hidden; /* 疑似要素がはみ出さないように */
}

#contact-cta::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%; /* セクション全体をカバー */
    height: 100%; /* セクション全体をカバー */
    background-image: url('./img/bg_texture.png'); /* パターン画像のパスを指定 */
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover; /* オブジェクトフィットカバーに相当 */
    background-blend-mode: multiply;
    pointer-events: none; /* クリックを妨げないように */
}

/* 下部お問い合わせセクション */
#contact-cta-bottom {
    background-color: #434463; /* PDF指示の背景色 */
    color: #fff;
    position: relative;
    overflow: hidden; /* 疑似要素がはみ出さないように */
}

#contact-cta-bottom::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%; /* セクション全体をカバー */
    height: 100%; /* セクション全体をカバー */
    background-image: url('./img/bg_texture.png'); /* パターン画像のパスを指定 */
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover; /* オブジェクトフィットカバーに相当 */
    background-blend-mode: multiply;
    pointer-events: none; /* クリックを妨げないように */
}

#contact-cta h2 {
    font-size: 3.5rem;
    font-weight: 300;
    margin: 30px 0;
}

.waku {
    border: 1px solid #ffffff;
    padding: 10px;
    font-size: 2rem;
    margin-right: 20px;
    display: inline-block;
}
.monitor-camp{
    width: 50%;
}

#contact-cta .campaign-text {
    font-family: "ryo-gothic-plusn", sans-serif; /* ゴシック体 */
    font-size: 1.5rem; /* サイズ調整可能 */
    margin-top: 10px; /* 見出しとの余白 */
    margin-bottom: 20px; /* 次の要素との余白 */
    color: #ffff00; /* 黄色に変更 */
}

#contact-cta .small-text {
    font-size: 0.875rem;
}

/* ボタン共通スタイル */
.cta-buttons .btn {
    padding: 0.75rem 2rem;
    border-radius: 5px;
    margin: 0;
    transition: all 0.3s ease;
    font-weight: bold;
}

/* ボタンA (プライマリ) */
.cta-buttons .btn-primary {
    background-color: #fff; /* 白背景 */
    border-color: #007bff; /* 青枠線 */
    color: #007bff; /* 青文字 */
}

.cta-buttons .btn-primary:hover {
    background-color: #e6e6e6; /* ホバーで少しグレーに */
    border-color: #0056b3; /* ホバーで少し濃い青に */
    color: #0056b3;
}

/* ボタンB (セカンダリ) */
.cta-buttons .btn-secondary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
    font-size: 1.6rem;
}

.cta-buttons .btn-secondary:hover {
    background-color: #0056b3; /* ホバーで少し濃い青に */
    border-color: #0056b3;
    color: #fff;
}

/* 家づくりの不安 (アコーディオン) */
.anx_cont{
    margin-top: -220px;
}
.section-header h2{
    font-size: 3.2rem;
    font-weight: 300;
}
.section-header h2[data-splitting] {
    line-height: 0.7;
}

#anxiety {
    background-color: #f2f2f2; /* セクション背景色 */
    position: relative;
    overflow: hidden; /* zumen.pngがはみ出さないように */
    padding-top: 0; /* ここも上部のパディングを削除 */
}

#anxiety::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 50%;
    background: url(./img/zumen.png) no-repeat bottom left;
    background-size: contain;
    pointer-events: none;
    max-width: 100%;
}

#anxiety .section-header {
    background: none; /* 背景画像はHTMLで配置するため削除 */
    padding: 0;
    margin-bottom: 40px;
    position: relative; /* z-indexを有効にするため */
    z-index: 1; /* コンテンツがzumen.pngより手前に来るように */
    margin-top: -80px; /* この値で画像との重なりを調整します */
}

#anxiety .question-icon {
    width: 130px; /* アイコンサイズ調整 */
    height: auto;
    animation: bounce 2s infinite; /* bounceアニメーションを2秒かけて無限に繰り返す */
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-15px); /* 弾む高さ */
  }
  60% {
    transform: translateY(-7px);
  }
}

.accordion {
    position: relative;
    z-index: 100;
    width: 1000px;
    margin: 0 auto;
}

#anxiety .accordion-button {
    background-color: #999999; /* アコーディオンヘッダーの背景色 */
    color: #fff; /* アコーディオンヘッダーの文字色 */
    font-family: "ryo-text-plusn", sans-serif;
    font-size: 1.25rem;
    justify-content: center; /* テキストを中央揃えにする */
    position: relative; /* アイコンを絶対配置するための基準 */
}

#anxiety .accordion-button:not(.collapsed) {
    color: #fff; /* 開いている時の文字色 */
    background-color: #999999; /* 開いている時の背景色 */
}

#anxiety .accordion-button::after {
    filter: brightness(0) invert(1); /* アイコンを白くする */
    position: absolute; /* アイコンを絶対配置に */
    right: 1.25rem;     /* 右端からの位置を固定 */
    top: 50%;           /* 上下中央に配置 */
    transform: translateY(-50%);
}

#anxiety .accordion-body {
    padding: 40px; /* アコーディオンコンテンツのパディング */
}

#anxiety .accordion-body img {
    margin-bottom: 20px; /* 画像とリストの間隔 */
}

#anxiety .accordion-body .accordion-image-col {
    padding: 0 20px; /* PCでの画像左右パディング */
}

#anxiety .accordion-body ul {
    list-style: none;
    padding-left: 0;
}

#anxiety .accordion-body ul li {
    margin-bottom: 10px; /* リスト項目の間隔 */
}

#anxiety .accordion-body ul li:last-child {
    margin-bottom: 0;
}

/* レスポンシブ対応 */
@media (max-width: 767.98px) {
    #anxiety::before {
        width: 150px; /* SPでのサイズ調整 */
        height: 150px; /* SPでのサイズ調整 */
    }

    #anxiety .question-icon {
        width: 40px; /* SPでのアイコンサイズ調整 */
        margin-right: 10px; /* SPでの間隔調整 */
    }

    #anxiety .accordion-button {
        font-size: 1rem; /* SPでのフォントサイズ調整 */
    }

    #anxiety .accordion-body {
        padding: 15px; /* SPでのパディング調整 */
    }

    #anxiety .accordion-body img {
        margin-bottom: 15px; /* SPでの画像とリストの間後 */
    }
}


#anxiety .accordion-body ul {
    list-style: none;
    padding-left: 0;
}

#anxiety .accordion-body ul li {
    margin-bottom: 1rem;
}

#anxiety .accordion-body ul li .bi {
    margin-right: 0.5rem;
}

/* 「新しいけど、安心」の理由 */
#reason {
    padding-top: 0; /* パディングトップを削除 */
}

#reason .reason-top-row {
    background-color: #d1d5dc; /* 100vwセクションの背景色 */
    position: relative; /* 疑似要素の基準 */
    overflow: hidden; /* 疑似要素がはみ出さないように */
}

#reason .reason-top-row::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%; /* 横幅を%で調整可能に */
    height: 100%;
    background-image: url('./img/bg_texture.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain; /* 画像がはみ出さないように調整 */
    background-blend-mode: multiply; /* 乗算効果を追加 */
    pointer-events: none;
    z-index: 0;
}

#reason .reason-top-row h2 {
    color: #0066cc;
    font-size: 3.2rem;
    margin-bottom: 20px;
    font-weight: 300;
}

#reason .reason-text {
    margin-bottom: 0;
}

#reason .point-item img {
    max-width: 100%; /* 画像が親要素に収まるように */
    height: auto;
    margin-bottom: 1rem;
}

#reason .point-item h3 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: #0066cc;
    text-align: left;
    font-weight: 300;
}

#reason .point-item p {
    line-height: 1.6;
}

/* 帯見出しのラッパー（背景） */
.section-banner-wrapper {
  background-color: #3a4a78; /* CTAセクションの背景色を流用 */
  padding: 30px 0;
  margin-bottom: 100px;
}

/* 帯見出しのテキスト */
.section-banner-heading {
    color: #fff;
    font-weight: bold;
    font-size: 4rem;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    font-weight: 300;
}

/* レスポンシブ対応 */
@media (max-width: 767.98px) {
    .reason-top-row {
        padding: 60px 0;
    }
    .reason-top-row h2 {
        font-size: 2rem;
    }
    .point-item {
        margin-bottom: 2rem; /* SPでの各ポイント間の余白 */
    }

    .mb-5 {
        margin-bottom: 3rem !important; /* SPでの画像とテキストの間隔 */
    }

    .point-item .col-md-4 {
        margin-bottom: 1rem; /* SPでの画像とテキストの間隔 */
    }
}

/* テクノストラクチャー工法 */
#technostructure {
  padding-top: 0 !important; /* ラッパーがパディングを持つためセクション自体のパディングはリセット */
  padding-bottom: 0 !important;
}

/* C and B section wrapper */
.techno-title h2 {
    font-size: 3rem;
    font-weight: 500;
    margin-bottom: 0px;
}
.techno-title p{
    font-size: 2.3rem;
    font-weight: 300;
    font-family: "ryo-text-plusn", sans-serif;
    margin-bottom: 20px;
}
.techno-text-heading-wrapper {
  background-color: #f2f2f2; /* CとBの背景色 */
  padding: 80px 0; /* 上下のパディング */
  color: #333; /* テキスト色 */
  text-align: center; /* テキストを中央揃えに */
}

/* A section wrapper */
.techno-title{
    background-color: #f2f2f2;
    padding: 50px 0;
}
.techno-svg-heading-wrapper {
  background-image: linear-gradient(to right, #e6e6e6, #bababa); /* Aのグラデーション背景 */
  padding: 40px 0;
}

.techno-main-heading { /* C: 科学的に〜 */
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.techno-sub-heading { /* B: テクノストラクチャー〜 */
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.techno-svg {
    max-width: 30%;
    height: auto;
}

/* 耐震セクション */
.techno-resilience-section {
    background-color: #ffffff; /* 耐震の背景色 */
    padding: 80px 0;
    margin-bottom: 60px; /* 制震セクションとの間の余白 */
    position: relative; /* ラベルのposition: absoluteの基準 */
}

/* 制震セクション */
.techno-damping-section {
    background-color: #f2f2f2; /* 制震の背景色 */
    padding: 80px 0;
    position: relative; /* ラベルのposition: absoluteの基準 */
}
iframe{
    padding: 100px;
}

/* 各セクションのラベル */
.section-label {
    position: absolute;
    top: 5%;
    left: 4%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 5rem;
    font-weight: bold;
    padding: 20px 10px;
    color: #9d8860;
    font-family: "ryo-text-plusn", sans-serif;
    z-index: 10;
    font-weight: 300;
    letter-spacing: 20px;
}

.resilience-label {
    background-color: transparent; /* 背景色なし */
}

.damping-label {
    background-color: transparent; /* 背景色なし */
}

.techno-item {
    margin-bottom: 3rem;
}

.techno-item h3 {
    font-size: 2.3rem;
    margin-bottom: 1rem;
    color: #0066cc;
    font-weight: 300;
}

.techno-item p {
    line-height: 1.8;
}

/* テクノストラクチャーセクション内の追加リスト */
.techno-feature-list {
    background-color: #f2f2f2;
    padding: 20px;
    margin-top: 20px; /* 上の段落との余白 */
}

.techno-feature-list ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0; /* ulのデフォルトマージンをリセット */
}

.techno-feature-list ul li {
    margin-bottom: 10px; /* リスト項目の間隔 */
    line-height: 1.6;
}

.techno-feature-list ul li:last-child {
    margin-bottom: 0;
}

.techno-feature-list ul li .bi {
    margin-right: 0.5rem;
    color: #c06660; /* アイコンの色（アコーディオンのヘッダー色に合わせる） */
}

/* レスポンシブ対応 */
@media (max-width: 767.98px) {
    .techno-item {
        margin-bottom: 2rem; /* SPでの各項目間の余白 */
    }

    .techno-item .col-md-6 {
        margin-bottom: 1rem; /* SPでの画像とテキストの間隔 */
    }
}

/* 4つの特別仕様 */
#special-features {
    padding-top: 0; /* ラッパーがパディングを持つためセクション自体のパディングはリセット */
    padding-bottom: 100px;
}

/* タイトルセクション */
.special-features-title-wrapper {
    background-image: url('./img/point_bg.jpg'); /* 背景画像 */
    background-size: cover; /* 画面全体を覆うように調整 */
    background-position: center; /* 中央に配置 */
    background-repeat: no-repeat; /* リピートをなくす */
    padding: 200px 0;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

.title-background-box {
    background-color: rgba(255, 255, 255, 0.8); /* 白背景と透明度 */
    padding: 30px; /* 内側の余白 */
    display: inline-block; /* 内容に合わせて幅を調整 */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); /* ドロップシャドウ */
    border-radius: 0; /* 角を丸めない */
}

.special-features-main-heading {
    font-size: 3rem;
    font-weight: bold;
    color: #fff;
    background-color: transparent;
    padding: 0;
    box-shadow: none;
    font-weight: 500;
}

/* コンテンツセクション */
.special-features-content-area {
    padding-top: 40px;
}

.feature-item {
    background-color: #fff;
    padding: 2rem;
    margin-bottom: 1rem; /* SP表示時のマージン */
    text-align: center; /* 画像とテキストを中央揃え */
}

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

.feature-item h3 {
    font-size: 2.3rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: #0066cc;
    font-weight: 300;
}

.feature-item p {
    line-height: 1.6;
}
.pc-corp{
    display: block;
}
.sp-corp{
    display: none;
}

/* レスポンシブ対応 */
@media (max-width: 767.98px) {
    .special-features-title-wrapper {
        padding: 60px 0;
    }
    .special-features-main-heading {
        font-size: 2rem;
    }
    .feature-item {
        margin-bottom: 1.5rem; /* SPでの各項目間の余白 */
    }
}

/* レスポンシブ対応 */
@media (max-width: 767.98px) {
    .feature-item {
        margin-bottom: 1.5rem; /* SPでの各項目間の余白 */
    }
}

/* 来場者特典 */
#benefits {
    background: url('./img/pc_quobg.jpg') no-repeat center center;
    background-size: cover;
    padding: 100px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#benefits .container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefits-content h2 {
    background-color: #999999;
    font-family: "ryo-gothic-plusn", sans-serif; /* 本文フォント */
    color: #ffffff;
    padding: 15px 0;
    margin-bottom: 0;
    border-radius: 10px 10px 0 0;
    font-size: 2.3rem;
    font-weight: 500;
}

.benefits-content {
    width: 70%;
}

.benefits-content-inner {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 0;
    border-radius: 10px;
}

.benefits-card-section {
    padding: 30px;
}

.benefits-quo-card {
    max-width: 250px;
}

#benefits .price {
    font-size: 2rem;
    font-weight: bold;
    color: #000000;
    line-height: 1;
    margin-bottom: 20px;
}

#benefits .price span {
    font-size: 1.5rem;
    color: #fff;
}

.campaign-text{
    font-size: 3.5rem;
    margin: 20px 0;
    font-weight: 300;
}

/* レスポンシブ対応 */
@media (max-width: 767.98px) {
    #benefits {
        background: url('./img/sp_quobg.jpg') no-repeat center center;
        background-size: cover;
    }
    .benefits-content {
        width: 90%;
    }
}

@media (max-width: 991.98px) {
    .benefits-right {
        min-height: 300px; /* SP表示時に右カラムの高さを確保 */
    }
}

/* フッター */
footer {
    background-color: #213b90;
    padding: 40px 0;
    color: #fff; /* 全ての文字色を白に */
}

.footer-logo {
    max-width: 250px; /* ロゴサイズ調整 */
}

/* レスポンシブ対応 */
@media (max-width: 767.98px) {
    .footer-logo {
        margin-bottom: 1.5rem; /* SPでのロゴと情報の間隔 */
    }
}

@media screen and (max-width: 1720px){
    #fv h1 {
        font-size: 4rem;
    }
    .hero-text-content p {
        font-size: 1.2rem;
    }
    .hero-text-content {
        top: 24%;
    }
}
@media screen and (max-width: 1366px){
    #contact-cta {
        padding: 70px 0;
    }
    .section-header h2,#reason .reason-top-row h2 {
        font-size: 2.8rem;
    }
    #reason .point-item h3, .techno-item h3 , .feature-item h3 {
        font-size: 2rem;
    }
    #reason .container ,#technostructure .container{
        width: 1000px;
        margin: 0 auto;
        max-width: 100%;
    }
    .section-label {
        font-size: 4rem;
    }
    iframe {
        padding: 70px;
    }
    .special-features-main-heading {
        font-size: 2.5rem;
    }
    #benefits {
        padding: 50px 0;
    }
    .campaign-text,#contact-cta h2 {
        font-size: 3rem;
    }
    #contact-cta-bottom {
        padding: 60px 0;
    }
    .waku {
        font-size: 1.6rem;
    }
    .monitor-camp {
        width: 45%;
    }
    .special-features-title-wrapper {
        padding: 150px 0;
    }
}
@media screen and (max-width: 1100px){
    body, p, a {
        font-size: 1rem;
    }
    #fv .company-name {
        font-size: 1.2rem;
    }
    #fv h1 {
        font-size: 3.3rem;
        margin-bottom: 1.2rem;
    }
    .accordion {
        width: 850px;
        max-width: 100%;
    }
    .hero-text-content p {
        font-size: 1rem;
    }
    .campaign-text, #contact-cta h2 {
        font-size: 2.7rem;
    }
    #contact-cta {
        padding: 50px 0;
    }
    .cta-buttons .btn-secondary {
        font-size: 1.4rem;
    }
    #anxiety .question-icon {
        width: 100px;
    }
    .section-header h2, #reason .reason-top-row h2 {
        font-size: 2.5rem;
    }
    .section-banner-heading {
        font-size: 3rem;
    }
    .techno-title p {
        font-size: 2rem;
    }
    .techno-title h2 {
        font-size: 2.7rem;
        font-weight: 500;
        margin-bottom: 0px;
    }
    .section-label {
        font-size: 3.5rem;
        top: 2%;
        left: 3%;
    }
    .special-features-main-heading {
        font-size: 2rem;
    }
    .special-features-title-wrapper {
        padding: 120px 0;
    }
    #reason .point-item h3, .techno-item h3, .feature-item h3 {
        font-size: 1.7rem;
    }
    .special-features-content-area{
        width: 1000px;
        margin: 0 auto;
        max-width: 100%;
    }
    .feature-item {
        padding: 1rem 2rem;
        margin-bottom: 0;
    }
    .benefits-content {
        width: 80%;
    }
    .benefits-quo-card {
        max-width: 180px;
    }
    .benefits-content h2 {
        font-size: 2rem;
    }
    .campaign-text, #contact-cta h2 {
        font-size: 2.5rem;
    }
    .footer-logo {
        max-width: 220px;
    }
}
@media screen and (max-width: 1100px){
    #fv {
        min-height: 800px;
    }
}
@media screen and (max-width: 820px){
    .md_br{
        display: block;
    }
}
@media screen and (max-width: 430px){
    body, p, a {
        font-size: .9rem;
    }
    .sp_br{
        display: block;
    }
    .disp_pc{
        display: none;
    }
    .disp_sp{
        display: block;
    }
    .hero-text-content {
        top: 42%;
        width: 90%;
    }
    #fv .company-name {
        font-size: 1rem;
    }
    #fv h1 {
        font-size: 2.8rem;
        text-align: left;
        margin: 40px auto 80px;
    }
    .monitor-camp {
        width: 73%;
    }
    .cta_ttl_box{
        display: block !important;
    }
    .waku {
        font-size: 1.2rem;
        letter-spacing: 5px;
        padding: 5px 20px;
        margin: 0;
    }
    .campaign-text, #contact-cta h2 {
        font-size: 2.2rem;
        margin: 25px 0;
    }
    #anxiety .question-icon {
        width: 70px;
    }
    .accordion {
        width: 95%;
    }
    .section-header h2, #reason .reason-top-row h2 {
        font-size: 1.8rem;
    }
    #anxiety .section-header {

        margin-top: 150px;
    }
    #anxiety .accordion-button {
        font-size: 1.4rem;
    }
    .reason-top-row {
        padding: 0 0 50px;
    }
    #anxiety {
        padding: 0 0 60px;
    }
    .section-banner-heading {
        font-size: 2rem;
    }
    #reason .container, #technostructure .container {
        width: 90%;
    }
    .techno-title p {
        font-size: 1.4rem;
    }
    .techno-title h2 {
        font-size: 1.8rem;
    }
    #reason .point-item h3, .techno-item h3, .feature-item h3 {
        font-size: 1.4rem;
    }
    .techno-svg {
        max-width: 70%;
    }
    .section-label {
        font-size: 2.8rem;
    }
    #anxiety .accordion-body ul li {
        margin-bottom: .4rem;
    }
    iframe {
        padding: 0;
    }
    .pc-corp{
        display: none;
    }
    .sp-corp{
        display: block;
    }
    .special-features-main-heading {
        font-size: 1.5rem;
    }
    .benefits-content h2 {
        font-size: 1.6rem;
    }
    #benefits .price {
        font-size: 1.6rem;
    }
    .benefits-content {
        width: 90%;
    }
}
@media screen and (max-width: 375px){
    #fv .company-name {
        font-size: 0.9rem;
    }
    .techno-title h2,.section-header h2 {
        font-size: 1.6rem;
    }
    #contact-cta h2 {
        font-size: 2rem;
    }
    .section-label {
        font-size: 2.2rem;
    }
}




/* Splitting.js アニメーション */

/* 2行以上の見出しで行間が広がる問題の修正 */
[data-splitting] {
    line-height: 1.4; /* 行間を固定値で調整 */
}


/* 1. フェードアップ */
[data-splitting].split-fade-up .char {
    opacity: 0;
    transform: translateY(20px);
}
[data-splitting].split-fade-up.aos-animate .char {
    animation: fade-up 0.8s forwards;
    animation-delay: calc(var(--char-index) * 0.05s);
}

@keyframes fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. 回転イン */
[data-splitting].split-rotate-in .char {
    opacity: 0;
    transform: rotate(90deg);
}
[data-splitting].split-rotate-in.aos-animate .char {
    animation: rotate-in 0.8s forwards;
    animation-delay: calc(var(--char-index) * 0.05s);
}

@keyframes rotate-in {
    to {
        opacity: 1;
        transform: rotate(0);
    }
}

/* 3. 波打ち */
[data-splitting].split-wave-in .char {
    opacity: 0;
    transform: translateY(20px);
}
[data-splitting].split-wave-in.aos-animate .char {
    animation: wave-in 1s forwards;
    animation-delay: calc(var(--char-index) * 0.05s);
}

@keyframes wave-in {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}