/* =====================================================
TOP PAGE — 2026 RENEWAL
===================================================== */
#main > .inner {
width: auto;
min-width: 960px;
}
.sp-mode #main > .inner {
width: 100%;
max-width: inherit;
min-width: inherit;
}
/* =====================================================
HERO CAROUSEL
PC：横長写真を3:2で表示
SP：中央部分を正方形にトリミング
===================================================== */
#top-banner-carousel {
position: relative;
width: 100%;
max-width: 1440px;
height: 66.666vw;
max-height: 960px;
margin: 0 auto;
overflow: hidden;
background: #fff;
}
#top-banner-carousel .container,
#top-banner-carousel .container ul,
#top-banner-carousel .container li,
#top-banner-carousel .container li a {
height: 66.666vw !important;
max-height: 960px;
}
#top-banner-carousel .container {
position: static;
}
#top-banner-carousel .container ul {
margin: 0;
padding: 0;
}
#top-banner-carousel .container li {
float: left;
width: 100vw;
max-width: 1440px;
}
#top-banner-carousel .container li a,
#top-banner-carousel .container li a:hover {
position: relative;
display: block;
box-sizing: border-box;
width: 100%;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
color: inherit;
text-decoration: none;
}
/* 写真上には文字を置かない */
#top-banner-carousel .container li a dl {
display: none;
}
.top-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
border: 0 !important;
white-space: nowrap !important;
}
/* PCの矢印は細く静かに */
#top-banner-carousel .carousel-arrow {
box-sizing: border-box;
width: 54px;
height: 72px;
margin-top: -36px;
color: #a92218;
font-size: 48px;
line-height: 72px;
text-align: center;
text-shadow: none;
opacity: .58;
transition: opacity .2s;
}
#top-banner-carousel .carousel-arrow:hover {
color: #a92218;
opacity: 1;
}
#top-banner-carousel .pagination {
bottom: 20px;
}
#top-banner-carousel .pagination a {
padding: 6px;
}
#top-banner-carousel .pagination a span {
width: 9px;
height: 9px;
background: #d1cecb;
}
#top-banner-carousel .pagination a.selected span {
background: #b3261e;
}
/* スマートフォン：1440×960の中央960×960付近を表示 */
.sp-mode #top-banner-carousel,
.sp-mode #top-banner-carousel .container,
.sp-mode #top-banner-carousel .container ul,
.sp-mode #top-banner-carousel .container li,
.sp-mode #top-banner-carousel .container li a {
height: 640px !important;
max-height: none;
}
.sp-mode #top-banner-carousel {
width: 640px;
max-width: none;
}
.sp-mode #top-banner-carousel .container li {
width: 640px !important;
max-width: none;
}
.sp-mode #top-banner-carousel .carousel-arrow {
display: none !important;
}
.sp-mode #top-banner-carousel .pagination {
bottom: 16px;
}
.sp-mode #top-banner-carousel .pagination a {
padding: 7px;
}
.sp-mode #top-banner-carousel .pagination a span {
width: 11px;
height: 11px;
}
/* =====================================================
FIXED EDITORIAL MESSAGE
===================================================== */
#top-renewal-intro {
position: relative;
box-sizing: border-box;
width: 100%;
min-height: 410px;
padding: 92px 40px 76px;
overflow: hidden;
background: #fbf7f1;
border-bottom: 1px solid #e4d8d2;
color: #5f5a57;
text-align: center;
}
#top-renewal-intro .top-renewal-intro__arch {
position: absolute;
top: 24px;
left: 50%;
box-sizing: border-box;
width: 760px;
height: 520px;
border: 1px solid rgba(179, 38, 30, .28);
border-bottom: 0;
border-radius: 380px 380px 0 0;
transform: translateX(-50%);
pointer-events: none;
}
#top-renewal-intro .top-renewal-intro__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 760px;
margin: 0 auto;
}
#top-renewal-intro .top-renewal-intro__eyebrow {
margin: 0 0 24px;
color: #a92218;
font-family: Cinzel, 'Times New Roman', serif;
font-size: 12px;
line-height: 1.6;
letter-spacing: .32em;
}
#top-renewal-intro h2 {
margin: 0;
color: #a92218;
font-family: 'EB Garamond', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
font-size: 38px;
font-weight: normal;
line-height: 1.5;
letter-spacing: .06em;
text-align: center;
}
#top-renewal-intro .top-renewal-intro__lead {
margin: 20px 0 0;
color: #756e69;
font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
font-size: 15px;
line-height: 1.9;
letter-spacing: .04em;
}
#top-renewal-intro .top-renewal-intro__links {
display: flex;
justify-content: center;
width: 100%;
max-width: 620px;
margin: 34px auto 0;
}
#top-renewal-intro .top-renewal-intro__links a {
display: block;
box-sizing: border-box;
width: 50%;
padding: 17px 12px;
border: 1px solid rgba(179, 38, 30, .58);
color: #a92218;
font-size: 15px;
line-height: 1.5;
text-align: center;
text-decoration: none;
transition: .22s;
}
#top-renewal-intro .top-renewal-intro__links a + a {
margin-left: 16px;
}
#top-renewal-intro .top-renewal-intro__links a:hover {
background: #a92218;
border-color: #a92218;
color: #fff;
}
.sp-mode #top-renewal-intro {
min-height: 430px;
padding: 90px 28px 70px;
}
.sp-mode #top-renewal-intro .top-renewal-intro__arch {
top: 20px;
width: 590px;
height: 520px;
border-radius: 295px 295px 0 0;
}
.sp-mode #top-renewal-intro .top-renewal-intro__inner {
max-width: 570px;
}
.sp-mode #top-renewal-intro .top-renewal-intro__eyebrow {
margin-bottom: 23px;
font-size: 15px;
letter-spacing: .28em;
}
.sp-mode #top-renewal-intro h2 {
font-size: 39px;
line-height: 1.55;
}
.sp-mode #top-renewal-intro .top-renewal-intro__lead {
margin-top: 18px;
font-size: 20px;
line-height: 1.8;
}
.sp-mode #top-renewal-intro .top-renewal-intro__links {
max-width: 570px;
margin-top: 32px;
}
.sp-mode #top-renewal-intro .top-renewal-intro__links a {
padding: 18px 8px;
font-size: 19px;
}
.sp-mode #top-renewal-intro .top-renewal-intro__links a + a {
margin-left: 14px;
}
/* =====================================================
NEWS
===================================================== */
#news {
position: relative;
box-sizing: border-box;
min-height: 52px;
background: #fbf8f4;
border-bottom: 1px solid #e4d8d2;
}
#news h3 {
position: absolute;
top: 16px;
left: 20px;
color: #a92218;
font-family: 'EB Garamond', serif;
font-size: 17px;
font-weight: normal;
}
#news dl {
padding: 13px 150px 5px 86px;
}
#news dt {
float: left;
margin-right: 12px;
background: transparent;
color: #8a817c;
font-size: 13px;
line-height: 1.7;
}
#news dd {
margin-bottom: 8px;
overflow: hidden;
background: transparent;
color: #4f4a47;
font-size: 13px;
line-height: 1.7;
}
#news dt:nth-child(n+3),
#news dd:nth-child(n+3) {
display: none;
}
#news.open dt:nth-child(n+3),
#news.open dd:nth-child(n+3) {
display: block;
}
#news.open dt:nth-child(n+11),
#news.open dd:nth-child(n+11) {
display: none;
}
#news .fb-button {
position: relative;
left: 50%;
float: left;
}
#news .fb-button a {
position: relative;
left: -50%;
display: block;
float: left;
margin: 6px auto 11px;
color: #776f6b;
font-size: 14px;
line-height: 1;
text-decoration: none;
}
#news .fb-button a span {
margin-right: 5px;
color: #a92218;
font-size: 26px;
vertical-align: -6px;
}
#news a.news-button {
position: absolute;
top: 10px;
right: 16px;
display: block;
padding: 7px 10px;
background: transparent;
border: 1px solid #d8cbc5;
border-radius: 0;
color: #77706c;
font-size: 12px;
line-height: 1;
text-decoration: none;
}
#news a.news-button span.show {
display: inline;
}
#news a.news-button span.close {
display: none;
}
#news.open a.news-button {
top: 100%;
margin-top: -38px;
}
#news.open a.news-button span.show {
display: none;
}
#news.open a.news-button span.close {
display: inline;
}
#news a.news-button em {
margin-right: 3px;
vertical-align: -1px;
}
.sp-mode #news {
min-height: 72px;
padding-bottom: 0;
}
.sp-mode #news h3 {
top: 22px;
left: 16px;
font-size: 22px;
}
.sp-mode #news dl {
padding: 18px 18px 12px 90px;
}
.sp-mode #news dt,
.sp-mode #news dd {
font-size: 18px;
line-height: 1.65;
}
.sp-mode #news .fb-button {
display: none;
}
.sp-mode #news a.news-button,
.sp-mode #news.open a.news-button {
position: static;
box-sizing: border-box;
width: 270px;
margin: 2px auto 16px;
padding: 12px;
color: #77706c;
font-size: 19px;
text-align: center;
}
/* =====================================================
RECOMMEND
===================================================== */
#recommend {
position: relative;
background: #fff;
text-align: center;
font-size: 0;
}
#recommend h3 {
margin: 34px auto;
color: #a92218;
font-family: 'Reimin Y10 Medium', 'Yu Mincho', 'Hiragino Mincho ProN',
serif;
font-size: 22px;
font-weight: normal;
line-height: 1.5;
text-align: center;
}
#recommend dl {
display: inline-block;
*display: inline;
width: 210px;
margin: 0 10px 40px;
vertical-align: top;
text-align: center;
*zoom: 1;
}
#recommend dt {
margin-bottom: 5px;
}
#recommend dt img {
width: 100%;
}
#recommend dd {
margin: 3px 5px 0;
line-height: 1.4;
}
#recommend dd.name {
font-size: 12px;
}
#recommend dd.name a {
color: #666;
text-decoration: none;
}
#recommend dd.price {
color: #a92218;
font-size: 11px;
}
#recommend a.flip-arrow {
position: absolute;
top: 50%;
display: block;
width: 30px;
height: 50px;
margin-top: -25px;
background: no-repeat 0 0;
cursor: pointer;
}
.sp-mode #recommend h3 {
margin: 38px 30px;
font-size: 26px;
}
.sp-mode #recommend dl {
width: 280px;
margin: 0 20px 40px;
}
.sp-mode #recommend dd,
.sp-mode #recommend dd.name,
.sp-mode #recommend dd.price {
font-size: 20px;
}
/* =====================================================
TOP VISUAL FINAL ADJUSTMENT
現在の「トップCSS」の一番下へ追加してください。
ロゴの赤色への統一と、スマホ写真の拡大を行います。
===================================================== */
/* スマホ：モックアップに合わせて作品を約20%大きく表示 */
.sp-mode #top-banner-carousel .container li a {
background-size: auto 120%;
}
/* トップページの赤を正式ロゴの色へ統一 */
#top-banner-carousel .carousel-arrow,
#top-banner-carousel .carousel-arrow:hover,
#top-renewal-intro .top-renewal-intro__eyebrow,
#top-renewal-intro h2,
#top-renewal-intro .top-renewal-intro__links a,
#news h3,
#news .fb-button a span,
#recommend h3,
#recommend dd.price {
color: #D81F27;
}
#top-banner-carousel .pagination a.selected span,
#top-renewal-intro .top-renewal-intro__links a:hover {
background: #D81F27;
}
#top-renewal-intro .top-renewal-intro__arch {
border-color: rgba(216, 31, 39, .26);
}
#top-renewal-intro .top-renewal-intro__links a {
border-color: rgba(216, 31, 39, .56);
}
#top-renewal-intro .top-renewal-intro__links a:hover {
border-color: #D81F27;
color: #fff;
}
/* =====================================================
TOP MESSAGE SIZE HOTFIX
現在の「トップCSS」の一番下へ追加してください。
「ガラスと光の、小さな惑星。」周辺を小さく整えます。
===================================================== */
.sp-mode #top-renewal-intro {
min-height: 370px;
padding: 90px 28px 45px;
}
.sp-mode #top-renewal-intro .top-renewal-intro__arch {
height: 460px;
}
.sp-mode #top-renewal-intro .top-renewal-intro__eyebrow {
margin-bottom: 20px;
font-size: 14px;
}
.sp-mode #top-renewal-intro h2 {
font-size: 32px;
line-height: 1.5;
}
.sp-mode #top-renewal-intro .top-renewal-intro__lead {
margin-top: 14px;
font-size: 17px;
line-height: 1.8;
}
.sp-mode #top-renewal-intro .top-renewal-intro__links {
margin-top: 26px;
}
.sp-mode #top-renewal-intro .top-renewal-intro__links a {
padding: 14px 8px;
font-size: 17px;
}
/* =====================================================
TOP ARCH SPACING HOTFIX
現在の「トップCSS」の一番下へ追加してください。
アーチとボタンの間に、モックアップと同じ余白を作ります。
===================================================== */
.sp-mode #top-renewal-intro .top-renewal-intro__links {
width: 100%;
max-width: 460px;
margin-right: auto;
margin-left: auto;
}


