@charset "UTF-8";




/*-----------------------------------------------------*/
/* PC用 */
/*-----------------------------------------------------*/


/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
position: fixed;
  inset: 0;
	z-index: 999999;
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置　*/
#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
    z-index: 999;
	transform: translate(-50%, -50%);
	color: #fff;
	width: 100%;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
    height: 2px;
}

/*割れる画面のアニメーション*/
.loader_cover {
    width: 100%;
    height: 50%;
background: rgba(20, 129, 186, 0.6);
    transition: all .2s cubic-bezier(.04, .435, .315, .9);
    transform: scaleY(1);
}
/*上の画面*/
.loader_cover-up {
    transform-origin: center top;
}

/*下の画面*/
.loader_cover-down {
    position: absolute;
    bottom: 0;
    transform-origin: center bottom;
}
/*クラス名がついたらY軸方向に0*/
.coveranime {
    transform: scaleY(0);
}







/* ===== simple header ===== */

.header{
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 90px;
  background:#fff; 
  display:flex; 
  flex-direction:column; 
  align-items:center;
  z-index:1000;
}
.header_inner{
  width: 90%; 
  height: 100%;
  display: flex; 
  justify-content: flex-start; 
  align-items: center;
}
.header_logo{ 
  display:inline-flex; 
  align-items:center; 
}
.header_logo img{ 
  height:55px; 
  width:auto; 
  display:block; 
}
.header_navgroup{
  margin-left:auto; 
  display:flex; 
  gap:60px;
}


/* Nav: hover色 & active下線（最小改変） */
.header__navitem{
    font-size: 16px;
  color: #3971b8;
  cursor: pointer;
  border-bottom: 2px solid transparent;  
  transition: color .2s ease, border-color .2s ease;
}
.header_navitem{
  display:inline-block; 
  padding-bottom:2px;
  font-size:16px; 
  color:#3971b8; 
  text-decoration:none; 
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.header_navitem:hover{ color:#F26B4B; }
.header_navitem.is-active{
  color:#F26B4B; 
  border-bottom-color: currentColor;
}

/* ーーーーーーーーーなみなみーーーーーーーーー */

/* 変数（必要なら調整） */
:root{
  --header-h: 90px;   /* 実際のheader高さに揃える */
  --wave-overlap: 20px;    /* ここを好みで 16〜40px くらい */
  --wave-h:   80px;   /* 波の高さ */
  --wave-w:  240px;   /* 1山の横幅（数を増やす→小さく） */

}


/* 既存の header はそのまま（position:fixed） */
.header{ position: fixed; top:0; left:0; width:100%; height: var(--header-h); background:#fff; z-index:10000; }

/* ここが新しい“波”本体 */
.header::after{
  content:"";
  position: absolute;
  left:0; right:0; 
  bottom: calc(-0.6 * var(--wave-h)); 
  height: var(--wave-h);
  /* 波の色は“ヘッダーの色”を見せる。= 白でOK */
  background-color:#fff;

  /* SVGを横方向に繰り返すマスク（WebKit併記） */
  -webkit-mask: url("../img/wave.svg") center bottom / var(--wave-w) 100% repeat-x;
          mask: url("../img/wave.svg") center bottom / var(--wave-w) 100% repeat-x;

  transform: scaleY(-1);
  transform-origin: center;
    pointer-events: none;
  z-index: 10001;               /* ヘッダーより前面（必要なら） */
}

/* ーーーーーーーーーなみなみーーーーーーーーー */





/* ===== Hero ===== */
.wrap{
  position: relative;
  width: 100%;
  height: 85dvh;
  margin-top: calc(var(--header-h) - var(--wave-overlap));
}

/* レイアウト：余白 / 円 / 名前の3行 */
#slider{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto auto;   /* 1:上余白, 2:円, 3:名前 */
  justify-items: center;               /* 横センター */
  grid-template-columns: 100%;  /* ← 列をコンテナいっぱいに */
  justify-content: center;      /* ← トラック全体も中央寄せ（保険） */
  /* 下端との距離（全体の下寄せ量） */
  padding-bottom: var(--name-bottom, clamp(12px, 4dvh, 40px));
}

/* ---- 調整用の変数（好みで数字だけ触ればOK） ---- */
:root{
  --circle-size: clamp(300px, 34vw, 500px);  /* 円サイズ */
  --icon-scale: 0.42;                         /* アイコンの相対サイズ(円に対して) */
  --circle-push: 6vh;                         /* 円を下に押す量（上余白を使う） */
  --gap-circle-name: clamp(8px, 2dvh, 36px);  /* 円と名前の“間” */
  --name-bottom: clamp(12px, 4dvh, 40px);     /* 画面下端との距離 */
}

/* ========= くるくる回る円 ========= */
.circle_container{
  grid-row: 2;                  /* 2行目に配置（＝円） */
  width: var(--circle-size);
  height: var(--circle-size);
  position: relative;
  /* 円をもう少し下へ → 数値を大きく（px でも OK） */
  margin-top: var(--circle-push);
  justify-self: center;  /* ← ベルト＆サスペンダー方式 */
  margin-inline: auto;   /* ← 旧実装や上書きに強い保険 */
}

.text_circle{
  width: 100%;
  animation: rotateIt 20s linear infinite;
}
@keyframes rotateIt{ to { transform: rotate(-360deg); } }

.text_circle text{
  font: 400 1.2rem/1 fot-tsukuardgothic-std, sans-serif;
  text-transform: uppercase;
  fill: #fff;
}
.text_circle textPath{ letter-spacing: 17px; }

/* 円の中央アイコン（円サイズに追従） */
.icon_img{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--circle-size) * var(--icon-scale));
  height: auto;
  aspect-ratio: 1/1;
  object-fit: contain;
}

