@charset "utf-8";
/*
Theme Name: sakuraterrace
Template: twentytwentyfour
Author: sakuraterrace
Version: 1.0
Description: sakuraterrace
Text Domain: sakuraterrace
*/
/* ベース */
.sakura-nav{ --gap:20px; --drawer-w:78vw; --drawer-max:340px; font-size:16px; }
.sakura-nav__bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--gap); }
.sakura-nav__brand{ font-weight:700; text-decoration:none; }
a:hover,button:hover{opacity:.7;}
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 1.2s ease-out forwards;
  animation-delay: 0.3s;
}
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* PC横並び */
.sakura-nav__list{ list-style:none; margin:0; padding:0; }
.sakura-nav__list--desktop{ display:flex; gap:24px; }
.sakura-nav__list li{ margin:0; }
.sakura-nav__list a{display:block;padding:10px 6px;text-decoration:none;color:inherit;outline: none;}

/* トグルボタン */
.sakura-nav__toggle{ display:none; width:40px; height:40px; position:relative; border:1px solid #000; background:#fff; cursor:pointer; }
.sakura-nav__toggle span,
.sakura-nav__toggle span:before,
.sakura-nav__toggle span:after{
  content:""; position:absolute; left:8px; right:8px; height:2px; background:#000; transition:.2s;
}
.sakura-nav__toggle span{ top:50%; transform:translateY(-50%); }
.sakura-nav__toggle span:before{ top:-8px; }
.sakura-nav__toggle span:after{ top:8px; }

/* モバイル：ドロワー */
.sakura-nav__drawer{
  position: fixed;
  top:0;
  right:0;
  bottom:0;
  width: 65vw;
  max-width: 340px;
  background: #fff;
  padding: 20px;
  overflow:auto;
  z-index:10001;
  transform: translate3d(100%,0,0);                /* ← 右外から */
  transition: transform .32s cubic-bezier(.22,.61,.36,1); /* スルッ */
  will-change: transform;
  box-shadow: -8px 0 24px rgba(0,0,0,.12);
}
.sakura-nav.open .sakura-nav__drawer{
  transform: translate3d(0,0,0);
}

/* バックドロップのフェード */
.sakura-nav__backdrop{
  position: fixed; inset:0; background: rgba(0,0,0,.4);
  z-index:10000; opacity:0; transition: opacity .32s linear;
}
.sakura-nav.open .sakura-nav__backdrop{ opacity:1; }

/* 動きを控えたい人向け */
@media (prefers-reduced-motion: reduce){
  .sakura-nav__drawer, .sakura-nav__backdrop { transition: none !important; }
}
body.sakura-nav--noscroll{ overflow:hidden; }


/* モバイル用の縦並び */
.sakura-nav__list--mobile{ display:flex; flex-direction:column; gap:4px; }
.sakura-nav__list--mobile a{padding: 20px 8px;border-bottom:1px solid #eee;}

/* 言語スイッチ（任意） */
.sakura-nav__langs{list-style:none;margin: 30px 0 30px;padding:0;text-align: center;}
.sakura-nav__langs li{ display:inline-block; margin-right:8px; }
.sakura-nav__lang{text-decoration:none;padding:6px 10px;font-size: .8em;border:1px solid #000;}
.sakura-nav__lang.is-active{ opacity:.5; pointer-events:none; }

/* 言語スイッチャー */
.sakura-lang-switcher {
  position: relative;
  display: inline-block;
}
.sakura-lang-switcher p {
  display: none;
}
.sakura-lang-switcher .sls-button {
  line-height: 1;
  padding: 6px 10px;
  border: 1px solid #000;
  background: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.sakura-lang-switcher.open .sls-button,
.sakura-lang-switcher .sls-button:focus {
  outline: none;
}

.sakura-lang-switcher .sls-menu {
  position: absolute;
  right: 0;               /* ボタンの右下に出す */
  top: calc(100% + 6px);
  min-width: 110px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  z-index: 9999;
}

.sakura-lang-switcher .sls-menu li a {
  display: block;
  padding: 8px 14px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

.sakura-lang-switcher .sls-menu li a.is-active {
  color: #999;           /* 現在言語はグレーアウト */
  pointer-events: none;
}

.sakura-lang-switcher .sls-menu li a:hover {
  background: rgba(0,0,0,.04);
}
:focus { border: none }
.sakura-nav__list--mobile li{ opacity:0; transform:translateX(8px); transition:.24s ease; }
.sakura-nav.open .sakura-nav__list--mobile li{ opacity:1; transform:none; }
.sakura-nav.open .sakura-nav__list--mobile li:nth-child(n){ transition-delay: calc(40ms * var(--i, 0)); }
.sakura-nav__list--mobile li { counter-increment: i; }
.sakura-nav__list--mobile li { --i: counter(i); } 
/* ▼ PC: ドロップダウン */
.sakura-nav__list--desktop .menu-item-has-children{ position:relative; }
.sakura-nav__list--desktop .menu-item-has-children > a{
  white-space:nowrap; display:flex; align-items:center; gap:.4em;
}
.sakura-nav__list--desktop .menu-item-has-children > a::after{
  content:"▾"; font-size:.8em; transition:transform .2s;
}
.sakura-nav__list--desktop .menu-item-has-children.is-open > a::after{
  transform:rotate(180deg);
}
.sakura-nav__list--desktop .menu-item-has-children > .sub-menu{
  position:absolute; left:0; top:calc(100% + 10px);
  min-width:280px; margin:0; padding:10px 0; list-style:none;
  background:#e9e9e9; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.15);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-4px) scale(.98);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index:10002;
}
.sakura-nav__list--desktop .menu-item-has-children.is-open > .sub-menu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0) scale(1);
  transition:opacity .18s ease, transform .18s ease;
}
/* 吹き出し風の小さな山（任意） */
.sakura-nav__list--desktop .menu-item-has-children > .sub-menu::before{
  content:""; position:absolute; top:-6px; left:24px; width:12px; height:12px;
  background:#e9e9e9; transform:rotate(45deg); border-radius:2px;
}

/* サブメニュー内のリンク */
.sakura-nav__list--desktop .sub-menu a{
  display:block; padding:10px 16px; color:#222; text-decoration:none;
}
.sakura-nav__list--desktop .sub-menu a:hover{ background:rgba(0,0,0,.06); }

/* 無効表示（li.off） */
.sakura-nav__list .off > a{ color:#9aa0a6; pointer-events:none; }

/* ▼ SP: アコーディオン（drawer内） */
.sakura-nav__list--mobile .menu-item-has-children > a{
  position:relative; padding-right:28px;
}
.sakura-nav__list--mobile .menu-item-has-children > a::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
}
.sakura-nav__list--mobile .menu-item-has-children.is-open > a::after{ content:"–"; }
.sakura-nav__list--mobile .menu-item-has-children > .sub-menu{
  display:none; margin:6px 0 0 0; padding:0; list-style:none; border-left:2px solid #eee;
}
.sakura-nav__list--mobile .menu-item-has-children.is-open > .sub-menu{ display:block; }
.sakura-nav__list--mobile .sub-menu a{padding: 15px 12px 15px 14px;font-size: .8em;}
.sakura-nav__close{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  padding:0;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: none;
  border-radius:8px;
  background:#fff;
  color:#000;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  z-index:1;
}
/* ✕マーク（疑似要素で描画） */
.sakura-nav__close::before,
.sakura-nav__close::after{
  content:""; position:absolute;
  width:18px; height:2px; background:currentColor;
  border-radius:1px;
}
.sakura-nav__close::before{ transform:rotate(45deg); }
.sakura-nav__close::after { transform:rotate(-45deg); }

/* ちょいアクセント */
.sakura-nav__close:hover{ opacity:.8; }
:focus {
  outline: none;
}
.sakura-nav__bar > p{ display:contents; margin:0; }
.sakura-nav__drawer > p:empty{ display:none; }

.contact-flex{display:flex;width: 100%;flex-wrap:wrap;}
.contact-half{width: 47.5%;margin: 0 2.5% 15px 0;}
.contact-half span {width: 200px !important;}
.contact-half select{width: 100%;padding: 10px 0 10px 5px;border: 1px solid #dadada;font-size: 1em;}
.contact-half input{width: 93%;border: 1px solid #dadada;padding: 10px 5px 10px 10px;font-size: 1em;}
.wpcf7-form textarea{width: 94.3% !important;padding: 10px 5px 10px 10px;border: 1px solid #dadada;font-size: 1em;}
.wpcf7-form input[type="submit" i] {width: 97%;padding: 10px;margin-top: 10px;background: #636363;color: #fff;border: 1px solid #dadada;}
.wpcf7-form input[type="submit" i]:hover {opacity:.75;}
.wpcf7 form .wpcf7-response-output {
    margin: 0em 0.5em 1em;
    padding: 2%;
    border: none;
   }
.wpcf7 form.sent .wpcf7-response-output {
    border: 2px solid green;
}
.wpcf7 form p { margin: 0; }
footer{background:#e9e9e9;}
footer .wp-block-columns{max-width: 1360px;margin:0 auto}

/* ブレークポイント */
@media (max-width: 1023px){}
@media (max-width: 767px){
  .sakura-nav__list--desktop,.sakura-lang-switcher,.sakura-nav__list--desktop{ display:none; }
  .sakura-nav__toggle{ display:inline-block; }
  header .wp-block-image img {width: 138px !important;}
  .contact-half {width: 90%;}
	.sakura-nav__list--mobile .menu-item-has-children > .sub-menu{display:none}
.sakura-nav__list--mobile .menu-item-has-children.is-open > .sub-menu{display:block}
}
@media (min-width: 768px){
  .sakura-nav__drawer, .sakura-nav__backdrop{ display:none !important; }
}