@charset "utf-8";
#coffee {
  margin: 0;
  font-size: 14px;
}
#coffee 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: #1E0101;
  line-height: 1.5;
}
#coffee ul, #coffee 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;
}

/* 共通：最初は透明 */
.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;
}
.main-catch {
  color: #FFFFFF;
  font-family: "HGS明朝E", "HGS明朝", "Hiragino Mincho ProN", serif;
  position: absolute;
  left: 2.5%;
  bottom: 5%;
  z-index: 2;
}
.catch01 {
  display: block;
  font-size: clamp(16px, 2.6vw, 38px);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.45);
  margin-bottom: 1%;
  font-weight: bold;
}
.catch-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);
  font-weight: bold;
}
/************購入ボタンアニメーション*****************/
.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);
}
/******* コンテンツ***********/
/* タイトル本体（豆＋文字） */
.title-inner {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: 0 .5em .2em; /* ← 下線との距離をここで調整 */
}
/* 豆アイコン */
.title-bean {
  width: clamp(1.25em, 3.4vw, 2.2em);
  height: auto;
  transform: translateY(.05em);
}
/* テキスト */
.title-text {
  color: #390303;
  line-height: 1.2; /* ← 0はやめた方が安全 */
  /*  white-space: nowrap;  任意：改行させたくない場合 */
  font-size: clamp(22px, 3.4vw, 36px);
  font-weight: bold;
}
/* 下線 */
.section-title {
  text-align: center;
  position: relative; /* ← 下線用 */
}
.section-title.short-title {
  display: inline-block;
  padding: 0 .5em .2em
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; /* ← テキストに近づけたいならここ */
  width: 100%;
  height: clamp(3px, .6vw, 5px);
  background: linear-gradient(to bottom, rgba(106, 42, 42, 0.15) 0%, rgba(106, 42, 42, 0.35) 30%, rgba(106, 42, 42, 0.75) 70%, rgba(106, 42, 42, 0.55) 100%);
  border-radius: 2px;
}
.section-sub-title .section-title::after {
  background: none;
}
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;
}
/*******日常に生まれる小さな特別な瞬間を********/
.scene01-box {
  position: relative;
  height: 35vh;
}
.scene01-text {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(255, 255, 255, .65);
  /*font-weight: bold;*/
  padding: 5% 2.5%;
  z-index: 10;
}
.scene01-photo {
  position: absolute;
  top: 0;
  width: 100%;
}
.scene01-photo img {
  height: 35vh;
  overflow: hidden;
  object-position: center center;
  object-fit: cover;
  width: 100%;
}
.photo-box {
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center; /* 縦中央 ← これが足りなかった */
  height: 15vh;
  overflow: hidden;
}
.photo-left img, .photo-right img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; /* ← トリミングの基準点 */
}
.scene04 figure img {
  width: 80%;
  margin: 5% auto 8%;
}
/*******マッハコーヒーとは********/
.about-main-image {
  height: clamp(235px, 30vw, 420px);
  overflow: hidden;
  margin-bottom: 2.5%;
}
.about-main-image img {
  transform: scale(1.1);
  object-fit: cover;
  object-position: center 38%;
  width: 100%;
}
.scene03-text {
  margin: 2.5% auto;
}
/***************ブレンド紹介******************/
.scene06.content-box {
  display: flex;
  flex-direction: column;
}
.scene06-grid {
  display: contents; /* ここが肝！ */
}
.scene06-col.col01 {
  order: 1;
}
.scene06-photo {
  order: 2;
  margin: 5% 0;
}
.scene06-col.col02 {
  order: 3;
}
.cart-btn {
  order: 4;
}
/**************3つの想い******************/
.omoi-row {
  margin-top: 5%;
}
.omoi-box {
  padding: 2.5% 5% 10%;
  background: #D9F2E6;
}
.omoi-box.omoi02 {
  background: #F8EACC;
}
.omoi-box.omoi03 {
  background: #F3E9F8;
}
.omoi-head {
  margin-bottom: 5%;
}
.omoi-box h3, .item-detail h3 {
  font-size: 18px;
  font-weight: bold;
  border-bottom: dotted #6A0505 2px;
  display: inline-flex;
  padding: 0 2em;
  margin-bottom: 5%;
}
#coffee .item-detail {
  border: none;
  width: 90%;
  margin: 0 auto;
}
#coffee .item-detail .item-name {
  margin: 0;
}
.photo img {
  display: block;
}
.omoi-box .photo-box {
  height: 12.5vh;
}
.omoi-box .photo-left img, .omoi-box .photo-right img {
  object-fit: cover;
  object-position: top center; /* ← トリミングの基準点 */
}
.omoi-box.omoi03 .photo-box {
  height: 20vh;
  align-items: stretch
}
.omoi-box.omoi03 .photo-left {
  width: 35%;
}
.omoi-box.omoi03 .photo-right {
  width: 65%;
}
.scene05 .omoi-image{width: 80%;margin: 0 auto 5%;}

