@charset "utf-8";

/* CSS Document */

/*----- 変数定義 ------------------------------*/
:root {
  /* 色 */
  --main-green: #21A937;
  --accent-green: #99E5A5;
  --dark-gray: #444444;
  --greige: #d3cec6;
  --theme-red: #a5432c;
  --theme-brown: #3e1906;
  --theme-yellow: #FDCD00;
  --theme-light-yellow: #EAE8D9;
  --camera-black:#2D2D2C;
  /* 幅 */
  --innner-max-width: 1220px;
}
/*----- font（メインで使用するもの以外） -------*/
.font-poppins {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 800;
}
.font_red {
  color: var(--theme-red);
}

/*----- reset-css ----------------------------*/
* {
	/* 全体幅にpadding分を足さないように指定 */
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
button,
input,
textarea,
select {
  font-family: inherit;  /* 親要素のフォントを継承 */
}
/*----- default-css --------------------------*/
.visually-hidden {
  width: 1px;
  height: 1px;
  position: absolute;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
ul {
	list-style: none;
}
a {
  color: inherit;  /* リンク色への変更を阻止、親要素のテキスト色を継承 */
	text-decoration: none;
}
a:hover {
	opacity: 0.6;
}
.under_line{
  padding-bottom: 3px;
  border-bottom: 1px solid #fff;
}
.under_line_dot {
  display: inline-block; /* テキスト幅のみ下線を引く */
  max-width: max-content; /* テキスト幅のみ下線を引く */

  padding: 0 5px 3px;
  border-bottom: 1px dotted #afaaaa;

  position: relative;        /* 疑似要素の基準 */
  z-index: 0;
  overflow: hidden;          /* 背景がはみ出さないように */
}
/* ホバー用の背景 */
.under_line_dot::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  background: #F2DC77;
  border-radius: 50%;             /* まるく膨らむ */
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.35s ease-out;
}
/* ホバー時：背景が中央から広がる */
.under_line_dot:hover::before {
  cursor: pointer;
  width: 200px;   /* 拡大範囲（文字幅より大きめでOK） */
  height: 200px;
  transform: translate(-50%, -50%) scale(1);
}
 
/*---------------------------------------------*/
html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}
/* ▼ 下層背景：カバー表示して固定 */
body {
  font-size: 14px;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;

  color: var(--theme-brown);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  font-weight: 400;

  background-image: url(../img/bg_base.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;      /* 画面いっぱいにフィット */
  background-attachment: fixed;/* スクロールしても動かない */
}

/* ▼ 上層背景：縦幅はコンテンツに合わせて拡張 & 左右中央に固定 */
body::after {
  content: "";
  width: 1440px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);

  background-image: url(../img/bg.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 1440px;
  /* background-size: var(--innner-max-width); */
    
  pointer-events: none;
}

/*----- 共通パーツ -------------------------*/

/* ロゴ押下でトップへ戻る */
.scroll-top {
  opacity: 1;
  color: inherit;
  text-decoration: none;
}
.scroll-top img {
  display: block;
}

/* レスポンシブ：折り返し位置調整 */
.pc-br {
	display: block;
}
.tb-br {
	display: none;
}
.sp-br {
	display: none;
}


/*----- PC / SP 出し分け ------------------------------*/

/* PC では .sp_only を非表示 */
.sp_only {
  display: none !important;
}
.pc_only {
  display: block !important;
}
@media (max-width: 768px) {
  /* SP表示では逆に */
  .pc_only {
    display: none !important;
  }
  .sp_only {
    display: block !important;
  }
}

/*----- Opening：黒い幕が上から落ちる ------------------------------*/
#opening {
  position: fixed;
  inset: 0; /* 画面全体を覆う */
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: #1b1915; /* 幕の色*/
  transform: translateY(0); /* 最初は画面全体をおおっている状態 */
}
/* Loading 文字は今まで通りでOK */
.opening-loading {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 6px;
  font-size: 22px;
  font-weight: 600;
  color: var(--theme-light-yellow);
  font-family: 'Poppins', sans-serif;
}
.load-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}

/* --------------------------- header --------------------------- */
header {
	height: 130px;
}
.header_inner {
	max-width: var(--innner-max-width);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-right: auto;
	margin-left: auto;
	padding: 0 20px 0 42px;
  background-color: var(--theme-light-yellow);
}
/* ロゴ全体 */
.header_logo_flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  flex-wrap: nowrap;
}
.header_logo img{
  width: 70px;
  height: 70px;
}
/* テキスト部分 */
.header_logo_text {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  display: inline-block;
  white-space: nowrap;
}
/* 1文字ずつアニメ用 */
.header_logo_text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(-40px); /* 最初の位置（この位置からふわっと落ちる） */
}
.logo {
  width: 200px;
  height: auto;
}
.logo_text {
  width: 300px;
  height: auto;
}
.header_right {
	display: flex;
  flex-direction: column;
	align-items: flex-end;
  gap:8px;
}
.header_right img {
  width: 25px;
  height: 25px;
	margin-right: 6px;
	margin-bottom: 5px;
	vertical-align: middle;
}
.header_right p:last-child {
  font-size: 24px;
  font-weight: 700;
  color: var(--main-green);
  vertical-align: middle;
}