/* =========================================================
   YUKIE GLASS / JOURNAL 2026

   カラーミー「トップCSS」の末尾へ、そのまま追記してください。
   既存CSSは消しません。
   すべて #yg-journal の内側に限定しているため、
   ヘッダー・商品一覧・フッターには影響しません。
========================================================= */

#yg-journal,
#yg-journal * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#yg-journal {
  position: relative;
  clear: both;
  width: 100%;
  margin: 0;
  padding: 72px 32px 80px;
  overflow: hidden;
  border-top: 1px solid rgba(198, 47, 50, 0.13);
  border-bottom: 1px solid rgba(198, 47, 50, 0.13);
  background: #fffaf5;
  color: #4f4a46;
}

/* 「ひかりを、愛でる。」のアーチと呼応する、ごく薄い円弧 */
#yg-journal::before {
  position: absolute;
  top: -360px;
  right: -230px;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(198, 47, 50, 0.08);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

#yg-journal .yg-journal__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

#yg-journal .yg-journal__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 16px;
}

#yg-journal .yg-journal__heading-group {
  min-width: 0;
}

#yg-journal .yg-journal__eyebrow {
  margin: 0 0 7px;
  color: #b86464;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.27em;
}

#yg-journal .yg-journal__title {
  margin: 0;
  color: #c62f32;
  font-family: Georgia, "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.045em;
}

