@charset "utf-8";

/*-----------------------------------------------
はかたんたん LP
カンプ: 素材/260917_完成版データ/はかたんたん_LP_03_ol.ai（1440 x 7136px）

■ ファイル構成
  style.css      … 共通（地色・文字スタイル）＋ SP
  layout-pc.css  … PCの座標。_tools/build_css.py が Illustrator 座標から自動生成する。手で書き換えない
■ 座標の正本
  Illustrator COM で取得したオブジェクトの visibleBounds（2026-09-18）
■ 画像
  すべて Illustrator から @2x 透過PNGで書き出し（fv_img01.jpg のみリンク写真から切り出し）
-----------------------------------------------*/

:root {
    --color-pink: #EA7D9E;
    --color-cream: #F0E4BC;
    --color-white: #FFFFFF;
    --color-text: #3E1F0F;       /* フッターナビ等（カンプ採色） */
    --color-nav: #3D3939;        /* ヘッダーナビ（カンプ採色） */
    --color-copyright: #EE4277;  /* コピーライト（カンプ採色） */
    --font-en: 'Roboto', sans-serif;
    --font-ja: 'Noto Sans JP', "Yu Gothic", YuGothic, "Meiryo", sans-serif;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}
body {
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--color-text);
    font-weight: 500;
    font-family: var(--font-ja);
    overflow-x: hidden; /* 帯・FV写真のはみ出しで横スクロールさせない */
}
img {
    display: block;   /* インラインのままだと行の高さぶん下にずれる（FVのはみ出しパーツで13pxズレた） */
    width: 100%;
    height: auto;
}
a {
    color: inherit;
    text-decoration: none;
}
.rollover {
    display: block;
    transition: opacity .2s;
}
.rollover:hover {
    opacity: 0.7;
}
ul, ol {
    list-style: none;
}

/* PC/SP 出し分け（画像化した本文はSP用を別に用意している） */
.sp-only { display: none; }

/*-----------------------------------------------
FV ※中の要素は「%（親=FVボックス基準）」で置く。
   vw（画面幅基準）だと、スクロールバーぶん背景写真とズレて
   下のピンク地にはみ出す商品パーツの継ぎ目に隙間が出る
-----------------------------------------------*/
.fv {
    position: relative;
    z-index: 2;     /* FV外（ピンク地）にはみ出す商品の下端を、次のセクションの地色に隠されないようにする */
    aspect-ratio: 1440 / 681;
    background: url('../img/fv_img01.jpg') center top / cover no-repeat; /* 写真は左右240pxずつ拡張済み（ワイド画面対応） */
}
/* 背景写真とまったく同じ位置・大きさの器。
   写真は常に「高さフィット＋左右センター」で表示される（写真 1920:681 のほうが FV ボックスより横長なため）。
   同じ条件を height:100% / aspect-ratio で再現しているので、FV の縦横比を変えても中の要素が写真とズレない。 */
.fv-stage {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 100%;
    aspect-ratio: 1920 / 681;
}
/* 以下は「写真の左上」を原点とした % （x は 1920、y は 681 で割った値） */
.fv-logo {
    position: absolute;
    left: 19.427%;  /* x=133（写真基準 373） */
    top: 18%;       /* 2026-09-24 先方ご指示で上へ。カンプは 54.038%（y=368） */
    width: 29.427%; /* 565px */
    z-index: 4;     /* カンプの重なり順：ロゴ → 商品 → ラベル → 背景写真 */
}
/* 商品（背景写真と同じ写真を商品の形で切り抜いたもの。ラベルを商品の後ろに回すために重ねる）
   下端は FV の外（ピンク地）に 48px はみ出す。旧 .fv-cake-edge はこれに統合した */
.fv-cake {
    position: absolute;
    left: 40.208%;  /* x=532（写真基準 772） */
    top: 48.458%;   /* y=330 */
    width: 32.448%; /* 623px */
    z-index: 3;
}
.fv-balloon {
    position: absolute;
    left: 62.083%;  /* x=952（写真基準 1192） */
    top: 32.599%;   /* y=222 */
    width: 14.271%; /* 274px */
    z-index: 2;
}

