@charset "utf-8";


/*----------* common *----------*/

/*header */
html{
 font-size: 100%;
 background-color: #c83b2d;
}

body{
 font-family: "vdl-v7marugothic", sans-serif;
 font-style: normal;
 font-weight: 300;
 font-size: 62.5%;
 color: #471515;
 border: 40px solid #c83b2d;
 background-color: #fff;
 border-radius: 15rem;

}
@media screen and (max-width:768px){
 body{
   border: 30px solid #c83b2d;
 }
}
@media screen and (max-width:500px){
 body{
   border: 20px solid #c83b2d;
 }
}

a{
 text-decoration: none;
 color: #471515;
}
li{
 list-style: none;
}
.wrapper{
 width: 75%;
 margin: 0 auto;
}

/* here */
.here{
 width: 10%;
min-width:100px;
position: fixed;
left:5%;
top:15%;
z-index: 1000;
}
.here img{
width: 100%;
display:block;
transition: 0.5s;
}
.here:hover img{
transform: scale(0.5, 0.5);
}
@media screen and (max-width:600px){
.here{
  top: 10%;

}
}
@media screen and (max-width: 500px){
.here{
  top: 8%;

}
}



.inner{
width: 60%;
 font-size: 1.5rem;
 line-height: 1.7;
 letter-spacing: 0.08rem;
margin: 10% 0 0 14%;
overflow-wrap: normal;
}


@media screen and (max-width:1280px){
.inner {
 font-size: 1.3rem;
}

}
@media screen and (max-width:1024px){
 .inner {
 font-size: 1rem;
}
}
@media screen and (max-width:960px){
.here{
 left:8%;
}
}

@media screen and (max-width:820px){
 .inner {
 font-size: 0.8rem;
}
}
@media screen and (max-width:768px){
 .inner {
display: none;
}
}
/*----------* nav *----------*/
#nav{
width:5%;
min-width: 50px;
position: absolute;
top: -2%;
left: 90%;
z-index: 100;
}

#nav ul{
margin-top: 300px;
}

#nav li{
 width:70%;
margin-bottom:40px;
}
#nav li a{
 display: block;
 transition: 1.0s;
transform: rotateY(0deg);
}
#nav li a:hover{

 transform: rotateY(360deg);
}
#nav li:nth-child(1){
 transform: scale(1.5);
}
#nav li:nth-child(2){
 transform: scale(0.7);
 margin-bottom: 5px;
}
#nav li:nth-child(3){
margin-bottom: 70px;
}
#nav li:nth-child(5){
 transform: scale(0.8);
}

/* PCnav */
@media screen and (max-width:960px){
#nav{
left: 87%;
}
#nav ul{
margin-top: 250px;
}
#nav li{
margin-bottom:20px;
}
}



/*  SPnav*/
@media screen and (min-width:820px){
 #grobal_Nav{
   display: none;
 }
}
@media screen and (max-width:819px){
#nav{
 display: none;
}
 #drawer_toggle{
  width: 50px;
  height: 50px;
  border: 2px solid #fff;
  /* background-color: #fff; */
  border-radius: 15px;
  cursor: pointer;
  z-index: 9999;
  margin: 0 0 0 auto;
  position:relative;
 }
@media screen and (max-width:390px){
 #drawer_toggle {
  border: 0;
 }
}



#drawer_toggle span{
 display: inline-block;
 width: 50%;
 height: 2px;
 background-color: #fff;
 border-radius: 20px;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 position:absolute;
 
}



#drawer_toggle span:nth-child(1){
top: 15px;
 /* transform: rotate(45deg); */
}
#drawer_toggle span:nth-child(2){
top: 23px;
}

#drawer_toggle span:nth-child(3){
 top: 31px;
}

#grobal_Nav{
width: 100%;
height: 100vh;
background-color: #c83b2d;
z-index: 999;
position: fixed;
top: -100%;
left: 0;
transition: all 2s;
font-size: 1rem;
line-height: 2;
}


#grobal_Nav ul{
position: absolute;
top: 50%;
left: 50%; 
transform: translate(-50%,-50%);
text-align: center;

}
#grobal_Nav ul a{
display: inline-block;
color: #fff;
 padding: 10px;
 
}
/* is-active */
#grobal_Nav.is-active{
 top:0;
}

#drawer_toggle.is-active span:nth-child(1){
  transform: translate(-11px,8px) rotate(45deg);
}
#drawer_toggle.is-active span:nth-child(2){
display: none;
}

#drawer_toggle.is-active span:nth-child(3){
  transform: translate(-11px,-8px) rotate(-45deg);
}
}

span{
display:block;

}
#work .design-title .date{
font-family: "Futura";
letter-spacing: 0.12em;
margin-top: 15px;
}