/* --------------------------- menu --------------------------- */
.menu-bar {
  width: 100%;
  display: flex;
  align-items: center;            /* 垂直中央 */
  justify-content: flex-end;      /* 右寄せ */
  position: relative;
  padding-right: 20px;
}
.menu-bar ul {
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-bar li a {
  padding-bottom: 4px;
  font-size: 20px;
  color: var(--theme-brown);
  text-decoration: none;
}
.menu-bar li a:hover { 
  border-bottom: 1px solid #333; 
}
.menu-bar li a>span:hover { 
  color: var(--theme-red);
}
.menu-bar.fixed {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  padding-right: 100px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* ▼ メニューli 初期状態（透明＆上にずらす） */
/* 初期状態：上に少し持ち上げておく */
.menu-bar ul li {
  opacity: 0;
  transform: translateY(-40px);
}
/* メニューの1文字ずつ動かす用 */
.menu-bar ul li a .char {
  display: inline-block;
}

/* ▼ 無効リンク用 */
/* リンクなし（無効）メニュー */
.menu-bar li.menu-disabled span {
  font-size: 20px;
  padding-bottom: 4px;
  color: var(--greige);
  cursor: default;
}
/* ホバーしても何も起きないように */
.menu-bar li.menu-disabled span:hover {
  color: var(--greige);
}
/* もし a タグで残す場合の保険（クリック無効化） */
.menu-bar li.menu-disabled a {
  pointer-events: none;
  color: var(--greige);
  border-bottom: none;
}

/* --------------------------- main_visual --------------------------- */
.main {
  max-width: var(--innner-max-width);
  position: relative;
  margin: 0 auto;
  padding: 0 10px;
  background-color: var(--theme-light-yellow);
}
.main_photo {
  width: 100%;
  height: 845px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  background: transparent;
}
.main_photo > img.sp_only{
  width: 100%;
  height: auto;
  display:block;
}

/* --------------------------- main_visualスライド用 (↓) --------------------------- */
/* PCスライド枠：main_photo全面 */
.main_photo_pc{
  position:absolute;
  inset:0;
}
/* PCスライド画像：重ねてフェード */
.main_photo_pc img{
  width:100%;
  height:100%;          /* ←トリミングに必要 */
  position:absolute;
  inset:0;
  display:block;

  object-fit:cover;     /* ←中央トリミング */
  object-position:center;

  opacity:0;
  transition: opacity 3000ms ease;  /* ← 切り替え時の写真間の変化速度 */
}
.main_photo_pc img.is-active{
  opacity:1;
}


/* --------------------------- main_visualスライド用 (↑) --------------------------- */
/* =========================
   PC用Catch
   ========================= */
.main_photo .catch{
  /* 狭くなったら縮む */
  width: min(760px, 80vw);
  height: 200px;
  padding: 50px 50px 80px 50px ;

  position: absolute;
  left: 0;
  top: 7%;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;

  background-color: rgba(255, 255, 255, 0.4);
  text-align: center;

  box-sizing: border-box;
  overflow: hidden;            /* どうしても無理な時の保険 */
}

/* SVGキャッチ画像：基本は固定、でも枠より大きい時は縮む */
.main_photo .catch img{
  display: block;
  width: min(780px, 100%);
  height: auto;
  background: transparent;

  filter:
    drop-shadow(0 0 6px rgba(255,255,255,0.7))
    drop-shadow(0 0 14px rgba(255,255,255,0.5))
    drop-shadow(0 8px 18px rgba(255,255,255,0.8))
    drop-shadow(0 14px 30px rgba(255,255,255,0.55));
}

/* PC用アニメーションのために初期値設定 */
@media (min-width: 768px){
  /* ▼ 待機状態（表示しない＋左にオフセット） */
  #mainCatch{
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity .8s ease, transform .8s ease;
    will-change: opacity, transform;
  }
  /* ▼ 表示開始（左からフェードイン） */
  #mainCatch.is-show{
    opacity: 1;
    transform: translateX(0);
  }
}


.contact_link_btn {
  width: 274px;
  height: 74px;
  position: absolute;
  right: 60px;
  bottom: 84px;
  padding: 23px 60px;
  border-radius: 10px;
  background-color: var(--theme-yellow);
  font-size: 28px;
}
.contact_link_btn a{
  color: var(--theme-brown);
}
.contact_link_btn a>span:hover { 
  color: var(--theme-red);
}
.contact_link_btn .contact-link {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.contact_link_btn .contact-link span{
  margin-left: 1px; /* 文字間隔 */
}
.contact_link_btn .contact-link::after {
  content: "\f0da"; /* Font Awesome の chevron-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solid アイコン */
  font-size: 0.9em;
  margin-left: 12px; /* Contact と矢印の間隔 */
  color: var(--theme-brown); /* 矢印の色 */
}


/* --------------------------- main_gallery --------------------------- */
.main_gallery {
  max-width: var(--innner-max-width);
  position: relative;
  margin: 0 auto;
  padding: 0 10px;
  padding: 100px 0;
  background-color: var(--theme-light-yellow);
  text-align: center; /* 画像・テキストとも中央寄せ */
}
/* ギャラリーフレーム画像 */
.main_gallery > img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* 横中央寄せ */
}
/* セクションタイトルをフレーム上に重ねる */
.section_gallery_title {
  position: absolute;
  top: 160px;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
}
.section_gallery_title img {
  width: 150px;
  height: auto;
  display: block;
}





/* ===== Gallery（PC基準）===== */
.gallery-section{
  position: relative;
  padding: 100px 0;
  text-align: center;
}

/* フレーム全体の箱：ここを基準幅にする */
.gallery-frame{
  width: min(1200px, 100%);
  position: relative;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  z-index: 90;
}

