@charset "UTF-8";

/* M PLUS Rounded 1c（見出し・本文：丸ゴシック体） */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap');
/* M PLUS 1p（見出し：ゴシック体） */
/* @import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap'); */
/* Shippori Mincho（見出し：明朝体） */
/* @import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap'); */

/* アイコン */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,300,1,0&icon_names=arrow_circle_up,arrow_downward,arrow_forward_ios,arrow_shape_up,cancel,collapse_all,confirmation_number,crown,download,expand_all,fiber_manual_record,location_on,map,open_in_new,person,search,store,warning');



/**************************************************/
/* リセット */
/**************************************************/
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td,
small,
button,
time,
figure {
    border: 0;
    font: inherit;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

html {
    line-height: 1;
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
    height: auto;
    border: none;
    vertical-align: bottom;
}

a {
    text-decoration: underline;
    color: inherit;
    cursor: pointer;
}

em {
    font-style: normal;
}

ol,
ul {
    list-style: none;
    list-style-type: none;
}

li,
dd {}

header,
footer,
nav,
section,
article,
aside,
figure,
figcaption {
    display: block;
}

/**************************************************/
/* 変数（色・フォント） */
/**************************************************/

:root {
    --color-headline: #333333;
    --color-text: #333333;
    --color-textwhite: #ffffff;
    --color-notes: #444444;

    --color-bg: #ffffff;
    --color-bgsub: #f4f4f4;
    --color-bgnotes: #eeeeee;

    --color-emphasis: #c50018;
    --color-strong: #ffff00;
    --color-inactive: #cccccc;

    /* メインビジュアルなどから特に目を引く濃い色（赤や黄色の強調色を除く）を選び、リンク色としてカラーコードを適用する */
    --color-link: #d70d19;
    /* --color-linkに適用したカラーコードをジェネレーターにかけてRGB値に置き換える */
    /* https://robse.jp/tools/color/ */
    --color-link-rgb: 215, 13, 25;
    /* --color-linkに適用したカラーコードをジェネレーターにかけて生成されたfilter値を記載する */
    /* https://angel-rs.github.io/css-color-filter-generator/ */
    --color-link-filter: brightness(0) saturate(100%) invert(15%) sepia(96%) saturate(6845%) hue-rotate(353deg) brightness(87%) contrast(95%);

    --color-auorange: #eb5505;
    --color-auorange-rgb: 235, 85, 5;
    --color-auorange-filter: brightness(0) saturate(100%) invert(38%) sepia(96%) saturate(1116%) hue-rotate(354deg) brightness(90%) contrast(106%);
    --color-kddiblue: #0e0d6a;
    --color-kddiblue-rgb: 14, 13, 106;
    --color-kddiblue-filter: brightness(0) saturate(100%) invert(9%) sepia(33%) saturate(7491%) hue-rotate(224deg) brightness(94%) contrast(97%);

    --color-footerlink: #0066ff;

    /* 別のフォントを使用する場合は、CSS最初のインポートリンクのコメントアウトを外して、下記のフォント名を変更してください */
    /* au PAYのブランディングとして、丸ゴシック体の使用が推奨されています */
    --font-headline: "M PLUS Rounded 1c";
    /* --font-base: "M PLUS Rounded 1c"; */
    --font-base: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, "Hiragino Sans", Osaka, "MS PGothic", arial, helvetica, sans-serif;
}


/**************************************************/
/* アイコン文字コード */
/**************************************************/

/* 通常リンク           \e5e1 */
/* 外部リンク           \e89e */
/* 検索                 \e8b6 */
/* ダウンロード         \f090 */
/* クーポン             \e638 */
/* アンカーリンク       \e5db */
/* ページトップ         \eef6 */
/* アコーディオン開く   \e946 */
/* アコーディオン閉じる \e944 */
/* キャンセル／閉じる   \e5c9 */

/* リスト文頭記号   \e061 */
/* ワーニング   \e002 */

/* ランキング   \ecb3 */
/* マイステータス   \e7fd */


/**************************************************/
/* 基本クラス */
/**************************************************/

body {
    color: var(--color-text);
    font-family: var(--font-base);
    font-weight: 600;
    font-style: normal;
    font-size: 1rem;
    line-height: 1.75;
    box-sizing: border-box;
    background-image: url(../img/bg_pattern.png);
    background-repeat: repeat;
    background-size: 70px;
}


/* ---------- 汎用クラス：PC・スマホの表示・非表示処理 ---------- */
/* none_sp → PC画面では表示・スマホ画面では非表示 */
/* none_pc → PC画面では非表示・スマホ画面では表示 */

.none_sp {
    display: block !important;
}

.none_pc {
    display: none !important;
}

@media screen and (max-width: 767px) {
    .none_sp {
        display: none !important;
    }

    .none_pc {
        display: block !important;
    }
}


/* ---------- 汎用クラス：上マージン ---------- */
/* 極力、margin-bottomは設定しないように留意してください（重複指定の防止のため） */

/* 上マージン：消去 */
.mt000 {
    margin-top: 0 !important;
}

/* 上マージン：ピクセル設定 */
/* mt＋3桁の数字 */

.mt001 {
    margin-top: 0.0625rem !important;
}

.mt002 {
    margin-top: 0.125rem !important;
}

.mt004 {
    margin-top: 0.25rem !important;
}

.mt005 {
    margin-top: 0.3125rem !important;
}

.mt010 {
    margin-top: 0.625rem !important;
}

.mt015 {
    margin-top: 0.9375rem !important;
}

.mt020 {
    margin-top: 1.25rem !important;
}

.mt025 {
    margin-top: 1.5625rem !important;
}

.mt030 {
    margin-top: 1.875rem !important;
}

.mt040 {
    margin-top: 2.5rem !important;
}

.mt060 {
    margin-top: 3.75rem !important;
}

.mt100 {
    margin-top: 6.25rem !important;
}

/* 上マージン：字数設定 */
/* mt＋1桁の数字＋em */

.mt1em {
    margin-top: 1rem !important;
}

.mt2em {
    margin-top: 2rem !important;
}

.mt3em {
    margin-top: 3rem !important;
}

.mt4em {
    margin-top: 4rem !important;
}

.mt5em {
    margin-top: 5rem !important;
}

/* ---------- 汎用クラス：左右配置 ---------- */

.taC {
    text-align: center !important;
    margin-right: auto;
    margin-left: auto;
}

.taL {
    text-align: left !important;
    margin-right: auto;
}

.taR {
    text-align: right !important;
    margin-left: auto;
}


/* ---------- 汎用クラス：フォントサイズ変更 ---------- */

.fs075 {
    font-size: 0.75rem !important;
}

.fs125 {
    font-size: 1.25rem !important;
}

.fs150 {
    font-size: 1.50rem !important;
}

.fs200 {
    font-size: 2rem !important;
}

.fs250 {
    font-size: 2.5rem !important;
}

.fs300 {
    font-size: 3rem !important;
}

.fs400 {
    font-size: 4rem !important;
}


/* ---------- 汎用クラス：図版カラーリング ---------- */
/* #000000で作成したpng画像を指定した色（link色／auオレンジ／KDDIブルー）に変更できます */

img.img_colorfilter_link {
    filter: var(--color-link-filter);
}

img.img_colorfilter_auorange {
    filter: var(--color-auorange-filter);
}

img.img_colorfilter_kddiblue {
    filter: var(--color-kddiblue-filter);
}


/* ---------- 汎用クラス：日時設定による表示・非表示 ---------- */
/* 日時を設定して要素の表示・非表示を切り替えることができます */
/* startからendの期間内に表示されます。start・endのみの指定も可能です。 */
/* class="view_timer" date-start="YYYY-MM-DDT00:00" date-end="YYYY-MM-DDT23:59" */

.view_timer {
    display: none;
}



/**************************************************/
/* ヘッダー */
/**************************************************/

header {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background: var(--color-bg);
    box-shadow: 0.625rem 0 0.625rem -0.375rem rgba(0, 0, 0, 0.02), -0.625rem 0 0.625rem -0.375rem rgba(0, 0, 0, 0.02);
}

/* ---------- 重要インフォメーション ---------- */

#information {
    font-family: var(--font-headline);
    padding: 1rem;
    text-align: center;
    border-bottom: var(--color-bg) 0.125rem solid;
    background: var(--color-emphasis);
}

