@charset "utf-8";

/* =========================================
   1. フォント定義
   ========================================= */
@font-face {font-family: 'Centaur';src: url('../fonts/CENTAUR.woff') format('woff'), url('../fonts/CENTAUR.TTF') format('truetype');font-display: swap;font-style: normal;}

/* 筆記体用共通クラス */
.font-allura {font-family: 'Allura', cursive !important;text-transform: none !important;}

/* =========================================
   2. 全体構造・PC用レイアウト
   ========================================= */
body { margin: 0; padding: 0; }
#confetti-canvas { display: none; }

@media screen and (min-width: 641px) {
    #confetti-canvas {display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none;background: linear-gradient(135deg, #fff 0%, #fdf9ee 100%);}
    .lp-main-container {width: 640px; margin: 0 auto;box-shadow: 0 0 30px rgba(0,0,0,0.1); position: relative;z-index: 100; min-height: 100vh; overflow: hidden;}
    header {width: 100% !important; position: sticky !important; top: 0; left: 0;z-index: 9999 !important; background-color: rgba(255, 255, 255, 0.95);box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
    footer { width: 100% !important; position: relative; z-index: 10; background-color: #fff; }
}

@media screen and (max-width: 639px) {
    header { position: sticky !important; top: 0; z-index: 9999 !important; background-color: #fff; }
}

.lp-main-visual img { width: 100%; height: auto; display: block; }

/* =========================================
   3. Concept Section
   ========================================= */
.lp-concept {width: 100%; padding: 120px 20px 180px; text-align: center; position: relative;background-image: url('../images/concept-back.webp'); background-size: cover; background-position: center; background-color: rgba(255, 255, 255, 0.4); background-blend-mode: overlay;}
.lp-contents-title {font-family: 'Centaur', serif; font-size: 1.6rem; color: #c4a03a;letter-spacing: 0.15rem; margin-bottom: 20px;}
.lp-contents-title2 {font-family: "Noto Serif JP", serif; font-size: 2.2rem; line-height: 1.6; font-weight: 500; margin-bottom: 40px;}

/* ★縦線を横線へ修正 */
.concept-line { width: 100px; height: 1px; background-color: #c4a03a; margin: 0 auto 40px;}
.lp-contents-caption {font-family: "Noto Serif JP", serif !important;font-size: 1.15rem !important; line-height: 3.0 !important;letter-spacing: 0.1rem; color: #444; position: relative; z-index: 5;}
.lp-contents-caption span { color: #c4a03a;}

/* ★透かし文字 THE DAY の位置と重なり調整 */
.lp-concept-watermark {position: absolute; bottom:-100px; right:20px;opacity: 0.08; color: #c4a03a; z-index: 1; pointer-events: none; text-align: right;}
.lp-concept-watermark .wm-small { font-family: 'Centaur', serif;  font-size: 2.5rem; margin-right: 40px; margin-bottom:-50px;}
.lp-concept-watermark .wm-large { font-family: 'Centaur', serif; font-size: 8rem; display: block; }

@media screen and (max-width: 639px) {
    .lp-concept { padding: 80px 20px 120px; }
    .lp-contents-title2 { font-size: 1.6rem; }
    .lp-contents-caption { font-size: 1rem !important; line-height: 2.5 !important; }
    .lp-concept-watermark {position: absolute; bottom:-75px; right:10px;}
    .lp-concept-watermark .wm-large { font-size: 5rem; }
    .lp-concept-watermark .wm-small {margin-right:10px; margin-bottom:-25px;}

}

/* =========================================
   4. Team Section (About Us)
   ========================================= */
.lp-team { padding:5rem 0;overflow: hidden;
    background: rgba(255, 255, 255, 0.01); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.03);
}

.team-main-photo { position: relative; padding: 0 50px; margin-bottom: 80px; }
.team-main-photo img { width: 100%; }
.team-main-photo .sc-tt { position: absolute; top: 10%; left: 10px; color: #c4a03a; font-size: 3rem; z-index: 2;transform: rotate(-15deg);}
.team-staff-list { display: flex; flex-direction: column; gap: 120px; margin-top: 80px; }
.team-staff-item { display: flex; width: 100%; }

.team-lead{ display: flex; flex-direction: column; gap: 20px;padding:0 50px;text-align: center;}
.team-lead .en-tt{ font-family: 'Centaur', serif; color: #c4a03a; font-size: 1.5rem; }
.team-lead .main-tt{font-family: "Noto Serif JP", serif; font-size: 2.2rem; line-height: 1.6; font-weight: 500; margin-bottom: 40px;}

/* ★スタッフ写真のサイズ感を修正（80%→65%） */
.team-staff-photo { position: relative; width:100%; }
.team-staff-photo img { width:65%; display: block; }
.team-staff-photo .sc-tt { position: absolute; color: #c4a03a; z-index: 2; pointer-events: none; white-space: nowrap;}
.staff-modal-open {position: absolute; bottom: 20px; background: none; border: none; cursor: pointer; z-index: 5;}
.btn-txt {font-family: 'Centaur', serif; color: #c4a03a; font-size: 1.3rem;padding-bottom: 8px; position: relative;}
.btn-txt span {color: #c4a03a;}
.btn-txt::after { content: ""; position: absolute; bottom: 0; height: 1px; background-color: #c4a03a; width:100%;}

/* 段違いレイアウトと役職テキスト位置の微調整 */

.left-style .sc-tt { top: 20%; left:50%; font-size: 3.5rem;transform: rotate(-10deg); }
.left-style .staff-modal-open {width:100%;right:0;text-align: end;}
.left-style .btn-txt{display: block;width:50%;margin-left:50%;padding-right:5%;}
.left-style .btn-txt::after { left: 0;}

.right-style .team-staff-photo img {margin-left:35%;}
.right-style .sc-tt { top: 20%; left:5%; font-size: 3rem; transform: rotate(-10deg); }
.right-style .staff-modal-open {width:100%;left:0;}
.right-style .btn-txt{display: block;width:50%;margin-right:50%;padding-left:5%;text-align: left;}
.right-style .btn-txt::after { right: 0; }
@media screen and (max-width: 639px) {
    .team-main-photo {width:90%; padding: 0; margin:0 auto 80px; }
    .team-main-photo .sc-tt {font-size:1.5rem;top:-3%;}
    .team-lead .main-tt{font-size: 1.6rem;}
    .left-style .sc-tt {font-size: 2rem;left:55%;}
    .right-style .sc-tt {font-size:2rem;}





}
/* =========================================
   5. Modal (Popup)
   ========================================= */
.staff-modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%;display: none; align-items: center; justify-content: center; z-index: 10000;}
.modal-overlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.7); }
.modal-content {position: relative; width: 90%; max-width: 450px; background: #fff;padding: 50px 30px; z-index: 10001;}
.modal-close { position: absolute; top: 15px; right: 20px; font-size: 2rem; background: none; border: none; cursor: pointer; }
.modal-img img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; margin: 0 auto 20px; display: block; }
.modal-text h3 { font-family: "Noto Serif JP", serif; color: #c4a03a; text-align: center; margin-bottom: 15px; }
.modal-text p { font-size: 0.9rem; line-height: 1.8; text-align: justify; }

/* =========================================
   5. Inline Video Section (修正版)
   ========================================= */
.lp-inline-video {width: 100%;background-color: #f9f6ef;position: relative;z-index: 10;}

/* PC時（640px固定幅）の制御 */
@media screen and (min-width: 641px) {
    .lp-inline-video {width: 640px;margin-left: auto; margin-right: auto; }
}

.video-wrapper { width: 100%; height: 0;padding-bottom: 56.25%; position: relative;overflow: hidden;}
.video-wrapper video,
.video-wrapper img {position: absolute;top: 0;left: 0; width: 100%; height: 100%; object-fit: contain; }

/* ポスター画像が動かない場合の保険（imgタグとして扱う場合） */
.video-poster-img {width: 100%; height: auto; display: block;}

/* スマホ調整 */
@media screen and (max-width: 639px) {
    .lp-inline-video { margin-top: 60px; margin-bottom: 80px; }
}

/* =========================================
   6. Studio Photo Booth (ちりばめ & 拡大版)
   ========================================= */
.studio-booth {padding: 120px 0;background-color: #fff;position: relative;overflow: hidden;}

/* ★ 背景の影（ちりばめ配置） ★ 完全上書き */
.booth-bg-shadow-wrap {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1; pointer-events: none;}
.bg-shadow-el {position: absolute;opacity: 0.15; height: auto;}

/* 笹の影 */
.bg-s01 {top: 50px;right: -100px;width: 450px;transform: rotate(20deg);}
.bg-s02 {top: 35%;left: -80px;width: 400px;transform: rotate(-10deg);}
.bg-s03 {bottom: -150px;right: -120px; width: 600px; transform: rotate(10deg);}

/* コンテンツレイアウト */
.booth-container {max-width: 1000px;margin: 0 auto;padding: 0 5%;display: flex;flex-direction: column;position: relative;z-index: 10;}
/* タイトルエリア（左寄せ） */
.booth-title-group {align-self: flex-start;width: 60%;margin-bottom: 10px;border-bottom: 1px solid #c4a03a; padding-bottom: 15px;}
.booth-en-title {font-family: 'Centaur', serif;font-size: 2.2rem;color: #444;margin: 0;letter-spacing: 0.1rem;}
.booth-jp-title {font-size: 1.1rem;color: #444;font-weight: 500;margin: 8px 0 0 0;}
.booth-jp-cap {font-size: 1rem;color: #666;margin-top: 10px;margin-bottom:100px;}

/* 画像アイテムの共通設定 */
.booth-item {position: relative; margin-bottom: 150px;}
.booth-item img { width: 100%;height: auto;display: block;box-shadow: 0 15px 40px rgba(0,0,0,0.12);position: relative;z-index: 2;}

.item-right {align-self: flex-end;width: 65%;}
.item-left {align-self: flex-start;width: 50%;max-width: 450px;}

/* 金色の装飾線（突き出し） */
.deco-line {position: absolute;width: 100px;height: 100px;border: 1px solid #c4a03a;z-index: 1;}
.top-left {top: -25px;left: -25px;border-right: none;border-bottom: none;}
.bottom-right {bottom: -25px;right: -25px;border-left: none;border-top: none;}

/* レスポンシブ：スマホ対応 */
@media screen and (max-width: 767px) {
    .studio-booth {padding:80px 0;}
    .booth-item {width: 90%;align-self: center !important;margin-bottom: 80px;}
    .booth-title-group { width: 100%; }
    .deco-line { width: 60px; height: 60px; }
       /* スマホでは影を絞る */
    .bg-s01 { width: 200px; right: -50px; }
    .bg-s02 { display: none; } /* 笹02は隠す */
    .bg-s03 { width: 350px; bottom: -80px; }
}


/* =========================================
   7. Plan Section (余白 & 出し分け最適化)
   ========================================= */
.plan-section {padding: 120px 0 80px;background-color: #fcfaf8;}
.plan-header {margin-bottom: 70px;padding:0 50px;}
.plan-en-title {font-family: 'Centaur', serif;color: #c4a03a;font-size: 1.8rem;margin: 0;}
.title-underline {width: 60px;height: 1px;background-color: #c4a03a;margin: 15px 0 20px;}
.plan-card-box {max-width: 780px;margin: 0 auto;background: #fff;box-shadow: 0 15px 50px rgba(0,0,0,0.04);padding:25px;width:90%;}
.plan-image-wrap img {width: 100%;display: block;}
.plan-body {padding: 70px 40px 80px;text-align: center;}
.plan-body-title {font-size: 1.6rem;color: #333;margin-bottom: 55px;font-weight: normal;letter-spacing: 0.05em;}
.plan-price-area {margin-bottom: 70px;position: relative;}
.price-before {font-size: 1.1rem;color: #bbb;text-decoration: line-through;margin-bottom: 30px;}
.price-display {display: flex;justify-content: center;align-items: center;gap: 25px;}
.price-badge {background-color: #d19494;color: #fff;width: 76px;height: 76px;border-radius: 50%;display: flex;flex-direction: column;justify-content: center;line-height: 1.1;}
.badge-l { font-size: 1.9rem; font-weight: bold; color: #fff;}
.badge-s { font-size: 0.7rem;color: #fff; }
.price-after {display: flex;align-items: center;gap: 10px;}
.price-num {font-size: 7.5rem;font-family: 'Centaur', serif;color: #d19494;}
.price-suffix {display: flex;flex-direction: column;align-items: flex-start;color: #d19494;margin-left: 10px; margin-bottom: 4px;}
.tax-in { font-size: 0.85rem; }
.yen { font-size: 1.1rem; }
.price-arrow {width: 0;height: 0;border-left: 14px solid transparent;border-right: 14px solid transparent;border-top: 12px solid #d19494;margin: 25px auto;}
.plan-footer {border-top: 1px solid #f2f2f2;padding-top: 50px;max-width: 520px;margin: 0 auto;}
.footer-label {font-size: 0.9rem;color: #aaa;margin-bottom: 25px;}
.footer-list {list-style: none;padding: 0;color: #666;line-height: 2.4;font-size: 1rem;}
.plan-disclaimer{color:#666;margin-top: 20px;margin-left: 50px;}
/* スマホ */
@media screen and (max-width: 767px) {
    .plan-body { padding: 45px 20px 60px; }
    .plan-card-box {max-width: 780px;margin: 0 auto;background: #fff;box-shadow: 0 15px 50px rgba(0,0,0,0.04);padding:15px;width:95%;}
    .price-display {display: flex;justify-content: center;align-items: center;gap: 10px;}
    .price-num { font-size: 3.8rem; }
    .plan-body-title { font-size: 1.3rem; margin-bottom: 40px; }
    .plan-price-area { margin-bottom: 50px; }
    .plan-disclaimer{color:#666;margin-top: 20px;margin-left: 20px;}
}

/* --- Reserve Form Section --- */
.plan-reserve {padding: 120px 0;background-color: #fff;margin-bottom:100px;}
.reserve-header {text-align: center; margin-bottom: 60px;}
.reserve-en-title {font-family: 'Centaur', serif;color: #c4a03a;font-size: 2.2rem;letter-spacing: 0.1em;}
.reserve-jp-title {font-size: 1rem;color: #888;margin: 10px 0 20px;letter-spacing: 0.2em;}
.reserve-intro {font-size: 1rem;line-height: 1.8;color: #444;}

/* フォームのレイアウト */
.reserve-form-wrap {max-width: 800px;margin: 0 auto;padding: 60px;}
.form-grid {display: grid;gap: 30px 40px;margin-bottom: 30px;}
.form-item {display: flex;flex-direction: column;}
.form-item label {font-size: 0.9rem;color: #333;margin-bottom: 10px;font-weight: 500;}
.form-item label .required {color: #d19494;margin-left: 4px;}

/* 入力要素の装飾 */
.form-item input[type="text"],
.form-item input[type="email"],
.form-item input[type="tel"],
.form-item select,
.form-item textarea {width: 100%;padding: 12px 15px;border: 1px solid #e0e0e0;background: #fff;font-size: 1rem;color: #444;outline: none;transition: border-color 0.3s;}
.form-item input:focus,
.form-item select:focus,
.form-item textarea:focus {border-color: #c4a03a;}

.form-item textarea {height: 120px; resize: none;}
.full-width {grid-column: span 2;}

/* 同意チェック */
.privacy-wrap {text-align: center;margin: 40px 0;}
.checkbox-label {font-size: 0.9rem;cursor: pointer;display: flex;align-items:center;justify-content:flex-end; gap: 10px;}
.checkbox-label a {color: #c4a03a;text-decoration: underline;}
.checkbox-label span{width:100%;text-align: left;}
/* 送信ボタン（プランの価格色に合わせる） */
.submit-area {text-align: center;}
.btn-submit {background-color: #d19494;color: #fff;border: none;padding: 20px 80px;font-size: 1.1rem;letter-spacing: 0.1em;cursor: pointer;transition: all 0.3s ease;}
.btn-submit:hover {background-color: #bc7f7f;transform: translateY(-2px);box-shadow: 0 5px 15px rgba(209, 148, 148, 0.3);}
.error-message {color: #d19494;font-size: 0.8rem;margin-top: 5px;}

/* スマホ対応 */
@media screen and (max-width: 767px) {
    .plan-reserve {padding: 120px 0 80px;background-color: #fff;margin-bottom:0;}
    .reserve-form-wrap { padding: 40px 20px; }
    .form-grid { grid-template-columns: 1fr; gap: 20px; }
    .full-width { grid-column: auto; }
    .btn-submit { width: 100%; padding: 18px; }
    /* 同意チェック */
.privacy-wrap {text-align:left;margin: 40px 0;}
.checkbox-label {font-size: 0.9rem;cursor: pointer;display: flex;align-items:center;justify-content:center; gap: 10px;}
.checkbox-label input{width:10%;}
.checkbox-label a {color: #c4a03a;text-decoration: underline;}
.checkbox-label span{width:100%;text-align: left;}

}

/* 正方形を維持し、スマホ・PC両方に対応するコンテナ */
  .map-square-box {
    position: relative;
    width: 100%;           /* 親要素（コンテンツ幅）に合わせる */
    max-width: 600px;      /* 最大サイズ */
    padding-top: 100%;     /* 1:1（正方形）の比率を作る */
    margin: 20px auto;     /* 上下に余白を作り、中央寄せ */
    overflow: hidden;
    border-radius: 8px;    /* 角を少し丸くして現代的な印象に */
    border: 1px solid #eee; /* 薄い枠線 */
  }

  /* iframeをコンテナいっぱいに広げる */
  .map-square-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }