/*
Theme Name: Sirone TT1CT
Template: twentytwentyone
Version: 1.0
Author: Kanegae Takanori
Author URI: https://kanegaetakanori.com
Text Domain: sirone-tt1ct
*/

:root {
  --global--font-primary: 'Inter', sans-serif;
  --global--font-secondary: 'Inter', 'Noto Sans JP', sans-serif;

  --global--font-size-base: 15px;
  --global--line-height-body: 1.8;
  --global--letter-spacing: 0.06em;
}

:lang(en),
:lang(en) * {
  font-family: 'Inter', sans-serif !important;
}
.moji-en{
  font-family:'Inter', sans-serif;
}
/*body{
  background-image:
    linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
    linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size:16px 16px;
  background-repeat:repeat;
  background-position:center center;
  background-attachment: fixed; 
}*/

body{
  position: relative;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  letter-spacing: 0.06em;
}
.site .button:not(:hover):not(:active):not(.has-background), button:not(:hover):not(:active):not(.has-background), input[type=submit]:not(:hover):not(:active):not(.has-background), input[type=reset]:not(:hover):not(:active):not(.has-background), .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background), .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background), .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
background-color: transparent;
}
.intro-loading,
.intro-content{
  overflow: hidden;
}
html.intro-done,
body.intro-done{
  overflow: hidden;
}

html.intro-done.show-scroll,
body.intro-done.show-scroll{
  overflow: auto;
}
html{ scrollbar-gutter: stable; }
/*body::before{
  content:"";
  position: fixed;
  left:0;
  bottom:0;
  width:100%;
  height:66.666vh; 
  
  background-image:
    linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
    linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size:16px 16px;
  background-repeat:repeat;

  z-index:-1;
  pointer-events:none;
}*/
body.home.intro-loading #page.site,
body.home.intro-content #page.site{
  opacity:0;
  visibility:hidden;
}

body.home.intro-done #page.site{
  opacity:1;
  visibility:visible;
}
/*etc*/
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.mt60 {margin-top: 60px;}
.mt70 {margin-top: 70px;}
.mt80 {margin-top: 80px;}
.mt90 {margin-top: 90px;}
.mt100 {margin-top: 100px;}
.mt110 {margin-top: 110px;}
.mt120 {margin-top: 120px;}
.mt130 {margin-top: 130px;}
.mt140 {margin-top: 140px;}
.mt150 {margin-top: 150px;}
.mt160 {margin-top: 160px;}
.mt170 {margin-top: 170px;}
.mt180 {margin-top: 180px;}
.mt190 {margin-top: 190px;}
.mt200 {margin-top: 200px;}
#loading {
    display:none;
    height: 30px;
    left: 50%;
    margin-left:-15px;
    margin-top:-15px;
    position: fixed;
    text-align: center;
    top: 44%;
    width: 30px;
    z-index: 99999;
}
.loadingbox div {

}
#loader {
    position: absolute;
    width: 30px; /*ローディングアイコンの横サイズ*/
    height: 30px; /*ローディングアイコンの縦サイズ*/
    border-radius: 50%;  /*CSS3で円を書く*/
    border: 2px solid #000;  /*円に○の白枠をつける*/
    border-right-color: transparent; /*円の右にC状の空きをつける*/
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg);   opacity: 0.2; } /*0%の時は20％の透明度*/
    50%  { transform: rotate(180deg); opacity: 1.0; } /*50%の時は透明度なし*/
    100%   { transform: rotate(360deg); opacity: 0.2; } /*100%の時に20％の透明度に戻る*/
}


/*共通*/
::selection {
    background: none repeat scroll 0 0 #e5e5e5;
}
::-moz-selection {
    background: none repeat scroll 0 0 #e5e5e5;
}
/* ヘッダーの上下余白を殺す */
.site-header{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}



/* h1のデフォ余白と行高が犯人になりやすい */
.site-title{
  margin: 60px 0;
  line-height: 1;
}


.site-title .logo-svg {
  display:block;
  width: 100%;
  height: auto;

}
.site-title .logo-svg.text-logo {
    max-width: 300px;
}
.logo-wrap {
    max-width: 300px;
}

.post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .default-max-width {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.site-main > * {
  max-width: var(--responsive--alignwide-width);
  margin-left: auto;
  margin-right: auto;
}


/* ----------------------------------------
   Intro (home only)
---------------------------------------- */

#intro-logo{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--intro-bg, #fff);
  color: var(--intro-logo, #000);
  z-index: 999999;

  opacity: 0;
    /* visibility: hidden; ←削除 */
  pointer-events: none;
  transition: opacity 2.9s ease; /* ここは好きな秒数 */
}

/* ロゴサイズ */
#intro-logo .logo-svg{
  width: 150px;
  height: auto;
  display: block;
  opacity: 0;
  transition: opacity .8s ease;
  transform: translateY(-10vh);
}

/* コピーライト */
#intro-logo .intro-copy{
  position: fixed;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  opacity: 0;
  transition: opacity .8s ease;
}

#intro-logo .intro-copy a{
  text-decoration: none;
  color: inherit;
}

/* 初期状態で #page は隠す */
body.intro-loading #page{
  opacity: 0;
}

/* 背景表示 */
body.intro-loading #intro-logo{
  opacity: 1;
  /*visibility: visible;*/
  pointer-events: auto;
}

/* 少し遅れてロゴとコピー表示（JSが intro-content を付与） */
body.intro-content #intro-logo .logo-svg,
body.intro-content #intro-logo .intro-copy{
  opacity: 1;
}

/* イントロ終了 → フェードアウト */
body.intro-done #intro-logo{
  opacity: 0;
}

/* 同時に #page フェードイン */
#page{
  opacity: 1;
  transition: opacity .5s ease;
}

body.intro-done #page{
  opacity: 1;
}
/* ----------------------------------------
   Intro Images (preview base)
---------------------------------------- */
#intro-logo .intro-image{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* 画像は一旦「画面内に収める」 */
#intro-logo .intro-image img{
  max-width: 90vw;
  max-height: 70vh;
  width: auto;
  height: auto;
  display: block;
  opacity: 0;
  transition: opacity .8s ease;
}

/* intro-content で画像もフェードイン */
body.intro-content #intro-logo .intro-image img{
  opacity: 1;
}



/* ロゴとコピーを前面に（positionは潰さない） */
#intro-logo .logo-svg{
  position: relative;
  z-index: 2;
}

#intro-logo .intro-copy{
  z-index: 2; /* position: fixed は上の定義を生かす */
}
/* 画像イントロ 1_full の時だけ：コピーライトを右下へ */
#intro-logo .intro-media.intro-layout-1_full + .intro-copy{
  right: auto;
  left: 2%;
  transform: none;
  text-align: left;
}

#intro-logo .intro-onebox{
  position: fixed;
  inset: 0;
  overflow: hidden;
}
#intro-logo .intro-fullbox{
  position: absolute;
  left: 0;
  right: 0;
  top: 10vh;
  bottom: 10vh;
  background: no-repeat center center / cover;

  opacity: 0;
  transition: opacity 1s ease;
}
/* 初期は透明 */
#intro-logo .intro-fullbox {
  opacity: 0;
  transition: opacity 1s ease;
}

body.intro-content #intro-logo .intro-fullbox {
  opacity: 1;
}

#intro-logo .intro-centerbox {
  position: absolute;
  top: 10vh;
  left: 0;
  width: 100%;
  height: 80vh;
  pointer-events: none;
}
#intro-logo .intro-centerimg {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-48%, -50%);
  max-width: 50vw;
  max-height: auto;
  opacity: 0;
  transition: opacity 1s ease;
}
body.intro-content #intro-logo .intro-centerimg{
  opacity:1;
}


#intro-logo .intro-media.intro-layout-1_center + .intro-copy {
  right: auto;
  left: 2%;
  transform: none;
  text-align: left;
}

/* 画像イントロ（.intro-media--image の直後にあるコピー）だけ色を変える */
#intro-logo .intro-media--image + .intro-copy{
  color: var(--intro-copy, inherit);
}
#intro-logo .intro-media--image + .intro-copy .home-link{
  color: inherit;
}
/* 2_a：1_center と同じ中央配置の考え方で「箱」を中央に */
/*#intro-logo .intro-2centerbox{
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-48%, -50%);
  width: 70%;
  display: flex;
  justify-content: space-between;
  gap: 0;
}
*/
/* 中の2枚（横並び） */
/*#intro-logo .intro-2centerimg{
  width: 50%;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease;
}*/
#intro-logo .intro-2centerbox{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(1800px,75vw);
  aspect-ratio:16 / 9;
}

#intro-logo .intro-2centerimg{
  position:absolute;
  aspect-ratio:1 / 1;
  object-fit:cover;
  max-width:none;
  opacity:0;
  transition:opacity 1s ease;
}

/* 1枚目 */
#intro-logo .intro-2centerimg:nth-child(1){
  left:0;
  top:0;
  width:52%;
  z-index:1;
}

/* 2枚目 */
#intro-logo .intro-2centerimg:nth-child(2){
  right:0;
  top:60%;
  width:48%;
  transform:translateY(-50%);
  z-index:2;
}
/* 既存JS（intro-content）でフェード */
body.intro-content #intro-logo .intro-2centerimg{
  opacity: 1;
}
#intro-logo .intro-2a-img{
  width: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
}
/* 2_b：hero と同じ構図＋中央配置 */
#intro-logo .intro-2overlapbox{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(2000px, 80vw);
  aspect-ratio: 16 / 9;
}