#information p {
    color: var(--color-textwhite);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}


/* ---------- au PAYヘッダーロゴ・協賛企業ロゴ ---------- */
/* ヘッダービジュアルから切り出して配置する */

h1 {}

h1 img {
    display: block;
}


/* ---------- メインビジュアル ---------- */

h2 {}

h2 img {
    display: block;
}

/* ---------- 早期終了（H1・H2） ---------- */

#mainvisual.end {
    display: block;
    position: relative;
    container-type: inline-size;
    background-color: #000000;
}

#mainvisual.end img {
    filter: alpha(opacity=40);
    -moz-opacity: 0.4;
    opacity: 0.4
}

#mainvisual.end::after {
    position: absolute;
    white-space: pre;

    /* メッセージは1行に7字以内で設定してください */
    content: "キャンペーンは\A終了しました";

    color: var(--color-textwhite);
    font-family: var(--font-headline);
    font-size: 11cqw;
    font-weight: 800;
    line-height: 1.1;
    transform: rotate(-5deg);
    text-align: center;

    /* メッセージが2行の場合 */
    top: calc(50% - 11cqw);
    /* メッセージが3行の場合 */
    /* top: calc(50% - 16.5cqw);*/
    /* メッセージが4行の場合 */
    /* top: calc(50% - 22cqw);*/

    left: calc((100% - 11cqw*7) / 2);
}


