﻿/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');

@charset "utf-8";
/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#fakeloader:before{background-color: transparent;}
.f_contact_box p:first-of-type{opacity: 0;}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
  /* =========================================
     ハムスターのアニメーション（右下で塗る動き）
     ========================================= */
.hamster-painter {
    position: absolute;
    bottom: 22%;
    right: 19%;
    width: 19vw;
    max-width: 208px;
    height: auto;
    animation: paint-roll 1.0s infinite alternate ease-in-out;
    transform-origin: bottom right;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.15));
}

  /* ハムスターの具体的な動き（キーフレーム） */
  @keyframes paint-roll {
    0% {
      /* 手前に引いた状態（スタート） */
      transform: translate(0px, 0px) rotate(0deg);
    }
    100% {
      /* 壁に向かって（左斜め上へ）ローラーをグッと押し込む動き */
      /* 左へ15px、上へ10px移動し、体を少し（-4度）前傾させる */
      transform: translate(-15px, -10px) rotate(-4deg);
    }
  }


/* =========================================
     リスのアニメーション（左上で浮遊する動き）
     ========================================= */
  .squirrel-painter {
    position: absolute;
    top: 21%;
    left: 19%;
    width: 19vw;
    max-width: 280px;
    /* フワフワ浮くアニメーション（少しゆっくりめに設定） */
    animation: float-around 2.5s infinite alternate ease-in-out;
    
  }

  /* リスの具体的な動き（キーフレーム） */
  @keyframes float-around {
    0% {
      transform: translateY(0px) rotate(0deg);
    }
    100% {
      /* 上に少し浮き上がりながら、わずかに傾く */
      transform: translateY(-20px) rotate(5deg);
    }
  }


@media screen and (max-width: 1020px){
    #main_img{padding-top: 0;}
	.header-in{
		height: 94px;
		background: none;
		box-shadow: none;
		padding: 0px;
		justify-content: space-between;
	}
	.pc_nav{display: none;}
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.hamster-painter {
    position: absolute;
    bottom: 28%;
    right: 4%;
    width: 26vw;
    max-width: 208px;
    height: auto;
    animation: paint-roll 2.0s infinite alternate ease-in-out;
    transform-origin: bottom right;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.15));
}

.squirrel-painter {
    position: absolute;
    top: 27%;
    left: 8%;
    width: 32vw;
    max-width: 280px;
    animation: float-around 2.5s infinite alternate ease-in-out;
}

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.con1_squ {
    bottom: -10px;
    left: 0;
    display: none;
}
#con1{padding-bottom: clamp(100px, 26vw, 300px);}
#con2{padding-top: 0;}
#con2 .topimg2 img{border-radius: 55% 45% 35% 65% / 55% 35% 65% 45%;}
#con2 .topimg3 img{    border-radius: 30% 70% 60% 40% / 40% 40% 60% 60%;}
#con3 .con_box .img img{border-radius: 30% 70% 60% 40% / 40% 40% 60% 60%;}
#con3 .title,#con3 .title h3,#con3 .txt{color: #fff!important;}
#fix_bnr{
	bottom: 10px;
	right: 40px;
	z-index: 5;
	width: 20vw;
    max-width: 220px;
}
@media screen and (max-width: 667px){
	#fix_bnr{width: 250px;}
}
#con1::before,#con3::before,.footer::before,#con2::before {
    content: "";
    position: absolute;
    top: -0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: url(/Files/img/noisebg.jpg);
    opacity: 0.2;
    /* mix-blend-mode: overlay; */
    pointer-events: none;
}
#con2::before,#con3::before,.footer::before{mix-blend-mode: overlay;}
#con3 .title .en {
    font-size: 34px;
    font-weight: bold;
}
.dec01{
    max-width: 200px;
    width: 15vw;
    z-index: 3;
    position: absolute;
    top: -5%;
    left: 10%;
}
.tree01{
    max-width: 500px;
    width: 10%;
    height: auto;
    right: 0;
    top: -5%;
}
.tree02{
    max-width: 500px;
    width: 10%;
    height: auto;
    left: 0;
    bottom: -10%;
    z-index: 1;
}
.tree03{
    max-width: 500px;
    width: 10%;
    height: auto;
    right: 0;
    top: -5%;
}
.tree04{
    max-width: 500px;
    width: 10%;
    height: auto;
    left: 0;
    bottom: -5%;
}
.tree05{
    max-width: 500px;
    width: 10%;
    height: auto;
    right: 0;
    top: -20%;
}
.nami01{left: 0;
    top: 0;
    transform: translateY(-66%);}
.nami02{
        left: 0;
    bottom: 0;
    transform: translateY(63%);
    }
.nami03{
    left: 0;
    top: 0;
    transform: translateY(-73%);
    }
.all_contents{position: relative;}
.all_contents:before{
    content: "";
    position: absolute;
    width: 10%;
    aspect-ratio: 500 / 1988;
    background-image: url(/Files/img/tree02.png);
    background-size: contain;
    background-repeat: no-repeat;
    left: 0;
    top: -5%;
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#con3 .con_box .icon img {
        width: 80px;
    }
    .nami01 {
    left: 0;
    top: 0;
    transform: translateY(-93%);
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.logo1 {
    max-width: 90px;
}
.bg_left img{display: none;}
.bg_left{
    background-image: url(/Files/img/bg_left.png);
    background-size: contain;
    height: 100%;
}
#fix_bnr {
    bottom: 10px;
    right: 55px;
    width: 140px;
}
.dec01 {
    width: 30vw;
}
#con3 .title .en {
    font-size: 28px;
}

}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.line_bnr {
    width: min(100%, 404px);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 7px;
}
.pagetitle_img{
    opacity: 1;
    mix-blend-mode: inherit;
}

.BA_type1 .box_item, .BA_type1 .box_img1, .BA_type1 .box_img2 {position: relative;}
.BA_type1 .box_item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50.3%;
    transform: translate(-50%,-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 17px 0 17px 40px;
    border-color: transparent transparent transparent #ff9e03;
}
/* .BA_type1 .box_img1 {margin-right: 40px;} */
.BA_type1 .box_img2 {margin-left: 40px;}
/*.BA_type1 .box_img1::after, .BA_type1 .box_img2::after {
    position: absolute;
    height: 33px;
    width: 87px;
    background-color: #fff;
    color: #434343;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}
.BA_type1 .box_img1::after {content: "before";}
.BA_type1 .box_img2::after {content: "after";}*/

@media screen and (max-width: 667px){
.BA_type1 .box_img1 {margin-right: 5%;margin-bottom: 50px;}
.BA_type1 .box_img2 {margin-left: 5%;}
.BA_type1 .box_img1::after, .BA_type1 .box_img2::after {height: 30px;font-size: 15px;}
.BA_type1 .box_item::after {transform: translate(-50%,-60%) rotate( 90deg);border-width: 20px 0 20px 23px;}
}

#tel_txt .title {
    color: var(--color1)!important;
}

.pagetitle span{color: var(--normal);}
.cate_list li a:hover{
    background-color: #30791e;
    color: #fff;
}
.cate_list li a{
        overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
}



/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}