/* 2枚を重ねるために絶対配置 */
#intro-logo .intro-2overlapimg{
  position: absolute;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease;
}

#intro-logo .intro-2overlapimg--back{
  left: 0;
  top: 0;
  width: 85%;
  z-index: 1;
}

#intro-logo .intro-2overlapimg--front{
  right: 0;
  top: 58%;
  width: 47%;
  transform: translateY(-50%);
  z-index: 2;
}

/* 既存JSでフェード */
body.intro-content #intro-logo .intro-2overlapimg{
  opacity: 1;
}
/* 画像イントロ（intro-media--image の直後にあるコピー）だけ左寄せ */
#intro-logo .intro-media--image + .intro-copy{
  right: auto;
  left: 2%;
  transform: none;
  text-align: left;
}

/* ----------------------------------------
   2_c：2_bの縮小版（縦画像向け）
---------------------------------------- */

/* 器：2_bより合計幅を小さく */
#intro-logo .intro-2narrowbox{
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-48%, -50%);
  width: 70%;    /* ← ここを小さくして「2枚合計幅」を絞る */
  height: 80vh;
}

/* 2枚を重ねる（2_bと同じ思想） */
#intro-logo .intro-2narrowimg{
  position: absolute;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease;
}

#intro-logo .intro-2narrowimg--back{
  z-index: 1;
  left: 0;
  top: 0;
  width: 58%;    /* ← 2_bより少し細め */
}

#intro-logo .intro-2narrowimg--front{
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 48%;    /* ← 2_bより少し細め */
  transform: translate(-6%, -6%); /* ← 2_bと同じ“内側に寄せて重ねる” */
}

body.intro-content #intro-logo .intro-2narrowimg{
  opacity: 1;
}

/* ----------------------------------------
   2_d：縦 同サイズ（80vh）対角ズラし重ね
---------------------------------------- */
#intro-logo .intro-2d-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1800px, 75vw);
  display: flex;
  gap: 0;
  align-items: stretch;
}

#intro-logo .intro-2d-img{
  position: static;
  width: 50%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  opacity: 0;
  transition: opacity 1s ease;
}

#intro-logo .intro-2d-img--back{
  z-index: 1;
}

#intro-logo .intro-2d-img--front{
  z-index: 2;
  transform: none;
}


/* 既存JSでフェード */
body.intro-content #intro-logo .intro-2d-img{
  opacity: 1;
}
#intro-logo .intro-2d-img--front{
  transition-delay: .1s;  /* ← 遅延時間（調整可） */
}


/* ----------------------------------------
   3_a：左 縦1枚 / 右 横2枚（上下） ※トリミングOK
---------------------------------------- */

#intro-logo .intro-3a-box{
  position: absolute;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(2000px, 75vw);
  height: 70vh;
  display: flex;
  gap: 0;
}

/* 左：縦 */
#intro-logo .intro-3a-left{
  width: 50%;
  height: 100%;
  overflow: hidden;
}
/* 3_a：左1枚目を縦トリミング */
#intro-logo .intro-3a-img--1{
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* 右：上下2段（横画像想定） */
#intro-logo .intro-3a-right{
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#intro-logo .intro-3a-rightrow{
  flex: 1;
  overflow: hidden;
}

/* 画像共通：トリミング */
#intro-logo .intro-3a-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  opacity: 0;
  transition: opacity 1s ease;
}

/* 既存JS（intro-content）でフェード */
body.intro-content #intro-logo .intro-3a-img{
  opacity: 1;
}

/* ----------------------------------------
   3_b：右寄せ3カラム（上10vh）
---------------------------------------- */

#intro-logo .intro-3b-box{
  position: absolute;
  top: 10vh;
  right: 0;
  width: min(2000px, 85vw);
  height: 55vh;

  display: flex;
  gap: 0;
}

#intro-logo .intro-3b-img{
  width: calc(100% / 3);
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1s ease;
}

#intro-logo .intro-3b-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.intro-content #intro-logo .intro-3b-img{
  opacity: 1;
}


/* イントロ終了時の“余韻”：#page のフェードインを少し遅らせる */
body.intro-done #page{
  transition-delay: .15s; /* ← 0.15〜0.4sで好みに調整 */
}

/* イントロ側は少し長めにフェードアウト（余韻） */
body.intro-done #intro-logo{
  transition: opacity 0.9s ease;
}

/* 念のため：#page 側のディレイを通常時はゼロに戻す */
#page{
  transition-delay: 0s;
}

#home-hero img {
  width: 100%;
  max-width: 2000px;
  height: auto;
}

/* ----------------------------------------
   Home Hero 1_center : シンプル構成
---------------------------------------- */

/* ヒーロー全体を基準に */
#home-hero.home-hero--1_center{
  position: relative;
  margin-top: 10vh;
}

/* 画像を右寄せの“土台”にする */
#home-hero.home-hero--1_center .home-hero__media{
  width: 80%;          /* ←後であなたが調整 */
  margin-left: auto;   /* 右寄せ */
}

/* 左側（ロゴ＋メニュー）はabsoluteで積む */
#home-hero.home-hero--1_center .home-hero__side{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

/* メニューを縦並びに */
#home-hero.home-hero--1_center .primary-navigation .menu-wrapper{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#home-hero.home-hero--1_center .logo-wrap{
  max-width: none;
  width: 22vw; /* ←調整 */
}
#home-hero.home-hero--1_center .logo-svg{
  width: 100%;
  height: auto;
}
.home .site-main {
  padding-top: 0;
}

/* ----------------------------------------
   Home Hero内：TT1の site-branding margin を全BPで無効化
---------------------------------------- */

#home-hero.home-hero--1_center .site-branding{
  margin: 0 !important;
}

/* ----------------------------------------
   Home Hero 2_d（intro 2_d を hero でも再現）
   ※ 2_d だけ max-width解除しない（下コンテンツとツラ一致させる）
---------------------------------------- */

/* ① 2_d は「中央寄せ制限を解除しない」：margin-top だけ付与 */
.home.blog .site-main > #home-hero.home-hero--2_d{
  margin-top: 10vh;
}

/* ヒーロー全体 */
#home-hero.home-hero--2_d{
  position: relative;
}

/* ② 左サイド（ロゴ＋縦メニュー） */
#home-hero.home-hero--2_d .home-hero__side{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

/* メニュー縦 */
#home-hero.home-hero--2_d .primary-navigation .menu-wrapper,
#home-hero.home-hero--2_d .primary-navigation #primary-menu-list{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ③ 右：画像エリア（右寄せ） */
#home-hero.home-hero--2_d .home-hero__media{
  width: 80%;
  margin-left: auto;
}
/* Home Hero 2_d：introと同じ「2枚横並び・同サイズ」 */
#home-hero.home-hero--2_d .intro-2d-box{
  display: flex;
  width: 100%;
  gap: 0;              /* すき間不要なら0 */
  align-items: stretch;
}
#home-hero.home-hero--2_d .intro-2d-img{
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
/* 共通 img {width:100%} が来ても崩れないように 2枚分で制御 */
#home-hero.home-hero--2_d .intro-2d-img{
  position: static;
  width: 50% !important;
  height: auto;
  max-width: none;
  display: block;
}
/* Home Hero 2_d：ロゴサイズ（1_centerと同じに揃える） */
#home-hero.home-hero--2_d .logo-wrap{
  max-width: 22vw;
}

/* ----------------------------------------
   HOME HERO : 2_b
   ※現状の 2_a の見た目を移植
---------------------------------------- */

/* 親テーマの中央寄せ制限を解除 */
.home.blog .site-main > #home-hero.home-hero--2_b{
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  margin-top: 10vh;
}

/* ヒーロー全体 */
#home-hero.home-hero--2_b{
  position: relative;
  width: 100%;
  min-height: 65vh;
}

/* 左サイド（ロゴ＋メニュー） */
#home-hero.home-hero--2_b .home-hero__side{
  width: 100%;
  max-width: var(--responsive--alignwide-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0;
  padding-right: var(--global--spacing-horizontal) !important;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
  padding-top: 18vh;
}

/* メニュー縦 */
#home-hero.home-hero--2_b .primary-navigation .menu-wrapper,
#home-hero.home-hero--2_b .primary-navigation #primary-menu-list{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ロゴサイズ */
#home-hero.home-hero--2_b .logo-wrap{
  max-width: none;
  width: 22vw;
}

/* 画像エリア */
#home-hero.home-hero--2_b .home-hero__media{
  position: absolute;
  top: 0;
  right: 0;
  width: min(1800px, 75vw);
  margin: 0;
  z-index: 1;
}

/* 現状の 2_a 見た目 */
#home-hero.home-hero--2_b .intro-2overlapbox{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

#home-hero.home-hero--2_b .intro-2overlapimg{
  position: absolute;
  height: auto;
  display: block;
  max-width: none;
}

#home-hero.home-hero--2_b .intro-2overlapimg--back{
  left: 0;
  top: 0;
  width: 85%;
  z-index: 1;
}

