/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.linkStyle{
	color:var(--color1);
}
.linkStyle:hover{
	color:var(--color1);
	opacity: 0.7;
	transition: all 0.5s;
}

header .head_box .link_box li {
    width: 13.33333% !important;
}
.fat-nav li {font-size: 18px;}
.spinner7 > div {background-color: var(--color1)!important;}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
header #logo {max-width: 130px;}

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
header #logo {max-width: 105px;}
.fat-nav li {font-size: 16px;}

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img::before, #contents3::before{
    content: "";
    background-image: url('/Files/img/topleft.png'),url('/Files/img/topright.png'),url('/Files/img/bottomleft.png'),url('/Files/img/bottomright.png');
    background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
    background-size: 20%,28%,22%,29%;
    background-position: top left,top right,bottom left,bottom right;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    mix-blend-mode: luminosity;
}
.main_catch{
    width: 40%;
    max-width: 400px;
    top: 50%;
    left: 3%;
    transform: translateY(-50%);
    z-index: 1;
    /* mix-blend-mode: color-burn; */
}

.main_loop{
    width: 100%;
    height: 40px;
    background-color: var(--color1);
    z-index: 1;
    bottom: 0;
    left: 0;
}
.main_loop::before {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	width: 100%;
	height: 40px;
	background-image: url("/Files/img/main_loop.png");
	background-size: 300px 100%;
	background-position-y: 0;
	background-position-x: 0;
	background-repeat: repeat-x;
	animation: loop 6s linear infinite;
}
@keyframes loop {
	0% {background-position-x: 0;}
	100% {background-position-x: -300px;}
}

/* ---------------------------　　-------------------------- */
@media screen and (max-width: 1440px){
.main_catch {max-width: 340px;}

}
/* ---------------------------　　-------------------------- */
@media screen and (max-width: 1280px){
.main_catch {max-width: 300px;}
.main_loop::before {
	background-size: 180px 100%;
}
@keyframes loop {
	0% {background-position-x: 0;}
	100% {background-position-x: -180px;}
}

}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#main_img::before {
    background-size: 28%, 35%, 28%, 35%;
}
.main_catch {max-width: 255px;}
.main_loop::before {
	background-size: 270px 100%;
}
@keyframes loop {
	0% {background-position-x: 0;}
	100% {background-position-x: -270px;}
}

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#main_img::before {
    background-size: 31%, 38%, 31%, 38%;
}
.main_loop{
    height: 25px;
}
.main_loop::before {
	height: 25px;
}
.main_catch_sp{
    width: 90%;
    bottom: 1%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.main_loop::before {
	background-size: 200px 100%;
}
@keyframes loop {
	0% {background-position-x: 0;}
	100% {background-position-x: -200px;}
}

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#contents3 > .d_flex {
    z-index: 1;
    position: relative;
}

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

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#contents1 {padding: 50px 10%;}
#attach {height: 250px;}
#contents2 {padding: 50px 10% 150px;}
#contents3::before{
    background-size: 45%,60%,47%,49%;
}

}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#tel_txt .title {
    color: var(--color3)!important;
}

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

}

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

}