/**************************************************/
/* 全幅コンテンツ */
/**************************************************/

/* 全幅で配置したい要素はwrap直下に配置してください */

#wrap {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding-top: 1.25rem;
    background-color: var(--color-bg);
    box-shadow: 0.625rem 0 0.625rem -0.375rem rgba(0, 0, 0, 0.02), -0.625rem 0 0.625rem -0.375rem rgba(0, 0, 0, 0.02);
}


/**************************************************/
/* 通常コンテンツ */
/**************************************************/

/* 通常のコンテンツはsection・contents内に配置してください */

.contents {
    width: 100%;
    padding: 0 16px 2em;
}


/* ---------- 見出し（H3・H4・H5） ---------- */
/* 見出し（H3・H4・H5）の体裁を変更する場合は、それぞれのスタイルを適時変更してください */

h3 {
    font-family: var(--font-headline);
    color: var(--color-headline);
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    font-size: 1.75rem;
    line-height: 1.1;
    font-weight: 800;
    border-bottom: var(--color-link) solid 0.25rem;
    background-image: url(../img/bg_h3.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 2rem;
}

h4 {
    font-family: var(--font-headline);
    color: var(--color-headline);
    width: fit-content;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    font-size: 1.25rem;
    line-height: 1.1;
    font-weight: 800;
    border-bottom: var(--color-link) solid 0.125rem;
}

h5 {
    font-family: var(--font-headline);
    color: var(--color-headline);
    width: fit-content;
    margin-top: 1.5rem;
    padding-top: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 800;
    border-bottom: var(--color-text) solid 0.125rem;
}

/* 注意事項や規約内の見出し */

h5.attention {
    font-family: var(--font-headline);
    color: var(--color-headline);
    width: fit-content;
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 800;
    border: none;
}

h5.attention::before {
    font-family: "Material Symbols Rounded";
    color: var(--color-emphasis);
    font-size: 1.5rem;
    font-weight: 400;
    content: "\e002";
    vertical-align: -0.25rem;
}


/* ---------- テキスト強調・装飾 ---------- */

em {
    font-weight: 800;
    color: var(--color-emphasis);
}

strong {
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 1.25rem;
    text-decoration-color: rgb(from var(--color-strong) r g b / 0.5);
    text-underline-offset: -1rem;
    text-decoration-skip-ink: none;
}

.strike {
    text-decoration: line-through;
}


/* ---------- 注釈 ---------- */

/* 単一テキストの場合はpタグを使用 */
/* 複数テキストの場合はulタグを使用 */
/* table内テキストの場合はspanタグを使用して適用 */

.notes {
    margin-top: 0.5em;
}

p.notes,
.notes li,
span.notes {
    color: var(--color-notes);
    font-size: 0.875rem;
    line-height: 1.75;
    font-weight: 500;
    padding-left: 1em;
    text-indent: -1em;
}

span.notes {
    padding-left: 0 !important;
}

p.notes::before,
.notes li::before,
span.notes::before {
    content: "※";
}

p.notes.dot::before,
.notes li.dot::before,
span.notes.dot::before {
    content: "・" !important;
    vertical-align: -0.1rem;
}


/* ---------- サブコンテンツ ---------- */

div.sub {
    background-color: var(--color-bgsub);
    margin: 1rem 0.625rem;
    padding: 1rem;
    border-radius: 0.5rem;
}

div.sub>h3,
div.sub>h4,
div.sub>h5 {
    margin-top: 0 !important;
}

/* ---------- 区切り線 ---------- */

hr {
    border-color: var(--color-notes);
    border-width: 0.0625rem;
    border-style: dashed;
    margin-inline: auto;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* ---------- 画像に枠線 ---------- */

img.frame {
    border: var(--color-bgnotes) solid 0.0625rem;
}

/* ---------- リスト ---------- */

ul {
    margin-top: 0.5rem;
}

ul li {
    padding-left: 1em;
    text-indent: -1em;
}

ul li::before {
    content: "・";
}

ul li ul {
    margin-top: 0 !important;
}

ul li ul li::before {
    content: "- ";
}

@counter-style blackcirclenumber {
    system: numeric;
    symbols: '\24EA' '\2776' '\2777' '\2778' '\2779' '\277A' '\277B' '\277C' '\277D' '\277E' '\277F';
    suffix: "";
}

ol {
    list-style-type: blackcirclenumber;
    list-style-position: inside;
}

ol li {
    padding-left: 1rem;
    text-indent: -1rem;
}

ol li::before {
    content: "";
    margin-right: 0.1rem;
}

/* ---------- テーブル ---------- */

div.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

div.table-scroll table {
    white-space: nowrap;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: #cccccc solid 0.0625rem;
    border-radius: 0.5rem;
    text-align: left;
    background: var(--color-bg);
}

thead,
tbody {
    width: 100%;
}

th,
td {
    vertical-align: middle;
    padding: 0.75rem;
    border-right: #cccccc solid 0.0625rem;
    border-bottom: #cccccc solid 0.0625rem;
}

thead th {
    background: rgba(var(--color-auorange-rgb), 0.1);
}

tbody th {
    background: var(--color-bgsub);
}

tbody td {}

tr th:last-child,
tr td:last-child {
    border-right: none !important;
}

table tbody tr:last-child th,
table tbody tr:last-child td {
    border-bottom: none !important;
}

table tr:first-child th:first-child,
table tr:first-child td:first-child {
    border-radius: 0.5rem 0 0 0;
}

table thead+tbody tr:first-child th:first-child,
table thead+tbody tr:first-child td:first-child {
    border-radius: 0;
}

table tr:first-child th:last-child,
table tr:first-child td:last-child {
    border-radius: 0 0.5rem 0 0;
}

table thead+tbody tr:first-child th:last-child,
table thead+tbody tr:first-child td:last-child {
    border-radius: 0;
}

table tbody tr:last-child th:first-child,
table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 0.5rem;
}

table tbody tr:last-child th:last-child,
table tbody tr:last-child td:last-child {
    border-radius: 0 0 0.5rem 0;
}

/* ---------- flex処理 ---------- */

.flex {
    width: 100%;
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    text-align: center
}

.flex>* {
    text-align: center
}


/* ---------- アンカーリンク ---------- */

.btn_anchor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.btn_anchor li {
    width: fit-content;
    font-size: 0.875rem;
    margin-right: 0.875rem;
    padding: 0 !important;
    text-indent: 0 !important;
}

.btn_anchor li:last-child {
    margin-right: 0 !important;
}

.btn_anchor li::before {
    content: none;
}

.btn_anchor a,
.btn_anchor a:active,
.btn_anchor a:visited {
    position: relative;
    padding: 0.125rem 1.25rem 0.125rem 0.5rem;
    color: var(--color-link);
    font-weight: 600;
    text-decoration: none;
    background: var(--color-bgnotes);
    border: var(--color-bgnotes) solid 0.125rem;
    border-radius: 2rem;
}

.btn_anchor a:after {
    position: absolute;
    font-family: "Material Symbols Rounded";
    font-size: 1rem;
    content: "\e5db";
    top: -0.125rem;
    right: 0.125rem;
}

.btn_anchor a:hover {
    border: var(--color-link) solid 0.125rem;
}


/* ---------- リンクボタン ---------- */

.btn_link {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
}

.btn_link a,
.btn_link a:active,
.btn_link a:visited {
    display: block;
    position: relative;
    box-sizing: border-box;
    padding: 0.625rem;
    color: var(--color-textwhite);
    font-family: var(--font-headline);
    font-weight: 600;
    background: var(--color-link);
    border: var(--color-link) solid 0.25rem;
    text-decoration: none;
    border-radius: 0.5rem;
    line-height: 1.1;
    transition: 0.2s ease;
}

.btn_link a::before {
    position: absolute;
    font-family: "Material Symbols Rounded";
    font-size: 1.5rem;
    font-weight: 400;
    content: "";
    top: 0.3rem;
    left: 0.25rem;
}

.btn_link a::after {
    position: absolute;
    font-family: "Material Symbols Rounded";
    font-size: 1.5rem;
    font-weight: 400;
    content: "\e5e1";
    top: 0.3rem;
    right: 0.25rem;
}

.btn_link.search a::after {
    content: "\e8b6";
}

.btn_link.external a::after {
    content: "\e89e";
}

.btn_link.download a::after {
    content: "\f090";
}

.btn_link.getcoupon a::after {
    content: "\e638";
}

.btn_link.inactive a {
    background: var(--color-inactive);
    color: var(--color-textwhite);
    border: var(--color-inactive) solid 0.25rem;
    pointer-events: none;
}

.btn_link a:hover {
    background: var(--color-bg);
    color: var(--color-link);
    transition: 0.2s ease;
}

/* ---------- リンクボタン（ロイヤリティランキング） ---------- */

.btn_link.ranking a,
.btn_link.mystatus a,
.btn_link.ranking a:active,
.btn_link.mystatus a:active,
.btn_link.ranking a:visited,
.btn_link.mystatus a:visited {
    background: #d4af37;
    border: #d4af37 solid 0.25rem;
}

.btn_link.ranking a::before {
    content: "\ecb3";
}

.btn_link.mystatus a::before {
    content: "\e7fd";
}

.btn_link.ranking a:hover,
.btn_link.mystatus a:hover {
    color: #d4af37;
    background: var(--color-bg);
}


/* ---------- テキストリンク ---------- */
/* 文中のテキストリンクには必ずリンク先に合わせたクラス（アプリ内（internal）／外部サイト（external）／ページ内（anchor））を適用してください */

a.internal,
a.external,
a.anchor,
a.internal:active,
a.external:active,
a.anchor:active,
a.internal:visited,
a.external:visited,
a.anchor:visited {
    display: inline;
    color: var(--color-link);
    text-decoration: underline;
    transition: 0.2s ease;
    margin-right: 0.1rem;
}

a.internal:hover,
a.external:hover,
a.anchor:hover {
    color: var(--color-textwhite);
    background-color: var(--color-link);
    text-decoration: none;
    transition: 0.2s ease;
}

a.external::after {
    font-family: "Material Symbols Rounded";
    font-size: 0.75rem;
    content: "\e89e";
    vertical-align: 0.1rem;
}

a.anchor::after {
    font-family: "Material Symbols Rounded";
    font-size: 0.75rem;
    content: "\e5db";
    vertical-align: 0.1rem;
}



/**************************************************/
/* 通常コンテンツ：モジュール */
/**************************************************/


/* ---------- UI タブ ---------- */

.ui_tab input {
    display: none;
}

.ui_tab_label {
    display: flex;
}

.ui_tab_label label {
    flex: 1;
    padding: 0.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    text-align: center;
    font-family: var(--font-headline);
    color: var(--color-inactive);
    background: var(--color-bg);
    border-bottom: var(--color-bgnotes) solid 0.125rem;
    cursor: pointer;
    transition: 0.4s ease;
}

.ui_tab_label label:hover {
    color: var(--color-link);
    text-decoration: none;
    transition: 0.4s ease;
}

.ui_tab_label label:first-child {
    border-radius: 0.5rem 0 0 0;
}

.ui_tab_label label:last-child {
    border-radius: 0 0.5rem 0 0;
}

.ui_tab_panel .panel {
    display: none;
    padding: 1rem;
    background: var(--color-bg);
    border: var(--color-bgnotes) solid 0.125rem;
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
}

#tab1:checked~.ui_tab_panel #panel1,
#tab2:checked~.ui_tab_panel #panel2,
#tab3:checked~.ui_tab_panel #panel3 {
    display: block;
}