#home-hero.home-hero--2_b .intro-2overlapimg--front{
  right: 0;
  top: 58%;
  width: 47%;
  transform: translateY(-50%);
  z-index: 2;
}

/* =========================================================
   HOME HERO : 2_c（2_d 完全流用版）
========================================================= */

#home-hero.home-hero--2_c{
  position: relative;
  margin-top: 10vh;
}

/* 左サイド（ロゴ＋縦メニュー） */
#home-hero.home-hero--2_c .home-hero__side{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

/* メニュー縦 */
#home-hero.home-hero--2_c .primary-navigation .menu-wrapper,
#home-hero.home-hero--2_c .primary-navigation #primary-menu-list{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 右：画像エリア（右寄せ） */
#home-hero.home-hero--2_c .home-hero__media{
  width: 80%;
  margin-left: auto;
}

/* ロゴサイズ（必要なら） */
#home-hero.home-hero--2_c .logo-wrap{
  max-width: 22vw;
}
/* =========================================================
   HOME HERO : 2_c（画像配置のみ）
========================================================= */

/* =========================================================
   HOME HERO : 2_c（ゴール版：front を上に持ち上げて重ねる）
========================================================= */

#home-hero.home-hero--2_c .intro-2narrowbox{
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 3 / 4;
}

#home-hero.home-hero--2_c .intro-2narrowimg{
  position: absolute;
  height: auto;
  max-width: none;
  display: block;
}

#home-hero.home-hero--2_c .intro-2narrowimg--back{
  left: 0;
  top: 0;
  width: 58%;
}

#home-hero.home-hero--2_c .intro-2narrowimg--front{
  right: 0;
  bottom: 0;
  width: 48%;
  transform: translate(-6%, -76%);
}
#home-hero.home-hero--2_c .intro-2narrowbox{
  margin-bottom: -47.4%;
}

/* ----------------------------------------
   HOME HERO : 2_a
   ※2_d と同じ並び / 画像は正方形
---------------------------------------- */

.home.blog .site-main > #home-hero.home-hero--2_a{
  margin-top: 10vh;
}

#home-hero.home-hero--2_a{
  position: relative;
}

#home-hero.home-hero--2_a .home-hero__side{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

#home-hero.home-hero--2_a .primary-navigation .menu-wrapper,
#home-hero.home-hero--2_a .primary-navigation #primary-menu-list{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#home-hero.home-hero--2_a .home-hero__media{
  width: 80%;
  margin-left: auto;
}

#home-hero.home-hero--2_a .logo-wrap{
  max-width: 22vw;
}

/* 2_d と同じ横並び / ただし正方形 */
#home-hero.home-hero--2_a .intro-2centerbox{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

#home-hero.home-hero--2_a .intro-2centerimg{
  position: absolute;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  max-width: none;
}

/* 1枚目（大きい） */
#home-hero.home-hero--2_a .intro-2centerimg:nth-child(1){
  left: 0;
  top: 0;
  width: 52%;
  z-index: 1;
}

/* 2枚目（小さい＋下） */
#home-hero.home-hero--2_a .intro-2centerimg:nth-child(2){
  right: 0;
  top: 60%;
  width: 48%;
  transform: translateY(-50%);
  z-index: 2;
}
/* ----------------------------------------
   Home Hero 3_a（2_a 完全流用：外枠だけ）
   1) #home-hero は中央寄せ制限から外す（最重要）
   2) 左（ロゴ＋縦メニュー）は本文ツラ（content幅）で揃える
   3) 右（画像エリア）はウィンドウ右端に付ける
---------------------------------------- */

/* ① 親テーマの .site-main > * 中央寄せ制限を 3_a の hero だけ解除 */
.home.blog .site-main > #home-hero.home-hero--3_a{
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  margin-top: 5vh;
}

/* ヒーロー全体 */
#home-hero.home-hero--3_a{
  position: relative;
  width: 100%;
  /* 右の画像（absolute）ぶんの高さを確保して、次のコンテンツが潜らないようにする */
  min-height: clamp(620px, 55vw, 980px); /* ← 2_aより3枚なので大きめ */
}

/* ② 左サイド（本文ツラに揃える：content幅で中央配置） */
#home-hero.home-hero--3_a .home-hero__side{
  width: 100%;
  max-width: var(--responsive--alignwide-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0;
  padding-right: var(--global--spacing-horizontal) !important;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
  padding-top: 18vh;
}

/* メニュー縦（親の @media を潰す） */
#home-hero.home-hero--3_a .primary-navigation .menu-wrapper,
#home-hero.home-hero--3_a .primary-navigation #primary-menu-list{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#home-hero.home-hero--3_a .logo-wrap{
  max-width: none;
  width: 22vw;
}

/* ③ 右：画像エリア（ウィンドウ右端に固定） */
#home-hero.home-hero--3_a .home-hero__media{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;   /* ← 追加：高さを持たせる */
  width: 75vw;
  margin: 0;
  z-index: 1;
}

/* ----------------------------------------
   Home Hero 3_a：画像レイアウト（3枚）
   左=縦1枚 / 右=横2枚（上下）
   ※ 左の高さ = 右の上下2段合計高さ を必ず一致
---------------------------------------- */

/* 3_a：intro と同じ「箱に高さ」方式 */
#home-hero.home-hero--3_a .intro-3a-box{
  height: 70vh;
  display: flex;
  gap: 0;
}

#home-hero.home-hero--3_a .intro-3a-left{
  width: 50%;
  height: 100%;
  overflow: hidden;
}
/* 3_a：左1枚目を縦トリミング */
#home-hero.home-hero--3_a .intro-3a-img--1{
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
#home-hero.home-hero--3_a .intro-3a-right{
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#home-hero.home-hero--3_a .intro-3a-rightrow{
  flex: 1;
  overflow: hidden;
}

#home-hero.home-hero--3_a .intro-3a-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----------------------------------------
   HERO 3_b：画像配置（Intro 3_b を流用）
---------------------------------------- */
/* ① 親テーマの .site-main > * 中央寄せ制限を 2_a の hero だけ解除 */
.home.blog .site-main > #home-hero.home-hero--3_b{
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  margin-top: 10vh;
}

/* ヒーロー全体 */
#home-hero.home-hero--3_b{
  position: relative;
  width: 100%;
  /* Intro 3_b と同じ：top(10vh)+height(55vh)=65vh で確実に潜り防止 */
  min-height: 65vh;
}

/* ② 左サイド（本文ツラに揃える：content幅で中央配置） */
#home-hero.home-hero--3_b .home-hero__side{
  width: 100%;
  max-width: var(--responsive--alignwide-width) !important; /* 本文と同じ */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0; /* 本文と同じ左右余白 */
  padding-right: var(--global--spacing-horizontal) !important;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
  padding-top: 18vh;
}

/* メニュー縦（親の @media を潰す） */
#home-hero.home-hero--3_b .primary-navigation .menu-wrapper,
#home-hero.home-hero--3_b .primary-navigation #primary-menu-list{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ③ 右：画像エリア（ウィンドウ右端に固定） */
#home-hero.home-hero--3_b .home-hero__media{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  margin: 0;
  z-index: 1;
}

/* 2枚横並び */
#home-hero.home-hero--3_b .intro-2centerbox{
  display: flex;
  width: 100%;
  margin: 0;
}

/* 2枚を50% */
#home-hero.home-hero--3_b .intro-2centerimg{
  width: 50%;
  height: auto;
  display: block;
}
#home-hero.home-hero--3_b .logo-wrap {
max-width: none;
width: 22vw;
}


#home-hero.home-hero--3_b .intro-3b-box{
  position: absolute;
  /*top: 10vh;*/
  right: 0;
  width: min(2000px, 72vw);
  height: 55vh;

  display: flex;
  gap: 0;
}

#home-hero.home-hero--3_b .intro-3b-img{
  width: calc(100% / 3);
  height: 100%;
  overflow: hidden;
}

#home-hero.home-hero--3_b .intro-3b-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*ヘッダーの設定*/
/*ホーム以外*/
/* ----------------------------------------
   home以外：ロゴの下にナビ（左揃え固定）
---------------------------------------- */
body:not(.home) #masthead,
body:not(.home) .site-header{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ナビが右に飛ぶ原因（margin-left:auto 等）を潰す */
body:not(.home) #site-navigation{
  width: auto;
  margin-top: 20px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* nav内のulが右寄せ/中央寄せになってる場合も左に */
body:not(.home) #site-navigation .primary-navigation{
  justify-content: flex-start;
}

body:not(.home) .site-title {
margin: 0;
line-height: 1;
}
body:not(.home) #page {
  padding-top: 5vh;
}

body:not(.home) .site-main > article > * {
  margin-top: 0;
}
/* home以外でロゴ下にナビ */

/* single-item */
.topicpath-nav {
    margin-bottom: 5px;
}
.breadcrumb ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 0;
    padding-left: 0;
}
ul.inline, ol.inline {
    margin-left: 0;
    list-style: none;
}
.breadcrumb li:not(.bc-home):not(.bc-line) + li:not(.bc-line)::before {
    content: "/";
    margin: 0 8px;
}
.topicpath-nav h1 {
    font-size: 12px;
    font-weight: normal;
    margin: 0;
    display: inline;
    color: #464e54;
}
.txt_12 {
    font-size: 12px;
}
.bc-line {
    width: 40px;
    height: 1px;
    background: #000;
    margin: 0 12px;
    list-style: none;
}
.bc-home a {
  text-decoration: none;
  color: #464e54;
}
.bc-home a:hover {
  
}
.item-name-en {
color: #888;
letter-spacing: 0.05em;
padding-left: 1.5px;
margin-bottom: 10px;
}
.item-name-ja {
  font-size: 16px;
  font-weight: bold;
}
.item-color{
  margin-top: 8px; /* 必要なら調整 */
}

