@charset "utf-8";
/* 1536 , 1530 × 735 ,1366 *//* ←記画面幅でも崩れていないか確認 */

/* カテゴリリンクの飛び先位置の数値を適宜調整してください */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */


/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#wrap{background-color: #ffe24a;}
#sp_nav a{color: #591f19;}
#map, .info_txt_wrap{
    border-radius: 10px;
    overflow: hidden;
}
.border_color4, .hvr_border_color4:hover {
    border-color: var(--color1);
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.info_txt_wrap{margin-bottom: 0;padding-top: 0;padding-bottom: 50px;}
    .loader_icon {
        width: 131px;
        /* width: 250px; */
    }
}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img{height: auto;max-height: inherit;}
.triangle01,.catch{display: none;}
.mainwrap-r{
    position: absolute;
    border-radius: 30px;
    background-color: #ffe24a;
}

        /* =========================================
           ここから追加・変更したスタイル (ホバーメニュー用)
           ========================================= */

        /* ★変更: コンテナを左端・上端にぴったり配置して隙間を無くす */
        .hover-menu-container {
            position: absolute;
            top: 0; /* 20pxから0に変更 */
            left: 0; /* 20pxから0に変更 */
            z-index: 999; /* 最前面に配置 */
        }

        /* カタカタアニメーションの定義 */
        @keyframes katakata {
            0% { transform: rotate(0deg); }
            10% { transform: rotate(-15deg); }
            20% { transform: rotate(15deg); }
            30% { transform: rotate(-10deg); }
            40% { transform: rotate(10deg); }
            50% { transform: rotate(0deg); }
            100% { transform: rotate(0deg); }
        }

        /* Tシャツアイコンのスタイル */
        .tshirt-icon-btn {
            width: 60px;
            height: 60px;
            background-color: #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            cursor: pointer;
            position: absolute; /* ★変更: コンテナ内で絶対配置 */
            top: 20px; /* ★追加: 画面上部からの余白 */
            left: 20px; /* ★追加: 画面左部からの余白 */
            z-index: 1001; /* メニューより上に配置 */
            transition: transform 0.3s ease;
            animation: katakata 2.5s infinite; /* 追加: 2.5秒間隔でカタカタさせる */
            transform-origin: center center; /* 回転の軸を中央に設定 */
        }

        .tshirt-icon-btn svg {
            width: 35px;
            height: 35px;
            fill: #333; /* Tシャツの色 */
        }

        .tshirt-icon-btn:hover {
            transform: scale(1.05); /* 少し拡大 */
            animation: none; /* 追加: ホバー中はカタカタを止める */
        }

        /* 隠しメニュー (.mainwrap-r) のスタイル */
        .hover-menu-container .mainwrap-r {
            position: absolute;
            top: 0;
            left: 0; /* アイコンの左端を基準にする */
            width: 320px; /* メニューの幅 */
            max-width: 90vw; /* レスポンシブ: 画面幅を超えないようにする */
            padding-top: 80px; /* アイコンに被らないように上部余白を設定 */
            padding-bottom: 40px; /* 背景色が途切れないように下部にも余白を追加 */
            box-sizing: border-box; /* パディングを含めて高さを計算させる */
            
            /* 中の要素がはみ出して背景色が途切れるのを防ぐ設定 */
            height: auto !important; /* 中身に合わせて高さを自動調整 */
            min-height: 250px; /* 中身が少なくても最低限の背景を確保 */
            display: flow-root; /* 内部要素のフロートを解除し、親要素の高さを認識させる */
            
            box-shadow: 2px 2px 15px rgba(0,0,0,0.15); /* 影を右側に落とす */
            border-radius: 0 30px 30px 0; /* ★変更: 左端ピッタリに合わせるため左側の角丸を解除 */
            
            /* 初期状態は画面の左外に隠す */
            transform: translateX(-120%);
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* スムーズなスライド */
            z-index: 1000;
        }

        /* メニュー内の要素が絶対配置(absolute)になっていてはみ出すのを防ぐための強制スタイル */
        .hover-menu-container .mainwrap-r header,
        .hover-menu-container .mainwrap-r #header {
            height: auto !important;
            position: relative !important;
        }

        /* コンテナにホバーした時、またはメニュー内にマウスがある時に表示 */
        .hover-menu-container:hover .mainwrap-r {
            transform: translateX(0); /* 元の位置に戻す */
            opacity: 1;
            visibility: visible;
        }

        /* ヘッダー内の画像調整（★ロゴサイズの調整） */
        .mainwrap-r h1 {
            width: 100%;
            text-align: center; /* 追加: ロゴを中央揃えにする */
            box-sizing: border-box;
            margin: 0;
        }
        .mainwrap-r h1 img {
            width: 60%; /* ★変更: 画面幅(vw)ではなく、メニュー幅に対する割合(%)に変更 */
            max-width: 150px; /* ★変更: 最大サイズを小さく制限してでかくなりすぎるのを防ぐ */
            height: auto;
        }

        /* =========================================
           レスポンシブ対応 (スマホ向け調整)
           ========================================= */
        @media (max-width: 768px) {
            .catch {
                max-width: 120px; /* スマホではキャッチコピーを小さく */
                top: 15px;
                right: 15px;
            }
            .tshirt-icon-btn {
                width: 50px; /* アイコンを少し小さく */
                height: 50px;
                top: 15px; /* ★追加: 画面が狭いときはアイコン位置も調整 */
                left: 15px;
            }
            .tshirt-icon-btn svg {
                width: 28px;
                height: 28px;
            }
            .hover-menu-container .mainwrap-r {
                width: 220px; /* メニュー幅を少し狭く */
                padding-top: 70px;
            }
            .mainwrap-r h1 img {
                max-width: 130px; /* ★追加: タブレット・スマホではロゴの最大サイズをさらに少し抑える */
            }
            .head_tel a {
                font-size: 16px !important; /* 電話番号の文字サイズ調整 */
            }
        }

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
/* #main_img{margin-top: -7%;} */
.mainwrap-r h1{margin-top: -3%;}

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#attach{    background-attachment: inherit;}
.attach_bg{display: none;}
#attach_area{margin-top: -10vw;}
.attach_txt{display: none;}
#top_contents1 .con1_img,.con1_txt_wrap{z-index: 1;}
#top_contents1 .con1_img2 div,#top_contents1 .con1_img{
    background-size: contain;
    background-repeat: no-repeat;
}
#top_contents3 .con3_box1  img{height: 400px;
    object-fit: cover;}