/* 穴（写真）の位置とサイズ：pxベースで管理 */
.gallery-slides{
  width: 65%;              /* ← 写真の横幅（フレーム穴に合わせて調整） */
  height: 68%;             /* ← 写真の縦幅（同上） */
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 20px;
}

.gallery-slides img{
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
.gallery-slides img.active{ opacity: 1; }

/* PNGフレーム画像 */
.gallery-frame-img{
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 2;
  object-fit: contain;
  pointer-events: none;
}





/* 左右送りボタン */
.gallery-nav {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-47%);
  border: none;
  border-radius: 50%;
  background: var(--camera-black);
  color:  #fff;
  cursor: pointer;
  font-size: 24px;
  line-height: 1.5;
}
/* 左方向ボタン */
.gallery-prev {
  left: 100px;   /* ← PNGの外側になるように調整 */
}
/* 右方向ボタン */
.gallery-next {
  right: 100px;
}
.gallery-nav:hover {
  background: var(--theme-red);
  color: #fff;
}
.gallery-under{
  margin-top: 20px;
  padding-left: 240px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap:20px;
}
/* 説明文 */
.section_gallery_comment {
  font-size: 18px;
  text-align: center;
  line-height: 1.8;
}
/* Contactへのリンクボタン */
.contact-link .char {
  display: inline-block;  /* 1文字ずつ動かす必須！ */
}



/* --------------------------- section：about --------------------------- */

/* --- ▼ セクションタイトル ---  */
.about-title-text {
  display: inline-block;
  margin-left: 0px;
  font-size: 45px;
  font-weight: 800;
  letter-spacing: -6px;
  color: var(--theme-red);
}
.about-title-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(-40px);
}
/* --- ▲ セクションタイトル ---  */

.about_contents{
  padding: 0 70px 0 100px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 45px;
}
.about_photo{
  border-radius: 10px;
}
.about-left{
  width: 100%;
  height: auto;
}
.about-left_row1{
  margin: 50px 0;
  font-size: 30px;
}
.about-left_row1 span{
  margin-left: 15px;
  color: var(--theme-red);
}
.about-left_row2{
  margin: 10px 0 70px 0;
}
/* .about-left_row2 p{
  margin-bottom: 20px;
  font-size: 17px;
  line-height: 1.3;
} */
.about-left_row2 p{
  margin-bottom: 20px;
  font-size: clamp(14px, 1.2vw, 17px); /* 最小14px / 可変 / 最大17px */
  line-height: 1.5;
  overflow-wrap: break-word; /* はみ出し防止 */
  word-break: normal;
}

.about-right {
  position: relative; /* 重ね合わせの基準 */
  display: inline-block; /* 必要に応じて中央寄せなど */
}
.about-right img {
  width: 400px; /* 任意で調整 */
  height: auto;
  display: block;
}

/* プロフィール画像 */
/* 上の画像（プロフィール画像） */
.about-right img:first-child {
  position: absolute;
  top: 0px;   /* 上に40pxずらす */
  left: -40px;  /* 左に40pxずらす */
  z-index: 2;   /* 前面に */
}
/* 下の画像（背景） */
.about-right img:last-child {
  position: relative;
  top: 40px;   /* 下に40pxずらす */
  z-index: 1;
}
/* 外部サイト／SNSリンクアイコン */
.about_icon_box{
  display: flex;
  justify-content: flex-start;
  gap: 24px;
}
.about_icon_box .icon-link {
  display: inline-block;
}
.about_icon_box .icon {
  display: block;
  cursor: pointer;
  transform-origin: center bottom; /* バウンドの軸を下に */
}
/* アイコンを揺らすアニメーション用 */
.about_icon_box .icon-link {
  display: inline-block;          /* transformを効かせるため */
  transform-origin: 50% 100%;     /* 下中央を支点にフリフリ */
}

/* --------------------------- section：service --------------------------- */

/* --- ▼ セクションタイトル ---  */
.service-title-text {
  display: inline-block;
  font-size: 45px;
  font-weight: 800;
  letter-spacing: -6px;
  color: var(--theme-red);
}
/* 1文字ずつ表示させるための初期状態 */
.service-title-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(-40px);   /* 上から落ちるスタート位置 */
}
/* --- ▲ セクションタイトル ---  */

.service_contents{
  padding: 100px 10px 0 80px;
}
.service_contents_title{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 55px;
}
.service_lead{
  font-size: 30px;
  font-weight: 500;
  color: #572912;
}
.service-list {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 40px; /* 写真撮影、動画撮影、婚活サポートの縦方向の余白 */
}
.service-list_item {
  display: flex;
  gap: 50px; /* 画像とテキスト間の横方向の余白 */
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 0px;
}

/* 2つめのコンテンツだけ左右逆にするための記述 */
.service-list_item.item-1,
.service-list_item.item-3 {
  flex-direction: row-reverse; 
}

/* PCの場合の位置微調整 */
@media (min-width: 769px) {
    
  .service-list_item.item-1,
  .service-list_item.item-3 {
    margin-left: 8px;
  }
  /* 2番目の .service-list_item だけテキスト幅を決める */
  .service-list .service-list_item:nth-of-type(2) .service_info {
    flex: 0 0 600px;  /* テキストブロックの幅 */
  }
  /* 2番目も左寄せレイアウトに */
  .service-list .service-list_item:nth-of-type(2) {
    justify-content: flex-start;
  }

}

