/* ==================== 変数エリア ==================== */
:root{
  --header-h: 77px;   /* ← ヘッダーの実寸に合わせて変更可 */
}
        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Playfair+Display:wght@400;700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Zen Kaku Gothic New", sans-serif;
            line-height: 1.8;
            color: #333;
            background: #fafafa;
        }

        h1, h2, h3 {
            font-family: 'Noto Sans JP', serif;
            font-weight: 300;
            letter-spacing: 0.05em;
        }

        .header {
            background-color: #001e43;
            color: white;
            padding: 1rem;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .nav {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }


        .nav-links {
            display: flex;
            gap: 3rem;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            font-size: 0.9rem;
            letter-spacing: 0.1em;
            position: relative;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -5px;
            left: 0;
            background-color: silver;
            transition: width 0.3s;
        }

        .nav-links a:hover::after {
            width: 100%;
        }
        .menu-button {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100vh;
    background: #001e43;
    padding: 4rem 2rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

@media (max-width: 768px) {
    .menu-button {
        display: block;
    }

    .mobile-menu {
        display: block;
    }
}

        .main {
    margin-top:  calc(6vh + 1rem); /* スライドショーの高さ + 余白 */
}
        
        .logo img {
    height: 35px; /* 必要に応じて調整 */
    width: auto;
}

        .brand-intro {
            max-width: 800px;
            margin: 4rem auto;
            padding: 3rem;
            text-align: center;
            position: relative;
        }

        .brand-intro::before {
            content: 'koredake';
            font-family: 'Noto Sans JP', serif;
            font-size: 5rem;
            color: rgba(0,30,67,0.05);
            position: absolute;
            top: -2rem;
            left: 1rem;
        }

        .products {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            padding: 2rem;
        }

        .product-card {
            background: white;
            border: none;
            padding: 2.5rem;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            transition: transform 0.3s;
        }

        .product-card:hover {
            transform: translateY(-5px);
        }

        .product-image {
            width: 200px;
            height: 200px;
            margin: 0 auto 1.5rem;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 画像の比率を保ちつつ、指定されたサイズに収める */
    }

        .product-category {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .product-name {
            font-size: 1.4rem;
            margin-bottom: 1rem;
            color: #001e43;
        }

        .product-price {
            font-size: 1.5rem;
            color: #001e43;
            margin-bottom: 1rem;
            font-family: 'Noto Sans', serif;
        }

        .product-description {
            margin-bottom: 1.5rem;
            line-height: 1.8;
        }

        .buy-button {
            display: block;
            background: #001e43;
            color: white;
            padding: 0.75rem 1.5rem;
            text-decoration: none;
            border-radius: 0;
            transition: all 0.3s;
            letter-spacing: 0.1em;
            margin:0.5em 0;
        }

        .buy-button:hover {
            background: #003366;
            transform: translateY(-2px);
        }
/* 購入・Amazon ボタンが縦に並ぶときの間隔調整 */
.product-card .buy-button + .buy-button{
  margin-top:1.2rem;   /* 好みで 0.6〜2rem 程度に変更可 */
}

        .developer-section {
            background: white;
            padding: 5rem 0;
            margin: 4rem 0;
        }

        .developer-content {
            max-width: 1000px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            padding: 0 2rem;
        }

        .developer-image {
            width: 100%;
            height: 400px;
            object-fit: cover;
        }

        .developer-text {
            font-size: 1.1rem;
            line-height: 2;
        }

        .developer-text h2 {
            margin-bottom: 2rem;
            font-size: 2rem;
            color: #001e43;
        }

 
        .map-container {
            width: 100%;
            height: 400px;
            margin-top: 3rem;
        }

        .contact-form {
            max-width: 600px;
            margin: 3rem auto;
            padding: 3rem;
            background: white;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: #001e43;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            font-family: inherit;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #001e43;
        }

        .button {
            background: #001e43;
            color: white;
            padding: 1rem 2rem;
            border: none;
            cursor: pointer;
            font-family: inherit;
            letter-spacing: 0.1em;
            transition: background 0.3s;
        }

        .button:hover {
            background: #003366;
        }

        .footer {
            background: #001e43;
            color: silver;
            padding: 3rem;
            text-align: center;
            margin-top: 3rem;
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .products {
                grid-template-columns: 1fr;
            }

            .developer-content,
            .clinic-grid {
                grid-template-columns: 1fr;
            }

        }
 /* セクションの共通設定 */
.concept-section {
    padding: 6rem 0;
    position: relative;
    background-size: cover; /* セクション全体に背景をフィット */
    background-position: center; /* 背景画像を中央揃え */
    background-repeat: no-repeat; /* 繰り返しを防ぐ */
    background-attachment: fixed; /* パララックス効果を適用 */
    color: white;
    overflow: hidden;
}
/* スマートフォン向け調整 */
@media (max-width: 768px) {
    .concept-section {
        background-attachment: scroll; /* 固定効果を無効化 */
    }
}

/* アニメーション用のクラス */
.concept-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
    opacity: 0; /* 初期は非表示 */
    transform: translateY(50px); /* 下に位置する状態 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* スムーズなアニメーション */
}

.concept-content.show {
    opacity: 1; /* 表示 */
    transform: translateY(0); /* 元の位置に移動 */
}

/* ヘッダーのスタイリング */
.concept-content h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #fff;
}

/* パラグラフのスタイリング */
.concept-content p {
    font-size: 1.1rem;
    line-height: 2;
    margin-bottom: 1rem;
}

/* 背景画像の個別設定 */
.concept-1 {
    background-image: url('images/koredake_skinta_02.jpg'); /* 画像パスを指定 */
}

.concept-2 {
    background-image: url('images/koredake_hq_02.jpg');
}

.concept-3 {
    background-image: url('images/koredake_aceoil_02.jpg');
}

/* ===== Concept 1 レイアウト ================================ */
.concept-inner{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:6rem 1.5rem;
  z-index:1;                 /* overlay より前面に */
}

/* 半透明オーバーレイ（既に追加済みなら不要） */
.concept-overlay{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.45);
  pointer-events:none;
}

