@charset "UTF-8";
/* ==========================================================================
   シティコート島泉Ⅷ期 LP
   デザイン基準幅：800px（SPベース）／PC時はコンテンツ幅 500px
   --u = デザイン1px分の実寸　SP:100vw/800　PC:500px/800
   ========================================================================== */

:root{
  --u: 0.125vw;                 /* 100vw / 800 */

  --cream:      #f5f2e9;
  --white:      #ffffff;
  --green:      #1e4e37;
  --green-lt:   #82b29b;
  --brown:      #b18263;
  --dark-brown: #40210f;
  --rule:       #998675;
  --orange:     #eb6b4a;
  --ink:        #000000;

  --gothic: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
            "游ゴシック", "Yu Gothic", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --mincho: "FOT-筑紫Aオールド明朝 Pr6N", "FOT-TsukuAOldMinPr6N", "TsukuAOldMinPr6N",
            "筑紫Aオールド明朝", "游明朝体", "YuMincho", "Yu Mincho",
            "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
}

*{ margin:0; padding:0; letter-spacing:0; font-feature-settings:"palt"; box-sizing:border-box; }
ul,ol,li{ list-style:none; }
img{ max-width:100%; height:auto; vertical-align:bottom; }
a{ text-decoration:none; color:inherit; }
table{ border-collapse:collapse; }

html{ -webkit-text-size-adjust:100%; }

body{
  background: var(--cream);
  color: var(--ink);
  font-family: var(--gothic);
  line-height:1.6;
  line-break: strict;          /* 「ー」「っ」等の行頭禁則 */
  word-break: normal;
  overflow-wrap: break-word;
}

.pc{ display:none; }

.wrap{
  background: var(--cream);
  margin:0 auto;
  overflow:hidden;
}


/* ==========================================================================
   MV
   ========================================================================== */
.hero h1{ line-height:0; font-size:0; }
.hero img{ width:100%; }


/* ==========================================================================
   リード文
   ========================================================================== */
.intro{
  text-align:center;
  padding: calc(120 * var(--u)) 0 calc(78 * var(--u));
}
.intro p{
  font-size: calc(30 * var(--u));
  line-height: calc(76 / 30);
  letter-spacing:0.04em;
}


/* ==========================================================================
   セクション共通（タイトル帯／リード）
   ========================================================================== */
.section h2{ line-height:0; font-size:0; }
.section h2 img{ width:100%; }

.section_kicker{
  text-align:center;
  color: var(--dark-brown);
  font-size: calc(34 * var(--u));
  line-height: calc(47 / 34);
  letter-spacing:0.06em;
  margin: calc(31 * var(--u)) auto 0;
}


/* ==========================================================================
   LAND PLAN
   ========================================================================== */
.landplan .landplan_copy{
  font-family: var(--mincho);
  font-weight:normal;
  color: var(--green-lt);
  text-align:center;
  font-size: calc(74 * var(--u));
  line-height: calc(95 / 74);
  letter-spacing:0.02em;
  margin: calc(28 * var(--u)) auto 0;
}
.landplan .body_copy{
  width: calc(652 * var(--u));
  margin: calc(26 * var(--u)) auto 0;
  font-size: calc(30 * var(--u));
  line-height: calc(76 / 30);
  letter-spacing:0.04em;
  text-align:justify;
  text-justify:inter-character;
}

/* 区画図（背景の淡緑帯つき） */
.land_plan .landplan_img{
  position:relative;
  width: calc(601 * var(--u));
  margin: calc(74 * var(--u)) auto 0;
  line-height:0;
}
.land_plan .landplan_img::before{
  content:"";
  position:absolute;
  left: calc(-99.5 * var(--u));
  width: calc(800 * var(--u));
  top: calc(399 * var(--u));
  height: calc(330 * var(--u));
  background: var(--green-lt);
}
.land_plan .landplan_img img{ position:relative; width:100%; }

/* 4つのポイント */
.features{
  width: calc(670 * var(--u));
  margin: calc(73 * var(--u)) auto 0;
  padding-bottom: calc(114 * var(--u));
}
.features li{
  position:relative;
  padding-top: calc(159 * var(--u));
  margin-bottom: calc(28 * var(--u));
}
.features li:last-child{ margin-bottom:0; }

