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

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

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Zen+Maru+Gothic&display=swap');


.comfortaa-<uniquifier>,
nav li a span{
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/*
#loader{
    display:none;
}
*/
@charset "utf-8";
/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.font_14 {
    font-size: 17px;
}
header{
    margin-bottom:50px!important;
}
header nav ul li a,
.sc_menu ul li a{
    border-left:0!important;
    border-right:0!important;
}
#header{
    max-width: unset!important;
    padding-bottom:20px;
}
header nav{
    position:relative;
}
header nav:before{
    content:'';
    position:absolute;
    width:100%;
    height:27px;
    background:url(/Files/img/item1.png) repeat-x;
    bottom:-27px;
    left:0;
}
header nav ul{
    padding-bottom:0!important;
}
header .tel{
    padding: 15px 30px;
    background-color: #fff;
    border: 2px solid var(--color3);
    border-radius: 50px;
    transition: 0.3s;
}
header .tel:hover{
    opacity:0.5;
}
header .tel a{
    font-size:1.5rem;
}
header nav ul li a .txt_color3{
    opacity:1;
}
#contact_bar .mail a i{
    margin-right:5px;
}



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

}

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




}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*--背景の装飾--*/
#wrap.index {
    position: relative;
    overflow: hidden;

    background-image:
        url('/Files/img/bg1.png'),
        url('/Files/img/bg2.png');
    background-repeat:
        no-repeat,
        no-repeat;

    /* 位置を少し内側＆下げる */
    background-position: left 9% top 4%, right 12% top 3%;

    /* 見た目に近いサイズ感 */
    background-size:
        260px auto,
        320px auto;
}

/* FV基準 */
#main_img {
    position: relative;
    overflow: visible;
}
/* 左下：bg3 */
#main_img::before {
    content: "";
    position: absolute;
    left: -12%;
    bottom: -10%;
    width: 45%;
    aspect-ratio: 1 / 1;
    background: url('/Files/img/bg3.png') no-repeat left bottom;
    background-size: contain;
    z-index: 0;

    /* 暴れ防止 */
    max-width: 520px;
    min-width: 280px;
}

/* 右下：bg4 */
#main_img::after {
    content: "";
    position: absolute;
    right: -10%;
    bottom: -12%;
    width: 32%;
    aspect-ratio: 1 / 1;
    background: url('/Files/img/bg4.png') no-repeat right bottom;
    background-size: contain;
    z-index: 0;

    max-width: 360px;
    min-width: 180px;
}

/* キャッチコピー */
.main-catchcopy {
    position: absolute;
    left: -2%;
    bottom: 5%;
    z-index: 10;
    max-width: 620px;
}

/* 画像そのもの */
.main-catchcopy img {
    width: 100%;
    height: auto;
    display: block;
}

/* 写真になじませる（完成イメージっぽさ） */
.main-catchcopy {
    filter: drop-shadow(0 6px 6px rgba(0,0,0,0.05));
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    #wrap.index {
        background-position:
            left -30px top 80px,
            right -40px top 100px;

        background-size:
            180px auto,
            220px auto;
    }
    .main-catchcopy {
        left: 10px;
        bottom: -55px;
        max-width: 450px;
    }
     #main_img::before {
        left: -80px;
        bottom: -60px;
        width: 360px;
        height: 360px;
    }

    #main_img::after {
        right: -60px;
        bottom: -80px;
        width: 220px;
        height: 220px;
    }
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#wrap.index {
        background-position: left -22px top 100px, right -21px top 100px;
        background-size: 120px auto, 100px auto;
    }
.main-catchcopy {
        left: -4px;
        bottom: -140px;
        max-width: 450px;
}
 #main_img::before,#main_img::after{
     display:none;
 }
}


/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img .slick-nav{
    display:none;
}
#intro {
    position: relative;
    background-color: var(--color3);
    background-image: url(/Files/img/item8.png);
    background-repeat: no-repeat;
    background-position: center bottom 20px;
    background-size: 350px auto;
    padding: 80px 0 250px;
}
#intro::before {
    content: "";
    position: absolute;
    left: 0%;
    bottom: -10%;
    width: 20%;
    aspect-ratio: 1 / 1;
    background: url(/Files/img/bg3.png) no-repeat left bottom;
    background-size: contain;
    z-index: 0;
    max-width: 280px;
    min-width: 180px;
}

/* 右下：bg4 */
#intro::after {
    content: "";
    position: absolute;
    right: 0%;
    bottom: -12%;
    width: 25%;
    aspect-ratio: 1 / 1;
    background: url(/Files/img/bg4.png) no-repeat right bottom;
    background-size: contain;
    z-index: 0;
    max-width: 260px;
    min-width: 180px;
}

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

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#intro{
    background-image: url(/Files/img/item8.png);
    background-size: 280px auto;
    padding: 80px 0 200px;
}
#intro::before,#intro::after{
    display:none;
}
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.u_page main{
    margin-top: -50px;
}
#page_title.active p{
    padding-bottom: 11px;
}
#page10 ul li a .sub_title{
    padding-bottom: 6px;
}

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

}

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

}