/* --- 番号バッジ ---------------------------------- */
.concept-num{
font-family: 'Noto Sans JP', serif;
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%,-50%);
  width:130px;
  height:130px;
  background:#fff;
  color:#555;
  font-size:2.2rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  /* 斜めカットの台形にする */
  clip-path:polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
}

/* --- 見出し -------------------------------------- */
.concept-heading{
color:#333 ; 
  text-align:center;
  font-size:clamp(1.8rem, 3vw + 1rem, 3rem);
  line-height:1.4;
  margin:4rem 0 3rem;
}

/* --- 本文：PC は横並び --------------------------- */
.concept-body{
  display:flex;
  align-items:center;
  gap:3rem;
}

/* 左画像 */
.concept-image{
  flex:0 0 40%;
}
.concept-image img{
  width:100%;
  height:auto;
  display:block;
}

/* テキスト */
.concept-text,
.concept-text p,
.effect-list h3,
.effect-list ul li{
  flex:1 1 60%;
  line-height:1.9;
  color:#555;
}
.effect-list h3{
  color:#444 !important;
}
.effect-list strong{
  color:#222 !important;
}

/* ===== effect-list のスタイル刷新 =============================== */
.effect-list{
  margin:3rem 0 !important;          /* 上下にスペース */
  padding:2rem 1.75rem;              /* 枠と本文の余白 */
  border:1px solid rgba(255,255,255,.6); /* 細い白枠 */
  background:rgba(255,255,255,.10);  /* うっすら白背景で読みやすく */
  border-radius:4px;
}

/* 見出しを枠内で少し下げる */
.effect-list h3{
  margin-top:-.25rem;    /* 微調整 */
  margin-bottom:1.25rem; /* 見出し下に余白 */
  font-size:1.25rem;
  letter-spacing:.05em;
}

/* リストのビジュアルをカスタム */
.effect-list ul{
  list-style:none;
  padding:0;
  margin:0;
}
.effect-list li{
  position:relative;
  padding-left:1.75rem;        /* 疑似アイコン分の余白 */
  margin-bottom:.9rem;
  line-height:1.7;
}
.effect-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:.55em;                   /* 縦位置を文字中央あたりに */
  width:.55rem;
  height:.55rem;
  border:1px solid #fff;       /* 白い丸枠 */
  border-radius:50%;
}

/* 強調テキストはやや濃く */
.effect-list strong{
  font-weight:600;
  color:#222 !important;
}


/* --- スマホ（～768px）：縦並び ------------------- */
@media (max-width:768px){
  .concept-num{
    position:static;
    transform:none;
    margin:0 auto 1rem;
  }
  .concept-heading{
    margin-top:0;
  }
  .concept-body{
    flex-direction:column;
  }
  .concept-image{
    width:100%;
    max-width:320px;
    margin-top:2rem;
  }
}
/* === Concept セクション背景をぼかす ============================== */
.concept-section{
  position:relative;        /* 擬似要素の基準に */
  overflow:hidden;          /* ブラーで拡大した分を隠す */
}