.features .ico{
  position:absolute;
  top:0; left:50%;
  transform: translateX(-50%);
  width: calc(211 * var(--u));
  line-height:0;
  z-index:2;
}
.features .box{
  position:relative;
  background: var(--white);
  border-radius: calc(14 * var(--u));
  padding: calc(85 * var(--u)) calc(51 * var(--u)) calc(63 * var(--u));
}
.features .box::before{
  content:"";
  position:absolute;
  inset: calc(15 * var(--u));
  border:1px solid var(--brown);
  border-radius: calc(10 * var(--u));
}
.features .box h4,
.features .box p{ position:relative; }

.features .box h4{
  color: var(--brown);
  text-align:center;
  font-size: calc(56 * var(--u));
  line-height:1;
  font-weight:bold;
  letter-spacing:0;
  white-space:nowrap;
}
.features .box p{
  margin-top: calc(23 * var(--u));
  font-size: calc(32 * var(--u));
  line-height: calc(56 / 32);
  letter-spacing:0;
  text-align:justify;
  text-justify:inter-character;
}


/* ==========================================================================
   PLAN（参考プラン）
   ========================================================================== */
.plan{ padding: calc(199 * var(--u)) 0 calc(114 * var(--u)); }

.plan .plan_copy{
  width: calc(652 * var(--u));
  margin: calc(48 * var(--u)) auto 0;
  text-align:center;
  font-size: calc(30 * var(--u));
  line-height: calc(60 / 30);
  letter-spacing:0.04em;
}
.plan .plan_img{
  width: calc(700 * var(--u));
  margin: calc(30 * var(--u)) auto 0;
  line-height:0;
}
.plan .plan_img img{ width:100%; }

.plan .plan_note{ margin-top: calc(40 * var(--u)); }


/* ==========================================================================
   LOCATION
   ========================================================================== */
.location{ padding-top: calc(199 * var(--u)); }
.g_map{
  margin-top: calc(112 * var(--u));
  line-height:0;
}
.g_map iframe{
  display:block;
  width:100%;
  aspect-ratio: 800 / 576;
  border:0;
}


/* ==========================================================================
   2店舗使えるスーパー
   ========================================================================== */
.super{
  margin-top: calc(150 * var(--u));
  background: url(../img/loca_bg.png) top center no-repeat;
  background-size: 100% 100%;
  padding: calc(73 * var(--u)) 0 calc(87 * var(--u));
  isolation:isolate;
}
.super_img{
  position:relative;
  width: calc(673 * var(--u));
  margin:0 auto;
  line-height:0;
}
.super_img > img{ width:100%; }

.super_cap{
  position:absolute;
  left: calc(-63.5 * var(--u));
  width: calc(800 * var(--u));
  top: calc(197 * var(--u));
  height: calc(112 * var(--u));
  display:flex;
  align-items:center;
  justify-content:center;
}
/* 帯だけを乗算合成し、文字は白のまま抜く */
.super_cap::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--green);
  mix-blend-mode: multiply;
}
.super_cap span{
  position:relative;
  color:#fff;
  font-size: calc(50 * var(--u));
  line-height:1;
  font-weight:bold;
  letter-spacing:0.10em;
  text-indent:0.10em;
}

.super_txt{
  width: calc(645 * var(--u));
  margin: calc(35 * var(--u)) auto 0;
  color:#fff;
  font-size: calc(30 * var(--u));
  line-height: calc(56 / 30);
  letter-spacing:0.04em;
  text-align:justify;
  text-justify:inter-character;
}


/* ==========================================================================
   周辺施設写真
   ========================================================================== */
.facilities{ padding-top: calc(115 * var(--u)); }
.facilities li{
  width: calc(673 * var(--u));
  margin: 0 auto calc(91 * var(--u));
  text-align:center;
}
.facilities li:last-child{ margin-bottom:0; }
.facilities li img{ width:100%; }

