@charset "UTF-8";



header .logo { opacity: 0;}

/*#content_Wrap { background-image: radial-gradient(circle, #0f3356, #0b2c4e, #0e3258, #051f3e, #021936);}*/
#content_Wrap { background-image: linear-gradient(to top, #000000, #111111, #000000);}
#content_Wrap img { width: 100%;}
#content_Wrap .bg_Wht { background-color: inherit;}

#main_img {
position: relative;
width: 100%;
height: 0;
padding-top: 55%;
background: url(../img/main.jpg) no-repeat center top;
background-size: cover;
}
#main_img h2 {
position: absolute;
top: 20%;
left: 5%;
color: #fff;
font-size: 17vw;
font-family: 'Teko', sans-serif;
z-index: 1;
}
#main_img .main_ttl {
position: absolute;
bottom: 10%;
left: 5%;
color: #fff;
text-align: left;
z-index: 1;
}
#main_img .main_ttl h3 {
padding: 0 0 20px;
font-size: 3vw;
letter-spacing: 0.1em;
line-height: 1.2;
}
#main_img .main_ttl h3 span { font-size: 7vw;}
#main_img .main_ttl h3 span.num {
font-size: 8.6vw;
vertical-align: sub;
}
#main_img .main_ttl p {
font-size: 3vw;
letter-spacing: 0.1em;
}

#main_img .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
padding-top: 55%;
}
#main_img .bg video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}


/* .slider_Area {
  padding:100px 0;
} */

.gallery {
    padding-top: 50px;
    margin-bottom: 50px;
}
/* スライド設定 */
/*loop*/
.loop_wrap li a {
    /*pointer-events: none;*/
    /*display: block;*/
}
.loop_wrap li {
    width: auto;
    height: 300px;
    cursor: pointer;
}
.loop_wrap li img {
    max-height: 100%;
    max-width: 100%;
    opacity: .5;
}
.rela {
    position: relative;
}

.modal{
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
}
.modal__bg{
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
    z-index: 9;
}
.modal__content{
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%,-50%);
  max-width: 1200px;
    width: 50%;
    z-index: 9;
}
.batsu {
  color:#FFF;
  position: absolute;
  right: -30px;
  top: 0px;
  font-size: 25px;
  font-weight: bold;
  pointer-events: none;
}



/* スライド設定 */
/* #slider_wrap{
  width: 94%;
  max-width: 1200px;
  margin: 0 auto 30px ;
}
.box01{
  margin: 0 auto 30px;
}

.slide-item .imgHead {
position: absolute;
top: 30px;
left: 0;
width: 100%;
color: #fff;
font-size: 22px;
letter-spacing: 0.1em;
padding-left: 30px;
filter: drop-shadow(0 0 5px rgba(0,0,0,.7));
}
.slide-item .imgHead.txt_black {
color: #333;
filter: drop-shadow(0 0 5px rgba(255,255,255,1.0));
}


#thumbnail-list {
  display: flex;
  justify-content: space-between;
  width: 70%;
  margin: 0 auto;
}
.thumbnail-item {
flex: 0 1 23%;
margin: 0 1% 10px;

box-sizing: border-box;
position: relative;
}
.thumbnail-item:first-of-type { margin: 0 0.3% 10px 0; }
.thumbnail-item:last-of-type { margin: 0 0 10px 0.3%; }
.thumbnail-item:after {
content: "";
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
transition: 0.3s opacity linear;
}
.thumbnail-item.thumbnail-current:after { opacity: 0;}
.thumbnail-item img {
width: 100%;
margin: 0 auto;
} */


.intro {
width: 94%;
max-width: 1200px;
margin: 100px auto 120px;
}
.intro .facade {
    width: 100%;
    margin: 0 auto 80px;
}
.intro .facade h3{
color: #fff;
text-align: center;
    font-size: 30px;
    line-height: 1.6;
    letter-spacing: 2px;
    padding-bottom: 1em;
}
.intro .facade p{
    color: #fff;
    text-align: center;
    font-size: 16px;
    line-height: 2.4;
    letter-spacing: 2px;
    margin: 0 0 100px;
}
.cap_txt{
    bottom: 8px;
}
.intro .material_box {
display: flex;
justify-content: space-between;
width: 100%;
margin: 0 auto;
}
.intro .material_box .txt_box{
    width: 66.666666666666667%;
color: #fff;
margin: 0 2em 0 0;
}

