@charset "UTF-8";

/* =====================================================
awashima roast / rebuilt
===================================================== */

body {
  overflow-x: hidden;
}

.aw-roast {
  --aw-ink: #2d2924;
  --aw-sub: rgba(45, 41, 36, .82);
  --aw-line: rgba(45, 41, 36, .14);
  --aw-soft: #f7f3ee;
  --aw-soft-2: #fbfaf8;
  --aw-brown: #4a2614;
color: var(--aw-ink);
  background: #fff;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  letter-spacing: .045em;
  line-height: 2.2;
}

.aw-roast__inner {
  width: min(1120px, calc(100% - 56px));
  margin: 0 auto;
}

/* =====================================================
hero
===================================================== */

.aw-roastHero {
  position: relative;
  width: 100vw;
  min-height: 560px;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: #111;
}

.aw-roastHero__image {
  position: absolute;
  inset: 0;
}

.aw-roastHero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aw-roastHero__content {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 56px));
  min-height: 560px;
  margin: 0 auto;
  padding: 100px 0 70px;
  box-sizing: border-box;
}

.aw-roastHero__sub {
  margin: 0 0 22px;
  color: #fff;
  font-size: 12px;
  letter-spacing: .28em;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);

  font-family: "Noto Sans JP",
                    "Hiragino Kaku Gothic ProN",
                      sans-serif;	
}

.aw-roastHero__title {
  margin: 0;
  color: #fff;
  font-size: clamp(42px, 4.6vw, 64px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .18em;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);

}

.aw-roastHero__lead {
  margin: 42px 0 0;
  color: #fff;
  font-size: 21px;
  line-height: 2.3;
  letter-spacing: .12em;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);

}

/* =====================================================
common
===================================================== */

.aw-roastSection {
  padding: 96px 0;
  background: #fff;
}

.aw-roastLargeTitle {
  margin: 0;
  color: #120800;
  font-size: clamp(26px, 2vw, 32px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .075em;
}

.aw-roastBody {
  color: var(--aw-sub);
  font-family: "Noto Serif JP", "Yu Mincho", serif;
}

.aw-roastBody p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 2.25;
}

.aw-roastBody p:last-child {
  margin-bottom: 0;
}

/* =====================================================
intro
===================================================== */

.aw-roastIntro {
  background: #fff;
}

.aw-roastIntro .aw-roastSplit {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(430px, .95fr);
  gap: 60px;
  align-items: center;
}

.aw-roastIntro .aw-roastSplit__text {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  max-width: 700px;
  padding-left: 28px;
}

.aw-roastIntro .aw-roastSplit__text::before {
  content: "";
  position: absolute;
  left: 0;
  top: .25em;
  width: 1px;
  height: 98%;
  background: rgba(74, 38, 20, .58);
}

.aw-roastIntro .aw-roastSplit__body {
  grid-column: 1;
  grid-row: 2;
  max-width: 760px;
  padding-left: 20px;
  margin-top: -130px;
}

.aw-roastIntro .aw-roastSplit__image {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

.aw-roastIntro .aw-roastSplit__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

/* =====================================================
aroma
===================================================== */

.aw-roastAroma {
  background: var(--aw-soft);
}

.aw-roastAroma__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}

.aw-roastAroma .aw-roastSplit__text {
  position: relative;
  max-width: 600px;
  padding-left: 20px;
}

.aw-roastAroma .aw-roastSplit__text::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 1px;
  height: 27%;
  background: rgba(74, 38, 20, .48);
}

.aw-roastAroma .aw-roastBody {
  max-width: 600px;
  margin-top: 60px;
}

.aw-roastBeansLine {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  min-height: 220px;
  padding: 58px 20px 72px;
  overflow: visible;
}


.aw-roastBeansLine::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 20px;
  bottom: 58px;
  height: 1px;
  background: var(--aw-line);
}

.aw-roastBeansLine::before {
  content: "生豆　　　　　　　　　　　　　　　　　　　　　　深煎り";
  position: absolute;
  left: 24px;
  right: 15px;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  color: var(--aw-sub);
  font-size: 14px;
  letter-spacing: .16em;
}

.aw-roastBeansLine span {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(30px, 3vw, 44px);
  aspect-ratio: .68 / 1;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 38% 20%, rgba(255,255,255,.45), transparent 35%),
    linear-gradient(90deg, rgba(0,0,0,.24) 48%, rgba(255,255,255,.22) 50%, rgba(0,0,0,.20) 52%),
    #c7a06a;
  box-shadow: 0 18px 28px rgba(44, 30, 18, .18);
}

/* 右端の9個目を非表示 */
.aw-roastBeansLine span:nth-child(9) {
  display: none;
}

