@charset "UTF-8";


* {
  font-family: 'Overpass', 'Noto Sans JP', sans-serif;
}


html {
  font-size: 62.5%;
}

/*----------------------------------------
	clearfix
----------------------------------------*/
.clearfix:after {
content: "";
display: block;
clear: both;
}
/*----------------------------------------
	clearfix
----------------------------------------*/

.magazine {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/*----------------------------------------
	reset
----------------------------------------*/
body {
  min-width: auto;
}
.fs-l-main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
.fs-l-pageMain {
  width: 100%;
  max-width: none;
}

.layout_menu {
  display: none;
}

.layout_header_delivery {
  display: none!important;
}

.fs-c-heading.fs-c-heading--page {
display: none!important;
}

.layout_header_keywords {
  display: none;
}

.layout_header_form_input {
  font-size: 0;
}


.layout_header_search {
  display: none;
}

.re_gnavi_wrap {
  display: none;
}

.layout_header_user {
  display: none;
}

.re_layout_header_utility .layout_header_utility-navi {
  display: none;
}

.re_header_user_menu {
  display: none;
}


/*----------------------------------------
	reset
----------------------------------------*/

  /*----------------------------------------
  	pc/sp
  ----------------------------------------*/

/* PCだけで表示させたい
スマホのときは消えてほしい*/
  .sp-invisible
  {
      display: block;
  }
/* スマホで表示させたい
PCのときは消えてほしい*/
  .sp-display
  {
      display: none;
  }
  /*----------------------------------------
    pc/sp
  ----------------------------------------*/


  /* ----------------------------------------
  	Tablet
  ---------------------------------------- */

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

    .layout_header_meta_inner {
      width: 768px;
    }

    .layout_header_navi {
      width: 768px;
    }

    .re_layout_footer_wrap {
      display: none;
    }
  }

  /* ----------------------------------------
  	Tablet
  ---------------------------------------- */

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


/*----------------------------------------
	pc/sp
----------------------------------------*/

/* PCだけで表示させたい
スマホのときは消えてほしい*/
.sp-invisible
{
    display: none;
}
/* スマホで表示させたい
PCのときは消えてほしい*/
.sp-display
{
    display: block;
}

/*----------------------------------------
  pc/sp
----------------------------------------*/

.magazine {
  width: 100%;
  margin: 0 auto;
}

/* sp_footer_navi */

.sp_footer_navi220426_magazine {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  background: #f7f7f7;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 800000001;
  position: fixed;
  box-shadow: 0 -2px 4px 0 rgb(0 0 0 / 13%);
}

.sp_footer_navi_box220426_magazine {
  width: 20%;
  padding: 2%;
  display: block;
  text-align: center;
  /* border-right: 1px solid #fff; */
}

.sp_footer_navi_box220426_magazine p {
  font-size: 10px;
  margin-top: 4px;
  line-height: 1;
}

.sp_footer_navi_box220426_magazine img {
  width: 40%;
}


#toTop {
  bottom: 60px;
}


/* sp_footer_navi */

/*----------------------------------------
reset
----------------------------------------*/

body {
  min-width: auto;
}

.fs-l-main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.fs-l-pageMain {
  width: 100%;
  /* 左右の余白削除 */
  padding-left: 0px;
  padding-right: 0px;
}

.layout_header_navi {
  display: none;
}

.header-gnavi-category {
  display: none!important;
}

ul.sp-header-gnavi.fs-p-accountInfo.fs-clientInfo.is-ready {
  display: none!important;
}

.fs-l-header__drawerOpener {
  display: none;
}

.psLink img {
  display: none;
}

.re_keyword_form_wrap {
  display: none;
}

.search-price {
  display: none;
}

.re_footer-navi {
  display: none!important;
}

.footer-sns {
  display: none;
}

.footer-under {
  display: none;
}

.fs-clientInfo.is-ready {
    display: none;
}

/*----------------------------------------
reset
----------------------------------------*/

}

/*----------------------------------------
  10月 骨格別・軽アウター特集
----------------------------------------*/
/* 10月特集専用。共通の関連記事・スマホナビは元ページのCSSを継続利用 */
.outer-feature {
  --of-ink:#302a26;
  --of-sub:#776e66;
  --of-line:#e4ddd5;
  --of-bg:#f7f4ef;
  color:var(--of-ink);
  font-family:"Noto Sans JP",sans-serif;
  line-height:1.8
}

