/*
Theme Name:		Welcart Basic Child
Description:	Welcart Basic Child is child theme for Welcart Basic.
Author:			WElcart Inc.
Author URI:		https://www.welcart.com/
Template:		welcart_basic
Version:		1.0.0
License:		GNU General Public License v2 or later
License URI:	http://www.gnu.org/licenses/gpl-2.0.html
Tags:			responsive-layout, basic-child, two-columns, right-sidebar. left-sidebar
*/

/* --------------------------------------------------
サイトタイトルを画像に置き換えるためのCSS 
-------------------------------------------------- */

.site-title {
    /* サイトタイトルテキストを非表示にする */
    text-indent: -9999px; /* テキストを画面外に飛ばす */
    overflow: hidden; /* はみ出したテキストを隠す */
    /* widthとheightの固定値を削除し、子要素の画像でサイズを調整 */
    display: block; /* aタグの領域をブロック要素にする */
    /* 必要であれば、ここに最大幅などを設定できます (例: max-width: 550px;) */
}

.site-logo-image {
    max-width: 100%; /* 親要素に合わせて画像を最大幅にする */
    height: auto; /* 比率を保つ */
    display: block; /* imgタグもブロック要素にする */
}

/* スクリーンリーダー用のテキストを完全に非表示にする（視覚的には） */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* レスポンシブ対応：ロゴ画像の最大幅を調整 */
@media screen and (max-width: 768px) {
  .site-title {
    /* 必要に応じて、より小さな固定幅または最大幅を設定 */
    max-width: 300px; /* 例：最大幅を300pxに設定 */
    height: auto; /* 高さは自動調整 */
  }

  .site-logo-image {
    max-width: 100%; /* 親要素の幅に合わせる */
    height: auto;
  }
}

/* さらに小さい画面向け */
@media screen and (max-width: 480px) {
  .site-title {
    max-width: 200px; /* 例：さらに小さい画面での最大幅 */
  }
}


/* --------------------------------------------------
  サイトキャッチコピー カスタマイズ
-------------------------------------------------- */
@media (max-width: 999px) {
    .site-description {
        background: #ffa500; /* Orange*/
    }
}




/* --------------------------------------------------
  トップナビゲーション カスタマイズ
-------------------------------------------------- */
@media screen and (min-width: 62.5em) {
    header #site-navigation input#panel.on-off + div.nav-menu-open,
	header #site-navigation input#panel.on-off:checked + div.nav-menu-open,
	header #site-navigation input#panel.on-off + div.header-nav-container {
		display: block;
		height: auto;
		overflow: inherit;
		background-color: #ffa500; /* Orange */
    }

    /* マウスオーバー時 */
    #site-navigation li a:hover {
		background-color: #fff;
		color: #ffa500;
		text-decoration: none;
    }

    /* 各メニューの区切り線を消す */
    #site-navigation li {
		padding: 0;
		border-right: 0;
    }
    #site-navigation ul li:first-child {
		border-left: 0;
    }

    /* 現在開いているページをマウスオーバーと同じにする */
    #site-navigation li.current_page_item a,
    #site-navigation li.current-menu-parent a {
		background-color: #fff;
		color: #ffa500;
    }
    #site-navigation li.current-menu-item > a,
    #site-navigation li.current-menu-ancestor > a {
		background-color: #fff;
		color: #ffa500;
    }

}


/* --------------------------------------------------
  フッター カスタマイズ
-------------------------------------------------- */

footer {
    background: linear-gradient(to bottom, #ffa500 50%, #32cd32); /* グラデーション Orange -> limegreen  */
    color: #fff;
    padding: 0px 20px;
}





/* --------------------------------------------------
  お買い物ガイド ページ専用CSS
-------------------------------------------------- */

/* 全体コンテナ */
.shop-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.8;
    font-size: 14px; /* ベース文字サイズを14pxに統一 */
}

/* 各セクション */
.shop-page section {
    margin-bottom: 40px;
}

/* 見出し */
.shop-title {
    font-size: 24px;
    font-weight: bold;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* テーブル共通 */
.shop-page table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px; 
}
.shop-page table th,
.shop-page table td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
}
.shop-page table th {
    width: 30%;
    background-color: #f7f7f7;
    font-weight: bold;
}
.shop-page table td {
    width: 70%;
}

/* 送料の料金表 */
#shipping-fee table {
    /* PC表示時の列幅を均等に */
    table-layout: fixed;
}
#shipping-fee table th,
#shipping-fee table td {
    width: auto;
    text-align: center;
}
#shipping-fee table tr td:first-child,
#shipping-fee table tr th:first-child {
    text-align: left;
}

/* 箇条書きリスト */
.text-block ul,
.text-block ol {
    margin-top: 15px;
    padding-left: 20px;
}
.text-block ul li,
.text-block ol li {
    margin-bottom: 10px;
}

/* 送料の注釈 */
.tax-note {
    font-size: 12px;
    color: #888;
    text-align: right;
    margin: 10px 0;
}

/* お問い合わせフォーム ボタン化 */
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ffa500; /* ボタンの色（オレンジ色） */
  color: #fff; /* 文字色 */
  text-align: center;
  text-decoration: none;
  border: #ffa500 2px solid;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.btn:hover {
  color: #ffa500;
  background-color: #FFF; /* ホバー時の色 */
  border: #ffa500 2px solid;
  border-radius: 5px;
}





/* レスポンシブ対応 */
@media (max-width: 768px) {
    .shop-title {
        font-size: 20px;
    }
    
    /* レスポンシブ時のテーブル表示を修正 */
    .shop-page table th,
    .shop-page table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .shop-page table th {
        background-color: #f7f7f7;
    }
    .shop-page table td {
        text-align: left;
    }
    
    /* 特定商取引法のテーブル見出しの調整 */
    .shop-page #tokutei table th {
        border-bottom: none;
    }
    .shop-page #tokutei table tr:last-child th {
        border-bottom: 1px solid #ddd;
    }
    
    /* 送料の料金表のレスポンシブ対応を運用効率重視で修正 */
    #shipping-fee table thead {
        display: none; /* PC用の列タイトルを非表示 */
    }
    #shipping-fee table tbody,
    #shipping-fee table tr {
        display: block;
        width: 100%;
    }
    #shipping-fee table tr {
        margin-bottom: 20px;
        border: 1px solid #ddd;
    }
    #shipping-fee table td {
        position: relative;
        padding-left: 50%;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    #shipping-fee table td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 12px;
        font-weight: bold;
        white-space: nowrap;
        box-sizing: border-box;
    }
    #shipping-fee table tr td:last-child {
        border-bottom: none;
    }
}