/* テキスト情報部 */
.service_info {
  flex: 1;
}
.service_info h3 {
  margin-bottom: 37px;
  font-size: 20px;
  font-weight: 500;
  color: var(--theme-red);
}
/* .service_info p {
  margin-left: 5px;
  margin-bottom: 20px;
  font-size: 18px;
} */
.service_info p {
  margin-left: 5px;
  margin-bottom: 20px;
  font-size: clamp(14px, 1.3vw, 18px); /* 最小 / 可変 / 最大 */
  line-height: 1.6;
  overflow-wrap: break-word; /* はみ出し防止 */
  word-break: normal;
}


/* 写真だけトリミング */
.service_image .service_photo{
  width: 315px;
  height: 240px;
  display: block; /* 余白対策 */
  border-radius: 7px;
  object-fit: cover;
  object-position: center;
}

/* NEWアイコン */
.service_image{
  position: relative;
}
.service_image .new_icon{
  width: 130px;
  height: auto;          /* 念のため上書き */
  position: absolute;
  bottom: 0;
  left: -65px;
  display: block;

  object-fit: initial;   /* 念のため無効化 */

  transform: scale(0) rotate(-15deg);
  opacity: 0;
}

/* =========================
   Service Image Scroll In
========================= */
/* service_infoの表示アニメーション用（初期非表示位置） */
.service_info {
  opacity: 0;
  transform: translateX(-3px);
}
/* 初期状態：左上から斜め、少し回転、透明 */
.service_image {
  opacity: 0;
  transform: translate(-40px, -40px) rotate(-20deg);
  transition: 
    opacity 0.6s ease,
    transform 1s cubic-bezier(.2, .8, .2, 1);
  will-change: opacity, transform;
}
/* 表示状態：定位置にカクッと収まる */
.service_image.is-inview {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}
/* サービスセクション最後のテキスト */
.service_contents_bottom_message{
  margin-top: 35px;
  text-align: center;
  font-size: 18px;
}

/* --------------------------- section：contact --------------------------- */
/* --------------------------- section：contact --------------------------- */

/* --- ▼ セクションタイトル ---  */
.contact-title-text {
  display: inline-block;
  margin-left: -10px;
  font-size: 45px;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--theme-red);
}
.contact-title-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(-40px);
}
/* --- ▲ セクションタイトル ---  */

.contact_contents {
  padding: 100px 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-box {
  width: 100%;
  max-width: 820px;
  text-align: center;
}

.contact-box h2 {
  margin-bottom: 8px;
  text-align: center;
}

.contact-lead {
  margin: 40px 0 50px;
  font-size: clamp(18px, 2.2vw, 26px);
  text-align: center;
  line-height: 1.6;
}

.contact-lead-sub {
  margin: 25px 0 30px;
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
}

.contact-box label {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  text-align: left;
}

.contact-box input,
.contact-box textarea {
  width: 100%;
  margin-top: 23px;
  margin-bottom: 23px;
  padding: 8px 10px;
  border: none;
  border-radius: 5px;
  box-sizing: border-box;
  font-family: inherit;
}

.contact-box input {
  height: 65px;
}

.contact-box textarea {
  height: 153px;
  resize: vertical;
}

/* ハニーポット */
.contact-hp {
  width: 1px;
  height: 1px;
  position: absolute;
  left: -9999px;
  overflow: hidden;
}

/* プライバシーポリシー */
.form-privacy {
  margin: 20px 0 30px;
  text-align: left;
}

.privacy-box {
  padding: 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.45);
}

.privacy-title {
  margin-bottom: 12px;
  font-size: 20px;
  color: var(--theme-red);
}

.privacy-inner p {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.8;
}

.form-privacy-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  cursor: pointer;
}

.form-privacy-row .privacy-check {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
}

.privacy-agree-text {
  font-size: 15px;
  line-height: 1.6;
}

/* Turnstile */
.cf-turnstile {
  margin: 0 auto 24px;
  display: flex;
  justify-content: center;
}

/* 送信ボタン */
.contact-submit {
  width: 379px;
  height: 62px;
  display: block;
  margin: 24px auto 0;
  letter-spacing: 0.2em;
  border: none;
  border-radius: 10px;
  background: #f1b800;
  font-size: 36px;
  font-weight: 700;
  color: var(--theme-brown);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* 斜めの白い光 */
.contact-submit::after {
  content: "";
  width: 80%;
  height: 220%;
  position: absolute;
  top: -60%;
  left: -60%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.8) 50%,
    transparent 100%
  );
  transform: translateX(-150%);
  pointer-events: none;
}

.contact-submit:hover::after {
  animation: shine-sweep 0.7s ease-in-out;
}

@keyframes shine-sweep {
  0% {
    transform: translateX(-150%);
  }
  100% {
    transform: translateX(200%);
  }
}

/* 送信中 */
.contact-submit.is-sending {
  opacity: 0.7;
  pointer-events: none;
}

/* 結果メッセージ */
.contact-status {
  min-height: 1.5em;
  margin-top: 14px;
  margin-bottom: 5px;
  font-size: 14px;
  white-space: pre-line;
}

.contact-status--info {
  color: #555;
}

.contact-status--success {
  color: #1a7f3b;
}

.contact-status--error {
  color: #b00020;
}


/* --------------------------- footer --------------------------- */
footer {
  width: 100%;
  height: 189px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--theme-brown);
}
.footer_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  color: #fff;
}
.footer_info p{
  text-align: left;
  line-height: 1.6;
}
.footer_info img{
  width: 200px;
}
.footer_info a{
  border-bottom: 1px solid #fff;
  color: #fff;
}
.footer_link {
  margin-bottom: 5px;
}

