@charset "UTF-8";
/* CSS Document */

body{
    max-width:1300px;
    margin:0 auto;
}
.header-content{
    max-width:1300px;
}
.container {
  display: flex;
  align-items: stretch;
  padding-top:5%;
  gap: 2%
}

/* 仕様などに使う見出し */
.sub_ttl {
	font-size: 17px;
	line-height: 140%;
	background: #e0d5cd;
    color: #804C34;
	margin: 10px 0;
	padding: 10px 15px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	-webkit-border-radius: 5px;
}

/* 商品名 */
.main_ttl{
  padding-top:10%;
}
.main_ttl h1{
  text-align:center;
  color: #000;
  margin-top: 24px;
  font: 600 48px Hiragino Kaku Gothic ProN, -apple-system, Roboto, Helvetica, sans-serif;
  background: linear-gradient(90deg, #aba088 0% 100%);
  background-repeat: no-repeat;
  background-size: 40px 3px;
  background-position: bottom;
  padding-bottom: 24px;
}
/* 画像エリアここから */
.image-content {
  flex: 1 1 0;/* 横幅を1:1に分割 */
  max-width: 50%;
  box-sizing: border-box;
  display: flex;/* 中の画像を縦中央寄せするためにflex化 */
  flex-direction: column;
  justify-content: space-around;
}
.main-image {
  aspect-ratio: 1.50;
}
.grid-image-tall {
  aspect-ratio: 0.72;
  margin-bottom: 11px;
}
.grid-image-wide {
    aspect-ratio: 1.49;
    margin-bottom: 11px;
}
/* 画像エリアここまで */

/* テキストエリアここから */
.text-content {
  flex: 1 1 0; /* 横幅を1:1に分割 */
  max-width: 50%;
  box-sizing: border-box;
  display: flex; /* 中のテキストを縦中央寄せする場合 */
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.text_area {
  display: flex;
  margin-top: 6%;
  width: 100%;
  flex-direction: column;
  color: #000;
  border: 1px solid #000;
  justify-content: flex-start;
  font: 300 18px / 26px Hiragino Kaku Gothic ProN, -apple-system, Roboto, Helvetica, sans-serif;
  padding:4%;
  margin:3% 0;
}
.title_product {
    color: #000;
    font: 600 26px / 26px Hiragino Kaku Gothic ProN, -apple-system, Roboto, Helvetica, sans-serif;
    border: 1px solid #000;
    padding: 4%;
    text-align:center;
}
.text_area p{
    padding-bottom: 3%;
    line-height: 170%;
    /*font-size:1.2em;*/
}
/* テキストエリアここまで */

/* 珠里さんコメントここから */
.ambassador-container {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.ambassador-image-wrapper {
  width: 30%;
  flex-shrink: 0;
  padding: 0 0 0 0;
  overflow: hidden;
}
.ambassador-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.5);
  transform-origin: 20% 20%;/*左右 上下*/
  aspect-ratio: 1.0;
}
.ambassador-description {
    color: #000;
    font: 300 16px / 26px Hiragino Kaku Gothic ProN, -apple-system, Roboto, Helvetica, sans-serif;
    margin-top: 0px;
    line-height: 170%;
    border: 1px solid #000;
    padding: 4%;
}
.ambassador-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
/* --- 吹き出し（右側・しっぽは左向き） --- */
.ambassador-description{
  position: relative;
  margin: 0;/* 既定の余白をリセット */
  padding: 10px 12px;
  background: #f1ede4 20%;/* 吹き出しの背景色（お好みで） */
  color: #000;
  border: 1px solid #d7d1c6;/* 枠色（お好みで） */
  border-radius: 16px;/* 角丸 */
  line-height: 1.8;
}
/* 枠（外側）のしっぽ */
.ambassador-description::before{
  content: "";
  position: absolute;
  left: -14px;/* しっぽの根元位置（負で左にはみ出す） */
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: 12px 14px 12px 0;/* 上 右 下 左 */
  border-color: transparent #d7d1c6 transparent transparent; /* 枠色 */
}
/* 背景（内側）のしっぽ：外側より一回り小さく、少し内側に */
.ambassador-description::after{
  content: "";
  position: absolute;
  left: -12px;/* ::before より 2px 右へ */
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: 11px 13px 11px 0;
  border-color: transparent #f5f0e6 transparent transparent; /* 背景色 */
}
/* 珠里さんコメントここまで */

/* 仕様エリアここから */
#itemspeck_area {
    padding: 100px 15px 0 15px;
    margin: -60px auto 0;
    color: #804C34;
}
dl.spec_list {
	overflow: hidden;
	padding: 10px 0 0 0;
	margin: 0 0 10px 0;
	border-bottom: 1px dashed #CEBFB2;
	text-align: left;
    width: 100%;
}
dl.spec_list dt{
	width: 25%;
	float: left;
	clear: both;
	margin: 0;
	padding: 10px 1%;
	font-weight: normal;
	border-top: 1px dashed #CEBFB2;
	text-align: left;
}
dl.spec_list dd{
	width: 71%;
	float: left;
	margin: 0;
	padding: 10px 1%;
	border-top: 1px dashed #CEBFB2;
}
.blue_ss {
        color: #0066FF;
}
/* 仕様エリアここまで */

