/*
商品詳細ページ用スタイルシート
UTF8
*/

/*//////////////////////////////////////////////////////////*/
/*価格　　　　                            　*/
/*//////////////////////////////////////////////////////////*/
.wapf-price-tilde {
	display: inline-block;
	font-size: inherit;
	color: inherit;
	margin-left: 0.3em;
}

.wapf--inner span.price {
	color: var(--color-text) !important;}

.wapf--inner div {
	display: block;
	color: var(--color-main-dark) !important;
	border-top: 1px dotted  var(--color-border);
	padding-top: 0.5em;}

.wapf--inner div:first-child {
	display: block;
	color: var(--color-main-dark) !important;
	border-top: 1px solid  var(--color-border);}

.wapf--inner div:last-child {
	display: block;
	color: var(--color-main-dark) !important;
	border-bottom: 1px solid  var(--color-border);
	padding-bottom: 1em !important;}

/*//////////////////////////////////////////////////////////*/
/*プラン概要　　　　　　　　　                            　*/
/*//////////////////////////////////////////////////////////*/

#content #primary table#plan_summary{
	width:100%;
	border-spacing: 6px;
	margin-bottom:20px;
	font-size:16px;}

#content #primary table#plan_summary th{
	padding: 6px 12px !important;
	background: var(--color-main) !important;
	width:28%;
	font-weight:bold;
	white-space:nowrap;
	border-radius: 10px;
	color:#fff;
	border-style:none !important;}

#content #primary table#plan_summary td{
	background: var(--color-main-dark) !important;
	padding: 6px 12px !important;
	border-radius: 10px;
	color:#fff;
	border-style:none !important;}

@media (max-width: 768px) {
#content #primary table#plan_summary{}

#content #primary table#plan_summary th{
	padding: 8px 12px !important;
	width: 100% !important;
	box-sizing: border-box;
	display: block;
	max-width: 100%;     /* 追加 */
	overflow: hidden;    /* 追加: テキストのはみ出し防止 */
	border-top-style:none !important;
	margin-bottom: 5px;
}

#content #primary table#plan_summary td{
	padding: 8px 12px !important;
	width: 100% !important;
	box-sizing: border-box;
	display: block;
	max-width: 100%;     /* 追加 */
	overflow: hidden;    /* 追加: テキストのはみ出し防止 */
	border-top-style:none !important;}
}

.product-headline{
	margin-top: 30px !important;}

.precautions{
	font-size: 0.8em !important;
	margin: 30px 0!important;
	background: var(--color-surface) !important;
	padding: 20px !important;
	border-radius: 10px;}

/*//////////////////////////////////////////////////////////*/
/* タブ */
/*//////////////////////////////////////////////////////////*/
.woocommerce div.product .wc-tabs{
	border-top:1px solid var(--color-border) !important;
}

.woocommerce .wc-tabs li,
.woocommerce #content .wc-tabs li {
	border-bottom:1px solid var(--color-border) !important;
}

.woocommerce .wc-tabs li.active,
.woocommerce #content .wc-tabs li.active ,
.woocommerce .wc-tabs li.active a,
.woocommerce #content .wc-tabs li.active a {
	background: var(--color-main)  !important;
	color: #fff !important;
	border-radius: 10px;
	padding: 9px 22px !important;
}

.woocommerce .wc-tabs li.active,
.woocommerce #content .wc-tabs li.active {
	margin-top: 10px;}

@media (max-width: 768px) {
.woocommerce .wc-tabs li.active,
.woocommerce #content .wc-tabs li.active ,
.woocommerce .wc-tabs li.active a,
.woocommerce #content .wc-tabs li.active a {
	background: var(--color-main)  !important;
	color: #fff !important;
	border-radius: 10px;
}

.woocommerce .wc-tabs li.active:after,
.woocommerce #content .wc-tabs li.active:after { right: 28px !important; }
}

/* テーマの entry-content 見出し指定より強くする */
.woocommerce div.product .woocommerce-tabs .wc-tab.entry-content > h2{
  font-size: 1.4em !important;
}