#tab1:checked~.ui_tab_label .tab1,
#tab2:checked~.ui_tab_label .tab2,
#tab3:checked~.ui_tab_label .tab3 {
    color: var(--color-text);
    background: var(--color-bg);
    border-top: var(--color-link) solid 0.25rem;
    border-left: var(--color-bgnotes) solid 0.125rem;
    border-right: var(--color-bgnotes) solid 0.125rem;
    border-bottom: var(--color-bg) solid 0.125rem;
    pointer-events: none;
}


/* ---------- UI アコーディオン ---------- */

.ui_accordion {
    width: 100%;
    padding: 0.5em 1em;
    border-radius: 0.5em;
    background-color: var(--color-bgnotes);
}

.ui_accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 800;
    cursor: pointer;
}

.ui_accordion div {
    margin-top: 1em;
    font-weight: 400;
}

.ui_accordion summary::-webkit-details-marker {
    display: none;
}

.ui_accordion summary::after {
    position: absolute;
    content: "すべて読む";
    font-size: 0.75rem;
    color: var(--color-link);
    padding: 0 0.125rem;
    border: var(--color-link) solid 0.125rem;
    border-radius: 0.25rem;
    top: 0.25rem;
    right: -0.25rem;
}

.ui_accordion[open] summary::after {
    content: "とじる";
}


