/*
Theme Name: Storefront Child
Template:     storefront
Author: Isamu Odagiri
Version: 20240304
*/

/* 日本語で綺麗に表示 */
body {
	position: relative;
	margin: 0;
	text-align: left;
	overflow-x: hidden;
	background: #ffffff;
	font-size: 16px;
	line-height: 2;
	color: #333333;
	font-family: 'Helvetica Neue', Helvetica, Arial, 'Yu Gothic', '游ゴシック Medium', sans-serif;
	font-weight: 500;
}
h1, h2, h3, h4, h5, h6 {
	font-family: inherit;
	line-height: 1.4;
	color: inherit;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 0.5rem;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.3rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1.1rem; }

/* 商品ページを下スクロールすると表示される「お買い物カゴに追加」ボタンを非表示 */
.storefront-sticky-add-to-cart {
    display: none !important;
}

/* カートページにおける「お買い物カゴに追加」ボタンを非表示 */
.woocommerce-cart .add_to_cart_button,
.woocommerce-cart .single_add_to_cart_button {
    display: none !important;
}

/* 提灯や団扇の文字サイズや色を調整 */
.custom-text-container {
    font-size: 20px; /* フォントサイズを大きく */
    color: darkred; /* 色を濃い青に */
}

.custom-text-container strong {
    font-size: 20px; /* フォントサイズを大きく */
    color: darkblue; /* `<strong>`タグ内のテキストも濃い赤に */
}

/* セレクトボックスを非表示にする */
.orderby {
    display: none;
}

/* 商品数表示を非表示にする */
.woocommerce-result-count {
    display: none;
}

/* ファイルアップロード関連のスタイリング */
#upload_custom_file {
    display: none; /* 最初は非表示にする */
    color: blue; /* ボタンの文字色を青にする */
    margin-left: 10px; /* ファイル名との間隔を設定 */
}

/* アップロードファイルの罫線 */
.thumbnail-border {
    border: 1px solid black; /* 1ピクセル幅の黒色の罫線 */
}

#copy_store_name_to_lantern_text.button {
    font-weight: normal; /* ボタンのテキストを通常の太さに */
    margin-bottom: 10px; /* ボタンの下に余白を設ける */
}

/* 商品ページのテーブルスタイル */
.product-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
}

.product-table th, .product-table td {
  border: 1px solid black;
  padding: 8px;
}

.product-table th {
  text-align: center;
  vertical-align: middle; /* 見出しセルのテキストを中央揃えに */
}

.product-table td {
  text-align: left;
  vertical-align: middle; /* 左列のセルのテキストを中央揃えに */
}

.product-table td.right-column {
  color: red;
  text-align: right; /* 右列のテキストを右揃えに設定 */
  vertical-align: bottom; /* 右列のテキストを下揃えに設定 */
}

/* フッターのリンク */
.footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.footer-links a {
    margin-right: 5px; /* リンクの右の余白を調整 */
    text-decoration: none; /* 下線を消す、必要に応じて */
    color: inherit; /* 親要素から色を継承 */
}

.footer-links a:last-child {
    margin-right: 0; /* 最後のリンクの余白を消す */
}

/* アコーディオンのタイトルスタイル */
.accordion-title {
  cursor: pointer; /* カーソルをポインターに設定 */
  display: flex; /* フレックスボックスを使用してアイテムを横に並べます */
  justify-content: space-between; /* 文字列とアイコンを両端に配置 */
  align-items: center; /* 中央揃えにする */
  font-size: 24px; /* h1 タグ相当のフォントサイズ */
  font-weight: bold; /* h1 通常の太字スタイル */
  border: none; /* 罫線を非表示にする */
  background: none; /* 背景を透明にする */
  width: 100%; /* 幅を100%に設定 */
  padding: 10px; /* 内側の余白を設定 */
}

/* アコーディオンが開いている時のタイトルスタイル */
.accordion-title.open {
  /* ここに開いた状態でのスタイルを追加 */
}

/* アコーディオンアイコンのスタイル */
.accordion-icon {
  color: #fff; /* テキスト色を白に設定 */
  background-color: #000; /* 背景色を黒に設定 */
  border-radius: 50%; /* 円形にする */
  width: 24px; /* 幅を設定 */
  height: 24px; /* 高さを設定 */
  display: flex; /* フレックスボックスを使用 */
  justify-content: center; /* 中央揃えにする */
  align-items: center; /* 中央揃えにする */
}

/* アコーディオンのコンテンツスタイル */
.accordion-content {
  display: none; /* 初期状態では非表示に設定 */
  padding: 10px; /* 内側の余白を設定 */
  border-top: none; /* 上部の罫線を非表示にする */
}

/* "アカウント詳細" に "ログイン↓こちら" を表示 */
li.account-details {
  position: relative; /* 補足情報の基準点となる位置 */
}

li.account-details a::after {
  content: "ログイン↓こちら"; /* 補足情報のテキストを変更 */
  color: yellow; /* 文字色を黄色に */
  background-color: green; /* 背景色を緑に */
  display: block;
  padding: 5px; /* 内側の余白 */
  border-radius: 4px; /* 角の丸み */
  position: absolute; /* 補足情報を絶対位置で配置 */
  left: 0; /* 左端からの位置 */
  bottom: 100%; /* 親要素の下端からの位置（メニュー項目の上に配置） */
  white-space: nowrap; /* 補足情報が折り返しないようにする */
  margin-bottom: -20px; /* メニュー項目と補足情報の間の距離を調整 */
}