/* logo_title */
.logo{
 width:80%;
margin: 5% 0 0 10%;

}
.logo::before{
content: url(../images/bird.svg);
display: block;
transform: scale(-1, 1);
width:5%;
position: absolute;
top: 100%;
right:15%;

}

.logo:after{
content: url(../images/lineB.svg);
display: block;
width:75%;
position: absolute;
bottom: -45%;
right:15%;

}
@media screen and (max-width:768px){
.logo{
 display: none;
}
}

.section-title{
 display: flex;
 align-items: center;
 margin-left:22%;
 margin-top: 23%;

}
@media screen and (max-width:1280px){
.section-title{
  margin-top: 18%;
}

 #news .section-title, #address .section-title{
  margin-top: 25%;
}
}

@media screen and (max-width:1024px){
.section-title{
  margin-top: 20%;
}
 #news .section-title, #address .section-title{
  margin-top: 35%;
}
}


@media screen and (max-width:960px){
#news .section-title, #address .section-title{
  margin-top: 25%;
}
}
@media screen and (max-width:768px){
.section-title img{
  display:none;
}

}
.title-icon{
min-width: 20%;
margin-bottom: 15px;
}
.section-s{
 width: 50%;
 font-size: 1.1rem;
 line-height: 1.5;
 margin-left: 20px;
margin-bottom: 100px;
 text-align: left;

}
@media screen and (max-width:1024px){
.title-icon{
min-width: 20%;
margin-bottom: 0;
}

.section-s{
 font-size: 1rem;
margin-bottom: 0px;
}
}
@media screen and (max-width:960px){
.section-s{
 font-size: 0.8rem;
}
}
@media screen and (max-width:768px){
.section-s{
 width: 65%;
margin-left: -70px;

}
}
@media screen and (max-width:430px){
.section-s{
margin-top: 50px;
margin-left: -30px;
line-height: 1.6;
}
}
@media screen and (max-width:420px){
.section-s{
font-size: 0.75rem;
}
}




/* To top */
#back-to-top{
 width: 70px;
position: fixed;
 bottom:10%;
 right: 12%;
}
#back-to-top img:hover{
opacity: 0.5;
}



@media screen and (max-width:960px){
#back-to-top{
 width: 50px;
 right: 15%;
}
}
/* Fade in */
.animations{
animation-name: animations;
animation-duration: 2s;
animation-timing-function: ease;
animation-delay: 0.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes animations{
0%{
  opacity: 0;
  transform: translateY(-200px);
}
100%{
opacity: 1;
transform: translateY(0);
}
}





/*----------* loading *----------*/
 #loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  z-index:9999;
  animation: fadeIn 30s ease-out forwards;
  }

  .loading img{
   display: block;
   width: 5%;
  position: relative;
  left: 70%;
  bottom: 20%;
   margin-top:70px;
   }
@media screen and (max-width:1280px){
 .loading img{
   left: 70%;
 }
}
@media screen and (max-width:1024px){
 .loading img{
   width: 6%;
   left: 65%;
 }
}
@media screen and (max-width:820px){
 .loading img{
   left: 60%;
 }
}
@media screen and (max-width:768px){
 .loading img{
   width: 6.5%;
   left: 60%;
 }
}
@media screen and (max-width:430px){
 .loading img{
   width: 8%;
   left: 60%;
 }
}

  .loading::before{
     content: url(../images/faceB.svg);
     display:block;
     width:50%;
     position: absolute;
      bottom:0;
      left: 4%;
  }
  .loading span{
   width: 100%;
  }

 .loading span:first-child {
   animation: 5s infinite anime 0.2s;
   margin-top: 150px;
 }
 @media screen and (max-width:375px){
   .loading span:first-child {
     margin-top: 100px;
   }
 }
 .loading span:nth-child(2) {
   animation: 5s infinite anime 0.4s;
 }
 .loading span:nth-child(3) {
  animation: 5s infinite anime 0.6s;
 }
 .loading span:nth-child(4) {
   animation: 5s infinite anime 0.8s;
 }
 .loading span:nth-child(5) {
   animation: 5s infinite anime 1s;
 }

 @keyframes anime{
 from {
   opacity: 0;
   transform: translateX(100%);
  }
 to {
   transform: translateX(60%);
 }
 }
 @keyframes fadeIn{
   from{
     opacity: 0;
   }
   to{
     display: none;
     opacity: 1;
   }
 }

 @keyframes fadeOut{
   from{
     opacity: 1;
   }
   to{
     display: none;
     opacity: 0;
     z-index: -1;
   }
 }

#loading.loaded{
   animation: 3s forwards fadeOut;
   }

/*----------* about *----------*/
#about{
 text-align: center;
 position: relative;

}
/* text */
.sentence{
width: 100%;
 max-width: 100%;
margin: 25% auto;

}
.greeting{
 font-weight: bold;
 margin-bottom: 20px;
}

