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

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

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


/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.loader_icon {
    top: 50%;
    width: 140px;
}

#header_sns {
    width: 100%;
}

#con_nav li h2 {
    font-weight: bold;
}
/* ----------------------------------
   ① 親要素（フッターなど）の設定
---------------------------------- */
footer { /* ←追加先の親要素のクラス名に変更してください */
  position: relative;
  /* 必須級：泡が下にはみ出た際に発生する無駄なスクロール余白を消しつつ、上へのみ無限に飛ばします */
  clip-path: inset(-4000px 0 0 0); 
}

/* ----------------------------------
   ② 泡のアニメーションとデザイン
---------------------------------- */
.bubbles-container {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 50; 
  pointer-events: none;
}

/* 泡の基本スタイルとリアルな透明感 */
.bubble {
  position: absolute;
  bottom: -100px;
  background-color: rgba(255, 255, 255, 0.1); 
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5); 
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.03), 
    inset 0 -5px 15px rgba(255, 255, 255, 0.2), 
    inset 0 4px 12px rgba(255, 255, 255, 0.7); 
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: auto; /* マウスイベントを受け付け可能にする */
  cursor: pointer;
}

/* 個別の泡のサイズ・位置・アニメーション速度 */
.bubble:nth-child(1) { width: 60px; height: 60px; left: 10%; animation: riseUp 25s infinite linear 0s, wobble 4s infinite ease-in-out 0s; }
.bubble:nth-child(2) { width: 120px; height: 120px; left: 25%; animation: riseUp 32s infinite linear 2s, wobble 5s infinite ease-in-out 1s; }
.bubble:nth-child(3) { width: 50px; height: 50px; left: 40%; animation: riseUp 22s infinite linear 5s, wobble 3.5s infinite ease-in-out 0.5s; }
.bubble:nth-child(4) { width: 150px; height: 150px; left: 55%; animation: riseUp 38s infinite linear 1s, wobble 6s infinite ease-in-out 2s; }
.bubble:nth-child(5) { width: 45px; height: 45px; left: 70%; animation: riseUp 20s infinite linear 8s, wobble 3s infinite ease-in-out 1.5s; }
.bubble:nth-child(6) { width: 80px; height: 80px; left: 85%; animation: riseUp 28s infinite linear 3s, wobble 4.5s infinite ease-in-out 0s; }
.bubble:nth-child(7) { width: 70px; height: 70px; left: 90%; animation: riseUp 26s infinite linear 9s, wobble 5.5s infinite ease-in-out 1s; }
.bubble:nth-child(8) { width: 95px; height: 95px; left: 5%; animation: riseUp 35s infinite linear 4s, wobble 4s infinite ease-in-out 2.5s; }

/* 上昇アニメーション */
@keyframes riseUp {
  0% { bottom: -150px; opacity: 0; }
  5% { opacity: 1; }
  90% { opacity: 1; }
  100% { bottom: 4000px; opacity: 0; } /* サイトの縦幅に応じて数値を適宜増やして下さい */
}

/* 左右のふわふわ揺れアニメーション */
@keyframes wobble {
  0%, 100% { transform: translateX(-30px); }
  50% { transform: translateX(30px); }
}


/* ----------------------------------
   ③ クリックで弾けるエフェクト群
---------------------------------- */
/* メインの割れるエフェクト（拡大する輪） */
.pop-effect {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.8);
  animation: burst 0.2s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
  z-index: 9999;
}

@keyframes burst {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; border-width: 2px; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; border-width: 8px; }
}

/* 飛沫（飛び散る水滴）のエフェクト */
.particle {
  position: fixed;
  pointer-events: none;
  width: 10px;
  height: 10px;
  background-color: #FFFFFF;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: splash 0.3s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
  z-index: 10000;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
}

@keyframes splash {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
}

footer {
    background-image: url(/Files/img/bubble.png);
    background-repeat: no-repeat;
    background-size: 2000px;
    background-position: bottom;
}

