@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

/*/▼帯バナー削除用CSS▼//*/
#beltbnr {
  display: none;
}
.h_bar{
  display: none;
}
/*/▲帯バナー削除用CSS▲//*/

html {
  scroll-behavior: smooth;
}
#shirt,
#cardigan,
#jacket {
  scroll-margin-top: 120px;
}
#cardigan,
#jacket {
  margin-top: 10%;
}


#mainArea {
  letter-spacing: 0;
  line-height: 2;
  overflow: hidden;
  margin: 0 auto;
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
}
#mainArea div {
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-optical-sizing: auto;
}
#mainArea p {
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.pc { 
  display: block;
  width: 900px;
  margin: 0 auto;
}
.sp { 
  display: none;
}
section {
  margin: 0 auto 13% auto;	
	position: relative;	
}
.f-f {
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6rem;
  font-size: 1.28rem;
  letter-spacing: 0.5px;	
  color: #161616;	
}

.under_ {
  margin: 2% auto 5% auto;
  clear: both;
}
.back-b {

}
.lead {
  width: 100%;
  margin: 2em auto 7em;
  position: relative;
}
.lead p {
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-align: center;	
	padding: 1em 0 0 0;
	font-size: 1.35rem;
	line-height: 2.2;
  letter-spacing: 0.5px;
  color: #161616;		
}

#page_nav {
	width: 100%;
  margin: 0 auto;
	padding: 0 0 0 0;	
  z-index: 1;	
}
#page_nav ul {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}
#page_nav ul li {
  margin: 0;
  padding: 0;
}
#page_nav ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #161616;
}
#page_nav .txt {
  margin-top: 0;  
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400; 
  font-size: 1.7rem;
  letter-spacing: 0.5px;
  text-align: center;
  color: #161616;
  text-underline-offset: 11px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}


/*///*/
.items_wrap {
  width: 100%;
  position: relative;
}
.comment_ {
  font-size: 1.3rem;
  line-height: 2.0;
  margin: 2.5% auto 0 auto;
}

/*///*/
.coord {
  position: relative;
  width: 880px;
  margin: 200px auto 0;
  display: flex;
  justify-content:space-between;
  align-items:center;
  background: none;
}
.coord::before{
  content:"";
  position:absolute;
  left:40%;
  right:0;
  bottom:19%;
  width: 65%;
  height: 60%;
  background:#fbf6f0;
  z-index:0; 
}
.coord.big::before{
  content:"";
  position:absolute;
  left:40%;
  right:0;
  bottom:-2%;
  width: 65%;
  height: 97%;
  background:#fbf6f0;
  z-index:0; 
}
.coord .ld_img,
.coord .text_wrap{
  position:relative;
  z-index:1;
}
.coord .ld_img {
  width: 450px;
  margin: -8% 0 0 0;
}
.coord .text_wrap {
  width:400px;
  padding: 0 3%;
}
.coord.reverse {
  flex-direction: row-reverse;
}
.coord.reverse::before {
  left: -3%;
  right: 0;
  bottom: 19%;
  height: 60%;
}

.color_ttl{
  position: absolute;
  transform: translateY(-50%);
  z-index: 3;
}
.color_ttl.white {
  left: -9%;
  top: 10%;
}
.color_ttl.s_2 {
  left: -88%;
  top: 9%;
}
.color_ttl.s_3 {
  left: -9%;
  top: 91%;
}
.color_ttl.c_1 {
  left: -11%;
  top: 86%;
}
.color_ttl.c_2 {
  left: -10%;
  top: 9%;
}
.color_ttl.c_3 {
  left: -9%;
  top: 91%;
}
.color_ttl.c_4 {
    left: -9%;
    top: 91%;
}
.color_ttl.j_1 {
    left: -9%;
    top: 86%;
}
.color_ttl.j_2 {
  left: -88%;
  top: 9%;
}
.color_ttl.j_3 {
  left: -9%;
  top: 91%;
}
.color_ttl.j_4 {
  left: -10%;
  top: 9%;
}
.color_ttl p{
    margin:0;
    font-family:"EB Garamond", serif !important;
    font-optical-sizing:auto;
    font-weight:400 !important;
    font-style:normal;
    color:#161616;
    opacity:0;
    line-height: 1;
    text-align: center;  
}
.color_ttl.white p,
.color_ttl.j_1 p {
    color:#fff;
}
.coord.active .color_ttl .ttl{
  font-size:20px;  
  animation: softFade 2s ease-out forwards;
  animation-delay: .5s;
}
.coord.active .color_ttl .num{
  font-size: 40px;
  animation: softFade 2s ease-out forwards;
  animation-delay: 1s;
}
.coord.active .color_ttl .sub{
  font-size:12px;
  margin-top: 1%;    
  animation: softFade 2s ease-out forwards;
  animation-delay: 1.5s;
}
@keyframes softFade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.link_wrap a{
  position: relative;
  display: block;
  overflow: hidden;
}
.link_wrap img{
  width: 100%;
  display: block;
  transform: translateZ(0);
}
.link_wrap a:hover img{
  opacity: 1 !important;
}
.link_overlay{
  position: absolute;
  inset: 0;
  background: rgba(72,72,72,0.3);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index:2;
}
.link_wrap a:hover .link_overlay{
  opacity: 1;
}