.sentence p{
 width: 850px;
  font-size: 2rem;
 letter-spacing: 0.02rem;
 line-height:2.2;
 text-align: justify;
 margin-left: 20%;
 
}
.name{
 letter-spacing: 0.06em;
}
.sp{
 display: none;
}
.last-greeting{
 margin-top: 30px;
}
@media screen and (max-width: 1500px){
.sentence p{
 width: 70%;
  font-size: 1.8rem;
 margin-left: 18%;
}
}
@media screen and (max-width: 1280px){
.sentence p{
  font-size: 1.5rem;
}
}

@media screen and (max-width:1095px){
.sentence p{
  font-size: 1.2rem;
}
}
@media screen and (max-width:895px){
.sentence p{
 font-size: 1rem;
}
}
@media screen and (max-width:768px){
.sentence{
margin: 30% auto 35%;
}
}
@media screen and (max-width:712px){
.sentence p{
 width: 100%;
line-height: 2;
}
}

@media screen and (max-width:600px){
 .sentence {
 margin-left: -5%;

}
.sentence p{
 width: 90%;
 line-height: 1.8;

}
}
@media screen and (max-width:567px){
.sentence p{
 width: 80%;
 line-height: 1.8;
}
.sp567{
 display:none;
}
 .pc{
  display:none;
 }
}
@media screen and (max-width:430px){
 .sentence{
  margin: 55% 0 100% -10%;
 }
 .sentence p{
 width: 90%;
  letter-spacing: revert-layer;
 line-height: 1.8;
}
}

@media screen and (max-width:375px){
.sentence p{
 font-size: 0.9rem;
 line-height:1.8;
width:90%;
}
}
@media screen and (max-width:320px){
 .sentence{
  margin: 55% 0 50% -9%;
 }
.sentence p{
 font-size: 0.7rem;
 line-height:1.8;
width:90%;
}
}

/* hello */
.sentence::after{
 content: url(../images/hello.svg);
 display: block;
 width: 50%;
 min-width: 50%;
 position: relative;
  left: 25%;
 top:150px;
}
@media screen and (max-width: 1095px){
.sentence::after{
top:80px;
 
}
}


@media screen and (max-width: 1024px){
.sentence::after{
top:90px;
 
}
}


@media screen and (max-width: 960px){
.sentence::after{
 width: 55%;
 top:80px;
}
}
@media screen and (max-width: 768px){
.sentence::after{
 width: 60%;
 top:70px;
}
}
@media screen and (max-width: 600px){
.sentence::after{
 top:35px;
}
}
@media screen and (max-width: 430px){
.sentence::after{
 top:50px;
 width: 80%;
}
}
@media screen and (max-width: 375px){
.sentence::after{
 top:50px;
 width: 85%;
}
}
@media screen and (max-width: 320px){
.sentence::after{
 display: none;
}

}



/*----------* design list *----------*/
#design{
 width: 100%;
 text-align: center;
position: relative;
}
#design::after{
content: url(../images/lineB.svg);
display: block;
width:56%;
position: absolute;
top: 300px;
right:24%;
}
@media screen and (max-width:1280px){
#design::after{
top: 14rem;
}
}

@media screen and (max-width:960px){
#design::after{
top: 12rem;
}
#design .section-title{
  margin-top: 20%;
}
}
@media screen and (max-width:450px){

#design .section-title{
  margin-top: 35%;
}
}
@media screen and (max-width:430px){

#design .section-title{
  margin-top: 25%;
}
}

@media screen and (max-width:430px){
 #design{
  margin: 0 auto;
 }
#design::after{
width:85%;
top: 13rem;
right:7%;

}
}
@media screen and (max-width:768px){
#design::after{
top: 10rem;
}
}
@media screen and (max-width:460px){
#design::after{
top: 12rem;
}
}

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

#design::after{
top: 15rem;
}
}

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

#design::after{
top: 18rem;
}
}



.design-list{
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
 align-items: stretch;
 margin: 15% 0 30% 5%;
 }

@media screen and (max-width:1280px){
.design-list{
margin-top: 10%;
}
}
@media screen and (max-width:1024px){
.design-list{
margin-top: 25%;
}
}
@media screen and (max-width:960px){
.design-list{
width: 80%;
margin-left: 13%;
margin-top: 25%;

}
}
@media screen and (max-width:820px){
.design-list{
margin-left: 9%;

}
}
@media screen and (max-width:768px){
.design-list{
margin-left: 9%;

}
}


.design-list  a{
 display: inline-block;
 }