/* ========= 名前（3行目） ========= */
.wrap_name{
  grid-row: 3;                 /* 3行目に配置（＝名前） */
  text-align: center;
  color: #fff;
  letter-spacing: .5em;
  font-size: 15px;
  /* 円との“間”をこれで広げる（←ここを触れば効く） */
  margin-top: var(--gap-circle-name);
  /* さらに下端へ寄せたいなら #slider の --name-bottom を調整 */
  margin-top: -10px;
}








/* ===== 横に流れる文章 ===== */
.wattai{
  /* スマホで縦が伸びない安定版（dvh 不使用） */
  height: clamp(40px, calc(var(--vh-fixed, 1svh) * 5), 72px);
  background:#fff;
  overflow:hidden;
  display:flex;
  align-items:center;
  position:relative;
  z-index:10;
  width: 100%;
  box-sizing: border-box;

  /* 速度はここで統一管理（好みで 40s/50s に変更） */
  --marquee-duration: 40s;
}
.wattai .marquee{
  /* 右端スタート用の開始オフセット（ビューポート幅ぶん） */
  --start: 100svw;

  display:flex;
  gap: 2rem;
  white-space:nowrap;

  /* transform 駆動の新式アニメのみ */
  animation: wattai-scroll var(--marquee-duration) linear infinite;
  will-change: transform;
}


.wattai span{
  margin:0;
  line-height:1;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight:400;
  font-size:16px;
  letter-spacing:2px;
  color:#6D92BF;
}



/* ===== スマホ調整：PCと同じ右端スタート挙動に統一 ===== */
@media (max-width: 768px){
  html, body {
    overflow-x: hidden; /* 横スクロール防止 */
  }

  .wattai {
    max-width: 100%;
    overflow-x: hidden;
  }

  .wattai .marquee {
    transform: translateX(100vw); /* ← 右端の外からスタート */
    animation: wattai-scroll var(--marquee-duration, 40s) linear infinite;
    white-space: nowrap;
    display: inline-flex;
    gap: 2rem;
  }
}




/* 右端（--start）から、1セット分（--loopW）だけ左へ流す */
@keyframes wattai-scroll{
  from { transform: translateX(var(--start, 0)); }
  to   { transform: translateX(calc(var(--start, 0) - var(--loopW, 50%))); }
}

/* スマホ保険（横スクロール抑止） */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .wattai { max-width: 100%; overflow-x: hidden; }
}

















/* ===== About (salmon band) — Clean ===== */

/* 調整用のノブ（ここだけ触れば大体OK） */
:root{
  --wave-h: 65px;                              /* 下の白波の高さ */
  --gap: clamp(28px, 5vw, 84px);               /* 左右テキストと画像の間隔 */
  --photo-col: clamp(280px, 30vw, 305px);     /* 中央カラム(=画像)の幅 */
  --photo-img-shift: clamp(64px, 9dvh, 140px); /* 画像だけ下げる量 */
 --left-col-shift: clamp(80px, 12dvh, 200px);
}
  .about .photo_arc{top: 80px}
  .photo{top: -40px}
/* 背景帯：伸縮＋波ぶん確保 */
.about{
  position: relative;
  width: 100%;
  min-height: 100dvh;
  background:#dd6f5e;
  color:#fff;
  padding: clamp(32px, 6dvh, 80px) 0
  calc(var(--wave-h) + clamp(24px, 5dvh, 72px));
}

/* 3カラムGrid：左(名前) / 中央(写真) / 右(本文) */
.about_grid{
  max-width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr var(--photo-col) 1fr;
  column-gap: var(--gap);
  align-items: center;
  position: relative;
  z-index: 2; /* 波より前面 */
}

/* ===== フォント（上書きに強く、必要最低限に） ===== */
.name_ja, .name_en, .name_meta, .name_links,
.about_eyebrow, .about_lead-top, .about_lead-bottom, .text{
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: 400; font-style: normal;
}
.about_right h2{
  font-family: gelica, sans-serif;
  font-weight: 400; font-style: normal;
  letter-spacing: .3em;
  font-size: 30px; color:#fff; text-align:center;
  margin: 8px 0 32px;
}
.arc_text{
  font-family: "Monoton", sans-serif;
  font-weight: 400; font-style: normal;
  letter-spacing: .04em;
  font-size: clamp(32px, 5vw, 80px);
}