.aw-roastBeansLine span:nth-child(1) { background-color: #d7bf8e; }
.aw-roastBeansLine span:nth-child(2) { background-color: #c99b5d; }
.aw-roastBeansLine span:nth-child(3) { background-color: #b9783d; }
.aw-roastBeansLine span:nth-child(4) { background-color: #985426; }
.aw-roastBeansLine span:nth-child(5) { background-color: #7c3f1d; }
.aw-roastBeansLine span:nth-child(6) { background-color: #5f2d16; }
.aw-roastBeansLine span:nth-child(7) { background-color: #422012; }
.aw-roastBeansLine span:nth-child(8) { background-color: #2f170e; }


/* =====================================================
process
===================================================== */

.aw-roastProcess {
  padding: 96px 0 104px;
  background: #fff;
}

.aw-roastProcess__header {
  margin: 0 0 64px;
}

.aw-roastProcess__header h2 {
  margin: 0;
  color: #120800;
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 400;
  letter-spacing: .04em;
}

.aw-roastProcess__header::after {
  content: "";
  display: block;
  width: 74px;
  height: 1px;
  margin-top: 28px;
  background: #b99a82;
}

.aw-roastProcess__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 26px;
}

.aw-roastProcess__list article::before {
  content: "";
  display: block;
  width: 56px;
  height: 74px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 38% 20%, rgba(255,255,255,.45), transparent 35%),
    linear-gradient(90deg, rgba(0,0,0,.24) 48%, rgba(255,255,255,.22) 50%, rgba(0,0,0,.20) 52%),
    #c7a06a;
  box-shadow: 0 12px 18px rgba(44, 30, 18, .12);
}

.aw-roastProcess__list article:nth-child(1)::before { background-color: #d7bf8e; }
.aw-roastProcess__list article:nth-child(2)::before { background-color: #c99b5d; }
.aw-roastProcess__list article:nth-child(3)::before { background-color: #b9783d; }
.aw-roastProcess__list article:nth-child(4)::before { background-color: #985426; }
.aw-roastProcess__list article:nth-child(5)::before { background-color: #7c3f1d; }
.aw-roastProcess__list article:nth-child(6)::before { background-color: #5f2d16; }

.aw-roastProcess__list h3 {
  margin: 0 0 16px;
  color: #120800;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}

.aw-roastProcess__list p {
  margin: 0;
  color: var(--aw-sub);
  font-size: 14px;
  line-height: 2;
}

.aw-roastNote {
  width: min(760px, 100%);
  margin: 62px auto 0;
  padding: 24px 38px;
  border: 1px solid rgba(45, 41, 36, .13);
  background: #fbfaf8;
}

.aw-roastNote p {
  margin: 0;
  color: var(--aw-sub);
  font-size: 15px;
  line-height: 2.1;
}

/* =====================================================
specimen
===================================================== */

.aw-roastSpecimen {
  background: #fff;
}

/* 全体を縦積みに */

.aw-roastSpecimen .aw-roastSplit {
  display: block;
}

/* 見出し */

.aw-roastSpecimen .aw-roastSplit__text {
  max-width: 980px;
  margin: 0 0 56px;
  padding-left: 0;
}

.aw-roastSpecimen .aw-roastSplit__text::before {
  display: none;
}

/* 見出し下ライン */

.aw-roastSpecimen__titleLine {
  display: block;
  width: 180px;
  height: 1px;
  margin: 28px 0 0;
  background: #b99a82;
}

/* リード */

.aw-roastSpecimen .aw-roastBody {
  margin-top: 34px;
  max-width: 860px;
}

.aw-roastSpecimen .aw-roastBody p {
  line-height: 2.25;
}

/* グラフ */

.aw-roastSpecimen__panel {
  margin-top: 56px;
  padding: 10px 0;
  background: transparent;
}

.aw-roastSpecimen__chart {
  margin: 0;
}

.aw-roastSpecimen__chart img {
  display: block;
  width: 100%;
  height: auto;
}

/* responsive */

@media screen and (max-width: 900px) {

  .aw-roastSpecimen .aw-roastSplit__text {
    margin-bottom: 42px;
  }

  .aw-roastSpecimen .aw-roastBody {
    max-width: none;
  }

  .aw-roastSpecimen__panel {
    padding: 24px;
  }
}

/* =====================================================
sense
===================================================== */

.aw-roastSense {
  background: #fff;
}

/* セクション全体 */

.aw-roastSense__grid {
  display: block;
}

/* 見出し＋リード */

.aw-roastSense .aw-roastSplit__text {
  max-width: 980px;
  margin: 0 0 56px;
  padding-left: 0;
}

.aw-roastSense .aw-roastSplit__text::before,
.aw-roastSense .aw-roastSplit__text::after {
  display: none;
}

/* 見出し下ライン */

.aw-roastSense__titleLine {
  display: block;
  width: 120px;
  height: 1px;
  margin: 28px 0 0;
  background: #b99a82;
}

.aw-roastSense .aw-roastBody {
  margin-top: 34px;
  max-width: 860px;
}

.aw-roastSense .aw-roastBody p {
  line-height: 2.25;
}

/* 表組み */

.aw-roastSense__content {
  max-width: 980px;
  margin: 0 auto;
}

.aw-roastSense__words {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  border: 1px solid var(--aw-line);
}

.aw-roastSense__words dl {
  margin: 0;
  padding: 34px 26px 36px;
  border-right: 1px solid var(--aw-line);
}

.aw-roastSense__words dl:last-child {
  border-right: none;
}

.aw-roastSense__words dt {
  margin: 0 0 18px;
  color: #120800;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  letter-spacing: .12em;
}

.aw-roastSense__words dt::after {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  margin: 16px auto 0;
  background: rgba(74, 38, 20, .34);
}

.aw-roastSense__words dd {
  margin: 0;
  color: var(--aw-sub);
  font-size: 14px;
  line-height: 2;
  text-align: left;
}

/* 写真 */

.aw-roastSense__image {
  margin: 56px 0 0;
  width: 100%;
  margin-left: 0;
}

.aw-roastSense__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 4.4;
  object-fit: cover;
}

/* responsive */

@media screen and (max-width: 900px) {

  .aw-roastSense .aw-roastSplit__text {
    max-width: none;
    margin-bottom: 42px;
  }

  .aw-roastSense .aw-roastBody {
    max-width: none;
  }

  .aw-roastSense__content {
    max-width: none;
    overflow-x: auto;
  }

  .aw-roastSense__words {
    min-width: 760px;
  }

  .aw-roastSense__image {
    width: 100%;
    margin-left: 0;
  }

  .aw-roastSense__image img {
    aspect-ratio: 16 / 7;
  }
}

/* =====================================================
closing
===================================================== */

.aw-roastClosing {
  padding: 96px 0 220px;
  background: #fff;
}

.aw-roastClosing__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
}

.aw-roastClosing .aw-roastSplit__text {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  max-width: none;
  padding-left: 28px;
}

.aw-roastClosing .aw-roastSplit__text::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 1px;
  height: 30%;
  background: rgba(74, 38, 20, .48);
}

.aw-roastClosing .aw-roastBody {
  margin-top: 52px;
  max-width: none;
}

.aw-roastClosing__image {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

.aw-roastClosing__image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 25% center;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

/* =====================================================
responsive
===================================================== */

@media screen and (max-width: 900px) {
  .aw-roast {
}

  .aw-roast__inner,
  .aw-roastHero__content {
    width: calc(100% - 36px);
  }

  .aw-roastHero,
  .aw-roastHero__content {
    min-height: 560px;
  }

  .aw-roastHero__content {
    padding: 120px 0 82px;
  }

  .aw-roastSection,
  .aw-roastProcess {
    padding: 86px 0;
  }

  .aw-roastIntro .aw-roastSplit,
  .aw-roastAroma__grid,
  .aw-roastSpecimen .aw-roastSplit,
  .aw-roastSense__grid,
  .aw-roastClosing__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .aw-roastIntro .aw-roastSplit__text,
  .aw-roastIntro .aw-roastSplit__body,
  .aw-roastAroma .aw-roastSplit__text {
    max-width: none;
    padding-left: 22px;
  }

  .aw-roastIntro .aw-roastSplit__body {
    margin-top: 0;
  }

  .aw-roastIntro .aw-roastSplit__image {
    grid-column: auto;
    grid-row: auto;
  }

  .aw-roastIntro .aw-roastSplit__image img,
  .aw-roastClosing__image img {
    min-height: auto;
    clip-path: none;
  }

  .aw-roastLargeTitle {
    font-size: 26px;
    line-height: 1.6;
  }

  .aw-roastProcess__list {
    grid-template-columns: 1fr 1fr;
    gap: 38px 28px;
  }

  .aw-roastSpecimen__panel {
    overflow-x: auto;
  }

  .aw-roastSpecimen__beans,
  .aw-roastSpecimen__scale {
    width: 760px;
  }

  .aw-roastSense__words {
    grid-template-columns: 1fr;
  }

  .aw-roastSense__words dl {
    border-left: 1px solid var(--aw-line);
    border-bottom: 1px solid var(--aw-line);
  }

  .aw-roastSense__words dl:last-child {
    border-bottom: none;
  }

  .aw-roastSense__image {
    grid-column: auto;
  }
}

@media screen and (max-width: 520px) {
  .aw-roast__inner,
  .aw-roastHero__content {
    width: calc(100% - 32px);
  }

  .aw-roastHero,
  .aw-roastHero__content {
    min-height: 520px;
  }

  .aw-roastHero__title {
    font-size: 38px;
  }

  .aw-roastHero__lead {
    margin-top: 34px;
    font-size: 15px;
  }

  .aw-roastLargeTitle {
    font-size: 24px;
    line-height: 1.65;
    letter-spacing: .06em;
  }

  .aw-roastProcess__list {
    grid-template-columns: 1fr;
  }

  .aw-roastBeansLine {
    gap: 10px;
  }

  .aw-roastBeansLine span {
    width: 26px;
  }

  .aw-roastNote {
    padding: 22px;
  }
}

/* =====================================================
   Roast SP final consolidated
   2026-07-05
===================================================== */

@media screen and (max-width: 767px){

  /* -----------------------------------------------------
     common / horizontal scroll guard
  ----------------------------------------------------- */

  html,
  body,
  .aw-roast,
  .aw-roastSection,
  .aw-roastProcess,
  .aw-roast__inner{
    max-width:100% !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }

  .aw-roast__inner,
  .aw-roastHero__content{
    width:calc(100% - 32px) !important;
  }

  .aw-roastSection,
  .aw-roastProcess{
    padding:86px 0 !important;
  }

  .aw-roastLargeTitle{
    font-size:24px !important;
    line-height:1.65 !important;
    letter-spacing:.06em !important;
  }

  .aw-roastBody p{
    font-size:15px !important;
    line-height:2.25 !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
  }

  /* -----------------------------------------------------
     aroma / bean scale line
  ----------------------------------------------------- */

  .aw-roastAroma{
    overflow:hidden !important;
  }

  .aw-roastAroma__grid{
    display:block !important;
  }

  .aw-roastAroma .aw-roastSplit__text,
  .aw-roastAroma .aw-roastBody{
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .aw-roastAroma .aw-roastBody{
    margin-top:46px !important;
  }

  .aw-roastBeansLine{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    max-width:100% !important;
    min-height:190px !important;
    margin:42px auto 0 !important;
    padding:42px 12px 78px !important;
    gap:10px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .aw-roastBeansLine span{
    flex:0 0 24px !important;
    width:24px !important;
    height:35px !important;
    aspect-ratio:auto !important;
    border-radius:50% !important;
  }

  .aw-roastBeansLine::after{
    left:12px !important;
    right:12px !important;
    bottom:58px !important;
  }

  .aw-roastBeansLine::before{
    content:"生豆　　　　　　　　　　　　　　　　　深煎り" !important;
    position:absolute !important;
    left:12px !important;
    right:12px !important;
    bottom:16px !important;
    display:block !important;
    width:auto !important;
    color:var(--aw-sub) !important;
    font-size:14px !important;
    line-height:1.6 !important;
    letter-spacing:.04em !important;
    white-space:nowrap !important;
    text-align:justify !important;
    text-align-last:justify !important;
  }

  /* -----------------------------------------------------
     process / bean illustrations
  ----------------------------------------------------- */

  .aw-roastProcess__header{
    margin-bottom:52px !important;
  }

  .aw-roastProcess__list{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:58px !important;
  }

  .aw-roastProcess__list article{
    padding-left:28px !important;
    padding-right:28px !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }

  .aw-roastProcess__list article::before{
    width:48px !important;
    height:63px !important;
    margin:0 auto 22px !important;
    border-radius:50% !important;
    background-size:contain !important;
  }

  .aw-roastProcess__list h3{
    margin:0 !important;
    font-size:20px !important;
    line-height:1.7 !important;
    letter-spacing:.08em !important;
  }

  /* 画像下コピーはSPでは非表示 */
  .aw-roastProcess__list p{
    display:none !important;
  }

  .aw-roastNote{
    margin-top:56px !important;
    padding:22px !important;
  }

  /* -----------------------------------------------------
     specimen / roast chart
  ----------------------------------------------------- */

  .aw-roastSpecimen{
    padding-bottom:56px !important;
    overflow:hidden !important;
  }

  .aw-roastSpecimen .aw-roastSplit__text{
    margin-bottom:38px !important;
  }

  .aw-roastSpecimen__panel{
    width:100% !important;
    margin-top:30px !important;
    padding:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  .aw-roastSpecimen__chart{
    width:100% !important;
    margin:0 !important;
    transform:none !important;
    overflow:hidden !important;
  }

  .aw-roastSpecimen__chart img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }

  /* -----------------------------------------------------
     sense / table
  ----------------------------------------------------- */

  .aw-roastSense{
    overflow:hidden !important;
  }

  .aw-roastSense .aw-roastSplit__text{
    max-width:none !important;
    margin-bottom:42px !important;
    padding-left:0 !important;
    text-align:left !important;
  }

  .aw-roastSense__titleLine{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .aw-roastSense .aw-roastBody{
    max-width:none !important;
    margin:34px 0 0 !important;
    text-align:left !important;
  }

  .aw-roastSense .aw-roastBody p{
    text-align:left !important;
  }

  .aw-roastSense__grid,
  .aw-roastSense__content,
  .aw-roastSense__words{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .aw-roastSense__content{
    margin:0 auto !important;
    overflow:hidden !important;
  }

  .aw-roastSense__words{
    border:1px solid var(--aw-line) !important;
  }

  .aw-roastSense__words dl{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:42px 28px !important;
    border-right:none !important;
    border-left:none !important;
    border-bottom:1px solid var(--aw-line) !important;
    box-sizing:border-box !important;
  }

  .aw-roastSense__words dl:last-child{
    border-bottom:none !important;
  }

  .aw-roastSense__words dt,
  .aw-roastSense__words dd{
    display:block !important;
    width:100% !important;
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
    white-space:normal !important;
    box-sizing:border-box !important;
  }

  .aw-roastSense__words dt{
    margin:0 0 18px !important;
    text-align:center !important;
  }

  .aw-roastSense__words dd{
    margin:0 !important;
    text-align:center !important;
    line-height:2 !important;
  }

  .aw-roastSense__image{
    width:100% !important;
    margin:48px 0 0 !important;
  }

  .aw-roastSense__image img{
    width:100% !important;
    aspect-ratio:16 / 7 !important;
    object-fit:cover !important;
  }

  /* -----------------------------------------------------
     closing / title first, image after text
  ----------------------------------------------------- */

  .aw-roastClosing{
    padding:86px 0 150px !important;
    overflow:hidden !important;
  }

  .aw-roastClosing__grid{
    display:flex !important;
    flex-direction:column !important;
    gap:38px !important;
  }

  .aw-roastClosing .aw-roastSplit__text{
    order:1 !important;
    width:100% !important;
    max-width:none !important;
    padding-left:22px !important;
    box-sizing:border-box !important;
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
  }

  .aw-roastClosing .aw-roastLargeTitle,
  .aw-roastClosing .aw-roastBody,
  .aw-roastClosing .aw-roastBody p{
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
  }

  .aw-roastClosing .aw-roastLargeTitle{
    font-size:28px !important;
    line-height:1.75 !important;
    letter-spacing:.08em !important;
  }

  .aw-roastClosing .aw-roastBody{
    margin-top:34px !important;
  }

  .aw-roastClosing .aw-roastBody p{
    font-size:15px !important;
    line-height:2.2 !important;
  }

  .aw-roastClosing__image{
    order:2 !important;
    width:100% !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  .aw-roastClosing__image img{
    display:block !important;
    width:100% !important;
    aspect-ratio:4 / 3 !important;
    object-fit:cover !important;
    object-position:center center !important;
    clip-path:none !important;
  }

}


/* =====================================================
   Awashima V2 bridge
   new environment: base.css / header.css / footer.css
   2026-08-17
===================================================== */

/* Header is now in normal document flow; legacy top offsets are unnecessary. */
.aw-roast {
}

/* Keep the old roast page's full-bleed hero, but let the photo itself carry it. */
.aw-roastHero__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(18, 8, 0, .34) 0%,
    rgba(18, 8, 0, .16) 44%,
    rgba(18, 8, 0, .04) 72%,
    rgba(18, 8, 0, .12) 100%
  );
  pointer-events: none;
}

/* About V2 typography baseline */
.aw-roastHero__title,
.aw-roastLargeTitle,
.aw-roastBody {
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}

.aw-roastHero__sub {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* V2 uses the same 767px SP boundary as About. */
@media screen and (max-width: 767px) {
  .aw-roast {
    padding-top: 72px;
  }

  .aw-roastHero,
  .aw-roastHero__content {
    min-height: 520px !important;
  }

  .aw-roastHero__content {
    padding-top: 82px !important;
    padding-bottom: 64px !important;
  }

  .aw-roastHero__sub {
    margin: 0 0 26px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    letter-spacing: .23em !important;
  }

  .aw-roastHero__title {
    margin: 0 !important;
    font-size: 32px !important;
    line-height: 1.35 !important;
    letter-spacing: .06em !important;
    white-space: nowrap;
  }

  .aw-roastHero__lead {
    margin-top: 42px !important;
    font-size: 16px !important;
    line-height: 2.15 !important;
    letter-spacing: .06em !important;
  }

  .aw-roastBody p {
    font-size: 16px !important;
  }
}


/* =====================================================
   Roast V2 tuning 02
   2026-08-17
   1) hero/header offset
   2) title side-rule height
   3) sense photo width = roast chart width
===================================================== */

/* 1) Restore the header clearance that the legacy roast layout expects.
      The V2 header is fixed/sticky, so the page must start below it. */
.aw-roast {
  padding-top: 118px;
}

/* 2) Side rules: match the actual title block, not the whole text column. */
.aw-roastAroma .aw-roastSplit__text::before {
  top: 0 !important;
  height: 1.55em !important;
}

.aw-roastClosing .aw-roastSplit__text::before {
  top: 0 !important;
  height: 3.10em !important;
}

/* 3) Make the sensory photo use the same visual width as the roast chart. */
.aw-roastSense__image {
  width: min(1120px, calc(100vw - 56px)) !important;
  max-width: none !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
}

.aw-roastSense__image img {
  width: 100% !important;
  max-width: none !important;
}

/* SP */
@media screen and (max-width: 767px) {
  .aw-roast {
    padding-top: 72px;
  }

  .aw-roastAroma .aw-roastSplit__text::before {
    top: 0 !important;
    height: 1.65em !important;
  }

  .aw-roastClosing .aw-roastSplit__text::before {
    top: 0 !important;
    height: 3.30em !important;
  }

  .aw-roastSense__image {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
  }
}


/* =====================================================
   Roast V2 tuning 03
   2026-08-17
   - title side-rule exact line-height
   - process bean size
   - section heading size normalization
===================================================== */

/* -----------------------------------------------------
   Section heading scale
   「焙煎のプロセス」だけ旧指定が少し大きかったため、
   他ブロックの .aw-roastLargeTitle と同じスケールへ統一。
----------------------------------------------------- */
.aw-roastProcess__header h2 {
  font-size: clamp(26px, 2vw, 32px) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: .075em !important;
}

/* -----------------------------------------------------
   Side rules
   em では親要素の16pxを基準にしてしまうため、
   見出しそのものの実寸に合わせて固定。
----------------------------------------------------- */

/* 1行タイトル */
.aw-roastAroma .aw-roastSplit__text::before {
  top: 0 !important;
  height: 50px !important;
}

/* 2行タイトル */
.aw-roastClosing .aw-roastSplit__text::before {
  top: 0 !important;
  height: 100px !important;
}

/* -----------------------------------------------------
   Process beans
   PC: 56×74 → 48×64
----------------------------------------------------- */
.aw-roastProcess__list article::before {
  width: 48px !important;
  height: 64px !important;
  margin-bottom: 22px !important;
}

/* SP */
@media screen and (max-width: 767px) {

  .aw-roastProcess__header h2 {
    font-size: 24px !important;
    line-height: 1.65 !important;
    letter-spacing: .06em !important;
  }

  /* SP 1行分 */
  .aw-roastAroma .aw-roastSplit__text::before {
    height: 40px !important;
  }

  /* SP 2行分
     Closing は 28px / line-height 1.75 の既存指定に合わせる */
  .aw-roastClosing .aw-roastSplit__text::before {
    height: 98px !important;
  }

  /* SP: 48×63 → 42×56 */
  .aw-roastProcess__list article::before {
    width: 42px !important;
    height: 56px !important;
    margin-bottom: 20px !important;
  }
}


/* =====================================================
   Roast V2 tuning 04
   2026-08-17
   SP process descriptions restore
===================================================== */

@media screen and (max-width: 767px) {
  .aw-roastProcess__list p {
    display: block !important;
    margin: 14px 0 0 !important;
    font-size: 15px !important;
    line-height: 2 !important;
    letter-spacing: .03em !important;
    text-align: left !important;
  }
}


/* =====================================================
   Roast V2 tuning 05
   2026-08-17
   SP chart zoom modal
   Includes all tuning through 04
===================================================== */

/* Button reset: PC keeps the chart visually identical. */
.aw-roastChartZoom {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.aw-roastChartZoom img {
  display: block;
  width: 100%;
  height: auto;
}

.aw-roastChartZoom__hint,
.aw-roastChartModal {
  display: none;
}

@media screen and (max-width: 767px) {

  .aw-roastChartZoom {
    cursor: zoom-in;
  }

  .aw-roastChartZoom__hint {
    display: block;
    margin: 12px 0 0;
    color: #7b6e66;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    letter-spacing: .08em;
  }

  .aw-roastChartZoom__hint::before {
    content: "＋";
    display: inline-block;
    margin-right: 6px;
    font-size: 14px;
  }

  html.aw-roast-modal-open,
  body.aw-roast-modal-open {
    overflow: hidden !important;
  }

  .aw-roastChartModal {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: 56px 0 30px;
    background: rgba(255, 253, 249, .985);
  }

  .aw-roastChartModal.is-open {
    display: flex;
  }

  .aw-roastChartModal__close {
    position: absolute;
    z-index: 2;
    top: 14px;
    right: 16px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(74, 38, 20, .22);
    border-radius: 50%;
    background: #fffdf9;
    color: #4a2614;
    font-size: 28px;
    font-weight: 300;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
  }

  .aw-roastChartModal__viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y pinch-zoom;
  }

  .aw-roastChartModal__viewport img {
    display: block;
    width: 1050px;
    max-width: none;
    height: auto;
    margin: 0;
  }

  .aw-roastChartModal__guide {
    margin: 16px 20px 0;
    color: #776b64;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    letter-spacing: .07em;
  }
}


/* =====================================================
   Roast V2 tuning 06
   2026-08-17
   Side rule follows heading height automatically
===================================================== */

/* Disable the old fixed-height pseudo-element rules. */
.aw-roastAroma .aw-roastSplit__text::before,
.aw-roastClosing .aw-roastSplit__text::before {
  display: none !important;
}

/* Put the rule on the heading itself.
   Its height now follows 1 / 2 / 3 lines automatically. */
.aw-roastAroma .aw-roastLargeTitle,
.aw-roastClosing .aw-roastLargeTitle {
  position: relative;
  padding-left: 30px !important;
}

.aw-roastAroma .aw-roastLargeTitle::before,
.aw-roastClosing .aw-roastLargeTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: .08em;
  bottom: .08em;
  width: 1px;
  background: #b99a82;
}

/* SP: keep the same automatic behavior with a slightly tighter inset. */
@media screen and (max-width: 767px) {
  .aw-roastAroma .aw-roastLargeTitle,
  .aw-roastClosing .aw-roastLargeTitle {
    padding-left: 20px !important;
  }

  .aw-roastAroma .aw-roastLargeTitle::before,
  .aw-roastClosing .aw-roastLargeTitle::before {
    top: .10em;
    bottom: .10em;
  }
}


/* =====================================================
   Roast V2 tuning 07
   2026-08-17
   SP hero flush beneath fixed 72px header
===================================================== */
@media screen and (max-width: 767px) {
  .aw-roast {
    padding-top: 72px;
  }
}

/* =====================================================
   Roast V2 tuning 08
   2026-09-19
   LLMO / roast level guide
===================================================== */

/* -----------------------------------------------------
   chart explanation
----------------------------------------------------- */

.aw-roastSpecimen__chartNote {
  max-width: 900px;
  margin: 46px 0 0;
}

.aw-roastSpecimen__chartNote p {
  margin: 0;
  color: var(--aw-sub);
  font-size: 15px;
  line-height: 2.25;
}

.aw-roastSpecimen__chartNote .aw-roastSpecimen__caption {
  margin-top: 18px;
  color: rgba(45, 41, 36, .68);
  font-size: 13px;
  line-height: 1.9;
}


/* -----------------------------------------------------
   roast levels
----------------------------------------------------- */

.aw-roastLevels {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid var(--aw-line);
}

.aw-roastLevels__header {
  max-width: 760px;
  margin: 0 0 54px;
}

.aw-roastLevels__sub {
  margin: 0 0 18px;
  color: #8b7567;
  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .24em;
}

.aw-roastLevels__title {
  margin: 0;
  color: #120800;
  font-size: clamp(26px, 2vw, 32px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .075em;
}

.aw-roastLevels__title::after {
  content: "";
  display: block;
  width: 74px;
  height: 1px;
  margin-top: 26px;
  background: #b99a82;
}

.aw-roastLevels__lead {
  margin: 30px 0 0;
  color: var(--aw-sub);
  font-size: 15px;
  line-height: 2.2;
}


/* -----------------------------------------------------
   five roast level cards
----------------------------------------------------- */

.aw-roastLevels__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--aw-line);
  border-bottom: 1px solid var(--aw-line);
}

.aw-roastLevels__item {
  min-width: 0;
  margin: 0;
  border-right: 1px solid var(--aw-line);
}

.aw-roastLevels__item:last-child {
  border-right: 0;
}

.aw-roastLevels__item > a {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 330px;
  height: 100%;
  padding: 34px 24px 30px;
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
  transition:
    background-color .25s ease,
    transform .25s ease;
}

.aw-roastLevels__item > a:hover {
  background: var(--aw-soft-2);
}

.aw-roastLevels__heading {
  margin: 0 0 24px;
}

.aw-roastLevels__number {
  display: block;
  margin: 0 0 15px;
  color: #9b8373;
  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .16em;
}

.aw-roastLevels__heading h3 {
  margin: 0;
  color: #120800;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .08em;
}

.aw-roastLevels__heading h3::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin-top: 16px;
  background: rgba(74, 38, 20, .32);
}

.aw-roastLevels__item p {
  margin: 0;
  color: var(--aw-sub);
  font-size: 14px;
  line-height: 2;
}

.aw-roastLevels__link {
  display: block;
  margin-top: auto;
  padding-top: 28px;
  color: #4a2614;
  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .06em;
}

.aw-roastLevels__link::after {
  content: " →";
  margin-left: 3px;
}


/* -----------------------------------------------------
   tablet
----------------------------------------------------- */

@media screen and (max-width: 1000px) and (min-width: 768px) {

  .aw-roastLevels__list {
    grid-template-columns: repeat(2, 1fr);
    border-bottom: 0;
  }

  .aw-roastLevels__item {
    border-bottom: 1px solid var(--aw-line);
  }

  .aw-roastLevels__item:nth-child(2n) {
    border-right: 0;
  }

  .aw-roastLevels__item:last-child {
    border-right: 1px solid var(--aw-line);
  }

  .aw-roastLevels__item > a {
    min-height: 290px;
  }
}


/* -----------------------------------------------------
   SP
----------------------------------------------------- */

@media screen and (max-width: 767px) {

  .aw-roastSpecimen__chartNote {
    width: 100%;
    max-width: none;
    margin-top: 34px;
  }

  .aw-roastSpecimen__chartNote p {
    font-size: 15px;
    line-height: 2.2;
  }

  .aw-roastSpecimen__chartNote .aw-roastSpecimen__caption {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.8;
  }


  /* roast level section */

  .aw-roastLevels {
    margin-top: 64px;
    padding-top: 56px;
  }

  .aw-roastLevels__header {
    max-width: none;
    margin-bottom: 42px;
  }

  .aw-roastLevels__sub {
    margin-bottom: 16px;
    font-size: 10px;
    letter-spacing: .20em;
  }

  .aw-roastLevels__title {
    font-size: 24px;
    line-height: 1.65;
    letter-spacing: .06em;
  }

  .aw-roastLevels__title::after {
    width: 58px;
    margin-top: 22px;
  }

  .aw-roastLevels__lead {
    margin-top: 26px;
    font-size: 15px;
    line-height: 2.15;
  }


  /* one roast level per row */

  .aw-roastLevels__list {
    display: block;
    border-top: 1px solid var(--aw-line);
    border-bottom: 1px solid var(--aw-line);
  }

  .aw-roastLevels__item {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--aw-line);
  }

  .aw-roastLevels__item:last-child {
    border-right: 0;
    border-bottom: 0;
  }

  .aw-roastLevels__item > a {
    display: block;
    min-height: 0;
    padding: 32px 6px 30px;
  }

  .aw-roastLevels__heading {
    margin-bottom: 20px;
  }

  .aw-roastLevels__number {
    margin-bottom: 12px;
    font-size: 10px;
  }

  .aw-roastLevels__heading h3 {
    font-size: 21px;
  }

  .aw-roastLevels__heading h3::after {
    margin-top: 14px;
  }

  .aw-roastLevels__item p {
    font-size: 15px;
    line-height: 2.05;
  }

  .aw-roastLevels__link {
    margin-top: 22px;
    padding-top: 0;
    font-size: 12px;
  }
}

/* =====================================================
   Roast chart modal final tuning
   2026-09-19
===================================================== */

@media screen and (max-width: 767px) {

  /* ---------------------------------------------------
     modal
  --------------------------------------------------- */

  .aw-roastChartModal {
    padding:
      max(18px, env(safe-area-inset-top))
      0
      max(18px, env(safe-area-inset-bottom));
    box-sizing: border-box;
  }


  /* ---------------------------------------------------
     graph viewport
     画像の天地をブラウザ内へ収める
  --------------------------------------------------- */

  .aw-roastChartModal__viewport {
    display: flex;
    align-items: center;
    width: 100%;
    height: calc(100dvh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  .aw-roastChartModal__viewport img {
    display: block;

    /* 以前の1050px固定を解除 */
    width: auto;
    max-width: none;

    /* 天地を画面内に収める */
    height: auto;
    max-height: calc(100dvh - 150px);

    flex: 0 0 auto;
    object-fit: contain;
  }


  /* ---------------------------------------------------
     close button
  --------------------------------------------------- */

  .aw-roastChartModal__close {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top));
    right: 16px;

    width: 44px;
    height: 44px;
    padding: 0;

    border: 1px solid rgba(74, 38, 20, .28);
    border-radius: 50%;

    background: rgba(255, 253, 249, .96);

    /* 元の文字 × を隠す */
    color: transparent;
    font-size: 0;
    line-height: 0;

    z-index: 10;
  }

  /* × を2本の線で描画 */

  .aw-roastChartModal__close::before,
  .aw-roastChartModal__close::after {
    content: "";
    position: absolute;

    top: 50%;
    left: 50%;

    width: 17px;
    height: 1.5px;

    background: #4a2614;

    transform-origin: center;
  }

  .aw-roastChartModal__close::before {
    transform:
      translate(-50%, -50%)
      rotate(45deg);
  }

  .aw-roastChartModal__close::after {
    transform:
      translate(-50%, -50%)
      rotate(-45deg);
  }


  /* ---------------------------------------------------
     guide
  --------------------------------------------------- */

  .aw-roastChartModal__guide {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(18px + env(safe-area-inset-bottom));

    margin: 0;
    padding: 0 20px;

    text-align: center;
    pointer-events: none;
  }

}