@charset "UTF-8";
/* 
 * Copyright (c) Morihiro Toshida and Google Gemini Pro, All rights reserved.
 */

/* :rootで、サイト全体で使う色の変数を定義します */
:root {
    --bg-color: #fefbf6; /* 背景色: 温かいクリーム色 */
    --text-color: #2F2F2F; /* 文字色: 知的なオフブラック */
    --accent-color: orange; /* rgba(218, 165, 32, 1); アクセント: 品の良いゴールド */
    --base-font-size: 1.1rem;
    --bg-primary-rgb: rgb(119, 184, 218);
    --bg-success-rgb: rgb(142, 202, 160);
    --bg-danger-rgb: rgb(235, 110, 159);
    --bg-custom-rgb: rgb(255, 165, 0);
    --bg-custom2-rgb: rgb(254, 252, 211);
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: var(--base-font-size);
    line-height: 1.8rem;
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
}

.lead {
    font-weight: 400;
}

.section-title {
    margin-top: 1rem;
    margin-bottom: 3rem;
}
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--accent-color);
    margin: 1rem auto 0;
}

/* ナビゲーションバー */
.navbar {
    background-color: rgba(254, 251, 246, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    font-size: var(--base-font-size);
}

/* .navbar-brand img {
    max-height: 40px;
} */

.dropdown-menu {
    --bs-dropdown-bg: rgba(255, 255, 255, 1);
    --bs-dropdown-link-hover-bg: rgb(255, 212, 131);
    --bs-dropdown-link-active-bg: orange;
    font-size: var(--base-font-size);
}

/* ヒーローセクション */
.hero {
    background-image: url(../images/hero-webflame-pc-12.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.hero h1 {
    font-size: 3.5rem;
    line-height: 1.4;
}
.hero h1 .highlight {
    color: var(--accent-color);
    border-bottom: 3px solid var(--accent-color);
    padding: 0 0.5rem;
}

/* ヘッダー */
.header {
    display: flex;
    align-items: center;
    text-align: start;
    background-color: #fff;
}

.header {
    background-image: url(../images/header-webflame-pc-202.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}

/* .gradation {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 70%);
    padding: 0 0 0 3rem;;
} */

.logo-animation-container {
    background-image: url(../images/logo-webflame.png);
    background-size: 100%;
}

/* 1. アニメーションの内容を定義（@keyframes） */
@keyframes floatAnimation {
    /* アニメーション開始時（0%） */
    0% {
        transform: translateY(0) rotate(0deg);
    }
    /* アニメーションの中間（50%） */
    50% {
        /* 25px上に移動し、逆方向に少し傾ける */
        transform: translateY(-25px) rotate(0deg);
    }
    /* アニメーション終了時（100%） */
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* 2. アニメーションを適用する画像要素のスタイル */
.floating-balloon {
    /* 上で定義した'floatAnimation'を適用 */
    animation-name: floatAnimation;
    
    /* アニメーションの1サイクルの時間（秒） */
    animation-duration: 5s;
    
    /* アニメーションの繰り返し回数（infinite = 無限） */
    animation-iteration-count: infinite;
    
    /* アニメーションの速度変化（ease-in-out = ゆっくり始まってゆっくり終わる） */
    animation-timing-function: ease-in-out;
}

/* 蛍光ペン効果のスタイル */
.highlight-text {
    display: inline;
    background: orange;
    padding: .5rem;
    color: #ffffff;
    line-height: 3.5rem;
}

/* --- Sequential Fade-in Animation --- */
/* アニメーション前の初期状態 */
.fade-in-up {
    opacity: 0; /* 透明 */
    transform: translateY(140px); /* 40px下に配置 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* アニメーションの設定 */
}

/* 2番目の要素のアニメーションを少し遅らせる */
.fade-in-up:nth-child(2) {
    transition-delay: 0.3s; /* 0.3秒遅れて開始 */
}

/* JavaScriptによってこのクラスが付与されるとアニメーションが開始される */
.fade-in-up.is-visible {
    opacity: 1; /* 不透明に */
    transform: translateY(0); /* 本来の位置に戻す */
}

/* ボタン */
.btn-custom {
    border: 1px solid var(--accent-color);
    background-color: var(--accent-color);
    color: white;
    padding: 0.65rem 1.3rem;
    border-radius: 50px;
    font-weight: normal;
    transition: all 0.3s ease;
    /* box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1); */
    /* border: 1px solid rgba(218, 165, 32, 1); */
}
.btn-custom:hover:not(:disabled) {
    border: 1px solid var(--accent-color);
    background-color: var(--bg-custom2-rgb);
    /* box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1); */
    color: var(--accent-color);
    font-weight: normal;
}
.btn-custom:disabled {
    border: 1px solid rgba(0, 0, 0, 0.3);
    background-color: #fff;
    cursor: not-allowed;
    /* box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1); */
    color: #000;
    font-weight: normal;
}
.btn-outline-custom {
    background-color: transparent;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    padding: 0.65rem 1.3rem;
    font-weight: normal;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
}
.btn-outline-custom:hover {
    background-color: var(--accent-color);
    color: #fff;
    font-weight: normal;
    border-color: var(--accent-color);
    /* transform: translateY(-2px); */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-outline-custom:hover:active {
    background-color: var(--accent-color);
    color: #fff;
    font-weight: normal;
    border-color: var(--accent-color);
    /* transform: translateY(-2px); */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 事業理念 */
.philosophy-icon {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
}

/* カード共通スタイル */
.card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(218, 165, 32, 0.25);
    transition: all 0.5s ease-in-out;
    height: 100%;
}
.card:hover {
    transform: translateY(5px);
    box-shadow: 0 15px 30px rgba(218, 165, 32, 0);
}

.card-img-top {
    border-radius: 15px 15px 0 0;
}

.card-gray {
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease-in-out;
    height: 100%;
}
.card-gray:hover {
    transform: translateY(-15px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* サービスカードのアイコン */
.service-icon {
    font-size: 3rem;
    color: var(--accent-color);
    padding: 0 !important;
    margin-bottom: 1.5rem;
}

/* 制作の流れ */
.process-icon, .process-icon-start, .process-icon-goal {
    font-size: 2.75rem;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
    padding: 0; /* ★変更：paddingは中のアイコンに設定 */
    display: inline-flex;
    justify-content: flex-start; 
    align-items: center;
    background-color: #fff;
    width: 90px;
    height: 90px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(218, 165, 32, 0.25);
    
    /* ★変更：widthプロパティのみを1秒かけてアニメーション */
    transition: width 0.7s ease-in-out; 
    
    position: relative;
    overflow: hidden;
    cursor: pointer; /* マウスカーソルをポインターに */
}

/* アイコン自体のスタイル */
.process-icon i, .process-icon-start i, .process-icon-goal i {
    /* ★変更：アイコンのサイズと左右の余白を固定 */
    min-width: 90px; 
    text-align: center;
}

.process-icon:hover, .process-icon-start:hover, .process-icon-goal:hover {
    width: 100%;
}

/* 矢印（→）のスタイル */
.process-icon::after {
    content: '↓';
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2.5rem;
    color: var(--accent-color);
    
    position: absolute;
    right: 30px; /* 右端からの位置 */
    top: 50%;
    transform: translateY(-50%);
    
    /* 最初は透明で見えない状態 */
    opacity: 0;
    
    /* ★重要：透明度(opacity)を0.3秒かけて変化させる。ただし、0.7秒遅れて開始する */
    transition: opacity 0.3s ease-in-out 0.3s;
}

/* 矢印（→）のスタイル */
.process-icon-start::after {
    content: 'START';
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.75rem;
    color: var(--accent-color);
    
    position: absolute;
    right: 30px; /* 右端からの位置 */
    top: 50%;
    transform: translateY(-50%);
    
    /* 最初は透明で見えない状態 */
    opacity: 0;
    
    /* ★重要：透明度(opacity)を0.3秒かけて変化させる。ただし、0.7秒遅れて開始する */
    transition: opacity 0.3s ease-in-out 0.3s;
}

/* 矢印（→）のスタイル */
.process-icon-goal::after {
    content: 'GOAL';
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.75rem;
    color: var(--accent-color);
    
    position: absolute;
    right: 30px; /* 右端からの位置 */
    top: 50%;
    transform: translateY(-50%);
    
    /* 最初は透明で見えない状態 */
    opacity: 0;
    
    /* ★重要：透明度(opacity)を0.3秒かけて変化させる。ただし、0.7秒遅れて開始する */
    transition: opacity 0.3s ease-in-out 0.3s;
}

/* ホバー時に矢印を表示させる */
.process-icon:hover::after, .process-icon-start:hover::after, .process-icon-goal:hover::after {
    opacity: 1;
}

/* FAQ アコーディオン */
.accordion-item {
    background-color: #fff;
    border: none;
    border-radius: 4px !important;
    margin-bottom: 1rem;
    box-shadow: 0 5px 15px rgba(218, 165, 32, 0.25);
}
.accordion-button {
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.8rem;
    background-color: #fff;
    border-radius: 4px !important;
    box-shadow: none;
}
.accordion-button:not(.collapsed) {
    background-color: var(--accent-color);
    color: #fff;
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(218, 165, 32, 0.25);
}
.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}
/* ニュース */


/* お問い合わせ */
.form-control, .form-select {
    border-radius: 6px;
    /* padding: 0.8rem 1.2rem; */
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.25rem rgba(218, 165, 32, 0.25);
}
.contact-info-box {
    background-color: #fff;
    padding: 2rem;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    height: 100%;
}
.qr-code {
    max-width: 150px;
}
.form-control::placeholder {
    color: lightgray;
}
select:invalid {
    color: black;
}

/* 当店について */
@keyframes scroll-background-up {
  /* アニメーション開始時 (Y軸 0px) */
  0% {
    background-position-y: 0;
  }
  
  /* アニメーション終了時 (Y軸 -[画像の高さ]px) */
  100% {
    /* * Y軸の位置を「画像1枚の高さ」分だけマイナス（上）に移動
     * 0px の状態と -140px の状態は、repeat-yによって
     * 見た目が全く同じになるため、シームレスに繋がります。
     */
     
    /* ★★★★★
       ここの '140px' を
       'logo-webflame.png' の実際の画像の高さ（px）に
       変更してください
       ★★★★★
     */
    background-position-y: -350px; 
  }
}

/* 呼び出し側のCSS（変更なし、確認用） */
.infinite-scroll-background {
  width: 100%;
  height: 600px; /* 表示領域の高さ */
  
  /* 背景画像を指定 */
  background-image: url('../images/logo-webflame.png');
  background-size: contain;
  
  /* 縦方向(Y軸)にのみ画像を繰り返す (必須) */
  background-repeat: repeat-y;
  
  /* アニメーションを適用 */
  animation: scroll-background-up 10s linear infinite;
  
  border: 1px solid #fff; /* 確認用 */

  padding-top: 1rem;
}

/* サイトマップ */
/* カード全体をアニメーションの基準にし、はみ出しを隠す */
.card.position-relative {
    overflow: hidden;
    /* ホバー時の影の変化のみをtransitionに指定 */
    /* transition: box-shadow 0.3s ease;  */
}

/* スライドしてくる色の面（::before疑似要素）の基本スタイル */
.card.position-relative::before {
    content: ''; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(247, 179, 53); /* スライドしてくる色 */
    
    /* 初期状態：カードの上側に見えないように移動させておく */
    transform: translateY(-101%);
    
    /* アニメーションの設定（0.4秒かけて変化） */
    transition: 0.3s ease-in-out;
    
    /* 文字よりも後ろに配置する */
    z-index: 0; /* これが重要 */
}

/* カード内の文字やリンクを色の面より手前に表示するための設定 */
.card .card-body {
    position: relative; /* z-indexを有効にするため */
    z-index: 1; /* 色の面（z-index: 0）より手前に表示 */
}
/* card-body内の全要素の文字色変更にトランジションを適用 */
.card .card-body * {
    transition: color 0.3s ease-in-out;
}

/* カードにホバーした時、色の面を元の位置（Y軸0）に戻す */
.card.position-relative:hover::before {
    transform: translateY(0);
}

/* カードにホバーした時、カード内のすべての文字を白にする */
.card.position-relative:hover .card-body * {
    color: #fff !important; /* !importantで強制的に上書き */
}

.icon-box {
    padding: 1rem;
    margin: 1rem;
    font-size: 1.75rem;
    color: #fff;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(247, 179, 53);
    border-radius: 5rem;
    flex: none;
}

.position-relative:hover .icon-box {
    background-color: #fff;
    color: rgb(247, 179, 53);
    z-index: 100;
    transition: color 0.3s ease-in-out;
} 

.position-relative::after {
    background-color: #fff;
    color: rgb(247, 179, 53);
}

/* フッター */
footer {
    background-color: #f6f1e9;
    padding: 1.5rem 0 0 0;
}

footer .copyright {
    font-size: 75%;
}

/* テーブルを見やすくするための簡単なスタイル */
.company-table {
    border: 1px solid #dee2e6;
}
.company-table th, .company-table td {
    padding: 1rem;
    vertical-align: top;
}
.company-table th {
    width: 30%;
    background-color: #f8f9fa;
    font-weight: 700;
}
/* セクションの上下の余白を調整 */
.page-section {
    padding-top: 120px; /* ヘッダーの高さ分を考慮 */
    padding-bottom: 80px;
}

.sticky-under-nav {
    top: 80px;
}

/* .order-button {
    cursor: pointer;
} */

.px-news {
    padding: .3rem 2.7rem;
}

.px-info {
    padding: .3rem 2.25rem;
}

.text-bg-primary {
    color: #fff;
    background-color: var(--bg-primary-rgb) !important;
}

.text-bg-success {
    color: #fff;
    background-color: var(--bg-success-rgb) !important;
}

.text-bg-danger {
    color: #fff;
    background-color: var(--bg-danger-rgb) !important;
}

.text-bg-custom {
    color: white;
    background-color: var(--bg-custom-rgb);
}

/* 576px未満ではカードが縦に並ぶように調整 */
@media (max-width: 575.98px) {
    .card-row-container .col-md-4 {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 0; /* g-4相当の余白 */
    }
    .infinite-scroll-background {
        width: 100%;
        height: 1270px; /* 表示領域の高さ */
  
        /* 背景画像を指定 */
        background-image: url('../images/logo-webflame.png');
        background-size: contain;
        
        /* 縦方向(Y軸)にのみ画像を繰り返す (必須) */
        background-repeat: repeat-y;
        
        /* アニメーションを適用 */
        animation: scroll-background-up 10s linear infinite;
        
        border: 1px solid #fff; /* 確認用 */
    }

    .gradation {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 70%);
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
    }
    
    section.header {
        padding: 5.5rem 0 1.75rem 1.5rem;
    }

    section.content {
        padding: 2.5rem 1.125rem 2.5rem 1rem;
    }

    section.content-prices {
        margin: 3rem auto 3rem auto;
    }
}

/* レスポンシブ */
@media (max-width:575.98px) {
    .hero {
        display: flex;
        align-items: center;
        text-align: center;
    }
    .hero h1 {
        font-size: 2.125rem;
        line-height: 1.4;
    }
    .hero h1 .highlight {
        color: var(--accent-color);
        border-bottom: 3px solid var(--accent-color);
        padding: 0 0.5rem;
    }

    .hero {
        background-image: url(../images/hero-webflame-pc-12.png);
        background-size: cover;
        background-position: right;
        margin-top: 56px;
        min-height: calc(100svh - 56px);
    }

    .header h1 {
        font-size: 1.5rem;
    }

    .lead {
        line-height: 130%;
    }

    .company-table {
        font-size: 0.75rem;
    }

    .btn-custom {
        background-color: var(--accent-color);
        color: #fff;
        border-color: var(--accent-color);
        padding: 0.65rem 1.3rem;
        font-weight: normal;
        border-radius: 50px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .btn-custom:hover {
        background-color: var(--accent-color);
        color: #fff;
        border-color: var(--accent-color);
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    .btn-custom:hover:active {
        background-color: var(--accent-color);
        color: #fff;
        border-color: var(--accent-color);
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* ページトップに移動 */
    .page-top {
        position: fixed;
        right: 15px;
        bottom: 34px;
        margin: 0;
        z-index: 1032;
    }
    .page-top a {
        position: relative;
        display: flex;
        width: 56px;
        height: 56px;
        justify-content: center;
        background-color: rgba(255, 165, 0, 0.8);
        border-radius: 50%;
        border: #fff 1px solid;
    }
    .page-top a::before {
        position: absolute;
        top: 7px;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        width: 14px;
        height: 14px;
        margin: auto;
        content: '';
        transform: rotate(-45deg);
        border-top: 2px #fff solid;
        border-right: 2px #fff solid;
    }

    /* ビジネスのスタイル */
    .card-business {
        border-color: rgba(218, 165, 32, 0.8) !important;
        border-width: 2px;
    }
    .card-business .card-header {
        background-color: rgba(218, 165, 32, 0.8);
        color: #fff;
        border-color: rgba(218, 165, 32, 0.8);
    }
    /* === 新しく作成したアウトラインボタンスタイル === */
    .btn-outline-business {
        /* 通常時は背景を透明に */
        background-color: transparent;
        /* 文字色をキーカラーのオレンジに */
        color: rgba(218, 165, 32, 0.8);
        /* 枠線をキーカラーのオレンジで表示 */
        border: 2px solid rgba(218, 165, 32, 0.8);
        /* 形状やアニメーションは.btn-customから継承 */
        padding: 0.65rem 1.3rem;
        font-weight: 600;
        border-radius: 50px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .btn-outline-business:hover:active {
        /* ホバー時に背景をオレンジで塗りつぶす */
        background-color: rgba(218, 165, 32, 0.8);
        /* 文字色を白に */
        color: #fff;
        /* 枠線の色も合わせる */
        border-color: rgba(218, 165, 32, 0.8);

            /* 浮き上がるエフェクトを適用 */
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    /* スタンダードのスタイル */
    .card-standard {
        border-color: rgba(192, 192, 192, 0.8) !important;
        border-width: 2px;
    }
    .card-standard .card-header {
        background-color: rgba(192, 192, 192, 0.8);
        color: #fff;
        border-color: rgba(192, 192, 192, 0.8);
    }
            /* === 新しく作成したアウトラインボタンスタイル === */
    .btn-outline-standard {
        /* 通常時は背景を透明に */
        background-color: transparent;
        /* 文字色をキーカラーのオレンジに */
        color: rgba(192, 192, 192, 0.8);
        /* 枠線をキーカラーのオレンジで表示 */
        border: 2px solid rgba(192, 192, 192, 0.8);
        
        /* 形状やアニメーションは.btn-customから継承 */
        padding: 0.65rem 1.3rem;
        font-weight: 600;
        border-radius: 50px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .btn-outline-standard:hover:active {
        /* ホバー時に背景をオレンジで塗りつぶす */
        background-color: rgba(192, 192, 192, 0.8);
        /* 文字色を白に */
        color: #fff;
        /* 枠線の色も合わせる */
        border-color: rgba(192, 192, 192, 0.8);

            /* 浮き上がるエフェクトを適用 */
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    /* ライトのスタイル */
    .card-light {
        border-color: rgba(172, 107, 37, 0.8) !important;
        border-width: 2px;
    }
    .card-light .card-header {
        background-color: rgba(172, 107, 37, 0.8);
        color: #fff;
        border-color: rgba(172, 107, 37, 0.8);
    }
            /* === 新しく作成したアウトラインボタンスタイル === */
    .btn-outline-light {
        /* 通常時は背景を透明に */
        background-color: transparent;
        /* 文字色をキーカラーのオレンジに */
        color: rgba(172, 107, 37, 0.8);
        /* 枠線をキーカラーのオレンジで表示 */
        border: 2px solid rgba(172, 107, 37, 0.8);
        
        /* 形状やアニメーションは.btn-customから継承 */
        padding: 0.65rem 1.3rem;
        font-weight: 600;
        border-radius: 50px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .btn-outline-light:hover:active {
        /* ホバー時に背景をオレンジで塗りつぶす */
        background-color: rgba(172, 107, 37, 0.8);
        /* 文字色を白に */
        color: #fff;
        /* 枠線の色も合わせる */
        border-color: rgba(172, 107, 37, 0.8);

            /* 浮き上がるエフェクトを適用 */
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    /* スタートのスタイル */
    .card-start {
        border-color: rgba(37, 91, 172, 0.8) !important;
        border-width: 2px;
    }
    .card-start .card-header {
        background-color: rgba(37, 91, 172, 0.8);
        color: #fff;
        border-color: rgba(37, 91, 172, 0.8);
    }
            /* === 新しく作成したアウトラインボタンスタイル === */
    .btn-outline-start {
        /* 通常時は背景を透明に */
        background-color: transparent;
        /* 文字色をキーカラーのオレンジに */
        color: rgba(37, 91, 172, 0.8);
        /* 枠線をキーカラーのオレンジで表示 */
        border: 2px solid rgba(37, 91, 172, 0.8);
        
        /* 形状やアニメーションは.btn-customから継承 */
        padding: 0.65rem 1.3rem;
        font-weight: 600;
        border-radius: 50px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .btn-outline-start:hover {
        /* ホバー時に背景をオレンジで塗りつぶす */
        background-color: rgba(37, 91, 172, 0.8);
        /* 文字色を白に */
        color: #fff;
        /* 枠線の色も合わせる */
        border-color: rgba(37, 91, 172, 0.8);

            /* 浮き上がるエフェクトを適用 */
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

}

@media (min-width:576px) {
    .hero {
        display: flex;
        align-items: center;
        text-align: center;
    }
    .hero h1 {
        font-size: 2.5rem;
        line-height: 1.4;
    }
    .hero h1 .highlight {
        color: var(--accent-color);
        border-bottom: 3px solid var(--accent-color);
        padding: 0 0.5rem;
    }

    .hero {
        background-image: url(../images/hero-webflame-pc-12.png);
        background-size: cover;
        background-position: right;
        margin-top: 56px;
        min-height: calc(100svh - 56px);
    }

    .header h1 {
        font-size: 2rem;
    }

    .btn-outline-custom {
        background-color: var(--accent-color);
        color: #fff;
        border-color: var(--accent-color);
        padding: 0.65rem 1.3rem;
        font-weight: normal;
        border-radius: 50px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .btn-outline-custom:hover {
        background-color: var(--accent-color);
        color: #fff;
        border-color: var(--accent-color);
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    .btn-outline-custom:hover:active {
        background-color: var(--accent-color);
        color: #fff;
        border-color: var(--accent-color);
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* ページトップに移動 */
    .page-top {
        position: fixed;
        right: 15px;
        bottom: 34px;
        margin: 0;
        z-index: 1032;
    }
    .page-top a {
        position: relative;
        display: flex;
        width: 56px;
        height: 56px;
        justify-content: center;
        background-color: rgba(255, 165, 0, 0.8);
        border-radius: 50%;
        border: #fff 1px solid;
    }
    .page-top a::before {
        position: absolute;
        top: 7px;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        width: 14px;
        height: 14px;
        margin: auto;
        content: '';
        transform: rotate(-45deg);
        border-top: 2px #fff solid;
        border-right: 2px #fff solid;
    }

    .gradation {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 70%);
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
    }
    
    section.header {
        padding: 5.5rem 0 1.75rem 1.5rem;
    }

    section.content {
        padding: 1.5rem 0 1.5rem 1rem;
        margin: 0 2rem 0 .75rem;
    }

    section.content-prices {
        margin: 3rem auto 3rem auto;
    }

    /* ビジネスのスタイル */
    .card-business {
        border-color: rgba(218, 165, 32, 0.8) !important;
        border-width: 2px;
    }
    .card-business .card-header {
        background-color: rgba(218, 165, 32, 0.8);
        color: #fff;
        border-color: rgba(218, 165, 32, 0.8);
    }
    /* === 新しく作成したアウトラインボタンスタイル === */
    .btn-outline-business {
        /* 通常時は背景を透明に */
        background-color: transparent;
        /* 文字色をキーカラーのオレンジに */
        color: rgba(218, 165, 32, 0.8);
        /* 枠線をキーカラーのオレンジで表示 */
        border: 2px solid rgba(218, 165, 32, 0.8);
        /* 形状やアニメーションは.btn-customから継承 */
        padding: 0.65rem 1.3rem;
        font-weight: 600;
        border-radius: 50px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .btn-outline-business:hover:active {
        /* ホバー時に背景をオレンジで塗りつぶす */
        background-color: rgba(218, 165, 32, 0.8);
        /* 文字色を白に */
        color: #fff;
        /* 枠線の色も合わせる */
        border-color: rgba(218, 165, 32, 0.8);

            /* 浮き上がるエフェクトを適用 */
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    /* スタンダードのスタイル */
    .card-standard {
        border-color: rgba(192, 192, 192, 0.8) !important;
        border-width: 2px;
    }
    .card-standard .card-header {
        background-color: rgba(192, 192, 192, 0.8);
        color: #fff;
        border-color: rgba(192, 192, 192, 0.8);
    }
            /* === 新しく作成したアウトラインボタンスタイル === */
    .btn-outline-standard {
        /* 通常時は背景を透明に */
        background-color: transparent;
        /* 文字色をキーカラーのオレンジに */
        color: rgba(192, 192, 192, 0.8);
        /* 枠線をキーカラーのオレンジで表示 */
        border: 2px solid rgba(192, 192, 192, 0.8);
        
        /* 形状やアニメーションは.btn-customから継承 */
        padding: 0.65rem 1.3rem;
        font-weight: 600;
        border-radius: 50px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .btn-outline-standard:hover:active {
        /* ホバー時に背景をオレンジで塗りつぶす */
        background-color: rgba(192, 192, 192, 0.8);
        /* 文字色を白に */
        color: #fff;
        /* 枠線の色も合わせる */
        border-color: rgba(192, 192, 192, 0.8);

            /* 浮き上がるエフェクトを適用 */
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    /* ライトのスタイル */
    .card-light {
        border-color: rgba(172, 107, 37, 0.8) !important;
        border-width: 2px;
    }
    .card-light .card-header {
        background-color: rgba(172, 107, 37, 0.8);
        color: #fff;
        border-color: rgba(172, 107, 37, 0.8);
    }
            /* === 新しく作成したアウトラインボタンスタイル === */
    .btn-outline-light {
        /* 通常時は背景を透明に */
        background-color: transparent;
        /* 文字色をキーカラーのオレンジに */
        color: rgba(172, 107, 37, 0.8);
        /* 枠線をキーカラーのオレンジで表示 */
        border: 2px solid rgba(172, 107, 37, 0.8);
        
        /* 形状やアニメーションは.btn-customから継承 */
        padding: 0.65rem 1.3rem;
        font-weight: 600;
        border-radius: 50px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .btn-outline-light:hover:active {
        /* ホバー時に背景をオレンジで塗りつぶす */
        background-color: rgba(172, 107, 37, 0.8);
        /* 文字色を白に */
        color: #fff;
        /* 枠線の色も合わせる */
        border-color: rgba(172, 107, 37, 0.8);

            /* 浮き上がるエフェクトを適用 */
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    /* スタートのスタイル */
    .card-start {
        border-color: rgba(37, 91, 172, 0.8) !important;
        border-width: 2px;
    }
    .card-start .card-header {
        background-color: rgba(37, 91, 172, 0.8);
        color: #fff;
        border-color: rgba(37, 91, 172, 0.8);
    }
            /* === 新しく作成したアウトラインボタンスタイル === */
    .btn-outline-start {
        /* 通常時は背景を透明に */
        background-color: transparent;
        /* 文字色をキーカラーのオレンジに */
        color: rgba(37, 91, 172, 0.8);
        /* 枠線をキーカラーのオレンジで表示 */
        border: 2px solid rgba(37, 91, 172, 0.8);
        
        /* 形状やアニメーションは.btn-customから継承 */
        padding: 0.65rem 1.3rem;
        font-weight: 600;
        border-radius: 50px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .btn-outline-start:hover {
        /* ホバー時に背景をオレンジで塗りつぶす */
        background-color: rgba(37, 91, 172, 0.8);
        /* 文字色を白に */
        color: #fff;
        /* 枠線の色も合わせる */
        border-color: rgba(37, 91, 172, 0.8);

            /* 浮き上がるエフェクトを適用 */
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
}

@media (min-width:768px) {
    .hero {
        margin-top: 56px;
        min-height: calc(100svh - 56px);
    }
    .hero h1 {
        font-size: 3rem;
        line-height: 1.4;
    }
    h2.section-title {
        font-size: 2rem;
    }
    .header h1 {
        font-size: 2rem;
    }

    /* アイコン自体のスタイル */
    .process-icon i {
        /* ★変更：アイコンのサイズと左右の余白を固定 */
        min-width: 90px; 
        text-align: center;
    }

    .process-icon:hover {
        width: 100%;
    }

    /* 矢印（→）のスタイル */
    .process-icon::after {
        content: '→';
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 2.5rem;
        color: var(--accent-color);
        
        position: absolute;
        right: 30px; /* 右端からの位置 */
        top: 50%;
        transform: translateY(-50%);
        
        /* 最初は透明で見えない状態 */
        opacity: 0;
        
        /* ★重要：透明度(opacity)を0.3秒かけて変化させる。ただし、0.7秒遅れて開始する */
        transition: opacity 0.3s ease-in-out 0.3s;
    }

    /* ホバー時に矢印を表示させる */
    .process-icon:hover::after {
        opacity: 1;
    }

    /* ページトップに移動 */
    .page-top {
        position: fixed;
        right: 25px;
        bottom: 37px;
        margin: 0;
        z-index: 1032;

        /* ▼▼▼ ここから追加 ▼▼▼ */
        /* 最初は透明で非表示にする */
        opacity: 0;
        visibility: hidden;
        /* 0.3秒かけてフワッと表示・非表示を切り替える */
        transition: opacity 0.3s, visibility 0.3s;
        /* ▲▲▲ ここまで追加 ▲▲▲ */
    }

    /* ▼▼▼ is-showクラスが追加されたら表示する ▼▼▼ */
    .page-top.is-show {
        opacity: 1;
        visibility: visible;
    }

    /* --- 以下は元のコードのまま --- */
    .page-top a {
        position: relative;
        display: flex;
        width: 56px;
        height: 56px;
        justify-content: center;
        background-color: rgba(255, 165, 0, 0.8);
        border-radius: 50%;
        border: #fff 1px solid;
    }

    .page-top a::before {
        position: absolute;
        top: 7px;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        width: 14px;
        height: 14px;
        margin: auto;
        content: '';
        transform: rotate(-45deg);
        border-top: 2px #fff solid;
        border-right: 2px #fff solid;
    }
}

@media (min-width:992px) {
    .hero {
        margin-top: 62px;
        min-height: calc(100svh - 62px);
    }
    .hero h1 {
        font-size: 3rem;
        line-height: 1.4;
    }
    h2.section-title {
        font-size: 2rem;
    }

    .title {
        margin: 0 auto;
        max-width: 800px;
    }
    
    /* ボタン */
    .btn-custom {
        /* border: 1px solid var(--accent-color); */
        background-color: var(--accent-color);
        color: white;
        padding: 0.65rem 1.3rem;
        border-radius: 50px;
        font-weight: normal;
        transition: all 0.3s ease;
        /* box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1); */
        border: 1px solid var(--accent-color);
    }
    .btn-custom:hover:not(:disabled) {
        border: 1px solid var(--accent-color);
        background-color: var(--bg-custom2-rgb);
        /* box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1); */
        color: var(--accent-color);
        font-weight: normal;
    }
    .btn-custom:disabled {
        border: 1px solid rgba(0, 0, 0, 0.3);
        background-color: #fff;
        cursor: not-allowed;
        /* box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1); */
        color: #000;
        font-weight: normal;
    }
    .btn-outline-custom {
        background-color: transparent;
        color: var(--accent-color);
        border: 1px solid var(--accent-color);
        padding: 0.65rem 1.3rem;
        font-weight: normal;
        border-radius: 50px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .btn-outline-custom:hover {
        background-color: var(--accent-color);
        color: #fff;
        font-weight: normal;
        border-color: var(--accent-color);
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    .btn-outline-custom:hover:active {
        background-color: var(--accent-color);
        color: #fff;
        font-weight: normal;
        border-color: var(--accent-color);
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* ドロップダウンのトグルボタンにフォーカスが当たった時の青い枠線（box-shadow）を非表示にする */
    .dropdown-toggle:focus {
        box-shadow: none;
    }

    /* --- Dropdown Fade-in Animation --- */

    /* 1. ドロップダウンメニューの初期状態をアニメーション用に変更 */
    .dropdown-menu {
        display: block; /* CSSアニメーションを有効にするため、常にブロック要素としておく */
        opacity: 0; /* 最初は透明 */
        visibility: hidden; /* 操作もできないように隠す */
        transform: translateY(-15px); /* 少し上から開始（Y軸方向に-15px） */
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; /* アニメーションを設定 */
        }

    /* 2. Bootstrapが付与する.showクラスが付いた時のスタイル（表示状態） */
    .dropdown-menu.show {
        opacity: 1; /* 不透明にする */
        visibility: visible; /* 表示して操作可能にする */
        transform: translateY(0); /* 本来の位置に戻す */
        margin-top: -1px; /* マジック（ドロップダウンの上下のブレ防止） */
    }

    /* アイコン自体のスタイル */
    .process-icon i, .process-icon-start i, .process-icon-goal i {
        /* ★変更：アイコンのサイズと左右の余白を固定 */
        min-width: 90px; 
        text-align: center;
    }

    .process-icon:hover, .process-icon-start:hover, .process-icon-goal:hover {
        width: 100%;
    }

    /* 矢印（→）のスタイル */
    .process-icon::after {
        content: '→';
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 2.5rem;
        color: var(--accent-color);
        
        position: absolute;
        right: 30px; /* 右端からの位置 */
        top: 50%;
        transform: translateY(-50%);
        
        /* 最初は透明で見えない状態 */
        opacity: 0;
        
        /* ★重要：透明度(opacity)を0.3秒かけて変化させる。ただし、0.7秒遅れて開始する */
        transition: opacity 0.3s ease-in-out 0.3s;
    }

    /* 矢印（→）のスタイル */
    .process-icon-start::after {
        content: 'START';
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 1.75rem;
        color: var(--accent-color);
        
        position: absolute;
        right: 30px; /* 右端からの位置 */
        top: 50%;
        transform: translateY(-50%);
        
        /* 最初は透明で見えない状態 */
        opacity: 0;
        
        /* ★重要：透明度(opacity)を0.3秒かけて変化させる。ただし、0.7秒遅れて開始する */
        transition: opacity 0.3s ease-in-out 0.3s;
    }

    /* 矢印（→）のスタイル */
    .process-icon-gorl::after {
        content: 'GORL';
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 1.75rem;
        color: var(--accent-color);
        
        position: absolute;
        right: 30px; /* 右端からの位置 */
        top: 50%;
        transform: translateY(-50%);
        
        /* 最初は透明で見えない状態 */
        opacity: 0;
        
        /* ★重要：透明度(opacity)を0.3秒かけて変化させる。ただし、0.7秒遅れて開始する */
        transition: opacity 0.3s ease-in-out 0.3s;
    }

    /* ホバー時に矢印を表示させる */
    .process-icon:hover::after, .process-icon-start:hover::after, .process-icon-goal:hover::after {
        opacity: 1;
    }

    /* ビジネスのスタイル */
    .card-business {
        border-color: rgba(218, 165, 32, 0.8) !important;
        border-width: 2px;
    }
    .card-business .card-header {
        background-color: rgba(218, 165, 32, 0.8);
        color: #fff;
        border-color: rgba(218, 165, 32, 0.8);
    }
    /* === 新しく作成したアウトラインボタンスタイル === */
    .btn-outline-business {
        /* 通常時は背景を透明に */
        background-color: transparent;
        /* 文字色をキーカラーのオレンジに */
        color: rgba(218, 165, 32, 0.8);
        /* 枠線をキーカラーのオレンジで表示 */
        border: 2px solid rgba(218, 165, 32, 0.8);
        
        /* 形状やアニメーションは.btn-customから継承 */
        padding: 0.65rem 1.3rem;
        font-weight: normal;
        border-radius: 50px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .btn-outline-business:hover {
        /* ホバー時に背景をオレンジで塗りつぶす */
        background-color: rgba(218, 165, 32, 0.8);
        /* 文字色を白に */
        color: #fff;
        /* 枠線の色も合わせる */
        border-color: rgba(218, 165, 32, 0.8);

            /* 浮き上がるエフェクトを適用 */
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    /* スタンダードのスタイル */
    .card-standard {
        border-color: rgba(192, 192, 192, 0.8) !important;
        border-width: 2px;
    }
    .card-standard .card-header {
        background-color: rgba(192, 192, 192, 0.8);
        color: #fff;
        border-color: rgba(192, 192, 192, 0.8);
    }
            /* === 新しく作成したアウトラインボタンスタイル === */
    .btn-outline-standard {
        /* 通常時は背景を透明に */
        background-color: transparent;
        /* 文字色をキーカラーのオレンジに */
        color: rgba(192, 192, 192, 0.8);
        /* 枠線をキーカラーのオレンジで表示 */
        border: 2px solid rgba(192, 192, 192, 0.8);
        
        /* 形状やアニメーションは.btn-customから継承 */
        padding: 0.65rem 1.3rem;
        font-weight: normal;
        border-radius: 50px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .btn-outline-standard:hover {
        /* ホバー時に背景をオレンジで塗りつぶす */
        background-color: rgba(192, 192, 192, 0.8);
        /* 文字色を白に */
        color: #fff;
        /* 枠線の色も合わせる */
        border-color: rgba(192, 192, 192, 0.8);

            /* 浮き上がるエフェクトを適用 */
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    /* ライトのスタイル */
    .card-light {
        border-color: rgba(172, 107, 37, 0.8) !important;
        border-width: 2px;
    }
    .card-light .card-header {
        background-color: rgba(172, 107, 37, 0.8);
        color: #fff;
        border-color: rgba(172, 107, 37, 0.8);
    }
            /* === 新しく作成したアウトラインボタンスタイル === */
    .btn-outline-light {
        /* 通常時は背景を透明に */
        background-color: transparent;
        /* 文字色をキーカラーのオレンジに */
        color: rgba(172, 107, 37, 0.8);
        /* 枠線をキーカラーのオレンジで表示 */
        border: 2px solid rgba(172, 107, 37, 0.8);
        
        /* 形状やアニメーションは.btn-customから継承 */
        padding: 0.65rem 1.3rem;
        font-weight: normal;
        border-radius: 50px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .btn-outline-light:hover {
        /* ホバー時に背景をオレンジで塗りつぶす */
        background-color: rgba(172, 107, 37, 0.8);
        /* 文字色を白に */
        color: #fff;
        /* 枠線の色も合わせる */
        border-color: rgba(172, 107, 37, 0.8);

            /* 浮き上がるエフェクトを適用 */
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    /* スタートのスタイル */
    .card-start {
        border-color: rgba(37, 91, 172, 0.8) !important;
        border-width: 2px;
    }
    .card-start .card-header {
        background-color: rgba(37, 91, 172, 0.8);
        color: #fff;
        border-color: rgba(37, 91, 172, 0.8);
    }
            /* === 新しく作成したアウトラインボタンスタイル === */
    .btn-outline-start {
        /* 通常時は背景を透明に */
        background-color: transparent;
        /* 文字色をキーカラーのオレンジに */
        color: rgba(37, 91, 172, 0.8);
        /* 枠線をキーカラーのオレンジで表示 */
        border: 2px solid rgba(37, 91, 172, 0.8);
        
        /* 形状やアニメーションは.btn-customから継承 */
        padding: 0.65rem 1.3rem;
        font-weight: normal;
        border-radius: 50px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    .btn-outline-start:hover {
        /* ホバー時に背景をオレンジで塗りつぶす */
        background-color: rgba(37, 91, 172, 0.8);
        /* 文字色を白に */
        color: #fff;
        /* 枠線の色も合わせる */
        border-color: rgba(37, 91, 172, 0.8);

            /* 浮き上がるエフェクトを適用 */
        /* transform: translateY(-2px); */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .gradation {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 70%);
    padding: 2.25rem 2.25rem 1.125rem 2.25rem;
    }
    
    section.header {
        padding: 7rem 0 3.125rem 1.5rem;
    }

    section.content {
        padding: 3rem 0 3rem 1rem;
    }
}

@media (min-width:1200px) {
    .hero {
        margin-top: 62px;
        min-height: calc(100svh - 62px);
    }
    .hero h1 {
        font-size: 3.5rem;
        line-height: 1.4;
    }
    h2.section-title {
        font-size: 2rem;
    }

    .title {
        margin: 0 auto;
        max-width: 1000px;
    }
}

@media ( min-width:1400px ) {
    .gradation {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 70%);
    padding: 2.25rem 2.25rem 1.125rem 2.5rem;
    }
    
    section.header {
        padding: 7rem 0 3.125rem 1.5rem;
    }

    section.content {
        padding: 3rem 0 3rem 1rem;
    }
}


/* 料金プランの基本スタイル (style.cssの内容をここに記述) */
body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #fefbf6;
    color: #2F2F2F;
    font-size: 1rem;
    line-height: 1.8;
    scroll-behavior: smooth;
}
/* h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
} */
/* .navbar {
    background-color: rgba(254, 251, 246, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
} */
/* .section-title {
    margin-bottom: 4rem;
    padding-bottom: 0;
} */
/* .section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--accent-color);
    margin: 1rem auto 0;
} */
/* .btn-custom {
    background-color: rgba(218, 165, 32, 0.8);
    border: 1px solid rgba(218, 165, 32, 1);
    color: #fff;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
}
.btn-custom:hover {
    background-color: rgba(218, 165, 32, 0.8);
    border: 1px solid rgba(218, 165, 32, 1);
    color: #fff;
} */
/* === 新しく作成したアウトラインボタンスタイル === */
.btn-outline-custom {
    /* 通常時は背景を透明に */
    background-color: transparent;
    /* 文字色をキーカラーのオレンジに */
    color: var(--accent-color);
    /* 枠線をキーカラーのオレンジで表示 */
    border: 1px solid var(--accent-color);
    
    /* 形状やアニメーションは.btn-customから継承 */
    padding: 0.75rem 1.5rem;
    font-weight: normal;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
}
.btn-outline-custom:hover {
    /* ホバー時に背景をオレンジで塗りつぶす */
    background-color: var(--accent-color);
    /* 文字色を白に */
    color: #fff;
    /* 枠線の色も合わせる */
    border-color: var(--accent-color);

        /* 浮き上がるエフェクトを適用 */
    /* transform: translateY(-2px); */
    /* box-shadow: 0 4px 10px rgba(0,0,0,0.1); */
}
/* footer {
    background-color: #f8f9fa;
    padding: 4rem 0 2rem;
    color: #6c757d;
}
footer a {
    color: #6c757d;
    text-decoration: none;
}
footer a:hover {
    color: rgba(218, 165, 32, 0.8);
}
.copyright {
    margin-top: 2rem;
    font-size: 0.9em;
} */

/* フッター */
/* footer {
    background-color: #f6f1e9;
    padding: 2rem 0;
}

footer .copyright {
    font-size: 75%;
} */

/* アニメーション用のCSS */
.card-pop {
    opacity: 0;
    transform: scale(0.6);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease-out;
}
.is-visible {
    opacity: 1;
    transform: scale(1.0);
}


/* 比較表のスタイル */
.table th, .table td {
    vertical-align: middle;
}
.table {
    --bs-table-hover-bg: rgb(243, 156, 18, 0.1);
    --bs-table-border-color: rgb(1, 1, 1, 0.2);
}
.text-custom {
    color: rgba(218, 165, 32, 0.8);
}

/* ご注文フォーム */
#order-form {
    background-color: rgba(254, 251, 246, 0.9);
}

/* table-custom-bordered スタイル */
.table-custom-bordered > :not(caption) > * > * {
/*
* Bootstrapのデフォルトのボーダー変数を使い、
* セルの下側と右側にだけ線を描画します。
*/
    border-bottom-width: var(--bs-border-width);
    border-right-width: var(--bs-border-width);
}

/* 各行の最後のセルだけ、右側の線を消す */
.table-custom-bordered > :not(caption) > * > *:last-child {
    border-right-width: 0;
}

/* テーブルの最後の行のセルだけ、下側の線を消す */
.table-custom-bordered > tbody > tr:last-child > * {
    border-bottom-width: 0;
}