/* 基本のリセットとボディの設定 */
* {
    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;
}

/* 改行を無効化 */
.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: 40px;
    margin-left: 10px;
}

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

.fixed-header .subscribe-button, .fixed-header .login-button {
    padding: 6px 12px;
    text-decoration: none;
    color: #fff;
    border-radius: 5px;
    font-size: 16px;
    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;
    margin-right: 20px;
}

.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_1920-1080.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 100%; /* 画面幅の100% */
    height: 680px; /* 高さを指定 */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start; /* 左に配置 */
    align-items: center; /* 垂直方向に中央に配置 */
}

/* テキストコンテナの設定 */
.text-container {
    width: 50%; /* 画面幅の50%に設定 */
    text-align: left;
    position: relative;
    left: 80px; /* 右に移動 */
    top: -150px; /* 上に移動 */
    writing-mode: horizontal-tb; /* 横書きに設定 */
}

/* テキストスタイル */
.s1 {
    font-size: 2.5em;
    font-weight: bold;
    text-shadow: 1px 1px 2px #FFFFFF;
}

.highlight {
    font-size: 4.0em;
    font-weight: bold;
    line-height: 1.1;
    position: relative;
    top: -10px;
    padding: 10px;
    z-index: 3;
    background: linear-gradient(to left, #474B8E, #1E90FF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 20px;
}

.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: 3.4em;
    font-weight: bold;
    margin-bottom: 50px;
    line-height: 1.2;
    color: #FFFFFF;
}

.campaign .campaign-subtitle {
    font-size: 2.4em;
    font-weight: bold;
    color: #FFFFFF;
    margin-top: 30px;
}

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

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

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

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


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

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

.campaign-info2 h3 {
    font-size: 3.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: 2.6em;
    margin-bottom: 20px;
    font-weight: bold;
}

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


.campaign .coop-message {
    font-size: 1.0em;
    margin: 20px auto;
    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;
    width: 70%;
    text-align: center;
    grid-template-columns: 33% 66%; /* 左33%, 右66% */
    gap: 10px;
    margin: 0 auto 40px;
}

.prize-item {
    width: 70%;
    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: 0 auto 40px; /* 目玉商品の上下にスペースを追加 */
}

.highlight-image {
    width: 90%;
    height: auto;
    margin: 20px auto 20px;
}

.vertical-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%; /* 高さを100%に設定 */
    padding: 10px;
    background-color: #ffffff; /* 背景色を白に設定 */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* 下部にスペースを追加 */
}

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

.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: 80%; /* 画像を小さくする */
    height: auto;
    margin: auto; /* 中央寄せ */
    margin-top: 10px; /* 上下にスペースを持たせる */
    margin-bottom: 20px; /* 上下にスペースを持たせる */
}

.horizontal-image {
    width: 70%; /* 画像を小さくする */
    height: 250px;
    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 {
    width: 50%; /* 画像を小さくする */
    background-color: #fff;
    margin: 20px 0;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 10px auto;
}

.campaign-month h3 {
    font-size: 2.0em;
    color: #FFFFFF; /* テキストを白に変更 */
    background-color: #F07093; /* 背景色を青に変更 */
    padding: 5px 70px; /* 内側の余白を追加 */
    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: 1.4em;
    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.8em;
    color: #000;
}

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

/* プレゼント応募ボタンのスタイル */
.button-form {
    display: inline-block;
    padding: 10px;
    font-size: 1.5em;
    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: 20px 0 10px;
    width: 70%; /* 幅を画面の70%に設定 */
}

.bg-lightblue {
    background-color: #E0F0FF;
    margin: 0;
    padding: 10px 0 0;
}

/* features クラスの設定 */
.features {
    width: 60%; /* 画面幅の60%に設定 */
    margin: 0 auto; /* 中央に配置 */
}

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

.highlight-heading {
    font-size: 3.0em;
    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: 2.0em;
    color: #005BB5;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.description {
    font-size: 1.4em;
    margin-bottom: 10px;
    text-align: center;
}

.bg-lightblue .image-container,
.news-site .image-container {
    text-align: center;
    margin: 80px 0 40px 0;
}

.bg-lightblue .image-container img,
.news-site .image-container img {
    max-width: 80%;
    height: auto;
}

.content-box {
    background-color: #FFFFFF;
    border-radius: 15px;
    padding: 20px;
    width: 60%; /* 画面幅の60%に設定 */
    margin: 0 auto 20px auto; /* 中央に配置 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: flex-start;
}

.content-box .icon {
    width: 40px;
    height: 60px;
    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 {
    font-size: 1.2em;
    text-align: left;
    margin: 0;
}

.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: 2.0em;
    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: 40%;
}

.button:hover {
    background: linear-gradient(to right, #FF8C00, #E07B00);
}

.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;
}

.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: 40px;
    height: auto;
    margin-right: 10px;
}

.feature .h4 {
    font-size: 1.4em;
    color: #000;
    font-weight: bold;
}

.user-feedback {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    text-align: left;
}

.user-feedback .user-icon {
    width: 40px;
    height: auto;
    margin-right: 10px;
}

.user-feedback .s4 {
    font-size: 1.2em;
}

.feedback-divider {
    border: none;
    border-top: 1px dashed #888;
    margin: 10px 0;
    width: 100%;
}

/* download クラスの設定 */
.download-wrapper {
    background-color: #EBEBEB;
    padding: 10px 0; /* 上下のパディングのみ */
    margin: 30px auto; /* 中央に配置 */
    width: 100%; /* 画面幅の100%に設定 */
}

.download {
    padding: 20px;
    width: 65%; /* 画面幅の65%に設定 */
    margin: 0 auto; /* 中央に配置 */
    text-align: center;
}

.banner-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 10px 0;
}

.banner-links img {
    width: 250px;
    height: auto;
}

.banner-links .small-banner {
    width: 205px;
    height: auto;
}

.image-container {
    text-align: center;
    margin: 20px 0;
}

.download .disclaimer {
    font-size: 0.8em;
    text-align: left;
    color: #666;
}

.download-text {
    font-size: 1.4em;
    color: #333;
}

.left-shift {
    position: relative;
    left: -2.5em;
}

.tabs {
    overflow: hidden;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    padding: 0;
    width: 70%; /* 画面幅の70%に設定 */
    margin: 0 auto; /* 中央に配置 */
}

.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;
    width: 70%; /* tabsの幅に合わせる */
    margin: 0 auto; /* 中央に配置 */
}