/* color / material 共通：横並びの土台 */
.item-meta__head{
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
}

/* ✅ ここが肝：ラベル幅を固定 */
.item-meta__label{
  flex: 0 0 80px;   /* ←ここを調整（例: 70〜100px） */
  margin-right: 12px;
}

/* 既存の線 */
.item-meta__head .bc-line{
  flex: 0 0 40px;
  height: 1px;
  background: #888;
  margin: 0 30px 0 0;
  margin-top: 0.7em;
}

/* 値は残り全部 */
.item-meta__value{
  flex: 1;
}
.item-meta__value p{ margin: 0; }
.item-meta {
 color: #888;
 margin-top: 12px;
}
.item-color .bc-line,
.item-material .bc-line{
  display:none;
}
.item-meta__head{
  display:flex;
  align-items:flex-start;
}

/* ← 全部ここで揃える */
.item-meta__label{
  flex:0 0 120px; /* 好きな幅 */
  letter-spacing: 1px;
}

/* value開始位置固定 */
.item-meta__value{
  flex:1;
}

.item-meta__value p{
  margin:0;
  font-size: 13px;
  letter-spacing: 1px;
}
.item-info-head{
  display:flex;
  align-items:center;
  margin-bottom: 15px;
  margin-top: 20px;
}

.item-info-head .bc-line{
  width:40px;
  height:1px;
  background:#888;
  margin-right:12px;
  margin-left: 0;
}

.item-info-title{
  margin:0;
  letter-spacing:2px;
  font-size:12px;
}
h2.item-section__title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.item-section__text {
  letter-spacing: 0.09em;
}
.item-meta__label.moji-en {
  font-size: 12px;
  letter-spacing: 0.09em;
}
.site-main > article > .item-section {
  margin-bottom: 45px;
}

/*noticeの部分*/
.textBox{
  border: 1px solid #cdcdcd;
  border-radius: 5px;
  padding: 30px;
  position: relative;
}
.site-main > article > .product-notice.textBox {
  margin-top:100px;
}
.textBox::before{
  content:"Notice";
  position:absolute;
  top:-19px;
  left:30px;
  background:#fff;
  color:#888;
  font-size:14px;
  font-weight:600;
  padding:5px 15px;
  font-family:'Inter', sans-serif;
  letter-spacing: 0.08em;
}
.notice-en {
  font-family:'Inter', sans-serif;
  color: #888;
  font-size: 12px;
  margin-top: 10px;
}
.notice-ja {
  color: #888;
  font-size: 14px;
}
.item-section__sub--material{
  display: flex;
  align-items: flex-start;
  gap: 1.2em;
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.1em;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}
.item-section__sub--material .bc-line{
  flex: 0 0 55px;
  margin: 10px 15px 0 0;
  background-color: #cdcdcd;
}

/* wpautop の <p> 余白を殺す */
.item-section__sub--material .item-section__sub-body p{
  margin: 0;
}
.item-section__sub--material .item-section__sub-label{
  flex: 0 0 72px;
  font-size: 12px;
  color: #888;
}
/* size は 3列ではなく縦積み */
.item-meta.item-size .item-meta__label{
  display: block;
}

.item-meta__value--size{
  margin-top: 0.6em;
}

