/*====================================================

	900px以下

====================================================*/

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

    /*/////////////////////////////////////////////////////////*/

    .clouds {
        display: none;
    }

    .topp {
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        /* 上から順に並べる */
        align-items: center;
        width: 100%;
        height: 100dvh !important;
        min-height: 100dvh;
        overflow: hidden;
        /* 横方向のはみ出しをガード */
        box-sizing: border-box;
    }

    .hidari,
    .migi,
    .right-panel {
        display: contents;
    }

    /* --- 順序の調整 --- */

    /* 1. ロゴセクション */
    .logo-section {
        order: 1;
        width: 70vw;
        max-width: 350px;
        margin: 3.5rem auto 0;
        padding: 0 0 2rem 0;
        text-align: center;
    }

    .titlebox h1 {
        font-size: clamp(3rem, 10vw, 3.5rem);
        /* 正しい順序：最小, 推奨(vw), 最大 */
        white-space: nowrap;
        font-weight: 700;
        letter-spacing: 0.1em;
        z-index: 2;
    }

    .titlebox p {
        text-align: right;
        font-size: clamp(1.2rem, 5vw, 2rem);
        /* 正しい順序：最小, 推奨(vw), 最大 */
        font-weight: 600;
    }

    /* 2. 写真（ローダー含む） */
    .loader-container {
        order: 2;
        width: 70vw;
        /* モバイルでの写真の横幅 */
        max-width: 350px;
        margin: 0 auto;
    }

    /* 3. キャッチコピー */
    .catch {
        order: 3;
        position: relative;
        width: 70vw;
        /* 写真と同じ幅 */
        max-width: 350px;
        margin: 0 auto;
        font-size: clamp(1.4rem, 1.8vw, 1.4rem);
        padding: 1.8rem 0 2.2rem 0;
        text-align: left;
        line-height: 1.5;
        letter-spacing: 0.1em;
    }

    /* 4. お知らせ */
    .whatsnewbox {
        order: 4;
        display: block;
        width: 70vw;
        /* 写真と同じ幅 */
        max-width: 350px;
        margin: 0 auto 2rem;
    }

    /* はんこの表示を復活＆スマホ向けに最適化 */
    .hanko {
        position: relative;
    }

    .hanko::after {
        display: block !important;
        position: absolute;
        top: 45%;
        right: -7rem;
        /* はみ出しすぎない程度に右に寄せる */
        transform: translateY(-50%);
        width: 10rem;
        /* PC版より一回り小さく */
        height: 10rem;
        opacity: 0.6;
        /* 文字を読みやすくするため少し薄めに */
        z-index: -1;
    }

    /* 下に線（アンダーライン）を追加 */
    .whatsnew-midashi {
        display: block !important;
        position: relative;
        width: 100% !important;
        margin: 0.8rem 0 1rem 0;
        padding: 0 0 0.8rem 0 !important;
        /* 左右余白をゼロ、下だけ線用に空ける */
        text-align: center;
        box-sizing: border-box;
        background: none;
    }

    .whatsnew-midashi h2 {
        display: block;
        width: 100%;
        text-align: center;
        margin: 0 0 0.5rem 0;
    }

    .whatsnew-midashi h2 img {
        display: block;
        max-width: 50px;
        height: auto;
        margin: 0 auto;
    }

    .whatsnew-midashi p {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 1rem;
        letter-spacing: 0.1em;
        white-space: nowrap;
        margin: 0;
    }

    .whatsnew-midashi::before {
        display: block !important;
        content: '';
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #cecbcb;
        transform: none;
    }

    /* ニュース本体 (右側 詳細) */
    .whatsnew-list {
        display: flex;
        flex-direction: column;
        font-size: 1.2rem;
        width: 100%;
        text-align: left;
        padding-left: 0;
        /* PC版の余白をリセット */
    }

    .whatsnew-date {
        font-size: 1rem;
        color: #555;
    }

    .whatsnew-title {
        font-size: 0.9em;
        letter-spacing: 0.1em;
        font-weight: bold;
    }

    .detail-link-box {
        margin-top: 0.5rem;
    }

    .detail-link {
        display: inline-block;
        padding: 0.3rem 1rem;
        border: 1px solid #ccc;
        text-decoration: none;
        font-size: 0.9rem;
        color: #333;
        border-radius: 1rem;
        background-color: #ffffff;
        cursor: pointer;
        letter-spacing: 0.2em;
        transition: all 0.8s ease;
    }

    .detail-link:hover .arrow {
        font-weight: bold;
        color: #000000;
        animation: bounce-right 1s ease-in-out infinite alternate;
    }

    .detail-link:hover {
        background-color: #e1e1e1;
        color: #666666;
    }

    .arrow {
        display: inline-block;
        /* transformを有効にするために必要 */
        font-weight: bold;
        padding-right: 0.8rem;
    }

    /* 右にバウンスする動き */
    @keyframes bounce-right {
        0% {
            transform: translateX(0);
            /* 初期位置 */
        }

        50% {
            transform: translateX(0.5rem);
            /* 右に0.5rem移動 */
        }
    }

    /*----------------[scrollパーツ]-------------------*/

    .scroll {
        position: absolute;
        right: 50px;
        bottom: 50px;
        /* 位置は適宜調整してください */
        width: 3rem;
        z-index: 100;
    }

    .scrollmoji {
        padding-bottom: 5px;
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* アスペクト比を保って箱に収める */
        vertical-align: bottom;
    }

    .scrollyaji {
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* アスペクト比を保って箱に収める */
        vertical-align: bottom;
    }

    .scrollyaji2 {
        position: relative;
        top: -2rem;
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* アスペクト比を保って箱に収める */
        vertical-align: bottom;
    }

    /*----------------[area-rogo]-------------------*/

    .rogo-s {
        position: fixed;
        top: 2rem;
        right: 2rem;
        transform: translateY(-5%);
        scroll-target-group: auto;
        z-index: 15;

        /* 追加：初期状態を非表示にする */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }

    .rogo-s img {
        max-width: 150px;
    }

    .copylight {
        /* 全ページで固定表示するための設定 */
        position: fixed;
        z-index: 50;
        pointer-events: none;
        /* クリックの邪魔をしない */

        /* 文字の設定 */
        font-family: 'Noto Serif JP';
        font-size: 1rem;
        line-height: 1.8rem;
        letter-spacing: 0.2rem;

        /* ⬇️ transformから縦書きCSSに変更 */
        writing-mode: vertical-rl;
        /* 縦書き（右から左） */
        text-orientation: mixed;
        /* 英数字は横に倒して表示 */

        /* ⬇️ 上下ぴったり中央にする魔法（縦書き用） */
        top: 50%;
        left: 1.5rem;
        /* 左からの距離（おこのみで調整してください） */
        transform: translateY(-50%);
        /* 縦方向にだけ中央寄せ */
    }


    /*==================================================*/
    /*------------           menuset--------------------*/
    /*==================================================*/

    .menubox {
        position: fixed;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        width: fit-content;
        height: fit-content;
        padding: 3rem 0 1.2rem 0;
        scroll-target-group: auto;
        z-index: 100;
        /* 追加：初期状態を非表示にする */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }

    /* メニュー全体を横並びにする */
    .menu {
        display: flex;
        align-items: center;
        padding: 0 2rem;
        gap: 0.5rem;
    }

    /* 不要なタイトル下の線を消す */
    .menu hr {
        display: none;
    }

    /* タイトルの余白調整 */
    .menu p {
        display: none;
    }

    /* リンク部分も横並びに */
    .menu-item {
        display: flex;
        margin: 0 auto;
        gap: 1.5rem;
    }

    .menul {
        padding: 1rem 1.2rem;
        white-space: nowrap;
    }



    /*-----------------------------------------*/



    .menul a {
        color: #666;
    }

    .menul a:hover {
        font-weight: bold;
        cursor: pointer;
        color: #c7eb00;
        transform: translateY(-5px);
    }

    .menus {
        padding: 1.5rem;
        text-align: justify;
        text-align-last: justify;
        color: #ccc;

    }

    /* スクロールで現在見ているセクションのメニュー項目の色を変える */
    .menul a.is-active,
    .menus.is-active {
        position: relative;
        color: #c7eb00;
        /* 黄緑色など、今まで使っていたメインカラー */
        font-weight: bold;
        /* 太字にして目立たせる */
        pointer-events: none;
        /* クリックやホバーなどのアクションを無効にする */
        cursor: default;
        /* マウスカーソルを通常の矢印に戻す */
    }

    /* カレント項目の前後につく点滅アイコン */
    .menul a.is-active::before,
    .menul a.is-active::after,
    .menus.is-active::before,
    .menus.is-active::after {
        /* ✦は仮のアイコンです。もし画像を入れたい場合は content: url("画像のパス"); に変更してください */
        content: "✦";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #c7eb00;
        font-size: 0.9em;
        animation: iconBlink 0.8s infinite alternate ease-in-out;
        /* 点滅アニメーション */
    }

    .menul a.is-active::before,
    .menus.is-active::before {
        left: -1.5rem;
        /* 左側のアイコン位置（文字からの距離） */
    }

    .menul a.is-active::after,
    .menus.is-active::after {
        right: -1.5rem;
        /* 右側のアイコン位置（文字からの距離） */
    }

    /* アイコンの点滅用キーフレーム */
    @keyframes iconBlink {
        0% {
            opacity: 0;
            /* 消える */
        }

        100% {
            opacity: 1;
            /* はっきり見える */
        }
    }

    /*-----------------------------------------*/
    /*                 box2                 */
    /*-----------------------------------------*/


    #box2 {
        position: relative;
        overflow: hidden;
    }

    .topp2 {
        display: grid;
        justify-items: left;
        align-items: start;
        width: 100%;
        min-height: 100dvh;
    }

    .bgphoto2 img {
        position: absolute;
        top: 23vh;
        left: 50vw;
        transform: translateX(-50%);
        width: 70vw;
        z-index: 20;
        pointer-events: none;
    }

    .subtitlebox {
        display: contents;
    }

    .goaisatu {
        position: absolute;
        /* 浮かせます */
        top: 14rem;
        /* 上からの位置（調整可） */
        left: 50vw;
        /* 左からの位置（レスポンシブを考慮してvw） */
        width: fit-content;
        /* 画像に被る幅を指定 */
        z-index: 20;
        /* 画像より上に表示 */
        transform: translateX(-50%);
        pointer-events: none;
        text-align: center;
    }

    .goaisatu img {
        width: 40%;
        height: auto;
    }

    .page-subj {
        position: absolute;
        top: 3vh;
        left: 0;
        /* 左端から */
        width: 100%;
        /* 右端まで広げて */
        text-align: center;
        /* 中の文字を中央へ */
    }


    /* ---------- box2 bunbox ----------*/

    .topp2bun {
        padding: 3rem 1.6rem 1rem 4rem;
        position: absolute;
        top: calc(23vh + 38vw + 1rem);
        left: 15vw;
        width: 70vw;
        z-index: 10;
    }

    .firstmoji {
        font-size: 2rem;
    }

    /* ---------- box2 bunbox ----------*/

    .aisatu_bun,
    .aisatu_bun2 {
        font-size: 1rem;
        text-align: left !important;
        /* 通常の左寄せ */
        text-align-last: left !important;
        /* 最後の行（今回の場合は各div）の均等割り付けを解除 */
        line-height: 1.8rem;
    }

    .aisatu_bun div,
    .aisatu_bun2 div {
        display: block !important;
        /* Flexを解除して縦に並べる */
        width: 100% !important;
        /* 横幅をいっぱいにする */
        background-color: transparent !important;
        /* 背景の白を消す */
        margin-bottom: 0 !important;
        /* 行ごとの隙間をリセット */
        padding: 0 !important;
        /* 余白をリセット */
        text-align: inherit;
    }

    .line-content {
        display: inline;
        /* インラインに戻して文章として繋げる */
    }


    /*==================================================*/
    /*------------           box3-----------------------*/
    /*==================================================*/


    .topp3 {
        display: grid;
        justify-items: left;
        align-items: start;
        width: 100%;
        min-height: 100dvh;
    }

    .subt-newsbox {
        position: absolute;
        /* 浮かせます */
        top: 14rem;
        /* 上からの位置（調整可） */
        left: 50vw;
        /* 左からの位置（レスポンシブを考慮してvw） */
        width: fit-content;
        /* 画像に被る幅を指定 */
        z-index: 20;
        /* 画像より上に表示 */
        transform: translateX(-50%);
        pointer-events: none;
        text-align: center;
    }

    .subt-newsbox img {
        width: 20%;
    }

    .page-subj2 {
        position: absolute;
        top: 3vh;
        left: 0;
        /* 左端から */
        width: 100%;
        /* 右端まで広げて */
        text-align: center;
        /* 中の文字を中央へ */
    }

    .newsarea {
        position: absolute;
        top: 23vh;
        left: 50vw;
        transform: translateX(-50%);
        width: 70vw;
        z-index: 20;
    }


    /* -------------------------------------------------- */
    /* ----------------- box4 --------------------------- */
    /* -------------------------------------------------- */


    .subt-productsbox {
        position: absolute;
        /* 浮かせます */
        top: 14rem;
        /* 上からの位置（調整可） */
        left: 50vw;
        /* 左からの位置（レスポンシブを考慮してvw） */
        width: fit-content;
        /* 画像に被る幅を指定 */
        z-index: 20;
        /* 画像より上に表示 */
        transform: translateX(-50%);
        pointer-events: none;
        text-align: center;
    }

    .subt-productsbox img {
        width: 80%;
    }

    .page-subj3 {
        position: absolute;
        top: 3rem;
        left: 0;
        /* 左端から */
        width: 100%;
        /* 右端まで広げて */
        text-align: center;
        /* 中の文字を中央へ */
    }

    .category-block {
        transition: transform 0.3s ease;
        will-change: transform, opacity;
    }


    .thumb-bento {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 110px);
        grid-auto-rows: 110px;
        gap: 1.5rem;
        cursor: pointer;

        /* 📍 エリアの「地図」を定義。p1〜p8の場所を完全固定！ */
        grid-template-areas:
            "p1 p1 p2"
            "p1 p1 p3"
            "p4 p5 p3"
            "p4 p6 p6"
        ;
    }

    /*------------------------------------------------*/

    .changebox {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;

    }

    .changebox {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 10%;
    }

    #changecat {
        position: absolute;
        left: 50%;
        bottom: 2rem;
        transform: translateX(-50%);
    }

    /*------------------------------------------------*/
    .catbtn {
        display: grid;
        grid-template-areas:
            "... yaji1 count yaji2 ..."
            "... yaji1 title yaji2 ..."
            "... yaji1 title2 yaji2 ..."
        ;
        font-family: "quentin", sans-serif;
        transition: all 0.3s ease;
    }

    /*------------------------------------------------*/
    .catno {
        display: inline-block;
        font-size: 0.8rem;
        font-family: "quentin", sans-serif;
    }

    .catTitle {
        font-size: 1.8rem;
        font-family: "Zen Old Mincho", serif;
        font-weight: bold;
        letter-spacing: 0.3rem;
        /*writing-mode: vertical-rl;
    バーに合わせて縦書きにする */
        text-orientation: upright;
        margin: 0 auto;
    }

    .catTitle2 {
        display: inline-block;
        font-size: 0.8rem;
        font-family: "quentin", sans-serif;
    }

    .catbtn:hover {
        color: #677227;
    }

    .catyaji {
        grid-area: yaji1;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .catyaji img {
        width: 10px;
        height: fit-content;
    }

    .catyaji2 {
        grid-area: yaji2;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }


    .catyaji2 img {
        width: 10px;
        height: fit-content;
    }

    .cat-count {
        grid-area: count;
        text-align: center;

    }

    .catTitle {
        grid-area: title;
        text-align: center;
    }

    .catTitle2 {
        grid-area: title2;
        text-align: center;
    }

    /* Scroll文字位置から流れる矢印パルス（#555） */
    .scroll-ripple {
        position: absolute;
        width: 20px;
        /* 矢印と同じサイズ */
        height: 11px;
        background-color: #555555;
        /* ボカさずクッキリさせる */
        z-index: -1;
        opacity: 0;
        pointer-events: none;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .scroll .yaji-ripple {
        display: none;
        /* 矢印の波紋は消す */
    }

    .yaji-ripple {
        position: absolute;
        width: 20px;
        height: 11px;
        /* SVGのviewBox 30:11 に合わせる、CSSのwidth 20pxなら 20*(11/30) ≒ 7.3px? いや高さに合わせて調整 */
        background-color: #bbfa45;
        -webkit-mask: url('images/scroll-line.svg') no-repeat center;
        mask: url('images/scroll-line.svg') no-repeat center;
        -webkit-mask-size: contain;
        mask-size: contain;
        filter: blur(2.5px);
        /* 追加：ぼかしを入れることで「ふわっと」させる */
        z-index: -1;
        opacity: 0;
        pointer-events: none;
    }

    #changecat:hover .yaji-ripple {
        opacity: 0.5;
    }

    /*-------------------------------------------------*/



    .miniviewbox {
        display: grid;
        justify-content: start;
        /* user preference was implicit auto-columns, but let's make it a flexible responsive grid */
        grid-template-columns: repeat(auto-fit, minmax(50px, 70px));
        grid-auto-rows: 70px;
        gap: 1rem;
        padding: 2rem 0 2rem;
        width: 70vw;
        height: auto;
    }

}

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


    .page-subj3 {
        position: absolute;
        top: 2rem;
        left: 0;
        /* 左端から */
        width: 100%;
        /* 右端まで広げて */
        text-align: center;
        /* 中の文字を中央へ */
    }

    .whatsnew-midashi h2 {
        display: block;
        width: 100%;
        text-align: center;
        margin: 0 0 0.5rem 0;
    }

    .whatsnew-midashi h2 img {
        display: block;
        max-width: 40px;
        height: auto;
        margin: 0 auto;
    }


    /* ---------- box2 bunbox ----------*/
    .topp2bun {
        padding: 3rem 1.2rem 1rem 1.2rem;
        position: absolute;
        top: calc(23vh + 38vw + 1rem);
        left: 15vw;
        width: 70vw;
        z-index: 10;
        letter-spacing: 0.2rem;
    }
}

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

    /* --- TOP1 タイトルロゴ --- */
    .logo-section {
        display: flex;
        margin-top: 2rem;
        background-size: contain;
        z-index: 10;
    }

    .titlebox h1 {
        font-size: clamp(3rem, 1.5vw, 1rem);
        /* フォントサイズをレスポンシブに */
        white-space: nowrap;
        font-weight: 700;
        letter-spacing: 0.1em;
        z-index: 2;
    }

    .titlebox p {
        text-align: right;
        font-size: clamp(2rem, 1vw, 0.5rem);
        /* フォントサイズをレスポンシブに */
        font-weight: 600;
    }

    .hanko::after {
        display: block !important;
        position: absolute;
        top: 45%;
        right: -4rem;
        /* はみ出しすぎない程度に右に寄せる */
        transform: translateY(-50%);
        width: 8rem;
        /* PC版より一回り小さく */
        height: 8rem;
        opacity: 0.6;
        /* 文字を読みやすくするため少し薄めに */
        z-index: -1;
    }

    .catch {
        position: relative;
        font-size: clamp(1.4rem, 1vw, 0.5rem);
        padding: 1rem 0 0.5rem 0;
        text-align: left;
        line-height: 1.6;
        letter-spacing: 0.1em;
    }

    /* ニュース本体 (右側 詳細) */
    .whatsnew-list {
        display: flex;
        flex-direction: column;
        font-size: 1rem;
        width: 100%;
        gap: 0.2rem;
        text-align: left;
        padding-left: 0;
    }

    .whatsnew-date {
        font-size: 0.8rem;
        color: #555;
    }

    .detail-link-box {
        margin-top: 0rem;
    }

    .detail-link {
        display: inline-block;
        padding: 0.2rem 0.5rem;
        border: 1px solid #ccc;
        text-decoration: none;
        font-size: 0.8rem;
        color: #333;
        border-radius: 1rem;
        background-color: #ffffff;
        cursor: pointer;
        letter-spacing: 0.2em;
        transition: all 0.8s ease;
    }

    .yama-top {
        position: absolute;
        z-index: 1;
        bottom: 0;
        right: 0;
        text-align: right;
    }

    .yama-top img {
        overflow: hidden;
        object-fit: cover;
        vertical-align: bottom;
        width: 30vw;
    }

    /* --- TOP2 挨拶文 --- */

    .goaisatu {
        position: absolute;
        /* 浮かせます */
        top: 11rem;
        /* 上からの位置（調整可） */
        left: 50vw;
        /* 左からの位置（レスポンシブを考慮してvw） */
        width: fit-content;
        /* 画像に被る幅を指定 */
        z-index: 20;
        /* 画像より上に表示 */
        transform: translateX(-50%);
        pointer-events: none;
        text-align: center;
    }
}