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

:root{
  --u: 0.125vw;                 /* 100vw / 800 */
  --cream:      #f5f2e9;
  --white:      #ffffff;
  --pink:       #f2a0a1;
  --brown:      #b18263;
  --dark-brown: #40210f;
  --deep-red:   #852e19;
  --orange:     #eb6b4a;
  --rule:       #b69a86;
  --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;
}

.pc{ display:none; }
.sp{ display:block; }

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

.white_area{ background: var(--white); }


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


/* ==========================================================================
   リード文
   ========================================================================== */
.intro{
  background: var(--white);
  text-align:center;
  padding: calc(120 * var(--u)) 0 calc(102 * 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.08em;
  margin: calc(30 * var(--u)) auto 0;
}


/* ==========================================================================
   LAND PLAN
   ========================================================================== */
.landplan .landplan_copy{
  font-family: var(--mincho);
  font-weight:normal;
  color: var(--deep-red);
  text-align:center;
  font-size: calc(74 * var(--u));
  line-height: calc(95 / 74);
  letter-spacing:0.02em;
  margin: calc(48 * var(--u)) auto 0;
}
.landplan .body-copy{
  width: 82%;
  margin: calc(56 * 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(730 * var(--u));
  margin: calc(43 * var(--u)) auto 0;
}
.land_plan .landplan_img::before{
  content:"";
  position:absolute;
  left: calc(-35 * var(--u));
  width: calc(800 * var(--u));
  top: calc(276 * var(--u));
  height: calc(330 * var(--u));
  background: var(--deep-red);
}
.land_plan .landplan_img img{ position:relative; width:100%; }

/* 4つのポイント */
.features{
  width: calc(641 * var(--u));
  margin: calc(-41 * var(--u)) auto 0;
  padding-bottom: calc(51 * var(--u));
}
.features li{
  position:relative;
  padding-top: calc(187 * var(--u));
  margin-bottom: calc(42 * var(--u));
}
.features li:last-child{ margin-bottom:0; }

.features .ico{
  position:absolute;
  top:0; left:50%;
  transform: translateX(-50%);
  width: calc(208 * var(--u));
  line-height:0;
}
.features .box{
  border:1px solid var(--brown);
  border-radius: calc(10 * var(--u));
  padding: calc(62 * var(--u)) calc(20 * var(--u));
  background: var(--white);
}
.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(42 * var(--u));
  padding: 0 calc(25 * var(--u));
  font-size: calc(32 * var(--u));
  line-height: calc(56 / 32);
  letter-spacing:0.03em;
  text-align:justify;
  text-justify:inter-character;
}


/* ==========================================================================
   参考プラン
   ========================================================================== */
.plan{ padding-top: calc(200 * var(--u)); }

.plan .plan_copy{
  width: 82%;
  margin: calc(56 * 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 .note{ margin-top: calc(40 * var(--u)); }


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


/* ==========================================================================
   梅の香りに包まれる季節
   ========================================================================== */
.ume{
  margin-top: calc(121 * var(--u));
  background: url(../img/loca_bg.png) top center no-repeat;
  background-size: 100% 100%;
  padding: calc(74 * var(--u)) 0 calc(53 * var(--u));
}
.ume_img{
  position:relative;
  width: calc(672 * var(--u));
  margin:0 auto;
  line-height:0;
}
.ume_img > img{ width:100%; }

.ume_cap{
  position:absolute;
  left: calc(-64 * var(--u));
  width: calc(800 * var(--u));
  top: calc(200 * var(--u));
  height: calc(106 * var(--u));
  background: rgba(199,35,36,.5);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ume_cap span{
  color:#fff;
  font-size: calc(48 * var(--u));
  line-height:1;
  letter-spacing:0.12em;
  text-indent:0.12em;
}

.ume_txt{
  width: calc(645 * var(--u));
  margin: calc(49 * 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: calc(74 * var(--u)) 0 0; }
.facilities li{
  width: calc(672 * var(--u));
  margin: 0 auto calc(90 * var(--u));
  text-align:center;
}
.facilities li:last-child{ margin-bottom:0; }
.facilities li img{ width:100%; }

.facilities .name{
  margin-top: calc(22 * 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(38 * var(--u));
  line-height: calc(57 / 38);
  letter-spacing:0.02em;
}
.facilities .dist span{ font-size: calc(34 * var(--u)); }


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

.info_block{ margin-bottom: calc(92 * 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(28 * var(--u)) auto 0;
  border-top: calc(5 * var(--u)) dotted var(--brown);
  padding-top: calc(46 * 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(31 * 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{ padding-bottom: calc(100 * var(--u)); }


/* ==========================================================================
   ACCESS
   ========================================================================== */
.access{ padding-top: calc(200 * var(--u)); }

.access .station{
  width: calc(720 * var(--u));
  margin: calc(72 * var(--u)) auto 0;
  line-height:0;
}
.access .route_map{
  width: calc(590 * var(--u));
  margin: calc(39 * var(--u)) auto 0;
  line-height:0;
}
.access .time{
  background: var(--white);
  margin-top: calc(35 * var(--u));
  padding: calc(45 * var(--u)) 0;
  text-align:center;
  line-height:0;
}
.access .time img{ width: calc(730 * var(--u)); }
.access .note{ margin-top: calc(64 * var(--u)); }


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

.outline .outline_tit{
  width: calc(677 * var(--u));
  margin: calc(90 * var(--u)) auto calc(28 * var(--u));
  font-size: calc(36 * var(--u));
  line-height:1.4;
  font-weight:normal;
  letter-spacing:0.04em;
}
.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(64 * var(--u)) auto 0;
  padding-bottom: calc(90 * 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(107 * 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(47 * var(--u)) auto 0;
}
.contact .buttons a{ display:block; line-height:0; transition:opacity .2s; }
.contact .buttons a:hover{ opacity:.7; }


/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  background: var(--cream);
  text-align:center;
  padding: calc(100 * var(--u)) calc(60 * var(--u)) calc(90 * var(--u));
  color: var(--dark-brown);
}
.family-logo{
  width: calc(400 * var(--u));
  margin: 0 auto calc(40 * var(--u));
  line-height:0;
  mix-blend-mode:multiply;
}
.footer p{
  font-size: calc(28 * var(--u));
  line-height:1.8;
  margin-bottom: calc(36 * var(--u));
}
.footer small{
  display:block;
  font-size: calc(22 * var(--u));
  line-height:1.6;
}


/* ==========================================================================
   スクロールフェード（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; }
  .sp{ display:none; }

  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);
    padding-bottom:0;
  }

  /* 左：物件ロゴ／右：for 15 Families */
  .pc_logo{
    position:fixed;
    top:50%; left:4%;
    transform: translateY(-60%);
    width:19%;
    max-width:300px;
    line-height:0;
    z-index:50;
  }
  .pc_families{
    position:fixed;
    top:50%; right:4%;
    transform: translateY(-60%);
    width:20%;
    max-width:361px;
    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 9px, transparent 9px 23px),
      var(--orange);
    z-index:100;
  }
  .pc_contact .buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    width:500px;
    margin:0 auto;
    padding:0 10px;
  }
  .pc_contact .buttons a{ display:block; line-height:0; transition:opacity .2s; }
  .pc_contact .buttons a:hover{ opacity:.7; }

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

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