@charset "utf-8";
#about_page.new2026 .content-wrap {
  text-align: center;
}
#about_page.new2026 .top-image img {
  height: 55vw;
}
#about_page.new2026 p {
  line-height: 1.75;
  margin-bottom: 2%;
}
#about_page.new2026 .concept {
  width: 100%;
  position: relative;
}
#about_page.new2026 .concept .concept-image {
  height: 55vw;
}
#about_page.new2026 .concept .concept-image img {
  width: 100%;
  object-fit: cover;
  object-position: bottom;
}
#about_page.new2026 .concept .text-box {
  width: 90%;
  background: rgb(255, 255, 255, .8);
  padding: 5%;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
}
#about_page.new2026 .business {
  margin-top: 20vh;
  width: 100%;
}
#about_page.new2026 .float-box {
  width: 100%;
  margin: 0;
}
#about_page.new2026 .business .box01 {
  padding: 5% 8%;
}
#about_page.new2026 .business .box01:nth-of-type(odd) {
  background: #FFFAF0;
}
#about_page.new2026 .business .box01 h2 {
  font-size: 125%;
  margin-bottom: 5%;
}
#about_page.new2026 .business .box01 .icon {
  width: 80%;
  margin: 0 auto 5%;
}
#about_page.new2026 .promise {
  width: 100%;
}
#about_page.new2026 .content-item {
  text-align: left;
}
/* 共通：最初は透明 */
.fadein {
  opacity: 0;
  transition: opacity .9s ease, transform .9s ease;
  will-change: opacity, transform;
}
/* 奇数：左から */
.fadein:nth-of-type(odd) {
  transform: translateX(-28px);
}
/* 偶数：右から */
.fadein:nth-of-type(even) {
  transform: translateX(28px);
}
/* 表示 */
.fadein.is-show {
  opacity: 1;
  transform: translateX(0);
}
/*****************メインビジュアル*****************************/
.main-wrap {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
#about_page.new2026 .main-catch {
  color: #FFFFFF;
  font-family: "HGS明朝E", "HGS明朝", "Hiragino Mincho ProN", serif;
  position: absolute;
  left: 2.5%;
  top: 10%;
  z-index: 2;
  font-size: clamp(18px, 3.4vw, 40px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.45);
}
.top-text {
  font-size: clamp(18px, 3.4vw, 50px);
  line-height: 1.45;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.45);
}
/************購入ボタンアニメーション*****************/
.btn-buy {
  font-family:
    "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-size: clamp(20px, 2.2vw, 36px); /* 全体に効く（アイコンも一緒に） */
  padding-block: clamp(20px, 1.4vw, 24px);
  padding-inline: clamp(35px, 3.4vw, 40px);
  border-radius: clamp(12px, 1vw, 24px);
  background: #F6E4B3;
  color: #2b1a12;
  text-decoration: none;
  /* 立体感（上が少し明るく、下が少し暗い感じ） */
  box-shadow: 0 2px 0 rgba(255, 255, 255, .55) inset, 0 -2px 0 rgba(0, 0, 0, .08) inset, 0 5px 11px rgba(0, 0, 0, .18);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
  margin-bottom: 20%;
  margin-top: 5%;
  letter-spacing: 0.05em;
}
.btn-icon {
  width: 1.25em; /* 文字サイズ基準で一緒に伸縮 */
  height: auto;
  fill: #6B3F1D; /* 通常の豆色 */
  transition: fill .12s ease;
}
.top-btn .btn-buy {
  position: absolute;
  right: 2.5%;
  bottom: 8%;
  font-size: clamp(16px, 2.2vw, 36px); /* 全体に効く（アイコンも一緒に） */
  padding-block: clamp(6px, 1.4vw, 12px);
  padding-inline: clamp(12px, 3.4vw, 28px);
  border-radius: clamp(5px, 1em, 10px);
  margin-bottom: 0;
}
/* hover（PC想定。スマホはhover扱いが怪しいので mediaで制御） */
@media (hover:hover) {
  .btn-buy:hover {
    background: #4B220E;
    color: #fff;
  }
  .btn-buy:hover .btn-icon {
    fill: #F6E4B3; /* 背景色に合わせて豆を明るく */
  }
}
/* 押した時（クリック） */
.btn-buy:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .45) inset, 0 -1px 0 rgba(0, 0, 0, .10) inset, 0 6px 14px rgba(0, 0, 0, .16);
}
/*-----------------------------PC------------------------------ */
@media(min-width: 961px) {
  .only-sp {
    display: none;
  }
  .only-pc {
    display: block;
  }
  img {
    max-width: 100%;
  }
  #about_page.new2026 .top-image img {
    height: clamp(500px, 32vw, 780px);
    object-position: center 75%;
  }
  .content-wrap {
    line-height: 1.35;
    width: 75%;
    max-width: 1440px;
    margin: 0 auto;
  }
  #about_page.new2026 .omoi h1.content-title {
    text-align: center;
  }
  #about_page.new2026 .concept {
    display: block;
  }
	
#about_page.new2026 .concept .concept-image {
  height: clamp(500px, 32vw, 780px);
}
#about_page.new2026 .concept .text-box{
      width: 30%;
    left: 80%;
    top: 40%;
	padding:2.5% 5% ;
}
#about_page.new2026 .business,
	#about_page.new2026 .promise{
		width: 75%;
	}
	
#about_page.new2026 .business h1.content-title,
	#about_page.new2026 .promise h1.content-title{
		text-align: center;
	}
	#about_page.new2026 .business .box01 h2{
		text-align: center;
	}
	#about_page.new2026 .business .box01{
		padding: 5% 2%;
	}
	#about_page.new2026 .commitment-wrap{position: relative;}
	#about_page.new2026 .commitment-inn{
		flex-flow: row;		
	}
	#about_page.new2026 .commitment-point{
		margin-left: 5%;
	}
	#about_page.new2026 .commitment-point span{
		font-weight: bold;
		color:#ECBA2F;
		font-size: 110%;
	}
	
	#about_page.new2026 .sign-text{
		width: 20%;
    position: absolute;
    right: 0;
    top: 50%;
    z-index: -1;
	}
}
/*
タブレットのみ
----------------------------------------------------------- */
@media(max-width:960px) and (min-width: 641px) {}
/*
スマホのみ
----------------------------------------------------------- */
@media(max-width:640px) and (min-width: 320px) {
  .only-sp {
    display: block;
  }
  .only-pc {
    display: none;
  }
  img {
    max-width: 100%;
  }
  .main-wrap {
    position: relative;
  }
}