/* ページ内リンクの着地点。
   PCでは LINE UP／SHOP／ONLINE SHOP の各セクションが高さ0で .pink の先頭に重なるため、
   セクションに id を付けると3つとも同じ位置へ飛ぶ。中の要素は .pink 基準で置いてあるので
   セクションには触れず、この空要素だけを座標で置く。SPは通常フローなのでそのままで正しい位置にくる。 */
.anchor {
    display: block;
    width: 1px;
    height: 1px;
}

/*-----------------------------------------------
地色
-----------------------------------------------*/
.about,
.pink {
    background: var(--color-pink);
}
.kodawari,
.footer {
    background: var(--color-cream);
}
.footer {
    overflow: hidden;
}
/* 帯の下は白 */
.footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 11.527vw; /* 6970 → 7136 = 166px（カンプ画素で確認） */
    background: var(--color-white);
    z-index: 0;
}
.border-hakataori,
.border-stripe {
    line-height: 0;
}

/*-----------------------------------------------
ヘッダーナビ（PC）
-----------------------------------------------*/
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
.gnav-list a {
    font-family: var(--font-en);
    font-size: 1.250vw;      /* 18px（キャップ高13px） */
    line-height: 1;
    letter-spacing: 0.08em; /* 「ONLINE SHOP」幅126px に合わせる */
    color: var(--color-nav);
}
.gnav-list a:hover {
    opacity: 0.7;
}

/*-----------------------------------------------
CM動画枠（URL支給後に iframe を入れる）
-----------------------------------------------*/
/* 工程1の苺バッジ。カード画像（番号＋白箱）を基準に重ねる。
   合成画像のままだと 01 だけ横に広くなり、SPのグリッドで白箱と番号が小さくなる（2026-09-24） */
