/* 基本設定 */

body {
    margin: 0;
    padding: 0;
    font-family: "Noto Serif JP", serif; /* 明朝体を指定 */
    background-color: #f2f0e6;
    color: #333;
}

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

/*すべての要素のサイズ計算を「枠線込み」にする（ずれ防止）*/
* {
    box-sizing: border-box;
}

/*画像が画面を突き破らやないようにする*/

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


/*--------ホーム--------*/

/* ヘッダー全体のレイアウト */
.site-header {
    position: fixed;
    width: 100%;
    height: 100vh;
    pointer-events: none; /* 下の画像をクリックできるようにする */
    z-index: 10;
}

/* 右側のロゴエリア */
.header-right {
    position: absolute;
    top: 10px;
    right: 60px;
    text-align: right;
    writing-mode: vertical-rl; /* ロゴ部分も縦書きに */
    pointer-events: auto;
}

h1.logo-text {
    font-size: 30px;
    letter-spacing: 0.5em;
    margin: 0;
    line-height: 1.2;
    display: block;
}




.address {
    font-size: 15px;
    margin-top: 20px;
    letter-spacing: 0.1em;
    display: block;
}

/* 左側の縦書きメニュー */
.global-nav {
    position: absolute;
    top: 40px;
    left: 40px;
    pointer-events: auto;
}

.global-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* 横に並べてから中身を縦書きに */
}

.global-nav li {
    margin-right: 20px;
    writing-mode: vertical-rl; /* ここで縦書きを指定 */
}

.global-nav li a {
    font-size: 17px;
    line-height: 1.5;
}

.global-nav a {
    text-decoration: none;
    color: #333;
    font-size: 17px;
    letter-spacing: 0.3em;
    transition: opacity 0.3s;
}


/*ホームのみのナビゲーション設定*/
.home-global-nav {
    position: absolute;
    top: 40px;
    left: 40px;
    pointer-events: auto;
}




/*マウスを乗せた時の動き*/
a:hover {
    opacity: 0.6; /*60%の薄さになる*/
}

/* メインビジュアル*/
.main-visual {
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    justify-content: flex-start; /* 上詰めで配置開始 */
    align-items: center;
    min-height: 120vh; /* 画面の高さより少し長く設定して、余裕を持たせる */
    padding-top: 100px; /* ロゴやナビが被らないようにするための物理的な隙間 */

}

/*画像を包む箱*/
.image-wrapper {
    position: relative;
    width: 40%;        /* 好きな数字に変える */
    margin: 100px auto;
    /*アニメーションもここに統一*/
    animation: fadeIn 2.5s ease-out forwards; 
}

.image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /*左右の余白を自動計算して中央*/
}


/* ストーリーセクション */
.story-section {    
    position: relative;/*アニメーションのために必要*/
    padding: 100px 0;
    display: flex;
    justify-content: center;
    width: 80%;    /*横幅を調整*/
    margin: 100px auto;
    animation: fadeIn 2.5s ease-out forwards;
}

.content-container {
    display: flex;
    width: 80%;
    max-width: 1000px;
    align-items: flex-start;
}

/* 左側：写真の並び */
.photo-side {
    flex: 1;
}

.photo-side img {
    width: 100%;
    height: auto;
    margin-bottom: 20px; /* 写真同士の隙間 */
    display: block;
}

/* 右側：縦書きの詩 */
.text-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央に寄せる */
    padding-left: 50px;
}

.poem {
    writing-mode: vertical-rl; /* 縦書き */
    line-height: 3;           /* 行間を広げて余白を作る */
    font-size: 1.1rem;
    letter-spacing: 0.3em;
    height: 600px;            /* 縦の長さを固定 */
}







/* --- アニメーションの「動き」の定義 --- */
@keyframes fadeIn {
    0% {
        opacity: 0;            /* 最初は透明 */
        filter: blur(10px);    /* ぼかし */
        transform: translateY(20px); /* 下から */
    }
    100% {
        opacity: 1;            /* 最後はくっきり */
        filter: blur(0);       /* ぼかしなし */
        transform: translateY(0);    /* 元の位置へ */
    }
}


/* フッター */
 footer {
   background-color: #f2f8f9;
   text-align: center;
   padding: 80px 80px 30px 80px;
 }

 .site-footer {
    text-align: center; /* 全てを中央揃えにする */
    padding: 60px 0;    /* 上下にゆったりとした余白を作る */
    background-color: #f2f0e6; /* C5M5Y10K0に近い生成り色 */
}

.footer-section {
    margin-bottom: 30px; /* 各要素の間の隙間 */
}