.item-size-title{
  margin-bottom: 0.4em;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.item-size-row{
  margin: 0 0 0.35em 0;
}
.item-size-row:last-child{
  margin-bottom: 0;
}
.item-size-text {
  font-size: 13px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}
.item-size-name {
  font-size: 11px;
}
.item-size-unit {
  font-size: 11px;
  padding-left: 2px;
}
.item-size-label {
  padding-right: 3px;
}
/* ----------------------------------------
   section_size 直下の「（サイズ）───」だけに効かせる
   ※上の ITEM INFORMATION は崩さない
---------------------------------------- */
.item-section--size .item-section__sub--size{
  display: flex;
  align-items: flex-start;
  gap: 1.2em;
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.1em;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

.item-section--size .item-section__sub--size .item-section__sub-label{
  flex: 0 0 72px;
  font-size: 12px;
  color: #888;
}

.item-section--size .item-section__sub--size .bc-line{
  flex: 0 0 55px;
  margin: 10px 13px 0 0;
  background-color: #cdcdcd;
}

/* wpautop の <p> 余白を殺す（size側だけ） */
.item-section--size .item-section__sub--size .item-section__sub-body p{
  margin: 0;
}

/* 追加のサイズ表（Free/S/M...）の行間だけ */
.item-section--size .item-section__sub--size .item-section__sub-body{
  font-size: 13px; /* ここは好みで */
  line-height: 1.9;
}

/* ======================================
   Article Images : CEREAL風（masonryではない）
   - 2カラム基準（portrait/landscapeとも同じ列幅）
   - 横（landscape）が単独でも100%にしない（中央寄せ）
====================================== */
.item-gallery_cols{
  list-style:none;
  margin:0;
  padding:0;

  display:flex;
  flex-wrap:wrap;

  /* gapは使わず margin 方式（あなたの現方式を維持） */
  margin-left:-40px;
  margin-top:-40px;
}

/* ✅ 最後1枚だけ伸びる問題の吸収（takano方式のafterに近い） */
.item-gallery_cols::after{
  content:"";
  flex-grow:999;
}

.item-gallery_item{
  margin:0;
  display:flex;
  flex-direction:column;

  /* 基本：縦（portrait想定）= 3枚並び */
  width:calc((100% - 40px * 3) / 3);
  margin-left:40px;
  margin-top:40px;

  flex-grow:1;
  max-width:100%;
}

/* 横（landscape想定）= 2枚並び */
.item-gallery_item.is-wide{
  width:calc((100% - 40px * 2) / 2);
  flex-grow:2;
}

/* 縦（明確に縦）= 3枚並びのまま（念のためclassが付いても同じ） */
.item-gallery_item.is-tall{
  width:calc((100% - 40px * 3) / 3);
  flex-grow:1;
}
/* 画像の高さを全員同じにする（=行で揃う） */
.item-gallery_media{
  overflow: hidden;
  height: clamp(240px, 34vw, 520px); /* 好みで調整 */
}

/* 画像は箱に合わせてトリミング */
.item-gallery_media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.item-gallery_media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:50% 50%;
}

/* キャプション（高さは揃えない＝自然に可変でOK） */
.item-gallery_cap{
  margin-top:14px;
  line-height:1.6;
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.08em;
}
/* ===============================
   portraitだけ横を少し縮める
   （Cereal比率）
================================ */

.item-gallery_item.is-tall{
  width:calc((100% - 40px * 3) / 3 * 0.82);
}
/* ===============================
   SIRONE GALLERY
   a有無で表示が変わらない完全版
================================ */
/* --------------------------------
   共通
-------------------------------- */
.sirone-gallery{
  display: grid;
  gap: 20px;
  margin: 0;
}

.sirone-gallery__item{
  margin: 0;
}

/* 画像枠（ここだけ比率固定＆クロップ） */
.sirone-gallery__frame{
  width: 100%;
  overflow: hidden;
}

/* a があっても無くても同じ見た目 */
.sirone-gallery__link{
  display: block;
  width: 100%;
  height: 100%;
}
.item-hero .blocks-gallery-caption,
.item-hero figcaption{
  display:none;
}
/* 画像は枠を埋める */
.sirone-gallery__frame img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* キャプション（画像の外＝下に必ず出る） */
.sirone-gallery__caption{
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  line-height:1.6;
}
padding: 10px;

/* =====================================
   1 : FULL（横1枚）
===================================== */
.sirone-gallery--full{
  grid-template-columns: 1fr;
}
.sirone-gallery--full .sirone-gallery__frame{
  aspect-ratio: 2000 / 1333;
}

/* =====================================
   2 : 横2枚
===================================== */
.sirone-gallery--wide2{
  grid-template-columns: repeat(2, 1fr);
}
.sirone-gallery--wide2 .sirone-gallery__frame{
  aspect-ratio: 2000 / 1333;
}

/* =====================================
   3 : 縦2枚
===================================== */
.sirone-gallery--port2{
  grid-template-columns: repeat(2, 1fr);
}
.sirone-gallery--port2 .sirone-gallery__frame{
  aspect-ratio: 1333 / 2000;
}

/* =====================================
   4 : 正方形2枚
===================================== */
.sirone-gallery--sq2{
  grid-template-columns: repeat(2, 1fr);
}
.sirone-gallery--sq2 .sirone-gallery__frame{
  aspect-ratio: 1 / 1;
}

/* =====================================
   5 : 縦3枚
===================================== */
.sirone-gallery--port3{
  grid-template-columns: repeat(3, 1fr);
}
.sirone-gallery--port3 .sirone-gallery__frame{
  aspect-ratio: 1333 / 2000;
}

/* =====================================
   MOBILE
===================================== */
/*@media (max-width: 782px){
  .sirone-gallery--wide2,
  .sirone-gallery--port2,
  .sirone-gallery--sq2,
  .sirone-gallery--port3{
    grid-template-columns: 1fr;
  }
}*/

/* =========================
   Footer menu
   - 1行のまま（縦積み禁止）
   - 塊ごと回転して左端fixed（Instagram / ORDINARY FITS方式）
   - spacer は横線（liで描く）
   - Login / Cart の「/」は menu-slash を付けた li だけ対象
========================= */

/* フッターメニューを左端に固定して縦に見せる（回転） */
.footer-navigation{
  position: fixed;
  left: 2%;
  top: 50%;
  transform: rotate(-90deg) translateX(-100%) translateY(-50%);
  transform-origin: left top;
  z-index: 99;
  font-size: 13px;
  letter-spacing: 0.2em;
  font-weight: 500;
}

/* “1行”を維持（縦積み禁止） */
.footer-navigation-wrapper{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

/* リンク見た目（共通） */
.footer-navigation-wrapper li a{
  display: inline-block;
  text-decoration: none;
  padding: 0;
}

/* spacer（横線）：aは消して、liで線を描く */
.footer-navigation-wrapper .menu-spacer{
  width: 55px;
  height: 1px;
  background: #000;
  margin: 0 12px;
  pointer-events: none;
}
.footer-navigation-wrapper .menu-spacer > a{
  display: none !important; /* 四角/文字の原因を断つ */
}

/* Login / Cart の「/」だけ（menu-slash を付けてる前提） */
.footer-navigation-wrapper .menu-slash{
  pointer-events: none;
}
.footer-navigation-wrapper .menu-slash a{
  text-decoration: none;
  margin: 0 6px;
}

/* =========================
   オーバーレイの設定
========================= */
.nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
  z-index: 100;
}

.nav-open .nav-overlay{
  opacity: 1;
  visibility: visible;
}
.site-nav{
  position: fixed; /* 既にあるが念のため */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: 60px 8% 40px;
  background: rgba(249,249,249,0.98);
  opacity: 0;
  visibility: hidden;
  transform: translateX(28px);
  z-index: 110;
  position: fixed; /* 既にあるが念のため */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-open .site-nav{
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.nav-toggle{
  position: fixed;
  top: 2vh;
  right: 2%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 120;
}
.nav-toggle span{
  position: absolute;
  left: 50%;
  width: 50px;
  height: 2px;
  background: #111;
  transform: translateX(-50%);
  transition: transform .3s ease;
}

.nav-toggle .top{
  top: 10px;
}

.nav-toggle .bottom{
  top: 24px;
}


html.nav-open,
body.nav-open,
html.intro-done.show-scroll.nav-open,
body.intro-done.show-scroll.nav-open{
  overflow: hidden !important;
}
/* イントロが動いてる間はメニューUIを出さない/触らせない */
.intro-loading .nav-toggle,
.intro-loading .site-nav,
.intro-loading .nav-overlay,
.intro-content .nav-toggle,
.intro-content .site-nav,
.intro-content .nav-overlay{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nav-toggle{
  border: none;
}
.nav-toggle:focus,
.nav-toggle:focus-visible{
  outline: none;
}
.nav-open .nav-toggle .top{
  transform: translateX(-50%) rotate(30deg);
}

.nav-open .nav-toggle .bottom{
  transform: translateX(-50%) rotate(-30deg);
}
.nav-open .nav-toggle .top,
.nav-open .nav-toggle .bottom{
  top: 17px;
  right: 3%;
}
/* 2枚目（背面スライド板） */
.site-nav{
  transition: opacity .8s cubic-bezier(.4,0,.2,1),
            transform .8s cubic-bezier(.4,0,.2,1),
            visibility 0s linear .8s;
}

/* ✅ 開く時だけ “余韻” を足す */
.nav-open .site-nav{
  transition: opacity 1.0s cubic-bezier(.4,0,.2,1),
            transform 1.2s cubic-bezier(.4,0,.2,1),
            visibility 0s;
}
.site-nav::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(235,235,235,0.95);
  transform: translateX(34px); /* ✅ ずらし量を増やして “動いた感” */
  opacity: 1;                 /* ✅ 開く瞬間に背面板が少し見える */
  z-index: 0;
  transition:
    transform 1.2s cubic-bezier(0.25,0.1,0.25,1),
    opacity .55s ease;
}

/* ✅ 開く：背面板は少し遅れて消える（余韻） */
.nav-open .site-nav::before{
  transform: translateX(0);
  opacity: 0;
  transition-delay: 0s, .35s; /* transformはすぐ / opacityは少し余韻 */
}
/* メニュー中身を前面へ */
.site-nav > *{
  position: relative;
  z-index: 1;
}
/* -------------------------
   Overlay background (nav-open時だけ)
------------------------- */

/*.nav-open .site-nav{

  background-color: rgba(255, 255, 255, 0.55);

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.08) 0,
      rgba(0,0,0,0.08) 1px,
      transparent 1px,
      transparent 14px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.08) 0,
      rgba(0,0,0,0.08) 1px,
      transparent 1px,
      transparent 14px
    );

}*/
/*.nav-open .site-nav{

  background-color:#fff;

  background-image:
    radial-gradient(
      circle,
      rgba(220,80,80,0.55) 0 1.2px,
      transparent 1.3px
    );

  background-size:20px 20px;

}*/
.nav-open .site-nav{

  background-color: rgba(255,255,255,0.55);

  background-image:
    repeating-linear-gradient(
      0deg,
      var(--grid-color) 0,
      var(--grid-color) 1px,
      transparent 1px,
      transparent 14px
    ),
    repeating-linear-gradient(
      90deg,
      var(--grid-color) 0,
      var(--grid-color) 1px,
      transparent 1px,
      transparent 14px
    );

}

/* =========================
   カラーミーカテゴリ
========================= */

.cm-category{
  width:100%;
}

.cm-category__list{
  list-style:none;
  margin:0;
  padding:0;

  width:100%;
  max-width:2000px;
  margin-left:auto;
  margin-right:auto;

  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:30px; /* 上下と左右の隙間 */
}

.cm-category__item{
  position:relative;
}

.cm-category__link{
  display:block;
  position:relative;
}

/* 2000 × 1333 比率 */
.cm-category__image{
  width:100%;
  aspect-ratio:2000 / 1333;
  object-fit:cover;
  display:block;
}

.cm-category__title{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);

  color:#fff;
  font-size:20px;
  font-weight:600;
  text-align:center;
  letter-spacing:0.05em;

  pointer-events:none;
}
.cm-category__image{
  transition:opacity .35s ease;
}

.cm-category__link:hover .cm-category__image{
  opacity:0.75;
}

/* =========================
   縦画像レイアウト強制
========================= */

/* =========================
   2_d：縦サイズ強制（intro / hero 共通）
========================= */
#intro-logo .intro-2d-img,
#home-hero.home-hero--2_d .intro-2d-img{
  width: 50% !important;
  aspect-ratio: 3 / 4;
  height: auto !important;
  object-fit: cover;
  max-width: none;
  display: block;
}
/* =========================
   2_c：縦サイズ強制（intro / hero 共通）
========================= */
#intro-logo .intro-2narrowimg,
#home-hero.home-hero--2_c .intro-2narrowimg{
  aspect-ratio: 3 / 4;
  object-fit: cover;
  height: auto;
  max-width: none;
  display: block;
}
/* ======================================
   side-menu item list
====================================== */
.side-menu-items{
  margin-top: 140px;
  margin-bottom: calc(3 * var(--global--spacing-vertical));
}
.side-menu-items.saigo {
  margin-bottom: 100px;
}
.side-menu-items .side-info__more {
  margin-top: 30px;
}
.side-menu-items__list{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 24px;
}

.side-menu-items__item{
  margin: 0;
  padding: 0;
}

.side-menu-items__link{
  display: block;
  text-decoration: none;
  color: inherit;
}
.side-menu-items__link{
  transition: opacity .35s ease;
}

.side-menu-items__link:hover{
  opacity:0.75;
}


