@charset "UTF-8";

.service__link__wrap{
  display: flex;
}

.service__link__wrap .Item{
  width: calc(100% / 3);
  overflow:hidden;
transition: transform .4s ease;
}
.service__link__wrap .Item picture{
	overflow:hidden;
	background:#000;
}
.service__link__wrap .Item picture img{
	opacity:1;
	transition: transform .4s ease;
}

.service__link__wrap .Item:hover picture img{
	transform: scale(1.1);
	opacity:0.4;
}

.service__link__wrap .Item .Text__red{
  background: var(--red);
  padding: clamp(1em,2vw,2.2vw);
  color:#fff;
  position: relative;
}

.service__link__wrap .Item .Text__violet{
  background: var(--violet);
  padding: clamp(1em,2vw,2.2vw);
  color:#fff;
    position: relative;
}

.service__link__wrap .Item h2{
  text-align: left;
  margin-bottom: .25em;
}

.service__link__wrap .Item .title{
  display: block;
  margin: 0 0 .75em;
  font-size: 1.1rem;
}

.service__link__wrap .Item p{
  color:#fff;
  font-size: 0.9rem;
}

.service__link__wrap .Item span.number{
   position: absolute;
   right:.2em;
   top:-.75em;
   z-index: 2;
   font-size: clamp(48px,99px,100px);
   color:#fff;
   opacity:0.4;
     font-family: "Cormorant Garamond", serif;
}

section.works{
  position: relative;
  background: #000;
  padding: var(--row-space);
  overflow: hidden;
}

section.works h2{
  margin:.5em var(--row-space) .5em;

}

section.works::before{
  content:'';
    background: url(../images/wagara_top.svg) repeat-x;
  height: var(--row-space);
  position: absolute;
  width: 100%;
  top:0;
  left:0;
}
section.works::after{
  content:'';
    background: url(../images/wagara_top.svg) repeat-x;
  height: var(--row-space);
  position: absolute;
  width: 100%;
  bottom:0;
  left:0;
}
section.works span.left{
  background: url(../images/wagara_top.svg) repeat-x;
  height: var(--row-space);
  position: absolute;
  width: 100%;
  top:0;
    left: -48.5%;
  transform:rotate(90deg);
}
section.works span.right{
  background: url(../images/wagara_top.svg) repeat-x;
  height: var(--row-space);
  position: absolute;
  width: 100%;
  top:0;
    right: -48%;
    transform:rotate(90deg);
}

section.works .comm__Inner{
  background: #262626;
  padding: clamp(1em,2.6vw,2.8vw);
  max-width: 100%;
}

ul.works{
  list-style: none;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  column-gap: 2%;
  row-gap: 2vh;
  padding-left: 0;
}

ul.works li{
  width: var(--flex_third);
}

ul.works li img{
  max-height: 300px;
  object-fit: cover;
}

ul.works li p{
  color:#fff;
}

@media screen and (min-width: 1921px) {
  ul.works li img{
    max-height: 480px;
  }

}


article.information{
  background: #110e10;
  position: relative;
  padding:var(--col-space) var(--row-space);
}

section.insta{
  background: #262626;
  padding: clamp(1em,2.6vw,2.8vw);
  position: relative;
  z-index: 2;
}

article.information::after{
  content: '';
  background: url(../images/information__bg.webp)no-repeat;
  background-size: cover;
  position: absolute;
  bottom:0;
  left:0;
  height: 80%;
  width: 100%;
}
article.information.sec::after{
  content: '';
  background: url(../images/information__bg.webp)no-repeat;
  background-size: cover;
  position: absolute;
  bottom:0;
  left:0;
  height: 100%;
  width: 100%;
}
section.information{
  padding: calc(var(--col-space) * 2) var(--row-space) var(--col-space);
  position: relative;
  z-index: 2;
}

section.information.sec{
  padding-top: 0;
}

section.information .comm__Inner{
  display: flex;
  column-gap: 3%;
  flex-wrap: wrap;
  align-items: center;
}

section.information .comm__Inner .Left{
  width: 70%;
}

section.information .comm__Inner .Right{
  width: 27%;
}

section.contactpage{
  background: url(../images/information__bg.webp)no-repeat;
  background-size: cover;
}

dl.border-list{
  display: flex;
  flex-wrap: wrap;
  padding: .5em;
  border-bottom: 1px solid #000;
  margin: 0 0 0;
}

dl.border-list:first-of-type{
  border-top: 1px solid #000;
}

dl.border-list dt{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  padding: .5em;
  color:#fff;
  border-right: 1px solid #787878;
  margin: 0;
  width: 15%;
}

dl.border-list dd{
  padding: 1em;
  color:#fff;
  width: 85%;
  margin: 0;
  letter-spacing: 0.16em;
}

section.map{
  background: url(../images/red__bg.webp)no-repeat;
  background-size: cover;
}

section.contactpage dt *{
  color:#fff;
}

section.contactpage dd p, section.contactpage dd p a{
  color:#fff;
}

@media only screen and (min-width: 768px) and (max-width: 1069px) {

  .service__link__wrap .Item span.number{
    font-size: 48px;
  }
  dl.border-list dt{
    width: 25%;
  }
  dl.border-list dd{
    width: 75%;
  }
}