/* 基本のリセットとボディの設定 */
* {
    margin: 0;
    padding: 0;
    text-indent: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.5;
}

/* レスポンシブだけ改行 */
/* 画面幅が787px以下の場合 */
@media (max-width: 787px) {
    .break {
        display: block; /* 改行させる */
    }
}

/* 画面幅が788px以上の場合 */
@media (min-width: 788px) {
    .break {
        display: none; /* 改行させない */
    }
}

/* フロートヘッダーのスタイル */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.fixed-header .logo {
    max-height: 20px;
}

.fixed-header .header-links {
    display: flex;
    gap: 10px;
}

.fixed-header .subscribe-button, .fixed-header .login-button {
    padding: 6px 12px;
    text-decoration: none;
    color: #fff;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
}

.fixed-header .subscribe-button {
    background-color: #ff8c00;
}

.fixed-header .login-button {
    background-color: #00bfff;
}

.fixed-header .subscribe-button:hover {
    background-color: #e07b00;
}

.fixed-header .login-button:hover {
    background-color: #009acd;
}

/* コンテンツ部分のスタイル */
.content {
    margin-top: 60px;
    background-image: url('../img/catch_700PX.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 80vh;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

/* テキストコンテナの設定 */
.text-container {
    width: 100%;
    writing-mode: vertical-rl;
    text-align: left;
    position: relative;
    top: 0;
    left: 10px;
}

/* テキストスタイル */
.s1 {
    font-size: 1.3em;
    font-weight: bold;
}


.white-back {
    background: #ffffff;
    z-index: -1;
}

.highlight {
    font-size: 2.5em;
    font-weight: bold;
    line-height: 1.1;
    position: relative;
    top: -10px;
    padding: 10px;
    z-index: 30;
    background: linear-gradient(to left, #474B8E, #1E90FF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 5px; /* 下に少し移動 */
}

.highlight .highlight-first {
    display: inline-block;
    margin-left: 2px; /* 右に少し移動 */
}

/* キャンペーンのスタイル */
.campaign {
    background-color: #5AAFC8;
    width: 100%;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 0;
    text-align: center;
}

.campaign .campaign-title {
    font-size: 2.6em;
    font-weight: bold;
    margin-bottom: 30px;
    line-height: 1.2;
    color: #FFFFFF;
}

.campaign .campaign-subtitle {
    font-size: 1.6em;
    font-weight: bold;
    color: #FFFFFF;
}

.campaign-period {
    background-color: #0000CD;
    border: 1px solid #e0e0e0; /* 薄いグレーの枠線を追加 */
    padding: 10px; /* 内側の余白を設定 */
    text-align: center; /* テキストを中央揃え */
    margin-bottom: 20px; /* 下に余白を追加 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
}

.campaign-period p {
    margin: 0; /* 段落の余白をリセット */
    font-size: 1.2em; /* フォントサイズを設定 */
    font-weight: bold; /* 最初の段落を太字に設定 */
    color: #ffffff; /* テキストの色を濃いグレーに設定 */
}

.campaign-info {
    background-color: #F07093;
    border: 1px solid #e0e0e0; /* 薄いグレーの枠線を追加 */
    padding: 10px; /* 内側の余白を設定 */
    text-align: center; /* テキストを中央揃え */
    margin-bottom: 20px; /* 下に余白を追加 */
    border-radius: 10px; /* 角を丸くする */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
}

.campaign-info p {
    font-size: 1.2em;
    color: #FFFFFF;
    font-weight: bold;
}

.campaign-info2 {
    color: #F07093;
    background-color: #FFFFFF;
    border: 1px solid #e0e0e0; /* 薄いグレーの枠線を追加 */
    padding: 10px; /* 内側の余白を設定 */
    text-align: center; /* テキストを中央揃え */
    margin-bottom: 20px; /* 下に余白を追加 */
    border-radius: 10px; /* 角を丸くする */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
}

.campaign-info2 .info {
    font-size: 1.2em;
    font-weight: bold;
}

.campaign-info2 h3 {
    font-size: 2.2em;
    margin-top: 10px;
    margin-bottom: 0px;
    font-weight: bold;
}

.campaign-info2 h3::before {
    content: "＼";
    margin-right: 5px;
}

.campaign-info2 h3::after {
    content: "／";
    margin-left: 5px;
}

.campaign-info2 h4 {
    font-size: 1.5em;
    margin-bottom: 20px;
    font-weight: bold;
}

.attention {
    color: #000000;
    font-size: 0.8em;
    text-align: left; /* テキストを左揃え */
    margin-top:15px;
    margin-bottom:5px;
}

.campaign .coop-message {
    font-size: 1em;
    margin-bottom: 20px;
    color: #333333; /* テキストカラーを濃いグレーに変更 */
    font-weight: normal;
    background-color: #FFF8DC; /* 背景色をコーンシルク（薄い黄色）に変更 */
    padding: 10px;
    border-radius: 5px;
    display: inline-block; /* インラインブロックに変更してサイズを調整 */
}

.campaign .coop-message a {
    color: #FF4500; /* リンクカラーをオレンジに変更 */
    text-decoration: underline; /* リンクに下線を追加 */
}

.prize-gallery {
    display: grid;
    grid-template-columns: 33% 66%; /* 左33%, 右66% */
    gap: 10px;
    margin-bottom: 40px;
}

.prize-item {
    text-align: center;
    background-color: #ffffff;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* 下部にスペースを追加 */
}

.highlight-item {
    flex: 1 1 300px;
    margin-bottom: 40px; /* 目玉商品の上下にスペースを追加 */
}

.highlight-image {
    width: 100%;
    height: auto;
}

.vertical-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.horizontal-group {
    display: flex;
    flex-direction: column;
    gap: 10px; /* 行間のスペースを20pxに設定 */
}

.compact-prize-item {
    background-color: #ffffff;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.prize-image {
    width: 100%;
    height: auto;
}

.vertical-image,
.horizontal-image {
    object-fit: cover; /* トリミングのため */
}

.vertical-image {
    width: 100%; /* 画像を小さくする */
    height: auto;
    margin: auto; /* 中央寄せ */
    margin-top: 50px; /* 上下にスペースを持たせる */
    margin-bottom: 50px; /* 上下にスペースを持たせる */
}

.horizontal-image {
    width: 70%; /* 画像を小さくする */
    height: 100px;
    margin: auto; /* 中央寄せ */
    margin-top: 10px;
    margin-bottom: 10px;
}

/* 画像エリアの高さを調整する */
.horizontal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 画像下に配置するテキストのスタイル */
.horizontal-item p {
    margin-top: 10px; /* 画像とテキストの間にスペースを追加 */
}

.campaign-month {
    background-color: #fff;
    margin: 20px 0;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.campaign-month h3 {
    font-size: 1.5em;
    color: #FFFFFF; /* テキストを白に変更 */
    background-color: #F07093; /* 背景色をピンクに変更 */
    padding: 5px 20px; /* 内側の余白を追加 */
    border-radius: 10px; /* 角を丸める */
    display: inline-block; /* コンテンツのサイズに合わせてボックスを調整 */
    margin-bottom: 10px;
}

.campaign-month ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.campaign-month ul li {
    font-size: 1em;
    font-weight: bold;
    color: #000;
    margin-bottom: 10px;
    display: flex; /* フレックスボックスを使用 */
    justify-content: space-between; /* スペースを確保 */
}

.campaign-month ul li .item-name {
    flex: 1; /* 左揃えにする */
    text-align: left;
}

.campaign-month ul li .item-quantity {
    flex: 0 0 auto; /* 右揃えにする */
    text-align: right;
    margin-left: 20px; /* 商品名と数量の間にスペースを追加 */
}

/* 商品名を太字にするクラス */
.prize-name {
    font-weight: bold;
    font-size: 1.2em;
    color: #000;
}

.sup {
    font-size: 0.8em;
    text-align: left;
    color: #000;
    margin-top: 10px;
}

/* プレゼント応募ボタンのスタイル */
.button-form {
    display: inline-block;
    padding: 10px;
    font-size: 1.0em;
    font-weight: bold;
    color: white;
    background: #0000CD;
    line-height: 1.0;
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    margin: 10px 0;
    width: 70%; /* 幅を画面の70%に設定 */
}

/* アプリ紹介のスタイル */
/* 薄い水色の背景色を追加 */
.bg-lightblue {
    background-color: #E0F0FF;
    margin: 0;
    padding: 10px 0 0;
}

.features, .plans {
    margin: 20px;
}

.feature, .plan {
    margin-bottom: 20px;
}

/* テキストと見出しのスタイル */
.s2, .s12 {
    color: #005BB5;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
    text-align: center; /* 中央揃えにする */
}

.highlight-heading {
    font-size: 2.2em; /* フォントサイズを調整 */
    line-height: 1.1;
    font-weight: bold;
    text-align: center;
    margin-top: 10px; /* 画像と見出しの間に少しスペースを追加 */
    margin-bottom: 20px; /* 見出しの下にスペースを追加 */
    background: linear-gradient(to right, #1E90FF, #474B8E);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feature .s2 {
    font-size: 1.6em; /* フォントサイズを調整 */
    margin-bottom: 10px; /* スペースを追加 */
    text-align: center; /* 中央揃えにする */
}

/* 画像中央配置用のスタイル */
.image-container {
    text-align: center;
    margin: 40px 0 20px 0; /* 上下にマージンを追加 */
}

.image-container img {
    max-width: 80%;
    height: auto;
}

/* 新しいスタイルを追加して角が丸い白い四角の背景にする */
.content-box {
    background-color: #FFFFFF;
    border-radius: 15px;
    padding: 20px;
    margin: 0 20px 20px 20px; /* 左右のマージンを追加 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: flex-start;
}

.content-box .icon {
    width: 30px; /* アイコンの幅 */
    height: 50px;
    margin: auto 40px auto 0 ; /* 上 右 下 左 */
}

.content-box .text-content {
    flex: 1;
    text-align: left; /* 左揃えにする */
}

.subheading {
    font-size: 1.4em; /* フォントサイズ */
    color: #000; /* 黒に設定 */
    font-weight: bold;
    text-align: center; /* 中央揃えにする */
    margin-bottom: 5px; /* 下に少しスペースを追加 */
}

.content-box p.s7 {
    text-align: left; /* 左揃えにする */
    margin: 0; /* 上下のマージンを削除 */
}

/* その他のスタイル */
.s8 {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
    color: #FFF;
}

/* 強調テキスト */
.highlight-text {
    color: #FF6347;  /* テキスト色を赤に設定 */
    font-weight: bold;  /* フォントを太く設定 */
}

/* ボタンのスタイル */
.button-container {
    display: flex;
    justify-content: center; /* 中央に配置 */
    margin-top: 20px; /* 上にマージンを追加 */
    margin-bottom: 40px; /* 下にスペースを追加 */
}

.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background: linear-gradient(to right, #FFA500, #FF4500); /* オレンジのグラデーション */
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    margin: 10px 0;
    width: 70%; /* 幅を画面の70%に設定 */
}

.button:hover {
    background: linear-gradient(to right, #FF8C00, #E07B00); /* ホバー時のオレンジのグラデーション */
}

/* featureクラスのスタイル */
.feature {
    background-color: #FFF;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin: 0 20px 20px 20px; /* 左右のマージンを追加 */
    text-align: left; /* 左揃えにする */
}

.description {
    font-size: 1.2em; /* フォントサイズを1.2emに設定 */
    margin-bottom: 10px; /* スペースを追加 */
    text-align: left; /* 左揃えにする */
}

/* feature-divider のスタイル */
.feature-divider {
    border: none;
    border-top: 1px dashed #888; /* 点線を細く細かくする */
    margin: 10px 0; /* 上下のマージンを設定 */
    width: 100%; /* 背景の白と同じ幅にする */
}

/* ユーザーの声部分のスタイル */
.user-voice {
    display: flex;
    align-items: center;
    justify-content: center; /* 中央揃えにする */
    margin-bottom: 10px; /* スペースを追加 */
}

.speechbubble {
    width: 30px; /* 画像の幅をもう少し大きく調整 */
    height: auto;
    margin-right: 10px; /* 画像とテキストの間にスペースを追加 */
}

.feature .h4 {
    font-size: 1.3em; /* フォントサイズを少し小さくする */
    color: #000; /* 黒に設定 */
    font-weight: bold;
}

/* ユーザーフィードバック部分のスタイル */
.user-feedback {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* スペースを追加 */
    text-align: left; /* 左揃えにする */
}

.user-feedback .user-icon {
    width: 25px; /* アイコン画像の幅をもう少し大きく設定 */
    height: auto;
    margin-right: 10px; /* 画像とテキストの間にスペースを追加 */
}

.feedback-divider {
    border: none;
    border-top: 1px dashed #888; /* 点線を細く細かくする */
    margin: 10px 0; /* 上下のマージンを設定 */
    width: 100%; /* 背景の白と同じ幅にする */
}

/* ボタンのテキストサイズを調整 */
.button.s8 {
    font-size: 18px; /* フォントサイズを大きく設定 */
}

/* .download クラスの設定 */
.download {
    background-color: #EBEBEB; /* 新しい背景色 */
    padding: 20px; /* 内側の余白を追加 */
    box-sizing: border-box; /* ボックスのサイズを含むようにする */
    margin: 0; /* マージンをリセット */
    text-align: center; /* 中央揃えにする */
}

.download p {
    margin: 10px 0; /* パラグラフの間にスペースを追加 */
    font-size: 0.9em; /* テキストを小さく設定 */
}

.banner-links {
    display: flex;
    justify-content: center;
    gap: 10px; /* バナーの間にスペースを追加 */
    margin: 10px 0; /* バナーの上と下にスペースを追加 */
}

.banner-links img {
    width: 150px; /* バナーの幅を設定 */
    height: auto; /* バナーの高さを自動調整 */
}

.banner-links .small-banner {
    width: 120px; /* Apple Storeバナーを少し小さく設定 */
    height: auto; /* バナーの高さを自動調整 */
}

.disclaimer {
    font-size: 0.8em; /* フォントサイズを小さく設定 */
    color: #666; /* テキスト色を薄く設定 */
    margin-top: 10px; /* 上にスペースを追加 */
}

/* .image-container クラスのスタイル */
.image-container {
    text-align: center;
    margin: 20px 0;
}

/* その他スタイル */
.s20 {
    padding-bottom: 2em;
    margin: 20px 10px;
    font-size: 0.8em;
    color: #333;
}

/* AppleおよびGoogleの商標に関するテキストを小さくするスタイル */
.download .disclaimer {
    font-size: 0.6em; /* フォントサイズをさらに小さく設定 */
    color: #666; /* テキスト色を薄く設定 */
}

/* ダウンロード案内のテキストを大きくするスタイル */
.download-text {
    font-size: 1em; /* フォントサイズを元のサイズに設定 */
    color: #333; /* テキスト色を設定 */
}

.left-shift {
    position: relative;
    left: -2.5em; /* 2.5文字分左に移動 */
}

/* タブのスタイル */
.tabs {
    overflow: hidden;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-around; /* タブを横並びに配置 */
    padding: 0; /* パディングをなくす */
}

.tabs button {
    background-color: #d3d3d3; /* 選択されていないタブの背景色をグレーに設定 */
    border: 1px solid #ccc; /* ボタンの境界線を設定 */
    border-bottom: none; /* 下の境界線を削除 */
    outline: none;
    cursor: pointer;
    padding: 10px 20px; /* ボタンの内側の余白を設定 */
    transition: background-color 0.3s;
    border-top-left-radius: 10px; /* 左上の角を丸く */
    border-top-right-radius: 10px; /* 右上の角を丸く */
    margin-bottom: -1px; /* ボタンの下部を少し上げる */
    font-size: 1.2em; /* フォントサイズを設定 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
    flex-grow: 1; /* タブの幅を均等に広げる */
    margin: 0; /* タブ間のスペースをなくす */
}

.tabs button:hover {
    background-color: #bbb; /* ホバー時の背景色を設定 */
}

/* アクティブなタブの背景色を白に設定 */
.tabs button.active {
    background-color: #ffffff; /* アクティブなタブの背景色を白に設定 */
    border-bottom: 1px solid #ffffff; /* アクティブなタブの下部を背景と同じ色に */
    font-weight: bold; /* フォントを太字に */
}

/* タブコンテンツ */
.tab-content {
    display: none;
    margin-top: -1px; /* タブとコンテンツを完全にくっつける */
}

/* タブコンテンツのスタイル */
.white-background {
    padding: 20px 20px 0;
    border: 1px solid #ccc; /* コンテンツボックスの境界線を設定 */
    border-top: none; /* 上の境界線を削除 */
    border-radius: 0 0 10px 10px; /* 下の角を丸く */
    background-color: #fff; /* 背景色を白に設定 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
}

.white-background-light {
    padding: 20px 20px 0;
    border: 1px solid #ccc; /* コンテンツボックスの境界線を設定 */
    border-radius: 10px 10px 10px 10px; /* 四角を丸く */
    background-color: #fff; /* 背景色を白に設定 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
    margin: 10px 0 30px; /* レギュラーのコンテンツとのスペース */
}

.tab-content.active {
    display: block;
}

/* レギュラープランと学割プランのフォントサイズを統一する */
.plan .s12 {
    font-size: 1.2em; /* フォントサイズを統一 */
}

/* オススメテキストのスタイル修正 */
.recommended-text {
    color: red; /* テキスト色を赤に設定 */
    font-weight: bold; /* フォントを太字に設定 */
    font-size: 1.0em; /* フォントサイズを大きく設定 */
    text-align: center; /* 中央揃えにする */
    margin-bottom: -5px; /* 下にスペースを狭く */
}

.recommended-text::before {
    content: "＼"; /* 逆スラッシュを挿入 */
    margin-right: 5px; /* スラッシュとテキストの間にスペースを追加 */
}

.recommended-text::after {
    content: "／"; /* スラッシュを挿入 */
    margin-left: 5px; /* テキストとスラッシュの間にスペースを追加 */
}

/* h4 タグの文字サイズを「宅配」と同じ大きさに設定 */
.plan h4 {
    color: black; /* 文字色を黒に設定 */
    font-size: 1.2em; /* フォントサイズを「宅配」と同じに設定 */
}

/* 価格部分全体のフォントサイズを大きくし、その中で価格の数字部分が他のテキスト部分よりも大きいままにする */
.price {
    font-size: 1.2em; /* 基本フォントサイズを大きく設定 */
}

.price .amount {
    font-size: 1.8em; /* 価格の数字部分をさらに大きく設定 */
    font-weight: bold; /* フォントを太字に設定 */
}

/* サービス比較表のスタイル */
.comparison-table {
    table-layout: fixed; /* テーブルのレイアウトを固定 */
    width: 100%; /* テーブルを全幅にする */
    border-collapse: collapse; /* 境界線を重ねる */
    margin-bottom: 20px; /* テーブルの下にスペースを追加 */
    position: relative; /* 親要素を相対位置に設定 */
}

.comparison-table th,
.comparison-table td {
    border: none; /* 境界線を削除 */
    padding: 8px; /* パディングを小さくする */
    text-align: left; /* 左揃えにする */
    line-height: 1.2; /* 行間を詰める */
    vertical-align: middle; /* 垂直方向の整列を中央に設定 */
}

.comparison-table th {
    background-color: #f2f2f2; /* 背景色を追加 */
    font-weight: bold; /* 太字にする */
    position: relative; /* 擬似要素のために相対位置に設定 */
    text-align: center; /* 中央寄せにする */
    font-size: 0.9em; /* テキストサイズを小さく設定 */
}

.comparison-table th:first-child {
    background-color: transparent; /* 左上隅のセルの背景色を表示 */
}

.comparison-table td:first-child {
    white-space: pre-wrap; /* 折り返しを有効にする */
    word-break: break-word; /* 単語内でも折り返す */
    overflow-wrap: break-word; /* 長い単語を折り返す */
    font-size: 0.9em; /* テキストサイズを小さく設定 */
}

.comparison-table td {
    font-size: 0.9em; /* テキストサイズを小さく設定 */
}

.comparison-heading {
    text-align: left; /* 左揃えにする */
    color: black; /* 文字色を黒にする */
    font-size: 1.5em; /* フォントサイズを大きくする */
    font-weight: bold; /* 太字にする */
    margin-bottom: 10px; /* 下にスペースを追加 */
    margin-left: 10px; /* 左にスペースを追加 */
}

.comparison-table tbody {
    background-color: white; /* 背景色を白に設定 */
}

.comparison-table tr {
    border-bottom: 2px solid var(--bg-lightblue); /* 横の罫線を太くして色をbg-lightblueと同じに設定 */
}

.comparison-table tbody tr {
    height: 3em; /* 行の高さを2行分に設定 */
}

/* 2列目と3列目のテキストを太字にして中央寄せにする */
.comparison-table td:nth-child(2),
.comparison-table td:nth-child(3) {
    font-weight: bold; /* 太字にする */
    text-align: center; /* 中央寄せにする */
}

/* レギュラープランのスタイル */
.comparison-table th:nth-child(2) {
    background-color: #004696; /* 背景色を設定 */
    color: white; /* フォント色を白に設定 */
}

/* ライトプランのスタイル */
.comparison-table th:nth-child(3) {
    background-color: #64AFF0; /* 背景色を設定 */
    color: white; /* フォント色を白に設定 */
}

/* レギュラープランとライトプランの間に太い縦線を追加 */
.comparison-table th:nth-child(2)::after {
    content: ""; /* 擬似要素の内容を空に設定 */
    display: block; /* ブロック要素に設定 */
    width: 5px; /* 線の幅を5pxに設定 */
    height: 100%; /* 線の高さを100%に設定 */
    background-color: var(--bg-lightblue); /* 線の色を設定 */
    position: absolute; /* 絶対位置に設定 */
    right: 0; /* 線の位置を右に設定 */
    top: 0; /* 線の位置を上に設定 */
    z-index: 1; /* 線を前面に設定 */
}

/* 変数を使用する場合 */
:root {
    --bg-lightblue: #E0F0FF; /* bg-lightblueクラスの色に合わせる */
}

/* application クラスのスタイル */
.application {
    text-align: center; /* 中央寄せ */
    margin-bottom: 30px; /* 下に余白を追加 */
}

.application .highlight-heading {
    font-size: 2.2em; /* フォントサイズを調整 */
    line-height: 1.1;
    font-weight: bold;
    text-align: center;
    margin-top: 10px; /* 画像と見出しの間に少しスペースを追加 */
    margin-bottom: 50px; /* 見出しの下にスペースを追加 */
    background: linear-gradient(to right, #1E90FF, #474B8E);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 動画コンテナのスタイル */
.video-container {
    margin-bottom: 50px; /* 下に余白を追加 */
    position: relative; /* 子要素の絶対位置を相対位置に基づかせる */
}

/* 小見出しのスタイル */
.video-container p {
    font-size: 1.4em; /* フォントサイズを大きく */
    font-weight: bold; /* 太字にする */
    position: absolute; /* 絶対位置に設定 */
    top: -30px; /* 動画のフレームのすぐ上に配置 */
    left: 10px; /* 左揃えにする */
    margin: 0; /* 余白をリセット */
}

/* 動画のサイズ */
.video-size {
    width: 320px;
    height: 240px;
}

/* faq クラスのスタイル */
.faq {
    margin-top: 100px; /* 上部にスペースを確保 */
    text-align: center; /* 中央寄せ */
}

/* FAQの見出しスタイル */
.faq-heading h4 {
    font-size: 1.4em; /* フォントサイズを大きく */
    margin-bottom: 5px; /* 下に余白を追加 */
}

/* FAQリンクボタンのスタイル */
.faq-link .faq-button {
    display: inline-block; /* インラインブロックに設定 */
    padding: 15px 30px; /* パディングを追加 */
    font-size: 1.2em; /* フォントサイズを大きく */
    color: white; /* 文字色を白に設定 */
    background-color: #007BFF; /* 背景色を青に設定 */
    text-decoration: none; /* 下線を削除 */
    border-radius: 5px; /* 角を丸める */
    transition: background-color 0.3s; /* ホバー時の背景色変更 */
}

.faq-link .faq-button:hover {
    background-color: #0056b3; /* ホバー時の背景色を変更 */
}

/* フッターのスタイル */
.footer {
    margin-top: 90px;
    padding: 30px 0 30px;
    background: #00a8e9;
    color: #fff;
    width: 100%;
    padding-bottom: 20px;
    text-align: center; /* 中央寄せ */
}

.footer_logo {
    margin-bottom: 30px; /* ロゴとリンクの間に余白を追加 */
}

.footer-logo-img {
    width: 60%; /* 画面幅の60%に設定 */
}

.footer_links {
    width: 80%;
    margin: 0 auto;
    box-sizing: border-box;
}

.footer_links ul {
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none; /* liの頭の点を削除 */
    padding: 0; /* 余白を削除 */
}

.footer_links ul li {
    width: 48%; /* 左右のテキストエリアの幅を維持 */
    margin-top: 10px;
    text-align: left; /* 左揃え */
}

.footer_links ul li:nth-child(odd) {
    padding-right: 20px; /* 奇数番目のリストアイテムに右パディングを追加 */
}

.footer_links ul li:nth-child(even) {
    padding-left: 20px; /* 偶数番目のリストアイテムに左パディングを追加 */
}

.footer_links ul li a {
    color: #fff;
    font-weight: 400;
    font-size: 15px;
    text-decoration: none; /* 下線を削除 */
}

.footer_links ul li a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer_inner {
    max-width: 1100px;
    width: 80%;
    margin: 20px auto; /* 上下の余白を20pxに調整 */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* テキストが長い場合に折り返すように設定 */
}

.footer_inner p {
    color: #fff;
    font-size: 10px;
    letter-spacing: .1em;
    margin: 0; /* 上下の余白をリセット */
}

.footer_inner p.footer_copyright {
    text-align: left; /* 左揃え */
    width: 100%; /* 全幅で表示 */
}

/* キャンペーンバナーのスタイル - レスポンシブ対応 */
.campaign-banner {
  background-color: #fff;
  text-align: center;
  padding: 20px;
  font-weight: bold;
  width: 100%;
  box-sizing: border-box;
  z-index: 1000;
}

.campaign-text {
  color: #ff69b4; /* ピンク色 */
  font-size: 22px;
  margin: 0 0 15px 0;
  line-height: 1.6;
  text-align: center;
}

.campaign-additional {
  color: #ff69b4; /* ピンク色 */
  font-size: 20px;
  margin: 15px 0 0 0;
  line-height: 1.6;
  text-align: center;
}

.sushi-image {
  max-width: 150px;
  margin: 10px auto;
  display: block;
}