/* BASE */
html {
  font-size:10px;
}

body {
  margin: 0;
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size:1.4rem;
  background-color:white;
}

img{
  max-width:100%;
  height:auto;
  vertical-align:bottom;
}

/* LAYOUT */

.header{
  position:fixed;
  top:0;
  z-index:100;
  width:100%;
  background:white;
}

.header-inner{
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width:1200px;
  padding:10px 0 0px;
  margin:0 auto;
  border-bottom:8px solid #552D2D;

}

.header-inner:after{
  content:"";
  display:inline-block;
  position:absolute;
  bottom:-15px;
  left:0;
  width:100%;
  border-bottom:2px solid #552D2D;
}

.gnav{
  display: flex;
}

.gnav-list{
  list-style: none;
  display: flex;
  gap:100px;
}

.gnav-list a{
  text-decoration: none;
  color: black;
  font-size: 1.4rem;
}

.logo{
  max-width:200px;
}


.main{
  padding:100px 0 0;
}
.main-inner{
  max-width:1200px;
  margin:0 auto;

}


@media screen and ( max-width:768px) {
  .header-inner{
    flex-direction:column;
  }
  .gnav{
	  display: flex;
	  width:100%;
	}
	.gnav-list{
	  nargin:0;
	  padding:0;
	  width:100%;
	  gap:30px;
	  justify-content:space-around;
	}

}

/*.footer{}*/
.footer-inner{
  max-width:1200px;
  margin:0 auto;
}





/* MODULE */
.inner{
  max-width:1200px;
  margin:0 auto;
}


/* main */

.main-visual{
  width:100%;
  max-width:600px;
  position:fixed;
  top:70px;
  bottom:0;
  left:50%;

}

.main-visualtitle{
/*   position:fixed;*/
   position:absolute;
   top:10px;
   right:-50px;
   width:47%;
/*   margin-top:80px;*/
}

.main-visualhert{
/*   position: fixed;*/
position:absolute;
   top:-130px;
   left:10px;
   width:85%;
}

.main-visualcopy{
  position: absolute;
  top:430px;
  bottom:30px;
/*
  position: fixed;
  bottom:100px;
  right:200px;
*/
  writing-mode: vertical-rl;
/*  font-size: 2.6rem;*/
  font-size: 1.4rem;
  /*font-size: calc(2.6rem / 1080px * 100vw);*/
  line-height: 1.8;
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-style: normal;
  animation: slide-in 7s ease-in-out 1; /* アニメーション */
}


@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateX(50px); /* 例: 右からスライドイン */
  }
  100% {
    opacity: 5;
    transform: translateX(0);
  }
}

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

	.main-visual{
	  position:relative;
	  top:0;
	  left: 0;
	  width:100%;
	  overflow:hidden;
	}
	.main-visualtitle{
	  margin-top:50px;
    right:-40px;
	}
	.main-visualhert{
	position:static;
	}

	.main-visualcopy{
	  position: static;
	  width: 100%;
	  margin:0;
	  display: flex;
	  align-items: center;
	}
}












#logo {
        fill: #fff;
        stroke: #000;
        stroke-width: 1;
        stroke-linecap: round;
   
      }

      .main-visualhert-g {
        stroke-dasharray: 3000;
        stroke-dashoffset: 500;
        animation: line-animation 15s linear 1;
      
   
      }
      path{
      stroke-width: 1.5px;
      }

      @keyframes line-animation {
        0%   { stroke-dashoffset: 3000; }
        20%  { stroke-dashoffset: 2500; }
        40%  { stroke-dashoffset: 2000; }
        60%  { stroke-dashoffset: 1500; }
        80% { stroke-dashoffset: 500; }
        100% { stroke-dashoffset: 0; }

      }















/* about
 ------------------*/


.scrollable-container{
  overflow-y: scroll;
}








.section-about{
  width:100%;
  max-width:600px;
/*  position:fixed;
  top:70px;
  bottom:0;
*/
  right:50%;
  min-height:calc( 100vh - 100px);

}



.about-inner{
  /*
    height:28vh;
    position: absolute;
    top: 500px;
    left: 100px;
    background-color: rgba(245, 245, 245, 0.7);
    */
    background-color: rgba(235, 231, 231, 0.8);
    padding: 5px 30px;
    margin:0;
    max-width: 70%;
    line-height: 1.8;

    position:relative;
    left:-30px;
    top:50px; 
    z-index: 1;
    /*border-bottom:2px solid #552D2D;
    border-top:2px solid #552D2D;*/
  /*
    font-size: 2rem;
  */
  }

  

.about-photo{
  height:calc(100vh - 0px);
/*  position: absolute;*/
  position: fixed;
  top:100px;
  left:calc(( 100% - 1200 ) / 2 );
/*  left:100px;*/
  margin-top:30px;
  width:calc(1200px / 2);
/*  aspect-ratio:16 / 9;*/
  object-fit:cover;
  object-position:top;
  background-attachment: fixed

}



@media screen and ( max-width:768px) {
	.section-about {
	  min-height: auto;
	  position:relative;
	  right:0;
	}
	.about-photo{
	  height: auto;
	  position: static;
	  width:calc(100% - 8%);
	  margin-left:8%;

	  
	}
	.about-inner{

    position:absolute;
    left:0;
    top:50%;
    transform:translate(0, -50%);
	}
}



.akahimo{
  width:100%;
  max-width:1000px;
  position: relative;
  left:130px;
  z-index: 99;
  margin:-75px 0 -400px;

    stroke-dasharray: 3000;
    stroke-dashoffset: 500;
   animation: line-animation 10s linear 1;
   animation-fill-mode: forwards;
}



.h3{
  text-align: center;
}