#yg-journal .yg-journal__all {
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 9px;
  margin: 0 0 4px;
  padding: 0 0 5px;
  border-bottom: 1px solid rgba(143, 51, 51, 0.55);
  color: #8f3333;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: color 0.25s ease, border-color 0.25s ease;
  transition: color 0.25s ease, border-color 0.25s ease;
}

#yg-journal .yg-journal__all:hover {
  border-color: #c62f32;
  color: #c62f32;
  text-decoration: none;
}

#yg-journal .yg-journal__all-arrow {
  display: inline-block;
  font-size: 13px;
  -webkit-transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
}

#yg-journal .yg-journal__all:hover .yg-journal__all-arrow {
  -webkit-transform: translate(2px, -2px);
  transform: translate(2px, -2px);
}

#yg-journal .yg-journal__lead {
  max-width: 720px;
  margin: 0 0 38px;
  color: #716b66;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.045em;
}

/*
   PC：最新記事を大きく、次の2件を右側へ。
   商品一覧とは異なる「読みもの」のリズムを作ります。
*/
#yg-journal .yg-journal__list {
  display: block;
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(300px, 0.92fr);
  grid-template-rows: auto auto;
  gap: 26px 38px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}

#yg-journal .yg-journal__item {
  min-width: 0;
  margin: 0;
  padding: 0;
}

#yg-journal .yg-journal__item:first-child {
  grid-row: 1 / span 2;
}

#yg-journal .yg-journal__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

#yg-journal .yg-journal__item:not(:first-child) .yg-journal__link {
  display: block;
  display: grid;
  grid-template-columns: minmax(128px, 42%) minmax(0, 1fr);
  gap: 18px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}

