/*
Theme Name: mitsuha original thema
Author: mitsuha
Description: This is our original theme.
Version: 1.0
*/

/* =====================
   基本・ユーティリティ
===================== */
body {
    color: #007DA3;
}
.txac{text-align: center!important;}

/* =====================
   非表示調整
===================== */
#wWrap .product .tabs { display: none; }
#wWrap .woocommerce-Tabs-panel > h2 { display: none; }

/* =====================
   itemFreeArea
===================== */
#itemFreeArea section:nth-of-type(odd) { background-color: #f6f7f8; }
#itemFreeArea section { padding: 80px 5%; }
#itemFreeArea h2 {
    text-align: center;
    font-size: 2.2em;
    letter-spacing: 0.1em;
}
#itemFreeArea h2 span {
    display: block;
    font-size: 12px;
    width: 100px;
    padding: 2px 0 4px;
    margin: 0 auto 10px;
    border: 1px solid #007DA3;
}
#itemFreeArea .txtBox {
    max-width: 740px;
    margin: 0 auto;
    line-height: 2.2;
}
#itemFreeArea .txtBox p,
#itemFreeArea .txtBox div { margin-top: 20px; }
#itemFreeArea .txtBox .imgParts { width: 95%; margin: 30px auto; }

#itemFreeArea .photo ul {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}
#itemFreeArea .photo li { width: 100%; }
#itemFreeArea .photo li:not(:first-of-type) { margin-left: 2%; }

#itemFreeArea .effect table { border-collapse: collapse; }
#itemFreeArea table,
#itemFreeArea dl { max-width: 740px; width: 100%; margin: 30px auto 0; }
#itemFreeArea .effect tr { border-bottom: 1px solid #00124d; }
#itemFreeArea .effect th,
#itemFreeArea .effect td { padding: 10px 0; text-align: center; }

/* =====================
   ヘッダー
===================== */
#header .cartBox p.cart a {
    border: 1px solid #3DAEC9;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
    border-top-right-radius: 13px;
    border-bottom-right-radius: 13px;
}
#header .navToggle span { border-bottom: solid 1px #007DA3; }
#header.active .logo a { filter: brightness(0) invert(1); }

/* 通常（#3399cc） */
#header .sns a {
  color: #3399cc;
}

/* ハンバーガー開いたら白に */
#header.active .sns a {
  color: #fff;
}

/* SVGの共通指定 */
#header .sns a svg {
  width: 24px;
  height: 24px;
  display: inline-block;
}
#header .sns a svg path,
#header .sns a svg circle,
#header .sns a svg rect {
  fill: currentColor;
  transition: fill 0.3s ease;
}



