/*
 Theme Name:   予約システム
 Template:     storefront
*/
/* 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);
}

/* 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;
}

/* =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                                              
//////////////////////////////////////////////////////*/
button#site-navigation-menu-toggle{display: none !important;}

header#masthead.site-header {
	background: transparent;
	border-style: none !important;
	padding:0 !important;
	margin:0 !important;
}

@media (max-width: 768px) {
header#masthead.site-header {
	margin-bottom:1.5em !important;
}} 

#masthead .site-branding {
	width: 330px !important;} 

header#masthead.site-header h1.site-title a,
header#masthead.site-header div.site-title a{
	display: block !important;
	width: 100% !important;
	font-size: 16px !important;
	color: var(--color-main-dark);
	line-height: 1.6 !important;
	margin:15px 0 0 0!important;
	font-family:
	  "Rounded Mplus 1c",
	  "Hiragino Maru Gothic Pro",
	  "ヒラギノ丸ゴ Pro W4",
	  "Noto Sans JP",
	  "Meiryo",
	  "MS PGothic",
	  sans-serif;
	}

header#masthead.site-header h1.site-title span,
header#masthead.site-header div.site-title span{
	font-size: 2rem;
	display: block !important;
	color: var(--color-main-dark);
	font-family: "Shuei NijimiMGo B", "Rounded M+ 1c", sans-serif !important;
	padding-bottom: 0.1em !important;
}

header#masthead.site-header h1.site-title span:after,
header#masthead.site-header div.site-title span:after{
	display: block !important;
	content:"";
	width:150px;
	height:1px;
	background: var(--color-main-dark);
	margin: 0.1em 0 !important;
}

@media (max-width: 768px) {
header#masthead.site-header h1.site-title,
header#masthead.site-header div.site-title{
	font-size: 14px !important;
	}

header#masthead.site-header h1.site-title span,
header#masthead.site-header div.site-title span{
	font-size: 1.8rem;
	display: block !important;
}}

header#masthead.site-header nav.secondary-navigation{
	display: block !important;}

header#masthead.site-header nav.secondary-navigation ul#menu-sub_menu,
header#masthead.site-header nav.secondary-navigation ul#menu-sub_menu_en{
	display: block !important;
	padding:0!important;
	margin:0!important;}

@media (max-width: 768px) {
header#masthead.site-header nav.secondary-navigation ul#menu-sub_menu,
header#masthead.site-header nav.secondary-navigation ul#menu-sub_menu_en{
	display: none !important;}}

header#masthead.site-header nav.secondary-navigation ul#menu-sub_menu li a,
header#masthead.site-header nav.secondary-navigation ul#menu-sub_menu_en li a{
	display: inline-block !important;
	padding:0 !important;
	margin:55px 35px 0 5px!important;}

header#masthead.site-header nav.secondary-navigation ul#menu-sub_menu li::before,
header#masthead.site-header nav.secondary-navigation ul#menu-sub_menu_en li::before{
	display: inline-block !important;
	content: '　';
	border-radius: 50%;
	background-color: var(--color-primary-color);
	width: 15px;
	}

header#masthead.site-header .col-full{
	position: relative;}

header#masthead.site-header .header-contact-button{
	display:block;
	width:380px;
	text-align:right;
	margin:0;
	position: absolute;
	top: -30px;
	right: 50px;}

header#masthead.site-header .header-contact-button a.contact-btn{
	font-size:1em;
	display:inline-block;
	background:#e60033;
	color:#fff;
	padding:1.8em 1.5em 0.3em 1.5em;
	border-radius:20px;
	font-weight:bold;
	text-decoration:none;
	box-shadow:0 2px 6px rgba(0,0,0,0.07);
	transition:background 0.3s;
	}

header#masthead.site-header .header-contact-button a.contact-btn span{
	font-size:0.7em;
	display:inline-block;
	margin-left:1em;	
	}

