@charset "UTF-8";
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
.contents a { font-family: unset; }
[role="tabpanel"] { display: block; opacity: 1; }

:root { --color-black: #111; --color-gray: #d9d9d9; --color-gray-2: #646464; --color-green: #06c755; --color-green-2: #187a41; --color-navy: #000048; --color-orange: #f77911; --color-red: #f03; --color-white: #fff; --color-yellow: #fffd6c; --ff-ls-b: "LINESeedJPStd Bold"; --ff-ls-eb: "LINESeedJPStd ExtraBold"; --ff-ls-r: "LINESeedJPStd Regular"; --ff-ls-t: "LINESeedJPStd Thin"; --hover-duration: .3s; --hover-opacity-ratio: .6; }

/* ---------------------------------------------
*  kv
--------------------------------------------- */
.c-kv { height: 554px; overflow: hidden; position: relative; width: 100%; }
@media (max-width: 1023px) { .c-kv { height: 315px; } }
.c-kv__line { align-items: center; background: var(--color-green); display: flex; height: 35px; justify-content: center; letter-spacing: .03em; z-index: 2; }
.c-kv__line--txt { font-family: var(--ff-ls-b); }
@media (max-width: 1023px) { .c-kv__line--txt { padding-top: .1em; } }
.c-kv__bg { bottom: 0; height: 554px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 100%; z-index: -1; }
@media (max-width: 1023px) { .c-kv__bg { height: 315px; } }
.c-kv__bg--img { height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: bottom; object-position: bottom; width: 100%; }
.c-kv__inner { align-items: center; display: flex; height: 554px; position: relative; width: 100%; }
@media (max-width: 1023px) { .c-kv__inner { height: 315px; } }
.c-kv__bg-2 { height: 485px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 1393px; z-index: 0; }
@media (max-width: 1023px) { .c-kv__bg-2 { height: 312px; width: 423px; } }

.c-kv__bg--img-2 { height: 100%; object-fit: contain; width: 100%; }
.c-kv__container { left: 0; margin: 0 auto; max-width: 1128px; position: absolute; right: 0; top: 75px; }
@media (max-width: 1023px) { .c-kv__container { top: 45px; } }
.c-kv__body { text-align: center; }
.c-kv__body--img { max-width: 1128px; width: 100%; }
@media (max-width: 1023px) { .c-kv__body--img { max-width: 374px; } }
.c-kv__line { align-items: center; background: #104020; display: flex; height: 50px; justify-content: center; left: 0; margin: 0 auto; position: absolute; right: 0; top: 0; width: 100%; }
@media (max-width: 1023px) { .c-kv__line { height: 30px; } }
.c-kv__line span { color: var(--color-white); font-family: var(--ff-ls-b); font-size: 2.5rem; }
@media (max-width: 1023px) { .c-kv__line span { font-size: 1.6rem; } }
/* ---------------------------------------------
*  キャンペーン参加方法
--------------------------------------------- */
.c-step-list { margin-top: 34px; }
.c-step-list__item { align-items: center; display: flex; gap: 20px; }
@media (max-width: 1023px) { .c-step-list__item { flex-direction: column; gap: 10px; } }
.c-step-list__item+.c-step-list__item { margin-top: 30px; }
.c-step-list__box { align-items: center; display: flex; gap: 20px; }
@media (max-width: 1023px) { .c-step-list__box { align-items: flex-start; gap: 10px; } }
.c-step-list__icon { max-width: 80px; width: 100%; }
@media (max-width: 1023px) { .c-step-list__icon { max-width: 46px; width: 100%; } }
.c-step-list__text { font-family: var(--ff-ls-b); font-size: 2.2rem; line-height: 1.6818181818; text-align: left; }
@media (max-width: 1023px) { .c-step-list__text { font-size: 1.5rem; } }
.c-step-list__note { color: var(--color-red); display: inline-block; font-family: var(--ff-ls-r); font-size: 1.3rem; margin-top: 12px; }
@media (max-width: 1023px) { .c-step-list__note { font-size: 1rem; margin-top: 4px; } }

.c-step__btn { align-items: center; background: var(--color-orange); border: 4px solid var(--color-white); border-radius: 40px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25); display: flex; justify-content: center; max-width: 360px; padding-block: 16px 14px; position: relative; transition: background-color .3s ease-out, transform .3s ease-out; width: 100%; }
@media (max-width: 1023px) { .c-step__btn { border: 2px solid var(--color-white); padding-block: 12px; } }

.c-step__btn:after { border-bottom: 3px solid var(--color-white); border-right: 3px solid var(--color-white); bottom: 0; content: ""; height: 7px; margin: auto 0; position: absolute; right: 30px; top: 0; transform: rotate(45deg); width: 7px; }
.c-step__btn span { color: var(--color-white); font-family: var(--ff-ls-eb); font-size: 2.6rem; }
@media (max-width: 1023px) { .c-step__btn span { font-size: 2rem; } }

.c-step__btn:hover { background: var(--color-white); border: 4px solid var(--color-orange); text-decoration: none; }
.c-step__btn:hover span { color: var(--color-orange); }
.c-step__btn:hover::after { border-bottom: 3px solid var(--color-orange); border-right: 3px solid var(--color-orange); bottom: 0; content: ""; height: 7px; margin: auto 0; position: absolute; right: 30px; top: 0; transform: rotate(45deg); width: 7px; }

.c-plan-selector { margin: 0 auto; margin-top: 30px; max-width: 1080px; width: 100%; }

/* ヘッダー（現在のプラン/キャンペーン条件プラン） */
.c-plan-selector__header { display: flex; gap: 24px; margin-bottom: 25px; /* 三角形の分、少し広めに */ }

.c-plan-selector__label--current { flex: 1; max-width: 344px; position: relative; }

.c-plan-selector__label { align-items: center; background: var(--color-gray); border-radius: 10px; display: flex; flex: 1; font-family: var(--ff-ls-b); font-size: 2rem; height: 60px; justify-content: center; }
@media (max-width: 1023px) { .c-plan-selector__label { border-radius: 8px; font-size: 1.2rem; height: 30px; } }
.c-plan-selector__label--target { background: var(--color-green-2); color: var(--color-white); flex: 2; font-family: var(--ff-ls-eb); font-size: 2.5rem; position: relative; }
@media (max-width: 1023px) { .c-plan-selector__label--target { font-size: 1.2rem; } }
/* カードエリア */
.c-plan-panels { display: flex; gap: 24px; }

.c-plan-card { background: #f0f3f5; border-radius: 12px; flex: 1; padding-bottom: 25px; text-align: center; transition: opacity .3s ease; /* タブ切り替え時のアニメーション */ }
@media screen and (max-width: 1023px) { .c-plan-card { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 0; border-top-right-radius: 0; } }
/* --- モバイル設定 (1023px以下) --- */
@media screen and (max-width: 1023px) { .c-plan-selector__header { gap: 8px; margin-bottom: 14px; }
.c-tab-list { align-items: flex-end; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; gap: 10px; height: 67px; justify-content: space-around; }
.c-tab-list__button { background: #c1c1c1; border: none; border-top-left-radius: 8px; border-top-right-radius: 8px; color: var(--color-white); cursor: pointer; flex: 1; font-family: var(--ff-ls-b); font-size: 1rem; height: 55px; padding: 10px 6px; position: relative; transition: background .3s; }
.c-tab-list__button[aria-selected="true"]:before { border-style: solid; border-width: 10px 10px 0 10px; bottom: -10px; content: ""; left: 50%; position: absolute; transform: translateX(-50%); z-index: 1; }
#tab-comm.c-tab-list__button[aria-selected="true"]:before { border-color: #646464 transparent transparent transparent; }
#tab-light.c-tab-list__button[aria-selected="true"]:before { border-color: var(--color-green) transparent transparent transparent; }
#tab-standard.c-tab-list__button[aria-selected="true"]:before { border-color: var(--color-navy) transparent transparent transparent; }
.c-tab-list__button[aria-selected="true"] { height: 67px; }
#tab-comm.c-tab-list__button[aria-selected="true"] { background: #646464; }
#tab-light.c-tab-list__button[aria-selected="true"] { background: var(--color-green); }
#tab-standard.c-tab-list__button[aria-selected="true"] { background: var(--color-navy); } }
@media screen and (max-width: 1023px) and (max-width: 1023px) { .c-plan-card[hidden] { display: none; opacity: 0; } }
/* --- PC設定 (1024px以上) --- */
@media screen and (min-width: 1024px) { .c-tab-list { display: none; /* PCではタブボタンを隠す */ }
/* PCではhidden属性があってもすべて表示する */
.c-plan-card[hidden] { display: block !important; opacity: 1 !important; } }
.c-plan-selector__label::after { border-style: solid; border-width: 10px 10px 0 10px; bottom: -10px; content: ""; left: 50%; position: absolute; transform: translateX(-50%); }
.c-plan-selector__label--current::after { border-color: #d9d9d9 transparent transparent transparent; }
.c-plan-selector__label--target::after { border-color: var(--color-green-2) transparent transparent transparent; left: 24.16%; }
.c-plan-selector__label--target::before { border-color: var(--color-green-2) transparent transparent transparent; border-style: solid; border-width: 10px 10px 0 10px; bottom: -10px; content: ""; content: ""; position: absolute; right: 24.16%; transform: translateX(50%); }
@media screen and (max-width: 1023px) { .c-plan-selector__label--target::before, .c-plan-selector__label--target::after, .c-plan-selector__label::after { border-width: 8px 8px 0 8px; bottom: -8px; } }
.c-plan-card__header { align-items: center; border-top-left-radius: 12px; border-top-right-radius: 12px; display: flex; flex-direction: column; height: 170px; justify-content: center; position: relative; }
@media screen and (max-width: 1023px) { .c-plan-card__header { display: none; } }
.c-plan-card__header-gray { background: #646464; }
.c-plan-card__header-green { background: var(--color-green); }
.c-plan-card__header-navy { background: var(--color-navy); }
.c-plan-card__header::before { border-style: solid; border-width: 20px 20px 0 20px; bottom: -20px; content: ""; left: 50%; position: absolute; transform: translateX(-50%); }
.c-plan-card__header-gray::before { border-color: #646464 transparent transparent transparent; }
.c-plan-card__header-green::before { border-color: var(--color-green) transparent transparent transparent; }
.c-plan-card__header-navy::before { border-color: var(--color-navy) transparent transparent transparent; }
.c-plan-card__name { color: var(--color-white); font-family: var(--ff-ls-eb); font-size: 2.4rem; line-height: calc(30 / 24); text-align: center; }
.c-plan-card__badge { align-items: center; background: #fffd6c; border-radius: 40px; color: #000; display: flex; font-family: var(--ff-ls-b); font-size: 1.4rem; height: 24px; justify-content: center; line-height: 1; margin-bottom: 14px; margin-inline: auto; width: 98px; }
@media screen and (max-width: 1023px) { .c-plan-card__badge { font-size: 1rem; height: 16px; margin-bottom: 4px; width: 67px; } }

.c-plan-card__lead { font-family: var(--ff-ls-b); font-size: 1.2rem; margin-top: 24px; text-align: center; }
@media screen and (min-width: 1024px) { .c-plan-card__lead { display: none; } }
.c-plan-card__caption { color: var(--color-white); display: inline-block; font-family: var(--ff-ls-b); font-size: 1.4rem; line-height: calc(22 / 14); margin-top: 10px; }
.c-plan-card__label { align-items: center; border-radius: 50px; color: var(--color-white); display: flex; font-family: var(--ff-ls-b); font-size: 1.4rem; height: 30px; justify-content: center; margin-inline: auto; margin-top: 40px; width: 135px; }
@media screen and (max-width: 1023px) { .c-plan-card__label { margin-top: 10px; width: 127px; } }
#panel-comm .c-plan-card__label { background: #646464; }
#panel-light .c-plan-card__label { background: var(--color-green); }
#panel-standard .c-plan-card__label { background: var(--color-navy); }
.c-plan-card__price { font-family: var(--ff-ls-eb); font-size: 4.2rem; line-height: calc(30 / 42); margin-top: 20px; text-align: center; }
@media screen and (max-width: 1023px) { .c-plan-card__price { font-size: 4rem; } }
#panel-comm .c-plan-card__price { color: #000; }
#panel-light .c-plan-card__price { color: var(--color-green); }
#panel-standard .c-plan-card__price { color: var(--color-navy); }
.c-plan-card__tax { font-size: 1.2rem; }
@media screen and (max-width: 1023px) { .c-plan-card__tax { font-size: 1rem; } }
.c-plan-card__tax-2 { font-family: var(--ff-ls-b); }
.c-plan-card__name .c-plan-card__sup { color: var(--color-white); }
.c-plan-card__sup { color: #000; font-family: var(--ff-ls-b); font-size: 1.2rem; }
@media screen and (max-width: 1023px) { .c-plan-card__sup { font-size: 1rem; } }
.c-plan-card__details { margin-inline: auto; margin-top: 30px; width: fit-content; }
.c-plan-card__desc { align-items: center; display: flex; gap: 20px; }
.c-plan-card__desc-title { font-family: var(--ff-ls-b); font-size: 1.2rem; }
.c-plan-card__desc-title-gray { color: #7e7e7e; }
.c-plan-card__desc-value { font-family: var(--ff-ls-eb); font-size: 1.8rem; }
#panel-comm .c-plan-card__desc-value { color: #000; }
#panel-light .c-plan-card__desc-value { color: var(--color-green); }
#panel-standard .c-plan-card__desc-value { color: var(--color-navy); }
.c-note-list { line-height: calc(24 / 12); margin-top: 30px; }
.c-note-list__item { font-family: var(--ff-ls-r); font-size: 1.2rem; text-align: left; }
.c-note-list__item span { margin-right: 4px; }
.c-note-list__item a { text-decoration: underline; }
.c-note-list__item a:hover { text-decoration: none; }
.c-catch-copy { font-family: var(--ff-ls-b); font-size: 3rem; margin-top: 30px; text-align: center; }
@media screen and (max-width: 1023px) { .c-catch-copy { font-size: 2.2rem; } }

.c-catch-copy__red { color: var(--color-red); font-family: var(--ff-ls-eb); }
/* ---------------------------------------------
*  プラン変更方法
--------------------------------------------- */
.c-guide { position: relative; }
.c-guide:after { background: #f2f4f8; content: ""; inset: 0; margin-left: 50%; position: absolute; transform: translateX(-50%); width: 100vw; z-index: -1; }
.c-guide-list { display: flex; gap: 24px; }
@media (max-width: 1023px) { .c-guide-list { flex-direction: column; gap: 20px; } }
.c-guide-list { justify-content: center; margin-top: 30px; }
.c-guide-list__item { background: var(--color-white); border: 1px solid #c8c8c8; border-radius: 16px; flex: 1; padding: 30px 22px; }
@media (max-width: 1023px) { .c-guide-list__item { padding: 12px 15px 30px; } }

.c-guide-list__num { color: var(--color-green); font-family: var(--ff-ls-b); font-size: 1.4rem; }
.c-guide-list__text { font-family: var(--ff-ls-b); font-size: 1.4rem; }
.c-guide-list__link-note { display: inline-block; font-family: var(--ff-ls-r); font-size: 1.1rem; line-height: 1.5; margin-top: 10px; }
@media (max-width: 1023px) { .c-guide-list__link-note { font-size: 1rem; } }

.c-guide-list__link-note a { text-decoration: underline; }
.c-guide-list__link-note a:hover { text-decoration: none; }
.c-guide-list__content { border-bottom: 1px solid #c8c8c8; margin-inline: -22px; min-height: 112px; padding-bottom: 30px; padding-inline: 20px; position: relative; }
@media (max-width: 1023px) { .c-guide-list__content { margin-inline: -15px; min-height: unset; padding-bottom: 12px; padding-inline: 20px; } }
.c-guide-list__img { display: block; margin-inline: auto; margin-top: 30px; max-width: 242px; width: 100%; }
@media (max-width: 1023px) { .c-guide-list__img { max-width: 200px; } }
.c-guide__txt-link { font-family: var(--ff-ls-r); font-size: 1.4rem; margin-top: 30px; text-align: center; }
@media (max-width: 1023px) { .c-guide__txt-link { font-size: 1rem; } }
.c-guide__txt-link a { text-decoration: underline; }
.c-guide__txt-link a:hover { text-decoration: none; }
/* ---------------------------------------------
*  キャンペーン概要・適用条件
--------------------------------------------- */
.c-detail-list { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 1023px) { .c-detail-list { gap: 0; } }
.c-detail-list { margin-top: 30px; }
.c-detail-list a { text-decoration: underline; }
.c-detail-list a:hover { text-decoration: none; }
.c-detail-list__row { display: flex; }
@media (max-width: 1023px) { .c-detail-list__row { flex-direction: column; } }
.c-detail-list__term { align-items: center; background: var(--color-green); color: var(--color-white); display: flex; font-family: var(--ff-ls-b); font-size: 1.6rem; justify-content: flex-start; padding-left: 30px; width: 23.1481481481%; }
@media (max-width: 1023px) { .c-detail-list__term { font-size: 1.4rem; padding-block: 8px; padding-left: 20px; width: 100%; } }

.c-detail-list__desc { background: #f2f4f8; padding: 24px 30px; width: 76.8518518519%; }
@media (max-width: 1023px) { .c-detail-list__desc { padding: 20px; width: 100%; } }

.c-detail-list__main-text { font-family: var(--ff-ls-r); font-size: 1.6rem; }
@media (max-width: 1023px) { .c-detail-list__main-text { font-size: 1.4rem; } }
.c-detail-list__note { display: block; font-family: var(--ff-ls-r); font-size: 1.2rem; }
@media (max-width: 1023px) { .c-detail-list__note { font-size: 1rem; } }
.c-detail-list__note { padding-left: 1em; text-indent: -1em; }
.c-detail-list__note::before { content: "※"; }
.c-detail-list__bullet-list { font-family: var(--ff-ls-r); padding-left: 1em; text-indent: -1em; }
.c-detail-list__bullet-list li::before { content: "・"; }
.c-detail-list__bullet-list li:not(:first-of-type) { margin-top: 8px; }
.c-detail-list__num-list { padding-left: 1em; text-indent: -1em; }
.c-detail-list__num-list li { font-family: var(--ff-ls-r); }
@media (max-width: 1023px) { .c-detail-list__num-list li { font-size: 1.4rem; } }
.c-detail-list__num-list li:not(:first-of-type) { margin-top: 8px; }
/* ---------------------------------------------
*  汎用
--------------------------------------------- */
.contents { padding-inline: 20px; }
.contents__inner { margin-inline: auto; max-width: 1080px; padding-block: 0; }

.l-h2title { color: var(--color-green); font-family: var(--ff-ls-eb); font-size: 3.6rem; }
@media (max-width: 1023px) { .l-h2title { font-size: 2.6rem; } }
.l-h2title { text-align: center; }
.l-h2title__sub { color: #000; font-family: var(--ff-ls-b); }
.l-contents { padding-block: 60px; }
@media (max-width: 1023px) { .l-contents { padding-block: 30px; } }