.design-list li{
 width:30%;
 vertical-align: center;
 margin-bottom:50px;
 transform:scale(1)
}
@media screen and (max-width:820px){
.design-list li{
width: 50%;
}

}
@media screen and (max-width:430px){
.design-list{
width: 100%;
 margin:50px 5%  0 8%;

}

.design-list li{
width:  85%;
 margin-bottom:40px;

}
}
.design-list li:hover{
opacity: 0.5;
}
.design-list img{
width: 80%;
}

#design .design-list p{
 width: 80%;
 font-size: 0.8rem;
  overflow-wrap: normal;
 margin: 0 auto 5%;
}
@media screen and (max-width:960px){
#design .design-list p{
 font-size: 0.6rem;
 line-height: 1.3;
}
}

#design .design-list .date{
   font-family: "futura";
   letter-spacing: 0.05rem;
}

.discription{
 margin-top:15px;
 line-height: 1.5;
}
 @media screen and (max-width:960px){
.discription{
 margin-top:12px;
 line-height: 0.5;
}
}
 @media screen and (max-width:430px){
.discription{
 margin-top:12px;
 line-height: 1.5;
}
 }

/*----------* work *----------*/
#work{
max-width: 960px;
text-align: left;
margin: 0 auto 250px;
/* height: 100vh; */

}
@media screen and (max-width:1600px){
#work{
margin: 0 auto 100px 15%;

}
}
@media screen and (max-width:1260px){
#work{
margin: -10% auto 100px 15%;

}
}
@media screen and (max-width:1024px){
#work{
margin: -20% auto 200px 15%;

}
}

@media screen and (max-width:820px){
#work{
margin: -10% auto 200px 15%;

}
}

@media screen and (max-width:430px){
#work{
margin: 0 auto 40% 15%;
}
}
@media screen and (max-width:380px){
#work{
 width: 100%;
 margin: 0 auto 50% 15%;
}
}


@media screen and (max-width:280px){
#work{
 margin: -10% auto 100px 15%;
}
}


/* pageTop */
.pagetop__arrow{
display: inline-block;
color: #fff;
background-color: #c83b2d;
padding: 20px;
border-radius: 50%;
line-height: 1.5;
position: absolute;
right: 250px;

}
.pagetop__arrowT {
display: inline-block;
color: #fff;
background-color: #c83b2d;
padding: 20px;
border-radius: 50%;
line-height: 1.5;
position: absolute;
 right: 20rem;
 bottom: 85em;

}

@media screen and (max-width:1280px){
 .pagetop__arrow{
  right:10%;
  top:-2%;
  z-index: 1000;
 }
}
@media screen and (max-width:960px){
 .pagetop__arrow{
  transform: scale(0.8);
 }
}
@media screen and (max-width:600px){
 .pagetop__arrow{
  right:0%;
  top: -15%;

 }
}
@media screen and (max-width:450px){
 .pagetop__arrow{
  top: -20%;

 }
}
@media screen and (max-width:280px){
 .pagetop__arrow{
  top: -30%;
  transform: scale(0.8);
 }
}



#work .design-title{
font-size: 1rem;
position: relative;
margin-top: 350px;
}
#work .url{
  font-size: 1rem;

}


@media screen and (max-width:960px){
#work .design-title{
margin-top: 250px;
font-size: 0.6rem;
}
#work .url{
  font-size: 0.6rem;

}

}
@media screen and (max-width:450px){
#work .design-title{
margin-top: 170px;
}
}
@media screen and (max-width:380px){
#work .design-title{
width: 75%;
}
}
@media screen and (max-width:280px){
#work .design-title{
 width: 100%;
margin-left: -20px;

}
 #work .url{
  margin-left: -20px;
}
}

#work img{
 width:80%;
 object-fit: cover;
border: 0.5px solid #471515;
}
@media screen and (max-width:280px){
#work img{
 width:100%;
margin: 0 -15%;
}
#work .Live2017_img img, #work .Live2014_img img{
 margin: 0;
}

}

#work .beauty_img img, #work .thanks_img img, #work .isuzu_img img, #work .Live2017_img img, #work .Live2014_img img,  #work .works_img img{
 border: none;
}

#work .beauty_img{
margin: 300px 0;
}
@media screen and (max-width:820px){
#work .beauty_img{
margin: 100px 0;
}
}
@media screen and (max-width:768px){
#work .beauty_img{
margin: 100px 0 250px 0;
}
}
@media screen and (max-width:500px){
 #work .beauty_img{
  width: 100%;
  margin-bottom: 50%;
  margin-left: -5%;
}
#work .beauty_img img{
min-width: 100%;
}
}
@media screen and (max-width:380px){
#work .beauty_img {
  margin-left: -10%;
}
}
@media screen and (max-width:280px){
#work .beauty_img {
  margin: 0;
}
}
#work .thanks_img{
margin: 50% 0 50% 0;
text-align: center;
}
#work .thanks_img img{
width: 50%;

}
@media screen and (max-width:1280px){
#work .thanks_img img{
width: 70%;
}
#work .thanks_img{
margin: 50% 15% 50% 0;
}
}
@media screen and (max-width:768px){
#work .thanks_img{
margin: 50% 15% 70% 0;
}
}