.facilities .name{
  margin-top: calc(16 * var(--u));
  font-size: calc(42 * var(--u));
  line-height: calc(57 / 42);
  font-weight:bold;
  letter-spacing:0.02em;
}
.facilities .dist{
  font-size: calc(42 * var(--u));
  line-height: calc(57 / 42);
  letter-spacing:0.02em;
}
.facilities .dist span{ font-size: calc(34 * var(--u)); }


/* ==========================================================================
   生活情報リスト
   ========================================================================== */
.life_info{ padding-top: calc(84 * var(--u)); }

.info_block{ margin-bottom: calc(80 * var(--u)); }

.info_block h3{
  text-align:center;
  color: var(--brown);
  font-size: calc(36 * var(--u));
  line-height:1;
  font-weight:bold;
  letter-spacing:0.30em;
  text-indent:0.30em;
}
.info_block dl{
  width: calc(677 * var(--u));
  margin: calc(25 * var(--u)) auto 0;
  border-top: calc(5 * var(--u)) dotted var(--brown);
  padding-top: calc(39 * var(--u));
}
.info_block .row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: calc(6 * var(--u));
  width: calc(666 * var(--u));
  margin: 0 auto calc(20 * var(--u));
  color: var(--dark-brown);
}
.info_block .row:last-child{ margin-bottom:0; }

.info_block dt{
  font-size: calc(29 * var(--u));
  line-height:1.02;
  padding-top: calc(4 * var(--u));
  letter-spacing:0;
  white-space:nowrap;          /* 改行は <br> で指定した位置のみ */
}
.info_block dd{
  flex:none;
  text-align:right;
  font-size: calc(29 * var(--u));
  line-height: calc(44 / 32);
  letter-spacing:0;
  white-space:nowrap;
}
.info_block dd span{
  display:block;
  font-size: calc(26 * var(--u));
  line-height: calc(36 / 26);
}

.note{
  width: calc(677 * var(--u));
  margin: 0 auto;
  font-size: calc(24 * var(--u));
  line-height: calc(32 / 24);
  letter-spacing:0.02em;
  text-align:justify;
  text-justify:inter-character;
}
.life_info .note{ margin-top: calc(68 * var(--u)); }


/* ==========================================================================
   ACCESS
   ========================================================================== */
.access{ padding-top: calc(135 * var(--u)); }
.access .section_kicker{ margin-top: calc(26 * var(--u)); }

.access .station{
  width: calc(691 * var(--u));
  margin: calc(66 * var(--u)) auto 0;
  line-height:0;
}
.access .route_map{
  width: calc(611 * var(--u));
  margin: calc(37 * var(--u)) 0 0 calc(124 * var(--u));
  line-height:0;
}
.access .time{
  background: var(--white);
  margin-top: calc(84 * var(--u));
  padding: calc(45 * var(--u)) 0 calc(33 * var(--u));
  text-align:center;
  line-height:0;
}
.access .time img{ width: calc(681 * var(--u)); }
.access .note{ margin-top: calc(23 * var(--u)); }


/* ==========================================================================
   OUTLINE
   ========================================================================== */
.outline{ padding-top: calc(312 * var(--u)); }

.outline .outline_tit{
  padding-left: calc(34 * var(--u));
  margin: calc(51 * var(--u)) 0 calc(16 * var(--u));
  font-size: calc(31 * var(--u));
  line-height:1.4;
  font-weight:normal;
  letter-spacing:0.04em;
}
.outline .outline_tit:first-of-type{ margin-top: calc(93 * var(--u)); }

.outline table{
  width:100%;
  font-size: calc(27 * var(--u));
  line-height: calc(48 / 27);
  letter-spacing:0;
}
.outline th,
.outline td{
  white-space:nowrap;          /* 改行は <br> で指定した位置のみ */
  padding: calc(12.5 * var(--u)) calc(10 * var(--u));
  border-top: calc(3 * var(--u)) dotted var(--rule);
  vertical-align:top;
  text-align:left;
}
.outline tr:last-child th,
.outline tr:last-child td{ border-bottom: calc(3 * var(--u)) dotted var(--rule); }

.outline th{
  width: calc(271 * var(--u));
  padding-left: calc(34 * var(--u));
  padding-right: 0;
  background: var(--white);
  font-weight:normal;
}
.outline td{
  padding-left: calc(42 * var(--u));
  background: var(--cream);
}
.outline sup{ font-size:.7em; vertical-align:super; }

