@charset "UTF-8";

/* ----------------------------------
 料金表・所要時間
---------------------------------- */

/* 対象エリア */
#page_pricelist #target_area_frame { margin: 40px 0;}
#page_pricelist #target_area_frame h2 {
	padding: 0 0 0 24px;
	margin: 0 0 20px;
	border: none;
	font-size: 20px;
	font-weight: 700;
  line-height: var(--line-height-low);
	color: var(--site-color-blue);
	background: transparent;
	display: flex;
	align-items: center;
  box-sizing: border-box;
  position: relative;
}
#page_pricelist #target_area_frame h2::before {
	content: '';
	width: 14px;
	display: block;
	background: linear-gradient(90deg, #19AAF1 0%, rgba(54, 225, 191, 0) 100%);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
#page_pricelist #target_area_frame #area_tab { border-radius: var(--radius-02) var(--radius-02) 0 0; display: flex; align-items: center; gap: 0 1px; overflow: hidden;}
#page_pricelist #target_area_frame #area_tab li {
	width: calc((100% - 1px * 6)/7);
  height: 56px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFF;
  cursor: pointer;
}
#page_pricelist #target_area_frame #area_tab li span { font-size: 16px; font-weight: 700;}
#page_pricelist #target_area_frame #area_tab li.is-open { background: var(--site-color-blue);}
#page_pricelist #target_area_frame #area_tab li.is-open span { color: #FFF;}
#page_pricelist #target_area_frame #area_tab li.is-disabled { cursor: auto;}
#page_pricelist #target_area_frame #area_tab li.is-disabled span { color: var(--site-color-grayout);}
#page_pricelist #target_area_frame .area-frame { padding: 16px; border-radius: 0 0 var(--radius-02) var(--radius-02); background: var(--site-color-grayout);}
#page_pricelist #target_area_frame .area-frame .area-head  { display: none;}
#page_pricelist #target_area_frame .area-frame .area-box   { display: none;}
#page_pricelist #target_area_frame .pref-box:first-of-type { border-radius: var(--radius-02) var(--radius-02) 0 0; overflow: hidden;}
#page_pricelist #target_area_frame .pref-box:last-of-type  { border-radius: 0 0 var(--radius-02) var(--radius-02); overflow: hidden;}
#page_pricelist #target_area_frame .pref-box + .pref-box   { border-top: var(--border-solid-list);}
#page_pricelist #target_area_frame .pref-box h3.pref-name  {
  min-height: 52px;
  padding: 5px 32px 5px 16px;
  font-size: 15px;
	color: var(--site-color-grayout);
  display: flex;
  align-items: center;
  background: #FFF;
  position: relative;
}
#page_pricelist #target_area_frame .pref-box:has(li) h3.pref-name { color: var(--site-color-black); cursor: pointer;}
#page_pricelist #target_area_frame .pref-box h3.pref-name::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: var(--site-color-lightsky) 2px solid;
  border-top: var(--site-color-lightsky) 2px solid;
  position: absolute;
  right: 25px;
  top: calc(50% - 7px);
  display: block;
  transform: rotate(135deg);
	transition: var(--transition);
}
#page_pricelist #target_area_frame .pref-box:has(li) h3.pref-name::after { border-right: var(--site-color-blue) 2px solid; border-top: var(--site-color-blue) 2px solid;}
#page_pricelist #target_area_frame .pref-box:has(li) h3.pref-name.is-open::after { top: calc(50% - 2px); transform: rotate(-45deg);}
#page_pricelist #target_area_frame .pref-box .area-list { display: none;}
#page_pricelist #target_area_frame .pref-box .area-list li { min-height: 46px; border-top: var(--border-solid-list); display: flex; align-items: stretch; background: var(--site-bg-dark);}
#page_pricelist #target_area_frame .pref-box .area-list li .pick {
  width: 280px;
	min-width: 280px;
	max-width: 280px;
	padding: 10px 20px;
	margin: 0;
  font-size: 16px;
	font-weight: 700;
	color: #FFF;
  display: flex;
  align-items: center;
  background: var(--site-color-deepblue);
}
#page_pricelist #target_area_frame .pref-box .area-list li .name { padding: 10px 20px; margin: auto 0; font-size: 16px;}

@media (max-width: 768px) {
	#page_pricelist #target_area_frame h2 { margin: 0 0 16px; font-size: 17px; color: var(--site-color-black);}
	#page_pricelist #target_area_frame #area_tab { display: none;}
	#page_pricelist #target_area_frame .area-frame { padding: 0; border-radius: var(--radius-02); background: transparent; overflow: hidden;}
	#page_pricelist #target_area_frame .area-frame .area-head {
	  height: 56px;
	  padding: 6px 38px 6px 16px;
	  border-top: var(--border-solid-list);
	  display: flex;
	  align-items: center;
	  cursor: pointer;
	  background: #FFF;
		position: relative;
	}
	#page_pricelist #target_area_frame .area-frame .area-head:not(.is-disabled)::before {
		content: '';
		width: 28px;
		height: 28px;
		border-radius: 28px;
		background: #FFF;
		position: absolute;
		top: calc(50% - 14px);
		right: 12px;
	}
	#page_pricelist #target_area_frame .area-frame .area-head:not(.is-disabled)::after {
		content: '';
		width: 6px;
		height: 6px;
		border-right: var(--site-color-blue) 2px solid;
		border-top: var(--site-color-blue) 2px solid;
		position: absolute;
		right: 22px;
		top: calc(50% - 6px);
		display: block;
		transform: rotate(135deg);
		transition: var(--transition);
	}
	#page_pricelist #target_area_frame .area-frame .area-head.is-open:not(.is-disabled)::before { background: var(--site-bg-blue);}
	#page_pricelist #target_area_frame .area-frame .area-head.is-open:not(.is-disabled)::after { transform: rotate(-45deg); top: calc(50% - 3px);}
	#page_pricelist #target_area_frame .area-frame .area-head:first-of-type { border-top: none;}
	#page_pricelist #target_area_frame .area-frame .area-head span { font-size: 16px; font-weight: 700;}
	#page_pricelist #target_area_frame .area-frame .area-head.is-disabled { cursor: auto;}
	#page_pricelist #target_area_frame .area-frame .area-head.is-disabled span { color: var(--site-color-grayout);}
	#page_pricelist #target_area_frame .area-frame .area-box { padding: 16px; border-radius: 0; background: var(--site-color-grayout);}
	#page_pricelist #target_area_frame .pref-box h3.pref-name::after {
		width: 6px;
		height: 6px;
		border-right: var(--site-color-lightsky) 1px solid;
		border-top: var(--site-color-lightsky) 1px solid;
		top: calc(50% - 6px);
		right: 22px;
	}
	#page_pricelist #target_area_frame .pref-box:has(li) h3.pref-name::after { border-right: var(--border-solid-blue); border-top: var(--border-solid-blue);}
	#page_pricelist #target_area_frame .pref-box .area-list li .pick { width: 100px; min-width: 100px; max-width: unset; padding: 10px 15px; font-size: 14px; box-sizing: border-box;}
	#page_pricelist #target_area_frame .pref-box .area-list li .name { width: calc(100% - 100px); padding: 10px 15px; font-size: 14px; box-sizing: border-box;}
}