/* ===== 左：名前ブロック ===== */
.about_left{ max-width: 36ch; justify-self: start; 
margin-top: var(--left-col-shift);}
.name_row{ display:flex; gap:12px; align-items:baseline; margin-bottom:24px; }
.name_ja{ font-size:24px; letter-spacing:5px; }
.name_en{ font-size:16px; letter-spacing:1px; }
.name_meta{ font-size:15px; line-height:1.7; }
.link_row{ margin-top:24px; }
.name_links{ list-style:none; margin:0; padding:0; font-size:16px; line-height:1.3; }

/* ===== 中央：写真＋アーチ文字重ね ===== */
.photo{ 
  position: relative; 
  align-self: center; 
overflow: visible;                 /* ← 横はみ出しOKにする */
  padding-top: clamp(40px, 9vw, 100px); /* 文字ぶんの頭上スペース */}
.photo img{
  position: relative; z-index: 1; /* 画像＝下層 */
  display:block;
  width: 100%;                    /* カラム幅にフィット（= --photo-col に連動） */
  height: auto;
  margin: var(--photo-img-shift) auto 0;  /* ← 画像だけ下げる */
}
.photo_arc{
  position: absolute; 
  overflow: visible; 
  z-index: 2; /* アーチ＝上層 */
  left: 50%;
  transform: translateX(-50%);
width: clamp(115%, 135%, 560px);   pointer-events: none;
  fill: #fff;
}

/* ===== 右：本文 ===== */
.about_right{ max-width: 40ch; justify-self: end; text-align: left; }
.about_eyebrow{ font-size:18px; letter-spacing:2px; text-align:center; margin:0 0 8px; }
.about_lead-top{ font-size:16px; line-height:1.7; text-align:center; margin-bottom:16px; }
.about_lead-bottom{ font-size:16px; line-height:1.7; }





/* インスタ */

/* ===== Instagram CTA ===== */
:root{
  --size: 120px;
  --blur: calc(0.15 * var(--size));
}

.mainflex{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 16px;
  padding: 54px;
}

.heading{
  font-family: gelica, sans-serif;
  font-weight: 400; font-style: normal;
  letter-spacing: .3em;
  font-size: 18px; color:#fff; text-align:center;
  margin: 0 0 8px;
}

.gradient{
  position: relative;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  border-radius: 18.5%;
  box-shadow: 0 0 var(--blur) rgba(0,0,0,.5);
  background:
    radial-gradient(circle at 33% 100%,
      #FED373 4%,
      #F15245 30%,
      #D92E7F 62%,
      #9B36B7 85%,
      #515ECF);
  margin-bottom: 12px;
  text-decoration: none;
}

.gradient--mono{
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
/* ちょいだけ浮くホバー（任意） */
.gradient--mono:hover{ transform: translateY(-2px); transition: transform .2s ease; }

.gradient svg{
  position: absolute;
  inset: 0;              /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
}

/* 点滅 */
#dot{ animation: blink 350ms ease-in-out 8 alternate; }
@keyframes blink{ from{opacity:0} to{opacity:1} }



/* インスタ終わり */






/* ===== CTA（シンプル） ===== */
/* btnテンプレ  */
.text{
    font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
  letter-spacing: 2px;

}
.about_btn {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  width: 250px;
  text-align: center;
  text-decoration: none;
  line-height: 35px;
  outline: none;
  color: #fff;
  background-color: #dd6f5e;
  position: relative;
  border: 1px solid #fff;
  transition: color 0.5s ease;
}
.about_btn:hover {
  color: #dd6f5e;
}
.about_btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.about_btn::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}
.text {
  position: relative;
}

/* btnテンプレ終わり */

/* ===== 下の“なだらかな波” ===== */
.custom-shape-divider-bottom-1755097599{
  position:absolute; left:0; right:0; bottom:0;
  height: var(--wave-h);
  line-height:0; overflow:hidden;
  transform: rotate(180deg);
  z-index: 1;
}
.custom-shape-divider-bottom-1755097599 svg{ width:100%; height:100%; display:block; }
.custom-shape-divider-bottom-1755097599 .shape-fill{ fill:#fff; }

/* ===== レスポンシブ（縦積み） ===== */
@media (max-width: 960px){
  .about_grid{
    grid-template-columns: 1fr;
    row-gap: clamp(20px, 4dvh, 40px);
    text-align: center;
  }
  .about_left, .about_right{ justify-self: center; text-align: center; }
  .about_right{ max-width: 48ch; }
  .photo img{ width: clamp(220px, 56vw, 360px); }
}




/* === フォントの基準（.about配下はこれを継承） === */
.about{
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* 見出しとアーチは意図通りに上書き */
.about_right h2{
  font-family: gelica, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .3em;
}
.arc_text{
  font-family: "Monoton", sans-serif;
  font-weight: 400;
  font-style: normal;
}





















/* ===== Service ===== */
#service{
  position: relative;
  background: #fff;
  padding: 140px 0 230px;      /* ← 上下の余白。高さ固定は使わない */
  overflow: hidden;            /* 波のはみ出し対策 */
}

/* 見出し */
.service-title{
  position: static;            /* ← absoluteを使わない */
  text-align: center;
  margin: 0 0 28px;
}
.service_eyebrow{ 
  font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
letter-spacing: 2px;
text-align:center; 
}
.service_h2{ 
  font-family: gelica, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing:.3em; 
  font-size: 30px;
  margin: 0; 
}

/* カード3枚を中央に */
.cards-3{
  display: grid;
  grid-template-columns: repeat(3, 260px);
  gap: 44px;
  justify-content: center;     /* 横センター */
  width: min(980px, 92%);
  margin: 24px auto 0;         /* 通常フローで下に続く */
  position: relative; z-index: 1; /* 波より前面 */
}

/* ブロブ形のカード */
.card-pill{
  width: 280px; height: 260px;
  background: #A8BF89; 
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; gap:14px; padding:18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  border-radius:58% 42% 46% 54% / 46% 58% 42% 54%;
  transition: border-radius .5s ease, transform .2s ease;
}
.card-pill.blob-2{
  border-radius:44% 56% 60% 40% / 50% 46% 54% 50%;
}
.card-pill.blob-3{
  border-radius:62% 38% 48% 52% / 46% 60% 40% 54%;
}
.card-pill:hover{
  transform: translateY(-4px);
  border-radius:50% 50% 48% 52% / 52% 48% 52% 48%;
}
#service .card-pill h3{ 
  color: #FFFFFF;
  font-family: gelica, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing:.1em; 
  font-size: 24px;
  margin-bottom: -15px;
  margin-top: -30px;
}
#service .card-pill p{ 
  color:#FFFFFF;
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
letter-spacing: 0px;
}