.outline_note{
  width: calc(677 * var(--u));
  margin: calc(71 * var(--u)) auto 0;
  padding-bottom: calc(134 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: calc(32 / 24);
  text-align:justify;
  text-justify:inter-character;
}


/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{
  background: url(../img/contact_bg.png) center center / cover no-repeat, var(--orange);
  color:#fff;
  text-align:center;
  padding: calc(105 * var(--u)) 0 calc(90 * var(--u));
}
.contact .tel{
  width: calc(681 * var(--u));
  margin:0 auto;
  line-height:0;
}
.contact .tel a{
  display:block;
  transition:opacity .2s;
}
.contact .tel a:hover{ opacity:.7; }
.contact .tel img{ width:100%; }

.contact .buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: calc(18 * var(--u));
  width: calc(678 * var(--u));
  margin: calc(46 * var(--u)) auto 0;
}
.contact .buttons a{ display:block; line-height:0; transition:opacity .2s; }
.contact .buttons a img{ width:100%; }
.contact .buttons a:hover{ opacity:.7; }


/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  background: var(--cream);
  text-align:center;
  padding: calc(65 * var(--u)) calc(49 * var(--u)) calc(46 * var(--u));
  color: var(--dark-brown);
}
.family_logo{
  width: calc(702 * var(--u));
  margin: 0 auto;
  line-height:0;
  mix-blend-mode:multiply;
}
.family_logo img{ width:100%; }

.footer p{
  font-size: calc(30 * var(--u));
  line-height: calc(40.5 / 30);
  letter-spacing:0.02em;
}
.footer small{
  display:block;
  margin-top: calc(6 * var(--u));
  font-size: calc(28 * var(--u));
  line-height:1.6;
  letter-spacing:0.02em;
}


/* ==========================================================================
   スクロールフェード（js/script.js）
   ========================================================================== */
.js-fade{ opacity:0; transform: translateY(24px); }
.js-fade.is-shown{
  opacity:1; transform:none;
  transition: opacity .8s ease, transform .8s ease;
}
@media (prefers-reduced-motion: reduce){
  .js-fade,
  .js-fade.is-shown{ opacity:1; transform:none; transition:none; }
}


/* ==========================================================================
   PC（768px以上）
   コンテンツ幅 500px 固定＋背景・左右ロゴ・下部固定CTA
   ========================================================================== */
@media screen and (min-width: 768px){

  :root{ --u: 0.625px; }        /* 500px / 800 */

  .pc{ display:block; }

  body{
    background: url(../img/pc_bg.png) top center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position:relative;
  }

  .wrap{
    width:500px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,.3);
  }

  /* 左：物件ロゴ／右：for 9 Families */
  .pc_logo{
    position:fixed;
    top:50%; left:4%;
    transform: translateY(-60%);
    width:21%;
    max-width:340px;
    line-height:0;
    z-index:50;
  }
  .pc_families{
    position:fixed;
    top:50%; right:4%;
    transform: translateY(-60%);
    width:19%;
    max-width:350px;
    line-height:0;
    z-index:50;
  }

  /* 下部固定CTA */
  .pc_contact{
    position:fixed;
    left:0; bottom:0;
    width:100%;
    padding:20px 0;
    background:
      repeating-linear-gradient(-45deg, rgba(255,255,255,.10) 0 10px, transparent 10px 20px),
      var(--orange);
    z-index:100;
  }
  .pc_contact .buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3.3%;
    width:500px;
    margin:0 auto;
  }
  .pc_contact .buttons a{ display:block; line-height:0; transition:opacity .2s; }
  .pc_contact .buttons a img{ width:100%; }
  .pc_contact .buttons a:hover{ opacity:.7; }

  /* 固定CTAに隠れないようフッターに余白 */
  .footer{ padding-bottom:150px; }
}

/* 768〜1020px：左右ロゴを小さめに */
@media screen and (min-width: 768px) and (max-width: 1020px){
  .pc_logo{ width:15%; left:2%; }
  .pc_families{ width:14%; right:2%; }
}