.outer-feature * {
  box-sizing:border-box
}

.outer-feature a {
  color:inherit;
  text-decoration:none
}

.outer-feature img {
  display:block;
  max-width:100%;
  height:auto
}

.outer-hero {
  max-width:1280px;
  margin:0 auto
}

.outer-hero img {
  width:100%
}

.outer-intro {
  text-align:center;
  padding:64px 20px 56px
}

.outer-intro .kicker,.outer-look .kicker {
  font-family:Georgia,serif;
  letter-spacing:.16em;
  color:#836a5a;
  font-size:12px
}

.outer-intro h1 {
  font-size:clamp(22px,3vw,34px);
  font-weight:500;
  letter-spacing:.08em;
  margin:13px 0 17px
}

.outer-intro p {
  font-size:13px;
  line-height:2.1;
  color:#59534c
}

.outer-index {
  max-width:1120px;
  margin:0 auto 85px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  padding:0 22px
}

.outer-index a {
  display:block
}

.outer-index img {
  width:100%;
  aspect-ratio: 5 / 6;
  object-fit:cover;
  object-position:center 60%
}

.outer-index span {
  font:12px Georgia,serif;
  letter-spacing:.1em;
  display:block;
  margin:15px 0 3px;
  color:#806a59
}

.outer-index strong {
  font:30px Georgia,serif;
  font-weight:400
}

.outer-index small {
  display:block;
  font-size:11px;
  color:var(--of-sub);
  margin-top:3px
}

.outer-look {
  padding:78px 24px 90px;
  border-top:1px solid var(--of-line);
  scroll-margin-top:22px
}

.outer-look:nth-of-type(even) {
  background:var(--of-bg)
}

.outer-look-inner {
  max-width:1120px;
  margin:auto
}

.outer-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-bottom:1px solid var(--of-line);
  margin-bottom:29px;
  padding-bottom:12px
}

.outer-heading h2 {
  font:clamp(40px,6vw,72px) Georgia,serif;
  font-weight:400;
  margin:0
}

.outer-heading span {
  font:12px Georgia,serif;
  color:#806a59
}

.outer-spread {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:6%;
  align-items:center
}

.outer-carousel {
  position:relative;
  width:100%;
  aspect-ratio: 5 / 6;
  background:#f1eeea;
  overflow:hidden
}

.outer-slide {
  display:none;
  width:100%;
  height:100%
}

.outer-slide.is-active {
  display:block
}

.outer-slide img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 61%
}