header#masthead.site-header .header-contact-button a.contact-btn:hover{
	padding:2em 1.5em 0.3em 1.5em;}

@media (max-width: 768px) {
header#masthead.site-header .header-contact-button,
header#masthead.site-header .header-contact-button a.contact-btn{
	display:none !important;}} 


.site-branding .site-language-switcher {
	margin-top: 12px;
}

.site-branding .site-language-switcher .button,
.site-branding .site-language-switcher a.button {
	display: inline-block;
	padding: 6px 12px;
	font-size: 12px;
	line-height: 1.2;
	border-radius: 999px;
	background: #9a741c;
	color: #fff;
	text-decoration: none;
	border: none;
	box-shadow: none;
	white-space: nowrap;
	min-height: auto;
}

.site-branding .site-language-switcher .button:hover,
.site-branding .site-language-switcher a.button:hover {
	background: #7c5d16;
	color: #fff;
}

/*//////////////////////////////////////////////////////
  FRONT PAGR                                             
//////////////////////////////////////////////////////*/

body.home #content.site-content .col-full{
	max-width: 100% !important;
	padding:0 !important;
	margin:0 !important;}

body.home #content.site-content .col-full #primary.content-area{
	max-width: 100% !important;
}

body.home #content.site-content .col-full #primary .col-full{
	max-width:66.4989378333em !important;
	margin-left:auto !important;
	margin-right:auto !important;
}

@media (max-width: 768px) {
body.home #content.site-content .col-full #primary .col-full{
	max-width:90% !important;
}}


body.home #primary .page{
	background: var(--color-primary-color);
	max-width: 100% !important;
	margin-top:0 !important;
	margin-left:0 !important;
	margin-right:0 !important;
	padding:5em 0 !important;}

body.home #primary .page h2,
body.home #primary .page p{
	color: var(--color-light-bg) !important; }

#primary section{
	display:block !important;
	max-width:66.4989378333em !important;
	margin:0 auto!important;
	background: var(color-transparent);
}

@media (max-width: 768px) {
#primary section{
	max-width:90% !important;
}}

#primary section .section-title{
	display:block !important;
	margin-top:150px !important;}

#primary section .section-title span{
	display:block !important;
	margin:0.2em 0 !important;
	font-size:0.6em !important;}

section.choose-us h3.choose-us__title{
	margin-top:2.5em !important;
	margin-bottom:1em !important;
	text-align:center !important;
	font-size:2em !important;
	color: var(--color-light-bg) !important;}

section.choose-us h3.choose-us__title span{
	max-width:400px !important;
	display:block !important;
	font-size:0.6em !important;
	text-align:center !important;
	background: var(--color-info);
	margin:0 auto 0.6em auto!important;
	padding:0.1em 0.4em 0.2em 0.4em!important;
	border-radius: 12px;
	}
 
/* 3カラム横並び（flex） */
.choose-us__grid{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 24px;              /* 列間・行間 */
  align-items: stretch;   /* 高さを揃える（同じ行の中で伸ばす） */
}

/* 3列に固定 */
.choose-us__item{
  flex: 0 0 calc((100% - 48px) / 3); /* gap 24px が2つ分 = 48px */
  display: flex;                      /* 中身も縦に伸ばせるように */
}

/* 中身をカードっぽく。高さ100%で揃う */
section.choose-us .choose-us__content{
  width: 100%;
  height: 100%;
  padding: 30px;
  background: #fff;
  box-sizing: border-box;
  border-radius: 12px;   /* 好みで 8px?16px くらい */
  overflow: hidden;      /* 中の画像や背景がはみ出す場合に角丸を効かせる */
}

body.home #primary .page section.choose-us .choose-us__content h4{
	display: block;
	margin: 1em 0;
	line-height: 1.5;
	font-size: 1.4em;
	color: var(--color-text) !important;}