.ld_img img {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.coord.active .ld_img img{
  opacity: 1;
}



/* slide */
.slider {
  width: 100%;
  margin: 0 auto;
}
.slider img {
  width: 100%;
  height: auto;
}
.slick-dots {
  left: 50%;
  transform: translateX(-50%);
}
.slick-dots li {
	position: relative;
	display: inline-block;
	height: 20px;
	margin: 0 2px;
	padding: 0;
	cursor: pointer;
}
.slick-dots li button {
	font-size: 0;
	line-height: 0;
	display: block;
	width: 20px;
	height: 20px;
	padding: 2px;
	cursor: pointer;
	color: transparent;
	border: 0;
	outline: 0;
	background: 0 0;
}
.slick-dots li button:before {
  font-size: 10px;
  top: 6px;
  color: #da2276;  
}
.slick-dots li.slick-active button:before {
  opacity: .75;
  color: #da2276;
}
.slide_img {
  z-index: 3;	
}
.slide_img img {
	width: 100%;
	height: auto;	
}


.styling {
	position: relative;
  padding: 0;
	width: 1000px;
  margin: 9% auto 6% auto;
  text-align: center;
}
.styling h4 {
  color: #161616;
  font-size: 2rem;
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400; 
	letter-spacing: 0.8px;
	line-height: 1.2;
	display: inline-block;
  margin-bottom: 2%;
}

@media (max-width:1600px){
  .hacobune-gallery {
    width: 1240px;
  }
  .hacobune-logo {
    margin: 0 239px 0 0 !important;
  }
}
@media (max-width:1200px){
  .hacobune-gallery {
    width: 100%;
  }
  .hacobune-logo {
    margin: 0 0 !important;
  }
}
@media (max-width:1024px){
  .hacobune-gallery {
    width: 100%;
  }
  .hacobune-logo {
    margin: 0 0 !important;
  }
}

/*///*/
.creditArea {
  margin: 6% 0 0 0;
}
.creditArea .f-f {
  text-align: center;
}
.main_creditArea {
	padding: 0;
	margin-top: 5%;
}
.main_creditArea table {
	width: 100%;
}
.main_creditArea table tr {
	padding-bottom: 5%;
}
.main_creditArea table td.txt {
  width: 100%;
  padding: 0;
	height: 35px;
  line-height: 1.5;
  vertical-align: middle;  
}
.main_creditArea table td.txt b {
	font-weight: normal;
	font-size: 1.2rem;	
}
.main_creditArea table td.btn {
  vertical-align: middle;
}

/*////*/
.button_bl {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
  width: 60px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #161616;
  border: solid 1px #161616;	
  text-decoration: none;
	color: #fff;
	letter-spacing: 1px;
  border-radius: 15px;  
}
.button_bl:hover {
  background: none;
  border: solid 1px #161616;
  color: #161616 !important;
  transition: .3s;
}
.button_pi {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
  width: 60px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #da2276;
  border: solid 1px #da2276;	
  text-decoration: none;
	color: #fff;
	letter-spacing: 1px;
  border-radius: 15px;  
}
.button_pi:hover {
  background: none;
  border: solid 1px #da2276;
  color: #da2276 !important;
  transition: .3s;
}

/*////*/
.styling-link {
  margin: -85px auto 30px auto;
	display: block;
  width: 30%;	
}
.styling-link a {
  padding: 0 3%;
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.4rem;
  background-color: #da2276;
  border: 1px solid #da2276;
  color: #fff;
  text-decoration: none;
  transition: background 1s;
  display: block;
  text-align: center;
  border-radius: 15px;  
}
.styling-link a:hover {
  background: none;
  border: 1px solid #da2276;   
  color: #da2276;
}
.related-link {
  margin: 5px auto 0 auto;
	display: block;
  width: 30%;	
}
.related-link a {
  padding: 0 3%;
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.4rem;
  border: 1px solid #161616;
  background-color: #161616;
  color: #fff;
  text-decoration: none;
  transition: background 1s;
  display: block;
  text-align: center;
  letter-spacing: 1px;
  border-radius: 15px;  	  
}
.related-link a:hover {
  background: none;
  border: 1px solid #161616;   
  color: #161616;
}

/*////*/
.fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s, transform 1s;
}
.fade.active {
  opacity: 1;
  transform: translateY(0px);
}


