body{
    background:var(--color--black);
}

/* lead */
#lead{
    position: relative;
    padding: 150px 0 0 0;
    height:100vh;
}

#slider-area{
    width:80%;
    height: 70vh;
    position: relative;
    top: 0;
    left:10%;    
    z-index: -1;
}

#slider-area #slider{
    width:100%;
    height:70vh;
}

#lead h2.heading{
     position: absolute;
    top:200px;
     right:7%;
}

#lead .lead{
     position: absolute;
    top:320px;
     right:1%;
    font-size: 2rem;
    letter-spacing: 0.2em;
    line-height: 1.6;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    white-space: nowrap;
}

#lead .lead span{
     display: block; 
    padding: 100px 0 0 0;
}

/* new */

#news{
    position: absolute;
    left: 2%;
    top: 80%;
    background:var(--color--white);
    width:40%;
    z-index: 2;
    padding: 40px;
}

#news h2{
    position: relative;
    font-size:1.2rem;
    margin: 0 0 30px 0;
}

#news h2::before{
    content:'';
    position: absolute;
    width:30px;
    height: 1px;
    background: #182578;
    left:0;
    bottom:-5px;
}

#news li{
    margin:0 0 10px 0;
}

#news li a{
    transition: all .3s;
}

#news li a:hover{
     background:#efefef;
}

#news li time{
    display: inline-block;
    padding:0 20px 0 0;  
    font-size:0.8rem;
    color: #999;
}

@media screen and (max-width:1200px) {
    #lead .lead{
        font-size:1.8rem;
        right: 2.5%;
    }
    #news{
        width:50%;
    } 
}

@media screen and (max-width:960px) {
    #lead .lead{
        font-size:1.6rem;
        right: 3%;
    }
    #news{
        padding: 20px 30px;
    }
    #news li time{
        display: block;
    }  
}

@media screen and (max-width:768px) {
#slider-area {
    width: 100%;
    height: 90vh;
    left: 0;
    }
    #slider-area #slider{
    height: 90vh;
}
    
#lead h2.heading{
    top: 160px;
}
    
#lead{
    padding:100px 0 0 0;
}
    
#lead .lead{
    right:7%;
    top:260px;
}

#news{
    width:90%;
    bottom:-100px;
}
}

@media screen and (max-width:550px) {
#lead .lead {
    font-size: 1.3rem;
    right:5%;

} 
}

@media screen and (max-width:350px) {
#lead .lead {
    right:2%;
}
}

/* service */

#service{
    position: relative;
    text-align: center;
    padding: 100px 0 0 0;
}

#service header{
    background:var(--color--main);
    color: #fff;
    width:90%;
    padding: 50px 0 100px 0;
    z-index: 1;
}

#service header h2{
	font-family: 'EB Garamond', serif;
    font-size: 5vw;
    font-weight: 400;
	line-height:1;
    color: #FFF;
	padding:0;
	margin:0;
}

#service header p{
    margin: 0 0 30px 0;   
}

#service header p br{
     display: none;   
}

#service .service-area{
    background:#fff;
    padding: 70px;
    width:70%;
    position: relative;
    top:-50px;
    left: 10%;
    z-index: 2;
}

#service .service-area ul{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-around;
/* スマホ表示用。flipDownを指定している親要素に指定しないとうまく動かない*/
    transform:  translate3d(0, 0, 0);
}

#service .service-area ul li{
    opacity: 0;
    width:22%;
    padding: 0 0 50px 0;
}

#service .service-area ul li a{
    display: block;
}

@media screen and (max-width:960px) {
    #service header{
        width:100%;
    }
	#service header h2{
    font-size: 3em;
}
    #service .service-area{
        width:80%;
        left:10%;
        padding: 80px 20px 30px 20px;
    }
#service .service-area ul li{
    width:40%;
}
#service header p br{
     display:block;   
}

}

@media screen and (max-width:768px) {
    #service{
        padding: 200px 0 0 0;
    }
    #service .service-area{
        padding: 50px 20px 30px 20px;
    }
	#service .service-area ul li{
    width:100%;
		    padding: 0 0 20px 0;
}
}

@media screen and (max-width:550px) {
    #service .service-area{
    width:90%;
    left:5%;
    }
}

@media screen and (max-width:400px) {
    #service .service-area{
    width:100%;
    left:0;
    font-size: 0.9rem;
}
}

/* works */

#works{
    position: relative;
    padding:0 0 20vh 0;
}