/* "登録手順" に "使い方↓こちら" を表示 */
li.registration-steps {
  position: relative; /* 補足情報の基準点となる位置 */
}

li.registration-steps a::after {
  content: "使い方↓こちら"; /* 補足情報のテキストを変更 */
  color: #333333; /* 文字色を白に変更 */
  background-color: #ffafcc; /* 背景色を桜色に変更 */
  display: block;
  padding: 5px; /* 内側の余白 */
  border-radius: 4px; /* 角の丸み */
  position: absolute; /* 補足情報を絶対位置で配置 */
  left: 0; /* 左端からの位置 */
  bottom: 100%; /* 親要素の下端からの位置（メニュー項目の上に配置） */
  white-space: nowrap; /* 補足情報が折り返しないようにする */
  margin-bottom: -20px; /* メニュー項目と補足情報の間の距離を調整 */
}

/* アコーディオンスタイル */
.accordion-container {
    margin-bottom: 15px;
}

.accordion-title {
    cursor: pointer;
    padding: 10px 15px;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.accordion-title:hover {
    background-color: #ebebeb;
}

.accordion-icon {
    margin-right: 10px;
    font-weight: normal;
}

.accordion-content {
    display: none;
    padding: 15px;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    background-color: #ffffff;
}

/* 屋台出店情報のアコーディオン特別スタイル */
.accordion-title[data-target^="accordion-content-yatai"] {
    background-color: #fff0f5; /* 薄いピンク色 */
}

.accordion-title[data-target^="accordion-content-yatai"]:hover {
    background-color: #ffe4e1; /* より濃いピンク色 */
}

.accordion-content#accordion-content-yatai .woocommerce-form-row {
    margin-bottom: 15px;
}

.accordion-content#accordion-content-yatai label {
    display: block;
    margin-bottom: 5px;
}

.accordion-content#accordion-content-yatai input[type="text"],
.accordion-content#accordion-content-yatai input[type="tel"],
.accordion-content#accordion-content-yatai textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.accordion-content#accordion-content-yatai input[type="radio"] {
    margin-right: 5px;
}

/* カスタムフィールド共通スタイル */
.custom-fields-container .form-row {
    margin-bottom: 20px;
}
.custom-fields-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.custom-fields-container input[type="text"],
.custom-fields-container input[type="tel"],
.custom-fields-container textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.custom-fields-container .radio-group label {
    display: inline-block;
    margin-right: 15px;
    font-weight: normal;
}
.custom-fields-container .description {
    font-size: 0.9em;
    color: #666;
    margin-top: 2px; /* 上部マージンを減らして説明文を近づける */
    display: inline-block; /* インラインブロック要素として表示 */
}
/* 表示専用テキストのスタイル調整 */
.custom-fields-container .form-row p {
    margin-bottom: 2px; /* 下マージンを減らして説明文に近づける */
}
/* 会員種別表示用の特別スタイル */
.custom-fields-container .form-row p + .description {
    margin-left: 5px; /* 段落と説明文が横並びの場合の左マージン */
}

/* アカウントページ用スタイル */
/*
.custom-fields-account {
    max-width: 600px;
    margin: 0 auto;
}
*/

/* 商品ページ用スタイル */
.custom-fields-product {
    margin-bottom: 20px;
}

/* 管理画面用スタイル */
.custom-fields-admin {
    max-width: 800px;
}
.custom-fields-admin .form-row {
    display: flex;
    flex-wrap: wrap;
}
.custom-fields-admin .form-row label {
    flex: 0 0 200px;
}
.custom-fields-admin .form-row input,
.custom-fields-admin .form-row textarea {
    flex: 1;
}

/* 管理画面でのカスタムフィールドスタイル調整 */
.custom-fields-admin .form-field th {
    padding: 20px 10px 20px 0;
    width: 200px; /* または必要な幅 */
}

.custom-fields-admin .form-field td {
    padding: 15px 10px;
}

.custom-fields-admin .form-field input.regular-text,
.custom-fields-admin .form-field textarea.large-text {
    width: 25em;
}

.custom-fields-admin .form-field fieldset label {
    margin-right: 1em;
}

/* 管理画面でのカスタムフィールドスタイル調整 */
.custom-fields-admin .form-field input[type=email],
.custom-fields-admin .form-field input[type=number],
.custom-fields-admin .form-field input[type=password],
.custom-fields-admin .form-field input[type=search],
.custom-fields-admin .form-field input[type=tel],
.custom-fields-admin .form-field input[type=text],
.custom-fields-admin .form-field input[type=url],
.custom-fields-admin .form-field textarea {
    width: auto;  /* または特定の幅を指定: 例 width: 25em; */
    max-width: 100%;
}

/* regular-text クラスを持つ要素の幅を調整 */
.custom-fields-admin .form-field input.regular-text {
    width: 25em;
    max-width: 100%;
}

/* large-text クラスを持つテキストエリアの幅を調整 */
.custom-fields-admin .form-field textarea.large-text {
    width: 25em;
    max-width: 100%;
}