#yg-journal .yg-journal__media {
  position: relative;
  width: 100%;
  height: 0;
  margin: 0 0 18px;
  padding-top: 61.5%;
  overflow: hidden;
  background: #ede8e2;
}

#yg-journal .yg-journal__item:not(:first-child) .yg-journal__media {
  margin: 0;
  padding-top: 82%;
}

#yg-journal .yg-journal__media img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

#yg-journal .yg-journal__media::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 24%;
  background: -webkit-linear-gradient(top, rgba(35, 25, 22, 0), rgba(35, 25, 22, 0.05));
  background: linear-gradient(to bottom, rgba(35, 25, 22, 0), rgba(35, 25, 22, 0.05));
  content: "";
  pointer-events: none;
}

#yg-journal .yg-journal__media--placeholder {
  border: 1px solid rgba(198, 47, 50, 0.12);
  background:
    radial-gradient(circle at 78% 24%, rgba(198, 47, 50, 0.08), transparent 31%),
    #f2ede7;
}

#yg-journal .yg-journal__media--placeholder > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  color: rgba(143, 51, 51, 0.45);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#yg-journal .yg-journal__link:hover .yg-journal__media img {
  -webkit-transform: scale(1.025);
  transform: scale(1.025);
}

#yg-journal .yg-journal__body {
  min-width: 0;
}

#yg-journal .yg-journal__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  color: #918984;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

#yg-journal .yg-journal__label {
  min-width: 0;
  overflow: hidden;
  color: #bd7770;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#yg-journal .yg-journal__meta time {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

#yg-journal .yg-journal__article-title {
  margin: 0 0 13px;
  color: #494542;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.025em;
  -webkit-transition: color 0.25s ease;
  transition: color 0.25s ease;
}

#yg-journal .yg-journal__item:not(:first-child) .yg-journal__article-title {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.65;
}

#yg-journal .yg-journal__link:hover .yg-journal__article-title {
  color: #a92f32;
}

#yg-journal .yg-journal__read {
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  color: #8f3333;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

#yg-journal .yg-journal__read b {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  -webkit-transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
}

#yg-journal .yg-journal__link:hover .yg-journal__read b {
  -webkit-transform: translateX(3px);
  transform: translateX(3px);
}

#yg-journal .yg-journal__link:focus-visible,
#yg-journal .yg-journal__all:focus-visible {
  outline: 2px solid rgba(198, 47, 50, 0.68);
  outline-offset: 5px;
}

/* 中間幅 */
@media screen and (max-width: 920px) {
  #yg-journal {
    padding-right: 24px;
    padding-left: 24px;
  }

  #yg-journal .yg-journal__list {
    grid-template-columns: minmax(0, 1.42fr) minmax(280px, 1fr);
    gap: 24px 28px;
  }

  #yg-journal .yg-journal__item:not(:first-child) .yg-journal__link {
    grid-template-columns: minmax(112px, 40%) minmax(0, 1fr);
    gap: 15px;
  }

  #yg-journal .yg-journal__article-title {
    font-size: 20px;
  }

  #yg-journal .yg-journal__item:not(:first-child) .yg-journal__article-title {
    font-size: 14px;
  }
}

/* スマートフォン：1件目を大きく、2・3件目は読みやすい横組み */
@media screen and (max-width: 700px) {
  #yg-journal {
    padding: 48px 20px 56px;
  }

  #yg-journal::before {
    top: -255px;
    right: -220px;
    width: 420px;
    height: 420px;
  }

  #yg-journal .yg-journal__header {
    display: block;
    margin-bottom: 16px;
  }

  #yg-journal .yg-journal__title {
    font-size: 31px;
  }

  #yg-journal .yg-journal__all {
    margin-top: 20px;
    font-size: 11px;
  }

  #yg-journal .yg-journal__lead {
    margin-bottom: 30px;
    font-size: 13px;
    line-height: 1.9;
  }

  #yg-journal .yg-journal__list {
    display: block;
  }

  #yg-journal .yg-journal__item:first-child {
    margin-bottom: 34px;
  }

  #yg-journal .yg-journal__item:not(:first-child) {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(198, 47, 50, 0.12);
  }

  #yg-journal .yg-journal__item:not(:first-child) .yg-journal__link {
    display: grid;
    grid-template-columns: minmax(104px, 36%) minmax(0, 1fr);
    gap: 15px;
  }

  #yg-journal .yg-journal__media {
    margin-bottom: 15px;
    padding-top: 62%;
  }

  #yg-journal .yg-journal__item:not(:first-child) .yg-journal__media {
    padding-top: 100%;
  }

  #yg-journal .yg-journal__article-title {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.65;
  }

  #yg-journal .yg-journal__item:not(:first-child) .yg-journal__article-title {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.6;
  }

  #yg-journal .yg-journal__item:not(:first-child) .yg-journal__meta {
    display: block;
    margin-bottom: 6px;
  }

  #yg-journal .yg-journal__item:not(:first-child) .yg-journal__label,
  #yg-journal .yg-journal__item:not(:first-child) .yg-journal__meta time {
    display: block;
  }

  #yg-journal .yg-journal__item:not(:first-child) .yg-journal__meta time {
    margin-top: 3px;
  }

  #yg-journal .yg-journal__read {
    font-size: 10px;
  }
}

/* カラーミーテンプレートが付与するスマホ用クラスにも対応 */
.sp-mode #yg-journal {
  padding: 48px 20px 56px;
}

.sp-mode #yg-journal::before {
  top: -255px;
  right: -220px;
  width: 420px;
  height: 420px;
}

