/*
Theme Name:		Welcart Basic Child 20260903
Description:	Welcart Basic Child 20260903 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
*/

/* =Base
-------------------------------------------------------------- */
body {
	color: #262626;
	font-family: 'Noto Serif JP','M PLUS Rounded 1c','Kosugi Maru','新丸ゴ M','Shin Maru Go Medium','Hiragino Maru Gothic ProN','Hiragino Maru Gothic Pro','Yu Gothic','メイリオ', Meiryo,Helvetica, Arial, sans-serif;
	font-size: .875em;
	margin: 0;
	padding: 0;
	line-height: 150%;
	background-color: #fff;
	word-wrap: break-word;
}

/* -- input,select,textarea -- */
input,select,textarea {
	font-family: 'Noto Serif JP','M PLUS Rounded 1c','Kosugi Maru','新丸ゴ M','Shin Maru Go Medium','Hiragino Maru Gothic ProN','Hiragino Maru Gothic Pro','Yu Gothic','メイリオ', Meiryo, Helvetica, Arial, sans-serif;
    font-size: 1em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-border-radius: 0;  
	-moz-border-radius: 0;
	border-radius: 0;  
}

input[type="reset"] {
	font-family: 'Noto Serif JP','M PLUS Rounded 1c','Kosugi Maru','新丸ゴ M','Shin Maru Go Medium','Hiragino Maru Gothic ProN','Hiragino Maru Gothic Pro','Yu Gothic','メイリオ', Meiryo, Helvetica, Arial, sans-serif;
    padding: .714288em 1.42857em;
	background-color: #efefef;
	border: none;
	-webkit-transition: .3s ease all;
	-moz-transition: .3s ease all;
	-o-transition: .3s ease all;
	transition: .3s ease all;
	-webkit-border-radius: 3px;  
	-moz-border-radius: 3px;  
	border-radius: 3px;  
}

/* =header
-------------------------------------------------------------- */
.incart-btn span {
	font-family: 'Noto Serif JP','M PLUS Rounded 1c','Kosugi Maru','新丸ゴ M','Shin Maru Go Medium','Hiragino Maru Gothic ProN','Hiragino Maru Gothic Pro','Yu Gothic','メイリオ', Meiryo, Helvetica, Arial, sans-serif;
    display: none;
}

.incart-btn .total-quant {
	font-family: 'Noto Serif JP','M PLUS Rounded 1c','Kosugi Maru','新丸ゴ M','Shin Maru Go Medium','Hiragino Maru Gothic ProN','Hiragino Maru Gothic Pro','Yu Gothic','メイリオ', Meiryo, Helvetica, Arial, sans-serif;
    display: inline-block;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	min-width: 20px;
	max-width: 30px;
	height: 20px;
	color: #fff;
	background-color: #fba60d;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;	
	border-radius: 50%;
	text-align: center;
	vertical-align: text-bottom;
}

/*font関連はここまで*/

/* -- .site-title -- */
h1.site-title,
div.site-title {
	padding: 1em .6em 1em .4em;
	float: left;
	clear: none;
	font-size: 1.785712em;
	font-weight: bold;
	line-height: 1em;
	text-align: center;
}

h1.site-title a,
div.site-title a {
	color: #000;
}

h1.site-title img,
div.site-title img {
	width: 40%;
	height: auto;
}
/* スマホメニューの重なり順を最前面に設定 */
/* Welcart Basicのスマホナビゲーションを最前面へ固定 */
#site-navigation {
    /*position: relative !important;*/
    z-index: 999999 !important; /* Transition Sliderより大きな値にする */
}

/* ヘッダー全体、またはメニューの親要素ごと前面に出す場合 */
.site-header {
    /*position: relative !important;*/
    z-index: 999999 !important;
}


