html { scroll-behavior: smooth;}
a {
	text-decoration:none;
}
.pc {
	display:flex;
}
.sp {
	display:none;
}

/* -----------------------
   HERO
----------------------- */
.hero {
	position: relative;
	height: 100vh;
	background-image: url(http://test.jakagi.net/wp-content/uploads/2025/10/Rectangle-15.jpg);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
  }
  
  .hero_inner {
	padding-left: 50px; 
  }
  
  .hero_copy {
	text-align: left;
	font-size: 2.4rem;
	font-weight: bold;
	letter-spacing: 0.03em;
  }
  
  @media screen and (max-width: 767px) {
	.hero {
	  justify-content: center; 
	  align-items: center; 
	  text-align: left;    
	}
  
	.hero_inner {
	  padding-left: 0; 
	  width: 100%;
	  display: block; 
	}
  
	.hero_copy p {
	  text-align: left;
	  font-size: 1.2rem; 
	  padding: 0 20px;   
	}
  }
  
  
  /* -----------------------
	 SECTION共通
  ----------------------- */
  section {
	padding-left: clamp(20px, 5vw, 50px);
	padding-right: clamp(20px, 5vw, 50px);
	max-width: var(--container-max);
	margin: 0 auto;
  }
  
  .section_title {
	font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "MS PMincho", serif;
	font-size: var(--font-size-3xl);
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-bottom: clamp(50px, 7vw, 70px);
	line-height: 1
  }
  
  .service,.about,.news,.work,.shop,.contact {
	  padding-top: clamp(80px, 10vw, 150px);
  }
  
  
  /* -----------------------
	 SERVICE
  ----------------------- */
  .service_list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
  }
  
  .service_item {
	  width: 22%;
	  aspect-ratio: 1 / 1;
	  background: #d9d9d9;
	  border-radius: 50%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
  }
  
  .service_item p {
	  font-size: var(--font-size-2xl);
	  font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "MS PMincho", serif;
	  line-height: 1.2;
	  font-weight: 600;
  }
  
  @media screen and (max-width: 767px) {
	  .service_item {
		  width: 45%;
		  margin-bottom: 30px;
	  }
  }
  
  /* -----------------------
	 ABOUT
  ----------------------- */
  .about {
	text-align: center;
  }
  
  .about_copy {
	font-size: var(--font-size-2xl);
	font-weight: bold;
	margin-bottom: 50px;
	line-height: 1;
  }
  
  .about_text {
	  font-size: 1.6rem;
  }
  
  @media screen and (max-width: 767px) {
	  .about_copy {
		  margin-bottom: 20px;
	  }
  }
  
  /* -----------------------
	 NEWS
  ----------------------- */
  .news {
	text-align: center;
  }
  
  .news_list {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
  }
  
  .news a {
	  border-bottom: 1px solid;
  }

  .dt {
	display: flex;
	gap: 20px;
	margin-bottom: 10px;
  }
  
  .dt p {
	font-size: 2rem;
  }
  
  @media screen and (max-width: 767px) {
	.dt p {
		font-size: 1.6rem;
	  }


  }
  
  /* -----------------------
	 WORK
  ----------------------- */
  .work {
	text-align: center;
  }

  .work_list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
  }
  

  @media screen and (max-width: 767px) {
	
  }
  
  /* -----------------------
	 SHOP
  ----------------------- */
  .shop {
	text-align: center;
  }

  .shop_inner {
	display: flex;
	justify-content: space-between;
	gap: 50px;
  }
  
  .shop_img {
	  width: 50%
  }
  
  .shop_img img {
	width: 100%;
  }
  
  .shop_info {
	text-align: left;
	width: 50%
  }
  
  .shop_info p {
	  margin-bottom: 20px;
  }
  
  .shop_name {
	  font-weight: 500;
	  font-size: var(--font-size-lg);
	  margin-bottom: 30px;
  }
  
  @media screen and (max-width: 767px) {
	  .shop_inner {
		  flex-direction: column;
		  gap: 30px;
	  }
  
	  .shop_img {
		  width: 100%;
	  }
  
	  .shop_info {
		  width: 100%;
	  }
  
	  .shop_name {
		  margin-bottom: 15px;
	  }
  }
  
  /* -----------------------
	 CONTACT
  ----------------------- */
  .contact {
	  padding-bottom:var(--container-bottom);
	  text-align: center;
  }
  .contact_text {
	  font-size: 1.8rem;
  }
  
  @media screen and (max-width: 767px) {
	  .contact_text {
		  font-size: 1.6rem;
	  }
  }
  
  /* -----------------------
	 ボタン共通
  ----------------------- */
  .btn_wrap {
	  margin-top: clamp(50px, 10vw, 80px);
	  margin-bottom: 7px;
  }
  
  .btn_more {
	  border: solid 1px #000;
	  padding: 10px 70px;
	  position: relative;
	  color: #000;
	  font-size: 2rem;
	  font-weight: 400;
  }
  
  .btn_more:before {
	  width: 89px;
	  transform: translate(30px);
	  content: "";
	  position: absolute;
	  top: 2.3rem;
	  right: -19px;
	  height: 1px;
	  background-color: #000;
  }
  
  .btn_more:after {
	  width: 21px;
	  transform-origin: right center;
	  transform: translate(30px) rotate(25deg);
	  content: "";
	  position: absolute;
	  top: 2.3rem;
	  right: -19px;
	  height: 1px;
	  background-color: #000;
  }
  
  .btn_more:hover {
	  background: #d9d9d9;
	  color: #000;
	  transition: .3s all ease;
  }