@charset "utf-8";
#user-guide {
  margin: 0;
  font-size: 16px;
}
#user-guide p {
  line-height: 1.75;
  margin-bottom: 2%;
}
.al-center {
  width: 92%;
  text-align: center;
  margin: 0 auto 10%;
}
.content-wrap {
  font-family:
    "Yu Mincho", "游明朝", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", "MS Mincho", serif;
  color: #5d737e;
  line-height: 1.5;
}
#user-guide ul, #user-guide ol {
  list-style: none;
  padding: 0 0 0 1.5em;
  margin: 0;
}
.content-wrap {
  text-align: center;
}
img {
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.breadcrumbs-wrap span {
  font-size: 12px;
}
.mgb-8{
	margin-bottom: 8%;
}
.red-t{
	color: #AA073E;
}
.big-t{
	font-weight: bold;
}

/* 共通：最初は透明 */
.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);
}


/*****************メインビジュアル*****************************/
#user-guide .main-wrap {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
#user-guide .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, 50px);
	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);
}
/******* コンテンツ***********/
#user-guide .concept .wrap{
	min-height: inherit;
	margin-bottom: 10%;
}
#user-guide .concept .wrap h2{
	text-align: left;
}

/* テキスト */
.catch-t {
  color: #5D737E;
  line-height: 1.2; /* ← 0はやめた方が安全 */
  /*  white-space: nowrap;  任意：改行させたくない場合 */
  font-size: clamp(18px, 3.4vw, 22px);
  font-weight: bold;
}

#user-guide .wrap dl,
#user-guide .wrap ul{
	text-align: left;
	margin: 0 auto;
	width: 90%;
}
#user-guide .wrap dl dt{
	font-weight: bold;
	padding-left: 1em;
}
#user-guide .wrap dl dd{
	border-bottom: 1px solid #707070;
	padding-bottom: 2%;
	margin-bottom: 2%;
	padding-left: 2em;
}
#user-guide ul li{
	margin-bottom: 2%;
}
figure {
  margin: 0;
}
figcaption {
  margin-bottom: 0.6em;
  font-size: clamp(13px, 1.6vw, 15px);
  color: #4a2a2a;
  font-weight: bold;
  text-align: center; /* 必要なら */
}
.content-box {
  margin-bottom: 8%;
}
.line-big {
  line-height: 1.6;
  font-weight: 300;
}
	.gift-wrapping h2,
	.mono-omoi h2{
		text-align: center;
	}
.gift-wrapping{
	background: #FFFAF0;
	padding: 10% 0;
	margin-bottom: 10%;
}
.gift-wrapping .gift-image01{
	width: 90%;
	margin: 5% auto;
}
.gift-wrapping .wrapping_box{
	width: 90%;
	margin: 5% auto 0;
	display: flex;
	justify-content: space-around;
}
.gift-wrapping .wrapping_box img{
	width: 96%;
}

.mono-omoi{
	background: #F1FEEC;
	padding: 10% 5%;
	margin-bottom: 10%;
}
#user-guide .mono-omoi p{
	margin-bottom: 3.5%; 
}
/*-----------------------------PC------------------------------ */
@media(min-width: 961px) {
  .only-sp {
    display: none;
  }
  .only-pc {
    display: block;
  }

  img {
    max-width: 100%;
  }
	
	.mgb-8{
		margin-bottom: 12%;
		
	}	
  .content-wrap {
    line-height: 1.35;
    width: 75%;
    max-width: 1440px;
    margin: 0 auto;
  }
  .content-wrap p {
    margin-bottom: 1.5%;
  }
  .top-image img {
    object-fit: cover;
    object-position: 80% center;
    height: clamp(500px, 32vw, 780px);
    width: 100%;
    overflow: hidden;
  }

  .catch01, .catch-text {
    font-weight: normal;
    font-feature-settings: "palt"1;
    letter-spacing: -0.02em;
  }
  .section-title {
    display: inline-block;
  }
	#user-guide .wrap{
		display: flex;
		justify-content: space-between;	
	}
	#user-guide .small-box{
		width: 32%;
		margin-bottom: 0;
	}
	#user-guide .small-box h2{
		margin-top: 5%;
	}

	.gift-wrapping,
	.mono-omoi{
		padding: 5%;
		width: 48%;
	}

}
/*
タブレットのみ
----------------------------------------------------------- */
@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;
  }
}