/* ---------- クーポン利用方法／還元残高の確認方法 ---------- */

ol.cp_remainder,
ol.cp_usage {
    list-style-type: none;
    flex-wrap: nowrap;
    justify-content: left;
    overflow-x: scroll;
    display: flex;
    flex-wrap: nowrap;
    justify-content: left;
    overflow-x: scroll;
    margin: 1rem 0 1rem;
    background: var(--color-bgsub);
    border-radius: 0.5rem;
}

.remainder_steps,
.usage_steps {
    width: 320px;
    min-width: 320px;
    font-size: 0.875rem;
    padding: 1rem 0 1rem;
    text-align: center;
}

.remainder_steps::first-letter,
.usage_steps::first-letter {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.0;
    margin-left: 1rem;
}

.remainder_steps_img,
.usage_steps_img {
    margin: 0.5rem 0 0.5rem;
    width: 320px;
    height: 400px;
    position: relative;
}

.remainder_steps_screen,
.usage_steps_screen {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.remainder_steps_arrow,
.usage_steps_arrow {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    filter: var(--color-link-filter);
}


/* ---------- お問い合わせ窓口 ---------- */

.cp_inquiry {
    width: 100%;
    margin-top: 1rem;
    border: none;
}

.cp_inquiry th {
    /* 見出しの文字数＋1文字分、幅を設定する */
    width: 5rem;
    text-align: right;
    vertical-align: top;
    padding: 0;
    background: var(--color-bg);
    border-right: none;
    border-bottom: none;
}

.cp_inquiry th::after {
    content: "：";
}

.cp_inquiry td {
    width: auto;
    text-align: left;
    padding: 0;
    border-bottom: none;
}


/**************************************************/
/* 商標表記 */
/**************************************************/

#treadmark {
    margin-top: 1rem;
}