/* ① 丸いロゴのサイズ指定 */
.footer-logo {
    width: 80px;  /* ★ここでサイズを調整（お好みで60px〜100px） */
    height: auto;
    border-radius: 50%; /* 念のため円形を維持 */
}

/* ② インスタロゴのサイズ指定 */
.instagram-icon {
    width: 40px;  /* ★かなり小さく、控えめにするのが上品です */
    height: auto;
    transition: opacity 0.3s;
}

.instagram-icon:hover {
    opacity: 0.7;
}

/* メニューリンクの装飾 */
.footer-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px; /* リンク同士の横の隙間 */
    margin-bottom: 30px;
}

.footer-nav a {
    text-decoration: none;
    color: #001c42; /* 組紐の紺色に近い色 */
    font-size: 0.9rem;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.3s;
}

.footer-nav a:hover {
    border-bottom: 1px solid #001c42; /* ホバーで下線を出す */
}

/* Lit.Linkロゴ */
.litlink-logo {
    width: 100px;
    height: auto;
}

/* コピーライト */
.copyright {
    font-size: 0.7rem;
    color: #888;
    margin-top: 40px;
}


/*-------組紐体験ワークショップ-------*/

/* --- 別ページ用レイアウト --- */
.page-title-section {
    padding: 100px 0;
    display: flex;
    justify-content: center;
}

.vertical-title {
    writing-mode: vertical-rl; /* タイトルを縦書きに */
    letter-spacing: 0.3em;
    font-size: 1.8rem;
}

.vertical-title span {
    font-size: 0.9rem;
    margin-top: 10px;
    font-family: 'Georgia', serif; /* 英字をおしゃれに */
}

/* コンテンツの並び（フレックスボックス） */
.content-block {
    padding: 100px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    max-width: 900px;
    margin: 0 auto 100px;
}

/* 交互にするための設定 */
.content-block-reverse {
    /*PC版でも横並び（フレックスボックス）を適用する*/
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    max-width: 900px;
    margin: 0 auto 100px;
    padding: 100px 0;

    /*その上で、左右を入れ替える*/
    flex-direction: row-reverse;
}

.img-box img {
    width: 300px; /* ワイヤーフレームに合わせたサイズ */
    height: 300px;
    object-fit: cover;
    box-shadow: 10px 10px 0 #eaf4fc; /* 水色の影でアクセント */
}

.text-box h2 {
    font-size: 1.3rem;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* 予約ボタン */
.btn-area {
    text-align: center;
    margin: 100px 0;
}

.reserve-btn {
    display: inline-block;
    padding: 20px 60px;
    border: 1px solid #333;
    text-decoration: none;
    color: #333;
    border-radius: 50px; /* 丸いボタン */
    transition: all 0.3s;
}

/*PC版：マウスを乗せた時*/
.reserve-btn:hover {
    background-color: #333;
    color: #fff;
}

/*-------大関組紐について--------*/

/* --- 共通の縦書き文章設定 --- */
.vertical-content, .color-text, .vertical-title {
    writing-mode: vertical-rl;
    line-height: 2.2; /* 縦書きは行間を広めにとると美しい */
}

/* --- 歴史エリア --- */
.history-section {
    display: flex;
    justify-content: center;/*左右方向の中央ぞろえ*/
    align-items: flex-start;/*上端で揃える（縦書きテキストのため）*/
    gap: 80px;
    margin-bottom: 200px;
    
}

.main-img {
    position: relative;
    margin-top: 200px;
}

.main-img img {
    width: 400px;
    
}

.caption {
    position: absolute;
    top: 0;
    right:calc(100% + 15px);/*画像の左端から15px外側へ*/
    writing-mode: vertical-rl;
    font-size: 0.8rem;
    color: #666;
}

.vertical-content {
    margin-top: 200px;
}

/*--- 大関四色矢羽根文様 ---*/

.meaning-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 0;
}

.meaning-img img {
    width: 500px;
    height: auto;
    margin-bottom: 50px;
}

.vertical-text-area {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    height: 400px;
    margin: 50px auto;
}

.vertical-text-area h2 {
    font-size: 1.8rem;
    
    margin-left: 40px;
}

.vertical-text-area p {
    font-size: 1rem;
    line-height: 2.4;
    letter-spacing: 0.2em;
}



/* --- セクション2：四色の詳細エリア --- */

.color-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    margin-top: 80px;
    width: 100%;
}

.color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.color-chip {
    width: 60px;
    height: 60px;
    margin-bottom: 30px;
    border: 1px solid #dcdcdc;
}