.step-badge01 {
    position: absolute;
    left: 60.5%;   /* x=302（カード画像 141 起点・幅 266 に対する割合） */
    top: 74.67%;   /* y=3485（同 3258 起点・高さ 304） */
    width: 51.1%;  /* 136px */
    z-index: 3;
}
.movie-box {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #B3B3B3;
}
.movie-box iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.movie-placeholder {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;          /* 動画支給までの Coming Soon 表示（2026-09-24 先方ご指定） */
    font-family: var(--font-en);
    font-size: 2.222vw;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

/*-----------------------------------------------
LINE UP 文字
-----------------------------------------------*/
.lineup-text01,
.lineup-text02,
.lineup-text03,
.lineup-text04 {
    color: var(--color-white);
    text-align: center;
    line-height: 1;
}
.lineup-name {
    display: block;
    font-size: 1.666vw; /* 24px（文字高25px） */
    font-weight: 700;
    letter-spacing: 0.08em;
}
.lineup-price {
    display: block;
    margin-top: 0.069vw;
    font-size: 1.944vw; /* 28px */
    font-weight: 700;
    letter-spacing: 0.02em;
}
.lineup-price small {
    font-size: 1.388vw; /* 20px */
}
.lineup-note {
    color: var(--color-white);
    font-size: 0.868vw; /* 12.5px（幅300px） */
    line-height: 1.2;
}

/*-----------------------------------------------
SHOP 文字 ※実測：店舗名 y=+4 / 罫線 y=+42 w366 / 項目 y=+70 / コロン x=939 / 値 x=947
-----------------------------------------------*/
.shop-body {
    color: var(--color-white);
}
.shop-name {
    font-size: 1.527vw; /* 22px（幅243px・11字） */
    font-weight: 700;
    line-height: 1;
    padding-top: 0.208vw;
    padding-bottom: 0.972vw;
    border-bottom: 1px solid var(--color-white);
    letter-spacing: 0.02em;
}
.shop-data {
    display: grid;
    grid-template-columns: 5.486vw 1fr; /* 項目列 79px（868→947：コロン込み） */
    margin-top: 1.736vw;
    font-size: 1.041vw;     /* 15px */
    line-height: 1.597vw;   /* 23px（4行で93px） */
}
.shop-data {
    font-weight: 400;
}
.shop-data dt {
    white-space: nowrap;
}
/* 項目と値の間は全角コロン（カンプの x=939 の縦に並ぶ「：」） */
.shop-data dt::after {
    content: "：";
}
.shop-data dt:nth-of-type(2),
.shop-data dd:nth-of-type(2) {
    margin-top: 2.152vw; /* 31px（カンプ画素で確認） */
}

/*-----------------------------------------------
フッター 文字
-----------------------------------------------*/
.footer-nav li + li {
    margin-top: 1.590vw; /* ピッチ46px（行高23px＋23px） */
}
.footer-nav a,
.footer-sns-ttl {
    display: block;
    font-family: var(--font-en);
    font-size: 1.388vw; /* 20px（キャップ高15px） */
    line-height: 1.15;
    letter-spacing: 0.1em;
    color: var(--color-text);
}
.footer-nav a:hover {
    opacity: 0.7;
}
.footer-sns-list {
    display: flex;
    gap: 0.833vw;             /* 12px（1076+70 → 1158） */
    margin-top: 1.041vw;
}
.footer-sns-list li {
    width: 4.861vw;           /* 70px */
}
.copyright {
    text-align: center;
    font-family: var(--font-ja);
    font-size: 1.388vw;       /* 20px（幅397px） */
    letter-spacing: 0.03em;
    line-height: 1.2;
    color: var(--color-copyright);
}

/*-----------------------------------------------
SP（768px以下）※SPカンプなし。PC版を縦積みに組み替える
-----------------------------------------------*/
@media (max-width: 768px) {
    body {
        font-size: 1.4rem;
    }
    .header,
    .about-thread,
    .side-left,
    .side-right,
    .about-spool02,
    .step-arrow01,
    .step-arrow02,
    .step-arrow03 {
        display: none;
    }

    /* 共通：縦積み・中央寄せ */
    .about > *,
    .kodawari > *,
    .lineup > *,
    .shop > *,
    .online-shop > * {
        margin-left: auto;
        margin-right: auto;
    }
    .about {
        padding: 12vw 0 16vw;
    }
    .pc-only { display: none; }
    .sp-only { display: block; }

    /* FV：SPでは縦を伸ばして写真を大きく見せる（2026-09-24 先方ご指示。PCは 1440/681 のまま）
       縦を伸ばすと写真（と fv-stage）は高さ基準で拡大され、左右が画面外へ出る。
       画面幅 W に対し stage の幅は W*1.7626、左端は画面の -0.3813W の位置にあるので、
       「画面左から X%」を stage 基準に直すと (0.3813 + X) / 1.7626 になる。
       ロゴだけは画面の端を基準に置き直さないと左が切れる（2026-09-24） */
    .fv { aspect-ratio: 1440 / 900; }
    .fv-logo {
        left: 25.04%;   /* 画面左から 6% */
        width: 27.23%;  /* 画面幅の 48% */
    }

    /* 博多織カード：分解して白いボックスに縦積み */
    .hakataori-sp {
        width: 92vw;
        margin: 16vw auto 0;
        padding: 6vw 5vw 4vw;
        background: var(--color-white);
        border-radius: 3.2vw;
    }
    .hakataori-sp .card-ttl { width: 38vw; }
    .hakataori-sp .card-text { width: 100%; margin-top: 4vw; }  /* SP用に1行20文字前後で組み直した画像 */
    .hakataori-sp .card-illust { width: 46vw; margin: 5vw auto 0; }
    .hakataori-sp .card-note { width: 30vw; margin: 3vw 0 0 auto; }

    .about-catch { width: 80vw; }
    .about-spool01 { width: 50vw; margin-top: 10vw; }
    .about-ttl { width: 33.2vw; margin-top: 6vw; }   /* 筆記体見出しはPCの比率を保つ（カンプ幅 190px × 0.656） */
    .about-text { width: 90vw; margin-top: 5vw; }
    .layer-ttl { width: 88vw; margin-top: 14vw; }
    .layer-img { width: 92vw; margin-top: 6vw; }
    .hakataori { width: 92vw; margin-top: 16vw; }  /* PC用カード（SPでは非表示） */
    .hakataori-spool { width: 16vw; margin: -4vw 0 0 2vw !important; }

    .kodawari {
        padding: 14vw 0 16vw;
    }
    .kodawari-lead { width: 40vw; }
    .kodawari-ttl { width: 82vw; margin-top: 3vw; }
    .kodawari-subttl { width: 86vw; margin-top: 6vw; }
    .step-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5vw 4vw;
        width: 90vw;
        margin-top: 10vw;
        align-items: start;
    }
    .step01 { position: relative; }  /* 苺バッジの基準（PCでは .step01 自体が absolute なので不要） */
    .step-note { width: 36vw; margin: 3vw 5vw 0 auto; }
    .movie { width: 90vw; margin-top: 12vw; }
    .movie-placeholder { font-size: 5vw; }

    .pink {
        padding: 14vw 0 0;
    }
    .lineup-ttl { width: 40vw; }      /* 基準：カンプ幅 229px × 0.656 */
    .lineup-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10vw 4vw;
        width: 90vw;
        margin: 10vw auto 0;
        align-items: end;
    }
    .lineup-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }
    .product01 { width: 36vw; }
    .product02 { width: 20vw; }
    .product03 { width: 36vw; }
    .product04 { width: 42vw; }
    .lineup-text01, .lineup-text02, .lineup-text03, .lineup-text04 { margin-top: 3vw; }
    .lineup-name { font-size: 4.2vw; }
    .lineup-price { font-size: 5vw; margin-top: 1.5vw; }
    .lineup-price small { font-size: 3.6vw; }
    .lineup-note { width: 90vw; margin-top: 6vw; font-size: 2.8vw; }

    .shop { padding-top: 16vw; }
    .shop-ttl { width: 22.6vw; }      /* カンプ幅 129px × 0.656 */
    .shop-list { width: 90vw; margin: 6vw auto 0; }
    .shop-item + .shop-item { margin-top: 10vw; }
    .shop-img01, .shop-img02 { width: 80vw; margin: 0 auto 4vw; }
    .shop-name { font-size: 4.4vw; padding-bottom: 2.5vw; }
    .shop-data { grid-template-columns: 18vw 1fr; margin-top: 3vw; font-size: 3.4vw; line-height: 1.7; }
    .shop-data dd { padding-left: 2.5vw; }
    .shop-data dt:nth-of-type(2), .shop-data dd:nth-of-type(2) { margin-top: 2vw; }

    .online-shop { padding: 16vw 0 0; }
    .online-shop-ttl { width: 31.1vw; }  /* カンプ幅 178px × 0.656 */
    .online-shop-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2vw;
        width: 90vw;
        margin: 6vw auto 0;
    }
    .footer-img { width: 70vw; margin-top: 10vw; position: relative; z-index: 2; margin-bottom: -6vw; }

    .footer {
        position: relative;
        padding: 12vw 5vw 0;
    }
    .footer::after { display: none; }
    .footer-nav a, .footer-sns-ttl { font-size: 4.2vw; }
    .footer-nav li + li { margin-top: 3vw; }
    .footer-sns { margin-top: 8vw; }
    .footer-sns-list { gap: 3vw; margin-top: 3vw; }
    .footer-sns-list li { width: 13vw; }
    .footer-band { margin: 10vw -5vw 0; overflow: hidden; }
    .footer-band img { width: 211vw; max-width: none; margin-left: -30vw; }
    .copyright { font-size: 3.2vw; padding: 8vw 0; margin: 0 -5vw; background: var(--color-white); }
}