#works h2{
   text-align:center;
	line-height:1;
	margin-bottom:10px;
}
#works h3{
   text-align:center;
	margin-bottom:4vh;
}
.works-slider .slick-slide {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.works-slider .slick-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.works-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    
}

.works-img{
    background:url("https://jp-hurray.co.jp/wp-content/uploads/2023/07/pict_home01.jpg") no-repeat center;
    background-size: cover;
    height: 50vh;
    width:48%;
}

.works-content{
    display: flex;
    justify-content: center;
    padding: 150px 0 0 0;
    width:45%;
}

.works-box{
}

.works-content h3{
    font-size:1.5rem;
    line-height: 2.5;
}

_:-ms-lang(x)::-ms-backdrop, .works-content h3{/*IE11用ハック*/
    width:30%;
}

.works-content p{
    line-height: 3.5;
    margin: 0 0 0 50px;
}

_:-ms-lang(x)::-ms-backdrop, .works-content p{/*IE11用ハック*/
    width:60%;
}

_:-ms-lang(x)::-ms-backdrop, .works-content .works-btn{/*IE11用ハック*/
    width:10%;
}


@media screen and (max-width:1280px) {

.works-content h3{
    line-height: 2;
    margin: 0 0 0 10px;
}

.works-content p{
    line-height: 3;
    margin: 0 0 0 20px;
}
    
}

@media screen and (max-width:1000px) {
.works-content p{
    line-height: 2;
}
}


@media screen and (max-width:768px) {
#works{
    padding: 0 30px;
}
    
#works h2 {
    position: relative;
    right: inherit;
}
    .works-img,
    .works-content{
        width:100%;
    }
    
    .works-img{
        height:40vh;
    }

    .works-content{
    padding:50px 0 0 0;
    }
    
.works-content h3,
.works-content p,
.works-content .works-btn{
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    height: inherit;
    margin: 0 0 50px 0;
}
    
_:-ms-lang(x)::-ms-backdrop, .works-content h3,
_:-ms-lang(x)::-ms-backdrop, .works-content p,
_:-ms-lang(x)::-ms-backdrop, .works-content .message-btn{/*IE11用ハック*/
    width:100%;
}
    
.works-content h3{
    text-align: center;
    font-size: 1.2rem;
}
    
.works-box{
    display: block;
}
    
.works-box .btn{
    padding: 10px;
    display: block;
}
        
}


@media screen and (max-width:430px) {
    .works-img{
        height:20vh;
    }
}

@media screen and (max-width:370px) {

 .works-content p br{
    display: none;
    }
}


/* contact */

#contact{
    position: relative;
    padding:0 70px;
    margin: 0 0 100px 0;
}

#contact h2{
    position: absolute;
    right:45%;
    z-index: 2;
}


.contact-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
}

.contact-img{
    background:url("https://jp-hurray.co.jp/wp-content/uploads/2023/07/pict_home02.jpg") no-repeat center;
    background-size: cover;
    height: 50vh;
    width:48%;
}

.contact-content{
    display: flex;
    justify-content: center;
    padding: 150px 0 0 0;
    width:45%;
}

.contact-box{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}


.contact-content h3,
.contact-content p,
.contact-content .contact-btn{
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;    
    text-orientation: upright;
    height: 20em;
    letter-spacing: 0.1em;
}

.contact-content h3{
    font-size:1.5rem;
    line-height: 2.5;
}



@media screen and (max-width:768px) {
#contact{
    padding: 0 30px;
}
#contact h2 {
    position: relative;
    right: inherit;
    top: 40px;
}
    .contact-img,
    .contact-content{
        width:100%;
    }
    
    .contact-img{
        height:40vh;
    }

    .contact-content{
    padding:50px 0 0 0;
    } 
	
.contact-content h3,
.contact-content p,
.contact-content .contact-btn{
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    height: inherit;
    margin: 0 0 50px 0;
}
    
_:-ms-lang(x)::-ms-backdrop, .contact-content h3,
_:-ms-lang(x)::-ms-backdrop, .contact-content p,
_:-ms-lang(x)::-ms-backdrop, .contact-content .contact-btn{/*IE11用ハック*/
    width:100%;
}
    
.contact-content h3{
    text-align: center;
    font-size: 1.2rem;
}
    
.contact-box{
    display: block;
}
	
	.contact-box .btn{
    padding: 10px;
    display: block;
}
    	
}

@media screen and (max-width:430px) {
    .contact-img{
        height:20vh;
    }
}