@media screen and (max-width:430px){
#work .thanks_img img{
width: 85%;
 margin: 50px 0;
}
#work .thanks_img{
margin: 0 10% 30% 0;
}
}
@media screen and (max-width:380px){
#work .thanks_img img{
 width: 75%;
margin-left: -20%;
}
}


#work .isuzu_img{
text-align:center;
margin-bottom: 50%;

}
#work .isuzu_img img{
 display: block;
 width: 30%;
 margin: 0 auto;
}

#work .isuzu_img img:first-child{
margin-top: 25%;
}
#work .isuzu_img img:last-child{
margin-top: 15%;
}
@media screen and (max-width:820px){
#work .isuzu_img img{
 margin-left: 25%;
}
}
@media screen and (max-width:430px){
#work .isuzu_img img{
 width: 40%;
 margin: 0 50px;
}
}

#work .Live2017_img img{
width: 80%;
}
@media screen and (max-width:375px){
#work .Live2017_img img{
width: 75%;
}
#work .Live2017_img {
margin-top: -15%;
}
}
#work .Live2014_img img{
width: 80%;
}


/*----------* crowd *----------*/

.slider{
width: 100%;
padding: 200px 0;
}
.slick-dots
{
   margin-bottom: 150px;
}
@media screen and (max-width: 1024px){
.slider{
padding: 20px 100px 100px 0;


}
.slick-dots
{
   margin-left:-50px;
   margin-bottom: 10%;
}
}
@media screen and (max-width: 960px){
.slider{
padding: 50px 100px 100px 0;
}
.slick-dots
{
   margin-left:-50px;
   margin-bottom: 10%;
}
}
@media screen and (max-width:768px){
 .slider{
padding: 40px 0;
margin-left: -3%;
}
.slick-dots
{
   margin-left: 0;
   margin-bottom:0;
}
}
@media screen and (max-width:600px){
.slider{
padding: 40px 0;
margin-left: -3%;
}
}
@media screen and (max-width:380px){
.slider{
margin: -10% -10%;
}
}


#work .slider img{
max-width: 100%;
object-fit: cover;
margin: 0 auto;
}


/* button */
.slick-prev,
.slick-next{
z-index: 100;
}
.slick-prev:before,
.slick-next:before
{
  font-family: 'slick';
  font-size: 30px;
  line-height: 1;
  opacity: 1;
  color: #c83b2d;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-prev:before{
margin-left: -30px;
}


@media screen and (max-width:1280px){
.slick-prev:before,
.slick-next:before
{
  font-size: 25px;
   bottom: 140px;
}
.slick-prev:before{
 margin-left: 30px;
}
.slick-next:before{
 margin-left: -40px;
}
}

@media screen and (max-width:1024px){
.slick-prev:before{
 margin-left: 20px;
}
.slick-next:before{
 margin-left: -130px;
}
}
@media screen and (max-width:960px){
.slick-prev:before,
.slick-next:before
{
  font-size: 20px;
}
}
@media screen and (max-width:768px){

.slick-next:before{
 margin-left: -15px;
 
}
}
@media screen and (max-width:600px){
.slick-prev:before{
margin-left: 5px;
 top: -10px;

}
.slick-next:before{
 margin-left: -3px;
 top: -10px;
}
 .slick-dots{ 
 margin-bottom:0%;
  margin-left:0px;
}
}

@media screen and (max-width:430px){
.slick-prev:before,
.slick-next:before
{
  font-size: 14px;
}
.slick-prev:before{
margin-left: 13px;
}
.slick-next:before{
 margin-left: -10px;
}
}
@media screen and (max-width:280px){
.slick-next:before{
 margin-left: -7px;
}
}



.design-title{
 text-align:left;
 line-height: 0.5;
 margin-top: 300px;
 margin-bottom: 50px;
}
.url{
 font-family: "Futura";
 letter-spacing: 0.12em;
 margin-top: 15px;
}

.Live2017_img img:nth-child(2){
 margin-top: 20px;
}


/* pagebutton */
.pagebutton{
 display: flex;
max-width: 250px;
/* height: 25px; */
margin: 50px auto 50px;
align-items: center;

}
.pagebutton a{
display: inline-block;
text-decoration: none;
font-size: 1rem;
margin: 0 10px;
}

.pagebutton img{
display: block;
 width:15%;
min-width: 15%;
 border: none;

}
.page-front, .page-next{  
display: flex;
 align-items: center;
}


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

