@charset "utf-8";

/* =============================================================================
	common
============================================================================= */
:root {
	--sup-base-color: #005243;
	--sup-button-hover-color: #d2ecef;
}
/* parts（color）---------------------------------------------------- */
.u-c-sup { color: var(--sup-base-color); }
.red { color:#AA0000; }

/* re-setting (common_include.css) ---------------------------------------------------- */
.custom-footer { height: auto;}

/* re-setting (sup-gig5-common.css) ---------------------------------------------------- */
.icon-anchor.in-iconkome { padding-left: 37px; }

/* parts（style）---------------------------------------------------- */
.alert-sizeover { border: 1px solid var(--sup-base-color); border-radius: 4px; padding: 1em; }
.errMSG { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; border-radius: 4px; padding: 16px; }
.errMSG > p+p { margin-top: 1.0rem!important; }

/* ステップバー（ドットタイプ） -------------------- { */
.diff-bg-progressbar { background: #f2f2f2; }
.diff-bg-progressbar > .section-inner { padding: 20px 20px!important;}
.progressbar { position: relative; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
.progressbar li { position: relative; text-align: center; text-transform: uppercase; width: 20%; color: #545454; font-size: 1.4rem;}
.progressbar li::before { position: relative; z-index: 2; display: block; width: 21px; height: 22px; margin: 7px auto 20px auto; content: ''; text-align: center; border-radius: 50%; background-color: #808080; }
.progressbar li::after { position: absolute; z-index: 1; top: 16px; left: -50%; width: 100%; height: 4px; content: ''; background-color: #e3e3e3; }
.progressbar li:first-child::after { content: none; }
.progressbar li.active { color: #000000; font-weight: 700;}
.progressbar li.complete { color: var(--sup-base-color); }
.progressbar li.active::before, .progressbar li.complete::before { background-color: var(--sup-base-color); }
.progressbar li.active::after, .progressbar li.complete::after { background-color: var(--sup-base-color); }
.progressbar.input-card li { width: 33.333%; }
	@media only screen and (max-width: 600px) {
		.progressbar li { font-size: .9rem; }
		.progressbar li::before { width: 12px; height: 12px; margin: 5px auto 10px auto; }
		.progressbar li::after { top: 10px; height: 2px; }
	}
/* -------------------- } ステップバー（ドットタイプ） */
/* 入力制御 -------------------- { */
/*IMEオン （日本語入力モード）*/
.imeon { ime-mode: active; }
/*IMEオフ （英数字入力モード）*/
.imeoff { ime-mode: inactive; ime-mode: disabled; }
/* -------------------- } 入力制御 */

/* エラー -------------------- { */
.recycle_err { font-size: 4.0rem; font-weight: 700; text-align: center; }
.recycle_err_type {display: inline-block;}
.recycle_err_type .icon-exclamation { padding-left: 5.0rem; position:relative; top:1rem; left: -5rem; }
.recycle_err_type .icon-exclamation::before,
.recycle_err_type .icon-exclamation::after{ content:""; /*display:block;*/ position:absolute; }
.recycle_err_type .icon-exclamation::before{ font: var(--fa-font-solid); content: "\f06a"; color: #f60000; }
.ErrorInfoBlock { margin-top: 34px; text-align: center; }
.ErrorInfoBlock p:not(.icon-kome) { font-size: 2.0rem; }
.ErrorInfoBlock p + p { margin-top: 16px!important; }
.lay2col { display: grid; grid-template-columns:  repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: stretch; margin-top: 32px; margin-bottom: 32px; text-align: left; }
.lay2col > .item { display: flex; align-items: stretch; flex: 1; }
.lay2col > .item p { font-size: 1.6rem; }
.lay2col > .item .SampleInput { display: flex; gap:16px; }
.lay2col > .item .SampleInput > dl { margin: 16px 0; border: 1px solid #cccccc; padding: 8px; width: 100%; background: #ffffff; font-size: 1.4rem; }
.lay2col > .item .SampleInput > dl dt { font-weight: 700; color: var(--sup-base-color); }
.lay2col > .item .SampleInput > dl dd { margin-left: 1em; }
.attentiondonemsg { font-size: 3.2rem!important; font-weight: 700; color: #AA0000; }
@media only screen and (max-width: 600px) {
	.ErrorInfoBlock2 { margin-top: 34px; text-align: left; }
}
/* -------------------- } エラー*/

/* =============================================================================
	規約同意確認（ready）
============================================================================= */
#regulations-scroll-box { height: 300px; padding: 0.5em; border: 1px solid #cccccc; border-radius: 3px;
 overflow-y: scroll; scrollbar-color: #005243 #d2ecef; border: 2px solid #005243!important; }
#regulations-consent { margin: 1em 0; padding: 2em 0.5em; text-align: center; background: #f1f1f1; }
#regulations-consent input[type^="checkbox"] { position: relative; top: -2px; margin-right: 0.8em; height: 18px; width: 18px; }
#regulations-advice { font-size: 1.4rem; color: #a30b1a; margin-bottom: 1.5em; }
#btn-agree { margin-top: 2em; }
#btn-agree input[type^="submit"] { font-size: 1.8rem; padding: 0.5em 2em; border-radius: 3px; }
#btn-agree input[type^="submit"]:disabled { color: #cccccc; background: transparent; border: 1px solid #cccccc; }
/*#regulations-consent span { font-weight: 700; cursor: pointer; }*/
#btn-agree input[type^="submit"] { color: #ffffff; background: #005243; border: 1px solid transparent; cursor: pointer; }
#btn-agree input[type^="submit"]:disabled { color: #cccccc; background: transparent; border: 1px solid #cccccc; cursor: default;}


/* =============================================================================
	機種選択（product）
============================================================================= */
/* 機種の選択 (select_productName) -------------------- { */
.select_productName { width: 100%; display: grid; grid-template-rows: 1fr; grid-template-columns: 2fr 1fr; gap: 16px; }
.select_productName > .item { padding: 0 16px 16px; }
.select_productName > .item.product { border: 2px solid var(--sup-base-color);}
.select_productName > .item.userproductlist { background: #bed2c366; }
	@media only screen and (max-width: 768px) {
		.select_productName { grid-template-columns: 1fr; grid-template-rows: auto; }
	}
/* -------------------- } 機種の選択 (select_productName) */
/* 型名入力 (input-productName) -------------------- { */
.input-productName { position: relative; margin-bottom: 0.5em; }
.input-productName > input[type="text"] { padding: 16px 10px 12px 10px; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 4px; background-color: #ffffff; outline: none; }
.input-productName > input[type="text"]:focus { background-color: #ffffff!important; }/* フォーカス時も変えない */
.input-productName > input[type="text"]:valid { background-color: #ffffff!important; }/* 入力済みでも変えない（requiredなどで変わることがある） */
.input-productName > label { position: absolute; top: 12px; left: 10px; color: #999999; pointer-events: none; transition: 0.2s ease all; }
.input-productName > input:focus + label,
.input-productName > input:not(:placeholder-shown) + label { top: -10px; left: 8px; font-size: 1.3rem; color: var(--sup-base-color); background-color: #ffffff; padding: 0 4px; }
.input-productName > input[type="button"] { padding: 10px 20px; font-size: 1.8rem; background-color: #005243; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; }
.input-productName > input[type="button"]:hover { background-color: #00785c; }
	@media (max-width: 600px) {
		.input-productName > input[type="text"] { width: 100%; }
		.input-productName > input[type="button"] { width: 100%; margin-top: 8px; padding: 12px; }
	}
/* -------------------- } 型名入力 (input-productName) */
/* 選択型名・品名表示 (selected-productName)  -------------------- { */
.selected-productName table > tbody > tr th { font-weight: 700; vertical-align: middle; width: 130px; }
/* -------------------- } 選択型名・品名表示 (selected-productName) */
/* 組み合わせ選択 (select-combination)  -------------------- { */
.select-combination { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: stretch; margin-bottom: 32px; }
.select-combination > .item { display: flex; align-items: stretch; border: 2px solid var(--sup-base-color); }
.select-combination > .item > label { display: flex; align-items: stretch; flex-direction: column; justify-content: space-between; width: 100%; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.select-combination > .item > label img { max-width: 50%; height: auto; }
.select-combination > .item > label input[type="radio"] { display: none; }
.select-combination > .item > label:has(input[type="radio"]:checked) { background-color: var(--sup-button-hover-color); }
.select-combination > .item > label .combi-index { color: var(--sup-base-color); font-weight: 700; font-size: 1.8rem; padding: 0 16px 16px; }
	@media only screen and (max-width: 480px) {
		.select-combination { grid-template-columns: 1fr; grid-template-rows: auto; }
		.select-combination > .item > label .combi-index { font-size: 1.6rem; }
	}
/* -------------------- } 組み合わせ選択 (select-combination) */
/* パソコンの形状から機種を選択 (select-shape)  -------------------- { */
.icon-head-exclamation { position: relative; margin-left: 3.8rem; }
.icon-head-exclamation:before {position: absolute; left:-3.8rem; top: .2rem; font-family: "Font Awesome 5 Free"; content: "\f06a"; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; font-size: 2.6rem; font-weight: 900; text-rendering: auto; line-height: 1;}
.select-shape-logo_PCrecycle { border: 2px solid var(--sup-base-color); padding: 16px; }
.select-shape-logo_PCrecycle .item span { margin: 0 8px; }
.select-shape-logo_PCrecycle .item span img { max-width: 88px; height: auto; vertical-align: top; border: 1px solid #cccccc; padding: 8px; }
.select-shape { display: grid; grid-template-columns:  repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: stretch; }
.select-shape > li { display: flex; align-items: stretch; border: 2px solid var(--sup-base-color); }
.select-shape > li > a { display: flex; align-items: stretch; flex-direction: column; justify-content: space-between; width: 100%; text-align: center; text-decoration: none; transition: background-color 0.3s, color 0.3s; color: var(--sup-base-color); font-weight: 700; font-size: 1.8rem; padding: 16px; }
.select-shape > li > a:hover { background-color: var(--sup-button-hover-color); }
.select-shape > li > a img { max-width: 50%; height: auto; }
	@media only screen and (max-width: 768px) {
		.select-shape-logo_PCrecycle>.item ul li span{ display: block; margin: 8px 0; }
	}
	@media only screen and (max-width: 480px) {
	.select-shape > li > a { font-size: 1.6rem; }
	}
/* -------------------- } パソコンの形状から機種を選択 (select-shape) */
/* PCリサイクルマーク確認 (mark-check)  -------------------- { */
.mark-check { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: stretch; margin-top: 32px; margin-bottom: 32px; }
.mark-check > .item { display: flex; align-items: stretch; border: 2px solid var(--sup-base-color); padding: 16px; }
.mark-check > .item:only-child { min-width: 632px; }
.mark-check > .item > .item-inner { display: flex; align-items: stretch; flex-direction: column; justify-content: space-between; width: 100%; text-align: center; }
.mark-check > .item > .item-inner > .img-mark { display: flex; justify-content: center; align-items: center; gap:16px; background: var(--sup-button-hover-color); padding: 8px; }
.mark-check > .item > .item-inner > .img-mark > div { display: inline-block; vertical-align: top; }
.mark-check > .item > .item-inner > .img-mark > div h4 { font-size: 2.0rem; }
.mark-check > .item > .item-inner > .img-mark > div span { font-size: 1.4rem; display: block; margin-top: 6px; }
.mark-check > .item > .item-inner > .img-mark > div .img-item2 { vertical-align: middle; border: 1px solid #cccccc; padding: 6px 6px 0; max-width: 60px; height: auto; margin-right: 8px; background: #ffffff; }
.mark-check > .item > .item-inner > .select-radioBtn { margin-top: 16px; display: flex; justify-content: center; column-gap: 48px; font-size: 1.8rem; font-weight: 700; color: #333333; }
.mark-check > .item > .item-inner > .select-radioBtn label { display: flex; align-items: center; cursor: pointer;  margin: 10px 0;}
.mark-check > .item > .item-inner > .select-radioBtn label input[type="radio"] { display: none; }
.mark-check > .item > .item-inner > .select-radioBtn label span { height: 31px; width: 31px; border: 3px solid var(--sup-base-color); border-radius: 50%; display: inline-block; position: relative; margin-right: 12px; }
.mark-check > .item > .item-inner label input[type="radio"]:checked + span::after { content: ""; position: absolute; top: 5px; left: 5px; height: 15px; width: 15px; background-color: var(--sup-base-color); border-radius: 50%; }
	@media only screen and (max-width: 768px) {
		.mark-check { grid-template-columns: 1fr; }
		.mark-check > .item:only-child { min-width: 100%; }
	}
/* -------------------- } PCリサイクルマーク確認 (mark-check) */
/* PCリサイクルマーク番号入力 (mark-num) -------------------- { */
.mark-num { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: stretch; margin-top: 32px; margin-bottom: 32px; }
.mark-num > .item { display: flex; align-items: stretch; border: 2px solid var(--sup-base-color); padding: 16px; }
.mark-num > .item:only-child { min-width: 632px; }
.mark-num > .item > .item-inner { display: flex; align-items: stretch; flex-direction: column; justify-content: space-between; width: 100%; text-align: center; }
.mark-num > .item > .item-inner > .img-mark { display: flex; justify-content: center; align-items: center; gap:16px; background: var(--sup-button-hover-color); padding: 8px; }
.mark-num > .item > .item-inner > .img-mark > div { display: inline-block; vertical-align: top; }
.mark-num > .item > .item-inner > .img-mark > div h4 { font-size: 2.0rem; }
.mark-num > .item > .item-inner > .img-mark > div span { font-size: 1.4rem; display: block; margin-top: 6px; }
.mark-num > .item > .item-inner > .img-mark > div .img-item2 { vertical-align: middle; border: 1px solid #cccccc; padding: 6px; max-width: 60px; height: auto; margin-right: 8px; background: #ffffff; }
.input-Num { display: inline-block; position: relative; margin-bottom: 0.5em; }
.input-Num > input[type="text"] { padding: 16px 16px 12px 16px; font-size: 1.8rem; border: 1px solid #ccc; border-radius: 4px; background-color: #ffffff; outline: none; }
.input-Num > input[type="text"]:focus { background-color: #ffffff!important; }/* フォーカス時も変えない */
.input-Num > input[type="text"]:valid { background-color: #ffffff!important; }/* 入力済みでも変えない（requiredなどで変わることがある） */
.input-Num > label { position: absolute; top: 12px; left: 10px; color: #999999; pointer-events: none; transition: 0.2s ease all; }
.input-Num > input:focus + label,
.input-Num > input:not(:placeholder-shown) + label { top: -10px; left: 8px; font-size: 1.3rem; color: #005243; background-color: #ffffff; padding: 0 4px; }
	@media only screen and (max-width: 768px) {
		.mark-num { grid-template-columns: 1fr; }
		.mark-num > .item:only-child { min-width: 100%; }
	}
/* -------------------- } PCリサイクルマーク番号入力 (mark-num) */
/* 申し込み方法の選択 (select_searchProduct) -------------------- { */
.select_searchProduct { width: 100%; display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.select_searchProduct > .item { padding: 0 16px 16px; border: 2px solid #005243; }
.select_searchProduct > .item.product { grid-area: 1 / 1 / 2 / 2; }
.select_searchProduct > .item.userproductlist { grid-area: 1 / 2 / 2 / 3; }
	@media only screen and (max-width: 768px) {
		.select_searchProduct { grid-template-columns: 1fr; }
		.select_searchProduct > .item.product,
		.select_searchProduct > .item.userproductlist { grid-area: auto; }
	}
/* -------------------- } 申し込み方法の選択 (select_searchProduct) */


/* =============================================================================
	お申し込み機種の確認（confirm_p）・ユーザー登録機種一覧から選択（auth）
============================================================================= */
/* お申し込み機種 (.tbl-confirm-p) -------------------- { */
.tbl-confirm-p { margin-top: 3rem; width: 100%; table-layout: auto;}
.tbl-confirm-p.tbl-a thead tr:first-child>*:first-child { width: inherit; }
.tbl-confirm-p thead th { font-size: 1.8rem; vertical-align: middle;}
.tbl-confirm-p thead th.t-model span { display: block; font-size: 1.5rem; font-weight: normal;}
.tbl-confirm-p thead th span { font-size: 1.5rem; }
.tbl-confirm-p tbody td:not(.model):not(.price) { text-align: center; vertical-align: middle; }
.tbl-confirm-p tbody .model { vertical-align: middle; }
.tbl-confirm-p tbody .price { text-align: right; vertical-align: middle; }
.tbl-confirm-p tbody .model { font-weight: 700; }
.tbl-confirm-p tbody .model > div:not(.model_product) { font-weight: normal; font-size: 1.4rem; }
.tbl-confirm-p tbody .product-img > img { width: 50px; height: auto; }
.tbl-confirm-p tbody .product-type { font-size: 1.4rem; }
.tbl-confirm-p tbody .cancel input[type="button"] { background-color: #eeeeee; color: #333333; border: 1px solid #bbb; border-radius: 4px; padding: 6px 12px; font-size: 15px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease;}
.tbl-confirm-p tbody .cancel input[type="button"]:hover { background-color: #f2e8b6; color: #222222; }
.tbl-confirm-p tbody .cancel input[type="button"]:active { background-color: #d4b02a; color: #ffffff;}
.tbl-confirm-p tfoot tr { font-size: 1.8rem; text-align: right; vertical-align: middle; }
.tbl-confirm-p tfoot th { background: #f2e8b6; }
.tbl-confirm-p tfoot th span { font-size: 1.5rem; }
.none_product { margin: 3rem 0 0; font-size: 2.0rem; color: var(--sup-base-color); }
	@media only screen and (max-width: 768px) {
		.tbl-confirm-p, .tbl-confirm-p thead, .tbl-confirm-p tbody, .tbl-confirm-p tfoot, .tbl-confirm-p th, .tbl-confirm-p td, .tbl-confirm-p tr { display: block; }
		.tbl-confirm-p tr { border: 1px solid #b1b1ac; }
		.tbl-confirm-p.diff-sp-col1 tbody tr:last-child td:last-child { border-bottom: none; }
		.tbl-confirm-p th, .tbl-confirm-p td { border: none; }
		.tbl-confirm-p thead { display: none; }
		.tbl-confirm-p tbody tr:not(:first-child) { margin-top: 1.6rem; }
		.tbl-confirm-p tbody .model { background: #bed2c3; }
		.tbl-confirm-p tbody .price { text-align: center; }
		.tbl-confirm-p tfoot { margin-top: 1.6rem; }
		.tbl-confirm-p tbody td::before { content: attr(data-label); font-size: 1.5rem; background: #8a9a5b; color: #ffffff; display: block; margin-bottom: 0.8rem; }
		.tbl-confirm-p tfoot tr { text-align: center; }
		.tbl-confirm-p tbody .custom-row { display: flex!important; flex-wrap: wrap; flex-direction: row-reverse;}
		.tbl-confirm-p tbody .custom-row .pair.cancel { flex: 1; box-sizing: border-box; text-align: right; background: #bed2c3;}
		.tbl-confirm-p tbody .custom-row .pair.model { flex: 2; box-sizing: border-box; }
		.tbl-confirm-p tbody .custom-row td:not(.pair) { flex: 1 1 100%; /* 縦並びで全幅 */ box-sizing: border-box; }
	}
/* -------------------- } お申し込み機種 (.tbl-confirm-p) */


/* =============================================================================
	お客様情報入力（user）
============================================================================= */
/* お客様情報 (.tbl-user-info) -------------------- { */
.tbl-user-info { margin-top: 3rem; width: 100%; table-layout: auto;}
.tbl-user-info tbody th { font-weight: 700; width: 300px; }
.tbl-user-info tbody th span.necessary { display: inline-block; padding:0 6px; background:#AA0000; color:#FFFFFF; font-size:1.4rem; font-weight: 400; margin-left:5px;border-radius: 3px;}
.tbl-user-info tbody input[type="text"], .tbl-user-info tbody input[type="button"], .tbl-user-info tbody input[type="password"], .tbl-user-info tbody select { height: 30px; }
.tbl-user-info tbody small { display: inline-block; font-size: 1.5rem; }
.tbl-user-info tbody .form-errMsg { margin-top: .8rem; background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; border-radius: 4px; padding: 8px; display: none; }
.tbl-user-info tr.post div.postinputbtn input.autoZipcode{ background-color: #f4a582; color: #000000; border: 1px solid #bbb; border-radius: 4px; font-size: 15px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease;}
.tbl-user-info tr.post div.postinputbtn input.autoZipcode:hover { background-color: #e07b5c; }
.tbl-user-info tr.post div.postinputbtn input.autoZipcode + small { margin-left: .8rem; }
.tbl-user-info tbody .example { display: inline-block; background: #f9f2ec;  border: 1px solid #d08c60; color: #333333; padding: 3px 6px; border-radius: 4px; font-size: 1.4rem; /*font-family: "Yu Gothic", sans-serif;*/ }
.tbl-user-info tbody .memo2 { position: relative; padding: 16px ; background: #f2f2f2; border-radius: 4px; }

/* foam内flexbox */
.tbl-user-info tbody .flexFixed { display: flex; align-items: center; }/*左揃え・レスポンシブ改行なし*/
.tbl-user-info tbody .flexBlock { display: flex; align-items: center; flex-wrap: wrap; }/*左揃え・レスポンシブ改行あり*/
.tbl-user-info tbody .flexBlock div:first-child { margin-left: 0;}
.tbl-user-info tbody .flexBlock div { margin-bottom: .8rem;}
/*.tbl-user-info tbody .flexBlock-sb { display: flex; justify-content: space-between;}*//*両端配置・レスポンシブ改行あり*/
/*.tbl-user-info tbody .flexBlock-sb .flexItem.innerflex{ display: flex;}
.tbl-user-info tbody .flexInput {flex:1;}*/
/*@media only screen and (max-width: 1180px) {
	.msgattention.flexBlock-sb { display: block; }
}*/
	@media only screen and (max-width: 768px) {
		.tbl-user-info tbody .flexBlock, .tbl-user-info tbody .flexBlock-sb { display: block; }
	}
	@media only screen and (max-width: 768px) {
		input#address2, input#address3, input#email1 { width: 100%; }
		input#email2_1, input#email2_2 { width: 48%; }
		input#email2_2 { margin-top: .8rem; }
		.tbl-user-info tbody .example { margin-top: .8rem; }
	}
	@media only screen and (max-width: 480px) {
		input#email2_1, input#email2_2 { width: 90%; }
	}
/* 回収場所 */
.pickupchoice { display:flex; align-items: center; margin: 1.6rem 0!important; padding: 1.6rem; border: 2px solid #bbb; cursor: pointer; font-weight: 700; font-size: 1.8rem; color: var(--sup-base-color); }
.pickupchoice input[type="radio"] { display: none; }
.pickupchoice span { height: 29px; width: 29px; border: 2px solid var(--sup-base-color); border-radius: 50%; display: inline-block; position: relative; margin-right: 12px; }
.pickupchoice input[type="radio"]:checked + span::after { content: ""; position: absolute; top: 5px; left: 5px; height: 15px; width: 15px; background-color: var(--sup-base-color); border-radius: 50%; }
.pickupchoice:hover { border-color: var(--sup-base-color); background-color: var(--sup-button-hover-color); }
/* -------------------- } お客様情報 (.tbl-user-info) */
/* お支払い方法の選択 (.payway) -------------------- { */
.payway { margin-top: 3rem; }
.payway .option { display: block; border: 1px solid #cccccc; border-radius: 4px; margin: 16px 0; padding: 16px; cursor: pointer; }
.payway .option input[type="radio"] { display: none; }
.payway .option .label-name {display: flex; align-items: center; font-weight: 700; font-size: 1.8rem; color: var(--sup-base-color); }
.payway .option .label-name span { height: 29px; width: 29px; border: 2px solid var(--sup-base-color); border-radius: 50%; display: inline-block; position: relative; margin-right: 12px; }
.payway .option input[type="radio"]:checked ~ .option-content .label-name span::after { content: ""; position: absolute; top: 5px; left: 5px; height: 15px; width: 15px; background-color: var(--sup-base-color); border-radius: 50%; }
.payway .option:hover { border-color: var(--sup-base-color); background-color: var(--sup-button-hover-color); }
.payway .description { margin: 18px 0 0  30px; }
/* -------------------- } お支払い方法の選択 (.payway) */


/* =============================================================================
	お申し込み内容の確認（confirm_u）
============================================================================= */
/* インシデント情報 (.table-incident) -------------------- { */
.tbl-incident { margin-top: 3rem; width: 100%; table-layout: auto;}
.tbl-incident tbody th { font-weight: 700; width: 300px; }
/* -------------------- } インシデント情報 (.table-incident) */
/* ボタン付き見出し (.heading-with-button) -------------------- { */
.heading-with-button { display: flex; align-items: baseline; justify-content: space-between; }
.heading-with-button .changeBtn[type="button"] { padding: 10px 20px; font-size: 1.8rem; line-height: 1; background-color: var(--sup-base-color); color: #ffffff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; }
.heading-with-button .changeBtn[type="button"]:hover { background: #006B52;}
/* -------------------- } ボタン付き見出し (.heading-with-button) */
/* 最終確認メッセージ (.lastMsg) -------------------- { */
.lastMsg { margin-top: 32px; border: 3px solid #AA0000; padding: 16px; }
.lastMsg p+p { margin-top: 1.0rem!important; }
/* -------------------- } 最終確認メッセージ (.lastMsg) */
/* 最終申し込み (.final-application) -------------------- { */
.final-application { margin: 1em 0; padding: 2em 0.5em; text-align: center; background: #f1f1f1; font-size: 2.0rem; }
.final-application input[type^="checkbox"] { position: relative; top: -2px; margin-right: 0.8em; height: 18px; width: 18px; }
.final-application input[type^="button"] { color: #ffffff; background: #005243; border: 1px solid transparent; cursor: pointer; font-size: 1.8rem; padding: 0.5em 2em; border-radius: 3px; }
/* -------------------- } 最終申し込み (.final-application) */
.img-3dsecure { text-align: center; }
.img-3dsecure > img { max-width: 1000px; height: auto; }
/* 3Dセキュア注記 (.precautions-3dsecure) -------------------- { */
.precautions-3dsecure { display: flex; border: 2px solid #8e0000!important; }
.precautions-3dsecure ul { font-size: 1.5rem; }
@media only screen and (max-width: 768px) {
	.precautions-3dsecure > div { margin-right: 20px; }
}
/* -------------------- } 3Dセキュア注記 (.precautions-3dsecure) */


/* =============================================================================
	クレジットカード情報の入力（card）
============================================================================= */
/* 入力例 - クレカ有効期限 (.example+addition) -------------------- { */
.example span:not(.date) { margin: 4px; padding: 1px 3px; border: 1px solid #ccc; }
.example .date { font-size: 1.2rem; font-weight: 700; }
.expiration-date { display: inline-flex!important;  align-items: center; }
/* -------------------- } 入力例 - クレカ有効期限 (.example+addition) */


/* =============================================================================
	内容確認共通 - 判定あり（confirm_u &card）
============================================================================= */
/* 確認遷移ボタン (.nextbutton) -------------------- { */
.nextbutton { margin-top: 32px; text-align: center; }
.nextbutton > input[type="button"]:disabled { color: #cccccc; background: transparent; border: 1px solid #cccccc; cursor: default; }
.nextbutton > input[type="button"] { min-width: 400px; padding: 10px 24px; color: #ffffff; background: #005243; border: 1px solid transparent; font-size: 2.4rem; line-height: 1.4; cursor: pointer; }
@media only screen and (max-width: 768px) {
	.nextbutton > input[type="button"] { min-width: 100%; width: 100%; margin-top: 8px; padding: 12px; }
}
/* -------------------- } 確認遷移ボタン (.nextbutton) */


/* =============================================================================
	お申し込み完了（complete）
============================================================================= */
/* 完了メッセージ -------------------- { */
.donemsg { font-size: 2.0rem; font-weight: 700; color: var(--sup-base-color); }
.receiptnum { text-align: center; font-size: 2.0rem; }
/* -------------------- } 完了メッセージ */
/* 今後の手続きについて (.applyinfopayway) -------------------- { */
.applyinfopayway { margin: 0 auto 3rem; max-width: 800px; }
/* -------------------- } 今後の手続きについて (.applyinfopayway) */
/* お申し込み内容確認書 - 印刷 (.disp_print) -------------------- { */
.disp_print { max-width: 1280px; margin: 0 auto; padding: 50px 0;}
.disp_print h1 { border-width: 3px 0px; border-style: solid ; border-color: #000000; margin: 16px auto 24px; padding: 8px 16px; }
.disp_print h2 { border-width: 1px 0px; border-style: solid ; border-color: #000000; padding: 8px 16px; }
.disp_print h2::before { content: none; }
/* -------------------- } お申し込み内容確認書 (.disp_print) */
/* copyright (.print-copyright) -------------------- { */
.print-copyright { text-align: center;}
.print-copyright a { pointer-events: none; text-decoration: none; }
/* -------------------- } copyright (.print-copyright) */


/* =============================================================================
	お申し込み後のリサイクル状況を確認する（status）
============================================================================= */
/* お申し込み番号入力 (application-number) -------------------- { */
.application-number { position: relative; margin-bottom: 1.5em; }
.application-number > input[type="text"] { padding: 16px 10px 12px 10px; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 4px; background-color: #ffffff; outline: none; }
.application-number > input[type="text"]:focus { background-color: #ffffff!important; }/* フォーカス時も変えない */
.application-number > input[type="text"]:valid { background-color: #ffffff!important; }/* 入力済みでも変えない（requiredなどで変わることがある） */
.application-number > label { position: absolute; top: 12px; left: 10px; color: #999999; pointer-events: none; transition: 0.2s ease all; }
.application-number > input:focus + label,
.application-number > input:not(:placeholder-shown) + label { top: -10px; left: 8px; font-size: 1.3rem; color: #005243; background-color: #ffffff; padding: 0 4px; }
.application-number > input[type="button"] { padding: 10px 20px; font-size: 1.8rem; background-color: #005243; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; }
.application-number > input[type="button"]:hover { background-color: #00785c; }
	@media (max-width: 600px) {
		.application-number > input[type="text"] { width: 100%; }
		.application-number > input[type="button"] { width: 100%; margin-top: 8px; padding: 12px; }
	}
/* -------------------- } お申し込み番号入力 (application-number) */
/* お申し込みの処理状況 (Status) -------------------- { */
.Status .apply-date { font-size: 1.8rem; }
.StateIcon { display: flex; flex-wrap: nowrap; gap: 16px 6px; width: 100%; }
.StateIcon .item.active { z-index: 1; background: #005243; color: #ffffff; }
.StateIcon .item { position: relative; flex: 1 1 auto; min-width: 0; text-align: center; align-items: center; justify-content: center; padding: 10px 0; color: #494949; }
.StateIcon .item.icon { display: flex; flex-flow: column; gap: 8px; height: 100%; }
.StateIcon .item.icon > img { width: 100px; height: auto; }
.StateIcon .item.icon > p { font-size: 1.5rem;}
.StateIcon .item.arrow { display: flex; }
		@media only screen and (max-width: 845px) {
			.StateIcon .item.icon > p { font-size: 1.2rem;}
		}
		@media only screen and (max-width: 480px) {
			.StateIcon { flex-wrap: wrap; }
			.StateIcon .item { flex: none; }
			.StateIcon .item.icon > img { width: 80px; height: auto; }
		}
/* -------------------- } お申し込みの処理状況 (Status) */