@media screen and (min-width: 62.5em) {
	/* -- .incart-btn -- */
	.incart-btn {
		min-width: 160px;
		margin-top: .714286em;
		float: right;
	}
	.incart-btn a {
		background-color: #ff8c00;
		padding: 6px .714286em;
		text-align: center;
		-webkit-transition: .3s ease all;
		-moz-transition: .3s ease all;
		-o-transition: .3s ease all;
		transition: .3s ease all;
	}
	.incart-btn a:hover {
		background-color: #ffa500;
	}
	.incart-btn i {
		padding: 0;
	}
	.incart-btn i:before {
		color: #fff;
		margin-right: 8px;
	}
	.incart-btn span {
		display: inline-block;
		color: #fff;
		font-size: 12px;
		font-weight: bold;
		vertical-align: middle;
		letter-spacing: 1px;
	}
	.incart-btn .total-quant {
		display: inline-block;
		position: relative;
		font-weight: bold;
		color: #fba60d;
		margin-left: 1.25em;
		background-color: #fff;
		text-align: center;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		vertical-align: text-bottom;
	}

	/* -- #site-navigation -- */
	#site-navigation {
		padding: 0;
		clear: both;
	}

	#site-navigation label {
		display: none;
	}

	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: #131313;*/
		background-color: #ccc;
	}

	#site-navigation ul {
		width: 1280px;
		margin: 0 auto;
		padding: 0;
	}

	#site-navigation li {
		position: relative;
		float: left;
	}

	#site-navigation li a {
		display: block;
		margin-bottom: 0;
		padding: 1em 1.42857em;
		border-bottom: none;
		color: #fff;
		line-height: 100%;
	}

	#site-navigation li {
		padding: 0;
		border-right: 0px solid #666;
	}

	#site-navigation ul li:first-child {
		border-left: 0px solid #666;
	}

	#site-navigation li.current_page_item a,
	#site-navigation li.current-menu-parent a {
		background-color: #565656;
	}

	#site-navigation li.current_page_item li a,
	#site-navigation li.current-menu-parent li a {
		background: none;
	}

	#site-navigation li a:hover {
		background-color: #565656;
		color: #fff;
		text-decoration: none;
	}

	/* -- sub-menu -- */
	#site-navigation ul ul {
		display: none;
		position: absolute;
		z-index: 99999;
		top: 42px;
		left: -2px;
		width: fit-content;
		float: left;
		border: 3px double #e0e0e0;
		background-color: #fff;
		white-space: nowrap;
	}

	#site-navigation ul li li {
		width: 100%;
		margin-left: 0;
		border: none;
	}

	#site-navigation ul li li:first-child {
		border: none;
	}

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

	#site-navigation li.current-menu-item > a,
	#site-navigation li.current-menu-ancestor > a {
		background-color: #565656;
	}

	#site-navigation li li.current-menu-ancestor > a,
	#site-navigation li li.current-menu-item > a {
		background-color: #f6f6f6;
	}

	#site-navigation ul ul ul {
		top: -3px;
		left: 100%;
	}

	#site-navigation li li:first-child a {
		border: none;
		color: #262626;
	}

	#site-navigation ul ul li a {
		width: 100%;
		height: auto;
		padding: .714286em .357143em;
		border: none;
		background-color: #fff;
		color: #262626;
		line-height: 1em;
	}

	#site-navigation ul ul :hover > a {
		background: none;
		background-color: #f6f6f6;
	}

	#site-navigation ul li:hover > ul {
		display: block;
	}

	#site-navigation * {
		-webkit-transition: .3s;
		-moz-transition: .3s;
		-ms-transition: .3s;
		-o-transition: .3s;
		transition: .3s;
	}

/*クールアクションここから*/
/********************************/
#site-navigation a::after {
  content: '';
  display: block;
  height: 2px;
  width: 100%;
  background-color: #B2B4FF;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scale(0, 1);
  transition: .7s;   
}

#site-navigation a:hover::after {
  transform: scale(1, 1);
}

/********************************/
/********************************/
	#site-navigation div.menu > ul > li:first-child > a,
	#site-navigation ul.menu > li:first-child > a {
		padding-left: 15px;
	}
	#site-navigation div.menu > ul > li:last-child > a,
	#site-navigation ul.menu > li:last-child > a {
		padding-right: 15px;
	}
	#site-navigation .current_page_item > a,
	#site-navigation .current-menu-item > a {
		color: #AFB5F7;
		font-weight: 700;
	}
/*クールアクションここまで*/

	/* =contetns
	-------------------------------------------------------------- */

	/* -- main -- */
	#main {
		width: 1280px;
		margin: 2.857143em auto;
		padding: 0;
	}

	.home #main {
		margin: 0 auto;
	}
	
/* メニューのリンク自体を縦並び（ブロック）にする */
#site-navigation .main-navigation ul li a {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃えにする場合。左寄せなら flex-start */
    justify-content: center;
    line-height: 1.4;
    padding: 10px 15px; /* 上下の余白は好みに合わせて調整 */
}