/* 背景コピー → ブラー */
.concept-section::before{
  content:'';
  position:absolute;
  inset:0;
  /* section の background-* をそのまま継承 */
  background-image:inherit;
  background-size:inherit;
  background-position:inherit;
  background-attachment:inherit;

  filter:blur(4px);         /* ←ぼかし量はお好みで */
  transform:scale(1.05);    /* ブラーで端が透けるのをカバー */
  z-index:0;                /* 一番奥に配置 */
  pointer-events:none;
}

/* 文字可読性をさらに上げる半透明オーバーレイ */
.concept-overlay{
  background:rgba(255,255,255,.40);      /* 透明度はお好みで */
  z-index:1;                        /* ブラーより前面 */
}

/* コンテンツは最前面（既に z-index:1 or 2 指定済みなら不要） */
.concept-inner{ z-index:2; position:relative; }

/* ===== Hero ─ 動画を画面比率にフィットさせて中央寄せ ===== */
.hero{
  position:relative;
  width:100vw;       /* ビューポート全幅 */
  height:100vh;      /* ビューポート全高 */
  overflow:hidden;   /* はみ出しを隠す */
}

.hero video{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%); /* 中央を基点に配置 */

  /* どの比率でも欠けを最小化 */
  min-width:100%;
  min-height:100%;
  width:auto;
  height:auto;
  object-fit:cover;  /* 黒帯無しで全面表示。余りは上下左右均等にトリム */
}

/* ====== スマホ (～768px) は左右欠けない縮小表示 ================= */
@media (max-width: 768px){
  .hero{
    height:auto !important;          /* 高さは動画まかせ */
    overflow:hidden !important;      /* 余白が黒なら .hero{background:#000;} */
  }
  .hero video{
    position:static !important;      /* 絶対配置を解除して高さを確保 */
    width:100% !important;           /* 横幅いっぱいに縮小 */
    height:auto !important;          /* アスペクト比維持 */
    min-width:0 !important;
    min-height:0 !important;
    transform:none !important;       /* 中央寄せ用 transform を解除 */
    object-fit:contain !important;   /* 左右欠けなし（上下に余白） */
    object-position:center !important;
  }
}
/* ===== スマホ(～768px)はヒーローをヘッダー分オフセット ===== */
@media (max-width:768px){
  /* ヒーローの高さを縮めつつ下へずらす */
  .hero{
    height:calc(100vh - var(--header-h));
    margin-top:var(--header-h);
  }
}

/* === Key Visual =============================== */
.kv{
  width:100%;
  margin:0;              /* 余白が不要なら 0 */
}

.kv picture,
.kv img{
  width:100%;
  height:auto;           /* アスペクト比を保持してリサイズ */
  display:block;
}
/* ===== Brand Movie バナー ==================================== */
.brandmovie{
  background:#fff;
  padding:3rem 0;
}
/* 全幅バナーをボタン化 */
.brandmovie-btn{
  display:block;
  width:100%;
  aspect-ratio:16/9;                     /* レスポンシブに高さ可変 */
  background:url("images/brandmovie-bn.jpg") center/cover no-repeat;
  border:none;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  border-radius:6px;
}
/* 文字を読みやすくする半透明オーバーレイ */
.brandmovie-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);            /* α値を調整して明暗バランスを変更 */
}
/* 中央ラベル */
.brandmovie-label{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:.8rem;
  color:#fff;
  font-size:clamp(1rem,2vw+1rem,1.6rem);
  font-weight:600;
  letter-spacing:.05em;
}
.brandmovie-label svg{ flex-shrink:0; }

/* ===== 汎用アイコンボタン ===================== */
.menu-btn,
.mute-btn{
  width:40px;       /* PC 基準サイズ */
  height:40px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}

.menu-btn img{
  width:100%;
  height:100%;
  object-fit:contain;  /* 縦横比を保持してリサイズ */
}
.mute-btn img{
  width:60%;
  height:60%;
  object-fit:contain;  /* 縦横比を保持してリサイズ */
}