/*.side-menu-items__image{
  width: 100%;
  aspect-ratio: 1500 / 994;
  overflow: hidden;
}*/
.side-menu-items__image{
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.side-menu-items__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.side-menu-items__text{
  margin-top: 12px;
}

.side-menu-items__name-en,
.side-menu-items__name-ja{
  margin: 0;
}

.side-menu-items__name-en{
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
}

.side-menu-items__name-ja{
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
}
.side-menu-items__image img{
  width:100%;
  height:100% !important;
  object-fit:cover;
  display:block;
}

/*@media (max-width: 900px){
  .side-menu-items__list{
    grid-template-columns: repeat(2, 1fr);
  }
}*/


/* ======================================
   side information
====================================== */

.side-info{
  margin-top: 140px;
}

.side-info__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.side-info__item{
  margin: 0;
  padding: 0;
  border-bottom: 1px dotted #111;
}
.side-info__list li.side-info__item:last-child {
  border-bottom: none;
}
.side-info__link{
  display: grid;
  grid-template-columns: 60px 16px 180px 16px minmax(0, 1fr);
  align-items: center;
  column-gap: 0;
  padding: 14px 0;
  text-decoration: none;
  color: inherit;
}

.side-info__cat{
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  font-family: 'Inter', sans-serif;
  text-transform: capitalize;
}

.side-info__bar{
  text-align: center;
  font-size: 12px;
  line-height: 1;
  color: #888;
  font-family: 'Inter', sans-serif;
}

.side-info__date{
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  text-align: center;
}

.side-info__title{
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 20px;
}

.side-info__more{
  margin-top:18px;
}

.side-info__more a{
  display: inline-block;
  padding: 5px 20px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 999px;
  color: #333;
  background: transparent;
  font-family: 'Inter', sans-serif;
  transition: all .25s ease;
}

.side-info__more a:hover{
  background:#f5f5f5;
  border-color:#000;
}

@media (max-width: 900px){
  .side-info__link{
    grid-template-columns: 80px 14px 1fr;
    row-gap: 4px;
  }

  .side-info__bar:nth-of-type(2){
    display: none;
  }

  .side-info__title{
    grid-column: 1 / -1;
  }
}


/* ======================================
   LOCATION
====================================== */

.side-location{
  margin-top: 140px;
}

.side-location__title{
  font-size: 16px;
  letter-spacing: 0.12em;
  margin-bottom: 20px;
  font-weight: 500;
}

.side-location__wrap{
  display: grid;
  grid-template-columns: 32% 1fr;
  gap: 40px;
  align-items: start;
}

.side-location__image{
  width: 100%;
}

.side-location__image img{
  width: 100%;
  height: auto;
  display: block;
}

.side-location__info{
  width: 100%;
}

.side-location__shop{
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 48px;
}

.side-location__name{
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 13px;
}

.side-location__row{
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0 10px;
  align-items: start;
}

.side-location__row--address{
  grid-template-columns: 1fr;
  margin-bottom: 4px;
}

.side-location__label{
  text-align: left;
  white-space: nowrap;
}

.side-location__value{
  min-width: 0;
}

.side-location__map{
  /*margin-left: 10px;*/
  font-size: 13px;
}

.side-location__divider{
  /*border-top: 1px solid rgba(0,0,0,0.15);*/
  margin: 18px 0;
}


/* ======================================
   overlay custom menu
====================================== */
/* overlay menu 横並び */
.side-overlay-menu {
  margin-top: 50px;
}
.side-overlay-menu li a {
text-decoration: none;
font-size: 17px;
font-weight: 500;
}
.side-overlay-menu li a:hover {
  text-decoration: none;
}
.side-overlay-menu__list{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  list-style:none;
  margin:0;
  padding:0;
}

.side-overlay-menu__list li{
  margin:0;
  padding:0;
}

/* ｜を出す */
.side-overlay-menu__list li.menu-bar{
  position:relative;
  padding-left:40px;
}

.side-overlay-menu__list li.menu-bar::before{
  content:"｜";
  position:absolute;
  left:0;
  top:-2px;
}

.side-overlay-menu__list li a {
  color: #000;
  display: block;
  line-height: 1;
  padding: 0;
  text-decoration: none;
  font-size: 15px;
  position: relative; /* ← 必須 */
}

.side-overlay-menu__list li a {
  color: #000;
  display: block;
  line-height: 1;
  padding: 0;
  text-decoration: none;
  font-size: 15px;
  position: relative;
}

.side-overlay-menu__list li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  display: block;
  width: 100%;
  height: 1.2px;
  background: #000;

  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.3s ease-out;
}

.side-overlay-menu__list li a:hover::after,
.side-overlay-menu__list li a:focus::after,
.side-overlay-menu__list li a:active::after {
  transform: scaleX(0);
  transform-origin: right;
}


/* 戻り専用の線 */
.side-overlay-menu__list li a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1.2px;
  background: #000;
  opacity: 0;
}

/* hover外した瞬間にだけ動かす */
.side-overlay-menu__list li a:not(:hover)::before {
  animation: menuLineIn 0.6s ease-out;
}
@keyframes menuLineIn {
  0% {
    left: 0;
    width: 0;
    opacity: 1;
  }
  100% {
    left: 0;
    width: 100%;
    opacity: 1;
  }
}

/* ======================================
  フッター
====================================== */
.site-footer > .site-info {
padding-top: var(--global--spacing-vertical);
font-family: var(--footer--font-family);
font-size: var(--footer--font-size);
line-height: var(--global--line-height-body);
border-top: 1px solid var(--global--color-border);
border-color: #888;
}
.copy-name {
  font-size: 14px;
  font-weight: 500;
}
.no-widgets .site-footer {
margin-top: calc(3 * var(--global--spacing-vertical));
}
.footer-navigation-wrapper li a {
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.footer-navigation-wrapper li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 1px;
  background: #000;

  transform: scaleX(0);        /* 最初は非表示 */
  transform-origin: right;     /* 右からスタート */
  transition: transform 0.3s ease;
}