#service .card-pill h5{ 
  color: #FFFFFF;
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
letter-spacing: 0px;
line-height:1.2; 
text-align-last: justify;
}

.card-icon{ width:45px; height:auto; }

/* CTA（カードの下に自然に来る） */
/* btnテンプレ  */
.text{
    font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
  letter-spacing: 2px;

}
.service_btn {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  width: 250px;
  text-align: center;
  text-decoration: none;
  line-height: 35px;
  outline: none;
  color: #000000;
  background-color: #fff;
  position: relative;
  border: 1px solid #000000;
  transition: color 0.5s ease;
}
.service_btn:hover {
  color: #fff;
}
.service_btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.service_btn::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #000000;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}
.text {
  position: relative;
}

/* btnテンプレ終わり */


/* 下部の波は背面に固定 */
.custom-shape-divider-bottom-1755103710{
  position: absolute;
  bottom: -1px; left: 0; width: 100%;
  line-height: 0;
  pointer-events: none;
  z-index: 0;                       /* 背面 */
background-color: #fff;
overflow:hidden;
}
.custom-shape-divider-bottom-1755103710 svg{
  display:block;
  position:relative;
  width:102%;          /* ほんの少し広げる（PC崩れずSafariの誤差を覆う） */
  height:82px;         /* 1〜2pxだけ重ねて縫い目消し */
  left:50%;
  transform:translateX(-50%) scaleY(-1);
  transform-origin:center;
  backface-visibility:hidden;
  will-change:transform;
}

/* .custom-shape-divider-bottom-1755103710 svg{
display: block;
  width: 100.5%;               
  height: 80px;                
  transform: scaleY(-1);     
  transform-origin: center;
  backface-visibility: hidden; 
  will-change: transform;} */

  
.custom-shape-divider-bottom-1755103710 .shape-fill{
  fill: #6D92BF;
}
























/* ===== Photography ===== */
:root{
  --wave-photo-h: 65px;   /* Photography の波の高さ */
}

#photo {
  position: relative;
  background-color: #6D92BF;
  color: #fff;
  width: 100%;
min-height:110vh;        /* heightより安全 */
padding-top: 90px;
  /* ↓ 波の高さ + 少しマージン */
padding-bottom: calc(var(--wave-photo-h) + 24px);
}

#photo .photo-box,
#photo .photo-rows{ position: relative; z-index: 1; }

/* 1つの箱の中で画像と文字を横並びに */
#photo .photo-box {
  width: 70%;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;              /* 画像とテキストの間隔 */
  margin: 0 auto;         /* ページ中央に配置 */
  margin-bottom: 50px;
}

#photo .card-shot {
  width: 20%;
}
#photo .card-shot img {
  width: 100%;
  border-radius: 80px;
}
/* テキスト側の幅 */
#photo .photo-title {
  width: 60%;
}
/* 見出しの行間・文字間（好みで） */
#photo .photo_eyebrow { 
  font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
letter-spacing: 2px;
text-align:center; 
color: #FFFFFF;
}
#photo .photo_h2 { 
  font-family: gelica, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing:.3em; 
  font-size: 30px;
  text-align: center;
}
.photo-text{ 
    font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
letter-spacing: 1px;
  margin-top: 20px;
text-align: center;
  line-height:1.7; 

}

/* btnテンプレ  */
.text{
    font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
  letter-spacing: 2px;

}
.photo_btn {
  position: absolute;
  top: 20px;
  left: 28%;
  display: inline-block;
  width: 250px;
  text-align: center;
  text-decoration: none;
  line-height: 35px;
  outline: none;
  color: #fff;
  background-color: #6D92BF;
  position: relative;
  border: 1px solid #fff;
  transition: color 0.5s ease;
}
.photo_btn:hover {
  color: #6D92BF;
}
.photo_btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.photo_btn::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}
.text {
  position: relative;
}

/* btnテンプレ終わり */





