@charset "UTF-8";
@-ms-viewport {
  width: device-width;
}
/*--------------------------------------------------------------------------
CSS　カスタム設定(flag/top-style.css)ver.1 2026.10.7
--------------------------------------------------------------------------*/
/*■■■■■■ 基本設定 ■■■■■■■*/
/*FLAG 青緑　濃い*/
/*FLAG 青緑　薄い*/
/*FLAG 緑　*/
/*■■■■■■　基本　■■■■■■■*/
.text-lead {
  font-family: "Noto Serif JP", serif;
}

.text-title-m span {
  margin: 0 -0.4em;
}

/*■■■■■■　#0 デザインヘッダー　■■■■■■■*/
.design-fv {
  display: block;
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.design-fv img {
  width: 100%;
  height: 100%;
}
.design-fv:after {
  content: "外観完成予想図";
  font-size: 1rem;
  color: #222;
  line-height: 1.4;
  position: absolute;
  bottom: 60px;
  right: 20px;
}

/*■■■■■■　#1 デザイン導入　■■■■■■■*/
.vector-crip {
  margin: -100px 0 0;
  padding: 100px 0 100px;
  display: block;
  position: relative;
  overflow: hidden;
  background: url(../images/design/bg-flag_light.webp) top center no-repeat;
  background-size: 100% 100%;
  -webkit-mask-image: url("../images/design/crip-flag-d.svg");
  mask-image: url("../images/design/crip-flag-d.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  mask-position: center top;
}

.dezign-title {
  margin: 100px 0 40px;
  font-family: "Cormorant", serif;
  font-size: 5.6rem;
  line-height: 1.2;
  font-weight: 500;
  color: #05246e;
}

/*■■■■■■　#2 外観パース　■■■■■■■*/
.dezign-parth-img {
  display: block;
  width: 100%;
  position: relative;
  aspect-ratio: 19/9;
  background: url(../images/design/design-parth.webp) center center no-repeat;
  background-size: cover;
  position: relative;
}

.parth-caption {
  position: absolute;
  bottom: 18%;
  right: 3%;
  font-size: 1rem;
}

.parth-archtect-box {
  margin: 0 0 4em;
  display: block;
  padding: 3em 0;
  background: -webkit-gradient(linear, left top, right top, from(#FFF), color-stop(20%, #e3eff6), color-stop(80%, #e3eff6), to(#FFF));
  background: linear-gradient(90deg, #FFF 0%, #e3eff6 20%, #e3eff6 80%, #FFF 100%);
}

.parth-title {
  margin: 0 0 30px;
  font-family: "Cormorant", serif;
  font-size: 3.6rem;
  line-height: 1.2;
  font-weight: 500;
  color: #00537b;
}

/*■■■■■■　#3 設備紹介　■■■■■■■*/
.equipment-fv {
  display: block;
  width: 100%;
  position: relative;
  aspect-ratio: 6/4;
  over-flow: hidden;
  background-size: cover;
  position: relative;
}
.equipment-fv img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}
.equipment-fv:after {
  content: "メインエントランスアプローチ完成予想図";
  padding: 10px 10px;
  font-size: 1rem;
  color: #FFF;
  position: absolute;
  bottom: 0;
  right: 0;
}

.bg-equipment {
  padding: 6em 0;
  background: url(../images/design/bg-flag.webp) top center no-repeat #103579;
  background-attachment: fixed;
  color: #FFF;
}

.text-title-m-en {
  margin: 0 0 30px;
  font-family: "Cormorant", serif;
  font-size: 2.8rem;
  line-height: 1.2;
  font-weight: 400;
}

/*■■■■■■　#3-2 スクロール連動マップ切り替えスクリプト用　■■■■■■■*/
/* ==================================================
   2. Story
================================================== */
.story {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: relative;
}

/* ==================================================
   左側：マップ
================================================== */
.story-map {
  width: 50%;
  height: 100vh;
  position: sticky;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 40px;
}

.story-map__inner {
  position: relative;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 6/4;
  margin: auto;
  overflow: hidden;
}

/*
 * マップ1~5
 *
 * すべて同じ場所に重ねて、
 * .is-active の画像だけ表示する
 */
.story-map__item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.story-map__item.is-active {
  opacity: 1;
}

/* ----------------------------------------------
	   SP用マップを非表示
	---------------------------------------------- */
.story-map_sp {
  display: none;
}

/* ==================================================
   右側：詳細
================================================== */
.story-list {
  width: 50%;
}

/* ==================================================
   各詳細
================================================== */
.story-item {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 80px 8% 80px 30px;
}

/* ==================================================
   詳細画像
================================================== */
.story-item__image {
  width: 100%;
  position: relative;
  margin-bottom: 20px;
}

.story-img-caption {
  padding: 5px 10px;
  font-family: "Noto Serif JP", serif;
  font-size: 1rem;
  color: #FFF;
  position: absolute;
  bottom: 0;
  right: 0;
}

.story-item__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==================================================
   テキスト群　レイアウト
================================================== */
.story-item__body {
  text-align: left;
}

/* ==================================================
   見出し
================================================== */
.story-item__title {
  margin: 0 0 24px;
  padding: 0 0 10px;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2rem, 1vw, 2rem);
  line-height: 1.3;
  font-weight: 500;
  border-bottom: 1px solid #FFF;
}

/* ==================================================
   見出し　中
================================================== */
.story-item__mi {
  padding: 0 0 10px;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.6rem, 1vw, 1.7rem);
  line-height: 1.3;
  font-weight: 500;
}

/* ==================================================
   リード文
================================================== */
.story-item__lead {
  max-width: 600px;
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 1.3rem;
  line-height: 2;
}
.story-item__lead span {
  margin: 10px 0 0;
  display: block;
  font-size: 1rem;
  line-height: 1.5;
}

/*みやこ杣木　ブランド説明*/
.brand-somagi {
  margin: 2em 0;
  padding: 20px;
  border: 1px solid #FFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 20px;
}

.somagi-logo {
  width: 86px;
  height: auto;
}
.somagi-logo img {
  width: 100%;
  height: 100%;
}

.somagi-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.somagi-ti {
  margin: 0 0 10px;
  font-family: "Noto Serif JP", serif;
  font-size: 1.5rem;
  line-height: 2;
  border-bottom: 1px solid #FFF;
}

.somagi-lead {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 1.3rem;
  line-height: 2;
}

/* ==================================================
   詳細の表示アニメーション
================================================== */
.story-item__image,
.story-item__title,
.story-item__mi,
.story-item__lead,
.brand-somagi {
  opacity: 0.35;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
  transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition: opacity 0.6s ease, transform 0.6s ease, -webkit-transform 0.6s ease;
}

.story-item.is-active .story-item__image,
.story-item.is-active .story-item__title,
.story-item.is-active .story-item__mi,
.story-item.is-active .story-item__lead,
.story-item.is-active .brand-somagi {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

/* ==================================================
   ドットナビ
================================================== */
.story-dots {
  position: fixed;
  right: 24px;
  top: 50%;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.story-dots.is-visible {
  opacity: 1;
  visibility: visible;
}

.story-dots__item {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #BBB;
  cursor: default;
  -webkit-transition: background 0.3s ease, -webkit-transform 0.3s ease;
  transition: background 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, background 0.3s ease;
  transition: transform 0.3s ease, background 0.3s ease, -webkit-transform 0.3s ease;
}

.story-dots__item.is-active {
  background: #00537b;
  opacity: 1;
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
}

/* ==================================================
   SP
================================================== */
@media (max-width: 768px) {
  /* ----------------------------------------------
     Story
  ---------------------------------------------- */
  .story {
    display: block;
  }
  /* ----------------------------------------------
     SP用マップを表示
  ---------------------------------------------- */
  .story-map_sp {
    margin: 0 -16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  /* ----------------------------------------------
     マップを非表示
  ---------------------------------------------- */
  .story-map {
    display: none;
  }
  /* ----------------------------------------------
     詳細を全幅
  ---------------------------------------------- */
  .story-list {
    width: 100%;
  }
  /* ----------------------------------------------
     詳細
  ---------------------------------------------- */
  .story-item {
    margin: 0 -16px;
    min-height: auto;
    padding: 40px 0;
  }
  .story-item__body {
    padding: 0 20px;
  }
  .story-item + .story-item {
    padding-top: 20px;
  }
  .story-img-caption {
    font-size: 0.8rem;
  }
  /*みやこ杣木　ブランド説明*/
  .brand-somagi {
    margin: 2em 0;
    padding: 20px;
    border: 1px solid #FFF;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    gap: 20px;
  }
  .somagi-logo {
    width: 86px;
    height: auto;
  }
  .somagi-logo img {
    width: 100%;
    height: 100%;
  }
  /* ----------------------------------------------
     SPでは常に通常表示
  ---------------------------------------------- */
  .story-item__image,
  .story-item__title,
  .story-item__mi,
  .story-item__lead,
  .brand-somagi,
  .story-item.is-active .story-item__image,
  .story-item.is-active .story-item__title,
  .story-item.is-active .story-item__mi,
  .story-item.is-active .story-item__lead,
  .story-item.is-active .brand-somagi {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
  /* ----------------------------------------------
     ドット非表示
  ---------------------------------------------- */
  .story-dots {
    display: none;
  }
}
/*■■■■■■　#4 ランドプラン　■■■■■■■*/
.bg-landmap {
  margin: -100px 0 0;
  padding: 150px 0 120px;
  display: block;
  position: relative;
  overflow: hidden;
  background: url(../images/design/bg-flag_light.webp) top center no-repeat;
  background-size: cover;
  -webkit-mask-image: url("../images/design/crip-flag-d.svg");
  mask-image: url("../images/design/crip-flag-d.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  mask-position: center top;
}
.bg-landmap .text-title-m-en {
  margin: 6em 0 30px;
  color: #00537b;
}

/*==================================================
  スワイプ表示 PC/SP 同時記載
==================================================*/
.swipe-view {
  position: relative;
  margin: 0 0 40px;
  padding: 0;
  width: 100%;
}

/*--------------------------------------------------
  PC
--------------------------------------------------*/
.landmap-pc {
  width: 100%;
}
.landmap-pc img {
  display: block;
  width: 100%;
  height: auto;
}

/*--------------------------------------------------
  SP
--------------------------------------------------*/
.swipe-view {
  margin: 0;
}

.swipe-inner {
  margin: 0;
  width: 100%;
  height: 500px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* スクロールバーを非表示 */
  scrollbar-width: none;
}
.swipe-inner::-webkit-scrollbar {
  display: none;
}
.swipe-inner img {
  display: block;
  /* 1800:600 → 高さ400なら幅1200 */
  width: auto;
  height: 500px;
  max-width: none;
}

/*■　スクロールヒント　■*/
/* スワイプガイド */
.swipe-guide-map {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 120px;
  height: 135px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  z-index: 10;
  pointer-events: none;
}

.swipe-guide-map img {
  width: 96px;
  height: auto;
}

/*　マップアイコン説明　*/
.landmap-overlay {
  padding: 16px;
  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;
}

.landmap-icon-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 15px;
}

.landmap-icon-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 5px;
}
.landmap-icon-box img {
  width: 24px;
  height: 24px;
}
.landmap-icon-box p {
  text-align: left;
  font-size: 1rem;
  line-height: 1.4;
}

.landmap-caption {
  padding: 5px 10px;
  font-family: "Noto Serif JP", serif;
  font-size: 1rem;
  color: #000;
}

.landmap-list {
  margin: 6em 0 3em;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -webkit-column-gap: 60px;
     -moz-column-gap: 60px;
          column-gap: 60px;
  row-gap: 40px;
}

.top-btn-read {
  font-family: "Noto Serif JP", serif;
  font-size: 2rem;
  line-height: 1.8;
}

.landmap-box .landmap-title {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #222;
  font-family: "Noto Serif JP", serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.6;
  color: #00537b;
  text-align: left;
}
.landmap-box .landmap-lead {
  margin: 10px 0 0;
  font-family: "Noto Serif JP", serif;
  font-size: 1.5rem;
  line-height: 1.8;
  text-align: left;
}

/* ==================================================
   SP
================================================== */
@media (max-width: 767px) {
  .landmap-list {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .landmap-box .landmap-title {
    font-size: 1.7rem;
    text-align: center;
  }
  .landmap-box .landmap-lead {
    margin-top: 12px;
    font-size: 1.4rem;
    text-align: center;
  }
}
/*■■■■■■　#5 ランドデザイン　■■■■■■■*/
.land-design-block {
  margin: 0 auto;
  padding: 40px;
  background-color: #cdcce4;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 40px 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  width: 100%;
  max-width: 1120px;
}

.designer-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px;
}

.designer-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 15px;
  text-align: left;
}
.designer-name p {
  font-size: 2.4rem;
  line-height: 1.4;
}
.designer-name p span {
  font-size: 1.8rem;
}
.designer-name p small {
  margin: 0 10px 0 0;
  font-size: 1.2rem;
}

.designer-img {
  width: 100%;
  max-width: 180px;
  height: auto;
}

.design-result-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 15px;
}

.design-result-img-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 10px;
}

.design-result-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #FFF;
  font-size: 1.5rem;
  font-weight: 500;
  background-color: #05246e;
  width: 100%;
  height: 32px;
}

.design-result-img-box {
  text-align: right;
}

.design-result-img-caption {
  padding: 5px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
}

/*===============================
■■　スマホ用　■■
===============================*/
/*------------(XS)------------*/
@media (min-width: 320px) and (max-width: 767px) {
  .text-title-m {
    font-size: 2rem;
  }
  .text-lead {
    font-size: 1.2rem;
  }
  /*■■■■■■　#0 デザインヘッダー（XS）　■■■■■■■*/
  .design-fv {
    aspect-ratio: 8/7;
  }
  .design-fv:after {
    content: "外観完成予想図";
    font-size: 0.8rem;
    color: #FFF;
    line-height: 1.4;
    position: absolute;
    bottom: 70px;
    left: 20px;
  }
  /*■■■■■■　#1 デザイン導入（XS）　■■■■■■■*/
  .vector-crip {
    margin: -100px 0 0;
    padding: 100px 0 40px;
    display: block;
    position: relative;
    overflow: hidden;
    background: url(../images/design/bg-flag_light.webp) top center no-repeat;
    background-size: 100% 100%;
    -webkit-mask-image: url("../images/design/crip-flag-d2_sp.svg");
    mask-image: url("../images/design/crip-flag-d2_sp.svg");
    -webkit-mask-size: 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    mask-position: center top;
  }
  .dezign-title {
    margin: 0 0 40px;
    font-size: 4rem;
  }
  /*■■■■■■　#2 外観パース（XS）　■■■■■■■*/
  .dezign-parth-img {
    display: block;
    width: 100%;
    position: relative;
    aspect-ratio: 16/9;
    background: url(../images/design/design-parth_sp.webp) center center no-repeat;
    background-size: cover;
    position: relative;
  }
  .parth-caption {
    position: absolute;
    bottom: 12%;
    right: 3%;
    font-size: 0.8rem;
  }
  .parth-archtect-box {
    margin: 0 -16px 4em;
    display: block;
    padding: 3em 1em;
    background: -webkit-gradient(linear, left bottom, left top, from(#FFF), color-stop(20%, #e3eff6), color-stop(80%, #e3eff6), to(#FFF));
    background: linear-gradient(0deg, #FFF 0%, #e3eff6 20%, #e3eff6 80%, #FFF 100%);
  }
  .parth-archtect-box .text-lead {
    text-align: left;
  }
  .parth-title {
    margin: 0 0 30px;
    font-size: 3.2rem;
  }
  /*■■■■■■　#3 設備紹介（XS）　■■■■■■■*/
  .equipment-fv:after {
    font-size: 0.8rem;
  }
  .bg-equipment {
    padding: 6em 0;
    background: url(../images/design/bg-flag_sp.webp) top center no-repeat #003664;
    background-size: contain;
    background-attachment: static;
    color: #FFF;
  }
  .text-title-m-en {
    margin: 0 0 30px;
    font-size: 2.4rem;
  }
  /*■■■■■■　#4 ランドプラン（XS）　■■■■■■■*/
  .bg-landmap {
    margin: -100px 0 0;
    padding: 50px 0 20px;
    display: block;
    position: relative;
    overflow: hidden;
    background: url(../images/design/bg-flag_light.webp) top center no-repeat;
    background-size: 100%;
    -webkit-mask-image: url("../images/design/crip-flag-d_sp.svg");
    mask-image: url("../images/design/crip-flag-d_sp.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    mask-position: center top;
  }
  .bg-landmap .text-title-m-en {
    margin: 2em 0 30px;
    color: #00537b;
  }
  .swipe-guide-map {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .swipe-view.show-hint .swipe-guide-map {
    opacity: 1;
  }
  .swipe-view.hide-hint .swipe-guide-map {
    opacity: 0;
  }
  /*　マップアイコン説明　*/
  .landmap-overlay {
    padding: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    gap: 20px;
  }
  .landmap-icon-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 15px;
  }
  .landmap-icon-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 5px;
  }
  .landmap-icon-box img {
    width: 24px;
    height: 24px;
  }
  .landmap-icon-box p {
    text-align: left;
    font-size: 1rem;
    line-height: 1.4;
  }
  .landmap-caption {
    padding: 5px 10px;
    font-family: "Noto Serif JP", serif;
    font-size: 1rem;
    color: #000;
  }
  .landmap-list {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .landmap-box .landmap-title {
    font-size: 1.7rem;
  }
  .landmap-box .landmap-lead {
    margin-top: 12px;
    font-size: 1.4rem;
  }
  .landmap-box .landmap-title {
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #222;
    font-family: "Noto Serif JP", serif;
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.6;
    color: #00537b;
    text-align: left;
  }
  .landmap-box .landmap-lead {
    margin: 10px 0 0;
    font-size: 1.3rem;
    line-height: 1.8;
    text-align: left;
  }
  /*■■■■■■　#5 ランドデザイン(XS)　■■■■■■■*/
  .land-design-block {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .designer-box {
    gap: 10px;
  }
  .designer-name {
    gap: 10px;
    text-align: left;
  }
  .designer-name p {
    font-size: 1.6rem;
  }
  .designer-name p span {
    font-size: 1.1rem;
  }
  .designer-name p small {
    margin: 0 5px 0 0;
    font-size: 0.6rem;
  }
  .designer-img {
    max-width: 140px;
  }
  .design-result-box {
    gap: 15px;
  }
  .design-result-img-block {
    gap: 10px;
  }
  .design-result-img-caption {
    font-size: 0.8rem;
  }
} /*xs*/
/*------------(SM)------------*/
@media (min-width: 768px) and (max-width: 1023px) {
  /*■■■■■■　#0 デザインヘッダー（SM）　■■■■■■■*/
  .design-fv {
    margin: 80px 0 0;
    display: block;
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
  }
  /*■■■■■■　#1 デザイン導入（SM）　■■■■■■■*/
  /*■■■■■■　#2 外観パース（SM）　■■■■■■■*/
  /*■■■■■■　#3 設備紹介（SM）　■■■■■■■*/
  /*■■■■■■　#4 ランドプラン（SM）　■■■■■■■*/
  /*■■■■■■　#5 ランドデザイン(SM)　■■■■■■■*/
  .land-design-block {
    -ms-grid-columns: 1fr 40px 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  .designer-box {
    gap: 10px;
  }
  .designer-name {
    gap: 10px;
    text-align: left;
  }
  .designer-name p {
    font-size: 1.6rem;
  }
  .designer-name p span {
    font-size: 1.1rem;
  }
  .designer-name p small {
    margin: 0 5px 0 0;
    font-size: 0.6rem;
  }
  .designer-img {
    max-width: 140px;
  }
  .design-result-box {
    gap: 15px;
  }
  .design-result-img-block {
    gap: 10px;
  }
  .design-result-img-caption {
    font-size: 0.8rem;
  }
} /*SM*/
/*------------(MD)------------*/
@media (min-width: 1024px) and (max-width: 1215px) {
  /*■■■■■■　#0 デザインヘッダー（MD）　■■■■■■■*/
  .design-fv {
    display: block;
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
  }
  /*■■■■■■　#4 ランドプラン（MD）　■■■■■■■*/
  .swipe-guide-map {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .swipe-view.show-hint .swipe-guide-map {
    opacity: 1;
  }
  .swipe-view.hide-hint .swipe-guide-map {
    opacity: 0;
  }
}
/*------------(LG)------------*/
@media (min-width: 1216px) and (max-width: 1439px) {
  /*■■■■■■　#3 設備紹介（LG）　■■■■■■■*/
  .bg-equipment {
    background-size: cover;
  }
}
/*------------(XL)------------*/
@media (min-width: 1440px) {
  /*■■■■■■　#3 設備紹介（XL）　■■■■■■■*/
  .bg-equipment {
    background-size: cover;
  }
  /*■■■■■■　#4 ランドプラン（XXL）　■■■■■■■*/
  .bg-landmap {
    background-size: 100% 100%;
  }
  /*■■■■■■　#5 ランドデザイン　■■■■■■■*/
  .land-design-block {
    margin: 0 auto;
    padding: 40px;
    background-color: #cdcce4;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 40px 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    width: 100%;
    max-width: 1120px;
  }
}
/*------------(XXL)------------*/
@media (min-width: 1921px) {
  /*■■■■■■　#1 導入（XXL）　■■■■■■■*/
  .vector-crip {
    margin: -100px 0 0;
    padding: 100px 0 100px;
    display: block;
    position: relative;
    overflow: hidden;
    background: url(../images/design/bg-flag_light.webp) top center no-repeat;
    background-size: 100% 100%;
    -webkit-mask-image: url("../images/design/crip-flag-d.svg");
    mask-image: url("../images/design/crip-flag-d.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    mask-position: center top;
  }
  /*■■■■■■　#4 ランドプラン（XXL）　■■■■■■■*/
  .bg-landmap {
    margin: -100px 0 0;
    padding: 50px 0 20px;
    display: block;
    position: relative;
    overflow: hidden;
    background: url(../images/design/bg-flag_light.webp) top center no-repeat;
    background-size: 100% 100%;
    -webkit-mask-image: url("../images/design/crip-flag-d_sp.svg");
    mask-image: url("../images/design/crip-flag-d_sp.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    mask-position: center top;
  }
  .bg-landmap .text-title-m-en {
    margin: 2em 0 30px;
    color: #00537b;
  }
  /* 右側の詳細 */
  .story-item {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    min-height: 0;
    height: 900px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  /* 左側のマップ */
  .story-map {
    height: 900px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 40px;
  }
  /* マップ画像のサイズを領域内に収める */
  .story-map__inner {
    max-height: 100%;
  }
} /*(XXL)*/