.outer-controls {
  position:absolute;
  bottom:14px;
  left:14px;
  right:14px;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.outer-controls button {
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  background:#fffcf2e8;
  color:#302a26;
  font-size:23px;
  cursor:pointer
}

.outer-controls span {
  padding:6px 13px;
  background:#fffcf2e8;
  font:12px Georgia,serif
}

.outer-story h3 {
  font-size:clamp(22px,2.3vw,31px);
  font-weight:500;
  line-height:1.6;
  margin:18px 0
}

.outer-story p {
  font-size:13px;
  line-height:2.1;
  color:#5f5851
}

.outer-details {
  margin-top:28px
}

.outer-details h4,.outer-products h4 {
  font:14px Georgia,serif;
  letter-spacing:.1em;
  font-weight:400;
  margin:0 0 12px
}

.outer-details-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

.outer-details figure {
  margin:0
}

.outer-details img {
  width:100%;
  aspect-ratio: 5 / 6;
  object-fit:cover;
  object-position:center 55%
}

.outer-details figcaption {
  font-size:11px;
  color:var(--of-sub);
  margin-top:6px
}

.outer-products {
  max-width:1120px;
  margin:42px auto 0;
  border-top:1px solid var(--of-line);
  padding-top:25px
}

.outer-products p {
  font-size:12px;
  color:var(--of-sub);
  margin:0
}

.outer-back {
  text-align:center;
  padding:50px 0 0
}

.outer-back a {
  font:12px Georgia,serif;
  border-bottom:1px solid #796b61;
  padding-bottom:5px
}

@media(max-width:700px) {
  .outer-intro {
    padding:43px 22px
  }

  .outer-intro p {
    font-size:12px
  }

  .outer-index {
    gap:8px;
    padding:0 12px;
    margin-bottom:52px
  }

  .outer-index img {
    aspect-ratio: 5 / 6
  }

  .outer-index span {
    font-size:9px;
    margin-top:8px
  }

  .outer-index strong {
    font-size:15px
  }

  .outer-index small {
    font-size:9px;
    line-height:1.5
  }

  .outer-look {
    padding:45px 17px 58px
  }

  .outer-heading {
    margin-bottom:18px
  }

  .outer-heading h2 {
    font-size:39px
  }

  .outer-spread {
    display:block
  }

  .outer-carousel {
    aspect-ratio: 5 / 6
  }

  .outer-story {
    padding-top:25px
  }

  .outer-story h3 {
    font-size:23px
  }

  .outer-story p {
    font-size:12px
  }

  .outer-products {
    margin-top:34px
  }

  .outer-details img {
    aspect-ratio: 5 / 6;
  }

  .outer-back {
    padding-top:35px
  }

}

/* 関連記事：現行HTMLの構造を引き継ぐ */
.magazine .etc {
  max-width: 1120px;
  margin: 0 auto;
  padding: 70px 24px 90px;
}
.magazine .etctop {
  text-align: center;
  margin-bottom: 28px;
}
.magazine .etctop h2 {
  font: 30px Georgia, serif;
  letter-spacing: .08em;
  margin: 0 0 6px;
}
.magazine .etctop p { font-size: 12px; }
.magazine .etcmg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.magazine .etcmg .itm img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.magazine .etcmg .itm p { margin: 9px 0 0; font-size: 12px; }
.magazine .etcmg a, .magazine .etclink a { color: inherit; text-decoration: none; }
.magazine .etclink { text-align: center; margin-top: 32px; font: 13px Georgia, serif; }
@media (max-width: 700px) {
  .magazine .etc { padding: 50px 16px 110px; }
  .magazine .etcmg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .magazine .etctop h2 { font-size: 25px; }
}

/* 写真と余白を主役にした10月号の誌面 */
.outer-feature { --of-bg: #fff; }
.outer-hero {
  max-width: 1050px;
  aspect-ratio: 1280 / 700;
  display: grid;
  grid-template-columns: 40% 60%;
  border-left: clamp(20px, 4vw, 52px) solid #6b584d;
  background: #eeebe7;
}
.outer-hero-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 12% 5% 7% 9%; color: #493f37; }
.outer-hero-copy::before { content: ""; position: absolute; top: 12%; left: 9%; width: 82%; border-top: 1px solid #a69b91; }
.outer-hero-copy h1 { margin: 16% 0 12px; font: 400 clamp(34px, 4.3vw, 60px)/1.12 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.outer-hero-copy p { margin: 0; font-size: clamp(11px, 1.1vw, 15px); letter-spacing: .11em; }
.outer-hero-copy small { margin-top: auto; font: 400 clamp(11px, 1.15vw, 15px)/1.55 Georgia, serif; letter-spacing: .02em; }
.outer-hero-copy span { margin-top: 28px; font: 400 10px Georgia, serif; letter-spacing: .14em; }
.outer-hero-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2%; padding: 11% 3.5% 7% 0; min-width: 0; min-height: 0; }
.outer-hero-photos img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; min-width: 0; min-height: 0; }
.outer-intro { padding: 48px 20px 46px; }
.outer-index { max-width: 920px; gap: 0; margin-bottom: 80px; }
.outer-index a { position: relative; border-top: 1px solid var(--of-line); border-bottom: 1px solid var(--of-line); padding: 18px 16px 20px; }
.outer-index a + a { border-left: 1px solid var(--of-line); }
.outer-index img { display: none; }
.outer-index span { margin: 0 0 8px; }
.outer-index small { margin-top: 7px; }
.outer-look { background: #fff !important; padding-top: 92px; padding-bottom: 94px; }
.outer-heading { border: 0; margin-bottom: 25px; }
.outer-story h3 { margin-top: 0; }
.outer-story p { max-width: 34em; }
.outer-details { margin-top: 30px; }
.outer-details h4, .outer-products h4 { font-family: "Noto Sans JP", sans-serif; font-size: 12px; letter-spacing: .08em; }
.outer-details-grid { gap: 13px; }
.outer-details figcaption { margin-top: 8px; }
#wave .outer-spread { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
#wave .outer-carousel { order: 2; }
#wave .outer-story { order: 1; }
@media (max-width: 700px) {
  .outer-hero { aspect-ratio: auto; grid-template-columns: 1fr; border-left-width: 10px; }
  .outer-hero-copy { padding: 34px 24px 26px; }
  .outer-hero-copy::before { top: 24px; left: 24px; width: calc(100% - 48px); }
  .outer-hero-copy h1 { font-size: clamp(38px, 10vw, 52px); margin: 28px 0 14px; }
  .outer-hero-copy small { margin-top: 26px; }
  .outer-hero-copy span { margin-top: 14px; }
  .outer-hero-photos { height: clamp(240px, 72vw, 390px); padding: 0 12px 18px 24px; gap: 6px; }
  .outer-intro { padding: 38px 24px; }
  .outer-index { padding: 0 12px; margin-bottom: 28px; }
  .outer-index a { padding: 11px 4px 13px; text-align: center; }
  .outer-index strong { font-size: 15px; }
  .outer-index span { font-size: 9px; }
  .outer-index small { font-size: 9px; }
  .outer-look { padding-top: 56px; padding-bottom: 62px; }
  #wave .outer-spread { display: block; }
  #wave .outer-carousel, #wave .outer-story { order: initial; }
}

/* タイポグラフィ：細い和文と余白のある欧文を組み合わせる */
.outer-feature, .magazine .etc {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}
.outer-index span,
.outer-heading span, .outer-details figcaption {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: .12em;
}
.outer-story h3 {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  letter-spacing: .045em;
}
.outer-story h3 { line-height: 1.75; }
.outer-heading h2, .outer-index strong {
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: -.025em;
}
.outer-heading h2 { font-size: clamp(52px, 7vw, 88px); line-height: .95; }
.outer-index strong { font-size: 37px; line-height: 1; }
.outer-intro p, .outer-story p { font-weight: 400; letter-spacing: .035em; }
@media (max-width: 700px) {
  .outer-heading h2 { font-size: 51px; }
  .outer-index strong { font-size: 21px; }
  .outer-story h3 { font-size: 21px; }
}

/* ディテール写真：左右の高さをずらし、余白に短い言葉を置く */
.outer-details-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 10px;
  align-items: start;
}
.outer-details-grid figure:first-child {
  grid-column: 1;
  grid-row: 1 / 3;
}
.outer-detail-note {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0 0 5px;
  font-family: "Noto Serif JP", serif;
  font-size: 12px !important;
  line-height: 1.8 !important;
  color: #6b6058;
}
.outer-details-grid figure:last-child {
  grid-column: 2;
  grid-row: 2;
}
.outer-details img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: contain;
}
/* スライダー操作：丸い背景を使わず、矢印の線を中央に配置 */
.outer-controls { z-index: 2; bottom: 18px; left: 15px; right: 15px; }
.outer-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
}
.outer-controls button::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-top: 2px solid #2c2926;
  border-right: 2px solid #2c2926;
  filter: drop-shadow(0 0 2px #fff);
}
.outer-controls .prev::before { transform: rotate(-135deg); }
.outer-controls .next::before { transform: rotate(45deg); }
.outer-controls button:focus-visible { outline: 1px solid #2c2926; outline-offset: -4px; }
.outer-controls span {
  background: transparent;
  color: #2c2926;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  text-shadow: 0 0 4px #fff, 0 0 8px #fff;
}
@media (max-width: 700px) {
  .outer-details-grid { column-gap: 12px; }
  .outer-detail-note { font-size: 10px !important; }
}

/* 骨格見出しは装飾を抑え、本文とのつながりを持たせる */
.outer-heading h2, .outer-index strong {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.035em;
}
.outer-heading h2 { font-size: clamp(43px, 5.8vw, 69px); line-height: 1.08; }
.outer-index strong { font-size: 30px; line-height: 1.15; }
.outer-story h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: .065em;
}