/* .con3_img4{margin-top: -20%;} */
.nami{
    top: -6vw;
    left: 0;
    z-index: 0;
}
#top_contents3{padding-bottom: 8vw;}

#top_contents3 .con3_wrap2 img{
    height: 280px;
    object-fit: cover;
    width: auto;
    /* transform: rotate(-10deg); */
}
.con3_box2{
        display: flex;
    justify-content: center;
}
.con3_img4{margin-top: 0;}
#top_news{border-radius: 30px;}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#attach{height: 70vw;}
#top_contents1 .con1_img2{bottom: inherit;right: 30px;}
#top_contents1 .con1_img{padding-bottom: 30vh;width: 61.66667% !important;}
.con1_txt_wrap{padding-bottom: 0;}


}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#top_contents3 .con3_wrap2 img {
    height: 160px;
}
#top_contents3 .con3_box1  img{height: 280px;
    object-fit: cover;}
#top_contents1 .con1_img2{right: 70px;}
    #attach {
        height: 100vw;
    }

#top_cms .cms_box{padding-bottom: 50px;border-color: var(--color1);;}
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*カテゴリリンクの飛び先位置を調整する*/
/* --- PC --- */
:root {
--header-height: 90px;
}
/* --- スマートフォン --- */
@media screen and (max-width: 667px){
:root {
--header-height: 90px;
}
}

#tel_txt .title {
    color: var(--normal)!important;
}
#page_title + .bg_color3 {
    background-color: #ffe24a;
}
#page04{
/*     background-color: #fff;
padding: 5%; */
    
}

#cms_7-a .cate_box,#cms_7-a .cate_box .box_txt1{border-color: #591f19;}
.line_bnr {
    width: min(100%, 404px);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 7px;
    margin-bottom: 50px;
}
#page_title h2{font-weight: normal;}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #footer_info #map {
        height: 400px;
    }
    .under_page h1{
        transform: scale(90%);
    }
}