.footer-navigation-wrapper li a:hover::after {
  transform: scaleX(1);        /* 表示 */
  transform-origin: left;      /* 左に向かって伸びる */
}
.footer-navigation-wrapper li a:hover {
text-decoration: none;
}
/* ======================================
  contact
====================================== */
.contactbox-in {
    max-width: 80%;
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
    margin-top: 20px;
/*border-top: 1px solid #cdcdcd;*/
padding: 80px 1% 0 0;
}
.page-template-page-contact-php .contactbox-in input {
    border-style: none none solid;
    border-width: 1px;
    font-family: 'Rubik', sans-serif;
}
.page-template-page-contact-php .contactbox-in input:focus,
.page-template-page-contact-php .contactbox-in textarea:focus {
    border: 1px solid #c5c5c5;
    outline: 0;
}
.contactbox-in .c-box {
    margin-bottom: 50px;
    overflow: hidden;
}
.page-template-page-contact-php .contactbox-in .c-box.c-ue .c-l {
    margin-bottom: 5px;
}
.page-template-page-contact-php .contactbox-in .c-box .c-l {
    float: left;
    width: 25%;
}
.page-template-page-contact-php .contactbox-in .c-box .c-r {
    float: right;
    width: 75%;
}
.page-template-page-contact-php .contactbox-in .sen-yoko {
    border-bottom: 1.5px solid #000;
    width: 100%;
    max-width: 20px;
    margin-bottom: 40px;
}
.page-template-page-contact-php .contactbox-in .contact-wrap {
    margin: 100px 0 60px;

}
.page-template-page-contact-php .contactbox-in .contact-wrap h2 {
    font-weight: normal;
    text-transform: capitalize;
}
.page-template-page-contact-php .contactbox-in .contact-wrap h2 span {
    font-weight: bold;

}
.page-template-page-contact-php .contact-wrap input {
    border-style: none none solid;
    border-width: 1px;
    font-family: 'Rubik', sans-serif;
}
.page-template-page-contact-php .contact-wrap input:focus,
.page-template-page-contact-php .contact-wrap textarea:focus {
    border: 1px solid #c5c5c5;
    outline: 0;
}
.contact-wrap .c-box {
    margin-bottom: 50px;
    overflow: hidden;
}
.c-box.c-ue {
    margin-top: 70px;
}
.c-box.c-ue.mtue {
    margin-top: 100px;
}
.mannaka {
    text-align: center;
}
div.wpcf7-mail-sent-ok {
    border: 2px solid #444;
}
div.wpcf7-mail-sent-ng {
    border: 2px solid #ff0000;
}
div.wpcf7-spam-blocked {
    border: 2px solid #444;
}
div.wpcf7-validation-errors {
    border: 2px solid #ff0000;
}
/* Buttons */
.sandbox {
    text-align: center;
}
.wpcf7-form input[type="submit"] {
    width:200px;
    margin: auto;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus {
    background: #cdcdcd!important; /* Old browsers */
    background: -webkit-linear-gradient(top, #000 0%, #000 100%)!important; /* Chrome 10+, Safari 5.1+ */
    background:   linear-gradient(to bottom, #000 0%, #000 100%)!important; /* W3C */
    border-bottom: 0px solid #000;
}
.page-template-page-contact-php .contactbox-in button,
.page-template-page-contact-php .contactbox-in input[type="submit"],
.page-template-page-contact-php .contactbox-in input[type="button"],
.page-template-page-contact-php .contactbox-in input[type="reset"] {
    background: #0068b6!important; /* Old browsers */
    background: -webkit-linear-gradient(top, #cdcdcd 0%, #cdcdcd 100%)!important; /* Chrome 10+, Safari 5.1+ */
    background:   linear-gradient(to bottom, #cdcdcd 0%, #cdcdcd 100%)!important; /* W3C */
    border: none;
    border-bottom: 0px solid #cdcdcd;
    border-radius: 0px;
    color: #fff;
    display: inline-block;
    padding: 11px 24px 10px;
    text-decoration: none;
    border-radius: 0 0 0 0;
}

.page-template-page-contact-php .contactbox-in button:hover,
.page-template-page-contact-php .contactbox-in button:focus,
.page-template-page-contact-php .contactbox-in input[type="submit"]:hover,
.page-template-page-contact-php .contactbox-in input[type="button"]:hover,
.page-template-page-contact-php .contactbox-in input[type="reset"]:hover,
.page-template-page-contact-php .contactbox-in input[type="submit"]:focus,
.page-template-page-contact-php .contactbox-in input[type="button"]:focus,
.page-template-page-contact-php .contactbox-in input[type="reset"]:focus {
    background: #cdcdcd!important; /* Old browsers */
    background: -webkit-linear-gradient(top, #000 0%, #000 100%)!important; /* Chrome 10+, Safari 5.1+ */
    background:   linear-gradient(to bottom, #000 0%, #000 100%)!important; /* W3C */
    border-bottom: 0px solid #000;
    outline: none;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.page-template-page-contact-php .contactbox-in button:active,
.page-template-page-contact-php .contactbox-in input[type="submit"]:active,
.page-template-page-contact-php .contactbox-in input[type="button"]:active,
.page-template-page-contact-php .contactbox-in input[type="reset"]:active {
    background: #444!important; /* Old browsers */
    background: -webkit-linear-gradient(top, #cdcdcd 0%, #cdcdcd 100%)!important; /* Chrome 10+, Safari 5.1+ */
    background:   linear-gradient(to bottom, #cdcdcd 0%, #cdcdcd 100%)!important; /* W3C */
    border: none;
    border-top: 0px solid #cdcdcd;
    padding: 10px 24px 11px;
}
.page-template-page-contact-php .contactbox-in button, .page-template-page-contact-php .contactbox-in input, .page-template-page-contact-php .contactbox-in textarea {
/*    border: 1px solid #111;
    font-family: inherit;
    padding: 5px;*/
    width: 99%;
    background-color: transparent;
}
.page-template-page-contact-php .contactbox-in input:focus,
.page-template-page-contact-php .contactbox-in textarea:focus {
    border: 1px solid #cdcdcd;
    outline: 0;
    background-color: #fff;
}
.page-template-page-contact-php .contactbox-in textarea {
  border: 1px solid;
}
.page-template-page-contact-php .contactbox-in .contactbox-all {
  overflow: hidden;
  width: 96%;
  background-color: #f5f5f5;
  padding: 2%;
}
.page-template-page-contact-php .contactbox-in .contact-txt {
  line-height: 2;
  margin-bottom: 150px;
}
.page-template-page-contact-php .contactbox-in .c-l span {
    display: block;
    opacity: .5;
    font-size: 12px;
    margin-top: 2px;
    font-weight: normal;
}
.page-template-page-contact-php .contactbox-in span.en-moji {
    display: block;
    opacity: .5;
    margin-bottom: 10px;
}
input[type=submit]:not(:hover):not(:active):not(.has-background) {
  color: #fff;
}
.page-template-page-contact .side-location {
  max-width: 100%;
}
.page-template-page-contact .contactbox {
  max-width: none;
  width: calc(100vw - (50% - (var(--responsive--alignwide-width) / 2)));
  margin-left: calc(50% - (var(--responsive--alignwide-width) / 2));
  margin-right: 0;
  background-color: #f9f9f9;
  padding: 2%;
  margin-top: calc(2 * var(--global--spacing-vertical));
}
.page-template-page-contact .site-main > *:first-child {
  margin-bottom: 0;
}
.page-template-page-contact .side-location {
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
}
.page-template-page-contact .site-main.page-contact {
  margin-top: 0;
}

/* ======================================
  ページ
====================================== */
.singular .entry-title {
font-size: 16px;
letter-spacing: 0.12em;
margin-bottom: 20px;
font-weight: 500;
}
.singular .entry-header {
border-bottom: 0 none;
padding-bottom: 0px;
margin-bottom: 0;
}

/* ======================================
  インフォページ
====================================== */
.info-line{
  display:inline-block;
  width:25px;
  height:1px;
  background:#000;
  margin:0 12px;
}
.page-template-page-info .info-post-item {
margin-bottom: 100px;
padding-bottom: 100px;
border-bottom: 1px solid#cdcdcd;
}
.page-template-page-info .info-post-item .entry-title a{
  color: #000;
  display: inline-block;
  line-height: 1;
  padding: 0;
  text-decoration: none;
  font-size: 15px;
  position: relative;
}
.page-template-page-info .info-post-item:last-child{
  border-bottom:none;
  margin-bottom:0;
  padding-bottom: 0;
}

.page-template-page-info .info-post-item .entry-title a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -15px;
  display: block;
  width: 100%;
  height: 1px;
  background: #000;

  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.3s ease-out;
}

.page-template-page-info .info-post-item .entry-title a:hover::after,
.page-template-page-info .info-post-item .entry-title a:focus::after,
.page-template-page-info .info-post-item .entry-title a:active::after{
  transform: scaleX(0);
  transform-origin: right;
}

.page-template-page-info .info-post-item .entry-title a::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: -15px;
  width: 100%;
  height: 1px;
  background: #000;
  opacity: 0;
}

.page-template-page-info .info-post-item .entry-title a:not(:hover)::before{
  animation: menuLineIn 0.6s ease-out;
}
.page-template-page-info .info-post-item .entry-meta {
font-size: 13px;
text-transform: capitalize;
}
.info-pagination{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:60px;
}

.info-pagination ul{
  display:flex;
  align-items:center;
  gap:16px;
  list-style:none;
  margin:0;
  padding:0;
}

.info-pagination li{
  margin:0;
  padding:0;
}

.info-pagination a,
.info-pagination span{
  display:inline-block;
  text-decoration:none;
  color:#000;
  font-size:16px;
}

.info-pagination .current{
  opacity:0.3;
  text-decoration: line-through;
}

.info-pagination .dots{
  pointer-events:none;
}

.info-pagination .page-last{
  display:inline-block;
  text-decoration:none;
  color:#000;
}

/* ======================================
  メインメニュー
====================================== */
.primary-navigation .menu-wrapper li a {
  display: block;       /* ← 戻す */
  position: relative;
  text-decoration: none;
}

.primary-navigation .menu-wrapper li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 5px;
  height: 1px;
  width: 100%;
  background: #000;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.3s;
}

.primary-navigation .menu-wrapper li a:hover::after {
  transform: scale(1, 1);
  transform-origin: left top;
}

/* current */
.primary-navigation .menu-wrapper li.current-menu-item a::after {
  transform: scale(1, 1);
  transform-origin: left top;
}
@media only screen and (min-width: 482px)  {
  .primary-navigation .primary-menu-container > ul > .menu-item {
display: block;
}


.primary-navigation .primary-menu-container > ul > .menu-item > a {
padding-left: 0;
padding-right: 0;
text-decoration: none;
}
}


.primary-navigation .primary-menu-container {
margin-right: 0;
margin-left: 0;
}
.primary-navigation .current-menu-item > a:first-child:hover, .primary-navigation .current_page_item > a:first-child:hover {
text-decoration: none;
}

.primary-navigation > div > .menu-wrapper {
  gap: 30px;
}
.primary-navigation a {
  text-decoration: none !important;
}
.primary-navigation .menu-wrapper li.current-menu-item a::after,
.primary-navigation .menu-wrapper li.current_page_item a::after {
  transform: scaleX(0);
}
.primary-navigation .menu-wrapper li a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ノートPC */
@media (max-width: 1280px) and (min-width: 1025px) {
.site-nav {
      padding: 60px 4% 40px;
}
}

/* iPad（タブレット） */
@media (max-width: 1024px) and (min-width: 821px) {
.is-store-menu {
  display: flex;
  flex-wrap: wrap;
}
.is-store-menu > li:first-child {
  width: 100%;
}
.is-store-menu li:first-child a {
  display: inline-block;
}
.side-overlay-menu__list.is-store-menu li.menu-bar {
      padding-left: 0;
}
.side-overlay-menu__list.is-store-menu li.menu-bar::before {
  display: none;
}
.side-overlay-menu__list.is-store-menu {
      gap: 15px;
}
#home-hero.home-hero--1_center .logo-wrap {
    max-width: none;
    width: 30vw;
}
#home-hero.home-hero--2_a .logo-wrap {
    max-width: 30vw;
    width: 100%;
}
#home-hero.home-hero--2_b .logo-wrap {
    max-width: 30vw;
    width: 100%;
}
#home-hero.home-hero--2_c .logo-wrap {
    max-width: 30vw;
    width: 100%;
}
#home-hero.home-hero--3_a .logo-wrap {
    max-width: none;
    width: 30vw;
}
#home-hero.home-hero--3_b .logo-wrap {
    max-width: none;
    width: 30vw;
}
.side-info, .side-location, .side-menu-items {
    margin-top: 120px;
}
}

@media (max-width: 820px) and (min-width: 781px) {
#home-hero.home-hero--1_center .logo-wrap {
max-width: none;
width: 46vw;
}
#home-hero.home-hero--2_a .logo-wrap {
width: 100%;
max-width: 46vw;
}
#home-hero.home-hero--2_b .logo-wrap {
width: 100%;
max-width: 46vw;
}
#home-hero.home-hero--2_c .logo-wrap {
max-width: 46vw;
width: 100%;
}
#home-hero.home-hero--3_a .logo-wrap {
max-width: none;
width: 46vw;
}
#home-hero.home-hero--3_b .logo-wrap {
width: 46vw;
}
#home-hero.home-hero--3_a {
position: relative;
width: 100%;
min-height: clamp(640px, 55vw, 973px);
}
#home-hero.home-hero--3_a .intro-3a-box {
      height: 55vh;
}
  #intro-logo .intro-copy {
    position: fixed !important;
    left: 20px !important;
    right: auto !important;
    bottom: 20px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9999 !important;
    color: #28303d !important;
    font-size: 12px !important;
    line-height: 1.8 !important;
    writing-mode: horizontal-tb !important;
  }
  #intro-logo .intro-centerimg {
        max-width: 85vw
  }
  #intro-logo .intro-2centerbox {
    width: min(1800px, 100vw);
  }
  #intro-logo .intro-3b-box {
    width: min(2000px, 92vw);
    height: 40vh;
  }
  #home-hero.home-hero--3_b .intro-3b-box {
    width: min(2000px, 82vw);
    height: 39vh;
  }
  #home-hero.home-hero--3_b .home-hero__side {
        padding-top: 5vh;
  }
  #home-hero.home-hero--3_b {
        min-height: 40vh;
  }
  #home-hero.home-hero--3_a .home-hero__media {
        width: 82vw;
  }