.woocommerce-tabs .woocommerce-Tabs-panel h3{
	font-size: 1.2em;
	background:var(--color-border) !important;
	color: var(--color-main-dark) !important;
	padding: 0.3em 1em !important;
	margin: 0.3em 0 1.5em 0 !important;
	border-radius: 10px;}

/*//////////////////////////////////////////////////////////*/
/* キャンセルチャージ */
/*//////////////////////////////////////////////////////////*/
ul#cancellation_charge{
	margin: 1em 0 !important;
	padding: 0 !important;
	border-top:1px dotted var(--color-main-dark);}

ul#cancellation_charge li{
	list-style: none !important;
	margin: 0.3em 0 !important;
	padding: 0 0 0.3em 0 !important;
	border-bottom:1px dotted var(--color-main-dark); }

ul#cancellation_charge li span{
	display: inline-block !important;
	width: 15em;
	margin-right: 2em;}

@media (max-width: 768px) {
ul#cancellation_charge li span{
	display: block !important;
	width: auto;
	margin: 0;
	font-weight: bold;}}

.domain_permission {
	background: var(--color-surface);
	padding: 1em !important;
	border-radius: 10px;}

/*//////////////////////////////////////////////////////////*/
/* こんな人におススメ */
/*//////////////////////////////////////////////////////////*/
#recommended-for{
	margin-top: 12px;}

#recommended-for ul{
	margin: 0;
	padding: 0;}

#recommended-for ul li{
	font-size: 1.2em;
	list-style: none;
	margin: 0;
	padding:0.2em 0 !important;
	color: var(--color-main-dark) !important;}

#recommended-for ul li:before{
	display: inline-block !important;
	content:"●";
	color: var(--color-main-dark) !important;
	margin: 0 0.3em 0 0;}

/*//////////////////////////////////////////////////////////*/
/* ドロップダウン（商品オプション用）を全体的にカスタマイズ */
/*//////////////////////////////////////////////////////////*/
select#pa_itinerary,
.variations select[name="attribute_pa_itinerary"] {
	width: 220px;
	padding: 10px 36px 10px 12px;
	font-size: 1em;
	border: 1px solid var(--color-border) !important;
	background: var(--color-light-bg);
	border-radius: 5px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="gray" viewBox="0 0 18 18"><path d="M4 7l5 5 5-5" stroke="gray" stroke-width="2" fill="none" stroke-linecap="round"/></svg>')
        no-repeat right 0.8em center/1.1em auto;
	box-sizing: border-box;
    /* 「width」「padding」等はお好みで調整 */
}
select#pa_itinerary:focus {
	border: 1px solid var(--color-border) !important;
	background: var(--color-light-bg);
}

/* クリアボタン調整 */
a.reset_variations {
    margin-left: 12px;
    color: #0a71c5;
    text-decoration: underline;
    font-size: 0.99em;
    transition: color .2s;
}
a.reset_variations:hover {
    color: #e00;
}

/* 幅いっぱいにしたい場合 */
select#pa_itinerary {
    width: 100%;
    min-width: 100%;
}

/* モバイルでフォント大＆少し大きめpadding */
@media (max-width: 768px) {
    select#pa_itinerary {
        font-size: 1.15em;
        padding: 12px 40px 12px 12px;
    }
}

/*//////////////////////////////////////////////////////////*/
/* タイムテーブル */
/*//////////////////////////////////////////////////////////*/
/* タイムテーブル全体 */
.woocommerce-Tabs-panel .woocommerce-timetable-table {
    width: 100%;
    border-spacing: 10px;
    margin-top: 12px;
    margin-bottom: 20px;
    font-size: 1em;
}

/* 明細行 */
.woocommerce-Tabs-panel .woocommerce-timetable-table td {
	padding: 9px 22px;
	background: var(--color-main-dark);
	color:#fff;
	vertical-align: top;
	border-radius: 10px;
}