/*==================================================
スライダーのためのcss
===================================*/
/* 2列の包みは前面へ（波より上） */
.photo-rows{
  width:100%;
  margin:24px auto 0;
  display:flex;            /* ← grid から変更 */
  flex-direction:column;
  gap:16px;
  position:relative;
}


/* スライダー */
.photo-slider{ width:100%; margin:0 auto; }
.photo-slider .slick-list{ overflow: visible; }   /* 端が切れるのを防ぐ（任意） */
.photo-slider .slick-track{ display:block !important; }


/* 白い正方形の箱（サイズ固定） */
.photo-slider li{
  list-style:none;
  width: clamp(120px, 11vw, 160px);  /* ←ここで大きさ決める */
  height: clamp(120px, 11vw, 160px); /* 正方形固定 */
  background:#fff;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  margin: 0 10px;                    /* スライド間の余白 */
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-sizing: border-box;
}

/* 画像の収め方（片方だけ使う） */
.photo-slider li img{
  width:100%; height:100%;
  object-fit: cover;   /* 余白ありで全体表示。ピタッとなら cover に */
  padding:10px;          /* contain時だけ */
  display:block;
}
/* 余白なしで埋めたい派
.photo-slider li img{ object-fit: cover; padding:0; }
*/




/* ===== なみなみ ===== */
.custom-shape-divider-bottom-1757731351{
  position:absolute;
  left:0; right:0; bottom:0;
  height: var(--wave-photo-h);
  line-height:0; overflow:hidden;
  transform: rotate(180deg);
  z-index:0;                /* ← 背面 */
  pointer-events:none;
}
.custom-shape-divider-bottom-1757731351 svg{ width:100%; height:100%; display:block; }
.custom-shape-divider-bottom-1757731351 .shape-fill{ fill:#166356; }

















/* ===== WORKS（最小限でシンプル） ===== */
:root{
--wc-wave-h: clamp(56px, 7vw, 120px);
}
.works{
position: relative;
  z-index: 5;
  color:#fff;
  text-align:center;
  min-height: 100dvh;
  background:#166356;          
  padding-top: calc(55px + 18vh); /* 見出し余白はそのまま */
  overflow:hidden;                /* はみ出し対策は任意 */
padding-bottom: var(--wc-wave-h);
}



/* 見出し */
.works-title, .works-grid, .works_btn{ 
  position:relative; 
  z-index:2; 
}


.works-title{
  text-align: center;
margin-top: -20px;
margin-bottom: 40px;
}
.works-eyebrow{ 
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
letter-spacing: 2px;
text-align:center; 
color: #fff;
}
.works-h2{ 
  font-family: gelica, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing:.3em; 
  font-size: 30px;
  margin: 0; 
}


/* カードの並び */
.works-grid{
  list-style:none;             /* 箇条書きの点を消す */
  padding:0;
  margin: 0 auto;
  display:grid;
  grid-template-columns:repeat(3,260px);
  gap:44px;
  justify-content:center;
  width:min(980px,92%);
}

.card a{
      font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
  letter-spacing: 2px;

}
/* 1枚のカード（テキスト位置だけ） */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

/* === アーチ型サムネ ===
   padding が白フチ、overflow で中の画像を同じ形に切り抜く
*/
:root{ --thumb-border:12px; }   /* ← フチの太さを変える時だけ調整 */

.work-thumb{
  width:100%;
  aspect-ratio: 1 / 1;                 /* 正方形にしたいなら 1 / 1 */
  margin:0 auto -40px;
background:#fff;
  border-radius:1000px 1000px 300px 300px;    /* 上だけ丸い＝アーチ */
  overflow:hidden;
    border:1px solid #fff;

}

.work-thumb img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* ボタン（ラベル） */
.card-btn {
  display: inline-block;
  width: 250px;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  outline: none;
  color: #166356;
  border:1px solid #166356;
  background-color: #fff;
  -webkit-transition: all .3s;
  transition: all .3s;
  border-radius: 50px;
margin-top: 40px;
}
.card-btn:hover {
  color: #fff;
  border:1px solid #fff;
  background-color: #166356;
}


/* btnテンプレ  */
.text{
    font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
  letter-spacing: 2px;

}
.works_btn {
  position: absolute;
  top: 40px;
  left: 0;
  display: inline-block;
  width: 250px;
  text-align: center;
  text-decoration: none;
  line-height: 35px;
  outline: none;
  color: #fff;
  background-color: #166356;
  position: relative;
  border: 1px solid #fff;
  transition: color 0.5s ease;
}
.works_btn:hover {
  color: #166356;
}
.works_btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.works_btn::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}
.text {
  position: relative;
}

/* btnテンプレ終わり */














.custom-shape-divider-top-1757688199 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
height: var(--wc-wave-h);
  line-height: 0;
  pointer-events: none;
  z-index: 1; }

.custom-shape-divider-top-1757688199 svg {
    position: relative;
    display: block;
    width: calc(139% + 1.3px);
height: clamp(48px, 8vw, 120px);
}

.custom-shape-divider-top-1757688199 .shape-fill {
    fill: #166356;
}