/* --------------------------- privacy policy --------------------------- */

/* --------- プライバシーポリシー用 モーダル画面 --------- */
.privacy-modal {
  position: fixed;
  inset: 0; /* top:0 right:0 bottom:0 left:0 の短縮 */
  z-index: 2000;
  display: none; /* 初期は非表示 */
  font-size: 17px;
  line-height: 1.3;
}
.privacy-modal.is-open {
  display: block;
}
/* 黒の半透明オーバーレイ */
.privacy-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
/* 中央のカード部分 */
.privacy-modal__content {
  max-width: 720px;
  max-height: calc(100vh - 80px); /* 画面から少し余白を残す */
  position: relative;
  margin: 40px auto;
  padding: 0;

  background: var(--theme-light-yellow);           /* 例：薄いベージュ */

  /* ← ヘッダーを端まで出したいので padding は 0 に */

  /* 角丸なし */
  border-radius: 0;

  overflow-y: auto;              /* ここで縦スクロールをつける */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
/* --------- モーダル内の要素 --------- */
.privacy-modal__inner h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
}
.privacy-modal__inner h3 {
  font-size: 20px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 8px;
}
.privacy-modal__inner ul {
  padding-left: 1.2em;
}
.privacy-modal__inner ul li{
  padding-left: 1em;
  text-indent: -1em;
}
.privacy-modal__contact_info {
  margin-top: 20px;
}
.privacy-modal__logo {
  text-align: center;
  margin-top: 30px;
}
.privacy-modal__logo img{
  width: 55%;
}
.privacy-modal__footer {
  width: 240px;
  margin: 20px auto 0;
  padding-bottom: 0;
  border-bottom: 2px solid #b3b3b3;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

/* --------- モーダル上部ヘッダー部分 --------- */

/* 閉じるボタン（モーダルヘッダ右上に固定） */
.privacy-modal__close {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 20; /* ヘッダーの上に出す */
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #fff; 
}
.privacy-modal__header {
  position: sticky; /* スクロールしても上部に固定 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 10; /* 閉じるボタンと干渉しないように高め */
  margin: 0;
  padding: 12px 20px;
  background: var(--theme-brown);
  border-radius: 0; /* 角丸なし */
}
/* ロゴの横並び */
.privacy-modal__header_logo_flex {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* ロゴ画像サイズ */
.privacy-modal__header_logo img {
  width: 36px;
  height: auto;
}
/* ロゴ横のテキスト */
.privacy-modal__header_logo_text {
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
}
.privacy-modal__header_logo_text .red {
  color: var(--theme-red);
}

/* ▼ 固定ヘッダ関連　位置調整 */
.privacy-modal__inner {
  padding: 24px 28px 32px;
}
.content_inner{
  max-width: var(--innner-max-width);
  margin-right: auto;
  margin-left: auto;
  background-color: var(--theme-light-yellow);
}

/* 初期表示の通常ヘッダー（そのまま自然に配置） */
.site-header-normal {
  width: 100%;
  position: relative;
  z-index: 5;
}
/* スクロール時の固定ヘッダー（最初は隠す） */
.site-header-fixed {
  width: 100%;
  position: fixed;
  top: -120px;     /* 上に隠す位置 */
  left: 0;
  z-index: 500;

  opacity: 0;
  transform: translateY(0);
  pointer-events: none;
  box-shadow: -2px 0 10px rgba(156, 124, 54, 0.2);
}


/* --------------------------- 共通の調整 --------------------------- */

/* SNSアイコン＆問い合わせ送信ボタンのホバー */
.about_icon_box .icon:hover,
.gallery_insta_icon .icon:hover,
.contact-submit:hover {
  opacity: 1; /* GSAP側で処理 */
  cursor: pointer;
}


/* --------------------------- resposive --------------------------- */

/* ===================== SP (〜768px) ===================== */
@media (max-width: 768px) {

  /* 改行調整用 */
  .pc-br {
    display: none;
  }
  .sp-br {
    display: block;
  }
  .tb-br {
    display: none;
  }

  html,
  body {
    font-size: 14px;
  }
  /* ▼ 下層背景：カバー表示して固定 */
  body {
    background-image: url(../img/bg_base_sp.png);
  }
  body::after {
    width: 100%;
    left: 0;
    transform: none;
    background-size: cover;
  }

  .header_inner{
    max-width: 316px;
  }
  .content_inner{
    max-width: 316px;
  }
  .main{
    max-width: 316px;
  }

  /* ---------- Header：SP ---------- */
  header {
    height: auto;
  }
  .header_inner {
    padding: 10px 16px;
    gap: 12px;
  }
  .header_logo_flex {
    flex: 1;
  }
  .header_logo img{
    width: 50px;
    height: 50px;
  }
  .header_logo_text {
    font-size: 18px;
    margin-top: 5px;
  }
  /* PCメニューはSPでは非表示（モバイルナビ使用前提） */
  .menu-bar {
    display: none;
  }

  /* ---------- Main Visual：SP ---------- */
  .main{
    padding: 0;
  }
  /* スライドの土台 */
  .main_photo{
    width: 100%;
    height: auto;
    position: relative;
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 9 / 16;      /* 縦長 */
  }
  /* SPスライド枠：main_photo全面 */
  .main_photo_sp{
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }
  /* SPスライド画像：重ねてフェード */
  .main_photo_sp img{
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    display: block;

    object-fit: cover;
    object-position: center;

    opacity: 0;
    transition: opacity 3000ms ease;
  }
  .main_photo_sp img.is-active{
    opacity: 1;
  }


  /* --- キャッチ画像：右からフェードインして、左にピタっとつける --- */
  
  .main_photo .catch{
    width: 90vw;
    height: auto;
    max-width: 780px;

    position: absolute;
    top: 50px;
    left: 0;
    padding: 0px;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 250px;

    background: transparent;

    /* フェードイン（初期：右から） */
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 800ms ease, transform 800ms ease-out;
  }

  /* 表示状態（左にピタで止まる） */
  .main_photo .catch.is-show{
    opacity: 1;
    transform: translateX(0);
  }

  /* 画像サイズ（そのまま） */
  .main_photo .catch img{
    width: 80%;
    max-width: 500px;
    min-width: 270px; /* iPhoneSEでも潰れにくい下限 */
    height: auto;
    display: block;
  }

  /* ===========================
    白背景
    =========================== */
  .main_photo .catch .sp_bg{
    width: 75%;
    position: relative;
    display: inline-block;
  }

  /* 白背景 */
  .main_photo .catch .sp_bg::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30px;
    right: -30px;
    border-radius: 2px;

    background: linear-gradient(to right, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.3) 80%, rgba(255,255,255,0) 100%);
    transition: background-color 800ms ease-out;
    z-index: 0;
  }



  /* 中身の画像は前面に */
  .main_photo .catch .sp_bg > img.sp_only{
    position: relative;
    z-index: 1;

    padding: 10px 20px;
    box-sizing: border-box;

    /* 画像そのものには背景を持たせない */
    background: transparent;

    filter:
      /* 全体のやわらかい光 */
      drop-shadow(0 0 6px rgba(255,255,255,0.7))
      drop-shadow(0 0 14px rgba(255,255,255,0.5))
      /* 文字の“下”にたまる光（Y方向にずらす） */
      drop-shadow(0 8px 18px rgba(255,255,255,0.8))
      drop-shadow(0 14px 30px rgba(255,255,255,0.55));
  }

  /* .main_photo .catch.is-show .sp_bg::before{
    background: linear-gradient(to right, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 80%, rgba(255,255,255,0) 100%);
  } */

  /* 中身は全部前面に（imgだけじゃなくテキストも） */
  .main_photo .catch .sp_bg > *{
    position: relative;
    z-index: 1;
  }




  
  .contact_link_btn {
    width: 160px;
    height: 55px;
    position: absolute;
    left: 8px;
    bottom: 30px;
    padding: 20px 0;

    font-size: 16px;
    text-align: center;
  }
  .contact_link_btn .contact-link::after {
    margin-left: 8px;
    font-size: 1.2em;
  }

  /* ---------- Gallery：SP ---------- */
  .main_gallery {
    padding: 60px 0;
  }
  .gallery-section {
    padding: 60px 0 0 0;
  }
  .section_gallery_title{
    top:85px;
  }
  .section_gallery_title img{
    width: 67px;
    height: auto;
  }
  .gallery-frame{
    aspect-ratio: 4 / 3;
    position: relative;
  }
  .gallery-slides{
    width: 85%;      /* ← 写真の横幅を明示 */
    height: 70%;     /* ← 縦も明示 */
    position: absolute;
    left: 49%;
    top: 20%;         /* ← 上下位置はここで微調整 */
    transform: translateX(-50%); /* ← 中央寄せ */
    overflow: hidden;
    border-radius: 16px;
  }
  .gallery-slides img{
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
  }
  /* 左右送りボタン */
  .gallery-nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .gallery-prev {
    left: 0px;
  }
  .gallery-next {
    right: 0px;
  }
  .gallery-under {
    width: 100%;
    margin-top: 16px;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0px;
  }
  .gallery-under p img {
    display: inline-block;
    margin: 5px 0 0 15px;
  }
  .section_gallery_comment {
    padding: 10px 16px;
    font-size: 16px;
    text-align: left;
    line-height: 1.3;
  }
  .section_gallery_comment > p{
    margin-bottom: 20px;
  }

  /* ---------- About：SP ---------- */
  .about-title-text {
    margin-bottom: 20px;
    margin-left: -25px;
    font-size: 24px;
    letter-spacing: -3px;
    text-align: center;   /* 中央寄せ */
    display: block;       /* 中央寄せが効くように */
  }
  .about-title-text .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(-40px);
  }
  .about_contents {
    padding: 80px 0px 0 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .about-left,
  .about-right {
    width: 100%;
  }
  .about-left{
    position: relative; /* アイコンの基準一にする */
  }
  .about-left .logo_icon{
    position: absolute;
    top: 265px;
    right: 15px;

    /* アニメ用の初期状態 */
    opacity: 0;
    transform: scale(0.6);
  }
  .about-left_row1 {
    margin: 15px 0 20px;
    font-size: 16px;
    font-weight: 500;
  }
  .about-left_row2 {
    margin: 10px 0 40px;
  }
  .about-left_row2 p {
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: -0.05em; /* 横幅に収めるように文字詰め */
  }
  .about_icon_box {
    gap: 16px;
    flex-wrap: wrap;
  }

  /* ---------- Service：SP ---------- */
  /*セクションタイトル*/
  .service-title-text {
    margin-bottom: 20px;
    font-size: 24px; /* 大きめに */
    letter-spacing: -3px;
  }
  /* セクション全体を中央寄せ＆余白調整 */
  .service_contents {
    padding: 60px 16px 0;
    text-align: center;
  }
  .service_contents_title {
    width: 100%;
    display: flex;
    flex-direction: column;   /* PCだと横並び→縦並びに */
    align-items: center;   /* 中央寄せ */
    gap: 12px;
    text-align: center;
  }
  .service_lead {
    margin-left: 0;
    margin-bottom: 15px;
    font-size: 17px;
    font-weight: normal;
    color: #572912;
    letter-spacing: -0.03em;
    line-height: 1.3;
  }
  .section-title-text {
    font-size: 22px;
    letter-spacing: -2px;
    text-align: center;
  }
  /* サービス一覧を縦並びに */
  .service-list {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  /* 各サービスボックス：縦並び＆中央寄せ */
  .service-list_item,
  .service-list_item.item-1,
  .service-list_item.item-2,
  .service-list_item.item-3 {
    display: flex;
    flex-direction: column;   /* ← ここで row-reverse を上書き */
    align-items: center;
    text-align: center;
    margin-left: 0;
    gap: 0;
  }
  .service_info {
    flex: 0 0 auto;
    display: contents;
  }
  /* 表示順： h3 → 画像 → 説明テキスト になるように order を指定 */
  .service_info h3 {
    order: 1;
    width: 100%;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--theme-red);
  }
  /* 2. 画像ブロックをその次に */
  .service_image {
    width: 225px;
    height: 150px;
    max-width: 225px;
    order: 2;
    margin: 0 auto 20px;
    position: relative;
  }
  .service_image img {
    width: 100%;
    height: auto;
  }
  /* 写真だけトリミング */
  .service_image .service_photo{
    width: 225px;
    height: 150px;
    display: block; /* 余白対策 */
    border-radius: 7px;
    object-fit: cover;
    object-position: center;
  }
  /* NEWアイコン */
  .service_image .new_icon{
    width: 48px;
    position: absolute;
    top: -15px;
    left: -20px;
  }
  /* 3. 説明テキスト群は最後に */
  .service_info p {
    order: 3;
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px;
    font-size: 14px;
    letter-spacing: -0.07em;
    line-height: 1.4;
  }
  .service_info .shorten{
    letter-spacing: -0.15em;
  }
  .service_contents_bottom_message{
    margin-top: 10px;
    text-align: center;
  }
  .service_contents_bottom_message span{
    font-size: 12px;
    letter-spacing: -0.1em;
  }
  /* 婚活サービスの前の余白を広めに */
  .service-list_item.service-list_item.item-3 {
    margin-top: 15px;
  }

  
  /* ---------- Contact ---------- */
  .contact_contents {
    padding: 80px 25px 20px;
  }
  .contact-box {
    max-width: 100%;
  }
  .contact-title-text {
    font-size: 24px;
    letter-spacing: -2px;
  }
  .contact-lead {
    margin: 30px 0;
    font-size: 17px;
    letter-spacing: -0.03em;
  }
  /* フォーム */
  .contact-box label {
    font-size: 14px;
  }
  .contact-box input,
  .contact-box textarea {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 15px;
  }
  /* 送信ボタン */
  .contact-submit {
    width: 160px;
    height: 50px;
    margin: 0 auto;
    font-size: 16px;
  }

  /* ---------- Footer ---------- */
  footer {
    height: auto;
    display: flex;
    justify-content: left;
    padding: 24px 0 12px;
    text-align: left;
  }

  .footer_info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    margin-left: 17px;
    gap: 12px;
  }

  .footer_info a{
    text-align: left;
  }

  .footer_link {
    margin-bottom: 6px;
  }


  /* --------- モーダル --------- */
  .privacy-modal__content {
    margin: 20px 16px;
    max-height: calc(100vh - 40px);
    font-size: 14px;
    letter-spacing: 0.03em;
    padding: 0;
  }
  /* 閉じるボタン */
  .privacy-modal__close {
    top: 20px;
    right: 20px;
    font-size: 24px;
  }
    
  /* --------- モーダル内の要素 --------- */
  .privacy-modal__inner h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .privacy-modal__inner h3 {
    font-size: 17px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 8px;
  }
  .privacy-modal__footer{
    letter-spacing: 0;
  }
}

