﻿
/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.linkStyle{
	color:var(--color1);
	border-bottom: 1px solid;
}
.linkStyle:hover{
	color:var(--color1);
	opacity: 0.7;
	transition: all 0.5s;
}
#header h1 {background: none;}
#header h1 span {
    border: none;
    padding: 0;
}
#header h1.active img {
    max-width: 120px;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#header h1 img{max-width: 150px;}
#header h1.active img {max-width: 80px;}

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#header h1 img{max-width: 120px;}
#header h1.active img {max-width: 60px;}

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img .catch1 {
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    mix-blend-mode: overlay;
}
#main_img .catch2 {
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 63%;
    mix-blend-mode: overlay;
}
#video{height: 100%;}
#main_img{max-height: inherit}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
header.top_header,#main_img {height: 500px!important;}
#main_img #slide_wrap .down{display: none}
#video video{
    height: 500px !important;
    width: auto !important;
}

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
header.top_header,#main_img {height: 42vh!important;}
#header h1.active{top: 0px;left: 0px;}
#main_img .catch1 {
    width: 60%;
}
#video video{
    height: 42vh !important;
    transform: translateX(-12%);
}

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#contents1 {
    background-image: url('/Files/img/con1_bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#contents1::before, #contents1::after {
    content: "";
    background-repeat: no-repeat;
    background-size: 100%;
    width: 90%;
    height: 100%;
    position: absolute;
}
#contents1::before {
    background-image: url('/Files/img/con1_bg2.png');
    background-position: top left;
    top: 0;
    left: 0;
}
#contents1::after {
    background-image: url('/Files/img/con1_bg3.png');
    background-position: bottom right;
    bottom: 0;
    right: 0;
}
#contents1 > div {
    position: relative;
    z-index: 1;
}
#contents1 figure img {
    box-shadow: var(--color3) 50px 50px 0px;
}
#contents1 .text .txt_vertical {
    padding: 3% 5% 2%;
    background-color: rgba(255, 255, 255, 0.7);
}
/* #contents3::after {
    content: "";
    width: 100%;
    height: 40%;
    background-color: var(--color1);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-image: url(../img/design_bg1.png);
    background-position: center top;
    background-size: 10% auto;
    opacity: 0.8;
} */
#contents3::before {
    content: "";
    background-image: url(/Files/img/con2_bg2.png), url(/Files/img/con2_bg1.png);
    background-repeat: no-repeat, no-repeat;
    background-position: top left, bottom right;
    background-size: 60%, 80%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.9;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

#contents1 .text .txt_vertical {
    padding: 3% 5%;
}

}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.contact_btn span {padding: 1em 1em 1em 2em !important;}
.contact_btn_wrap .icon {left: 1em !important;}

}


