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

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

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


/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

body{
    	font-family: "Noto Serif JP", serif;
    	 font-weight:300;
}

.font_2dw {
    font-size: calc(1rem)!important;
}

#tel_txt .title {
    color:  #252525!important;
}

a{
    color: #252525!important;
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

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

}



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

.Fv{
    display: block;
}
.Fv_sp{
    display: none;
}

#logo {
    width: 7%;
    height: 7%;
    top: 10%;
    left: 0;
    z-index: 998;
    
}

#main_img {
    position: absolute;
    top: 17%;
    left: 35%;
    z-index: 2;
}

.hero {
    position: absolute;
    top: 30%;
    right: 7%;
    width: 20%;
    z-index: 3;
}

#wrap {
    padding-right: 0px!important;
}

#header{
    padding-right: 80px!important;
}



@keyframes arrowFloat {
  0% {
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: translateY(8px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0.7;
  }
}

.Fv{
    position:relative;
}

.main_photo{
    width: 50%!important;
}

.sakura-leaves .right{
    display: none;
}

/* ---------------------------　leaf animation　-------------------------- */
.sakura-leaves {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 20;
}

.sakura-leaf {
  position: absolute;
  top: -12%;
  opacity: 0;
  animation-name: sakuraFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

.sakura-leaf img {
  width: 100%;
  display: block;
  filter: blur(0.2px);
}

@keyframes sakuraFall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.95);
    opacity: 0;
  }

  8% {
    opacity: 0.6;
  }

  /* 👉 25%：改这里 */
70% {
    opacity: 0.1;
}

100% {
  transform: translate3d(
    calc(var(--drift) * 0.6 + 15px),
    80vh,
    0
  ) rotate(120deg);
}
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
.sakura-leaves .right{
    display: block;
    transform: scaleX(-1);
}

    #logo {
        width: 17% !important;
    }
.Fv{
    display: none;
}
.Fv_sp{
    display: block;
}

.main_photo{
    width: 80%!important;
}

    #main_img {
        position: absolute;
        top: 47%;
        left: 11%;
        z-index: 2;
    }
    .hero {
        position: absolute;
        top: 59%;
        right: 5%;
        width: 30%;
        z-index: 3;
    }

    .catchCopy {
        position: absolute;
        width: 36%;
        left: 52%;
        top: 13%;
        transform: translateX(-50%);
        z-index: 2;
    }

    .overlay.open {
        width: 100%;
        height: 100%;
        padding-right: 0;
        padding-bottom: 20px;
        z-index: 1000;
    }
    
        .overlay {
        top: 0px!important;
            
        }
        #header{
            margin-top: 50px;
        }
        
        .button_container {
            position: absolute;
            top: -85%;
            }   

.scroll-indicator {

    left: 46.4%;
    bottom: 8%;
    width: 9%;

}
}
        /* --------------------------　スマホ　--------------------------*/
@media screen and (max-width: 667px){
    
        .catchCopy {
        position: absolute;
        width: 44%;
        left: 52%;
        top: 15%;
        transform: translateX(-50%);
        z-index: 2;
    }
    
    #main_img {
        position: absolute;
        top: 54%;
        left: 11%;
        z-index: 50;
    }
    .hero {
        position: absolute;
        top: 57%;
        right: 6%;
        width: 39%;
        z-index: 51;
    }
    
}



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

#footer::before {
    background: rgba(255, 255, 255, 0.8)!important;
}
.bg_transparent{
    background-color: rgba(11,68,34,0.5);
}

.bg-wave {
  background-image: url("/Files/img/background-attachment.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

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

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
  .bg-wave {
    background-attachment: scroll;
    background-size: contain;
  }
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*カテゴリリンクの飛び先位置を調整する*/
/* --- PC --- */
:root {
--header-height: 50px;
}

.txt_color_nomal .d_flex .pd_10px .border_so1-b .border_color2 .motion03s .hvr_opa07{
    border-color: #252525!important;
}
/* --- タブレット --- */
@media screen and (max-width: 768px){
:root {
--header-height: 100px;


}


    #header {
        margin-top: 42px;
    }
}
/* --- スマートフォン --- */
@media screen and (max-width: 667px){
:root {
--header-height: 100px;
}
}





/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    
.overlay .menu-box{
    width: 70%;
}    
    
#header-nav{
    display: none;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #logo {
        width: 25% !important;
    }
}