/* 交互（偶数行）にほんのり色を */
.woocommerce-Tabs-panel .woocommerce-timetable-table tr:nth-child(even) td {
	background: var(--color-surface);
	color: var(--color-text);
	border-radius: 10px;
}

/* 時間列を少しコンパクトに */
.woocommerce-Tabs-panel .woocommerce-timetable-table td:first-child,
.woocommerce-Tabs-panel .woocommerce-timetable-table th:first-child {
	width: 120px;
	text-align: center;
	font-family: "Roboto Mono", "Menlo", "Consolas", monospace;
	font-size: 1.02em;
	background: var(--color-main);
	letter-spacing: 0.01em;
	color: #fff;
}

@media (max-width: 768px) {
.woocommerce-Tabs-panel .woocommerce-timetable-table {
	border-top:1px solid var(--color-border);}

.woocommerce-Tabs-panel .woocommerce-timetable-table th{
	padding: 8px 12px !important;
	width: 100% !important;
	box-sizing: border-box;
	display: block;
	max-width: 100%;     /* 追加 */
	overflow: hidden;    /* 追加: テキストのはみ出し防止 */
	text-align: left !important;
	border-top-style:none !important;
	border-color: var(--color-border) !important;
}

.woocommerce-Tabs-panel .woocommerce-timetable-table td{
	padding: 8px 12px !important;
	width: 100% !important;
	box-sizing: border-box;
	display: block;
	max-width: 100%;     /* 追加 */
	overflow: hidden;    /* 追加: テキストのはみ出し防止 */
	border-top-style:none !important;
	text-align: left !important;
	border-color: var(--color-border) !important;
	margin-bottom: 5px !important;}
}

form.cart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
form.cart .quantity {
  margin-bottom: 18px;
}
form.cart .single_add_to_cart_button {
  width: 100%;
  margin: 0;
  display: block;
}

.quantity {
  position: relative;
  display: inline-block;
}

.quantity {
  position: relative;
  display: inline-block;
}

.quantity::after {
  content: "人";
  position: absolute;
  right: -28px;        /* 必要に応じて調整 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1em;
  color: #888;
  pointer-events: none;
}

button.single_add_to_cart_button.button.alt,
button.single_add_to_cart_button.button.alt *,
.single_add_to_cart_button.button.alt,
.single_add_to_cart_button.button.alt *,
.single_add_to_cart_button,
.single_add_to_cart_button * {
  background: #FFD600;
  color: #000 !important;
  font-weight: bold !important;
  -webkit-text-fill-color: #000 !important; /* Safari対策 */
text-shadow: none !important;             /* 薄グレー重ね線潰し */
  opacity: 1 !important;                    /* もしグレーがdisabled由来なら */
  font-size: 1.35em;            /* 文字サイズを大きく */
  padding: 1.1em 2.5em;         /* 上下・左右に広めの余白 */
  min-width: 320px;             /* 幅を広く確保（自動で可変） */
  border-radius: 14px;          /* 角丸もしっかり */
  box-shadow: 0 3px 18px rgba(222,173,12,0.10); /* 少し影もつけると◎ */
  display: block;               /* 必要なら幅いっぱいに（横並びならinline-block推奨） */
  margin: 32px auto !important;            /* 上下適度なスペース、中央寄せ */
  box-shadow: 0 1.5px 6px rgba(222,173,12,0.11);
  transition: 
    transform 0.18s cubic-bezier(.32,2,.55,.27), 
    box-shadow 0.18s,
    background 0.2s;
  animation: pulse 1.6s infinite;
}

button.single_add_to_cart_button.button.alt:hover,
button.single_add_to_cart_button.button.alt:focus,
.single_add_to_cart_button.button.alt:hover,
.single_add_to_cart_button.button.alt:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
  background: #d43900 !important;
  border-color: #d43900 !important;
  transform: scale(1.08) translateY(-3px);
  animation: none !important; /* パルス止め */
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(222,173,12, .13); }
  70% { box-shadow: 0 0 0 15px rgba(222,173,12, 0); }
  100% { box-shadow: 0 0 0 0 rgba(222,173,12, 0); }
}