/* メニュー説明文のスタイル */
#site-navigation .menu-description {
    display: block;
	text-align: center;
    font-size: 0.75rem; /* 小さめの文字サイズ */
    color: #fff;        /* 薄めの文字色 */
    margin-top: 14px;    /* メニュー名との間の余白 */
    font-weight: normal;
}

/* PC・スマホ共通：ヘッダーを上部に固定 */
#masthead {
    position: -webkit-sticky; /* Safari用 */
    position: sticky;
    top: 0;
    z-index: 999999;
    background-color: #fff; /* 背景が透過してコンテンツと重なるのを防ぐ（必要に応じて変更） */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* スクロール時に見やすくするため、うっすら影をつける */
}

/* 管理画面にログインしている際、上部の黒いバー（管理バー）と重なるのを防ぐ */
.admin-bar #masthead {
    top: 32px;
}

/* スマホ閲覧時かつログイン時の管理バーの高さ調整（念のため） */
@media screen and (max-width: 782px) {
    .admin-bar #masthead {
        top: 46px;
    }
}

	/* =footer
	-------------------------------------------------------------- */

	footer {
		clear: both;
		background-color: #131313;
		color: #fff;
	}

	/* -- a -- */
	footer a {
		color: #fff;
	}

	/* -- nav -- */
	footer nav {
		width: 1280px;
		margin: 0 auto;
		padding: 2.142856em 0 2.857143em;
	}

	footer nav li {
		width: 18%;
		margin-bottom: 1.071428em;
		padding-right: 2.142856em;
		/*float: left;*/
        position: relative;
        float: left;
        text-align:center;
        list-style: none; 
	}

	footer nav li:nth-of-type(6n) {
		clear: both;
	}

	footer nav li li:nth-of-type(6n) {
		clear: none;
	}

/* フッターメニューナビを中央寄せにする */
.footer-navigation ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    float: none; /* 既存のfloatを解除 */
    padding: 0;
    list-style: none;
}

.footer-navigation li {
    float: none; /* 既存のfloatを解除 */
    margin: 0 10px; /* メニュー項目間の左右の間隔（お好みで調整） */
    margin-top: 14px;    /* メニュー名との間の余白 */
}


	/* -- .copyright -- */
	.copyright {
		padding: 1.071428em 0;
		text-align: center;
	}

/*フッターメニューナビに説明ディスリプションを表示する*/
.menu-desc {
    display: block;
    font-size: 0.85em;
    color: #aaa;
    margin-top: 2px;
}

/*フッターのクールアクションここから*/
/********************************/
.footer-navigation a::after {
  content: '';
  display: block;
  height: 2px;
  width: 100%;
  background-color: #B2B4FF;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scale(0, 1);
  transition: .7s;   
}

.footer-navigation a:hover::after {
  transform: scale(1, 1);
}

/********************************/
/********************************/
	.footer-navigation div.menu > ul > li:first-child > a,
	.footer-navigation ul.menu > li:first-child > a {
		padding-left: 15px;
	}
	.footer-navigation div.menu > ul > li:last-child > a,
	.footer-navigation ul.menu > li:last-child > a {
		padding-right: 15px;
	}
	.footer-navigation .current_page_item > a,
	.footer-navigation .current-menu-item > a {
		color: #AFB5F7;
		font-weight: 700;
	}
/*フッターのクールアクションここまで*/
/***************************************/
}

@media screen and (max-width: 62.4375em) {
    /* アカウントとカートの親要素を画面右下に固定 */
/* PC・スマホ共通：ヘッダーを上部に固定 */
#masthead {
    position: -webkit-sticky; /* Safari用 */
    position: sticky;
    top: 0;
    z-index: 999999;
    background-color: #fff; /* 背景が透過してコンテンツと重なるのを防ぐ（必要に応じて変更） */
/*    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* スクロール時に見やすくするため、うっすら影をつける */
}

/* 管理画面にログインしている際、上部の黒いバー（管理バー）と重なるのを防ぐ */
/*.admin-bar #masthead {
    top: 32px;
}*/

/* スマホ時のハンバーガーアイコンの色を変更 */
#site-navigation label span:before {
    color: #cccccc;/*color: #ff8c00; /* ←ここに好きなカラーコード（例: 赤）を指定 */
}

}