@charset "utf-8";
/* CSS Document */

/* =============================================================================
	コンテンツ共通 
============================================================================= */
sup { color:#005243; font-weight: 700; margin: 0 2px;}
/* 見出し - お知らせ（.hdg-recycleinfo） -------------------- { */
.hdg-recycleinfo { font-size: 3.2rem; margin: 0 0 26px; }
.hdg-recycleinfo::before { content: ""; display: inline-block; width: 38px; height: 38px; background-image: url(/recycle/images/icon-info.svg); background-size: contain; vertical-align: text-bottom; margin-right: 8px; }
.icon-OK { display: inline-block; width: 30px; height: 30px; border:3px solid #0000ff; border-radius: 50%; vertical-align: text-bottom; margin-right: 8px; }
.icon-NG { position: relative; display: inline-block; width: 30px; height: 25px; vertical-align: text-bottom; margin-right: 8px}
.icon-NG::before, .icon-NG::after {content: ''; width: 100%; height: 3px; background: #ff0000; transform: rotate(45deg); transform-origin: 0% 50%; position: absolute; top:calc(14% - 5px); left: 14%;}
.icon-NG::after { transform: rotate(-45deg); transform-origin: 100% 50%; left: auto; right: 14%;}
/* -------------------- } 見出し - お知らせ（.hdg-recycleinfo） */
/* お知らせ（information_include.js） -------------------- { */
#RecycleImportant {}
.RecycleImportant_list { display: flex; align-items: stretch; flex-wrap: wrap; margin-bottom: -20px; margin-left: -20px; }
.RecycleImportant_list>li { display: flex; align-items: stretch; width: 50%; margin-bottom: 20px; padding-left: 20px; }
.RecycleImportant_list>li .RecycleImportant_list_inner { display: block; width: 100%; background: #ffffff; padding: 16px; border-radius: 5px; font-size: 1.4rem; box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: background .2s;}
.RecycleImportant_list>li .RecycleImportant_list_inner .date { display: inline-block; padding: 2px 5px; text-align: center; margin-bottom: 1em; border: 1px solid #E0ECD6; }
.RecycleImportant_list>li .RecycleImportant_list_inner .title { font-weight: 700; margin-bottom: 0.5em; padding:0 5px 2px; border-bottom: 1px solid #E0ECD6;}
.RecycleImportant_list>li .RecycleImportant_list_inner .contents {}
.RecycleImportant_list>li .RecycleImportant_list_inner .contents>p { margin-top: 1em;}
@media only screen and (max-width: 767px) {
	.RecycleImportant_list  { display: block; }
	.RecycleImportant_list>li { display: block; width: 100%; }
}
/* -------------------- } お知らせ（information_include.js） */
/* 申し込みボタン＆状況確認ボタン（） -------------------- { */
/* トップページ2カラム表示 */
.recycleTopBtn { display: flex; margin-bottom: -16px; margin-left: -32px; }
.recycleTopBtn:first-child { margin-top: 0;}
.recycleTopBtn .item { width: 50%; margin-bottom: 16px; margin-left: 32px; }
.recycleTopBtn .item .txt01 { font-size: 2.8rem; color: #005243; }
.recycleTopBtn .item .txt02 { font-size: 2.0rem; color: #005243; }
.recycleTopBtn .item .img01 { text-align: center; }.recycleTopBtn .item .img01 img { max-width: 60%; }
@media only screen and (max-width: 767px) {
	.recycleTopBtn { display: block; margin-left: 0;}
	.recycleTopBtn .item { display: block; width: 100%; margin-left: 0; }
}
/* ボタン共通 */
.recycleBtn { margin-top: 18px;}
.recycleBtn:first-child { margin-top: 0;}
.recycleBtn > a { display: block; text-decoration: none; padding: 18px; border: 1px solid #005243; background: #005243;}
/* ボタン共通 - 矢印とhover動作*/
.recycleBtn .btn-offer:hover .growing_arrow::before, .recycleBtn .btn-confirmation:hover .growing_arrow::before { left:5%; }
.recycleBtn .btn-offer:hover .growing_arrow::after,.recycleBtn .btn-confirmation:hover .growing_arrow::after { right:0%; }
.recycleBtn > a .growing_arrow { position: relative; display: inline-block; padding: 0 20px; text-decoration: none; outline: none; }
.recycleBtn > a .growing_arrow::before { content: ''; position: absolute; bottom: -10px; left:0; width: 95%; height: 2px; transition: all .3s; }
.recycleBtn > a .growing_arrow::after { content: ''; position: absolute; bottom:-5px; right: 5%; width: 15px; height:2px; transform:  rotate(35deg); transition: all .3s; }.recycleBtn .btn-offer .btn-offer-body .btn-offer-img {text-align: center; }
/* 申し込みボタン */
.recycleBtn .btn-offer { background: #005243;}
.recycleBtn .btn-offer:hover, .recycleBtn .btn-offer:active, .recycleBtn .btn-offer:focus { background: #006B52; }
.recycleBtn .btn-offer .growing_arrow { color: #ffffff; }
.recycleBtn .btn-offer .growing_arrow::before, .recycleBtn .btn-offer .growing_arrow::after { background:#ffffff; }
.recycleBtn .btn-offer .btn-offer-body .btn-offer-img img {max-width: 150px; height: auto; }
.recycleBtn .btn-offer .btn-offer-body .btn-offer-txt { position: relative; top: 0; left: 50%; transform: translateX(-50%); margin-top: 34px; font-size: 2.8rem; color: #ffffff; margin-bottom: 18px; }
.recycleBtn .btn-offer .btn-offer-body .btn-offer-txt-mainte { display: none;}
/* 申し込みボタン（メンテンナンス）*/
.recycleBtn.for-mainte .btn-offer { pointer-events: none; background: #333631;}
.recycleBtn.for-mainte .btn-offer .btn-offer-body .btn-offer-txt-mainte { display: inline-block; position: relative; top: 0; left: 50%; transform: translateX(-50%); margin-top: 34px; font-size: 2.8rem; color: #ffffff; margin-bottom: 18px;  }
.recycleBtn.for-mainte .btn-offer .btn-offer-body .btn-offer-txt { display: none; }
/* 状況確認ボタン */
.recycleBtn .btn-confirmation { background: #ffffff;}
.recycleBtn .btn-confirmation:hover, .recycleBtn .btn-confirmation:active, .recycleBtn .btn-confirmation:focus { background: #d2ecef; }
.recycleBtn .btn-confirmation .growing_arrow { color: #005243; }
.recycleBtn .btn-confirmation .growing_arrow::before, .recycleBtn .btn-confirmation .growing_arrow::after { background:#005243; }
.recycleBtn .btn-confirmation .btn-confirmation-body .btn-confirmation-txt { position: relative; top: 0; left: 50%; transform: translateX(-50%); font-size: 2.0rem; color: #005243; margin-bottom: 16px; }
.recycleBtn .btn-confirmation .btn-confirmation-body .btn-confirmation-txt-mainte { display: none;}
/* 状況確認ボタン（メンテンナンス） */
.recycleBtn.for-mainte .btn-confirmation { pointer-events: none; background: #333631;}
.recycleBtn.for-mainte .btn-confirmation .growing_arrow::before, .recycleBtn .btn-confirmation .growing_arrow::after { background: #005243; }
.recycleBtn.for-mainte .btn-confirmation .btn-confirmation-body .btn-confirmation-txt-mainte { display: inline-block; position: relative; top: 0; left: 50%; transform: translateX(-50%); font-size: 2.0rem; color: #ffffff; margin-bottom: 16px; }
.recycleBtn.for-mainte .btn-confirmation .btn-confirmation-body .btn-confirmation-txt { display: none; }
/* 単独ボタン配置 */
.aloneBtn-inner { width: 50%; height: auto; margin: 0 auto; }
@media only screen and (max-width: 767px) {
	.aloneBtn-inner { width: 100%; height: auto; }
}
/* 外部リンク */
.externalBlock .hdg-external { margin-top: 32px; }
.externalBlock .hdg-external > span { display: inline-block; }
/* 見出し - 三角と組み合わせ */
.hdg-triangle {	position: relative; padding-bottom: 20px; font-size: 2.0rem; text-align: center; font-weight: 700; }
.hdg-triangle::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 10px 6px 0 6px; border-color: #005243 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0); }
/* -------------------- } 申し込みボタン＆状況確認ボタン（） */

/* =============================================================================
	トップページ 
============================================================================= */
/* 回収・リサイクルの流れ（txt-topflow） -------------------- { */
.txt-topflow { font-size: 1.8rem; counter-reset: num; }
.txt-topflow li { margin-top: 1.5em; }
.txt-topflow li:nth-child(odd) { counter-increment: num;}
.txt-topflow li:nth-child(odd)::before { content: counter(num,decimal) ""; color: #005243; border: 2px solid #005243; border-radius: 50%; display: inline-block; width: 3.5rem; height: 3rem; text-align: center; padding-top: .25rem; font-weight: 700; margin-right: 1rem; background: rgba(0,0,0,0.025); }
.txt-topflow .arrow { position: relative; margin-bottom: 2.5em; }
.txt-topflow .arrow::before {content: ''; position: absolute; bottom: 0; left: 5px; width: 0; height: 0; border-style: solid; border-width: 15px 15px 0 15px; border-color: #005243 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0); }
/* -------------------- } 回収・リサイクルの流れ（txt-topflow） */
/* リサイクル料金（recycle-price） -------------------- { */
.lyt-item-a.recycle-price .logo-pcrecycle { max-width: 240px; height: auto; }
.recycle-price .txt1 { font-size: 2.8rem; color: #005243; }
.recycle-price .txt2 { font-size: 2.0rem; }
/* -------------------- } リサイクル料金（recycle-price） */

/* =============================================================================
	お申し込みの手順 
============================================================================= */
/* 手順アンカー（recycle_flow_anchor） -------------------- { */
.recycle_flow_anchor { margin: 32px auto 0; background: #dad9d5; padding: 20px 0;}
.recycle_flow_anchor ul { display: flex; flex-wrap: wrap; margin-bottom: -24px;}
.recycle_flow_anchor ul > li { line-height: 1.4; position: relative; text-align: center; padding: 0 30px; margin-bottom: 24px; }
.recycle_flow_anchor ul > li::before { display: block; position: absolute; content: ""; top: 50%; right: 0; width: 1px; height: 32px; margin-top: -16px; background: #b1b1ac; }
.recycle_flow_anchor ul > li > a { display: table; }
.recycle_flow_anchor ul > li > a > div { display: table-cell; }
.recycle_flow_anchor ul > li > a .num_icon { display: inline-block; margin-right: 16px; position: relative; font-size: 2.0rem; font-weight: 700; color: #005243; text-align: center; line-height: 1; }
.recycle_flow_anchor ul > li > a .num_icon::before { content: 'STEP'; font-size: 0.3em; display: block; margin-bottom: 3px; letter-spacing: 1px;}
@media only screen and (max-width: 767px) {
	.recycle_flow_anchor ul { display: block; margin-bottom: 0;}
	.recycle_flow_anchor ul > li { border-bottom: 1px solid #b1b1ac; padding: 0 4px 12px; margin: 0 16px 12px; text-align: left; }
	.recycle_flow_anchor ul > li:last-child {border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
	.recycle_flow_anchor ul > li::before { display: none; }
}
/* -------------------- } 手順アンカー（recycle_flow_anchor） */
/* 手順（recycle_flow_block） -------------------- { */
.recycle_flow_block { margin-top: 32px; }
.recycle_flow_block .recycle_flow_block_inner { counter-reset: num; border-bottom: solid 1px #c6c6c0; }
.recycle_flow_block .recycle_flow_block_inner > li { display: flex; padding: 20px 0; border-top: solid 1px #c6c6c0; }
.recycle_flow_block .recycle_flow_block_inner > li .num_icon { counter-increment: num;	position: relative; width: 70px; font-size: 3.8rem; font-weight: 700; color: #005243; text-align: center; line-height: 1; }
.recycle_flow_block .recycle_flow_block_inner > li .num_icon::before { content: 'STEP'; font-size: 0.3em; display: block; margin-bottom: 3px; letter-spacing: 1px;}
.recycle_flow_block .recycle_flow_block_inner > li .num_icon::after { content: ""; display: block; position: absolute; left: 0; right: 0; top: 70px; width: 1px; height: calc(100% - 70px); background-color: #c6c6c0; margin: auto; }
.recycle_flow_block .recycle_flow_block_inner > li .num_icon .number::before { content: counter(num,decimal) ''; }
.recycle_flow_block .recycle_flow_block_inner > li .flow_list_inner { width: calc(100% - 70px); margin-top: 0.8em; margin-bottom: 20px; }
.recycle_flow_block .recycle_flow_block_inner > li .flow_list_inner .flow_list_tit { font-size: 2.8rem; font-weight: 700; line-height: 1.4; }
.recycle_flow_block .recycle_flow_block_inner > li .flow_list_inner .flow_list_cnt { margin-top: 16px; }
.recycle_flow_block .recycle_flow_block_inner > li .flow_list_inner .flow_list_cnt .txt01 { font-size: 2.0rem; color: #005243; }
@media only screen and (max-width: 767px) {
	.recycle_flow_block .recycle_flow_block_inner > li .flow_list_inner .flow_list_tit { font-size: 2.4rem; }
}
@media only screen and (max-width: 480px) {
	.recycle_flow_block .recycle_flow_block_inner > li .flow_list_inner .flow_list_tit { font-size: 2.2rem; }
}
/* table - リサイクル対象製品の確認 */
.tbl-a.tbl-recycle-taget tbody th { width: 350px; font-size: 2.0rem; font-weight: 600; vertical-align: middle; }
@media only screen and (max-width: 850px) {
	.tbl-a.tbl-recycle-taget { width: 98%; }
	.tbl-a.tbl-recycle-taget tbody th,
	.tbl-a.tbl-recycle-taget tbody td { display: block; width: 100%; }
}
/* 2カラム表示 */
.flow_list_inner .flow_list_cnt .item2col { display: flex; align-items: stretch; }
.flow_list_inner .flow_list_cnt .item2col .item-inner { padding: 16px; width: 100%; }
.flow_list_inner .flow_list_cnt .item-inner.innerBG_gr {background: #f3f3f3; }
.flow_list_inner .flow_list_cnt .lyt-idx-b .list-a > * a { display: inline; text-decoration: underline; border: none; }
/* PCリサイクルロゴ表示 */
.logo-pcrecycle { width: 100%; }
.logo-pcrecycle p { text-align: center; }
.logo-pcrecycle img { max-width: 100px; height: auto; vertical-align: middle; margin: 0 10px; }
/* parts */
.img-inner-eyp { text-align: center; } .img-inner-eyp .caption { display: block; margin-top: 20px; }.img-inner-eyp .caption span { font-size: 2.0rem; font-weight: 700; padding: 8px; border: 2px solid #333333; }
.Note { display: inline-block; background: #CC0000; color: #ffffff; font-weight: 700; font-size: 1.5rem; padding: 2px 16px; margin-right: 8px; border-radius: 20px;}
.u-maw300px { max-width: 300px!important; }
/* -------------------- } 手順（recycle_flow_block） */

/* =============================================================================
	リサイクル料金 
============================================================================= */
.recycle-Paid { width: 100%; }
.recycle-Paid thead tr:first-child>*:first-child { width: auto; }
.recycle-Paid tbody th, .recycle-Paid tbody .th { width: auto; }
.recycle-Paid tbody td { text-align: right; }
.recycle-Paid .comparison_disp td { padding: 16px; }
.img-inner-credit { padding: 0 6px; }.img-inner-credit img { max-width: 255px; height: auto; }
.txt-rec { font-size: 1.8rem; color: #005243; }

/* =============================================================================
	梱包方法 
============================================================================= */
.tbl-packing thead th { font-size: 2.0rem; vertical-align: middle; border-bottom: 3px dotted #b1b1ac; }
.tbl-packing .ok { background: #bce2e8; }
.tbl-packing .ng { background: #dddcd6; }

/* =============================================================================
	よくあるご質問 
============================================================================= */
.list-qa-recycle:not(:last-child) { margin-bottom: 6rem; }
.list-qa-recycle > details { margin-bottom: 10px; border: none; border-radius: 5px; box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgba(0 0 0 / 5%); background-color: #ffffff; }
.list-qa-recycle > details .question { display: flex; justify-content: space-between; align-items: center; position: relative; padding: 1em 2em 1em 3em; font-weight: 600; cursor: pointer; }
.list-qa-recycle > details .question::before, .list-qa-recycle > details .answer::before { position: absolute; left: 1em; font-weight: 600; font-size: 2.056rem; }
.list-qa-recycle > details .question::before { color: #1960ad; content: "Q"; }
.list-qa-recycle > details .question::after { transform: translateY(-25%) rotate(45deg); width: 7px; height: 7px; margin-left: 10px; border-bottom: 3px solid #333333b3; border-right: 3px solid #333333b3; content: ''; transition: transform .5s; }
.list-qa-recycle > details[open] .question::after { transform: rotate(225deg); }
.list-qa-recycle > details .answer { position: relative; transform: translateY(-10px); opacity: 0; margin: 0; padding: .3em 3em 1.5em; transition: transform .5s, opacity .5s; }
.list-qa-recycle > details[open] .answer { transform: none; opacity: 1; }
.list-qa-recycle > details .answer::before { color: #cc0000; line-height: 1.2; content: "A"; }
.list-qa-recycle > details .answer dl dt { margin-bottom: .5em; font-weight: 600; }
.list-qa-recycle > details .answer dl dt:not(:first-child) { margin-top: 1.0em; }
.list-qa-recycle > details .answer dl dt .icon-yes { display: inline-block; position: relative; border:3px solid #0000ff;  border-radius: 50%; width: 18px; height: 18px; vertical-align: text-bottom; margin-right: .3em;}
.list-qa-recycle > details .answer dl dt .icon-none { display: inline-block; position: relative; width: 18px; height: 18px; vertical-align: text-bottom; margin-right: .3em;}
.list-qa-recycle > details .answer dl dt .icon-none::before,.list-qa-recycle > details .answer dl dt .icon-none::after {content: ''; width: 100%; height: 3px; background: #ff0000; transform: rotate(45deg); transform-origin: 0% 50%; position: absolute; top:calc(14% - 2px); left: 14%;}
.list-qa-recycle > details .answer dl dt .icon-none::after { transform: rotate(-45deg); transform-origin: 100% 50%; left: auto; right: 14%;}
.list-qa-recycle > details .answer dl dt .icon-square { display: inline-block; position: relative; box-sizing: border-box; transform: scale(var(--ggs,1)); width: 10px; height: 10px; border-radius: 1px; border: 3px solid transparent; box-shadow: 0 0 0 3px, inset 0 0 0 3px; color: #005243; margin-left: 3px; margin-right: .4em; }
.list-qa-recycle > details .answer dl dd { margin-left: 24px;}
.list-qa-recycle > details .answer dl dd img { margin: .5em 0;}

/* =============================================================================
	お問い合わせ
============================================================================= */
.before-phone .txt01 { font-size: 2.0rem; color: #005243; }
.box-b { padding: 24px 20px 30px;}