/* ボタンエリアここから */
.button-area {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin: 40px 0;
}
.product-button {
  width: 25vw;
  margin: 30px auto 0;
}
.details-button {
  align-self: stretch;
  border-radius: 80px;
  padding: 36px 36px;
  border: 1px solid #000;
  font-size: 18px;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  text-align: center;  
  transition: background-color .2s ease, color .2s ease;
}
.details-button:hover,
.details-button:focus-visible {
  background-color: #e0d5cd;
  color: #804C34;
  border: 1px solid #804C34;
}
/* ボタンエリアここまで */

.kugiri{
  margin:7% 5% 7%;
}

/* その他の商品エリアここから */
.others {
    padding: 0 15px 0 15px;
    margin: 0 auto 0;
}
.others_wrap iframe[data-autoresize]{
  display:block;
  width:100%;
  min-height:700px; /* JSが失敗しても“極小”にならない保険 */
  height:auto !important; /* CSSで固定されていた場合を解除 */
}
/* その他の商品エリアここまで */



/* タブレット用（画面幅が 1024px 以下） */
@media screen and (max-width: 1024px) {
body{
  width:100%;
}
.main_ttl h1{
  font: 600 32px Hiragino Kaku Gothic ProN, -apple-system, Roboto, Helvetica, sans-serif;
}
.title_product {
  font: 600 20px / 26px Hiragino Kaku Gothic ProN, -apple-system, Roboto, Helvetica, sans-serif;
}
.text_area {
  font: 300 14px / 26px Hiragino Kaku Gothic ProN, -apple-system, Roboto, Helvetica, sans-serif;
}  
.ambassador-description {
  font: 300 14px / 26px Hiragino Kaku Gothic ProN, -apple-system, Roboto, Helvetica, sans-serif;
}
#itemspeck_area {
  font-size:14px;
}
.details-button {
  font-size:15px;
  padding:24px;
}
}



/* スマホ用（画面幅が 768px 以下） */
@media (max-width: 768px) {
body{
  width:100%;
}
.sp-hidden{
  display:none !important;
}
.container {
  padding:5% 5% 0;
  display:block;
}
.main_ttl{
  padding-top:15%;
}
.main_ttl h1{
  font: 600 28px Hiragino Kaku Gothic ProN, -apple-system, Roboto, Helvetica, sans-serif;
  padding-bottom: 16px;
}
.image-content{
 max-width:100%;
}
.title_product {
 font: 600 18px Hiragino Kaku Gothic ProN, -apple-system, Roboto, Helvetica, sans-serif;
 margin-bottom:5%;
}
.slider-container img {
 aspect-ratio: 16 / 12;
}
.slick-dots {
  bottom:-10px !important;
}
.text-content {
 max-width:100%;
}
.text_area {
  font: 300 14px/20px Hiragino Kaku Gothic ProN, -apple-system, Roboto, Helvetica, sans-serif;
}
.text_area p{
    padding: 1.5% ;
}
.ambassador-container {
  display: flex;            /* 横並びにする */
  flex-direction:row;
  align-items: center;       /* 高さ方向の中央揃え */
  gap: 20px;                 /* 画像とテキストの間隔 */
  margin-top:20px;
}
.ambassador-image-wrapper{
  width: 110px;
  height: 110px;
  border-radius:50%;
}
.ambassador-image {
  object-fit: cover;
  margin: 0 0;
  transform: scale(1.8);
  transform-origin: 20% 15%;/*左右 上下*/
  border-radius: 0px;
}
.ambassador-content {
  max-width: 60%;
}
.ambassador-description {
  font: 300 14px/18px Hiragino Kaku Gothic ProN, -apple-system, Roboto, Helvetica, sans-serif;
  margin-top: 5%;
  line-height: 170%;
  border: 0px solid #000;
  border-radius:15%;
  background:#f1ede4 20%;
}
/* 仕様エリアここから */
.sub_ttl {
	font-size: 14px;
}
dl.spec_list {
	font-size: 14px;
}
.blue_ss {
	font-size: 14px;
}
/* 仕様エリアここまで */

/* ボタンエリアここから */
.button-area {
  display: flex;
  flex-direction: column;
  gap: 36px;
  justify-content: center;
  align-items: center; /* 中央寄せ */
  margin: 50px 0;
}
.product-button,
.details-button {
  width: 100%;/* 幅を強制指定 */
  width: 220px;/* 必要に応じて最大幅も制御 */
  margin: 0 auto;/* 念のため */
  text-align: center;
}
.details-button {
  border-radius: 80px;
  padding: 18px 36px;
  border: 1px solid #000;
  font-size:14px;
}
/* ボタンエリアここまで */

.kugiri{
  margin:12% 5% 15%;
}

}