@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
img{
	vertical-align: bottom;
}
* img{
  max-width: 100%;
}
a img {
  border: none;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a{
	text-decoration:none;
}
a:hover{
  opacity: 0.8;
}
* {
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
hr{
	border-left:none;
	border-right:none;
	border-top:none;
	border-bottom:solid 1px #CCC;
}


* img{
  max-width: 100%;
}
.mb10{
  margin-bottom: 10px;
}


.sp_only{
  display: none;
}

.wrap{
  color: #785555;
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  line-height: 1.6;
  overflow: hidden;
}

.kv{
  padding: 50px;
}
.kv .inner{
  position: relative;
}
.kv .inner .logo{
  position: absolute;
  left: 2.11vw;
  top: 2.11vw;
  width: 18.4vw;
  min-width: 160px;
}
.kv .inner .txt{
  position: absolute;
  left: 0;
  bottom:30px;
}
.kv .inner .catch{
  width: 40.26vw;
  padding-left: 2.78vw;
}

.kv .inner .caption{
  margin-top: 30px;
}
.kv .inner .caption p:nth-child(1){
  height: 5.39vw;
  width: 32.14vw;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(30px);
  line-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 20px;
}
.kv .inner .caption p:nth-child(2){
  height: 5.39vw;
  margin-top: 10px;
  width: 39.32vw;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(30px);
  line-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 20px;
}

.slick-dotted.slick-slider{
  margin-bottom: 0;
}
.dots_wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.dots_wrap li {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  border:solid 1px #785555;
}
.dots_wrap li.slick-active {
  background: #785555;
}
.dots_wrap li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}

.prev_arrow{
  position: absolute;
  left:0;
  top: calc(50% - 15px);
  transform: translateX(-50%) translateY(-50%);
  width: 60px;
  height: 60px;
  backdrop-filter: blur(30px);
  border-radius: 50vh;
  z-index: 99;
  cursor: pointer;
  background-color: rgba(0,0,0,0.1);
}
.prev_arrow::after{
  position: absolute;
  left:calc(50% + 3px);
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-135deg);
  content: '';
  width: 16px;
  height: 16px;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  z-index: 100;
}

.next_arrow{
  position: absolute;
  right:0;
  top: calc(50% - 15px);
  transform: translateX(50%) translateY(-50%);
  width: 60px;
  height: 60px;
  background-color: rgba(0,0,0,0.1);
  backdrop-filter: blur(30px);
  border-radius: 50vh;
  z-index: 99;
  cursor: pointer;
}
.next_arrow::after{
  position: absolute;
  right:calc(50% + 3px);
  top: 50%;
  transform: translateX(50%) translateY(-50%) rotate(45deg);
  content: '';
  width: 16px;
  height: 16px;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  z-index: 100;
}