.intro .material_box .txt_box p{
font-size: 16px;
line-height: 1.8;
}
.intro .material_box figure{
width: 33.333333333333333%;
}


.ph_box {
width: 94%;
max-width: 1200px;
margin: 80px auto 120px;
}
.ph_box figure{
margin: 0 auto 30px;
}
.ph_box h3{
text-align: center;
color: #fff;
font-size: 30px;
letter-spacing: 0.14em;
line-height: 1.6;
padding-bottom: 1em;
}
.ph_box p{
text-align: center;
color: #fff;
font-size: 18px;
line-height: 2.4;
}
h3.cg_ttl{
    text-align: center;
    color: #fff;
    font-size: 30px;
    letter-spacing: 0.14em;
    line-height: 1.6;
    padding-bottom: 1em;
}
/*---------------------------
sp
---------------------------*/
@media only screen and (max-width: 768px) {

#main_img {
position: relative;
width: 100%;
height: 0;
padding-top: 75%;
background: url(../img/main.jpg) no-repeat center top;
background-size: cover;
}
#main_img h2 {
top: 30%;
left: 3%;
font-size: 20vw;
}
#main_img .main_ttl { left: 3%;}
#main_img .main_ttl h3 {
padding: 0 0 10px;
font-size: 4.6vw;
letter-spacing: 0.02em;
}
#main_img .main_ttl h3 span {
font-size: 9vw;
font-feature-settings: "palt";
}
#main_img .main_ttl h3 span.num {
font-size: 10vw;
vertical-align: unset;
}
#main_img .main_ttl p { font-size: 5vw;}

#main_img .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
padding-top: 75%;
overflow: hidden;
}
#main_img .bg video {
position: absolute;
top: 0;
left: 50%;
width: 140%;
height: 100%;
transform: translateX(-50%);
}
    #slider_wrap {
        margin: 0 auto 30px;
    }

/* スライド設定 */
.box01{ margin: 0 auto 20px;}

.slide-item .imgHead {
top: 12px;
font-size: 14px;
padding-left: 10px;
}
.slide-item .imgHead::before {
width: 20px;
}

#thumbnail-list {
  width: 100%;
}

.intro {
flex-direction: column-reverse;
margin: 40px auto 60px;
}
.intro .facade {
width: 100%;
margin: 0 auto 40px;
}
.intro .facade h3{
color: #fff;
text-align: center;
font-size: 20px;
line-height: 1.6;
    letter-spacing: 0.04em;
padding-bottom: 1em;
}
.intro .facade p{
color: #fff;
text-align: left;
font-size: 14px;
line-height: 2.2;
letter-spacing: 0.04em;
margin: 0 0 50px;
}

.intro .material_box {
width: 100%;
margin: 0 auto;
}
.intro .material_box .txt_box{
width: 70%;
color: #fff;
margin: 0 ;
padding-right: 10px;
}

.intro .material_box .txt_box p{
text-align: justify;
font-size: 12px;
line-height: 1.8;
}
.intro .material_box figure{
width: 30%;
max-width: unset;
margin: 0 0 0 auto;
}


.ph_box {
width: 94%;
max-width: 1200px;
margin: 0 auto 80px;
}
.ph_box figure{
margin: 0 auto 20px;
}
.ph_box h3{
text-align: center;
color: #fff;
font-size: 18px;
line-height: 1.6;
}
.ph_box p{
text-align: center;
color: #fff;
font-size: 16px;
line-height: 2.2;
}
h3.cg_ttl{
text-align: center;
color: #fff;
font-size: 18px;
line-height: 1.6;
}
.gallery {
margin-bottom: 30px;
}
.loop_wrap li {
    width: 100%;
    height: unset;
}
}