#treadmark ul {
    width: 100%;
    border: var(--color-bgnotes) solid 0.125rem;
    border-radius: 0.5rem;
    padding: 0.75rem;
}

#treadmark ul li {
    color: var(--color-notes);
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 500;
    margin-top: 0.25rem;
    padding-left: 1em;
    text-indent: -1em;
}

#treadmark ul li::before {
    font-family: "Material Symbols Rounded";
    content: "\e061";
    vertical-align: -0.1rem;
}



/**************************************************/
/* プロモーションエリア */
/**************************************************/

#promotion {
    width: 100%;
    margin-top: 3rem;
}

#promotion ul {
    border-top: var(--color-notes) dashed 0.0625rem;
    width: 100%;
    margin: 0 !important;
}

#promotion ul li {
    padding-left: 0 !important;
    text-indent: 0 !important;
    margin: 2rem auto 0;
    width: 80%;
    text-align: center;
}

#promotion ul li::before {
    content: "";
}

#promotion ul li img {
    width: 100%;
}




/**************************************************/
/* アプリ訴求 */
/**************************************************/

#app_dl {
    display: block;
    text-align: center;
    padding: 2rem 0 2rem;
    background: rgba(var(--color-auorange-rgb), 0.1);
}

#app_dl p {
    line-height: 1.2;
    color: var(--color-auorange);
}