/* リンクの終点を、関連記事のサムネイル列の右端に揃える */
.magazine .etclink { text-align: right; margin-top: 24px; }
.magazine .etclink a { display: inline-block; }

/* JS が有効な場合だけ、画面に入った要素を一度だけ表示する */
.outer-feature .outer-fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .72s ease, transform .72s ease;
}
.outer-feature .outer-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 700px) {
  .outer-heading h2 { font-size: 43px; }
  .outer-index strong { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .outer-feature .outer-fade-up { opacity: 1; transform: none; transition: none; }
}

/* アウターのブラウンから拾った銅色を、誌面の細部にだけ使う */
.outer-feature {
  --of-accent: #916d50;
  --of-line: #ded7cf;
}
.outer-index span,
.outer-heading span,
.outer-details h4,
.outer-products h4 { color: var(--of-accent); }
.outer-index a::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: -1px;
  width: 26px;
  height: 2px;
  background: var(--of-accent);
}
.outer-detail-note { color: #75604e; }
.outer-feature .outer-back a,
.magazine .etclink a { border-bottom: 1px solid #916d50; padding-bottom: 4px; }

/* 手書きの英字は骨格名に限定し、本文の読みやすさを保つ */
.outer-heading h2,
.outer-index strong {
  font-family: "Euphoria Script", "Segoe Print", cursive;
  font-weight: 400;
  letter-spacing: -.015em;
}
.outer-heading h2 { font-size: clamp(58px, 7vw, 86px); line-height: 1.15; }
.outer-index strong { display: block; font-size: 38px; line-height: 1.15; }
@media (max-width: 700px) {
  .outer-heading h2 { font-size: 58px; }
  .outer-index strong { font-size: 27px; }
  .outer-index a::after { left: 4px; width: 20px; }
}

/* 主役アウターの単体画像と商品情報 */
.outer-product-card {
  display: grid;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  max-width: 610px;
  margin-top: 20px;
}
.outer-product-image-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  aspect-ratio: 5 / 6;
  background: #f5f3f0;
  color: #827669;
  text-align: center;
  font: 11px Georgia, serif;
  letter-spacing: .1em;
}
.outer-product-image-placeholder small {
  font: 10px "Noto Sans JP", sans-serif;
  letter-spacing: .02em;
}
.outer-product-info { min-width: 0; }
.outer-product-category {
  color: var(--of-accent);
  font: 11px Georgia, serif;
  letter-spacing: .12em;
}
.outer-product-info h5 {
  margin: 9px 0 7px;
  font: 400 15px/1.7 "Noto Sans JP", sans-serif;
}
.outer-products .outer-product-info p {
  color: var(--of-ink);
  font-size: 13px;
  margin: 0 0 16px;
}
.outer-product-link-placeholder {
  display: inline-block;
  color: #76695d;
  border-bottom: 1px solid var(--of-line);
  padding-bottom: 4px;
  font-size: 11px;
}
@media (max-width: 700px) {
  .outer-product-card { grid-template-columns: minmax(0, 110px) minmax(0, 1fr); gap: 14px; }
  .outer-product-info h5 { font-size: 13px; }
  .outer-product-image-placeholder span { font-size: 9px; }
  .outer-product-image-placeholder small { font-size: 9px; }
}

/* 着用商品：主役の価格と、そのほかのアイテムを分けて見せる */
.outer-products .outer-product-info .outer-product-price { margin: 0; font-size: 13px; }
.outer-products .outer-product-info .outer-product-sale {
  margin: 3px 0 0;
  color: var(--of-accent);
  font-size: 12px;
}
.outer-product-link { margin-top: 13px; font-size: 11px; }
.outer-product-link a {
  display: inline-block;
  border-bottom: 1px solid var(--of-accent);
  padding-bottom: 3px;
}
.outer-product-link span { color: var(--of-sub); }
.outer-item-list {
  list-style: none;
  max-width: 820px;
  padding: 0;
  margin: 28px 0 0;
  border-top: 1px solid var(--of-line);
}
.outer-item-list li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--of-line);
  font-size: 12px;
  line-height: 1.7;
}
.outer-item-type { color: var(--of-accent); font-size: 11px; }
.outer-item-name a { border-bottom: 1px solid transparent; }
.outer-item-name a:hover, .outer-item-name a:focus-visible { border-color: currentColor; }
.outer-item-name small { display: block; color: var(--of-sub); font-size: 10px; }
.outer-item-price { white-space: nowrap; }
@media (max-width: 700px) {
  .outer-item-list li { grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 3px; }
  .outer-item-type { grid-column: 1 / -1; }
  .outer-item-name { grid-column: 1; }
  .outer-item-price { grid-column: 2; }
}

