@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: 25%; 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;padding:5rem 0;}

/* 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;}

}
/* =========================================
   8. Dress Collection Section (Adjusted)
   ========================================= */
.lp-dress {
    padding: 120px 0;
    overflow: hidden; /* ★重要：スライダーがはみ出さないように */
    position: relative;
    z-index: 10;box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.lp-dress__inner {
    max-width: 100% !important; /* ★重要：横幅いっぱいまで使う */
    margin: 0 auto;
    padding: 0;
}

/* タイトルとボタンは中央のインナー幅（例: 640px）に合わせる */
.dress-title-group,
.dress-footer {
    max-width: 640px; /* bodyのlp-main-container幅に合わせる */
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    text-align: center;
}

/* 既存のタイトル・線幅設定 */
.dress-en-title { font-family: 'Centaur', serif; font-size: 2.2rem; color: #c4a03a; margin: 0; letter-spacing: 0.1rem; }
.dress-jp-title { font-size: 1.1rem; color: #444; font-weight: 500; margin: 8px 0 0 0; }
.dress-line { width: 80px; height: 1px; background-color: #c4a03a; margin: 20px auto 60px; }

/* --- スライダー本体の調整 --- */
.dress-slider {
    width: 100%;
    padding: 20px 0 50px; /* ★上下にマージンを作る */
}

.dress-card {
    background: #fff;
    padding-bottom: 30px;
    
    
    /* ★初期状態は少し小さく、薄く */
    transform: scale(0.9);
    opacity: 0.6;
    transition: all 0.4s ease; /* なめらかに動かす */
}

/* ★中央（アクティブ）のカードだけを大きく、くっきり見せる */
.swiper-slide-active .dress-card {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.dress-image-wrap img { width: 100%; height: auto; display: block; }

/* 文字情報：画像の下 */
.dress-info { padding: 25px 20px 0; text-align: center; }
.dress-info h3 { font-family: 'Centaur', serif; color: #c4a03a; font-size: 1.4rem; margin-bottom: 10px; }
.dress-info p { font-size: 0.9rem; color: #666; line-height: 1.6; margin: 0; }

/* 既存のボタン設定 */
.dress-footer { margin-top: 50px; }
.btn-view-all { display: inline-block; background-color: #d19494; color: #fff; padding: 20px 80px; font-size: 1.1rem; letter-spacing: 0.15em; text-decoration: none; transition: all 0.3s ease; font-family: 'Centaur', serif; }

/* paginationカラー */
.swiper-pagination-bullet-active { background: #c4a03a; }