@charset "UTF-8";

/* ===== 変数定義 ===== */
:root {
    --primary-gray: #696969;     /* フォントカラー */
    --primary-orange: #E6641D;     /* フォントカラー */
    --primary-white: #FFFFFF;    /* フォントカラー */
    --primary-skyblue: #62CED9;     /* フォントカラー *//* バックグランドカラー */
    --primary-pink:#E98EB8;
    --gradient-blue: linear-gradient(0deg, #EAF8FA 0.39%, #FFF 97.48%);     /* バックグランドカラー */
    --gradient-orange: linear-gradient(0deg, #FDF1EB 0.32%, #FEFBF9 71.5%, #FFF 99.68%);
    --secondary-color: #FFFFFF;   /* 背景色 */
    --btn-color: linear-gradient(90deg, #F1AE89 0%, #F9D8C6 100%);   /* ボタン*/
    --font-sans: "Montserrat", sans-serif;
    --font-serif: "Shippori Mincho B1", serif;
}

/* ===== 全体リセット ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%; /* 1rem = 10px */
}   

body.noscroll {
    overflow: hidden;
}

body {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    color: var(--primary-gray);
    background-color: var(--secondary-color);
}

html,body{
    overflow-x: hidden;
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

ul {
    list-style: none;
}

.about-btn,.btn-link{
    text-decoration: none;
}

/* ===== ヘッダーの基本構成（余白を潰さない設定） ===== */
.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 16px 24px;
    
    /* ここがポイント：fixedではなく親要素のフローに残すか、
       KVの上に重ねたい場合は以下のように調整します */
    position: relative; /* 浮かさずに、通常のブロックとして高さを保持する */
    z-index: 1000;
    background-color: transparent; /* 背景は透明 */
}

/* ロゴとボタンを確実にnavより上にする */
.header a, 
.menu-btn {
    position: relative;
    z-index: 1010;
}
.header img {
    width: 123px;
    height: auto;
    z-index: 1001;
}

@media screen and (min-width: 768px) {
    .header img{
    width: 235px;
    height: 76px;
    flex-shrink: 0;
    aspect-ratio: 235/76;
    }
}

/* ===== ナビゲーション（オーバーレイ） ===== */
.nav {
    position: fixed; /* メニュー画面だけは全画面固定 */
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: var(--gradient-orange);
    z-index: 999; /* headerの中身(1010)より下に配置 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 108px 0 0 48px;
    /* 右からスライド */
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
}

/* --- 表示状態（activeクラスがついた時） --- */
.nav.active {
    transform: translateX(0);
    visibility: visible;
}

/* リストのスタイル（縦並び） */
.nav-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 35px; 
    padding-top: 20px;
}

.nav-item a {
    color: var(--primary-orange);
    font-size: 1.6rem;
    text-decoration: none;
}

.sns{
    display: flex;
    gap: 10px;
    padding-top: 30px;
}

.sns a img{
    width: 25px;
    height: 25px;
}
/* --- ボタンの設定（教えていただいた優雅なスタイル） --- */
.menu-btn {
    position: relative;
    width: 34px;
    height: 16px;
    cursor: pointer;
}

.menu-btn::before,
.menu-btn::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--primary-orange);
    /* 軌道が美しいイージング */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                top 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s;
}

.menu-btn::before { top: 0; }
.menu-btn::after { bottom: 0; }

/* --- アニメーション（active時） --- */
.menu-btn.active::before {
    top: 50%;
    transform: translateY(-50%) rotate(135deg); 
    background-color: var(--primary-orange); /* 白に変えることでオレンジ背景で見やすく */
}

.menu-btn.active::after {
    bottom: 50%;
    transform: translateY(50%) rotate(45deg);
    background-color: var(--primary-orange);
}

/* nav-PC */
@media screen and (min-width: 768px) {
    .menu-btn {
        display: none; /* PCではメニューボタンを非表示 */
    }

    .nav {
        position: static;     /* 固定配置を解除 */
        width: auto;
        height: auto;
        background: none !important; /* 背景色（オレンジ）を消す */
        transform: none !important;  /* 画面外に追い出すのを解除 */
        opacity: 1;
        visibility: visible;
        padding: 0;           /* スマホ用の余白をリセット */
    }
    .nav-list{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 30px;
    }

    .nav-item a {
        color: var(--primary-orange);
        font-size: 1.8rem;
    }

    .sns {
        display: none;
    }
}