.is-store-menu > li:first-child {
  width: 100%;
}
.is-store-menu li:first-child a {
  display: inline-block;
}
.side-overlay-menu__list.is-store-menu li.menu-bar {
      padding-left: 0;
}
.side-overlay-menu__list.is-store-menu li.menu-bar::before {
  display: none;
}
.side-overlay-menu__list.is-store-menu {
      gap: 25px 60px;
}
  .side-info__link {
    grid-template-columns: 1fr !important;
    row-gap: 2px !important;
  }
  .side-info__date {
    text-align: left;
  }
  .side-info__bar {
    display: none;
  }
  .side-info__title {
    padding-left: 0;
  }
}
@media (max-width: 780px){
#home-hero.home-hero--3_a .home-hero__media {
  width: 100vw;
  padding-top: 12vh;
}
#home-hero.home-hero--3_a .logo-wrap {
  max-width: none;
  width: 65vw;
}
.site-title {
margin: 0;
line-height: 1;
}
#home-hero.home-hero--3_a .home-hero__side {
  padding-top: 0;
}
.cm-category__list {
  gap: 0;
}
.cm-category__title {
  font-size: 13px;
}
.footer-navigation-wrapper {
  font-size: 12px;
}
.no-widgets .site-footer {
margin-top: calc(1 * var(--global--spacing-vertical));
padding-bottom: 10px;
}
#home-hero.home-hero--2_a .logo-wrap {
  max-width: 65vw;
}
#home-hero.home-hero--2_a .home-hero__media {
width: 100%;
margin-left: auto;
padding-top: 19vh;
}
.home.blog .site-main > #home-hero.home-hero--2_a {
margin-top: 7vh;
}
#home-hero.home-hero--1_center .logo-wrap {
max-width: none;
width: 65vw;
}
#home-hero.home-hero--1_center .home-hero__media {
width: 100%;
margin-left: auto;
padding-top: 15vh;
}

  .primary-navigation {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .primary-navigation .primary-menu-container {
    position: static;
    display: block;
    visibility: visible;
    opacity: 1;
    height: auto;
    max-height: none;
    overflow: visible;
    background: transparent;
    border: 0;
    padding: 0;
  }

  .primary-navigation .menu-wrapper {
    display: flex;
    flex-direction: row;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
  }

  .primary-navigation .menu-wrapper > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .primary-navigation .menu-wrapper a {
    display: inline-block !important;
    padding: 0 !important;
    background: transparent !important;
  }
.site-branding {
margin-right: 0;
}
#home-hero.home-hero--2_a .intro-2centerimg:nth-child(1) {
top: 0;
width: 60%;
}
#home-hero.home-hero--2_a .intro-2centerimg:nth-child(2) {
top: 25%;
width: 50%;
}
#home-hero.home-hero--2_c .logo-wrap {
max-width: 65vw;
}
#home-hero.home-hero--2_c {
position: relative;
margin-top: 2vh;
}
#home-hero.home-hero--2_c .home-hero__media {
width: 94%;
margin-left: auto;
padding-top: 15vh;
padding-bottom: 30px;
}
#home-hero.home-hero--2_c .intro-2narrowimg--back {
left: 0;
top: 0;
width: 73%;
}
#home-hero.home-hero--2_c .intro-2narrowimg--front {
right: 0;
bottom: 0;
width: 60%;
transform: translate(-4%, -54%);
}
#home-hero.home-hero--1_center {
position: relative;
margin-top: 8vh;
}
.site-main > * {
margin-top: calc(1.5 * var(--global--spacing-vertical));
margin-bottom: calc(1.5 * var(--global--spacing-vertical));
}
#home-hero.home-hero--3_b .intro-3b-box {
  width: min(2000px, 100vw);
  height: 35vh;
}
#home-hero.home-hero--3_b .logo-wrap {
max-width: none;
width: 65vw;
}
#home-hero.home-hero--3_b .home-hero__media {
  position: relative;
}
#home-hero.home-hero--3_b .home-hero__side {
  padding-top: 3vh;
}
#intro-logo .intro-3a-box {
  width: min(2000px, 100vw);
  height: 50vh;
}
#intro-logo .intro-2centerbox {
position: absolute;
top: 25%;
width: min(1800px,100vw);
}
#intro-logo .intro-2centerimg:nth-child(1) {
left: 0;
top: 0;
width: 80%;
z-index: 1;
}
#intro-logo .intro-2centerimg:nth-child(2) {
top: 160%;
width: 55%;
}
#intro-logo .intro-centerimg {
  max-width: 90vw;
  top: 30%;
}
#intro-logo .intro-3b-box {
  width: min(2000px, 95vw);
  top: 16vh;
  height: 30vh;
}
#intro-logo .intro-2narrowbox {
  width: 98%;
}
  #intro-logo .intro-copy {
    position: fixed !important;
    left: 20px !important;
    right: auto !important;
    bottom: 20px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9999 !important;
    color: #28303d !important;
    font-size: 12px !important;
    line-height: 1.8 !important;
    writing-mode: horizontal-tb !important;
  }
.site-nav {
  padding: 20px 3% 20px;
}
  .side-overlay-menu__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .side-overlay-menu__list > li {
    width: 100% !important;
  }
.side-overlay-menu__list li.menu-bar {
position: relative;
padding-left: 0;
padding-top: 20px;
}
.side-overlay-menu__list li.menu-bar::before {
  display: none;
}
.side-overlay-menu {
margin-top: 40px;
}
.side-info {
margin-top: 60px;
}
.side-location__title {
  margin-bottom: 5px;
}
.side-overlay-menu__list li a::after {
  height: .8px;
}
  .side-info__link {
    grid-template-columns: 1fr !important;
    row-gap: 2px !important;
  }
  .side-info__date {
    text-align: left;
  }
  .side-info__bar {
    display: none;
  }
  .side-info__title {
    padding-left: 0;
  }
  .side-location {
  margin-top: 60px;
  }
  .side-location__wrap {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .side-menu-items {
    margin-top: 40px;
  }
  .side-menu-items__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 10px;
  }
  .site-nav {
    display: block;
  }

  .site-nav__list {
    display: flex;
    flex-direction: column; /* 横並びにしたいなら row */
    gap: 16px;
  }
  .logo-wrap {
    max-width: 100%;
    }
.site-header:not(.has-logo).has-title-and-tagline .site-branding {
max-width: 65vw;
}
.site-header, .site-main, .widget-area, .site-footer {
padding-top: 18px;
padding-bottom: 0px;
margin-left: auto;
margin-right: auto;
}
.contactbox-in {
  max-width: 100%;
}
.page-template-page-contact-php .contactbox-in .c-box .c-l {
float: none;
width: 100%;
}
.page-template-page-contact-php .contactbox-in .c-box .c-r {
float: none;
width: 100%;
}
span.naname {
  display: none;
}
.side-location__map {
  display: block;
}
.page-template-page-contact .site-nav .side-location {
  margin-top: 60px;
}
.footer-navigation {
  position: static;   /* ← fixedやめる */
  transform: none;    /* ← 回転やめる */
  top: auto;
  left: auto;

  display: flex;      /* ← 横並び */
  flex-direction: row;
  gap: 10px;          /* 間隔（調整OK） */

  /*justify-content: center;*/ /* 中央寄せ（不要なら消す） */
  /*align-items: center;*/
  margin-top: 0;
}
.footer-navigation-wrapper .menu-spacer {
  width: 30px;
}
#home-hero.home-hero--3_a .intro-3a-box {
  height: 58vh;
}
#home-hero.home-hero--3_a{
  min-height: clamp(525px, 55vw, 700px);
}
.home.blog .site-main > #home-hero.home-hero--3_b {
  min-height: 58vh;
}
}
@media (max-width: 600px){
.cm-category__list {
grid-template-columns: repeat(1,1fr);
}
.cm-category__item {
  margin-bottom: 30px;
}
#home-hero.home-hero--3_a .intro-3a-box {
height: 42vh;
}
#home-hero.home-hero--3_a {
min-height: clamp(452px, 55vw, 700px);
}
home.blog .site-main > #home-hero.home-hero--3_b {
min-height: 54vh;
}
.home.blog .site-main > #home-hero.home-hero--3_b {
min-height: 53vh;
}

}

@media only screen and (max-width: 481.98px){
.site-header:not(.has-logo).has-title-and-tagline .site-branding {
max-width: 65vw;
}
}