.pagebutton{
width: 200px;

}
.pagebutton a{
font-size: 0.8rem;
}
}
@media screen and (max-width:521px){

.pagebutton{
width: 150px;
}
.page-next{
 margin-left: 35px;
}
}
@media screen and (max-width:380px){

.pagebutton{
 margin-bottom: 20%;
}
}
@media screen and (max-width:280px){

.pagebutton{
 margin: 0 0 50px 55px;
}
.pagebutton a{
font-size: 0.7rem;
  margin: 0 3px;
}
 .page-front{
margin-right: 30px;
}
.page-next{
margin-left: 0px;
}
}

/*----------* news *----------*/
#news{
position: relative;
font-size: 1rem;
}

#news::after{
content: url(../images/lineB.svg);
display: block;
width:75%;
position: absolute;
top: 18rem;
right:15%;
}
@media screen and (max-width:1280px){
#news::after{
top: 14rem;
}
}
@media screen and (max-width:1024px){
#news::after{
top: 12rem;
}
}
@media screen and (max-width:960px){
#news::after{
top: 8rem;
}
}
@media screen and (max-width:820px){
#news::after{
top: 9rem;
}
}
@media screen and (max-width:430px){
#news{
margin: 0 auto;
}
#news::after{
width:100%;
top: 10rem;
right:0%;

}
}




#news .section-title::before{
content:url(../images/news_illust.svg);
display: block;
width: 16%;
min-width: 12%;
position:absolute;
top: 10%;
right: 25%;
}
@media screen and (max-width:1024px){
#news .section-title{
margin-top: 25%;
}
}
@media screen and (max-width:600px){
#news .section-title::before{
 width: 18%;
}
}
@media screen and (max-width:430px){
#news .section-title::before{
 display: none;
}
}

.diary{
max-width: 80%;
margin: 30% auto 80%;

}
.diary .day{
font-family: "Futura";
letter-spacing: 0.05em;
}
@media screen and (max-width:767px){
 .diary{
 font-size: 0.8rem;
 margin-top: 150px;
}
}
.diary-title{
font-size: 1.3rem;
font-weight: bold;
padding: 50px 0;
}
@media screen and (max-width:430px){
.diary-title{
font-size: 0.9rem;
}
}

.diary-inner{
line-height: 2;
position: relative;
}



.diary-inner::after{
content: url(../images/niko-faceB.svg);
display: block;
width: 25%;
position:absolute;
right: 40%;
top: 12rem;

}@media screen and (max-width:853px){
.diary-inner::after{
 top: 15rem;
}
}

@media screen and (max-width:767px){
.diary-inner::after{
 display: none;
}
}


/*----------* address *----------*/
#address{
position: relative;


}

#address::after{
content: url(../images/lineB.svg);
display: block;
width:75%;
position: absolute;
top: 18rem;
right:15%;
}

@media screen and (max-width:1280px){
#address::after{
top: 14rem;
}
}
@media screen and (max-width:960px){
#address::after{
top: 8rem;
}
}
@media screen and (max-width:430px){
#address{
 margin: 0 auto;
 height: 80vh;
}
#address::after{
 width:100%;
  top: 10rem;
  right:0%;
}
}
@media screen and (max-width:360px){
#address{
 margin: 0 auto 100px;

}
}
#address .title-icon img{
transform: scale(1);
}
@media screen and (max-width:1024px){
#address .section-title{
margin-top: 25%;
}
}
#address .address-inner{
margin-top: 300px;
margin-bottom: 50%;

}

@media screen and (max-width:1280px){
#address .address-inner{
margin-top: 120px;
}
}
@media screen and (max-width:820px){
#address .address-inner{
margin-top: 80px;
margin-bottom: 80%;
}
}
@media screen and (max-width:768px){
#address .address-inner{
margin-top: 100px;
}
}
@media screen and (max-width:430px){
 #address .address-inner{
margin-top: 40px;
}

}


#address .address-inner >p{
  font-family: "Futura";
 font-size: 1.5rem;
 letter-spacing: 0.12em;
 text-align: center;

}
@media screen and (max-width:960px){
#address .address-inner >p{
 font-size: 1.2rem;
}
}
@media screen and (max-width:768px){
#address .address-inner >p{
 margin-top: 20px;
}
}
@media screen and (max-width:430px){
#address .address-inner >p{
 font-size: 0.8rem;
 margin-top: 10%;
}
}
#address .flex{
display: flex;
align-items:center;
justify-content: center;
padding-top: 200px;

}
#address .flex img{
width:10%;
margin-bottom: 60px;
}
#address .flex-in{
font-size:1rem; 
}

@media screen and (max-width:960px){
#address .flex{
 padding-top: 100px;
}
}
@media screen and (max-width:768px){
#address .flex{
 display: block;
}
#address .flex img{
display: none;
}
#address .flex-in{
text-align: center;
}
}
@media screen and (max-width:360px){
#address .flex-in{
font-size: 0.8rem;
}
}