.sp-mode #yg-journal .yg-journal__header {
  display: block;
  margin-bottom: 16px;
}

.sp-mode #yg-journal .yg-journal__title {
  font-size: 31px;
}

.sp-mode #yg-journal .yg-journal__all {
  margin-top: 20px;
  font-size: 11px;
}

.sp-mode #yg-journal .yg-journal__lead {
  margin-bottom: 30px;
  font-size: 13px;
  line-height: 1.9;
}

.sp-mode #yg-journal .yg-journal__list {
  display: block;
}

.sp-mode #yg-journal .yg-journal__item:first-child {
  margin-bottom: 34px;
}

.sp-mode #yg-journal .yg-journal__item:not(:first-child) {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(198, 47, 50, 0.12);
}

.sp-mode #yg-journal .yg-journal__item:not(:first-child) .yg-journal__link {
  display: grid;
  grid-template-columns: minmax(104px, 36%) minmax(0, 1fr);
  gap: 15px;
}

.sp-mode #yg-journal .yg-journal__media {
  margin-bottom: 15px;
  padding-top: 62%;
}

.sp-mode #yg-journal .yg-journal__item:not(:first-child) .yg-journal__media {
  padding-top: 100%;
}

.sp-mode #yg-journal .yg-journal__article-title {
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 1.65;
}

.sp-mode #yg-journal .yg-journal__item:not(:first-child) .yg-journal__article-title {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.sp-mode #yg-journal .yg-journal__item:not(:first-child) .yg-journal__meta {
  display: block;
  margin-bottom: 6px;
}

.sp-mode #yg-journal .yg-journal__item:not(:first-child) .yg-journal__label,
.sp-mode #yg-journal .yg-journal__item:not(:first-child) .yg-journal__meta time {
  display: block;
}

.sp-mode #yg-journal .yg-journal__item:not(:first-child) .yg-journal__meta time {
  margin-top: 3px;
}

.sp-mode #yg-journal .yg-journal__read {
  font-size: 10px;
}

@media screen and (max-width: 380px) {
  #yg-journal,
  .sp-mode #yg-journal {
    padding-right: 16px;
    padding-left: 16px;
  }

  #yg-journal .yg-journal__item:not(:first-child) .yg-journal__link,
  .sp-mode #yg-journal .yg-journal__item:not(:first-child) .yg-journal__link {
    grid-template-columns: minmax(96px, 35%) minmax(0, 1fr);
    gap: 12px;
  }

  #yg-journal .yg-journal__item:not(:first-child) .yg-journal__article-title,
  .sp-mode #yg-journal .yg-journal__item:not(:first-child) .yg-journal__article-title {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #yg-journal .yg-journal__media img,
  #yg-journal .yg-journal__article-title,
  #yg-journal .yg-journal__read b,
  #yg-journal .yg-journal__all,
  #yg-journal .yg-journal__all-arrow {
    -webkit-transition: none;
    transition: none;
  }
}


/* =====================================================
YUKIE GLASS / THE WORLD FROM GLASS
GLASS at the core, GARDEN and GICLEE as branches
===================================================== */
#yg-expressions,
#yg-expressions * {
box-sizing: border-box;
}

#yg-expressions {
position: relative;
width: 100%;
padding: 92px 38px 102px;
overflow: hidden;
background: #fffdf9;
border-bottom: 1px solid #e7ddd7;
color: #5c5651;
}

#yg-expressions .yg-expressions__inner {
width: 100%;
max-width: 1160px;
margin: 0 auto;
}

#yg-expressions .yg-expressions__header {
max-width: 760px;
margin: 0 auto 48px;
text-align: center;
}

#yg-expressions .yg-expressions__eyebrow {
margin: 0 0 17px;
color: #ad7d72;
font-family: Cinzel, 'Times New Roman', serif;
font-size: 10px;
line-height: 1.5;
letter-spacing: .30em;
}

#yg-expressions .yg-expressions__header h2 {
margin: 0;
color: #4f4945;
font-family: 'EB Garamond', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
font-size: 32px;
font-weight: normal;
line-height: 1.55;
letter-spacing: .08em;
}

#yg-expressions .yg-expressions__lead {
margin: 18px 0 0;
color: #776f69;
font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
font-size: 14px;
line-height: 2;
letter-spacing: .04em;
}

#yg-expressions .yg-expressions__grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}

#yg-expressions .yg-expressions__branches {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: 22px;
}

#yg-expressions .yg-expressions__branch-intro {
margin: 42px 0 21px;
padding-top: 25px;
border-top: 1px solid rgba(151, 127, 117, .24);
text-align: center;
}

#yg-expressions .yg-expressions__branch-intro p {
margin: 0;
color: #68615b;
font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
font-size: 15px;
line-height: 1.8;
letter-spacing: .06em;
}

#yg-expressions .yg-expressions__branch-intro small {
display: block;
margin-bottom: 7px;
color: #ac857a;
font-family: Cinzel, 'Times New Roman', serif;
font-size: 8px;
line-height: 1.5;
letter-spacing: .24em;
}

#yg-expressions .yg-expression-card {
display: flex;
min-width: 0;
flex-direction: column;
background: #fff;
border: 1px solid rgba(151, 127, 117, .24);
box-shadow: 0 10px 28px rgba(75, 54, 47, .045);
}

#yg-expressions .yg-expression-card--giclee {
border-color: rgba(151, 127, 117, .20);
background: #f7f3ee;
}

