/*
Theme Name:  Storefront - Child Theme
Template:    storefront
Version: 3.7.0
*/
/*Google Fontsの「Noto Sans Sans-Serif」にフォント変更*/
body {
  font-family: 'Noto Serif', serif;
}
/*ページトップに追加したディスクリプションの装飾*/
div.pageTopDiscription {
  background-color: #d56080;
  color: #ffffff;
  margin: 0;
  padding: 5px 0;
}
div.pageTopDiscription p {
  font-size: 1rem;
  margin: 0;
}
@media (max-width: 767px) {
  div.pageTopDiscription p {
    font-size: .8rem;
  }
}
/*ハンバーガーボタンのサイズ調整*/
button.menu-toggle {
  border-radius: 9px;
  padding: 21px;
}
button.menu-toggle::before, button.menu-toggle::after, button.menu-toggle span::before {
  height: 4px;
  width: 30px;
  border-radius: 3px;
}
button.menu-toggle::before {
  transform: translateY(-10px);
}
button.menu-toggle::after {
  transform: translateY(10px);
}
/*全幅表示の追加*/
.home #primary {
  width: 100%;
  margin: 0 auto;
}
.home #secondary {
  display: none;
}
/* トップページスライダー */
.custom-slider {
  position: relative;
  width: 100%;
  height: calc(100vh - 80px); /* ヘッダーの高さを差し引く */
  max-height: 800px;
  overflow: hidden;
  margin-top: 0; /* 不要なら削除 */
}
@media screen and (max-width: 768px) {
  .custom-slider {
    max-height: 420px; /* スマホで見やすい高さに固定 */
  }
}
/* スライド */
.custom-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}
.custom-slider .slide.active {
  opacity: 1;
  z-index: 1;
}
.custom-slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* テキストエリア */
.slider-text {
  position: absolute;
  top: 30%;
  left: 5%;
  z-index: 2;
  color: white;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}
.slider-text .slider-subtitle {
  font-size: 1rem;
  margin-bottom: 0.5em;
  text-transform: lowercase;
}
.slider-text .slider-title {
  font-size: 2.5rem;
  margin-bottom: 1em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
}
.slider-text .slider-button {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0.7em 1.5em;
  border: 1px solid white;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s;
  font-size: 1rem;
}
.slider-text .slider-button:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
/* スマホ対応のテキスト調整 */
@media screen and (max-width: 768px) {
  .slider-text {
    top: 20%;
  }
  .slider-text .slider-subtitle {
    font-size: 0.85rem;
  }
  .slider-text .slider-title {
    font-size: 1.5rem;
  }
  .slider-text .slider-button {
    font-size: 0.9rem;
    padding: 0.5em 1em;
  }
}
/*モバイルメニューのデザイン調整*/
#menu-mobile {
  padding: 20px;
  background-color: #dad6d4;
  margin: 0px 0 40px;
}
.handheld-navigation {
  padding-top: 20px;
}
button.menu-toggle, button.menu-toggle:hover {
  border-color: transparent;
}
/* トップページスライダー下のコンテンツ */
.custom-content {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  width: auto;
}
.custom__item {
  flex: 0 0 auto;
  margin-bottom: 22px;
  max-width: 100%;
}
.one-half {
  width: 50%;
}
.custom__item-inner {
  display: inline-block;
  max-width: 100%;
  position: relative;
  text-align: left;
  width: 100%;
}
.text-wrap {
  padding: 60px 60px 120px 60px;
}
.custom__item-inner h2 {
  font-size: 32px;
  margin: 0 0 40px 0;
  color: #736357;
  line-height: 1.5;
}
.custom__item-inner p {
  font-size: 17px;
  line-height: 2.5;
  color: #736357;
}
@media (max-width: 767px) {
  .one-half {
    width: 100%;
  }
  .text-wrap {
    padding: 60px 0px;
  }
  .custom__item-inner h2 {
    font-size: 27px;
  }
  .custom__item-inner p {
    font-size: 17px;
    line-height: 2;
  }
}
/*ヘッダーの下線を消す*/
.site-header {
  border-bottom: none;
}
/*スマホで商品一覧を横並び2列にする*/
@media screen and (max-width: 768px) {
	}
  ul.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  ul.products li.product {
    width: 49%;
    margin-bottom: 20px;
  }
  ul.products li.product:nth-child(odd) {
    margin-right: 2%;
  }