#footer_info_logo {
    padding: 60px;
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    .mainwrap-r h1 {
        width: 80px;
    }


}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    .loader_icon {
        width: 101px;
    }
    
    .mainwrap-r h1 {
        width: 70px;
        padding-top: 5px;
        padding-left: 5px;
    }
    
    footer {
        background-size: 810px;
    }

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
main {
	min-width: 1280px;
}

.main_bg {
    background-image: url('/Files/img/main_img.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 2200px;
}


.tri-hotel {
    width: 29%;
    min-width: 200px;
    left: 6%;
    top: 9%;
}

.trimming {
        width: 18vw;
    min-width: 190px;
    left: 13%;
    bottom: -8%;
    transform: translateY(-50%);
}
.pethotel {
        width: 18vw;
    min-width: 190px;
    left: 13%;
    bottom: -8%;
    transform: translateY(-50%);
}

.main_copy {
    height: 20vw;
    min-height: 360px;
    top: 9%;
    right: 7%;
}

.main_copy img {
    height: 100%;
    width: auto;
}

#mainwrap h1 {
    padding-right: 47px;
}

#mainwrap ul {
    margin-right: 13px;
}

#mainwrap .head_tel {
    padding: 15px 10px;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    main {
    	min-width: auto;
    }
    
    .main_bg {
        background-size: 1950px;
    }
    
    
    
    .tri-hotel {
        width: 32%;
        min-width: 200px;
        left: 7%;
        top: 6%;
        transform: rotate(6deg);
    }
    
    .main_copy {
        height: 40vw;
        min-height: 260px;
        top: 8%;
        right: 9%;
    }

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    .main_bg {
        background-position: center bottom -45px;
        background-size: 1150px;
    }
    
    .pethotel {
        width: 28vw;
        min-width: 100px;
        left: 7%;
        bottom: auto;
        top: 49%;
        transform: translateY(-50%) rotate(-7deg);
    }
    
    .trimming {
        width: 28vw;
        min-width: 100px;
        left: 9%;
        top: 48%;
        transform: translateY(-50%) rotate(8deg);
    }
    
    .main_copy {
        height: 51vw;
        min-height: 170px;
        top: 7%;
        right: 8%;
    }

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#top_contents1 h3 {
    font-size: min(1.8vw, 32px);
    color: var(--color2);
}

#top_contents3 h3 {
    font-size: min(1.8vw, 28px);
    color: var(--color2);
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    #top_news {
        margin-top: auto;
        padding-top: 25px;
    }
    
    #top_contents1 h3 {
        font-size: min(4vw, 32px);
    }
    
    #top_contents1 .con1_img2 {
        bottom: -92px;
    }
    
    #top_contents3 h3 {
        font-size: min(4vw, 28px);
    }
    
    .con3_img4 {
        margin-top: -11%;
    }

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #top_news {
        padding-top: 65px;
    }
    
    #attach {
        height: 320px;
    }
    
    #top_contents1 h3 {
        font-size: min(8vw, 28px);
    }
    
    #top_contents1 .con1_img2 {
        bottom: -42px;
    }
    
    #top_contents3 h3 {
        font-size: min(6vw, 24px);
    }
    
    #top_contents1 .con1_img2 div {
        min-width: 177px;
    }


}



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

#page_title .title_img {
    background-position: left top -140px;
    background-repeat: no-repeat;
}

#page03 {
    padding-right: 40px;
    padding-left: 40px;
}


#cms_2-g .cate_img1.rectangle_img, #cms_2-g .cate_img1.rectangle_img img {
    aspect-ratio: 2.0 !important;
}

#tel_txt .title {
    color: var(--color2)!important;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    #page02, #page03,#page05,#page06, #page07, #page09 {
        padding-right: 40px;
        padding-left: 40px;
    }
    
    #page_title .title_img {
        background-position: left -180px top -20px;
        background-size: 990px;
    }

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #page02, #page03,#page05,#page06, #page07, #page09 {
        padding-right: 30px;
        padding-left: 30px;
    }
    
    #page_title .title_img {
        background-size: 790px;
        background-position: center top 0px;
    }
    
    .under_page .bg_color3 h1 {
        width: 100%;
        max-width: 150px;
    }

}