#yg-expressions .yg-expression-card--garden {
border-color: rgba(101, 112, 91, .28);
background: #fbfbf7;
}

#yg-expressions .yg-expression-card__media {
position: relative;
display: block;
width: 100%;
height: 0;
padding-top: 66.666%;
overflow: hidden;
background: #eee9e4;
}

#yg-expressions .yg-expression-card__media::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 34%;
background: linear-gradient(to top, rgba(38, 29, 26, .16), rgba(38, 29, 26, 0));
content: '';
pointer-events: none;
}

#yg-expressions .yg-expression-card__media img {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
transition: transform .55s ease;
}

#yg-expressions .yg-expression-card__media:hover img {
transform: scale(1.025);
}

#yg-expressions .yg-expression-card__body {
display: flex;
min-height: 286px;
padding: 28px 25px 24px;
flex: 1;
flex-direction: column;
text-align: center;
}

#yg-expressions .yg-expression-card__en {
margin: 0 0 10px;
color: #a87a70;
font-family: Cinzel, 'Times New Roman', serif;
font-size: 9px;
line-height: 1.45;
letter-spacing: .24em;
}

#yg-expressions .yg-expression-card h3 {
margin: 0;
color: #4e4945;
font-family: 'EB Garamond', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
font-size: 22px;
font-weight: normal;
line-height: 1.55;
letter-spacing: .04em;
}

#yg-expressions .yg-expression-card__poem {
margin: 16px 0 0;
color: #D81F27;
font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
font-size: 14px;
line-height: 1.7;
letter-spacing: .05em;
}

#yg-expressions .yg-expression-card__copy {
margin: 8px 0 0;
color: #77706a;
font-size: 12px;
line-height: 1.9;
}

#yg-expressions .yg-expression-card__links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: auto;
padding-top: 22px;
}

#yg-expressions .yg-expression-card__links--single {
grid-template-columns: 1fr;
}

#yg-expressions .yg-expression-card__links a {
display: flex;
min-height: 43px;
padding: 10px 8px;
align-items: center;
justify-content: center;
border: 1px solid rgba(160, 119, 107, .38);
color: #695f5a;
font-size: 10px;
line-height: 1.45;
text-decoration: none;
transition: background .2s, border-color .2s, color .2s;
}

#yg-expressions .yg-expression-card__links a:hover {
background: #D81F27;
border-color: #D81F27;
color: #fff;
}

#yg-expressions a:focus-visible {
outline: 2px solid #D81F27;
outline-offset: 3px;
}

/* ---------- hierarchy: core glass ---------- */
#yg-expressions .yg-expression-card--glass {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr);
min-height: 430px;
border-color: rgba(160, 112, 100, .34);
background: #fffdf9;
box-shadow: 0 16px 42px rgba(75, 54, 47, .075);
}

#yg-expressions .yg-expression-card--glass .yg-expression-card__media {
height: 100%;
min-height: 430px;
padding-top: 0;
}

#yg-expressions .yg-expression-card--glass .yg-expression-card__body {
min-height: 430px;
padding: 53px 43px 39px;
justify-content: center;
text-align: left;
}

#yg-expressions .yg-expression-card--glass .yg-expression-card__en {
font-size: 10px;
}

#yg-expressions .yg-expression-card--glass h3 {
font-size: 30px;
}

#yg-expressions .yg-expression-card--glass .yg-expression-card__poem {
font-size: 16px;
}

#yg-expressions .yg-expression-card--glass .yg-expression-card__copy {
max-width: 370px;
font-size: 13px;
}

#yg-expressions .yg-expression-card--glass .yg-expression-card__links {
width: 100%;
max-width: 370px;
margin-top: 28px;
padding-top: 0;
}

/* ---------- hierarchy: the two branches ---------- */
#yg-expressions .yg-expression-card--garden .yg-expression-card__media {
padding-top: 58%;
}

#yg-expressions .yg-expression-card--giclee .yg-expression-card__media {
padding-top: 54%;
}

#yg-expressions .yg-expression-card--garden .yg-expression-card__body {
min-height: 284px;
padding-right: 32px;
padding-left: 32px;
}

#yg-expressions .yg-expression-card--giclee .yg-expression-card__body {
min-height: 250px;
padding: 24px 22px 21px;
}

#yg-expressions .yg-expression-card--giclee h3 {
font-size: 19px;
}

#yg-expressions .yg-expression-card--giclee .yg-expression-card__poem {
margin-top: 12px;
font-size: 13px;
}

#yg-expressions .yg-expression-card--giclee .yg-expression-card__copy {
font-size: 11px;
}

#yg-expressions .yg-expression-card--giclee .yg-expression-card__links {
padding-top: 17px;
}

/* ---------- カラーミーの640pxスマートフォン表示 ---------- */
.sp-mode #yg-expressions {
padding: 72px 28px 82px;
}

.sp-mode #yg-expressions .yg-expressions__header {
max-width: 570px;
margin-bottom: 42px;
}

.sp-mode #yg-expressions .yg-expressions__eyebrow {
margin-bottom: 17px;
font-size: 12px;
}

.sp-mode #yg-expressions .yg-expressions__header h2 {
font-size: 31px;
}

.sp-mode #yg-expressions .yg-expressions__lead {
margin-top: 16px;
font-size: 17px;
line-height: 1.9;
}

.sp-mode #yg-expressions .yg-expressions__grid {
grid-template-columns: 1fr;
gap: 20px;
}

.sp-mode #yg-expressions .yg-expressions__branch-intro {
margin: 38px 0 19px;
padding-top: 23px;
}