/* ===== KV ===== */
.kv{  
    position: relative;
    background-image: url("../img/TopV.jpg");
    background-size: 130% auto;      /* 画像を枠いっぱいに広げる */
    background-position: -20px -210px; /* 画像の表示位置を微調整（必要に応じて調整してください） */
    background-repeat: no-repeat; /* 繰り返しを防ぐ */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kv-container{
    display: flex;
    width: -webkit-fill-available; /* Safari用 */
    width: stretch;                /* 標準仕様 */
    padding: 94px 2px 47px 2px;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    background: linear-gradient(180deg, rgba(255, 252, 248, 0.00) 0%, #FFFCF8 72.12%);
}
.kv-img img{
    width: 154px;
    height: auto;
}

.kv-pc{
    display: none;
}

.kv-sp{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: -webkit-fill-available; /* Safari用 */
    width: stretch;                /* 標準仕様 */
}

.kv-title-sp{
    color: var(--primary-orange);
    font-size: 1.8rem;
    font-weight: 400;
}

.line-sp{
    width: 122px;
    height: 1px;
    background-color: var(--primary-orange);
}

.kv-txt-container{
    display: flex;
    padding-left: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: -webkit-fill-available; /* Safari用 */
    width: stretch;                /* 標準仕様 */
}

.kv-txt{
    display: flex;
    padding: 5px 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 1.8rem;
    font-weight: 400;
    background-color: var(--primary-white);
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.10);
}


/* スマホ用（画面幅768px以上）の設定 */
@media screen and (min-width: 768px) {
    .kv-img img {
        width: 250px;   /* スマホの時だけ横幅を指定 */
        margin: 0 auto; /* 中央寄せにする場合 */
        display: block;
    }

    .kv-pc{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .kv-title{
        font-size: 2.4rem;
        color: var(--primary-orange);
    }
    .kv-line{
        width: 122px;
        height: 1px;
        background-color: var(--primary-orange);
    }

    .kv-sp{
        display: none;
    }

    .kv-container{
        display: flex;
        width: stretch;                /* 標準仕様 */
        padding: 57px 0 80px 120px;
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        background: linear-gradient(271deg, rgba(255, 255, 255, 0.10) 13.85%, #FFFCF8 63.8%);
    }

    .kv{  
    position: relative;
    background-image: url("../img/TopV.jpg");
    background-size: 65%;      /* 画像を枠いっぱいに広げる */
    background-position: right; /* 画像の表示位置を微調整（必要に応じて調整してください） */
    background-repeat: no-repeat; /* 繰り返しを防ぐ */
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .kv-txt-container{
        padding: 0;
    }
}


/* section title */
.section-title{
    display: flex;
    flex-direction: column;
    font-size: 2rem;
    font-weight: 500;
    gap: 8px;
    align-items: center;
}

.section-subtitle{
    color: var(--primary-orange);
    text-align: center;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
}
/* section PC */
@media screen and (min-width: 768px) {
    .section-title{
        font-size: 2.4rem;
    }
    .section-subtitle{
        font-size: 1.8rem;
    }
}
/* footer */
.footer {
    display: flex;
    padding: 32px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.footer-container img {
    width: 123px;
    height: auto;
}

.footar-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}

.f-nav-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
}

.footer-nav a{
    font-size: 1.4rem;
}

.footer-txt {
    font-size: 1.2rem;
    margin: 0 auto;
}

/* Footer PC */
@media screen and (min-width: 768px) {
    .footer-container img{
    width: 235px;
    height: 76px;
    flex-shrink: 0;
    }

    .footer-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        width: 100%;
    }

    .f-nav-list{
        flex-direction: row;
        gap: 30px;
    }
    .footer-nav a{
        font-size: 1.8rem;
    }
    .footer-txt {
        font-size: 1.4rem;
    }
}

/* --- 共通：動く前の基本設定 --- */
.fadeIn, .fadeInLeft, .fadeInRight {
    opacity: 0;
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* --- 下からふわっ (既にあるもの) --- */
.fadeIn {
    transform: translateY(40px);
}

/* --- 左からスッ --- */
.fadeInLeft {
    transform: translateX(-50px); /* 左に50pxずらしておく */
}

/* --- 右からスッ --- */
.fadeInRight {
    transform: translateX(50px); /* 右に50pxずらしておく */
}

/* --- 【共通】JSで .show がついた時の状態 --- */
.fadeIn.show, 
.fadeInLeft.show, 
.fadeInRight.show {
    opacity: 1;
    transform: translate(0, 0); /* 元の位置(0)に戻す */
}

/* --- 1. じわっと（ぼかし＋浮き上がり） --- */
.blurFade {
    opacity: 0;
    filter: blur(5px); /* 最初はぼかしておく */
    transform: scale(1.05); /* ほんの少し大きくしておく */
    transition: opacity 2s ease-out, filter 2s ease-out, transform 2s ease-out;
}

.blurFade.show {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/* --- 2. ふわっと拡大（センターから広がる） --- */
.fade-scale {
    opacity: 0;
    transform: scale(0.9); /* 少し小さくしておく */
    transition: opacity 1.8s ease-out, transform 1.8s ease-out;
}

.fade-scale.show {
    opacity: 1;
    transform: scale(1);
}

/* --- 3. 幕が開くようなセパレート（上下に広がる） --- */
.curtainFade {
    opacity: 0;
    clip-path: inset(10% 0 10% 0); /* 上下を少し隠しておく */
    transition: opacity 1s ease, clip-path 1s ease;
}

.curtainFade.show {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}