@charset "UTF-8";

/* ===============================
   0) Reset / Base / Helpers
   =============================== */

/* ===============================
   1) PC（デフォルト）
   =============================== */


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

.header{
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 90px;
  background-color:#0E285E !important; 
  display:flex; 
  flex-direction:column; 
  align-items:center;
  z-index:10000;
}
.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: #fff;
  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:#fff; 
  text-decoration:none; 
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.header_navitem:hover{ color:#A8BF89; }
.header_navitem.is-active{
  color:#A8BF89; 
  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:#0E285E;

  /* 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;               /* ヘッダーより前面（必要なら） */
}

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
















/* ===============================
  service セクション
   =============================== */


.service-hero{
  background:#fff;
  color:#0E285E;
  padding-top: 140px;
}
.service-hero__inner{
  width: 100%;
  margin:0 auto;
  text-align:center;
}
.service-hero__eyebrow{
  font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
letter-spacing: 2px;
text-align:center; 
}
.service-hero__title{
  font-family: gelica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  letter-spacing:.3em; 
  text-align:center;
  margin-bottom: 30px;
}
.service-hero__lead{
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
letter-spacing: 0px;
line-height:1.7; 
margin:0 auto;
margin-bottom: 40px;
}

/* 3ブロック */
.service-hero__blocks{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  margin: 30px auto 36px;
  width: 80%;
}
.service-block{
  display:grid;
  grid-template-columns: 1fr;
  justify-items:center;
  gap:18px;

   /* 追加部分 */
  border: 1px solid #ccc;   /* 薄いグレーの枠線 */
  border-radius: 12px;      /* 角を少し丸くする */
  padding: 24px 16px;       /* 中の余白 */
  background: #fff;         /* ネイビー背景に映えるよう白背景 */

}
/* Pill 見出し：常にど真ん中 */
.service-chip{
  /* 見た目 */
  background:#0E285E;
  color:#fff;
  border-radius:999px;

  /* 中身を完全センター */
  display:flex;
  align-items:center;
  justify-content:center;

  /* サイズはパディングで作る（高さ固定しない） */
  padding: 0px 24px;              /* ←上下/左右 */
  min-height: 36px;                /* 56〜64pxくらい好みで */

  /* テキスト */
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.2;                 /* ←1.7をやめる */
  letter-spacing:0;

  /* レイアウト */
  width:90%;
  box-sizing:border-box;           /* パディング分で横幅がはみ出さない */
  text-align:center;
}
.service-block-image{
  width: 50%;
}
.service-list{
  text-align:left;
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
letter-spacing: 0px;
line-height:1.7; 
}
.service-list-website{
  font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
letter-spacing: 0px;
line-height:1.7; 

}

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

}

.service_btn a{
  position: relative;        /* absoluteやleft/transformは不要 */
  display: inline-block;            /* ブロックにして */
  width: max-content;        /* または固定幅: 250px */
  margin: 40px auto 0;       /* margin: 0 auto; で中央寄せ */
  width: 250px;
  text-decoration: none;
  line-height: 35px;
  text-align: center;
  color: #0E285E;
  background: #fff;
  border: 1px solid #0E285E;
  transition: color .5s ease;
}
.service_btn a::before{
  content:"";
  position:absolute;
  inset:0;
  background:#0E285E;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s ease;
}
.service_btn a:hover{ color:#fff; }
.service_btn a:hover::before{ transform:scaleX(1); transform-origin:left; }

.service_btn a .text{ 
  position:relative; 
  z-index:1; 
}
/* btnテンプレ終わり */


/* ========== Photography セクション ========== */
.photo-service{
  background:#fff;
  color:#0E285E;
  text-align:center;
  margin-top: 200px;
    scroll-margin-top: 200px; /* ヘッダー高さに合わせる */

}
.photo-service__eyebrow{
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
letter-spacing: 2px;
text-align:center; 
}
.photo-service__title{
  margin-bottom: 50px;

  font-family: gelica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  letter-spacing:.3em; 
  text-align:center;
  color:#F6A39A; 
}
.photo-service__lead{
  width: 70%;
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
letter-spacing: 0px;
line-height:1.7; 
margin:0 auto;
margin-bottom: 60px;

}

/* ========== Gallery（指示通りcolumns） ========== */
.gallery{
columns: 8;/*段組みの数*/
padding:0 15px;/*ギャラリー左右に余白をつける*/
margin:0;
width: 80%;
margin: 0 auto;
}

.gallery li {
    margin-bottom: 20px;/*各画像下に余白をつける*/
list-style:none;
}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
  border-radius: 10px;
}

/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
	.gallery{
	columns:3;
	}	
}