/*----------* art *----------*/
#art{
position: relative;
height: auto;
animation-name: animations;

}

#art::before{
content:url(../images/unchan.svg);
display: block;
width: 5%;
position: absolute;
top: 10%;
right: 23%;
 animation: 1s infinite jump;
}

@media screen and (max-width:1280px){
#art::before{
 top: 13%;
}
}
@media screen and (max-width:960px){
#art::before{
 top: 12%;
}
}
@media screen and (max-width:768px){
#art::before{
 display: none;
}
}
@keyframes jump{
 0% {
       transform:translateY(0);
   }

   50% {
       transform:translateY(-20px);
   }
  100% {
       transform:translateY(0);
   }
}
#art::after{
 content: url(../images/lineB.svg);
display: block;
width:75%;
position: absolute;
top: 20rem;
right:15%;
}

#art .title-icon{
transform: scale(1.3);
margin-right: 30px;
}

#art .section-title{
 margin-top: 300px;
}

@media screen and (max-width:1280px){
#art::after{
 top: 15rem;
}
#art .section-title{
 margin-top: 240px;
}
}

@media screen and (max-width:1024px){
#art::after{
 top: 13rem;
}
#art .section-title{
 margin-top: 170px;
}
}
/* @media screen and (max-width:960px){
#art::after{
 top: 12rem;
}
#art .section-title{
 margin-top: 180px;
}
} */
@media screen and (max-width:820px){
#art::after{
 top: 11rem;
}
#art .section-title{
 margin-top: 135px;
}
}
@media screen and (max-width:768px){
#art::after{
 top: 10rem;
}
}

@media screen and (max-width:430px){
#art::after{
 width:100%;
  top: 14rem;
  right:0%;
}
#art .section-title{
width: 80%;
margin-top: 60px;
margin-left: 30px;
line-height: 1.6;
}
}

@media screen and (max-width:320px){
#art::after{
  top: 15rem;
}
#art .section-title{
width: 80%;
margin-top: 50px;
margin-left: 30px;
 margin-bottom: 100px;
line-height: 1.6;
}
}

@media screen and (max-width:280px){
#art::after{
  top: 16rem;
}

}

.art_slider::before{
content:url(../images/art_illust.svg);
display: block;
width: 12%;
position: absolute;
top: 6%;
right: 11%;
 animation: 4s infinite yurayuraA;
}
@keyframes yurayuraA{
  0% {
       transform: rotate(0deg);
   }
   50% {
       transform: rotate(-10deg);
   }
   100% {
       transform: rotate(0deg);
   }
}
@media screen and (max-width:1280px){
.art_slider::before{
 top: 9%;
}
}
@media screen and (max-width:960px){
.art_slider::before{
 top: 8%;
}
}
@media screen and (max-width:768px){
.art_slider::before{
 display: none;
}
}

.art_slider {
display: flex;
  flex-wrap: wrap;
justify-content: center;
 width: 90%;
margin: 160px auto;

}
@media screen and (max-width:1260px){
.art_slider{
 margin: 10% auto;
}
}
@media screen and (max-width:1024px){
.art_slider{
 margin: 25% auto;
}
}
@media screen and (max-width:430px){
.art_slider{
  margin:40% auto 50px;
}
}


@media screen and (max-width:378px){
.art_slider{
  margin:35% auto 50px;
}
}

@media screen and (max-width:320px){
.art_slider{
 margin:-20% auto 50px;
}
}

.art_slider li{
width: 30%;
transform: scale(1);
padding:20px;

}
.art_slider li:hover{
transform: scale(1.2,1.2);
/* filter: grayscale(0.9); */
transition-duration: 0.4s;
transition-delay: 0.2s;
z-index: 10;
}
@media screen and (max-width:1280px){
.art_slider li{
padding:0 8px;
}
}
@media screen and (max-width:820px){
.art_slider li{
padding:0 5px;
}
}
@media screen and (max-width:768px){
 .art_slider li{
width: 40%;
  margin: 5% 5% 10% 0;
}
}
@media screen and (max-width:430px){
 .art_slider li{
width: 45%;
  margin: 5% 5% 10% 0;
}
}
@media screen and (max-width:280px){
 .art_slider li{
width: 50%;
  margin: 0 0 10% 0;
}
}





.art_slider img{
  width: 100%;
border: 6px solid #c83b2d;
border-radius: 50% 50% 5% 5%;
}
@media screen and (max-width:1280px){
.art_slider img{
  border: 5px solid #c83b2d;
}

}
@media screen and (max-width:1024px){
.art_slider img{
    border: 4px solid #c83b2d;
}

}