/* ===== Contact ===== */
#contact{
  position: relative;
  min-height: 85vh;
  color:#fff;
  background-image:
    url("../img/contact.png");
 background-size: cover;          /* 1枚なら cover だけでOK */
  }

/* 見出し：左上寄せ */
.contact_inner{
  width: 100%;
text-align: center; 
padding-top: 180px;
}
.contact_eyebrow{ 
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
letter-spacing: 2px;
text-align:center; 
color: #fff;
}
.contact_h2{ 
  margin:0; 
  font-family: gelica, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing:.3em; 
  font-size: 30px;
}


/* ===== Contact CTA（配置用）===== */
.contact-cta{
  width: 100%;
  text-align: center;
  margin-top: 30px;
  z-index: 5;          /* 背景より前 */
}
.cwin-open{
  background: transparent;
  color: #fff;
  border: 1.5px solid #fff;
  padding: 12px 22px;
  border-radius: 999px;

    font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;

  letter-spacing: .05em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .08s ease;
  backdrop-filter: blur(2px);
}
.cwin-open:hover{ background: rgba(255,255,255,.12); }
.cwin-open:active{ transform: scale(.98); }

/* ===== Contact Window（モーダル。名前空間 cwin-）===== */
/* オーバーレイ */
.cwin{
  display: none;
  position: fixed;
  inset: 0;
  padding: 16px;                 /* 余白はお好みで */
  background: rgba(0,0,0,.35);
  z-index: 20000;
}

