/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */

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

@import url('https://fonts.googleapis.com/css2?family=WindSong:wght@400;500&display=swap');

@charset "utf-8";

/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#wrap{
position: relative;
overflow: hidden;
border-radius: 16px;
/*background: radial-gradient(1200px 600px at 20% 20%, #141a2b 0%, #0b0f1a 55%, #070a12 100%);*/
background:#f8f6f5;
isolation: isolate; /* keeps blend inside #wrap */
box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
#header_logo{max-width: 150px;min-width: 80px;}

/* ===== Light overlay layer (blend) ===== */
#wrap .c-blend-item{
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;


mix-blend-mode: screen;
/*opacity: 1;*/
transition: opacity 300ms ease;
transform: translate3d(0,0,0);
}


#wrap .c-blend-video{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: translateZ(0);
filter: saturate(1.05) contrast(1.05);
}

/* ローディング中は非表示 */
.c-blend-item-01{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 読み込み完了したら表示 */
.c-blend-item-01.is-loaded{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .4s ease;
}


footer{position: relative;}
footer:after {
    content: " ";
    position: absolute;
    display: inline-block;
    width: 400px;
    height: 300px;
    max-width: 18%;
    background: url(/Files/img/dec01.png) no-repeat;
    background-size: contain;
    background-position: bottom;
    right: -2%;
    bottom: 0;
    z-index: 0;
    opacity: 0.6;
    transform: rotate(-15deg);
}
.footer_item{
        position: relative;
    z-index: 1;
}




#footer_info .info_txt .info_title1 {
    background-image: none;
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

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

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*#main_img .catch{bottom: auto;!important}
*/#main_img{
    display: flex;
    align-items: center;
        background-image: url(/Files/img/bg_img.png);
    background-size: cover;
}
#main_img .decoration-flower0 {
    position: absolute;
    left: -50px;
    bottom: -120px;
    width: 23%;
    max-width: 350px;
    /*min-width: 250px;*/
    z-index: 0;
    pointer-events: none;
    opacity: 1;
}
#main_img .catch {
    padding: 0 15%;
    
}


.swiper-container{
        margin: 0px 10% 0px auto!important;
        z-index: 0!important;
}
.catch img{
    max-width: 680px;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#main_img .catch{
        bottom: calc(150px + 3vw);
        left: -50px;
}
}

/* --------------------------　スマホ　-------------------------- */
.decoration-flower {
    min-width: 200px;
}
@media screen and (max-width: 667px){
    
#main_img .decoration-flower0 {
    left: 0;
    bottom: 0;
}    
    
.decoration-flower2 {
    position: absolute;
    left: -50px;
    top: -11%;
    width: 45%;
    max-width: 450px;
    /*min-width: 191px;*/
    pointer-events: none;
    opacity: 1;
}
.swiper-container{
    height: 350px;
    margin: 80px 10% 0px auto !important;
    
}
#main_img .catch{
        transform: translateX(-50%);
    left: 50%;
}
#main_img .catch.active {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
    transform: translateX(-50%) scale(1);
    left: 50%;
    top: 17%;
    bottom: inherit;
    width: 77% !important;
    padding: 0;
}

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.intro_title2,#top_con .con_title1{
        line-height: 1.2;
}
.modal_box{
    z-index: 10;
}
/*intro*/
.intro_img1 img,.intro_img2 img{
    height: 300px;
    object-fit: cover;
}
.intro_img3{
        z-index: -1;
    position: relative;
}

.intro_img3 img{
    height: 500px;
    object-fit: cover;
}



#top_intro .intro_title1{
    font-size: clamp(24px, 2vw, 30px);
}
#top_cms1 .top_cms1_title,.cms_title h2 {
    font-family: "WindSong", cursive;
    font-weight: 400;
    font-style: normal;
}
#top_cms1 .top_cms1_title ::first-letter { text-transform: uppercase; }
/* --- 1. 装飾イラスト（あしらい）の設定 --- */
.decoration-flower {
    position: absolute; /* 自由に配置 */
        right: -50px; /* 画面端から少しはみ出させる */
    top: 15%;     /* 上からの位置 */
        width: 30%;         /* 親要素に対して45%の幅（画面が縮めば一緒に縮む） */
    max-width: 450px;   /* PCで巨大になりすぎるのを防ぐ */
   /* min-width: 250px;*/   /* スマホでも小さくなりすぎるのを防ぐ */
    z-index: -1;         /* 一番後ろ（またはテキストと写真の間） */
    pointer-events: none; /* クリックを邪魔しない */
    opacity: 1;       /* 主張しすぎないように薄くする */
}

.decoration-flower2 {
    position: absolute;
    left: -50px;
    top: -23%;
    width: 25%;
    max-width: 450px;
   /* min-width: 250px;*/
    pointer-events: none;
    opacity: 1;
}
.decoration-flower3 {
position: absolute;
    right: -50px;
    bottom: 0;
    width: 25%;
    max-width: 450px;
    /*min-width: 250px;*/
    pointer-events: none;
    opacity: 1;
}


/*ホバーの光*/
/* 画像枠（#top_con .con_img）にシマーを載せる */
#top_con .con_img,.info_contact{
  position: relative;
  overflow: hidden;
}

/* シマー本体（帯が流れる） */
#top_con .con_img::before,.info_contact::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  z-index: 20;

  /* 太め＆ふんわり（なだらかに光る帯） */
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.00) 38%,
    rgba(255,255,255,0.10) 45%,
    rgba(255,255,255,0.28) 52%,
    rgba(255,255,255,0.10) 59%,
    rgba(255,255,255,0.00) 66%,
    transparent 74%
  );

  transform: translateX(-130%);
  opacity: 1;
  filter: blur(10px) brightness(1.05);
}




#top_con .con_img:hover::before,.info_contact:hover::before{
  animation: conimgShimmerOnce 1850ms linear forwards
}


@keyframes conimgShimmer{
  to { transform: translateX(120%); }
}

/* 1回だけ用 */
@keyframes conimgShimmerOnce{
  to { transform: translateX(120%); }
}

/* motionを減らす設定 */
@media (prefers-reduced-motion: reduce){
  #top_con .con_img:hover::before{ animation:none; }
}


/*top_con*/
#top_con .con_title1{
    font-size: clamp(24px, 1.8vw, 30px);
}




/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
.intro_img3 img {
    height: 300px;
    object-fit: cover;
}
}

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

}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.contact_btn span {
    padding: 1em 2em 1em 2em;
}
.page_title_wrap{
    position: relative;
  /*  z-index: 1;*/
}
#tel_txt .title {
    color: var(--color1)!important;
}


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

}

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

}