body.home #primary .page section.choose-us .choose-us__content h4:after{
	content:'';
	display: block;
	width: 100px;
	height: 1px;
	margin: 1em auto 0.5em auto;
	background: var(--color-text) !important;}

body.home #primary .page section.choose-us .choose-us__content p{
	font-size: 0.8em;
	text-align:left !important;
	color: var(--color-text) !important;}

/* レスポンシブ（任意） */
@media (max-width: 900px){
  .choose-us__item{ flex-basis: calc((100% - 24px) / 2); } /* 2列 */
}
@media (max-width: 600px){
  .choose-us__item{ flex-basis: 100%; } /* 1列 */
}

/*//////////////////////////////////////////////////////
  UNDER PAGE                                            
//////////////////////////////////////////////////////*/
@media (max-width: 768px) {
header.entry-header h1.entry-title,
#primary #main h1.product_title.entry-title{
	font-size:28px !important;
	text-align:center !important;}}

.abouot_us-company-info {
	margin-bottom: 80px;}

.abouot_us-company-info .company-info  {
	font-size: 1.5em;
	border-bottom: 1px dotted  var(--color-text);
	margin:0.5em 0 !important;
	padding:0.2em 0 !important;}

.abouot_us-company-info .company-address span{
	display:inline-block !important;
	margin-right:0.3em !important;}

@media (max-width: 768px) {
.abouot_us-company-info .company-address span{
	display:block !important;
	margin-right:0 !important;}}

/*//////////////////////////////////////////////////////
  ITEM LIST                                            
//////////////////////////////////////////////////////*/

/* サムネイルを横長に(例:16:9) */
.woocommerce ul.products li.product img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: auto;
  min-height: 0;
	padding: 0 !important;
	margin: 0 0 0.5em 0!important;
}

.woocommerce ul.products li.product .product-setting-period {
	font-size:0.7em !important;
	text-align:center !important;
	margin:0.3em 0 !important;}

.woocommerce ul.products li.product .product-category-list,
.product-categories-under-title {
	padding: 0 !important;
	margin: 0 !important;
	}

.woocommerce ul.products li.product .product-category-list a,
.product-categories-under-title a{
	display:inline-block !important;
	color: var(--color-text) !important;
	border:solid 1px var(--color-text) !important;
	background:solid 1px var(--color-light-bg) !important;
	border-radius: 5px;
	font-size:0.8em !important;
	padding: 0 0.5em;
	margin: 0 0.2em;
	}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title a{
	display:block !important;
	font-size:1.2em !important;
	margin:0.6em 0 !important;
	color: var(--color-text) !important;}

.woocommerce ul.products li.product span.price{
	display:block !important;
	font-size:1.2em !important;
	margin:0.3em 0 !important;
	color: var(--color-text) !important;}

.woocommerce ul.products li.product span.price span.woocommerce-Price-currencySymbol{
	font-size:0.8em !important;
	color: var(--color-text) !important;}

/*//////////////////////////////////////////////////////
 ABOUT US                                           
//////////////////////////////////////////////////////*/
table.has-fixed-layout {
    border-top: solid 1px var(--color-text) !important;
    background: var(--color-transparent);
}
table.has-fixed-layout td:first-child {
    width: 280px;
}
table.has-fixed-layout td {
    border-bottom: solid 1px var(--color-text) !important;
    background: var(--color-transparent) !important;
}

@media (max-width: 768px) {
    table.has-fixed-layout {
        border-style: none !important;
        background: var(--color-transparent);
    }
    table.has-fixed-layout td {
        width: 100%;
        margin-bottom: 1em;
        display: block !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-style: none !important;
    }
    table.has-fixed-layout td:first-child {
        width: 100% !important;
        border-bottom: solid 1px var(--color-text) !important;
        margin-bottom: 0;
        font-weight: bold;
    }
}