.sp-mode #yg-expressions .yg-expressions__branch-intro p {
font-size: 18px;
}

.sp-mode #yg-expressions .yg-expressions__branch-intro small {
margin-bottom: 8px;
font-size: 10px;
}

.sp-mode #yg-expressions .yg-expressions__branches {
grid-template-columns: 1fr;
gap: 20px;
}

.sp-mode #yg-expressions .yg-expression-card__media {
padding-top: 56.25%;
}

.sp-mode #yg-expressions .yg-expression-card__body {
min-height: 0;
padding: 29px 27px 27px;
}

.sp-mode #yg-expressions .yg-expression-card__en {
font-size: 11px;
}

.sp-mode #yg-expressions .yg-expression-card h3 {
font-size: 27px;
}

.sp-mode #yg-expressions .yg-expression-card__poem {
margin-top: 13px;
font-size: 18px;
}

.sp-mode #yg-expressions .yg-expression-card__copy {
font-size: 15px;
line-height: 1.85;
}

.sp-mode #yg-expressions .yg-expression-card__links {
padding-top: 21px;
}

.sp-mode #yg-expressions .yg-expression-card__links a {
min-height: 52px;
padding: 13px 9px;
font-size: 14px;
}

/* スマートフォンでも「中心→大きな枝→静かな派生」の順序を保つ */
.sp-mode #yg-expressions .yg-expression-card--glass {
display: flex;
min-height: 0;
}

.sp-mode #yg-expressions .yg-expression-card--glass .yg-expression-card__media {
height: 0;
min-height: 0;
padding-top: 62%;
}

.sp-mode #yg-expressions .yg-expression-card--glass .yg-expression-card__body {
min-height: 0;
padding: 37px 31px 31px;
text-align: center;
}

.sp-mode #yg-expressions .yg-expression-card--glass h3 {
font-size: 32px;
}

.sp-mode #yg-expressions .yg-expression-card--glass .yg-expression-card__copy,
.sp-mode #yg-expressions .yg-expression-card--glass .yg-expression-card__links {
max-width: none;
}

.sp-mode #yg-expressions .yg-expression-card--garden .yg-expression-card__media {
padding-top: 56.25%;
}

.sp-mode #yg-expressions .yg-expression-card--garden .yg-expression-card__body {
min-height: 0;
padding: 31px 29px 29px;
}

.sp-mode #yg-expressions .yg-expression-card--giclee {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
min-height: 248px;
}

.sp-mode #yg-expressions .yg-expression-card--giclee .yg-expression-card__media {
height: 100%;
min-height: 248px;
padding-top: 0;
}

.sp-mode #yg-expressions .yg-expression-card--giclee .yg-expression-card__body {
min-height: 248px;
padding: 25px 24px 22px;
justify-content: center;
text-align: left;
}

.sp-mode #yg-expressions .yg-expression-card--giclee .yg-expression-card__en {
font-size: 9px;
}

.sp-mode #yg-expressions .yg-expression-card--giclee h3 {
font-size: 22px;
}

.sp-mode #yg-expressions .yg-expression-card--giclee .yg-expression-card__poem {
font-size: 15px;
}

.sp-mode #yg-expressions .yg-expression-card--giclee .yg-expression-card__copy {
font-size: 13px;
line-height: 1.75;
}

.sp-mode #yg-expressions .yg-expression-card--giclee .yg-expression-card__links {
padding-top: 15px;
}

.sp-mode #yg-expressions .yg-expression-card--giclee .yg-expression-card__links a {
min-height: 43px;
font-size: 12px;
}

@media screen and (max-width: 760px) {
body:not(.sp-mode) #yg-expressions {
padding: 64px 22px 72px;
}
body:not(.sp-mode) #yg-expressions .yg-expressions__grid {
grid-template-columns: 1fr;
}
body:not(.sp-mode) #yg-expressions .yg-expressions__branches {
grid-template-columns: 1fr;
}
body:not(.sp-mode) #yg-expressions .yg-expression-card--glass {
display: flex;
min-height: 0;
}
body:not(.sp-mode) #yg-expressions .yg-expression-card--glass .yg-expression-card__media {
height: 0;
min-height: 0;
padding-top: 62%;
}
body:not(.sp-mode) #yg-expressions .yg-expression-card__body {
min-height: 0;
}
body:not(.sp-mode) #yg-expressions .yg-expression-card--glass .yg-expression-card__body {
min-height: 0;
text-align: center;
}
}

@media (prefers-reduced-motion: reduce) {
#yg-expressions .yg-expression-card__media img {
transition: none;
}
}

/* =====================================================
YUKIE GLASS / ことばの採集 — TOP GATEWAY
RecommendとJournalの間に置く「幸愛硝子の世界を読む入口」
===================================================== */
#yg-words-gateway,
#yg-words-gateway * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#yg-words-gateway {
position: relative;
clear: both;
width: 100%;
margin: 0;
padding: 72px 32px;
overflow: hidden;
background:
radial-gradient(circle at 13% 18%, rgba(205, 229, 230, .42), transparent 29%),
radial-gradient(circle at 88% 82%, rgba(238, 205, 213, .34), transparent 31%),
#f9f5ef;
border-top: 1px solid rgba(169, 64, 55, .13);
color: #514c48;
}

#yg-words-gateway .yg-words-gateway__link {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
max-width: 1100px;
min-height: 290px;
margin: 0 auto;
padding: 54px 80px;
overflow: hidden;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: rgba(255, 253, 249, .64);
border: 1px solid rgba(169, 64, 55, .25);
color: inherit;
text-decoration: none;
}

