/* =============================================
   page-purchase-delivery.php 用 CSS
   ============================================= */

/* ----- PC (デフォルト) ----- */

/* KV画像をchoose_tiresと同じサイズに */
body#purchase-delivery #kv,body#purchase-store #kv{overflow:hidden;aspect-ratio:3200/940}
body#purchase-delivery #kv img,body#purchase-store #kv img{width:100%;height:100%;object-fit:cover}

/* フローセクション */
#entry_flow_wrapper .wrapper{padding-bottom:90px}
#entry_flow_wrapper p.ex{padding:40px 0 60px;font-size:1.4rem;text-align:center}

/* フローアイテム：役割 */
.flow_items{display:flex;justify-content:space-between;flex-direction:row;gap:40px}
.flow_items .col{width:calc(50% - 20px)}
.flow_items.roles{margin-bottom:80px}
.flow_items.roles .col strong{height:60px;padding-top:25px;display:block;position:relative;text-align:center;line-height:1;color:#fff;font-size:2.2rem}
.flow_items.roles .col strong::after{content:"";display:block;position:absolute;top:calc(100% - 1px);left:0;width:100%;height:15px;clip-path:polygon(0 0, 100% 0, 50% 100%)}
.flow_items.roles .col:nth-child(2n+1) strong{background-color:#20484A}
.flow_items.roles .col:nth-child(2n+1) strong::after{background-color:#20484A}
.flow_items.roles .col:nth-child(2n) strong{background-color:#C49F45}
.flow_items.roles .col:nth-child(2n) strong::after{background-color:#C49F45}

/* フローアイテム：ステップ */
.flow_items.steps{justify-content:flex-end;padding-left:calc(50% + 20px);margin-bottom:50px}
.flow_items.steps .col{width:100%;height:180px;padding:30px;display:flex;align-items:center;flex-direction:row;position:relative;background-color:#DDE4D9;box-sizing:border-box}
.flow_items.steps .col .step{position:absolute;bottom:100%;right:2px}
.flow_items.steps .col .step .small{font-size:2.4rem}
.flow_items.steps .col .step .large{margin-left:5px;font-size:3rem}
.flow_items.steps .col .pic{width:120px;min-width:120px;height:120px;margin-right:40px;display:flex;justify-content:center;align-items:center;flex-direction:row;background-color:#fff}
.flow_items.steps .col .text{line-height:1.7;font-size:1.8rem}
.flow_items.steps .col .text .label{width:120px;margin-top:10px;display:inline-block;text-align:center;line-height:40px;color:#fff;font-size:1.5rem;background-color:#B51F1F}
.flow_items.steps.reverse{justify-content:flex-start;padding-left:0;padding-right:calc(50% + 20px)}
.flow_items.steps.reverse .col{background-color:#E5DECC}
.flow_items.steps.reverse .col .step{right:auto;left:2px}

/* 店舗予約ボタン（無効状態） */
.pit_shops .button.disabled{pointer-events:none;background-color:#707070;border-color:#707070;color:#fff;cursor:default}

/* 無料査定セクション */
.entry_set{padding:40px 0}
.entry_set .h2_block{padding-bottom:40px}
.entry_set h2.has_border{margin-bottom:0;padding-bottom:20px;border-bottom:2px solid #42A548;font-size:2rem;text-align:center}
.entry_set h2.has_border span{display:block}
.entry_set h2.has_left_border{margin-bottom:15px;padding-left:15px;border-left:4px solid #42A548;font-size:1.6rem}
.entry_set h2.has_left_border::before{content:none!important}
.entry_set h3.has_number{padding:20px 0;display:flex;align-items:center;cursor:pointer;border-bottom:1px solid #ddd}
.entry_set h3.has_number .en{width:50px;height:50px;margin-right:20px;display:flex;justify-content:center;align-items:center;background-color:#42A548;color:#fff;font-size:2rem;border-radius:50%}
.entry_set h3.has_number strong{flex:1;font-size:1.6rem}
.entry_set h3.has_number::after{content:"";width:12px;height:12px;margin-left:20px;border-right:3px solid #333;border-bottom:3px solid #333;transform:rotate(45deg);transition:transform 0.3s}
.entry_set h3.has_number.open::after{transform:rotate(-135deg)}
.entry_set .accordion_target{display:none;padding:30px 0}
.entry_set .accordion_target.open{display:block}
.entry_set .paragraph{line-height:1.8;font-size:1.5rem}
.entry_set .paragraph .has_notice{display:inline-block;margin-top:10px;padding:10px 15px;background-color:#fff4e5;color:#B51F1F;font-size:1.4rem}
.entry_set .box{margin-top:30px;padding:30px;background-color:#fff;border:1px solid #ddd}
.entry_set .box+.box{margin-top:20px}
.entry_set .col2s{display:flex;flex-wrap:wrap;gap:20px}
.entry_set .col2s .col{width:calc(50% - 10px)}
.entry_set .col2s .col .pic{margin-bottom:10px}
.entry_set .col2s .col .pic img{width:100%}
.entry_set .col2s .col .caption{font-size:1.3rem;text-align:center;color:#666}
.entry_set .list_items{margin:15px 0 0;padding:0;list-style:none}
.entry_set .list_items li{position:relative;padding-left:25px;margin-bottom:5px;font-size:1.4rem}
.entry_set .list_items li::before{position:absolute;left:0}
.entry_set .list_items li.list01::before{content:"①"}
.entry_set .list_items li.list01:nth-child(2)::before{content:"②"}
.entry_set .list_items li.list01:nth-child(3)::before{content:"③"}
.entry_set .list_items li.list01:nth-child(4)::before{content:"④"}
.entry_set .list_items li.list01:nth-child(5)::before{content:"⑤"}
#entry_form_notice .col2s .col{width:auto;max-width:300px}

/* 無料査定フォーム */
#entry_form_wrapper{padding:60px 0}
#entry_form .entry_form_inner{padding:30px 0}
#entry_form .entry_form_inner.outline{padding:40px 0;background-color:#42A548}
#entry_form .entry_form_inner.outline h2{text-align:center;color:#fff;font-size:2.4rem;line-height:1.6}
#entry_form .entry_form_inner.outline .has_corner_border{background-color:#fff;padding:30px}
#entry_form .entry_form_inner.outline .ex{line-height:1.8;font-size:1.4rem}
#entry_form .entry_form_inner.outline .ex+.ex{margin-top:20px;text-align:center}
#entry_form .entry_form_inner.outline.has_bg_border_top{background-color:transparent}
#entry_form .entry_form_inner.outline.has_bg_border_top .has_corner_border{background-color:transparent;padding:30px 0}
#entry_form .required_notice{margin-bottom:15px;font-size:1.4rem}
#entry_form .form_item.files{flex-direction:row;align-items:flex-start}
#entry_form .form_item.files.required::before{content:"必須";margin-right:10px;padding:5px 15px;background-color:transparent;border:2px solid #B51F1F;color:#B51F1F;font-size:1.0rem;font-weight:bold}
#entry_form .form_item.files #photos_wrapper{flex:1}
#entry_form h3.has_number_dark{margin-bottom:20px;padding:15px 20px;display:flex;align-items:center;background-color:#333;color:#fff}
#entry_form h3.has_number_dark .en{margin-right:15px;font-size:2rem}
#entry_form h3.has_number_dark .bold{font-size:1.6rem}
#entry_form .form_items{display:flex;flex-direction:column;gap:20px}
#entry_form .form_item{width:100%;display:flex;align-items:flex-start}
#entry_form .form_item.required .label::before{content:"必須";margin-right:10px;padding:5px 15px;background-color:transparent;border:2px solid #B51F1F;color:#B51F1F;font-size:1.0rem;font-weight:bold}
#entry_form .form_item .label{width:auto;min-width:auto;padding:12px 0;font-size:1.4rem;white-space:nowrap}
#entry_form .form_item .label .small{display:block;font-size:1.2rem;font-weight:normal;margin-left:70px}
#entry_form .form_item .label .indent{display:block;margin-left:70px}
#entry_form .form_item .item{width:70%;margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
#entry_form .form_item .item .input{flex:1;min-width:200px}
#entry_form .form_item .item input[type="text"],
#entry_form .form_item .item input[type="tel"],
#entry_form .form_item .item input[type="email"]{width:100%;padding:12px 15px;border:1px solid #ccc;font-size:1.4rem;box-sizing:border-box}
#entry_form .form_item .item .paragraph{margin-top:5px;font-size:1.3rem;color:#666}
#entry_form .form_item .item .paragraph.full{width:100%}
#entry_form .select_box_wrapper{display:flex;align-items:center;gap:10px}
#entry_form .select_box_wrapper.multiple{flex:1;min-width:120px}
#entry_form .tire_info02 .select_box_wrapper.multiple,
#entry_form .tire_info03 .select_box_wrapper.multiple{width:100%;flex:none}
#entry_form .tire_info02 .select_box_wrapper.multiple span,
#entry_form .tire_info03 .select_box_wrapper.multiple span{width:60px;min-width:60px;font-size:1.4rem}
#entry_form .tire_info02 .select_box_wrapper.multiple .select_box,
#entry_form .tire_info03 .select_box_wrapper.multiple .select_box{flex:1}
#entry_form .select_box{position:relative;flex:1}
#entry_form .select_box select{width:100%;padding:12px 40px 12px 15px;border:1px solid #ccc;font-size:1.4rem;appearance:none;background:#fff;cursor:pointer}
#entry_form .select_box::after{content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid #333;border-bottom:2px solid #333;transform:rotate(45deg);pointer-events:none}
#entry_form .checkbox_wrapper{display:flex;flex-wrap:wrap;gap:10px}
#entry_form .checkbox_wrapper.full{width:100%}
#entry_form .checkbox_inner{display:flex;align-items:center;cursor:pointer}
#entry_form .checkbox_inner input[type="checkbox"]{display:block!important;width:24px;height:24px;margin-right:10px;cursor:pointer;appearance:auto;-webkit-appearance:checkbox}
#entry_form .checkbox_inner p{font-size:1.4rem;margin:0}
#entry_form .others_wrapper{display:flex;align-items:center;gap:10px}
#entry_form .others_wrapper.full{width:100%}
#entry_form .others_wrapper span{font-size:1.4rem}
#entry_form .others_wrapper input{flex:1;padding:12px 15px;border:1px solid #ccc;font-size:1.4rem}
#entry_form .input_wrapper{display:flex;align-items:center;gap:10px}
#entry_form .input_wrapper input{width:150px;padding:12px 15px;border:1px solid #ccc;font-size:1.4rem;text-align:right}
#entry_form .has_tire_info{margin-bottom:20px;display:flex;gap:30px}
#entry_form .has_tire_info label{display:flex;align-items:center;cursor:pointer}
#entry_form .has_tire_info input[type="radio"]{display:block!important;width:24px;height:24px;margin-right:10px;cursor:pointer;appearance:auto;-webkit-appearance:radio;accent-color:#42A548}
#entry_form .has_tire_info span{font-size:1.4rem}
#entry_form .example{margin-bottom:30px}
#entry_form .example .paragraph{font-size:1.4rem;line-height:1.8}
#entry_form .example strong{display:block;margin:15px 0 10px;font-size:1.4rem}
#entry_form .example ul{display:flex;flex-wrap:wrap;gap:15px}
#entry_form .example li{width:calc(20% - 12px);text-align:center}
#entry_form .example li img{width:100%;border:1px solid #ddd}
#entry_form .example li .caption{margin-top:5px;font-size:1.4rem;color:#666}
#entry_form #photos_wrapper{width:100%}
#entry_form #photos_wrapper ul{display:flex;flex-wrap:wrap;gap:15px;width:100%}
#entry_form #photos_wrapper li{width:calc(33.333% - 10px);aspect-ratio:1/1}
#entry_form #photos_wrapper label{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:#f5f5f5;text-align:center;cursor:pointer;border:2px solid transparent;transition:border-color 0.3s;box-sizing:border-box}
#entry_form #photos_wrapper label:hover{border-color:#42A548}
#entry_form #photos_wrapper input[type="file"]{display:none}
#entry_form #photos_wrapper span{display:block;font-size:1.4rem;color:#333}
#entry_form #photos_wrapper .photo{margin-top:10px}
#entry_form #photos_wrapper .photo img{max-width:100%;max-height:150px}
#entry_form .entry_form_inner.confirms .form_item{width:100%;padding:20px 0;display:flex;flex-direction:row;align-items:center}
#entry_form .entry_form_inner.confirms .form_item .label{width:450px;min-width:450px;white-space:normal}
#entry_form .entry_form_inner.confirms .form_item .item{width:auto;margin-left:20px}
#entry_form .form_buttons{text-align:center}
#entry_form .form_buttons .buttons{margin-bottom:20px}
#entry_form .form_buttons .btn_border_arrow{display:inline-block;width:280px;padding:15px 50px 15px 30px;position:relative;border:1px solid #333;text-decoration:none;color:#333;font-size:1.4rem;transition:background-color 0.3s;box-sizing:border-box}
#entry_form .form_buttons .btn_border_arrow:hover{background-color:#f5f5f5}
#entry_form .form_buttons .btn_border_arrow::after{content:">";position:absolute;right:20px;top:50%;transform:translateY(-50%)}
#entry_form .form_buttons .btn_form{width:100%;max-width:400px;padding:20px;background-color:#42A548;border:none;color:#fff;font-size:1.8rem;cursor:pointer;transition:opacity 0.3s}
#entry_form .form_buttons .btn_form:hover{opacity:0.8}
#entry_form .form_buttons .btn_form span::after{content:">";margin-left:10px}
.color_red{color:#B51F1F}
.required_label{padding:5px 15px;border:2px solid #B51F1F;color:#B51F1F;font-size:1.0rem;font-weight:bold}

/* 確認画面でフォームより上のセクションを非表示 */
body:has(#entry_form.confirm) #entry_flow_wrapper,
body:has(#entry_form.confirm) #entry_form_pics,
body:has(#entry_form.confirm) #entry_form_detail,
body:has(#entry_form.confirm) #entry_form_notice{display:none}

/* フォーム状態表示 */
#entry_form .buttons.confirm,
#entry_form .buttons.sending{display:none}
#entry_form.confirm .buttons.input{display:none}
#entry_form.confirm .buttons.confirm{display:block}
#entry_form.sending .buttons.input,
#entry_form.sending .buttons.confirm{display:none}
#entry_form.sending .buttons.sending{display:block}
#entry_form .buttons.sending p{text-align:center;font-size:1.6rem;color:#42A548}

/* 確認画面の値表示 */
#entry_form.confirm .form_item input[type="text"],
#entry_form.confirm .form_item input[type="tel"],
#entry_form.confirm .form_item input[type="email"],
#entry_form.confirm .form_item select,
#entry_form.confirm .form_item textarea,
#entry_form.confirm .form_item .select_box_wrapper,
#entry_form.confirm .form_item .select_box::after,
#entry_form.confirm .has_tire_info input[type="radio"]:not(:checked)+span,
#entry_form.confirm .checkbox_inner input[type="checkbox"]:not(:checked)+p{display:none}
#entry_form.confirm .has_tire_info label.hide{display:none}
#entry_form .p_confirm{font-size:1.4rem;padding:12px 0;margin:0}
#entry_form.confirm .form_item:not(.has_confirm){display:none}
#entry_form.confirm .form_item .item .p_confirm{display:block;width:100%}
#entry_form.confirm .others_wrapper,
#entry_form.confirm .confirms .form_item .item .p_confirm{display:none}

/* エラー表示 */
#entry_form .has_error{border-color:#B51F1F!important;background-color:#fff5f5!important}
#entry_form p.error{width:100%;margin-top:10px;padding:10px 15px;background-color:#fff5f5;color:#B51F1F;font-size:1.3rem;box-sizing:border-box}

/* ファイルプレビュー */
#entry_form #photos_wrapper .photo{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;margin:0}
#entry_form #photos_wrapper label{position:relative;overflow:hidden}
#entry_form #photos_wrapper label.has_file span{display:none}
#entry_form.confirm #photos_wrapper label:not(.has_file){display:none}

/* 戻るボタン */
#entry_form .btn_prev{background-color:#999}
#entry_form .btn_prev span::before{content:"<";margin-right:10px}
#entry_form .btn_prev span::after{display:none}

/* サンキューページ */
.thank_you{padding:80px 0}
.thank_you_content{text-align:center}
.thank_you_content h2{margin-bottom:30px;font-size:2.4rem;color:#42A548}
.thank_you_content .paragraph{margin-bottom:40px;line-height:2;font-size:1.6rem}
.thank_you_content .buttons{margin-top:30px}
.thank_you_content .btn_border_arrow{display:inline-block;padding:15px 50px 15px 30px;position:relative;border:1px solid #333;text-decoration:none;color:#333;font-size:1.4rem;transition:background-color 0.3s}
.thank_you_content .btn_border_arrow:hover{background-color:#f5f5f5}
.thank_you_content .btn_border_arrow::after{content:">";position:absolute;right:20px;top:50%;transform:translateY(-50%)}


/* ----- タブレット ----- */
@media screen and (max-width: 1024px) {
	.flow_items.steps .col{height:auto;min-height:150px;padding:20px}
	.flow_items.steps .col .pic{width:80px;min-width:80px;height:80px;margin-right:20px}
	.flow_items.steps .col .text{font-size:1.5rem}
	.entry_set{padding:30px 0}
	.entry_set .box{padding:20px}
	#entry_form_wrapper{padding:40px 0}
	#entry_form .example li{width:calc(20% - 12px)}
	#entry_form #photos_wrapper li{width:calc(50% - 8px)}
}


/* ----- モバイル ----- */
@media screen and (max-width: 767px) {
	#entry_flow_wrapper p.ex{padding:20px 0 40px;font-size:1.3rem}

	.flow_items.roles{margin-bottom:40px}
	.flow_items.roles .col strong{height:50px;padding-top:18px;font-size:1.8rem}
	.flow_items.roles .col strong::after{top:calc(100% - 1px);height:10px}

	.flow_items.steps{justify-content:flex-end;padding-left:0;padding-right:0}
	.flow_items.steps.reverse{justify-content:flex-start;padding-left:0;padding-right:0}
	.flow_items.steps .col{width:75%;min-height:auto;padding:15px}
	.flow_items.steps .col .step{left:auto;right:2px}
	.flow_items.steps.reverse .col .step{right:auto;left:2px}
	.flow_items.steps .col .step .small{font-size:1.8rem}
	.flow_items.steps .col .step .large{font-size:2.2rem}
	.flow_items.steps .col .pic{margin-right:15px}
	.flow_items.steps .col .text{font-size:1.4rem}

	.entry_set{padding:20px 0}
	.entry_set .h2_block{padding-bottom:20px}
	.entry_set h2.has_border{font-size:1.6rem}
	.entry_set h3.has_number{padding:15px 0}
	.entry_set h3.has_number .en{width:40px;height:40px;font-size:1.6rem}
	.entry_set h3.has_number strong{font-size:1.4rem}
	.entry_set .accordion_target{padding:20px 0}
	.entry_set .paragraph{font-size:1.4rem}
	.entry_set .box{padding:15px}
	.entry_set .col2s{gap:15px}
	.entry_set .col2s .col{width:calc(50% - 8px)}
	#entry_form_detail .col2s .col{width:100%}

	#entry_form_wrapper{padding:20px 0}
	#entry_form .entry_form_inner{padding:20px 0}
	#entry_form .entry_form_inner.outline{padding:30px 0}
	#entry_form .entry_form_inner.outline h2{font-size:1.8rem}
	#entry_form .entry_form_inner.outline .has_corner_border{padding:20px}
	#entry_form h3.has_number_dark{padding:12px 15px}
	#entry_form h3.has_number_dark .en{font-size:1.6rem}
	#entry_form h3.has_number_dark .bold{font-size:1.4rem}
	#entry_form .form_item{flex-direction:column}
	#entry_form .form_item .label{width:100%;padding:0 0 10px}
	#entry_form .form_item .item{width:100%}
	#entry_form .form_item .item .input{min-width:100%}
	#entry_form .select_box_wrapper.multiple{min-width:100%}
	#entry_form .has_tire_info{flex-direction:column;gap:15px}
	#entry_form .example li{width:calc(33.333% - 10px)}
	#entry_form #photos_wrapper li{width:calc(50% - 8px)}
	#entry_form .form_items.confirms .form_item{padding:15px}
	#entry_form .entry_form_inner.confirms .form_item{flex-direction:column;align-items:flex-start}
	#entry_form .entry_form_inner.confirms .form_item .label{width:100%;min-width:100%;margin-bottom:10px}
	#entry_form .entry_form_inner.confirms .form_item .label .small,
	#entry_form .entry_form_inner.confirms .form_item .label .indent{margin-left:70px}
	#entry_form .entry_form_inner.confirms .form_item .item{margin-left:70px}
	#entry_form .form_buttons .btn_form{padding:15px;font-size:1.6rem}
	#entry_form .form_buttons .btn_border_arrow{width:auto;min-width:280px;box-sizing:border-box}
}