/* 着用商品を誌面の中央に置く。各骨格のおすすめは写真だけ並べる */
.outer-products {
  width: 100%;
  max-width: 820px;
  margin: 48px auto 0;
}
.outer-product-card { max-width: 100%; }
.outer-item-list { max-width: 100%; }
.outer-recommend {
  width: 100%;
  max-width: 820px;
  margin: 56px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--of-line);
}
.outer-recommend h4 {
  margin: 0 0 20px;
  font: 400 14px Georgia, serif;
  letter-spacing: .08em;
}
.outer-recommend h4 span {
  margin-left: 12px;
  font: 400 11px "Noto Sans JP", sans-serif;
  letter-spacing: .04em;
  color: var(--of-sub);
}
.outer-recommend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.outer-recommend-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 5 / 6;
  background: #f5f3f0;
  color: #827669;
  text-align: center;
}
.outer-recommend-placeholder span { font: 18px Georgia, serif; }
.outer-recommend-placeholder small { margin-top: 8px; font: 10px "Noto Sans JP", sans-serif; }
.outer-recommend-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: contain;
  background: #f5f3f0;
}
@media (max-width: 700px) {
  .outer-products { margin-top: 36px; }
  .outer-recommend { margin-top: 42px; }
  .outer-recommend-grid { gap: 8px; }
  .outer-recommend h4 span { display: block; margin: 5px 0 0; }
  .outer-recommend-placeholder small { font-size: 8px; }
}

