:root{
    --font_lg:1.8rem;
    --font_md: 2rem;
}
/* スマホ */
@media screen and (max-width: 667px){
    :root{
        --font_lg:1.3rem;
        --font_md: 2rem;
    }
}

/*■■ top/zenntai ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#mail:target {
  scroll-margin-top: 150px; /* ヘッダーの高さより少し大きく設定 */
}

.pagetop{
    border: 2px solid #fff;
    z-index: 5;
}
.txt{text-align: justify;}
.title{
    font-weight: 600;
    font-size: var(--font_lg);
    line-height: 1.5;
    margin: 30px 0 30px;
}

#con1 .text{
    width: 80%;
    max-width: 650px;
    margin: 0 auto;
    text-align: left;
}


.f_contact_box h4{
    color: var(--color3);
    font-size: var(--font_md);
    font-weight: 500;
}


/* タブレット */
@media screen and (max-width: 768px){
    #con1{
        padding: 50px 0 80px;
    }
    #con2{
        padding: 80px 0 160px;
    }
    
    .pagetitle_img{
        background-position: 30% 70%;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .pagetitle_img{
        background-position: 30% 50%;
        background-size: cover;
    }
    .all_contents .content{
        padding: 10% 5%;
    }
}

/*■■ cms ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.cate_list li a{
    background-color: var(--color1);
    color: #fff;
}
.cate_list li a:hover{
    background-color: var(--color3);
}

#cms_2-c .box_item{
    background-color: var(--color4);
    border-radius: 20px;
    box-sizing: border-box;
    margin: 0 2%;
}
#cms_2-g .box_item_img{
    padding: 20px 2%;
}

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



/*■■ 波 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.wave{
    position:absolute;
    height:200px;
    width: 100%;
    bottom: 0;
    left: 0;
}
canvas{
position: absolute;
bottom: 0;
left:0;
width: 100%;
}

/*■■ main_img ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#main_img{
    
    background-color: var(--color5);
    height: 56vw;
    background: url(../img/main_img.png);
    background-size: cover;
    background-position: center bottom;
}
#main_img .catch{
    z-index: 1;
    top: 46%;
}
#main_img .main_deco1{
    width: 30%;
    top: 22%;
    left: 10%;
}
#main_img .main_deco2{
    width: 20%;
    top: 53%;
    left: 2%;
}
#main_img .main_deco3{
    width: 35%;
    right: 3%;
    top: 38%;
}



/* タブレット */
@media screen and (max-width: 768px){
    #main_img{height: 70vw;}
    #main_img .main_deco1{
        width: 29%;
        top: 26%;
        left: 5%;
    }
    #main_img .main_deco2{
        width: 26%;
        top: 63%;
        left: 0%;
    }
    #main_img .main_deco3{
        width: 37%;
        right: 0%;
        top: 50%;
    }
}

/* スマホ */
@media screen and (max-width: 667px){
    #main_img{height: 177vw;}
    #main_img .main_deco1{
        width: 35%;
        top: 12%;
        left: 36%;
    }
    #main_img .main_deco2{
        width: 40%;
        top: 63%;
        left: 2%;
    }
    #main_img .main_deco3{
        width: 50%;
        right: 3%;
        top: 65%;
    }
    
}
/*■■ TOPアニメーション ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


#main_img{
	/*transform: translate(-50%, -54%) scale(1.05);*/
	transform: scale(1.05);
    filter: blur(20px);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform,filter;
	opacity: 0;
}
#main_img.start{
    transform: scale(1);
    /*transform: translate(-50%, -50%) scale(1);*/
    opacity: 1;
    filter: blur(0px);
}




.main_deco1,.main_deco2,.main_deco3{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;/* アニメーションを反転して繰り返す */
}

.main_deco1{
    animation-name:fuwafuwa1;
    animation-duration: 1.5s; /* アニメーション時間 */
}

@keyframes fuwafuwa1{
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(3px);
  }
}

.main_deco2{
    animation-name:fuwafuwa2;
    animation-duration: 1.3s; /* アニメーション時間 */
}

@keyframes fuwafuwa2{
  0% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}

.main_deco3{
    animation-name:fuwafuwa3;
    animation-duration: 1.5s; /* アニメーション時間 */
}

@keyframes fuwafuwa3{
  0% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(-5px);
  }
}