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

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

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


/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.txt_color1{color: #62a956;}
.bottom_contact a{background-color: #79ad71;}

footer.bg_color1 {
    width: 95%;
    margin: auto;
    box-sizing: border-box;
}
[id^="page"]:not(#page_list):not(#page_title):not(#page_top), #top_cms1, #top_cms, #footer_info {
    max-width: 1280px;
    margin: 0 auto 150px;
}



/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
[id^="page"]:not(#page_list):not(#page_title), #top_cms1, #top_cms, #footer_info {
    max-width: 100%;
    margin: 0 auto 100px;
}
#top_cms1{
    margin: 0 auto 150px!important;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
[id^="page"]:not(#page_list):not(#page_title), #top_cms1, #top_cms, #footer_info {
    max-width: 100%;
    margin: 0 auto 50px;
}
}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img {
    width: 100%;
    overflow: hidden;
    padding-top: 0;
    margin-top: 91px;
    height: 100%;
    aspect-ratio: 5 / 2.4;
    min-height: 100%;
    background-image: none;
    background-color: #ECE8E5;
}
.fv_txt{
    width: min(42%, 800px);
    top: 46%;
    left: 5%;
    transform: translateY(-50%);
}
.fv_item1{
    width: min(23%, 380px);
    left: 0;
    top: 0;
}
.fv_item2{
    width: min(23%, 410px);
    right: 0;
    top: 0;
    z-index: 1;
}
.fv_item3{
    width: min(44%, 750px);
    top: 47%;
    left: 46%;
    transform: translateY(-50%);
}

/* 葉っぱ */
.leaf-left {
  transform: translateX(-50px); 
  opacity: 0;
}
.leaf-right {
  transform: translateX(50px);
  opacity: 0;
}
.fadein.start .leaf-left {
  animation: leafFadeInLeft 1.5s ease-out 0.3s forwards;
}
.fadein.start .leaf-right {
  animation: leafFadeInRight 1.5s ease-out 0.3s forwards;
}
@keyframes leafFadeInLeft {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes leafFadeInRight {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ゆげ */
.fuwa1 {
    animation: steamAnime 7s ease-in-out infinite;
    opacity: 0;
}
.fuwa2 {
    animation: steamAnime 7s ease-in-out 3.5s infinite;
    opacity: 0;
}
@keyframes steamAnime {
    0% {
        transform: translate(-50%,-50%) scale(0.8);
        opacity: 0;
    }
    20% {
        opacity: 0.4;
    }
    50% {
        /* 左右にゆらぎながら上昇 */
        transform: translate(-50%,-50%) scale(1.1);
        opacity: 0.8;
    }
    80% {
        opacity: 0.2;
    }
    100% {
        /* 最後は大きく広がりながら消える */
        transform: translate(-50%,-56%) scale(1.4) rotate(-2deg);
        opacity: 0;
    }
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#main_img{
    margin-top: 95px;
    aspect-ratio: 5 / 2.5;
}
.fv_txt {
    top: 48%;
    width: 49%;
    left: 2%;
}
.fv_item3{top: 49%;}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#main_img{
    margin-top: 71px;
    aspect-ratio: auto;
    height: 157vw !important;
}
.fv_txt {
    width: 86%;
    top: 1%;
    left: 49%;
    transform: translate(-50%, 0);
    z-index: 1;
}
.fv_item2 {
    width: 43%;
    right: -30px;
    z-index: 0;
}
.fv_item1 {
    width: 37%;
    z-index: 0;
}
.fv_item3 {
    width: 76%;
    top: 46%;
    left: 50%;
    transform: translateX(-50%);
}
}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.intro_title2,.con_title1 {
    line-height: 1.4;
}
.intro_title2, .cms_title h2, .top_cms1_title h3, #footer_info .info_txt .info_title1, .contact_txt  h3 {
    font-size: clamp(25px, 4vw, 37px);
}

#top_con{
    background-image: url(/files/img/item1.png), url(/files/img/item2.png);
    background-position: top 14% left -3%, top 10% right -3%;
    background-repeat: no-repeat;
    background-size: 17%, 15%;
    background-color: var(--color1);

    color: #fff;
    .txt_color3{
        color: #fff;
    }
}
#top_con .con_no {
    color: var(--color4);
}

.intro_img3 {
    width: 80% !important;
    margin: 100px auto 0;
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#top_con {
    background-image: url(/files/img/item1.png), url(/files/img/item2.png);
    background-position: top 14% left -11%, top 10% right -9%;
    background-repeat: repeat-y;
    background-size: 24%, 19%;
}
.intro_img3 {
    width: 100% !important;
}
}

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

}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#cms_5-f .cate_box .open_bt .box_title1::before, .cms_5-f .cate_box .open_bt .box_title1::before{display: none;}
#cms_5-f .cate_box .open_bt .box_title1, .cms_5-f .cate_box .open_bt .box_title1{margin-left: 47px;}
#cms_5-f .cate_box .arrow, .cms_5-f .cate_box .arrow {top: 42%;}

.page_title_wrap {
    color:#384136;
}

.line_bnr  {
    width: min(90%,389px);
    margin-bottom: 50px;
}

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

.contact_btn_wrap .icon {
    top: 32%!important;
}


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





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

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.line_bnr {
    width: 100%;
}
#page_title{
    margin-bottom: 30px;
}
#page_list{
    padding: 0;
}
}