@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
/*
#loading{
    display:none;
}
*/

@charset "utf-8";
/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.tel_bt a,
#page_title p,
.l-gh__scrollnav-scroll-text,
.l-gh__scrollnav-pagetop-text,
#top_cms .cms_title_inner .font_4dw,
#top_cms .more a{
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
#logo,.overlay,.overlay.open{
    background-color: #f7f7d4;
}
/* ヘッダーと固定メニューの初期状態を「表示」に変更 */
#header, 
#fix_menu {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    top: 0 !important; /* もし初期値がマイナスなら0にする */
    transition: none !important; /* アニメーション自体を無効化 */
}

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

}

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

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


#main_img::before{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.15);
    top:0;
    left:0;
    z-index:2;
pointer-events:none;
    
}
.catchcopy {
    top: 20%;
    left: 7%;
    /* transform: translateY(-50%); */
    width: 33vw;
    max-width: 1000px;
    height: auto;
    z-index: 3;
    pointer-events: none;
}

/*
サイズ幅対応
・1370px
・1280px
・1080px
*/
@media screen and (max-width: 1280px){
.catchcopy{
    top:25%;
}    
}
@media screen and (max-width: 1080px){
    
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#fix_menu{
    background-color: #f7f7d4;
}
.catchcopy{
    left: 2%;
    width: 52vw;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
/* スマホ時の高さ調整 */

    /* 1. コンテナ全体の高さを確保 */
    #main_img, 
    #main_img .swiper-container,
    #main_img .swiper-slide,
    #main_img .box_img img{
        height: 60vh !important; /* 画面の高さの60%分を表示。お好みで70vhなどに調整してください */
        min-height: 400px!important;      /* 最低でも400pxは維持する設定 */
    }

    /* 2. 画像の切り抜き（アスペクト比）の調整 */
    #main_img .box_img img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 横長画像を縦長スライダーに合わせるため、中央でトリミングします */
        object-position: center; /* 切り抜きの中心を合わせる */
    }

    /* 3. キャッチコピー画像の位置微調整（必要に応じて） */
    #main_img .catchcopy {
        width: 73%; /* 横幅を調整 */
        top: 30%;
        left: 30;
    }

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.item2{
    margin-bottom:-1px;
}

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

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#top_contact_box .top .box{
    height: 180px;
}
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#page_title{
    color:var(--color1);
}
#page_title h2{
    font-size:30px;
}

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

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#page_title h2 {
    font-size: 24px;
}
#page_title p{
    font-size: calc(1rem - 2px);
}
.contact_btn a{
    font-size: 18px!important;
}
.contact_btn_wrap .icon{
    width:1.5rem!important;
}


}