@media screen and (max-width:768px){
.art_slider img{
  border: 3px solid #c83b2d;
}

}
@media screen and (max-width:430px){
.art_slider img{
  border: 2px solid #c83b2d;
}

}


.art_slider li:first-child{
margin-top: 100px;


}

@media screen and (max-width: 1280px){
.art_slider li:first-child{
margin-top: 70px;
}
}
@media screen and (max-width:768px){
.art_slider li:first-child{
margin-top: 0px;
}
}




.art_slider li:nth-child(2){
margin-top: 200px;
}
@media screen and (max-width: 1280px){
.art_slider li:nth-child(2){
margin-top: 170px;
}
}
@media screen and (max-width:768px){
.art_slider li:nth-child(2){
margin-top: 0px;
}
}

.art_slider li:nth-child(3){
margin-top: 50px;

}

@media screen and (max-width: 1280px){
.art_slider li:nth-child(3){
margin-top: 20px;

}
}
@media screen and (max-width:768px){
.art_slider li:nth-child(3){
margin-top: 0px;
}
}



.art_slider li:nth-child(2)::before{
 content: url(../images/flowerB.svg);
display: block;
width: 25%;
position: absolute;
top: -55%;
left: 0%;
animation: 4s infinite yurayura;

}

@keyframes yurayura{
  0% {
       transform: rotate(0deg);
   }
   50% {
       transform: rotate(-30deg);
   }
   100% {
       transform: rotate(0deg);
   }
}

@media screen and (max-width: 1280px){
.art_slider li:nth-child(2)::before{
top: -80%;
}
}
@media screen and (max-width: 820px){
.art_slider li:nth-child(2)::before{
left: 20%;
}
}

@media screen and (max-width:768px){
.art_slider li:nth-child(2)::before{
 display: none;
}
}

.art_slider li:nth-child(4){
margin-top: 50px;

}
@media screen and (max-width: 1280px){
.art_slider li:nth-child(4){
margin-top: 20px;

}
}
@media screen and (max-width:768px){
.art_slider li:nth-child(4){
margin-top: 0px;
}
}

.art_slider li:nth-child(4)::after{
 content: url(../images/unchan.svg);
display: block;
width: 25%;
position: absolute;
top:80%;
left: 0%;
animation: 4s infinite yurayura;

}

@media screen and (max-width:768px){
.art_slider li:nth-child(4)::after{
display: none;
}
}


.art_slider li:nth-child(5){
margin-top: 230px;
}
@media screen and (max-width: 1280px){
.art_slider li:nth-child(5){
margin-top: 200px;
}
}
@media screen and (max-width: 768px){
.art_slider li:nth-child(5){
margin-top: 0px;
}
}
.art_slider li:nth-child(5)::before{
 content: url(../images/art-tree.svg);
display: block;
width: 100%;
position: absolute;
top: -60%;
left: 60%;
transform:scale(1.5);

}
@media screen and (max-width:768px){
.art_slider li:nth-child(5)::before{
 display: none;
}
}
@media screen and (max-width:430px){
.art_slider li:nth-child(5){
margin-top: 0px;
}
}

@media screen and (max-width:1280px){
.art_slider li:nth-child(5)::before{
 top: -80%;
}
}
@media screen and (max-width:1024px){
.art_slider li:nth-child(5)::before{
 top: -90%;
}
}
@media screen and (max-width:960px){
.art_slider li:nth-child(5)::before{
 top: -100%;
}
}
@media screen and (max-width:820px){
.art_slider li:nth-child(5)::before{
 top: -120%;
}
}






.art_slider li:nth-child(6){
margin-top: 100px;
}
.art_slider li:nth-child(6)::before{
 content: url(../images/flower.svg);
display: block;
width: 20%;
position: absolute;
top: 90%;
right: 30%;
 transform:rotate(10deg);
 animation: 3s infinite yurayuraA;
}
@media screen and (max-width:768px){
.art_slider li:nth-child(6){
margin-top: 0;
}
.art_slider li:nth-child(6)::before{
 display: none;
}
}



.art_slider li:nth-child(7){
margin-top: 150px;
}
@media screen and (max-width:768px){
.art_slider li:nth-child(7){
margin-top: 0;
}
}
.art_slider li:nth-child(8){
margin-top: 40px;
}
@media screen and ( max-width:1280px){
.art_slider li:nth-child(8){
margin-top: 5%;

}
}

@media screen and (max-width:1024px){
.art_slider li:nth-child(8){
margin-top: 8%;

}
}
@media screen and (max-width:768px){
.art_slider li:nth-child(8){
margin-top: 0;
}
}

.art_slider li:nth-child(9){
margin-top: 200px;
}

@media screen and (max-width:768px){
.art_slider li:nth-child(9){
margin-top: 0;
}
}