/* 小さな商品サムネイルと一覧への導線。主役アウターより控えめに */
.outer-recommend { margin-top: 48px; }
.outer-recommend h4 { margin-bottom: 16px; font-size: 12px; }
.outer-recommend-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 610px;
  gap: 10px;
}
.outer-recommend-placeholder span { font-size: 13px; }
.outer-recommend-placeholder small { font-size: 9px; }
.outer-recommend-more {
  display: table;
  margin: 19px 0 0 auto;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--of-accent);
  font-size: 11px;
  letter-spacing: .025em;
}
.outer-recommend-more span { margin-left: 7px; color: var(--of-accent); }
@media (max-width: 700px) {
  .outer-recommend { margin-top: 38px; }
  .outer-recommend-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 96px);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 5px;
  }
  .outer-recommend-placeholder small { font-size: 8px; }
}


/* ========================================================
  KV redesign 2026/10 - editorial / responsive
  Original look sections, product cards and related posts unchanged.
======================================================== */
.outer-feature { background: #faf8f5; }
.outer-hero {
  width: 100%; max-width: none; min-height: 570px;
  aspect-ratio: auto; border: 0;
  display: grid; grid-template-columns: minmax(275px, 34%) minmax(0, 66%);
  background: #f2eee9; overflow: hidden;
}
.outer-hero-copy {
  padding: clamp(36px, 5.2vw, 80px) 12% 42px clamp(26px, 6vw, 104px);
  justify-content: center; align-items: flex-start;
  background: #f2eee9; color: #29241f;
}
.outer-hero-copy::before { content: none; }
.outer-hero-eyebrow {
  font: 400 10px/1.6 "Noto Sans JP",sans-serif !important;
  letter-spacing: .20em !important; margin: 0 0 38px !important;
  color:#726a63;
}
.outer-hero-copy h1 {
  font: italic 400 clamp(55px, 6.7vw, 112px)/.99 Georgia, "Times New Roman", serif;
  letter-spacing: -.065em; margin: 0 0 34px; white-space: nowrap;
}
.outer-hero-copy p {
  font: 400 clamp(12px, 1.12vw, 16px)/1.9 "Noto Serif JP",serif;
  letter-spacing:.05em; margin: 0;
}
.outer-hero-copy .outer-hero-footnote {
  font: 400 9px/1.7 "Noto Sans JP",sans-serif;
  margin: 55px 0 0; letter-spacing:.16em; color:#7b7169;
}
.outer-hero-photos {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  height: 100%; min-height: 570px; padding: 0; gap: 0;
}
.outer-hero-photo { position:relative; margin:0; height:100%; min-width:0; overflow:hidden; }
.outer-hero-photo img {
  width:100%; height:100%; object-fit:cover; object-position:center center;
}
.outer-hero-photo:nth-child(2) { transform: translateY(24px); height: calc(100% - 24px); }
.outer-hero-photo figcaption {
  position:absolute; bottom:22px; left:0; right:0; text-align:center;
  font:400 clamp(30px,3.3vw,51px)/1.1 "Euphoria Script",cursive;
  color:#28231f; text-shadow:0 1px 9px rgba(255,255,255,.85);
}
.outer-hero-photo:nth-child(2) figcaption { bottom:45px; }
.outer-intro { background:#faf8f5; padding: 64px 24px 42px; }
.outer-index { background:#faf8f5; margin-bottom:0; padding-bottom:68px; }
.outer-look { background:#fff; }
@media (max-width: 900px) and (min-width: 701px) {
 .outer-hero { grid-template-columns: 39% 61%; min-height:430px; }
 .outer-hero-photos { min-height:430px; }
 .outer-hero-copy { padding-left:30px; padding-right:20px; }
 .outer-hero-copy h1 { font-size:clamp(48px,6.1vw,70px); }
 .outer-hero-eyebrow { font-size:9px !important; }
}
@media (max-width:700px) {
 .outer-hero { display:flex; flex-direction:column; min-height:0; border:0; }
 .outer-hero-copy { padding:40px 23px 26px; }
 .outer-hero-eyebrow { margin-bottom:24px !important; font-size:9px !important; }
 .outer-hero-copy h1 { font-size:clamp(55px,15vw,84px); line-height:.95; margin:0 0 19px; }
 .outer-hero-copy p { font-size:12px; }
 .outer-hero-copy .outer-hero-footnote { margin-top:26px; font-size:8px; }
 .outer-hero-photos { min-height:0; height:clamp(280px,95vw,470px); padding:0; gap:0; }
 .outer-hero-photo:nth-child(2) { transform:none; height:100%; }
 .outer-hero-photo figcaption { font-size:clamp(23px,7vw,38px); bottom:15px; }
 .outer-hero-photo:nth-child(2) figcaption { bottom:15px; }
 .outer-intro { padding:42px 22px 35px; }
 .outer-index { padding-bottom:48px; }
}


/* ========================================================
   KV v2: PC width restrained / three portrait tops aligned
   2026-10-10
======================================================== */
@media (min-width: 901px) {
  .outer-hero {
    width: calc(100% - 64px);
    max-width: 1080px;
    min-height: 0;
    aspect-ratio: 1080 / 495;
    margin: 38px auto 0;
    grid-template-columns: 43% 57%;
  }
  .outer-hero-copy {
    min-width: 0;
    padding: 38px 7% 32px 10%;
  }
  .outer-hero-copy h1 {
    font-size: clamp(50px, 5.5vw, 79px);
    line-height: 1.02;
    margin-bottom: 24px;
  }
  .outer-hero-eyebrow { margin-bottom: 22px !important; }
  .outer-hero-copy .outer-hero-footnote { margin-top: 30px; }
  .outer-hero-photos { min-height: 0; height: 100%; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .outer-hero {
    width: calc(100% - 40px);
    max-width: 820px;
    min-height: 0;
    aspect-ratio: 1080 / 500;
    margin: 24px auto 0;
    grid-template-columns: 43% 57%;
  }
  .outer-hero-copy { padding: 26px 5% 24px 8%; }
  .outer-hero-copy h1 { font-size: clamp(43px, 5.6vw, 58px); margin-bottom: 18px; }
  .outer-hero-eyebrow { margin-bottom: 15px !important; }
  .outer-hero-copy .outer-hero-footnote { margin-top: 18px; font-size: 8px; }
  .outer-hero-photos { min-height: 0; height: 100%; }
}
/* Source images are tall crops. Avoid further top/bottom cropping. */
@media (min-width: 701px) {
  .outer-hero-photo { background: #efebe7; }
  .outer-hero-photo img {
    object-fit: contain;
    object-position: center top;
  }
}
.outer-hero-photo:nth-child(2) {
  transform: none;
  height: 100%;
}
.outer-hero-photo:nth-child(2) figcaption { bottom: 22px; }
@media (max-width: 700px) {
  .outer-hero-photo img { object-fit: contain; object-position: center top; }
  .outer-hero-photo { background: #efebe7; }
  .outer-hero-photo:nth-child(2) figcaption { bottom: 15px; }
}