/* ── スマホ用に少し小さく ── */
@media (max-width:768px){
  .menu-btn,
  .mute-btn{
    width:32px;
    height:32px;
  }
}
/* ==== HowTo 動画ボタン ================================= */
.video-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin:1rem 0 2rem 0;
  padding:.6rem 1.4rem;
  background:#fff;
  color:#001e43;
  font-size:.9rem;
  font-weight:600;
  border:1px solid #001e43;
  cursor:pointer;
  transition:background .3s;
}
.video-btn:hover{ background:#D8E1ED; }
.video-btn svg{ flex-shrink:0; }

/* ==== 動画モーダル ==================================== */
.video-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s;
  z-index:9999;
}
.video-modal.open{
  opacity:1;
  visibility:visible;
}
.video-wrapper{
  position:relative;
  width:90%;
  max-width:700px;
  aspect-ratio:16/9;
}
.video-wrapper iframe{
  width:100%;
  height:100%;
  border:none;
}
.video-close{
  position:absolute;
  top:-20px;
  right:-20px;
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:#fff;
  color:#000;
  font-size:1.4rem;
  cursor:pointer;
  line-height:38px;
  box-shadow:0 0 8px rgba(0,0,0,.4);
}
/* ===== Reviews セクション ===================================== */
.reviews{
  padding:4rem 1rem;
  background:#f7f7f7;          /* やさしいグレー背景 */
  text-align:center;
}
.reviews-title{
  font-size:2rem;
  margin-bottom:2.5rem;
  letter-spacing:.05em;
}

.reviews-wrap{
  display:flex;
  gap:2rem;
  justify-content:center;
  flex-wrap:wrap;
}

.review-card{
  background:#fff;
  border-radius:6px;
  padding:1.5rem;
  width:100%;
  max-width:300px;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
}

.review-img img{
  width:80px;
  height:80px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:1rem;
}

.review-meta{
  font-weight:600;
  color:#666;
  margin-bottom:.8rem;
}

.review-text{
  font-size:.95rem;
  line-height:1.7;
  color:#444;
}

/* ── モバイル調整 ── */
@media (max-width: 480px){
  .reviews-wrap{ gap:1.2rem; }
}
/* ===== Reviews セクション：背景画像＆薄い白オーバーレイ ============ */
.reviews{
  position:relative;
  padding:4rem 1rem;
  text-align:center;
  overflow:hidden;
  /* 背景色は透明にする（フォールバックは画像が読めない時のみ） */
  background:transparent;
}

/* 背景画像 */
.reviews::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("images/reviews-bg.jpg") center/cover no-repeat;
  z-index:-2;          /* 一番奥 */
}

/* 白の薄幕で読みやすく（任意） */
.reviews::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.35);  /* 明るさ調整：濃い→数字↑、薄い→数字↓ */
  z-index:-1;          /* 画像の手前・本文の奥 */
}
/* ===== Clinic Section ========================================= */
.clinic-section{
  background:#f5f5f5;
  padding:5rem 0;
}
.clinic-title{
  text-align:center;
  font-size:2rem;
  margin-bottom:3rem;
  letter-spacing:.05em;
}
.clinic-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  max-width:1200px;
  margin:0 auto;
  padding:0 2rem;
}

/* 左カラム：外観＋地図 */
.clinic-media{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
.clinic-image{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:6px;
}
.clinic-map{
  width:100%;
  height:260px;
  border:0;
  border-radius:6px;
}

/* 右カラム：情報 */
.clinic-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1.6rem;
}
.clinic-about{
  line-height:1.8;
}
.clinic-name{
  font-size:1.3rem;
}
.clinic-address{
  font-style:normal;
  line-height:1.6;
}

/* 診療時間表 */
.hours-box{
  border:1px solid #ccc;
  padding:1.6rem 1rem;
  border-radius:4px;
}
.hours-note {font-size:0.8em;
text-align:center;}
.hours-table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
  margin-bottom:.8rem;
}
.hours-table th,
.hours-table td{
  padding:.6rem .3rem;
  text-align:center;
}
.hours-table thead th{
  font-weight:600;
  border-bottom:1px solid #ccc;
}
.hours-table td.dot{ color:#d33; }

/* 公式サイトボタン */
.clinic-link{
  align-self:flex-start;
  background:#001e43;
  color:#fff;
  padding:.9rem 2rem;
  text-decoration:none;
  letter-spacing:.08em;
  transition:background .3s;
}
.clinic-link:hover{ background:#003366; }

/* --- Responsive (<= 768px) ----------------------------------- */
@media (max-width:768px){
  .clinic-grid{
    grid-template-columns:1fr;
  }
  .clinic-media .clinic-image,
  .clinic-media .clinic-map{
    height:200px;
  }
  .clinic-link{ align-self:center; }
}