/* 各色のチップカラー（仮） */
.color-chip.kachi { background-color: #001c42; } /* 紺 */
.color-chip.moegi { background-color: #7b8d42; } /* 萌木 */
.color-chip.white { background-color: #f2f0e6; } /* 白 */
.color-chip.purple { background-color: #4b2d71; } /* 紫 */

.color-description  {
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    height: auto;
    min-height: 350px;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    text-align: left;
}

.color-description h3 {
    font-size: 1.1rem;
    margin-left: 15px;
    letter-spacing: 0.3em;
}

.color-description p {
    font-size: 0.85rem;
    line-height: 2.0;
    letter-spacing: 0.1em;
    white-space: normal;
}



/*-------大関社中--------*/

/*メインエリア全体の調整*/
.shachu-page {
    padding-top: 150px; /*ヘッダーと被らないための余白*/
    text-align: center;
    
}

/*上部画像*/
.main-img-box {
    width: 200px;
    height: 100px;
    border: 1px solid #333;
    margin: 200px auto 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 300px;
    
}

/*メッセージ（中央揃えの横書き）*/
.message-section {
    margin-bottom: 150px;
}

.message-content p {
    font-size: 1.1rem;
    line-height: 2.2;
    margin: 0 0 10px 0;
    letter-spacing: 0.1em;
}

/*まとまりごとの大きな余白*/
.mt-large {
    margin-top: 50px;
}

.staff-msg {
    margin-top: 80px;
    font-weight: 500;
}

/*手書き画像*/
.map-section {
    margin-bottom: 80px;
}

.map-img img {
    width: 50%;
    height: auto;
    display: block;
    margin: 0 auto;/*画像が真ん中にくる*/
}

/*バナーエリア*/
.banner-section {
    padding-bottom: 100px;
}

.banner-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 80%;
    margin: 0 auto;
}

.banner-item {
    flex: 1;
    max-width: 300px;


    aspect-ratio: 16 / 9; /*バナーの形を維持*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-item img {
    width: 100%;
    height: auto;
}


/*-------ご案内--------*/

/*ご案内ページ全体の調整*/
.access-page {
    padding-top: 150px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/*セクションタイトル（アクセス・お問合せ）*/
.section-title {
    font-size: 1.5rem;
    margin-bottom: 30px;
    letter-spacing: 0.2em;
}

/*手書き地図*/
.map-frame {
    width: 100%;
    aspect-ratio: 16 / 9;/*比率固定*/
    margin-bottom: 50px;
    display: flex;
    justify-content: center;/*横方向の真ん中*/
    align-items: center;/*縦方向の真ん中*/
}

/*アクセス情報*/
.access-text {
    margin-bottom: 80px;
    line-height: 2;
}

/*Google Map*/
.map-iframe-wrapper {
    width: 100%;
    height: 400px;
   
    margin-bottom: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*お問い合わせフォーム*/
.contact-section {
    margin-bottom: 100px;
    
    padding: 60px 40px;
    background-color: #fff;
}


/*横並びの調整*/
.contact-row {
    display: flex;/*左右に並ぶ*/
    margin-bottom: 40px;/*行ごとのすき間*/
    align-items: flex-start;/*ラベルを上端にそろえる*/
}

/*左側のラベル部分の幅を固定する*/
.label-box {
    width: 250px;
    text-align: left;
    padding-top: 15px;/*入力欄と高さを合わせる*/
}

/*「必須」を赤字＆余白*/
.contact-span {
    color: #d93333;/*赤系*/
    font-size: 0.7rem;
    margin-left: 50px;
    vertical-align: middle;
}

/*入力欄（テキストボックス・テキストエリア共通）*/
.contact-textbox {
    border: none;
    border-bottom: 1px solid #707070;/*下線のみ*/
    background-color: #fafafa;
    width: 100%;/*input-boxの幅いっぱいに*/
    max-width: 500px;
    height: 56px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;/*余白を含めたサイズ計算*/
}

/*テキストエリア専用の高さ設定*/
.contact-textarea {
    height: 150px;
    padding-top: 15px;
    resize: vertical;/*ユーザーが縦に広げられるようにする*/
}

/*ボタンを中央に*/
.btn-container {
    text-align: center;
    margin-top: 60px;
}


/* 予約ボタン */
.submit-btn {
    margin-top: 20px;
    padding: 10px 60px;
    background-color: #001c42;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

.submit-btn:hover {
    background-color: #67a7cc;
}

.submit-btn {
    display: inline-block;
    padding: 20px 60px;
   
    text-decoration: none;
    color: #fff;
    border-radius: 50px; /* 丸いボタン */
    transition: all 0.3s;
}

.input-box {
    flex: 1;
}




/*-------SP--------*/

@media screen and (max-width: 768px) {

    
    /*ヘッダーを「固定」から「通常」に戻す*/
    .site-header{
        position: relative; /*画面に固定せず、上に流れるようにする*/
        height: auto;
        pointer-events: auto;
        padding: 40px 20px;
    }
    
    /*ロゴ（大関社中）と住所の位置調整*/
    .header-right {
        position: static;/*自由配置をやめる*/
        text-align:center;
        writing-mode: horizontal-tb;/*スマホでは「横書き」のほうが見やすい*/
        margin-bottom: 30px;
    }

    h1.logo-text {
        font-size: 24px;/*少し小さく*/
        letter-spacing: 0.3em;
    }

    .address {
        margin-top: 10px;
        letter-spacing: 0.1em;
    }

    /*ナビゲーションを横並びのまま中央へ*/
    .global-nav {
        position: static;
        width: 100%;
    }

    .global-nav ul {
        flex-direction: row;/*横に並べる*/
        flex-wrap: wrap;/*溢れたら折り返す*/
        justify-content: center;
        gap: 15px;
    }

    .global-nav li {
        writing-mode: horizontal-tb;/*メニューも横書きに*/
        margin: 0;
    }

    .global-nav a {
        font-size: 14px;
    }


     .home-global-nav {
        position: static;
        width: 100%;
    }

    .home-global-nav ul {
        flex-direction: row;/*横に並べる*/
        flex-wrap: wrap;/*溢れたら折り返す*/
        justify-content: center;
        gap: 15px;
    }

    .home-global-nav li {
        writing-mode: horizontal-tb;/*メニューも横書きに*/
        margin: 0;
    }

    .home-global-nav a {
        font-size: 12px;
    }

    .content-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;/*幅を100％に*/
        max-width: none;/*もし設定があれば解除*/
        padding: 0;/*左右の余白を一旦ゼロにして画面いっぱいにする*/
    }

    .photo-side,
    .text-side {
        width: 100%;
        margin-bottom: 30px;
    }

    .photo-side img {
        width: 100vw;
      
        height: auto;
        margin-bottom: 10px;
    }

    .text-side {
        text-align: left;
        align-items: center;
    }



    
    /*メインコンテンツの余白調整*/
    .shachu-page, .access-page {
        padding-top: 20px;/*固定ヘッダー分の余白を減らす*/
    }

    
    /*ご案内*/
    
    /*画像調整*/
    .map-frame {
        aspect-ratio: auto;/*比率の固定を解除する*/
        width: 100%;/*横幅を画面いっぱいに*/
        margin-bottom: 30px;/*上下の余白を少し調整*/
        display: flex;
        justify-content: center;/*中身を中央に寄せる*/
    }

    .map-frame img {
        /*画面からはみ出さないようにする*/
        width: 100%;
        max-width: 100%;
        height: auto;/*縦横比を保ったまま縮小*/
    }



 

    /*お問合せフォームの「横並び」を「縦」にする*/
    .contact-row {
        flex-direction: column;/*ラベルと入力欄を縦に積む*/
        margin-bottom: 25px;
    }

    .label-box {
        width: 100%;
        padding-top: 0;
        margin-bottom: 8px;
    }

    .input-box {
        width: 100%;
    }

    .contact-textbox {
        width: 100%;/*入力欄を画面いっぱいに*/
        max-width: none;
    }



    /*大関組紐ページ甲冑と文章縦並び*/

    /*親要素を縦並びにする*/
    .history-section {
        display: flex;
        flex-direction: column;
        align-items: center;/*中央にそろえる*/
        width: 100%;/*親が画面いっぱいであること*/
        padding: 40px 20px;
        text-align: center;
    }

    /*各ブロックの幅を100％に*/
    .main-img,
    .vertical-content {
        width: 100%;
        max-width: 600px;
    }

    /*キャプションの調整*/
    .caption {
        font-size: 0.8rem;
        margin-top: 10px auto 0;/*上に10px左右はautoで「箱ごと」真ん中寄せ*/
        line-height: 1.5;
        text-align: left;/*箱の中の文字は左揃え（画面だと上揃え）*/
        width: fit-content;/*箱の幅を文字の長さに合わせる*/
        max-width: 90%;/*スマホで端っこにくっつかないように*/
        left:calc(100% - 100px);/*画像の左端から15px外側へ*/

        /*位置固定を解除する*/
        position: static;/*元のCSSでabsoluteがあればこれでリセット*/
        left: auto;/*横位置指定を無効化*/

        /*配置を整える*/
        margin: 15px auto 0;/*上に15pxあけて、左右は中央に*/
        width: 90%;/*画面の幅に合わせる*/
        max-width: none;/*制限を解除*/

        /*文字の見た目*/
        font-size: 0.85rem;/*読みやすい大きさに微調整*/
    }

    /*テキスト側の調整*/
    .vertical-content {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        padding: 0 20px;
    }
    
    .vertical-content h2 {
        font-size: 1.4rem;
        margin-bottom: 20px;
        padding-bottom: 10px;
    }

    .vertical-content p {
        line-height: 1.8;
        font-size: 0.95rem;
        text-align: left;/*箱の中の文字は左揃え（画面だと上揃え）*/
    }


    /*四色の説明*/
    .color-container {    
        flex-direction: column;/*横並びを解除して縦並びにする*/
        align-items: center;/*中央に揃える*/
        gap: 50px;/*項目ごとの間隔を調整*/
        margin-top: 40px;
    }

    .color-item {
        width: 100%;
        max-width: 300px;
        text-align: left;/*縦書きだと上詰めになる*/
    }



    /*組紐体験ワークショップ*/

    /*親要素を縦並びにする*/
    .content-block ,
    .content-block-reverse {
        display: flex;
        flex-direction: column;
        align-items: center;/*中央にそろえる*/
        width: 100%;/*親が画面いっぱいであること*/
        padding: 40px 20px;
        text-align: center;
    }

    /*スマホ版：タップした瞬間*/
    .reserve-btn:action {
        background-color: #bfae85;/*押したときだけ少し濃くする*/
        transform: scale(0.98);/*ほんの少しだけボタンを小さくして「凹んだ感」を出す*/
    }



    /*ご案内*/

    /*３つのバナーを「縦並び」にする*/
    .banner-container {
        flex-direction: column;
        align-items: center;
        width: 90%;
        gap: 15px;
    }



    /*---PC版・スマホ版共通---*/
    .hamburger {
        display: none; /*PCでは隠す*/
        cursor: pointer;
        flex-direction: column;
        gap: 6px;
        padding: 10px;
    }

    .hamburger span {
        display: block;
        width: 25px;
        height: 2px;
        background-color: #333; /*線の色*/
        transition: 0.3s;
    }

    /*---スマホ版(@media 768px以下）---*/
    .global-nav {
        display: flex;
        justify-content: flex-end;/*右側にボタンを配置*/
        padding: 20px;
    }

    .hamburger {
        display: flex; /*スマホで表示*/
        z-index: 1000;
    }

    .global-nav ul {
        display: none; /*最初はメニューを隠す*/
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.95);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 999;
    }

    /*メニューが開いた時の設定*/
    .global-nav ul.active {
        display: flex;
    }

    /*フッター内のリストを縦並びにする*/
    footer nav ul {
        display: flex;
        flex-direction: column;/*これで縦に並びます*/
        align-items: center;/*中央揃えにします*/
        padding: 0;
        gap: 15px;/*リンク同士の上下の間隔*/
    }

    footer nav ul li {
        margin: 0; /*余計な左右の余白をリセット*/
        list-style: none; /*ポッチを消す（念のため）*/
    }

    footer nav ul li a {
        display: block;
        padding: 10px 0; /*スマホで押しやすいように上下に余白*/
        text-decoration: none;
        font-size: 0.9rem; /*文字サイズを少し調整*/
    }

    /*---ホームページメインビジュアル---*/
    /*外側の枠の余白をなくす*/
    .image-wrapper {
        width: 100%;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    /*リンクタグをブロック要素にして幅を広げる*/
    .image-wrapper a {
        display: block;
        width: 100%;
    }

    /*画像を横幅いっぱいにする*/
    .image-wrapper img {
        width: 100%;
        height: auto;
        display: block;
    }

    /*---ホームページテキスト位置---*/
    /*親要素の設定*/
    .content-container {
        display: flex;
        flex-direction: column;
        align-items: center;/*これで子要素を「横方向」へ*/
        
        width: 100%;
    }

    /*テキスト側の設定*/
    .text-side {
        width: 90%; /*画面端までくっつかないよう少し余裕を持たせる*/
        margin-left: auto;/*左右の余白を自動計算して真ん中へ*/
        margin-right: auto;
        padding: 0 20px;/*内側の余白を整える*/
    }


   

}