#yg-words-gateway .yg-words-gateway__link::before {
position: absolute;
top: 35px;
left: 50%;
width: 500px;
height: 500px;
border: 1px solid rgba(169, 64, 55, .13);
border-bottom: 0;
border-radius: 250px 250px 0 0;
content: '';
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
}

#yg-words-gateway .yg-words-gateway__air,
#yg-words-gateway .yg-words-gateway__air i {
position: absolute;
display: block;
font-style: normal;
pointer-events: none;
}

#yg-words-gateway .yg-words-gateway__air {
top: 0;
right: 0;
bottom: 0;
left: 0;
color: rgba(91, 82, 76, .28);
font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
font-size: 11px;
line-height: 1.8;
letter-spacing: .04em;
}

#yg-words-gateway .yg-words-gateway__air i:nth-child(1) {
top: 42px;
left: 42px;
}

#yg-words-gateway .yg-words-gateway__air i:nth-child(2) {
top: 88px;
right: 48px;
}

#yg-words-gateway .yg-words-gateway__air i:nth-child(3) {
right: 76px;
bottom: 36px;
}

#yg-words-gateway .yg-words-gateway__content {
position: relative;
z-index: 1;
display: block;
width: 100%;
max-width: 690px;
text-align: center;
}

#yg-words-gateway .yg-words-gateway__eyebrow,
#yg-words-gateway .yg-words-gateway__title,
#yg-words-gateway .yg-words-gateway__lead,
#yg-words-gateway .yg-words-gateway__action {
display: block;
}

#yg-words-gateway .yg-words-gateway__eyebrow {
margin: 0 0 12px;
color: #b27a74;
font-family: Cinzel, 'Times New Roman', serif;
font-size: 10px;
line-height: 1.6;
letter-spacing: .27em;
}

#yg-words-gateway .yg-words-gateway__title {
color: #514a45;
font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
font-size: 36px;
font-weight: normal;
line-height: 1.45;
letter-spacing: .09em;
}

#yg-words-gateway .yg-words-gateway__lead {
margin: 13px auto 0;
color: #756e68;
font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
font-size: 14px;
line-height: 2;
letter-spacing: .045em;
}

#yg-words-gateway .yg-words-gateway__action {
width: 250px;
margin: 28px auto 0;
padding: 13px 18px 12px;
border: 1px solid rgba(169, 64, 55, .44);
color: #9f302f;
font-size: 12px;
line-height: 1.5;
letter-spacing: .07em;
-webkit-transition: color .25s ease, background-color .25s ease, border-color .25s ease;
transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}

#yg-words-gateway .yg-words-gateway__action b {
display: inline-block;
margin-left: 9px;
font-weight: normal;
-webkit-transition: -webkit-transform .25s ease;
transition: transform .25s ease;
}

#yg-words-gateway .yg-words-gateway__link:hover .yg-words-gateway__action {
background: #b5272c;
border-color: #b5272c;
color: #fff;
}

#yg-words-gateway .yg-words-gateway__link:hover .yg-words-gateway__action b {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}

#yg-words-gateway .yg-words-gateway__link:focus-visible {
outline: 2px solid rgba(181, 39, 44, .72);
outline-offset: 5px;
}

.sp-mode #yg-words-gateway {
width: 640px;
padding: 52px 28px 56px;
}

.sp-mode #yg-words-gateway .yg-words-gateway__link {
min-height: 360px;
padding: 58px 42px 52px;
}

.sp-mode #yg-words-gateway .yg-words-gateway__link::before {
top: 44px;
width: 470px;
height: 470px;
border-radius: 235px 235px 0 0;
}

.sp-mode #yg-words-gateway .yg-words-gateway__air {
font-size: 12px;
}

.sp-mode #yg-words-gateway .yg-words-gateway__air i:nth-child(1) {
top: 30px;
left: 25px;
}

.sp-mode #yg-words-gateway .yg-words-gateway__air i:nth-child(2) {
top: 87px;
right: 24px;
}

.sp-mode #yg-words-gateway .yg-words-gateway__air i:nth-child(3) {
right: 35px;
bottom: 24px;
}

.sp-mode #yg-words-gateway .yg-words-gateway__eyebrow {
margin-bottom: 13px;
font-size: 12px;
}

.sp-mode #yg-words-gateway .yg-words-gateway__title {
font-size: 40px;
}

.sp-mode #yg-words-gateway .yg-words-gateway__lead {
max-width: 440px;
margin-top: 16px;
font-size: 17px;
line-height: 1.95;
}

.sp-mode #yg-words-gateway .yg-words-gateway__action {
width: 330px;
margin-top: 30px;
padding: 16px 20px 15px;
font-size: 17px;
}

@media screen and (max-width: 700px) {
body:not(.sp-mode) #yg-words-gateway {
padding: 48px 20px;
}
body:not(.sp-mode) #yg-words-gateway .yg-words-gateway__link {
min-height: 340px;
padding: 54px 28px 48px;
}
body:not(.sp-mode) #yg-words-gateway .yg-words-gateway__title {
font-size: 32px;
}
body:not(.sp-mode) #yg-words-gateway .yg-words-gateway__lead {
font-size: 14px;
}
}

@media (prefers-reduced-motion: reduce) {
#yg-words-gateway .yg-words-gateway__action,
#yg-words-gateway .yg-words-gateway__action b {
-webkit-transition: none;
transition: none;
}
}