/*//////////////////////////////////////////////////////
 固定お問い合わせボタン                                         
//////////////////////////////////////////////////////*/
.fixed-contact-btn {
	position: fixed;
	right: 0;
	top: 30%;
	transform: translateY(-50%);
	z-index: 9999;
	background-color: #8B6914;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s ease;
}

.fixed-contact-btn:hover {
	background-color: #6b4f0f;
	color: #fff;
	text-decoration: none;
}

.fixed-contact-btn span {
	display: block;
}

/* 日本語 */
.fixed-contact-btn.is-ja {
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: 1.2em;
	padding: 20px 12px;
	letter-spacing: 0.2em;
	border-radius: 4px 0 0 4px;
}

.fixed-contact-btn.is-ja span {
	font-size: 0.6em;
}

/* 英語 */
.fixed-contact-btn.is-en {
	position: fixed;
	right: 0;
	top: 30%;
	writing-mode: horizontal-tb;
	text-orientation: mixed;
	font-size: 1rem;
	padding: 12px 16px;
	letter-spacing: 0.04em;
	line-height: 1.4;
	border-radius: 4px 0 0 4px;
	min-width: 180px;
	text-align: center;
}

.fixed-contact-btn.is-en span {
	font-size: 0.75em;
	margin-bottom: 4px;
}

/* 応急処置兼保険
   旧ボタンが別場所から残っていても言語ごとに隠す */
html[lang^="en"] a.fixed-contact-btn:not(.is-en) {
	display: none !important;
}

html[lang^="ja"] a.fixed-contact-btn:not(.is-ja) {
	display: none !important;
}

@media (max-width: 767px) {
	.fixed-contact-btn.is-ja {
		font-size: 1em;
		padding: 14px 8px;
	}

	.fixed-contact-btn.is-en {
		font-size: 0.9rem;
		padding: 10px 12px;
		min-width: 150px;
	}
}

/*//////////////////////////////////////////////////////
  FOOTER                                              
//////////////////////////////////////////////////////*/
footer#colophon{
	background:var(--color-footer-bg) !important;}

footer#colophon nav.footer-navigation ul#menu-footer_menu,
footer#colophon nav.footer-navigation ul#menu-footer_menu_en{
	text-align:center !important;}

footer#colophon nav.footer-navigation ul#menu-footer_menu li.menu-item,
footer#colophon nav.footer-navigation ul#menu-footer_menu_en li.menu-item{
	display:inline-block !important;
	list-style: none;
	font-size:0.8em !important;
	margin:0 2em !important;}

@media (max-width: 768px) {
footer#colophon nav.footer-navigation ul#menu-footer_menu,
footer#colophon nav.footer-navigation ul#menu-footer_menu_en{
	text-align:center !important;
	border-top: 1px dotted  var(--color-text);
	margin:0!important;
	padding:0!important;}

footer#colophon nav.footer-navigation ul#menu-footer_menu li.menu-item,
footer#colophon nav.footer-navigation ul#menu-footer_menu _enli.menu-item{
	display:block !important;
	list-style: none;
	font-size:0.8em !important;
	margin:0 !important;
	padding:0.5em 0 !important;
	border-bottom: 1px dotted  var(--color-text);}}

footer#colophon .footer-company-info{
	display:block;
	margin:2em 0 !important;
	text-align:center !important;
	color:var(--color-text) !important;
}

footer#colophon .footer-company-info .company-info{
	font-size:1.5em !important;
	font-family: "Shuei NijimiMGo B", "Rounded M+ 1c", sans-serif !important;
	color: var(--color-main-dark);}

footer#colophon .footer-company-info .company-address span{
	font-size:0.8em !important;
	color:var(--color-text) !important;}

footer#colophon .footer-company-info .company-address span{
	display:block !important;
	color:var(--color-text) !important;}

footer#colophon .site-info{
	color:var(--color-text) !important;
	text-align:center !important;
	margin:0 !important;
	padding:0 !important;
	font-size:0.8em !important;}