/* 中央に固定配置するフォーム本体 */
.cwin-form{
  width: min(560px, 92vw);
  background: #fff;
  color: #333;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: 28px 24px 24px;

  /* ここがポイント（positionは absolute だけにする） */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  margin: 0;                          /* 中央配置に合わせてリセット */
  max-height: calc(100dvh - 64px);    /* 画面より大きい時に備える */
  overflow: auto;                     /* 中でスクロール */
}
.cwin-title{
  margin: 0 0 12px;
  text-align: center;
  letter-spacing: .2em;
  font-weight: 800;
}
.cwin-row{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cwin-input{
  flex: 1 1 240px;
  min-width: 0;
  border: 0;
  border-bottom: 2px solid #F26B4B;
  padding: 10px;
}
.cwin-textarea{
  width: 100%;
  min-height: 120px;
  border: 0;
  border-bottom: 2px solid #F26B4B;
  padding: 10px;
}
.cwin-submit{
  display: inline-block;
  margin: 16px auto 4px;
  padding: 12px 24px;
  border: 2px solid #F26B4B;
  background: none;
  color: #F26B4B;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.cwin-submit:hover{ background:#F26B4B; color:#fff; }

.cwin-close{
  position:absolute;
  top: 6px; right: 10px;
  font-size: 28px;
  line-height: 1;
  background: none; border: 0;
  color: #F26B4B;
  cursor: pointer;
}










/* ===== Footer ===== */
:root{
  --footer-h: 90px;   /* フッター高さ */
  --wave-h:   80px;   /* 波の高さ */
  --wave-w:  240px;   /* 1山の横幅 */
}

/* 本体 */
.site-footer{
  position: relative;
  height: var(--footer-h);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;               /* 基準の層 */
}

/* 波（上向き） */
.site-footer::before{
  content: "";
  position: absolute;
  top: calc(-0.6 * var(--wave-h));   /* ← かぶせ量。pxでもOK */
  left: 0;
  right: 0;
  height: var(--wave-h);
  background: #fff;                  /* 波の色 = フッター地色 */

  /* 横にリピートするマスク（WebKit併記） */
  -webkit-mask: url("../img/wave.svg") center top / var(--wave-w) 100% repeat-x;
          mask: url("../img/wave.svg") center top / var(--wave-w) 100% repeat-x;

  pointer-events: none;
  z-index: 0;                         /* テキストより背面 */
}

/* 表示テキスト */
.copyright{
  margin: 0;
  position: relative;
  z-index: 1;                         /* 波より前面に */
  font-family: fot-tsukuardgothic-std, sans-serif;
  color: #3971b8;
}












































/* =====================================================
   Responsive (clean final)
   └ 1) Global tweaks
   └ 2) Tablet ≤960px
   └ 3) Phone ≤768px
   └ 4) XS ≤480px
   ===================================================== */

/* ---------- 1) Global tweaks（常時有効） ---------- */



/* SVGテキストが消えないように */
.arc_text{ fill:#fff; }

/* 擬似要素アニメのはみ出しをボタン内でクリップ */
.about_btn, .service_btn, .photo_btn, .works_btn, .card-btn{
  position: relative;
  overflow: hidden;
  contain: paint;
}

/* hoverは“hoverできる端末のみ” */
@media (hover:hover){
  .card-btn:hover{ color:#fff; border-color:#fff; background:#166356; }
  .works_btn:hover{ color:#166356; }
  .photo_btn:hover{ color:#6D92BF; }
  .service_btn:hover{ color:#fff; }
}
@media (hover:none){
  .about_btn:hover, .service_btn:hover, .photo_btn:hover,
  .works_btn:hover, .card-btn:hover{
    background:inherit; color:inherit; border-color:inherit;
    text-decoration:none; transform:none; filter:none; transition:none;
  }
}

/* ---------- 2) Tablet ≤960px ---------- */
@media (max-width: 960px){

  /* About：1カラム＋順序 画像→右→左 */
  .about_grid{
    grid-template-columns: 1fr;
    row-gap: clamp(20px, 4dvh, 40px);
    text-align:center;
  }
  .about_grid > .photo{ order:1; }
  .about_grid > .about_right{ order:2; justify-self:center; max-width:48ch; }
  .about_grid > .about_left{ order:3; justify-self:center; }

  /* PORTFOLIO：画像ひと回り小さく & アーチ前面 */
  .about .photo{ position:relative; padding-top: clamp(24px, 6vw, 60px); }
  .about .photo img{
    position:relative; z-index:1;
    width: clamp(220px, 72vw, 520px); height:auto;
    margin: clamp(40px, 8vh, 120px) auto 0;
  }
  .about .photo_arc{
    position:absolute; z-index:2; left:50%; transform:translateX(-50%);
    width: min(96vw, 560px); top: 0; pointer-events:none;
  }

  /* Service：ブロブを正方形寄りにして潰れ防止 */
  .cards-3{ justify-items:center; gap:24px; width:min(980px,96%); }
  .card-pill{ width:min(340px,90vw); aspect-ratio:1/1; height:auto; }

  /* Works：2列 */
  .works-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:24px; width:min(92%, 900px);
  }
  .card{ width:min(420px, 88vw); margin-inline:auto; }
}

/* ---------- 3) Phone ≤768px ---------- */
@media (max-width: 768px){

  /* Header×波：確実にスキマを消す（fixed前提） */
  .header{ background:#fff; transform: translateZ(0); }
  .header::after{
    bottom: calc(-8px - 0.6 * var(--wave-h)) !important;
    height: calc(var(--wave-h) + 8px) !important;
    backface-visibility: hidden; will-change: transform;
  }

  /* Hero：円＆名前を少し下げる（必要に応じて数値だけ調整） */
  :root{
    --circle-push: 18vh;
    --gap-circle-name: clamp(12px, 2.8vh, 28px);
    --name-bottom: clamp(20px, 6vh, 48px);
  }
  .wrap{ min-height: calc(100svh - var(--header-h)); }
  #slider{ padding-bottom: clamp(18px, 6vh, 40px); }

  /* About：本人写真もう少し小さく、ボタン中央寄せ */
  .about .photo img{ width: 50%; }  /* 2/3にしたければ 66% */
  .about .photo_arc{ width: min(96vw, 520px); top:-6px; }
  .about_btn{ position: static; left:auto; transform:none; display:inline-block; margin:16px auto 0; text-align:center; }

  /* Photo：縦積み＋中央寄せ、下で波に触れないよう安全距離 */
  #photo .photo-box{ width:92%; height:auto; flex-direction:column; gap:18px; }
  #photo .card-shot{ width:58%; }
  #photo .photo-title{ width:100%; text-align:center; }
  .photo_btn{ position: static !important; left:auto !important; transform:none !important; display:block !important; margin:12px auto 0 !important; text-align:center; }
  #photo .photo-slider, #photo .photo-rows{
    margin-bottom: calc(var(--wc-wave-h, 0px) + 28px) !important;
  }

  /* Service：縦並び＋小さめ */
  .cards-3{ grid-template-columns:1fr; gap:14px; width:88%; margin:20px auto 0; }
  .card-pill{ width:min(260px, 75vw); aspect-ratio:1/1; padding:14px; margin:0 auto; }

  /* Works：1列＋サムネ小さめ */
  .works-grid{ grid-template-columns:1fr; gap:16px; width:88%; }
  .work-thumb{ width:min(64vw, 280px); margin:0 auto 10px; border-radius:500px 500px 180px 180px; }
  .card{ gap:10px; }
  .card a{ font-size:16px; }
  .card-btn{ width:min(280px, 92%); line-height:42px; margin-top:16px; }
  .works_btn{ position: static; margin:18px auto 0; }

  /* 可愛いハンバーガー（あなたのJSが .header.is-open を付与） */
  .nav_toggle{ display:block; z-index:10003; }
  .header_navgroup{
    position: fixed; top: var(--header-h, 64px); left:12px; right:12px;
    display:flex; flex-direction:column; gap:14px;
    padding:16px 16px 18px; background:#fff; border-radius:16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    transform-origin: top center; transform: translateY(-8px) scaleY(.96);
    opacity:0; visibility:hidden; pointer-events:none;
    transition: transform .36s cubic-bezier(.22,1,.36,1), opacity .24s ease, visibility 0s linear .36s;
    z-index:10002;
  }
  .header.is-open .header_navgroup{
    transform:none; opacity:1; visibility:visible; pointer-events:auto;
    transition: transform .44s cubic-bezier(.22,1,.36,1), opacity .28s ease, visibility 0s;
  }
  .header.is-open .nav_toggle::before{ top:21px; transform: rotate(45deg) scaleX(1.06); }
  .header.is-open .nav_toggle span{ transform: translateX(6px); opacity:0; }
  .header.is-open .nav_toggle::after{ top:21px; transform: rotate(-45deg) scaleX(1.06); }

  /* 背景の半透明オーバーレイ（見た目のみ） */
  .header::before{
    content:""; position:fixed; left:0; right:0; top: var(--header-h, 64px); bottom:0;
    background: rgba(0,0,0,.18); backdrop-filter: blur(2px);
    opacity:0; pointer-events:none; transition: opacity .24s ease; z-index:10001;
  }
  .header.is-open::before{ opacity:1; pointer-events:auto; }
}

/* ---------- 4) XS ≤480px ---------- */
@media (max-width: 480px){
  .header_logo img{ height:36px; }
  .service_h2, .photo_h2, .works-h2, .contact_h2{ font-size:24px; }
  .service_eyebrow, .photo_eyebrow, .works-eyebrow, .contact_eyebrow{ font-size:15px; letter-spacing:1.5px; }
  .wattai{ height: clamp(32px, 6.5svh, 60px); }
  .photo-slider li{ width: clamp(84px, 28vw, 120px); height: clamp(84px, 28vw, 120px); }
}




/* === Mobile: header wave seam killer === */
@media (max-width: 768px){
  .header{ background:#fff; transform: translateZ(0); } /* 描画のにじみを抑える */

  /* 波そのものを“深く/高く”重ね直す（必ず勝つように !important） */
  .header::after{
    bottom: calc(-5px - 0.6 * var(--wave-h)) !important;
    height: calc(var(--wave-h) + 6px) !important;
    backface-visibility: hidden;
    will-change: transform;
  }

  /* 仕上げの白い縫い目（1px） */
  .header::before{
    content:"";
    position:absolute; left:0; right:0; bottom:-1px;
    height:1px; background:#fff; z-index:10002;
  }
}
/* ③ Hamburger styles */
.nav_toggle{
  margin-left:auto; display:none; position:relative;
  width:42px; height:42px; border:0; background:transparent; cursor:pointer;
}
.nav_toggle span,
.nav_toggle::before,
.nav_toggle::after{
  content:""; position:absolute; left:9px; right:9px; height:2px;
  background:#3971b8; transition:transform .25s ease, opacity .25s ease, top .25s ease;
}
.nav_toggle span{ top:20px; }
.nav_toggle::before{ top:12px; }
.nav_toggle::after{ top:28px; }

@media (max-width:768px){
  .nav_toggle{ display:block; }
  .header_navgroup{
    position: fixed; top: var(--header-h); left:0; right:0;
    display:none; flex-direction:column; gap:16px;
    background:#fff; padding:16px 20px 20px; border-bottom:1px solid rgba(0,0,0,.06);
  }
  .header.is-open .header_navgroup{ display:flex; }
  .header.is-open .nav_toggle::before{ top:20px; transform: rotate(45deg); }
  .header.is-open .nav_toggle span{ opacity:0; }
  .header.is-open .nav_toggle::after{ top:20px; transform: rotate(-45deg); }
}


/* === SP: ハンバーガーのパネルを半分くらい・右端寄せに === */
@media (max-width: 768px){
  .header_navgroup{
    /* フル幅→右端に寄せた半分幅へ */
    left: auto;
    right: max(12px, env(safe-area-inset-right)); /* iPhoneのノッチも考慮 */
    width: clamp(240px, 50vw, 360px);             /* 最小240px〜最大360pxで“だいたい半分” */
    margin-left: auto;
    border-radius: 16px;
    transform-origin: top right;                  /* 開閉の基点を右上に */
    padding: 14px 16px;
  }

  /* リンクの見た目をコンパクトに（長い文でも折りやすく） */
  .header_navgroup a{
    display:block;
    padding: 10px 6px;
    text-align: left;
    white-space: normal;
    word-break: break-word;
  }
}





















/* ====== Clean Mobile Fixes (final) ====== */
@media (max-width: 768px){

  /* 0) ページ全体：横スクロールを封じる */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* 1) 横流れギャラリー：はみ出しを親でカット */
  #photo, #photo .photo-rows, #photo .photo-slider { overflow-x: hidden; position: relative; }
  #photo .slick-list { overflow: hidden !important; }
  #photo .slick-track { display: flex !important; }
  #photo .photo-slider li { max-width: 92vw; }

  /* 2) Service→Photo 境目の波（.custom-shape-divider-bottom-1755103710） */
  /*    PCと同じ“下向き”を明示、位置は #service の下端＝bottom 固定 */
  #service { margin-bottom: 0 !important; }
  #photo   { margin-top: 0 !important; position: relative; }

  .custom-shape-divider-bottom-1755103710{
    position: absolute !important;
    bottom: -1px !important;     /* ← ここ基準に固定 */
    left: 0; width: 100%;
    overflow: hidden;
    line-height: 0; pointer-events: none; z-index: 0;
  }
  .custom-shape-divider-bottom-1755103710 svg{
    display: block; position: relative;
    width: 104% !important;      /* 端の縫い目を覆う（103〜105%で微調整可） */
    height: 82px !important;     /* 1〜2pxかぶせて縫い目消し */
    left: 50%;
    transform: translateX(-50%) scaleY(-1) !important; /* ← “下向き”を確定 */
    transform-origin: center;
    backface-visibility: hidden;
  }
}