.section-works{
  /*position:absolute;
  width:48%;*/
/*  height:200vh;*/
  background-color: rgba(232, 228, 228, 0.6);
  /*background-color: rgba(255, 255, 255, 0.6);*/
/*  
  position:relative;
  left:100px;
*/
/*  margin-top: 580px;*/
  width:100%;
  max-width:600px;
  position:relative;
  z-index: 30;
}


.container{
  display: flex;
  flex-wrap: wrap ;
  padding: 100px 20px 0;
  gap: 20px;
  
}




.works-item{
  width: calc((100% - 20px) / 2);
  box-sizing: border-box;
/*  background-color: whitesmoke;*/
  background-color: #fff;
/*  padding:100px 0 0 0;*/
  border:solid 10px #fff;
}
@media screen and ( max-width:768px) {

	.works-item{
	  width: auto;
	}
}



.h3works{
  text-align: center;
  font-size: 2rem;
  line-height: 1.8;
  margin:200px 0 0 0;
  background-color: whitesmoke;
}

.works-itemphoto{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:top;
  
  
}

.works-footer{
  margin-top:200px;
  padding:100px;
  background-color: #552D2D;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.logo-footer{
  width:35%;
}

.link-contact{
  border-radius:3px;
  margin-top:10px;
  padding:3px 5px;
  background:#fff;
  color:#000;
  text-decoration:none;
  font-size:1.0rem;
}



.links{
  display:flex;
  gap: 5px;
}
.link-category{
  border-radius:3px;
  padding:3px 5px;
  background:#fff;
  color:#552D2D;
  text-decoration:none;
  font-size:1.0rem;
  border: 1.5px solid #552D2D;
  margin: 1.5px 0;
}


.button-radius{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 1em;
/*  width: 100px;*/
  color: #333;
  font-size: 1.4rem;
  font-weight: 700;
  background-color: #B5ACAC;
  border-radius: 30vh;
}

.aside{
  position:fixed;
  bottom:30px;
  left:calc(( 100% - 1200px ) / 2 );

  transform:translateX(-40px);
}
.aside-container{

  padding:10px;
}
/*.aside-icon{
}*/
.aside-icon .fa-brands{
  color:#000;
  font-size:3rem;
  transform:rotate(-90deg);
}



.footer{
  max-width:1200px;
  max-height: 700px;
  margin:0 auto;
  position:relative;
  padding-bottom:150px;
  /*border-bottom:2px solid #552D2D;*/
}


/* pages
---------------- */

/* about*/


.about-container{
  display:flex;
}


.box-visual{
  order:2;
  width:65%;
  max-width:800px;
/*  height:100%;*/
/*  max-height:600px;*/
/*
  position:absolute;
  top:200px;
  bottom: 0;
  left:40%;
*/
}



.box-text{
  order:1;
  width:35%;
  max-width:600px;
/*  height:100%;*/

/*  max-height:600px;*/
/*
  top:30%;
*/
/*  
  position:absolute;
  bottom:0;
  right:55%;
*/

  line-height: 1.8;
}

.h3{
  text-align: center;
  padding-bottom: 40px;
}

/* works*/


.archive-works{
  background-color: rgba(255, 255, 255, 0.6);
/*  width: calc(100% - 200px);*/
  position:relative;
  margin:0 auto;
  text-align:center;
  z-index: 30;
}


.archive-works .container{
  display: flex;
  justify-content: center;
  max-width:1200px;
  flex-wrap: wrap ;
  padding: 60px 0 0;
  gap: 50px;
  
}

.archive-works .container::after{
  content:"";
  display: block;
  width: calc((100% - 200px) / 3);
  
}

.archive-works .container::before{
  content:"";
  display: block;
  width: calc((100% - 200px) / 3);
  order:1;
}




.archive-works .works-item{
  width: calc((100% - 200px) / 3);
  box-sizing: border-box;
  background-color:#e3dcdc;
  border:solid 10px #e3dcdc;
}

.archive-works .h3works{

  text-align: center;
  font-size: 2rem;
  line-height: 1.8;
  margin:0 auto;
  background-color: #fff;
}



.archive-works .works-itemphoto{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:top;
  
}



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

	.archive-works .works-item{
	  width: auto;
	  margin:0 4%;
	}
}



/*single*/

.section-works-single{
  
  background-color: #fff;
  width:100%;
  max-width:1000px;
  position: relative;
  margin:0 auto;
  z-index: 30;


}


.works-item-single{
  width: 100%;
  box-sizing: border-box;
/*  background-color: whitesmoke;*/
  background-color: #fff;
/*  padding:100px 0 0 0;*/
  border:solid 10px #fff;
}



.h3single{
  text-align: center;
  font-size: 2rem;
  margin:0, auto;
  background-color: #fff
}



/* contact*/



.h3contact{
text-align: center;
}



.form-area {
  max-width:700px;
  margin:0 auto;
  /*
  background-color: whitesmoke;
  border:1px solid #552D2D;*/
  padding:35px;
  display:flex;
  flex-wrap: wrap;
 
}


.form-area dt{
  width:200px;
  padding:15px 0;
  font-size:1.5rem;
  font-weight:bold;
  line-height:25px;

}


.form-area dt .required::after{
  content:'必須';
  color: #eb4f32;
  font-size:10px;
  margin-left: 10px;
}

.form-area dd{
  width: 350px;
  padding:10px 0;
}
  

.input-text{
  width: 100%;
  max-width:400px;
  height: 40px;
  padding-left: 10px;
  padding-right: 10px;

}

.message{
  width: 100%;
  height:150px;
  padding: 10px;
  line-height:1.5;
}

.submit-buttom{
  margin: 0 auto;
  display: flex;
  justify-content: center;
}


.works-content{
  font-size:9px;
}



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