/* メール送信用 */
.contact-hp {
  width: 1px;
  height: 1px;
  position: absolute;
  left: -9999px;
  overflow: hidden;
}

/* メッセージ表示用 */
.contact-status {
  min-height: 1.5em;
  margin-bottom: 5px;
  font-size: 14px;
}
.contact-status--info {
  color: #555;
}
.contact-status--success {
  color: #1a7f3b;
}
.contact-status--error {
  color: #b00020;
}


/* 幅狭ディスプレイ、タブレット対応 */
@media (min-width: 769px) and (max-width: 1120px) {

  /* ▼ 背景を画面いっぱい＆左基準 */
  body::after {
    width: 100%;
    left: 0;
    transform: none;
    background-size: cover;
  }
  /* ▼ ヘッダー＆本文インナーを同じ幅で中央寄せ */
  .site-header-normal .header_inner,
  .site-header-fixed .header_inner,
  .main,
  .content_inner,
  .main_gallery,
  footer .footer_info {
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }
  /* 固定メニューの右余白を控えめに */
  .menu-bar.fixed {
    padding-right: 24px;
  }
  /* --- Top（キャッチコピー） 調整 --- */
  /* .main_photo .catch img {
    width: 70vw;
    height: auto;
  } */
  /* galleryの写真を前後するための移動ボタン */
  .gallery-prev {
    left: 20px;
  }
  .gallery-next {
    right: 20px;
  }
  /* --- ギャラリー下のエリア（テキストとインスタボタン）調整 --- */
  .gallery-under {
    width: 100%;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 8px;
  }
  .section_gallery_comment {
    letter-spacing: 1;
    font-size: 18px;
    letter-spacing: -0.05em;
    padding: 0 24px;
    text-align: center;
    line-height: 1.8;
  }
  .gallery-under p img {
    display: block;
    margin: 8px auto 0;
  }

  /* --- About調整 --- */
  .about_contents {
    padding: 80px 24px 0;
    display: flex;
    justify-content: center;     /* 横方向中央 */
    align-items: flex-start;
    gap: 32px;
  }
  .about-title-text {
    letter-spacing: -7px;
  }
  .about-left {
    flex: 1 1 auto;
  }
  .about-right {
    flex: 0 0 260px;
    display: flex;
    justify-content: center;     /* 画像を箱の中で中央寄せ */
  }
  .about-right img {
    width: 100%;
    max-width: 260px;
    height: auto;
  }

  /* --- Service調整 --- */
  .service_contents{
    margin-top: 60px;
  }
  .service-title-text {
    letter-spacing: -7px;
  }
  .service_contents_title {
    width: 100%;
    display: flex;
    flex-direction: column;   /* PCだと横並び→縦並びに */
    align-items: center;   /* 中央寄せ */
    gap: 30px;
    text-align: center;
  }
  .service_lead {
    flex-direction: column;   /* PCだと横並び→縦並びに */
    font-size: 25px;
    margin-top: 30px;
    margin-bottom: 40px;
  }
  .service_image .new_icon{
    width: 120px;
    position: absolute;
    bottom: 0px;
    left: -40px;
  }
  /* 2番目だけテキスト幅を決める */
  .service-list .service-list_item:nth-of-type(2) .service_info {
    flex: 0 0 400px;
  }
  .service-list_item {
    gap: 20px; /* 画像とテキスト間の横方向の余白 */
  }

}

