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

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

/* ----- 共通スタイル ----- */
.has_bg_border_standard{background-color:#f5f5f5}
.has_bg_border_top{border-top:1px solid #ddd}
.has_corner_border{border:1px solid #ddd;background-color:#fff;padding:30px}
.color_red{color:#B51F1F}
.paragraph{line-height:1.8;font-size:1.5rem}

h2.has_border{margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #42A548;font-size:2rem;text-align:center}
h2.has_border span{display:block}
h2.has_left_border{margin-bottom:20px;padding-left:15px;border-left:4px solid #42A548;font-size:1.8rem}
#entry_trip_outline h2.has_left_border::before{content:none!important}

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

/* アウトライン */
#entry_trip_outline{padding-top:60px}
#entry_trip_outline .areas,#entry_trip_outline .areas .paragraph~.paragraph strong{padding-top:30px}
#entry_trip_outline .wrapper{padding-bottom:40px;margin-bottom:30px}
#entry_trip_outline .wrapper+.wrapper{padding-bottom:10px;margin-bottom:0}
#entry_trip_outline .col2s{display:flex;justify-content:space-between;gap:30px}
#entry_trip_outline .col2s .col{width:calc(50% - 15px)}
#entry_trip_outline .col2s strong{margin-bottom:5px;display:block;line-height:1.7;font-size:1.8rem}
#entry_trip_outline .col2s .col img{width:100%}
#entry_trip_outline .areas .paragraph{padding-bottom:30px}
#entry_trip_outline .areas .paragraph strong{margin-bottom:5px;display:block}

/* フロー（purchase-deliveryと同じスタイル） */
#entry_trip_flow .wrapper{padding:60px 30px 90px}
#entry_trip_flow .flow_items{display:flex;justify-content:space-between;flex-direction:row;gap:40px}
#entry_trip_flow .flow_items .col{width:calc(50% - 20px)}
#entry_trip_flow .flow_items.roles{margin-bottom:80px}
#entry_trip_flow .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}
#entry_trip_flow .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%)}
#entry_trip_flow .flow_items.roles .col:nth-child(2n+1) strong{background-color:#20484A}
#entry_trip_flow .flow_items.roles .col:nth-child(2n+1) strong::after{background-color:#20484A}
#entry_trip_flow .flow_items.roles .col:nth-child(2n) strong{background-color:#C49F45}
#entry_trip_flow .flow_items.roles .col:nth-child(2n) strong::after{background-color:#C49F45}

#entry_trip_flow .flow_items.steps{justify-content:flex-end;padding-left:calc(50% + 20px);margin-bottom:50px}
#entry_trip_flow .flow_items.steps.reverse{justify-content:flex-start;padding-left:0;padding-right:calc(50% + 20px)}
#entry_trip_flow .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}
#entry_trip_flow .flow_items.steps.reverse .col{background-color:#E5DECC}
#entry_trip_flow .flow_items.steps .col .step{position:absolute;bottom:100%;right:2px}
#entry_trip_flow .flow_items.steps.reverse .col .step{right:auto;left:2px}
#entry_trip_flow .flow_items.steps .col .step .small{font-size:2.4rem}
#entry_trip_flow .flow_items.steps .col .step .large{margin-left:5px;font-size:3rem}
#entry_trip_flow .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}
#entry_trip_flow .flow_items.steps .col .text{line-height:1.7;font-size:1.8rem}
#entry_trip_flow .flow_items.steps .col .text .medium{font-weight:500}
#entry_trip_flow .flow_items.steps.has_bg_border_top{border-top:none}

/* お問い合わせ */
#entry_trip_inquiry .wrapper{padding:60px 30px 110px}
#entry_trip_inquiry .ex{margin-bottom:30px;text-align:center}
#entry_trip_inquiry .tel_only{max-width:500px;margin:0 auto;padding:30px;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;background-color:#fff;border:3px solid #000}
#entry_trip_inquiry .tel_only a{line-height:70px;color:#42A548;text-decoration:none;font-size:4.4rem}
#entry_trip_inquiry .tel_only p{margin-top:10px}


/* ----- タブレット ----- */
@media screen and (max-width: 1024px) {
	#entry_trip_outline{padding-top:50px}
	#entry_trip_outline .wrapper{padding-bottom:50px}
	#entry_trip_outline .wrapper+.wrapper{padding-bottom:0}
	#entry_trip_flow .wrapper,#entry_trip_inquiry .wrapper{padding:50px 20px}
	#entry_trip_inquiry .tel_only a{font-size:3.2rem}
}


/* ----- モバイル ----- */
@media screen and (max-width: 767px) {
	.has_corner_border{padding:20px 15px}
	h2.has_border{font-size:1.6rem}
	h2.has_left_border{font-size:1.5rem}

	#entry_trip_outline .col2s{flex-direction:column;gap:20px}
	#entry_trip_outline .col2s .col{width:100%}

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

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

	#entry_trip_inquiry .tel_only{padding:20px}
	#entry_trip_inquiry .tel_only a{font-size:2.8rem}
}