/*
 Theme Name:   Satoyama Gifu
 Template:     storefront
*/

/* =Base
-------------------------------------------------------------- */
/* 1. まず変数にテーマカラーをセット */
:root {

	--color-primary-color : #3A6F7A;    /* ページ全体の背景 */
	--color-bg        : #FFFFFB;    /* ページ全体の背景 */
	--color-light-bg  : #FFFFFF;    /* 背景より明るい背景 */
	--color-surface   : #E4E0D8;    /* カード/パネル系背景・交互テーブル等 */
	--color-footer-bg : #D4DDDE;    /* footerの背景色 */
	--color-main      : #b75701;    /* 主アクセント（ボタン・リンク等） */
	--color-main-dark : #9C7626;    /* アクセントの濃い色 */
	--color-sub       : #ffb700;    /* 補助アクセント（ポイントや値段強調等） */
	--color-border    : #e2e0cb;    /* 枠線色 */
	--color-text      : #2c2700;    /* メイン文字 */
	--color-text-sub  : #564d01;    /* サブテキスト */
	--color-muted     : #474323;    /* 補足/サブテキスト色 */
	--color-info      : #D8A84E;    /* お知らせ */
	--color-info-hvoer: #4F8894;    /* リンクhover */
	--color-danger    : #df4128;    /* 通知やエラー系 */
	--color-transparent: transparent;   /* 背景を透明に */
}

/* 2. 全体背景と文字色 */
body {
	background: var(--color-bg);
	color: var(--color-text);
	font-size: 17px;
	line-height: 1.65;
	font-family:
	  "Rounded Mplus 1c",
	  "Hiragino Maru Gothic Pro",
	  "ヒラギノ丸ゴ Pro W4",
	  "Noto Sans JP",
	  "Meiryo",
	  "MS PGothic",
	  sans-serif;
}

/* 3. リンクとボタンの色 */
.woocommerce button.button {
	color: var(--color-main-dark);
	text-decoration: none;
	transition: color .18s;
}

a:hover .woocommerce button.button:hover {
  color: var(--color-main-dark);
}

a {color:var(--color-primary-color);}


.woocommerce button.button,
input[type="submit"], .button,
#primary #main .product a.button.add_to_cart_button{
  background: var(--color-info);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 0.7em 1.5em;
  font-size: 1em;
  cursor: pointer;
  transition: background .18s;
}
.woocommerce button.button:hover,
input[type="submit"]:hover, .button:hover,
#primary #main .product a.button.add_to_cart_button:hover{
  color: #fff;
  background: var(--color-info-hvoer);
}

.wcde-plan-inquiry-button {
	display: inline-block !important;
	background: #2f6f6f !important;
	color: #fff !important;
	border-radius: 5px;
	padding: 0.7em 1.5em;
	font-size: 1em;
	text-align: center !important;
	text-decoration: none !important;
	width: 100%;
	box-sizing: border-box;
	transition: background .18s;e;
	margin-top: 1em !important;
	}

	.wcde-plan-inquiry-button:hover,
	.wcde-plan-inquiry-button:focus {
		background: #245858 !important;
		color: #fff !important;
	}

/* 4. テーブルやボーダー系 */
table, th, td {
  border-color: var(--color-border);
}
hr {
  border-top: 1.5px solid var(--color-border);
}
.woocommerce-timetable-table th {
  background: #eaf6ff;
  color: var(--color-main-dark);
}

/* 5. 補助やサブテキスト色 */
small, .muted, .note, .woocommerce-info {
  color: var(--color-muted) !important;
}

/* 7. セクション見出し・強い色 */
h1, h2, h3, h4 {
	font-weight:normal !important;
	font-family: "Shuei NijimiMGo B", "Rounded M+ 1c", sans-serif !important;
	color: var(--color-text) !important;
}
.section-accent {
  background: var(--color-main);
  color: #fff;
  padding: 1em;
  border-radius: 7px;
  margin-bottom: 1em;
}

/* 8. 補助アクセント例 */
.price, .highlight {
  color: var(--color-sub);
  font-weight: 600;
}

/* 9. エラーや注意系 */
.error, .woocommerce-error {
  color: #fff !important;
  background: var(--color-danger);
  border: none !important;
  padding: 0.8em;
  border-radius: 4px;
}


/* 商品詳細ページを1カラムに */
#primary {
	width: 100%;
	float: none;
	background: var(--color-bg);
}

#primary #main{
	padding:0 !important;
	margin:0 !important;
	background: var(color-transparent);
}

/* サムネイルを5列に（新ギャラリー形式対応） */
.woocommerce-product-gallery--columns-4 ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
}

.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li {
    width: 20% !important;
    flex: 0 0 20% !important;
    box-sizing: border-box !important;
    padding: 2px !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 日付入力のカレンダーアイコンを非表示 */
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none !important;
}

input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
}

/* パンくずリストの上下余白を削除 */
.woocommerce-breadcrumb {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.storefront-breadcrumb {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.storefront-breadcrumb .col-full {
    margin-bottom: 2rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* =Link
-------------------------------------------------------------- */
a:link,
a:visited {
	text-decoration:none;
	border-style:none;}

a:hover,
a:active {opacity: 0.7;
	border-style:none;}

a, a:focus, a:hover, a:active, a:visited {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
} 

#main.site-main{
	background: transparent;
}

.handheld-navigation,
.storefront-handheld-footer-bar {
  display: none !important;
}

/* =Header
-------------------------------------------------------------- */
header#masthead.site-header {
	background: transparent;
	border-style: none !important;
	padding:1.5em 0 !important;
	margin:0 !important;
}

/* =Footer
-------------------------------------------------------------- */
footer#colophon{
	background-color: transparent;}

.site-footer .menu ul{
	width:100%;
	display:block;
	text-align:center;
	margin:0;
	padding:0;}

.site-footer .menu ul li{
	font-size:80%;
	display:inline-block;
	list-style:none;
	margin:0;
	padding: 0 10px;}

.col-full ul#sns{
	width:100%;
	display:block;
	text-align:center;
	margin:35px auto 0px auto;
	padding:0;}

.col-full ul#sns li{
	width:40px;
	display:inline-block;
	list-style:none;
	margin:0;
	padding: 0 5px;}

.col-full ul#sns li img{
	width:100%;
	height:auto;
	margin:0;
	display:block;}

.col-full p{
	width:100%;
	padding:0;
	margin:0;}

.col-full p.shop_name{
	font-size:170%;
	width:100%;
	display:block;
	text-align:center;}

.col-full p.shop_tel{
	width:100%;
	display:block;
	text-align:center;
	font-size:80%;}

.col-full p.shop_access{
	width:100%;
	display:block;
	text-align:center;
	font-size:80%;}