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

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

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


/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.bg_colorWarm{
    background-color: #fffaf4;
} 



html,
body {
  overflow-x: hidden;
}


.font_14{
    font-size: 16px!important;
}

.font_12 {
    font-size:14px !important;
}

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

}

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

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img{
    position: relative;
      overflow: hidden;
}
.fv_content_sp{
    display: none;
}
.fv_mask {
    position: absolute;
width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
}


.fv_mask img {
    width: 100vw;
    height: 100%;
    position: absolute;
    right: 0;
    object-fit: cover;
    object-position: left;
    display: block;
}


.fv_content {
    position: absolute;
    z-index: 5;
    left: 7%;
    top: 36%;
    width: 638px;
}

.drop-5 {
    width: 250px;
    left: 4%;
    top: 34%;
    animation: floatDrop3 6.8s ease-in-out infinite;
    z-index: 5;
}

.drop-6 {
    width: 200px;
    left: 16%;
    top: 106%;
    z-index: 5;
}

.drop-7 {
    display: block;
    width: 20%;
    left: 74%;
    top: 106%;
    z-index: 5;
}

.nav_position{
    text-align: center;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    
    .fv_content {
        display: none;
    }
    
    .fv_mask{
        display: none;
    }
    
    .fv_content_sp {
        display: block;
        position: absolute;
        z-index: 4;
        left: 12%;
        top: 68%;
        width: 76%;
        transform: translateX(-0%);
    }
    
    .drop-5 {
        width: 24%;
display: none;
    }
    
    #main_img img.object_fit_img {
        max-height: 100vh;
        min-height: 85vh;
        position: relative;
        object-fit: cover;
        object-position: 90% 100%;
    }
    
    
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#main_img {
    max-height: 75vh!important;

}

    #main_img img.object_fit_img {
        max-height: 75vh!important;
        min-height: 59vh;
        position: relative;
        object-fit: cover;
    }

    .fv_content_sp {
        display: block;
        position: absolute;
        z-index: 4;
        left: 0;
        top: 50%;
        width: 100%;
    }
    
    #main_img img.object_fit_img {
    max-height: 100vh;
    min-height: 59vh;
    position: relative;
    object-fit: cover;
}

    .drop-5 {
        width: 30%;
        left: 1%;
        top: 48%;
        animation: floatDrop3 6.8s ease-in-out infinite;
        z-index: 5;
    }

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.hero {
  position: relative;
  overflow: hidden;
}

.drop {
  position: absolute;
  pointer-events: none;
  opacity: 0.45;
  will-change: transform, opacity;
}

.drop img {
  display: block;
  width: 100%;
  height: auto;
}

.drop-1 {
  width: 200px;
  left: 4%;
  top: 14%;
/*   animation: floatDrop1 6.5s ease-in-out infinite; */
}

.drop-2 {
    width: 236px;
    left: 48%;
    top: 24%;
    /* animation: floatDrop2 7.2s ease-in-out infinite; */
}

.drop-3 {
    width: 13%;
    left: 83%;
    top: 58%;
    /* animation: floatDrop3 6.8s ease-in-out infinite; */
    /* animation: floatDrop3 5.5s cubic-bezier(0.45, 0, 0.25, 1) infinite; */
}
/* 
@keyframes floatDrop1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.35;
  }
  50% {
    transform: translate(6px, -12px) scale(1.04);
    opacity: 0.55;
  }
}

@keyframes floatDrop2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.28;
  }
  50% {
    transform: translate(-4px, -10px) scale(1.03);
    opacity: 0.45;
  }
}

@keyframes floatDrop3 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.22;
  }
  50% {
    transform: translate(5px, -14px) scale(1.05);
    opacity: 0.42;
  }
}
 */

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
.drop-3 {
display: none;
}

.drop-2 {
       opacity: 0.2; 

}

.drop-1 {
       opacity: 0.2; 

}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.drop-1 {
    width: 200px;
    left: 56%;
    top: 5%;
    animation: floatDrop1 6.5s ease-in-out infinite;
}
}



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



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

}

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

}