.main_content{
  padding: 90px 20px;
}
.main_content .inner{
  max-width: 1200px;
  margin: 0 auto;
}
.main_content .caption{
  font-size: 60px;
  font-family: "Aboreto", system-ui;
  text-align: center;
}
.main_content .flexbox{
  display: flex;
  justify-content: space-between;
  gap:80px;
  margin-top: 70px;
}
.main_content .flexbox .img{
  flex-shrink: 0;
  max-width: 50%;
}
.main_content .flexbox .txt{
  max-width: 50%;
}
.main_content .link a{
  max-width: 400px;
  width: 100%;
  height: 80px;
  background-color: #785555;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-right: 30px;
}
.main_content .link a::after{
  content:"";
  position: absolute;
  right: 0;
  top: 50%;
  height: 1px;
  width: 28px;
  background-color: #fff;
}
.link_insta span{
  position: relative;
  padding-left: 30px;
}
.link_insta span::before{
  content:"";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url('images/insta_icon.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

.design .txt p{
  font-size: 16px;
  line-height: 2;
}
.design .txt .link{
  margin: 40px auto 0;
  display: flex;
  justify-content: center;
}
.process{
  border-top:dashed 1px #785555;
}
.process .flexbox{
  flex-direction: row-reverse;
}
.process .txt p{
  font-size: 16px;
  line-height: 2;
}

.archive{
  background-color: #EFECEC;
  margin: 0 50px;
}
.archive .list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:50px;
  margin-top: 50px;
}
.archive .list .item{
  width: calc((100% - 100px) / 3);
  position: relative;
}
.archive .list .item h3{
  font-size: 18px;
  font-weight: 500;
  margin-top: 5px;
}
.archive .list .item a{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.archive .link{
  margin-top: 40px;
  padding-top: 40px;
  text-align: center;
  border-top:dashed 1px #785555;
}
.archive .link a{
  margin: 30px auto 0;
}

.movie_wrap{
  aspect-ratio: 16 / 9;
}
.movie_wrap iframe{
  width: 100%;
  height: 100%;
}

.ocsd .inner{
  padding: 60px;
  border:solid 1px #785555;
}
.ocsd .inner .ttl{
  font-size: 25px;
  font-weight: 700;
  text-align: center;
}
.ocsd .inner .txt{
  margin-top: 20px;
  padding-top: 20px;
  border-top:dashed 1px #785555;
  line-height: 2;
}
.ocsd .inner .link{
  margin-top: 40px;
  text-align: center;
}
.ocsd .inner .link a{
  margin: 0 auto ;
}
.gallery{
  background-color: #EFECEC;
  margin: 0 50px;
}
.gallery .list{
  display: flex;
  flex-wrap: wrap;
  gap:40px 20px;
  margin-top: 50px;
}
.gallery .list .item{
  width: calc((100% - 60px ) / 4 );
  display: block;
}
.gallery .list .item .img{
  aspect-ratio: 3 / 3;
  display: flex;
  justify-content: center;
}
.gallery .list .item .img img{
  object-fit: contain;
}
.gallery .list .item h3{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-top: 5px;
  color: #785555;
}

.footer{
  margin-top: 50px;
}
.copyright{
  background-color: #785555;
  padding: 10px 20px;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

@media screen and (max-width: 1300px) {
  .kv{
    padding: 20px;
  }
  .archive{
    margin: 0 20px;
  }
  .gallery{
    margin: 0 20px;
  }
  
}
@media screen and (max-width: 1200px) {
  .main_content .flexbox{
    gap:40px;
  }
  .prev_arrow{
    transform: translateX(-20%) translateY(-50%);
  }
  .next_arrow {
    transform: translateX(20%) translateY(-50%);
  }
  .archive .list{
    gap:20px;
  }
  .archive .list .item {
    width: calc((100% - 40px) / 3);
  }
  
  .gallery .list{
    gap:20px;
  }
  .gallery .list .item {
    width: calc((100% - 40px) / 3);
  }
}

@media screen and (max-width: 769px) {
  .pc_only{
    display: none;
  }
  .sp_only{
    display: block;
  }
  .wrap{
    font-size: 14px;
  }
  .kv .inner .caption{
    margin-top: 10px;
  }
  .main_content{
    padding: 50px 20px;
  }
  .main_content .caption{
    font-size: 40px;
  }
  .main_content .flexbox{
    flex-direction: column;
    margin-top: 50px;
  }
  .main_content .flexbox .img{
    max-width: 100%;
  }
  .main_content .flexbox .txt{
    max-width: 100%;
  }
  .main_content .link a{
    font-size: 14px;
    height: 60px;
  }
  
  .archive .list .item {
    width: 100%;
  }
  .archive .list .item h3{
    font-size: 15px;
  }
  
  .ocsd .inner{
    padding: 30px;
  }
  .ocsd .inner .ttl{
    font-size: 22px;
  }
  
  .gallery .list .item {
    width: calc((100% - 20px) / 2);
  }
  .gallery .list .item h3{
    font-size: 14px;
  }
}