@media only screen and (max-width: 768px) {
	.gallery{
	columns: 2;
	}	
}





























/* ===== Contact CTA（配置用）===== */
.contact-cta{
  width: 100%; 
  text-align: center;
  margin-top: 30px;
  margin-bottom: 100px;
  z-index: 5;          /* 背景より前 */
}
.cwin-open{
  background: transparent;
  color: #6D92BF;
  border: 1.5px solid #6D92BF;
  padding: 5px 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(109,146,191,0.7);
  color: #fff
  ;
}
.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 #6D92BF;
  padding: 10px;
}
.cwin-textarea{
  width: 100%;
  min-height: 120px;
  border: 0;
  border-bottom: 2px solid #6D92BF;
  padding: 10px;
}
.cwin-submit{
  display: inline-block;
  margin: 16px auto 4px;
  padding: 12px 24px;
  border: 2px solid #6D92BF;
  background: none;
  color: #6D92BF;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.cwin-submit:hover{ background:#6D92BF; color:#fff; }

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






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

/* 本体 */
.site-footer{
  position: relative;
  height: var(--footer-h);
  background-color:#0E285E !important; 
  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: #0E285E;                  /* 波の色 = フッター地色 */

  /* 横にリピートするマスク（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: #fff;
}











































/* === Mobile: header wave seam killer === */
@media (max-width: 768px){
  .header{ background:#fff; transform: translateZ(0); } /* 描画にじみ抑制 */
  .header::after{
    bottom: calc(-5px - 0.6 * var(--wave-h)) !important;
    height: calc(var(--wave-h) + 6px) !important;
    backface-visibility: hidden; will-change: transform;
  }
  .header::before{
    content:""; position:absolute; left:0; right:0; bottom:-1px;
    height:1px; background:#fff; z-index:10002;
  }
}

/* === Hamburger（共通） === */
.nav_toggle{
  margin-left:auto; display:none; position:relative;
  width:42px; height:42px; border:0; background:transparent; cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav_toggle span,
.nav_toggle::before,
.nav_toggle::after{
  content:""; position:absolute; left:9px; right:9px; height:2px;
  background:#fff; 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; z-index:10003; }
  .header_navgroup{
    position: fixed; top: var(--header-h, 90px); left:12px; right:12px;
    display:flex; flex-direction:column; gap:14px;
    padding:16px 16px 18px; background:#0E285E; 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:20px; transform: rotate(45deg); }
  .header.is-open .nav_toggle span{ opacity:0; }
  .header.is-open .nav_toggle::after{ top:20px; transform: rotate(-45deg); }

  /* 背景の半透明オーバーレイ（見た目だけ） */
  .header::before{
    content:""; position:fixed; left:0; right:0; top: var(--header-h, 90px); 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; }
}



















/* ===== Tablet ≤960px ===== */
@media (max-width: 960px){
  .service-hero{ padding-top: 130px; }
  .service-hero__lead{ width: 86%; }
  .service-hero__blocks{ width: 86%; grid-template-columns: repeat(2,1fr); gap:24px; }
  .service-block-image{ width: 60%; }
  .service_btn a{ margin-top: 28px; }
  .photo-service__lead{ width: 82%; }
  /* ギャラリー：段組みを軽く詰める */
  .gallery{ width: 86%; columns:3; }
}

/* ===== Phone ≤768px ===== */
@media (max-width: 768px){
  .service-hero{ padding-top: 120px; }
  .service-hero__title{ font-size:26px; }
  .service-hero__blocks{ width: 92%; grid-template-columns: 1fr; gap:18px; }
  .service-block{ padding:18px 14px; }
  .service-block-image{ width: 58%; }
  .service_btn a{ display:block; margin:24px auto 0; }
  .photo-service{ margin-top: 140px; }
  .photo-service__lead{ width: 90%; font-size:14px; }
  /* ギャラリー：2段・余白コンパクト＋波に当たらないよう安全距離 */
  .gallery{ width: 92%; columns:2; }
}

/* === Gallery：スマホは3列、横幅が広いスマホは4列 === */
@media (max-width: 768px){
  .gallery{ columns: 3; }
}
/* ちょい広めのスマホで4列（必要なら閾値は調整OK） */
@media (min-width: 420px) and (max-width: 768px){
  .gallery{ columns: 4; }
}


/* === 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;
  }
}
/* PC & タブレット（768px以上）は3列にする */
@media (min-width: 768px){
  .service-hero__blocks{
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* スマホ（〜767px）は1列のまま */
@media (max-width: 767px){
  .service-hero__blocks{
    grid-template-columns: 1fr !important;
  }
}