/*
Theme Name: sokutheme
Theme URI:
Author:
Author URI:
Description: SOKUオリジナルテーマ
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: sokutheme
Tags:
*/

/* リセット系 */
html {
  scrollbar-gutter: stable;
}

a:focus:not(:focus-visible) {
  outline: none !important;
}

body blockquote,
body caption,
body figcaption,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p {
  text-wrap: unset;
}

/* 共通CSS */
@media not (max-width: 781px) {

  /* PC版にのみ適用されるスタイル */
  .spOnly {
    display: none;
  }
}

@media (max-width: 781px) {

  /* SP版にのみ適用されるスタイル */
  .pcOnly {
    display: none;
  }

  .is-reverse-mobile {
    flex-direction: column-reverse !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.hide-underline a {
  text-decoration: none !important;
}

.hide-underline a:hover {
  text-decoration: underline !important;
}

/* ブロック関連 */
/* 区切り線 */
.wp-block-separator.is-style-responsive-separator {
  border: none;
  border-bottom: 1px solid;
  /* 線の太さと種類（色はエディターで選択可能） */
  display: block;
  margin-left: auto !important;
  /* 中央寄せ */
  margin-right: auto !important;
  /* 中央寄せ */
  width: 59vw;
  max-width: 600px;
}

/* 見出し：左に横棒 */
.wp-block-heading.is-style-horizontal-line-heading {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.wp-block-heading.is-style-horizontal-line-heading::before {
  content: "";
  display: inline-block;
  width: 1.9em;
  height: 2px;
  background-color: var(--wp--preset--color--accent-1);
  flex-shrink: 0;
}

/* ヘッダー */
.wp-block-navigation__responsive-container-open {
  position: fixed;
  right: 0;
  top: 0;
  width: 70px;
  height: 70px;
  z-index: 11;
  background-color: var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container-open::before {
  position: absolute;
  content: "";
  display: block;
  width: 67%;
  height: 31%;
  inset: 0;
  margin: auto;
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2248%22%20height%3D%2222%22%20viewBox%3D%220%200%2048%2022%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%2248%22%20height%3D%222%22%20fill%3D%22white%22%2F%3E%3Crect%20y%3D%2210%22%20width%3D%2248%22%20height%3D%222%22%20fill%3D%22white%22%2F%3E%3Crect%20y%3D%2220%22%20width%3D%2248%22%20height%3D%222%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E') center center / contain no-repeat;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
  display: none;
}

.wp-block-navigation__responsive-container.is-menu-open {
  padding-left: clamp(20px, 5vw, 40px) !important;
  padding-right: clamp(20px, 5vw, 40px) !important;
  padding-top: 50px !important;
}

.wp-block-navigation__responsive-container-close {
  width: 70px !important;
  height: 70px !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  background-color: var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container-close::before {
  position: absolute;
  content: "";
  display: block;
  width: 50%;
  height: 50%;
  inset: 0;
  margin: auto;
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.414185%22%20y%3D%2234%22%20width%3D%2248%22%20height%3D%222%22%20transform%3D%22rotate(-45%200.414185%2034)%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%221.41418%22%20width%3D%2248%22%20height%3D%222%22%20transform%3D%22rotate(45%201.41418%200)%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E') center center / contain no-repeat;
}

.wp-block-navigation-item__content:focus:not(:focus-visible) {
  outline: none !important;
}

.lang-link {
  margin-top: 3em;
}

/* ハンバーガーメニューを開いた状態 */
.wp-block-navigation__responsive-container.is-menu-open {
  left: auto !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 450px !important;

  background-color: rgba(255, 255, 255, 0.7) !important;
  /* 半透明の白 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 781px) {
  .wp-block-navigation__responsive-container.is-menu-open {
    max-width: 100% !important;
  }
}

/* メニュー内の余白調整 */
.wp-block-navigation__responsive-container-content {
  padding: 80px 40px !important;
}

/* フッター */
footer a {
  transition: opacity .3s;
}

footer a:hover {
  opacity: .7;
}

@media (max-width: 781px) {
  .footer-logo {
    margin-left: 0 !important;
    width: 58px;
  }
}

/* CTAパターン */
.cta-pattern {
  padding: 2em 0 !important;
}

@media (max-width: 781px) {
  .cta-pattern {
    padding: 1.4em 0 !important;
  }
}

.cta-pattern__txt {
  padding-bottom: 1.7em !important;
}

@media (max-width: 781px) {
  .cta-pattern__txt {
    padding-bottom: 1em !important;
  }
}

/* リストの設定 */
ul.wp-block-list {
  list-style: none;
}

ul.wp-block-list li {
  position: relative;
  padding-left: 1.2em;
}

ul.wp-block-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.2em;
  text-align: center;
}

/* ボタン */
.wp-element-button {
  transition: opacity .4s, background-color .4s, color 0.4s;
}

.wp-element-button:hover {
  opacity: 0.4;
  color: var(--wp--preset--color--contrast);
  border-color: currentColor;
}

.wp-block-button.is-style-outline .wp-element-button {
  position: relative;
  border-color: currentColor;
}

.wp-block-button.is-style-outline .wp-element-button::before {
  position: absolute;
  top: 50%;
  left: 2em;
  transform: translateY(-50%);
  display: block;
  width: 6px;
  height: 9px;
  content: "";
  background-color: currentColor;
  transition: background-color 0.4s, color 0.4s;
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%226%22%20height%3D%229%22%20viewBox%3D%220%200%206%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0.353577%200.353516L4.35358%204.35352L0.353577%208.35352%22%20stroke%3D%22white%22%2F%3E%3C%2Fsvg%3E');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.wp-block-button.is-style-outline .wp-element-button:hover {
  opacity: 1;
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}

@media (max-width: 781px) {
  .wp-block-button.is-style-outline .wp-element-button {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }

  .wp-block-button.is-style-outline .wp-element-button::before {
    left: 1.8em;
  }
}

/* トップページのスタイル */
.mv {
  position: relative;
}

.mv_logo {
  z-index: 1;
  position: absolute;
  left: var(--wp--style--root--padding-left);
  top: min((57 * 100vw / 1920), 57px);
  width: calc(143 * 100vw / 1920);
  max-width: 143px;
}

.mv_txt {
  position: absolute;
  left: calc(40 * 100vw / 1920);
  top: 53%;
  transform: translateY(-50%);
  width: calc(700 * 100vw / 1920);
  max-width: 700px;
}



@media not (max-width: 781px) {

  /* PC */
  .tategaki {
    writing-mode: vertical-rl;
    letter-spacing: 0.45em;
  }

  .show-column {
    display: flex;
    flex-direction: column;
  }

  .show-column .wp-block-buttons {
    margin-top: auto;
    margin-bottom: 0;
  }

  .top-about .tategaki {
    text-align: left;
    min-height: 18.1em;
  }

  .top-product-right {
    margin-top: 10.3em !important;
  }

  .top-product-data+.top-product-data {
    margin-top: 3em;
  }
}

@media (max-width: 781px) {

  /* SP版にのみ適用されるスタイル */
  .mv_logo {
    top: 37px;
    width: 58px;
  }

  .mv_txt {
    top: 35%;
    left: 0%;
    width: 330px;
  }

  .tategaki {
    padding-bottom: .8em;
  }

  .top-two-cols__main {
    padding-top: 0 !important;
  }

  .top-two-cols .wp-block-list {
    padding-bottom: 1em;
  }

  .top-two-cols figure {
    margin-top: 10px !important;
  }

  .top-product-data figure+p {
    padding-top: 0.3em !important;
  }

  .top-product-right {
    margin-top: 4em !important;
  }

  .top-product-data+.top-product-data {
    margin-top: 2.5em;
  }

  .show-column {
    display: block;

    >* {
      width: 100%;
      display: block;
    }
  }
}

@media (max-width: 380px) {
  .mv_txt {
    top: 35%;
    left: 0%;
    width: 90%;
  }
}

/* 下層ページ */
.page-title-shadow {
  text-shadow: 6px 6px 6px rgba(0, 0, 0, 0.3);
}

@media (max-width: 781px) {
  .page-title {
    height: 40vh;
  }

  .page-title-shadow {
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  }
}


.numbered-box-list-item {
  .is-layout-flex {
    align-items: baseline;
  }

  .is-layout-flex>p {
    flex-shrink: 0;
  }
}

@media (max-width: 781px) {
  .numbered-box-list-item .has-text-align-right {
    text-align: left !important;
  }
}

/* お問い合わせフォーム */
.original-form .input-area+.input-area {
  margin-top: 1.5em;
}

.original-form input[type="text"],
.original-form input[type="email"],
.original-form textarea {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  font-size: 1.125rem;
  border: 1px solid var(--wp--preset--color--accent-2);
  padding: 1.5em;
  width: 100%;
  letter-spacing: 0.05em;
  font-family: var(--wp--preset--font-family--noto-serif-jp);
}

.original-form textarea {
  min-height: 13.5em;
  field-sizing: content;
}

.original-form .btn-area {
  margin-top: 3rem;
}

.original-form .form-send-btn {
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  margin: 0 auto;
  display: block;
  padding: 1em;
  min-width: 11.8em;
  background-color: var(--wp--preset--color--accent-3);
  color: #fff;
  letter-spacing: 0.05em;
  font-size: var(--wp--preset--font-size--large);
  font-family: var(--wp--preset--font-family--noto-serif-jp);
  transition: background-color 0.3s;
  ;
}

.form-send-btn:hover {
  background-color: #d1792c;
}

@media (max-width: 781px) {

  .original-form input[type="text"],
  .original-form input[type="email"],
  .original-form textarea {
    padding: 1em;
    font-size: 1rem;
  }
}

/* 20260316追加css　*/
.wp-block-page-list li:nth-of-type(2){
    display: none !important;
}
.product_list{
    display: flex;
    flex-wrap: wrap;
    gap: 60px 30px; 
}
.product_list article{
    width: calc(100% / 3 - 20px);
}
.product_list article a{
    text-decoration: none;
}
.product_list .wp-block-image{
    border: 1px solid #d9d9d9;
    height: 430.52px;
}
.product_list .wp-block-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;  
}
.wp-pagenavi{
    width: 100%;
    text-align: center;
}
.wp-pagenavi span ,.wp-pagenavi a{
    color: #fff;
    font-weight: 600;
    width: 36px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #333; 
}
.single main{
   margin-top: 120px !important;
}
.single .wp-block-table .has-fixed-layout {
    table-layout: auto !important;
}
.single .has-global-padding{
   padding-right: 0 !important; 
   padding-left: 0 !important;
}
.single .wp-block-media-text__content{
   padding-left: 13%;  
}
.single .wp-block-heading{
   margin-top: 0;
   margin-bottom: 1.5em;
}
@media (max-width: 781px) {
    .product_list article{
         width: calc(100% / 2 - 10px); 
    }
    .product_list{
        gap: 20px;
    }
    .single main {
        margin-top: 60px !important;
    }
    .single .wp-block-spacer{
        height: 50px !important; 
    }
    .single .entry-content,.single .is-layout-constrained{
       padding-right: var(--wp--style--root--padding-right) !important;
       padding-left: var(--wp--style--root--padding-left) !important;  
    }
    .single .table_span,.single .wp-block-media-text__content{
      padding-right:0 !important;
      padding-left: 0 !important; 
    }
    .single .wp-block-media-text__media{
      width: 74%;
      margin: 0 auto 70px; 
    }
}