/* btnBox の枠（見た目は別で指定あり） */
.btnBox a {
    border: 1px solid #3DAEC9;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* =====================
   ニュース一覧
===================== */
.newsList li:first-of-type { border-top: 1px solid #007DA3; }
.newsList li { border-bottom: 1px solid #007DA3; }

/* =====================
   ローディング
===================== */
#loading .bk { background-color: #fff; }
#loading p { width: 200px; position: relative; }

/* =====================
   メインスライダー画像
===================== */
#main ul li:nth-of-type(1) {
    background-image: url(https://si6.xsrv.jp/mitsuha-test/wp-content/themes/original_theme/dest/top05.jpg);
    animation-delay: 0s;
    z-index: 3;
}
#main ul li:nth-of-type(2) {
    background-image: url(https://si6.xsrv.jp/mitsuha-test/wp-content/themes/original_theme/dest/top02.jpg);
    animation-delay: 3s;
    z-index: 2;
}
#main ul li:nth-of-type(3) {
    background-image: url(https://si6.xsrv.jp/mitsuha-test/wp-content/themes/original_theme/dest/top03.jpg);
    animation-delay: 6s;
    z-index: 1;
}
#main ul li:nth-of-type(4) {
    background-image: url(https://si6.xsrv.jp/mitsuha-test/wp-content/themes/original_theme/dest/top01.jpg);
    animation-delay: 9s;
    z-index: 0;
}

/* スマホ用スライダー画像差し替え */
@media (max-width: 767px) {
    #main ul li:nth-of-type(1) {
        background-image: url(https://si6.xsrv.jp/mitsuha-test/wp-content/themes/original_theme/dest/top_sp05.jpg);
    }
    #main ul li:nth-of-type(2) {
        background-image: url(https://si6.xsrv.jp/mitsuha-test/wp-content/themes/original_theme/dest/top_sp02.jpg);
    }
    #main ul li:nth-of-type(3) {
        background-image: url(https://si6.xsrv.jp/mitsuha-test/wp-content/themes/original_theme/dest/top_sp03.jpg);
    }
    #main ul li:nth-of-type(4) {
        background-image: url(https://si6.xsrv.jp/mitsuha-test/wp-content/themes/original_theme/dest/top_sp01.jpg);
    }
}

/* =====================
   history section images
===================== */
#history li:nth-of-type(1) { background-image: url(https://si6.xsrv.jp/mitsuha-test/wp-content/themes/original_theme/dest/concept01.jpg); }
#history li:nth-of-type(2) { background-image: url(https://si6.xsrv.jp/mitsuha-test/wp-content/themes/original_theme/dest/concept02.jpg); }
#history li:nth-of-type(3) { background-image: url(https://si6.xsrv.jp/mitsuha-test/wp-content/themes/original_theme/dest/concept03.jpg); }

/* =====================
   フッター
===================== */
#footer .logo { width: 200px; }
@media (max-width: 767px) {
    #footer .logo { width: 160px; margin-bottom: 20px; }
}

/* =====================
   woocommerce 共通
===================== */
.woocommerce-Tabs-panel {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#wWrap #product-top .summary .cart button { background-color: #00a0ba; }

#wWrap .products,
.woocommerce-before-shop-loop {
    max-width: 980px;
    width: 90%;
    margin-left: auto !important;
    margin-right: auto !important;
}

#wWrap #product-top .summary .woocommerce-product-details__short-description p strong {
    border: 1px solid #007DA3;
}

#wWrap #product-top .summary .price { color: #2B6F82; }

/* 商品リンク hover 時の囲み線カラー・角丸（上書き防止に重要度あり） */
.woocommerce-LoopProduct-link:hover {
    border: 1px solid #3DAEC9 !important;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* 商品リスト内のリンクパディング調整 */
#wWrap .products .woocommerce-LoopProduct-link { padding-top: 0; padding-bottom: 0; }

/* 商品リスト：ボタン中央寄せ（文字幅） */
ul.products li.product { text-align: center; }

/* ボタン共通（テーマ内のボタン系） */
#wWrap a.button,
#wWrap button.button,
#wWrap input.button,
#products a.add_to_cart_button,
#products a.button {
    display: inline-block;
    padding: 13px 10px 15px;
    border-radius: 8px;
    background-color: #00a0ba;
    color: #fff;
    text-align: center;
    margin-top: 5px;
    min-width: 150px;
}

/* メッセージ／altボタン系 */
#wWrap .woocommerce-message:before { color: #00a0ba; }
#wWrap .woocommerce-message { border-top-color: #00a0ba; }

#wWrap input#submit.alt,
#wWrap a.button.alt,
#wWrap button.button.alt,
#wWrap input.button.alt { background-color: #00a0ba; }

/* products 内の a pading調整 */
#products li a { padding-top: 0; }

/* itemFreeArea の effect テーブル枠色 */
#itemFreeArea .effect tr { border-bottom: 1px solid #007DA3; }

/* added_to_cart の余白 */
.woocommerce a.added_to_cart { padding-right: 5px; padding-left: 5px; }

/* 検索結果カウント色 */
p.woocommerce-result-count { color: #666; }

/* 並び替えセレクト */
.woocommerce-before-shop-loop select.orderby {
    border: 1px solid #a8dce8;
    border-radius: 5px;
    padding: 6px 10px;
    background-color: #f7fcfd;
    font-size: 14px;
    color: #007DA3;
    cursor: pointer;
}

/* 商品リスト下余白 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    margin-bottom: 4em !important;
}

/* 商品タイトルスタイル */
#wWrap .products .woocommerce-LoopProduct-link .woocommerce-loop-product__title {
    margin-top: 8px;
    font-size: 1.5em;
    padding-bottom: 0.2em;
}

/* infoの上線色 */
#wWrap .woocommerce-info { border-top-color: #1e85be !important; }

/* ギャラリー画像のpadding */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
    padding: 3px 2px;
}

/* btnBox hover （大画面） */
@media (min-width: 1367px) {
    .btnBox a:hover { background-color: #00a0ba; }
}

/* =====================
   レスポンシブ共通（max-width:767）
===================== */
@media (max-width: 767px) {

    /* btnBox スマホ色指定 */
    .btnBox a { background-color: #fff; color: #00a0ba; }

    /* woocommerce タブパネルの左右パディング解除 */
    .woocommerce-Tabs-panel { padding-left: 0 !important; padding-right: 0 !important; }

    /* itemFreeArea の写真レイアウトをスマホ向けに */
    #itemFreeArea .photo li:not(:first-of-type) { margin: 0; }
    #itemFreeArea section.photo { padding: 50px 10px; }
    #itemFreeArea .photo ul { flex-wrap: wrap; }
    #itemFreeArea .photo li { width: 100%; max-width: 33%; padding: 10px 5px; }

    .lowerTop { padding-top: 120px; }

}
button.slick-next .slick-arrow{
    display: none;
}

/* --- WooCommerce バリエーションフォームの縦並び整形 --- */
.variations_form.cart {
  display: flex;
  flex-direction: column;
  gap: 1em; /* 各要素の間隔 */
  max-width: 400px; /* 横幅を制限して整える */
}

/* サイズ選択部分 */
.variations_form.cart table.variations {
  width: 100%;
  margin-bottom: 0.5em;
}

.variations_form.cart select {
  width: 100%;
  padding: 8px;
  font-size: 1rem;
}

/* 価格表示 */
.single_variation_wrap .woocommerce-variation-price {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
  margin: 0.5em 0;
}

/* 数量とボタンを横並びで整える */
.variations_button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.variations_button .quantity input {
  width: 70px;
  text-align: center;
  padding: 5px;
}

.single_add_to_cart_button {
  flex: 1;
  background-color: #00a2c7;
  color: white;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.single_add_to_cart_button:hover {
  background-color: #007a96;
}

form input[type=submit], form input[type=button] {
    background-color: #00a0ba;
    border: 1px solid #00a0ba;
}

#about .txtBox{
    padding-left: 1em;
    padding-right: 1em;
}

#itemFreeArea .component {
  text-align: center; /* 全体を中央寄せ */
  padding: 40px 20px; /* 余白確保（SP対策） */
}

#itemFreeArea .component h3 {
  text-align: center;
  font-size: 1.2em;
}

#itemFreeArea .component iframe {
  display: block;
  margin: 20px auto;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* 横幅に合わせて高さを自動計算 */
  border: none;
}

/* テキストボックスの幅制限 */
#itemFreeArea .component .txtBox {
  max-width: 800px; /* 読みやすい幅に制限 */
  margin: 0 auto;
  text-align: left; /* 中の文章は左寄せでOK */
  line-height: 1.8;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  #itemFreeArea .component {
    padding: 30px 15px;
  }
}


#products li .onsale {
    width: 50px;
    height: 50px;
    line-height: 50px;
    padding: 0;
    background-color: rgba(255, 78, 0, 0.8);
    v: nimbus-sans, sans-serif;
    font-weight: 300;
}
#wWrap .onsale {
    background-color: rgba(255, 78, 0, 0.8);
}


.related {
  clear: both;
  display: block;
  width: 100%;
  margin-top: 80px;
}