/*英字スラッグの装飾*/
.menu-cat-slug-inline {
  font-size: 0.75em;
  color: #888;
  margin-left: 0.5em;
  display: inline-block;
  vertical-align: middle;
  text-transform: lowercase;
  letter-spacing: 0.5px;
}
/*各ページタイトル削除*/.woocommerce-products-header,
.woocommerce-products-header__title.page-title {
  display: none !important;
}
/*入力欄の背景を白くする*/
input[type=text], input[type=number], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=search], textarea, .input-text {
    background-color: #fff;
}
/*商品一覧の文字を左寄せにする*/
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.product-subtitle{
    text-align: left;
}
.product-subtitle{
	font-size: .9rem;
}
/* セール価格と元価格だけを縦に並べる */
/* 値引き前価格（取り消し線付き、控えめ） */
.woocommerce ul.products li.product .price del {
  font-size: 13px;
  margin-right: 5px;
  color: #888;
}

/* 値引き後価格（強調） */
.woocommerce ul.products li.product .price ins {
  color: #d56080;
  font-weight: bold;
  text-decoration: none;
  font-size: 16px;
}

/* ￥マークだけ小さくする */
.woocommerce ul.products li.product .price ins bdi::before {
  font-size: 12px;
  vertical-align: top;
}

/* （税込）の文字にも同じ色を適用 */
.woocommerce ul.products li.product .price ins + .woocommerce-price-suffix{
  color: #d56080;
  font-size: 13px;
  margin-left: 4px;
}
/* （税込）の文字を小さく＆色を指定 */
.woocommerce ul.products li.product .price ins .woocommerce-price-suffix {
  color: #d56080;
  font-size: 12px; /* ← ここでサイズを小さく */
  margin-left: 4px;
}


/* デフォルトで改行されないようにする */
.woocommerce ul.products li.product .price {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
}


@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.woocommerce span.onsale {
  background-color: #d56080 !important;
  color: #fff !important;
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 5px;
  z-index: 10;
  border: none;
  animation: blink 2s infinite ease-in-out; /* ゆっくり点滅 */
}

/* 親要素が relative でない場合に備えて */
.woocommerce ul.products li.product {
  position: relative;
}
body.woocommerce-account .woocommerce {
  display: flex;
  flex-flow: column-reverse;
}

body.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none !important;
  width: 100% !important;
  margin-bottom: 2rem;
	margin-top: 2rem;
}

body.woocommerce-account .woocommerce-MyAccount-content {
  width: 100%;
}

/* タブの横並び */
.woocommerce-tabs ul.tabs {
  display: flex !important;
  border-bottom: 2px solid #d56080 !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;    /* 幅を100%に */
  float: none !important;    /* float解除 */
  margin-right: 0 !important; /* 余白も解除 */
	border-top: none !important;
}

/* タブ個別 */
.woocommerce-tabs ul.tabs li {
  list-style: none;
  margin: 0 8px 0 0;
  border: 1px solid #d56080;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: #fff;
  flex: none; /* 幅を固定に */
  width: auto;
}

/* 選択中タブ */
.woocommerce-tabs ul.tabs li.active {
  background-color: #d56080;
}

/* タブリンク */
.woocommerce-tabs ul.tabs li a {
  color: #d56080;
  font-weight: 600;
  padding: 0.75em 1.2em;
  display: block;
  text-decoration: none;
}

/* 選択中タブのリンク色 */
.woocommerce-tabs ul.tabs li.active a {
  color: #fff;
}

/* コンテンツ部分 */
.woocommerce-Tabs-panel {
  background: #fff;
  padding: 2em;
  border: 1px solid #ddd;
  border-radius: 0 0 6px 6px;
  margin-top: -1px; /* タブの境界線と繋げる */
	width: 100% !important;
	float: none !important;
}

/* 全体幅 */
.single-product .product .woocommerce-tabs {
  max-width: 100%;
  width: 100%;
}

/* Storefrontはデフォでflexで横並びなので強制解除 */
.single-product div.product > div.summary {
  flex: none !important;
  width: 100% !important;
}
.woocommerce-tabs ul.tabs li.active::after{
	display: none !important;
}
.single-product .product_title.entry-title {
  font-size: 1.8em;
}
a {
  text-decoration: none;
}

/* タッチやマウスではフォーカスリング非表示、キーボード操作では残す */
a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.woocommerce-breadcrumb a, .widget-area .widget a {
    text-decoration: none;
}
/* 基本スタイル（PC向け） */
.single_add_to_cart_button {
  font-size: 1.1rem;
  padding: 1em 2em !important;
  min-width: 220px;
	height: inherit!important;
	line-height: inherit!important;
}

/* スマホでは横幅いっぱいに */
@media screen and (max-width: 768px) {
  .single_add_to_cart_button {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}