/* 中のimgを枠いっぱいに */
.omoi-box.omoi03 .photo-right img {
  object-fit: cover;
  object-position: top center; /* トリミング中心 */
}
#coffee .scene06-text ul {
  line-height: 1.75;
  margin: 2.5% 0;
}
.scene06 .photo {
  height: 25vh;
  overflow: hidden;
}
.scene06 .photo img {
  object-fit: cover;
  object-position: center 60%;
  width: 100%;
  height: 100%;
}
.scene07-box1 {
  background: #F6EDD5;
  padding: 8% 0;
}
.scene07-text {
  margin: 5% auto;
}
.scene08 h3 {
  font-size: clamp(18px, 3.4vw, 40px);
  margin-bottom: 1.5%;
}
.scene08 .scene08-box1 {
  width: 95%;
  margin: 0 auto 3%;
  text-align: left;
  background: #F6EDD5;
  padding: 5%;
  border: 2px dotted #6A2A2A;
  margin-bottom: 2.5%;
  position: relative;
  box-sizing: border-box;
}
.coffee-icon {
  position: absolute;
  top: 6.5%;
  right: 2%;
}
.scene08 .scene08-box1 li {
  margin-bottom: 1%;
}
.scene08 .coffee-photo {
  height: 25vh;
  overflow: hidden;
  margin-bottom: 5%;
}
.scene08 .coffee-photo img {
  transform: scale(1.2);
  object-fit: cover;
  object-position: center 38%;
}
.content-wrap .scene08 .flow-box h3, .content-wrap .scene08 .flow-box p {
  text-align: left;
}
#coffee .flow-box {
  padding: 0;
  margin: 0;
}
.flow-box li {
  padding: 0 5%;
}
.flow-box li:nth-child(even) {
  background: rgb(246, 237, 213, .8);
  padding: 2.5% 5%;
  margin: 2.5% 0;
}
.flow-box li:last-child {
  margin-bottom: 0;
}
.master-photo {
  height: 45vh;
  overflow: hidden;
}
.master-photo img {
  object-fit: cover;
  object-position: right 8%;
  width: 100%;
  height: 100%;
}
.mame-copy {
  position: relative;
  display: inline-block; /* テキスト幅ベースにする */
  text-align: center;
  line-height: 1.8;
  padding: 0 5em; /* ←左右の豆ぶんの余白（ここ調整） */
}
/* 左右の豆（飾り） */
.mame-copy::before, .mame-copy::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 4.5em; /* 豆サイズ */
  height: 4.5em;
  transform: translateY(-50%);
  background: url("../images/mame-midori.png") no-repeat center / contain;
  opacity: .9;
}
.mame-copy::before {
  left: 0;
}
.mame-copy::after {
  right: 0;
}
.detail-point {
  width: 95%;
  margin: 0 auto 3%;
  background: #FCF6EE;
  padding: 5%;
  border: 2px dotted #6A2A2A;
  margin-bottom: 2.5%;
  position: relative;
  box-sizing: border-box;
}
.detail-point dl {
  text-align: left;
}
.detail-point dl dd {
  margin-bottom: 2.5%;
}
/*-----------------------------PC------------------------------ */
@media(min-width: 961px) {
  .only-sp {
    display: none;
  }
  .only-pc {
    display: block;
  }
  img {
    max-width: 100%;
  }
  .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;
  }
  .main-catch {
    position: absolute;
    top: 5%;
    left: 2.5%;
  }
  .catch01, .catch-text {
    font-weight: normal;
    font-feature-settings: "palt"1;
    letter-spacing: -0.02em;
  }
  .section-title {
    display: inline-block;
  }
  .omoi-box h3, .item-detail h3 {
    font-size: 20px;
  }
  .scene06-col.col02 .title-text {
    font-size: clamp(22px, 3.4vw, 32px);
  }
  .scene01-box {
    height: clamp(450px, 45vw, 780px);
  }
  .scene01-photo img {
    height: clamp(450px, 45vw, 780px);
  }
  .scene01-text {
    width: 30%;
    min-width: 390px;
    padding: 2.5% 1.5%;
    box-sizing: border-box;
    right: 5%;
    bottom: 5%;
    top: auto;
    left: auto;
    transform: none;
  }
  /*-------------人の手から生まれるやさしさの一杯-------------------*/
  .scene02.content-box {
    text-align: left;
  }
  .section-title {
    text-align: left;
    padding-right: 0.5em;
    margin-bottom: 2.6%
  }
  .scene02 .title-inner {
    padding: 0 .5em .2em 0.25em;
  }
  .scene02 .scene02-inner {
    display: flex;
    align-items: stretch;
    text-align: left;
  }
  .scene02-photo {
    width: 60%;
  }
  .scene02-text {
    width: 40%;
    padding-left: 2%;
  }
  .scene02-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* 必要なら left center / top center など */
    display: block; /* 画像下の謎の隙間対策 */
  }
  .photo-box {
    width: 65%;
    height: 25vh;
    min-height: 260px;
    margin: 0 auto;
  }
  .scene04.content-box {
    text-align: left;
  }
  .scene04.content-box .section-title.short-title {
    width: 70%
  }
  .scene04-inner {
    display: flex;
    width: 95%;
    margin: 0 auto;
  }
  .scene04-text p {
    margin-bottom: 1%;
  }
  .scene04-inner figure {
    width: 30%;
    margin-left: 5%;
  }
  .scene04-inner figure img {
    width: 100%;
  }
  /************************ブレンド紹介（PC）**************************/
  /* 土台 */
  .scene06.content-box {
    position: relative !important;
    /* ここ重要：写真エリアの高さを“箱”に持たせる */
    height: 50vw;
    min-height: 520px; /* 好みで調整 */
    max-height: 760px; /* 好みで調整 */
    overflow: hidden;
    padding: 0 0 10%;
  }
  /* 海の写真（背景） */
  .scene06 .photo.scene06-photo {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
    height: 100%;
    width: 100%;
  }
  .scene06 .photo.scene06-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* テキスト2カラム（写真の上） */
  .scene06-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4%;
    align-items: stretch; /* ★高さ揃える */
    height: 100%; /* ★写真高さに合わせる */
    padding: 6%;
    box-sizing: border-box;
  }
  /* ←お願いされてたやつ：PCのみ透過背景 */
  .scene06-col {
    background: rgba(255, 255, 255, .65);
    padding: clamp(16px, 2vw, 32px);
    box-sizing: border-box;
    height: 100%; /* ★左右の高さ揃える */
  }
  /* cart-btn側で「幅100%」「中央寄せ」を潰す */
  .fadein.scene06.content-box .cart-btn {
    position: absolute !important;
    right: 5% !important;
    bottom: 5% !important;
    width: auto !important; /* ←ここ重要 */
    max-width: none !important;
    left: auto !important;
    margin: 0 !important;
    display: block !important; /* flex/contents等を潰す */
    text-align: initial !important; /* centerが当たってたら潰す */
    z-index: 5 !important;
  }
  .fadein.scene06.content-box .cart-btn .btn-buy {
    margin: 0;
  }
  /* hoverで透過するのを確実に止める（既存CSSに勝つ） */
  .fadein.scene06.content-box .cart-btn a, .fadein.scene06.content-box .cart-btn a:hover {
    opacity: 1 !important;
    margin: 0;
  }
  /* 3カラム全体 */
  .omoi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1440px;
    margin: 2.5% auto 0;
    align-items: stretch; /* gridアイテムを同じ高さに */
  }
  .omoi-box {
    padding:8% 5%;
    display: grid;
    grid-template-rows: auto auto auto; /* head / photo / photo-box */
    align-content: start;
    height: 100%; /* ←これ大事：auto marginが効く土台 */
    box-sizing: border-box;
  }
  /* 見出しと本文をまとめる（HTMLに一枚wrapを足すのが綺麗） */
  .omoi-head {
    min-height: 200px; /* ←ここで3列の“画像開始ライン”が揃う */
  }
  .omoi-head h3 {
    margin-bottom: 3%;
  }
  .omoi-box.omoi01 > .photo {
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  .omoi-box.omoi01 > .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .omoi-box.omoi01 .photo-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    height: auto; /* ここ重要 */
    min-height: 0; /* ここ重要 */
  }
  .omoi-box.omoi01 .photo-left, .omoi-box.omoi01 .photo-right {
    aspect-ratio: 4 / 3; /* こっちも好みで */
    overflow: hidden;
  }
  .omoi-box.omoi01 .photo-left img, .omoi-box.omoi01 .photo-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .omoi-box.omoi03 .photo-box {
    width: 100%;
    height: 35vh;
  }
  .small-box {
    max-width: 1440px;
  }
  /* PCだけ、3つのカードを順番に出す */
  .omoi-row .omoi-box.fadein {
    transition-delay: 0s; /* デフォ */
  }
  .omoi-row .omoi-box.fadein:nth-child(1) {
    transition-delay: .00s;
  }
  .omoi-row .omoi-box.fadein:nth-child(2) {
    transition-delay: .3s;
  }
  .omoi-row .omoi-box.fadein:nth-child(3) {
    transition-delay: .6s;
  }
  .scene07-inner, .item-box {
    display: flex;
    justify-content: space-between;
  }
  .scene07-inner-block {
    width: 40%;
    margin-right: 5%;
  }
  .item-box {
    width: 55%;
  }
  .scene07-box1 {
    padding: 5% 0;
    margin-bottom: 5%;
  }
  .photo-item, .item-detail {
    width: 50%;
  }
  .scene07-inner .item-name {
    margin: 0 0 2.5vh;
  }
  .item-detail {
    word-break: keep-all; /* 日本語の途中で切れにくく */
    overflow-wrap: anywhere; /* ただし溢れそうなら折る */
    line-height: 1.9;
    padding: 0;
  }
  .scene07 .btn-buy {
    margin: 0;
    padding-block: 12px;
  }
  .item-detail .cart-btn {
    margin-top: 7%;
  }
  /*******淹れ方*******/
  .scene08 .section-title.short-title .sub-title {
    display: block;
    text-align: center;
    font-size: clamp(20px, 3.4vw, 30px);
    font-weight: bold;
  }
  .scene08-topbox {
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    margin-bottom: 5%;
  }
  .scene08 .scene08-box1 {
    display: flex;
    width: 65%;
    padding: 2%;
    margin: 0 0 0 2%;
  }
  .scene08 .scene08-box1 li {
    margin-bottom: 2%;
  }
  .scene08 .scene08-box1 .title-inner {
    gap: .2em;
    padding: 0 0 .2em;
  }
  .scene08 .scene08-box1 .title-text {
    font-size: clamp(18px, 3.4vw, 20px);
  }
  .scene08 .scene08-box1 .title-bean {
    width: 30px;
  }
  .scene08 .scene08-box1 .title-bean {}
  .scene08 .scene08-box1-one {
    width: 45%;
  }
  .scene08 .scene08-box1-two {
    width: 35%
  }
  .scene08 .scene08-box1-three {
    width: 20%;
  }
  .coffee-icon {
    top: 8%;
    right: 54%;
  }
  .coffee-icon img {
    width: 80%;
  }
  .scene08 .coffee-photo {
    height: auto;
    overflow: hidden;
    width: 33%;
  }
  /* --- 美味しく淹れる6つのステップ --- */
  ol.flow-box {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1100px; /* 必要なら調整 */
    margin-inline: auto;
  }
  .scene08 .section-title.short-title.second::after {
    background: none;
  }
  .scene08-box2 {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5%;
    align-items: start;
  }
  ol.flow-box > li {
    margin: 0;
    padding: 18px 22px;
  }
  ol.flow-box h3 {
    font-size: 16px;
    margin: 0 0 .6em;
    font-weight: 600;
  }
  ol.flow-box p {
    margin: 0 0 .6em;
    line-height: 1.9;
  }
  ol.flow-box p:last-child {
    margin-bottom: 0;
  }
  .flow-box li:nth-child(even) {
    background: none;
    margin: 0;
  }
  /* ベージュ背景にしたい項目だけ */
  ol.flow-box > li:nth-child(2), ol.flow-box > li:nth-child(3), ol.flow-box > li:nth-child(6) {
    background: rgb(246, 237, 213, .8); /* 好みで */
    border-radius: 2px; /* 角丸いらなければ0 */
  }
  .master-photo {
    height: 100%;
  }
  /* 全体：2カラム＋エリア配置 */
  /* 外側：左（商品）＋右（detail-point） */
  /* 3列：左=写真 / 中=商品詳細 / 右=detail-point(最大660px) */
  #coffee .scene09.content-box {
    display: grid;
    grid-template-columns:
minmax(260px, 1fr)
minmax(420px, 1.2fr)
minmax(360px, 1.4fr);
    grid-template-areas:
      "copy  copy  detail"
      "photo item  detail"
      ".     btn   detail";
    column-gap: 1.5%;
    row-gap: 28px;
    align-items: start;
  }
  #coffee .scene09 .mame-copy {
    grid-area: copy;
    text-align: center;
    margin: 0;
    width: fit-content;
    justify-self: center;
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-size: clamp(18px, 3.4vw, 20px);
    padding: 0 3em;
  }
  .mame-copy::before, .mame-copy::after {
    width: 3em;
    height: 3em;
  }
  /* ★ここが肝：item-boxを“消して”中身を外側グリッドに参加させる */
  #coffee .scene09 .item-box {
    display: contents;
  }
  #coffee .scene09 .photo-item {
    grid-area: photo;
	  width: auto;
  }
  #coffee .scene09 .item-detail {
    grid-area: item;
    text-align: center;
    margin: 0;
  }
	
	#coffee .scene09 .item-detail .btn-buy{
		    font-size: clamp(20px, 2.2vw, 30px);
    padding-block: clamp(16px, 1.4vw, 18px);
    padding-inline: clamp(24px, 3.4vw, 30px);
		margin: 10% auto 0;
	}
  #coffee .scene09 .cart-btn {
    grid-area: btn;
    justify-self: center; /* 中央カラム内で中央寄せ */
    margin: 0;
  }
  #coffee .scene09 .detail-point {
    grid-area: detail;
    margin: 0;
    box-sizing: border-box;
    padding: 5% 2.5%;
	  width: 100%;
  }
  #coffee .scene09 .detail-point dl, #coffee .scene09 .detail-point p {
    width: 80%;
    margin: 1% auto;
    text-align: left;
  }
  #coffee .scene09 .detail-point dl .only-pc {
    display: inline-block;
  }
  #coffee .scene09 .detail-point dl dt {
    font-weight: bold;
  }
  #coffee .scene09 .detail-point p.kome {
    text-align: center;
  }
  #coffee .scene09 .photo-item img {
    width: 100%;
    height: auto;
    display: block;
  }
  .scene09 .detail-point .title-text,
	 .scene09 .detail-point .title-inner-second{
    font-size: clamp(18px, 3.4vw, 20px);
  }
	.scene09 .detail-point .title-inner-second{padding-left: 2.5em;font-weight: bold;display: block;}
}
/*
タブレットのみ
----------------------------------------------------------- */
@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;
  }
}