#app_dl ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}

#app_dl ul li {
    margin-right: 1rem;
    padding: 0;
}

#app_dl ul li:last-child {
    margin-right: 0 !important;
}

#app_dl ul li:before {
    content: "" !important;
}

#app_dl ul li a {
    display: block;
}

#app_dl ul li a img {
    display: block;
    height: 3rem;
}


/**************************************************/
/* 対象店舗一覧 */
/**************************************************/

#intro h2 {
    display: block;
    width: fit-content;
    font-family: var(--font-headline);
    color: var(--color-text);
    margin: 0.5rem auto 0;
    padding-bottom: 0.5rem;
    font-size: 1.75rem;
    text-align: center;
    line-height: 1.1;
    font-weight: 800;
    border-bottom: var(--color-link) solid 0.25rem;
}

#intro h2 em {
    color: var(--color-link);
    font-size: 1.75rem;
}




/**************************************************/
/* フッター */
/**************************************************/

footer {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding-top: 0.75rem;
    /* 画面下部に固定してフロートコンテンツを配置する場合は、padding-bottomの値にコンテンツの高さを追加する calcによる指定推奨 */
    padding-bottom: 2rem;
    text-align: center;
    background: var(--color-bgnotes);
    border-top: var(--color-bg) solid 1rem;
    box-shadow: 0.625rem 0 0.625rem -0.375rem rgba(0, 0, 0, 0.02), -0.625rem 0 0.625rem -0.375rem rgba(0, 0, 0, 0.02);
    font-weight: 400;
    font-size: 0.75rem;
}

footer ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

footer ul li {
    margin-right: 0.75rem;
}

footer ul li:last-child {
    margin-right: 0 !important;
}

footer ul li::before {
    content: "" !important;
}

footer ul li a,
footer ul li a:visited,
footer ul li a:active {
    color: var(--color-footerlink);
}

footer ul li a:hover {
    color: var(--color-bg);
    background: var(--color-footerlink);
}

footer small {
    display: block;
    margin-top: 0.325rem;
    color: var(--color-notes);
}