/* 幅狭ディスプレイ＆タブレット対応　★さらに限定的な中間サイズを調整★ */
@media (min-width: 769px) and (max-width: 880px) {

  /* --- Gallery調整 --- */
  .section_gallery_title{
    top:150px;
  }
  .section_gallery_title img{
    width: 130px;
  }

  /* --- ギャラリー下のエリア（テキストとインスタボタン） --- */
  .gallery-under{
    padding-left: 0; /* 余白リセット */
  }
  .section_gallery_comment {
    font-size: 16px;
    letter-spacing: -0.03em;
    text-align: left;
    line-height: 1.8;
  }

  /* --- About調整 --- */
  /* About を縦並び＋中央寄せ＋画像2枚の重ね */
  .about_contents {
    padding: 60px 24px 0;
    display: flex;
    flex-direction: column;      /* 縦並び */
    align-items: center;         /* セクション中央に寄せる */
    gap: 32px;
    text-align: center;
  }
  /* 左カラム（テキスト）は中央に置きつつ、文章は左寄せ */
  .about-left {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
  }
  /* 右カラム（画像セット）を中央寄せ */
  .about-right {
    width: 100%;
    max-width: 640px;
    position: relative;          /* 画像の重ね基準 */
    display: flex;
    justify-content: center;
    margin: 0 auto;
    margin-top: 60px;
    margin-bottom: 250px;
  }
  /* 画像サイズは統一して中央基準に */
  .about-right img {
    max-width: 400px;
    width: 100%;
    height: auto;
  }
  /* 上の画像：前面＋左にずらして重ね */
  .about-right img:first-child {
    position: absolute;
    top: -20px;
    left: calc(50% - 200px - 40px);   /* ★ 中央基準で左に40pxずらす */
    z-index: 2;
  }
  /* 下の画像：背景＋右にずらす */
  .about-right img:last-child {
    position: absolute;
    top: 40px;
    left: calc(50% - 200px + 40px);   /* ★ 中央基準で右へ40px */
    z-index: 1;
  }

  /* --- Service調整 --- */
  .service_lead {
    font-size: 22px;
  }
  /* PC用に入れていた　 2番目の詰め方だけ微調整　を再調整 */
  /* 2番目の .service-list_item だけテキスト幅を決める */
  .service-list .service-list_item:nth-of-type(2) .service_info {
    flex: 0 0 300px;  /* テキストブロックの幅 */
  }
  /* サービスセクション最後のテキスト */
  .service_contents_bottom_message{
    font-size: clamp(15px, 1.3vw, 18px); /* 最小15px / 可変 / 最大18px */
  }
}

/* 幅狭ディスプレイ＆タブレット対応　★さらに限定的な中間サイズを調整★ */
/* @media (min-width: 769px) and (max-width: 1120px) {
} */


  /* privacypolicyページ専用（通常表示しているmodalと別で定義） */
  .privacy-page__logo {
    text-align: center;
    margin-top: 30px;
  }
  .privacy-page__logo img{
    width: 30%;
  }
  @media (max-width: 500px) {
    .privacy-page__logo img{
      width: 80%;
    }
  }


  /* Cloudflare Turnstile */
  .cf-turnstile-wrap{
    margin: 24px 0;
    overflow: hidden; /* はみ出し防止 */
  }

  .cf-turnstile{
    display: flex;
    justify-content: center;
    margin: 0;
  }

  @media screen and (max-width: 767px){
    .cf-turnstile-wrap{
      margin: 0;
    }
    .cf-turnstile{
      width: 100%;
      transform: scale(0.84);
      transform-origin: center top;
    }
  }