/*plans クラスの設定 */
.plans {
    width: 60%; /* 画面幅の60%に設定 */
    margin: 0 auto; /* 中央に配置 */
}

.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);
    width: 100%; /* 親要素の幅に合わせる */
    margin: 0 auto; /* 中央に配置 */
}

.white-background-light {
    padding: 20px 20px 0;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin: 10px 0 30px;
    width: 100%; /* 親要素の幅に合わせる */
    margin: 20px auto 50px; /* 上 | 左右 | 下 */
}

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

.white-background .plan .s2 {
    font-size: 1.6em;
    text-align: center;
    font-weight: bold;
}

.plan .s12 {
    font-size: 1.6em;
    text-align: center;
    font-weight: bold;
}

.plan p.s7 {
    font-size: 1.2em;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
}

.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;
}

.plan h4 {
    color: black;
    font-size: 1.2em;
    text-align: center;
}

.price {
    font-size: 1.4em;
}

.price .amount {
    font-size: 2.0em;
    font-weight: bold;
}

.plans .button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 2.0em;
    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: 80%;
}

/* comparisonクラスの設定 */
.comparison {
    width: 65%; /* 画面幅の65%に設定 */
    margin: 30px auto 20px; /* 中央に配置 */
}

.comparison-heading {
    text-align: left;
    color: black;
    font-size: 2.0em;
    font-weight: bold;
    margin-bottom: 5px;
}

.comparison-table {
    table-layout: fixed;
    width: 100%;
    margin: 0 auto; /* 中央に配置 */
    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: 1.4em;
}

.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: 1.2em;
}

.comparison-table td {
    font-size: 1.4em;
}

.comparison-table tbody {
    background-color: white;
}

.comparison-table tr {
    border-bottom: 2px solid var(--bg-lightblue);
}

.comparison-table tbody tr {
    height: 3em;
}

.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;
    height: 100%;
    background-color: var(--bg-lightblue);
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.s20 {
    padding-bottom: 2em;
    margin: 20px 0;
    font-size: 1.0em;
    color: #333;
}

:root {
    --bg-lightblue: #E0F0FF;
}

/* applicationクラスの設定 */
.application {
    text-align: center;
    margin-bottom: 30px;
    width: 70%; /* 画面幅の70%に設定 */
    margin: 0 auto; /* 中央に配置 */
}

.video-container {
    margin: 50px auto 80px;
    position: relative;
    width: 100%;
    max-width: 960px; /* 最大幅を設定 */
    padding-top: 56.25%; /* 16:9 アスペクト比のためのパディング */
}

.video-container p {
    font-size: 1.8em;
    font-weight: bold;
    position: absolute;
    top: -40px;
    margin: 0;
}

.video-size {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.faq {
    text-align: center;
    width: 70%; /* 画面幅の70%に設定 */
    margin: 50px auto; /* 中央に配置 */
}

.faq-heading h4 {
    font-size: 1.4em;
    margin-bottom: 5px;
}

.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;
    background: #00a8e9;
    color: #fff;
    width: 100%;
    text-align: center;
}

.footer_logo {
    margin-bottom: 30px;
}

.footer-logo-img {
    width: 20%;
}

.footer_links {
    width: 70%; /* 画面幅の70%に設定 */
    margin: 0 auto; /* 中央に配置 */
}

.footer_links ul {
    width: 70%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    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: 1.2em;
    text-decoration: none;
}

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

.footer_inner {
    max-width: 1100px;
    width: 70%; /* 画面幅の70%に設定 */
    margin: 20px auto; /* 中央に配置 */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer_inner p {
    color: #fff;
    font-size: 0.7em;
    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: 28px; /* フォントサイズを大きく */
  margin: 0 0 15px 0;
  line-height: 1.6;
  text-align: center;
}

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

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