/* SP */
@media screen and (max-width: 767px) {
.pc { 
  display: none;
}
.sp { 
  display: block;
  width: 100%;
  margin: 0 auto;
}
.lead {
  width: 90%;
  margin: 1em auto 4em;
  position: relative;
}
.lead p {
  font-size: 1.33rem;
  line-height: 2;
  text-align: left;  
}
.lead p br {
  display: none;
}
.f-f {
  line-height: 1.3rem;
}
#shirt,
#cardigan,
#jacket {
  scroll-margin-top: 60px;
}
#page_nav {
  margin: 0 auto 20% auto;
}

.items_wrap {
  margin: 0 auto 30% auto;
}
.coord {
  flex-direction: column;
  display: block;
  width: 100%;
  margin: 0 auto 35% auto;
}
.coord .ld_img {
  width: 90%;
  margin: 0 0 0 10%;
}
.coord.left .ld_img {
  width: 90%;
  margin: 0 10% 0 0;
}
.coord.big .ld_img {
  width: 100%;
  margin: 0 auto 13% auto;
}
.coord .text_wrap {
  margin: 7% auto 10% auto;
  width: 95%; 
}
.coord::before {
  left: 0;
  right: 0;
  bottom: -5%;
  width: 100%;
  height: 47%;
}
.coord.big::before {
  left: 0;
  right: 0;
  bottom: -4%;
  width: 100%;
  height: 65%;
}
.coord.reverse::before {
  left: 0;
  right: 0;
  bottom: -5%;
  height: 47%;
  width: 100%;
}

.color_ttl {
  top: 46%;
  margin-left: -42px;
}
.color_ttl p {
  font-weight: 300 !important;
  font-size: 39px;
}
.coord.active .color_ttl .ttl {
  font-size: 18px;
}
.coord.active .color_ttl .num {
  font-size: 37px;
}
.coord.active .color_ttl .sub {
  margin-top: 4%;
}
.color_ttl.white {
  left: 88%;
  top: 11%;
}
.color_ttl.s_2 {
  left: 17%;
  top: 9%;
}
.color_ttl.s_3 {
  left: 96%;
  top: 91%;
}
.color_ttl.c_1 {
  left: 89%;
  top: 89%;
}
.color_ttl.c_2 {
  left: 90%;
  top: 11%;
}
.color_ttl.c_3 {
  left: 89%;
  top: 91%;
}
.color_ttl.c_4 {
  left: 89%;
  top: 91%;
}
.color_ttl.j_1 {
  left: 88%;
  top: 90%;
}
.color_ttl.j_2 {
  left: 95%;
  top: 10%;
}
.color_ttl.j_3 {
  left: 95%;
  top: 91%;
}
.color_ttl.j_4 {
  left: 94%;
  top: 11%;
}

.creditArea {
  margin: 7% 0 0 0;
}

.styling {
  padding: 0 0;
	width: 100%;
  margin: 20% auto 0 auto;
}
.styling-link {
  margin: -80px auto 60px auto;
  display: block;
  width: 90%;
}
.related-link {
  margin: -30px auto 0 auto;
  display: block;
  width: 90%;
}

.hacobune-gallery {
  width: 100%;
}
.hacobune-logo {
  margin: 0 !important;
}

/*--スタッフスタイリング表示調整--*/
.hacobune-gallery {
  position: relative;
  z-index: 98;
}

}