/*
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
*/
/* ============================================
   子テーマ カスタムスタイル
   ============================================ */

/* ★ サイト説明文：全幅・青帯の上（headerの一番上）に表示 */
.site-header .site-description {
    width: 100%;
    margin: 0;
    padding: .6em 1em;
    float: none;
    background: #0066cc; /* お好みの色に変更可 */
    color: #fff;
    font-size: .85714em;
    font-weight: bold;
    box-sizing: border-box;
	padding-left: 10%;
}

/* PC表示でも全幅を維持（親テーマの上書き） */
@media screen and (min-width: 62.5em) {
    .site-header .site-description {
        width: 100%;
        padding: .6em 1em;
        float: none;
        background: #0066cc;
        color: #fff;
        font-weight: bold;
		padding-left: 10%;
    }
}

/* 先にスマホ用（基本） */
h1.site-title img,
div.site-title img {
    max-width: 100%;
    height: auto;
}

/* 後にPC用（上書き） */
@media screen and (min-width: 62.5em) {
    h1.site-title img,
    div.site-title img {
        width: auto;
        max-width: 600px;
        height: auto;
    }
}

/* ★ ナビメニューをセンター表示 */
@media screen and (min-width: 62.5em) {
    #site-navigation ul.header-nav-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

@media screen and (min-width: 62.5em) {
    #site-navigation ul li a {
        display: flex;
        align-items: center;
		column-gap : 4px;
    }
}

/* ★ サイト説明文の下に余白追加 */
.site-header .site-description {
    margin-bottom: 1em; /* ナビメニューとの間と同程度の余白 */
}

/* ★ ヘッダー内部（ロゴ・検索・カートエリア）を全幅 + 左右10%余白 */
header .inner {
    width: 100%;
    max-width: 100%;
    padding-left: 10%;
    padding-right: 10%;
    box-sizing: border-box;
}

/* PC表示でも同様に適用（親テーマの width:1000px を上書き） */
@media screen and (min-width: 62.5em) {
    header .inner {
        width: 100%;
        max-width: 100%;
        padding-left: 10%;
        padding-right: 10%;
        box-sizing: border-box;
    }
}

/* ★ サイト説明文の高さ・フォントサイズ変更 */
.site-header .site-description {
    padding-top: 1em;
    padding-bottom: 1em;
    font-size: 14px;
}


@media screen and (min-width: 62.5em) {
    h1.site-title, div.site-title {
        padding: 0.7em 0 .5em;
	}
}	
	@media screen and (min-width: 62.5em) {
  .main-image img {
    width: 100%;
    max-width: none;
  }
}
	
	/* 全幅テンプレート専用 */
.page-template-page-fullwidth .wrap,
.page-template-page-fullwidth #primary,
.page-template-page-fullwidth #main {
    width: 100%;
    max-width: 100%;
}

.page-template-page-fullwidth .wrap {
    margin: 0;
}
	
.page-template-page-fullwidth .fullwidth-image {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.page-template-page-fullwidth .fullwidth-image img {
    width: 100%;
}

.page-template-page-fullwidth #content .entry-title,
.page-template-page-fullwidth #content .page-title {
    display: none;
}


@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 {
        background-color: #fff;
    }

    /* 文字色をグレーに */
    #site-navigation li a {
        color: #666666;
    }

    #site-navigation li a:hover {
        color: #333333;
    }

    /* 区切りラインを青・少し太く */
    #site-navigation li {
        border-right: 3px solid #1a6fc4;
    }

#site-navigation li:first-child {
    border-left: 3px solid #1a6fc4 !important;
    }
}
/* ★ ナビメニュー ホバー・選択時 */
@media screen and (min-width: 62.5em) {
    #site-navigation li a:hover,
    #site-navigation li.current-menu-item > a,
    #site-navigation li.current_page_item > a {
        background-color: #1a6fc4;
        color: #fff;
    }
}

/* ★ フロントページ 商品一覧の左右余白 */
.front-il {
    padding-left: 10%!important;
    padding-right: 10%!important;
    box-sizing: border-box;
}

/* ★ フロントページ ウィジェット欄の左右余白 */
@media screen and (min-width: 62.5em) {
    .one-column #secondary {
        padding-left: 10%;
        padding-right: 10%;
        box-sizing: border-box;
    }
}

/* ★ フッターメニュー 背景色変更・センター揃え */
footer {
    background-color: #0066CC;
}

@media screen and (min-width: 62.5em) {
    footer {
        background-color: #0066CC;
    }
}

/* ★ フッターメニュー SVGアイコンとテキストの縦揃え */
footer nav li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ★ 中・右統合エリアのレイアウト */
@media screen and (min-width: 62.5em) {
    .one-column #secondary .columnright-wide {
        width: calc(100% - 290px); /* 左カラム240px + margin50px */
        float: right;
    }
}