@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic&display=swap');

/* all page */
#page_title {
    position: relative;
    z-index: 0;
}

#header {
    padding-bottom:10px;
}

.font_14 {
    font-size: 16px!important;
}

#loader .logo {
    max-width: 400px;
}

/*fonts*/

.font_maru {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: bold;
}

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: var(--color1);text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
#google_privacy a{color: var(--color1);}
:root{
--color1: #83c6c1;
--color2: #f5f5f5;
--color3: #f8b03a;
	/*--color4: #f5f2e9;*/
	/*--font-jp: 'Noto Sans JP', "游ゴシック Medium", sans-serif;*/
}

.txt_color1, .hvr_txt_color1:hover{color: var(--color1);}
.txt_color2, .hvr_txt_color2:hover{color: var(--color2);}
.txt_color3, .hvr_txt_color3:hover{color: var(--color3);}
/*.txt_color4, .hvr_txt_color4:hover{color: var(--color4);}*/

/* background-color */
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1);}
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2);}
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3);}
/*.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4);}*/

/* border-color ※!important */
.border_color1, .hvr_border_color1:hover{border-color: var(--color1);}
.border_color2, .hvr_border_color2:hover{border-color: #a3a3a3;}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3);}
/*.border_color4, .hvr_border_color4:hover{border-color: var(--color4);}*/


#wrap {
    background-image: url('/Files/img/wrap_bg01.png')!important;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    overflow: hidden;
}

/* header */
header {
    position: relative;
    z-index: 2;
}

/* footer */



/* top ----------------------------------------------------------------*/

.top_item06 {
    width: 20vw;
    right: -12%;
    bottom: -53%;
}
.top_item07 {
    width: 17vw;
    left: 5%;
    bottom: -30%;
}

.top_item09 {
    width: 17vw;
    z-index: 2;
    left: 4%;
    top: -24%;
}

    .top_item10 {
        z-index: 5;
        width: 18vw;
        right: 0%;
        bottom: -47%;
    }

/* main img */
#main_img {
    background-image: url('/Files/img/bg01.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 40vw;
}

.FV_txt01 {
    width: 100%;
    left: 0;
    z-index: 1;
    top: -9%;
    bottom: 2%;
}

.Top_item01 {
    width: 19%;
    bottom: 0%;
    left: 9%;
}

.Top_item02 {
    width: 14%;
    right: 21%;
    bottom: 3%;
}

.Top_item03 {
    width: 13%;
    top: 1%;
    left: 13%;
}

.Top_item04 {
    width: 17%;
    top: 1%;
    right: 8%;
}

/* ふわふわアニメーション */
.fluffy {
    animation: fluffy 3s infinite;
}

@keyframes fluffy {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.fluffy02 {
    animation: fluffy02 5s infinite;
}

@keyframes fluffy02 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.fluffy03 {
    animation: fluffy03 4s infinite;
}

@keyframes fluffy03 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
}

/* main */

/* intro */


/* contents */

/* topcms */
.Top_page .v_type1 .triangle {
    margin-bottom: 50px!important;
}

/* under page ----------------------------------------------------------------*/
#page10 ul li {
    margin: 0 0px 100px;
}

/* #page10 ul .grid_3 {
    width: 30% !important;
} */
/* ---------- 1536px ---------- */
@media screen and (max-width: 1536px){}
/* ---------- 1366px ---------- */
@media screen and (max-width: 1366px){}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    #main_img {
        background-image: url('/Files/img/tb_bg02.png');
        height: 90vh;
    }
    
    .FV_txt01_TB {
        top: 28%;
        z-index: 1;
    }
    
    .Top_item01 {
        width: 40%;
        bottom: 3%;
        left: 8%;
    }
    
    .Top_item02 {
        width: 25%;
        right: 10%;
        bottom: 2%;
    }
    
    .Top_item03 {
        width: 27%;
        top: 9%;
        left: 13%;
    }
    
    .Top_item04 {
        width: 35%;
        top: 1%;
        right: 6%;
    }
    
    .top_item06 {
        width: 40vw;
        right: -1%;
        bottom: -39%;
    }
    
    .top_item07 {
        width: 40vw;
        left: -1%;
        bottom: -19%;
    }
    
    .top_item09 {
        width: 33vw;
        z-index: 2;
        left: 3%;
        top: -17%;
    }
    
    .top_item10 {
        width: 34vw;
        right: -3%;
        bottom: -22%;
    }
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    #main_img {
        height: 70vh;
    }
    
        .Top_item02 {
        width: 36%;
        right: 5%;
        bottom: -2%;
    }
    
        .Top_item03 {
        width: 32%;
        top: 6%;
        left: 12%;
    }
    
        .top_item06 {
        width: 44vw;
        right: -4%;
        bottom: -10%;
    }
    
    .top_item07 {
        width: 44vw;
        left: -4%;
        bottom: -8%;
    }
    
        .top_item09 {
        width: 33vw;
        z-index: 2;
        left: 3%;
        top: -3%;
    }
    
    .top_item10 {
        width: 34vw;
        right: -3%;
        bottom: -9%;
    }
    
    .grid_12_sp {
        box-sizing: border-box;
        width: 100% !important;
    }
    
}







/* フローカスタム */
.flow_type3 .cate{counter-reset: box;}
.flow_type3 .cate_box{counter-increment: box;}
.flow_type3 .box_item{padding-top: 60px;}
.flow_type3 .box_title1{z-index: 0}
.flow_type3 .box_title1::before, .flow_type3 .box_title1::after{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}
.flow_type3 .box_title1::before {
	content: "0"counter(box);
	font-size: 86px;
	color: #c5e3b2;
	left: 0;
	top: -70px;
	z-index: -1;
}
.flow_type3 .box_title1::after{
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #222
}

.custom_img01 {
    width: 40%;
}


/*-------- タブレット --------*/
@media screen and (max-width: 768px){
.custom_img01 {
    width: 60%;
}

}


/*-------- スマートフォン --------*/
@media screen and (max-width: 667px){
.flow_type3 .box_title1::before{
	left: auto;
	right: 0;
	top: -50px
}
.flow_type3 .box_item {
    padding-top: 36px;
}

.custom_img01 {
    width: 80%;
    margin: 20px auto 0 auto;
}

}

/* お客様の声カスタム */
.v_type1 .triangle {
    display: block;
/*     border: #000 solid 2px; */
    box-shadow: 5px 5px 0 0 #e2e2e2;
    border-radius: 20px;
}
.v_type1 .triangle:before {
    content: '';
    position: absolute;
    display: block;
    z-index: 1;
    border-style: solid;
    border-color: #FFF transparent;
    border-width: 13px 13px 0 0;
    bottom: -13px;
    left: 50%;
    margin-left: -9px;
}



/* .v_type1 .triangle:after {
    content: '';
    position: absolute;
    display: block;
    z-index: 0;
    border-style: solid;
    border-color: #000 transparent;
    border-width: 15px 15px 0 0;
    bottom: -17px;
    left: 50%;
    margin-left: -11px;
} */