/* DESIGN & COMMON 専用。共通ヘッダー・フッターは style.css を使用 */
/* ページ全体の基本設定 */
.dc-page {
  background:#fff;
  color:#111;
  font-family:"Noto Serif JP",serif;
  overflow:hidden;
}

.dc-page * {
  box-sizing:border-box;
}

.dc-page figure,
.dc-page h1,
.dc-page h2,
.dc-page p {
  margin:0;
}

.dc-page picture,
.dc-page img {
  display:block;
}

.dc-page img {
  max-width:100%;
  height:auto;
}

.dc-page picture>img {
  width:100%;
}

.dc-page figcaption,
.dc-note {
  font-size:10px;
  line-height:1.2em;
  text-align:right;
  padding-top:5px;
}

/* メイン画像・タイトル */
.dc-fv {
  position:relative;
  overflow:hidden;
  line-height:0;
}

.dc-fv > picture > img {
  opacity:0;
  transform:scale(1.04);
  filter:blur(8px);
  animation:fvImgShow 2s cubic-bezier(.22,.61,.36,1) forwards;
}

.dc-fv h1 {
  position:absolute;
  top:50%;
  left:50%;
  width:62.5%;
  transform:translate(-50%,-50%);
  opacity:0;
  filter:blur(8px);
  animation:fvTitleShow 1.6s cubic-bezier(.22,.61,.36,1) .9s forwards;
}

.dc-fv .dc-note {
  position:absolute;
  right:14px;
  bottom:10px;
  color:#fff;
  text-shadow:0 1px 4px #000;
}

/* 建物画像とメインコピー・サブコピー */
.dc-intro {
  width:min(1080px,88%);
  margin:40px auto 100px;
  display:grid;
  grid-template-columns:42% 1fr;
  gap:6%;
  align-items:center;
}

.dc-intro-text h2 {
  width:100%;
}

.dc-intro-text p {
  margin-top:44px;
  font-size:16px;
  line-height:2.4;
  letter-spacing:.08em;
}

/* 共用空間の写真と見出し（PCは左右配置） */
.dc-scene {
  width:min(1080px,84%);
  margin:0 auto 80px;
  display:grid;
  grid-template-columns:60% 1fr;
  gap:28px;
  align-items:start;
}

.dc-scene figure {
  grid-column:1;
  grid-row:1;
}

.dc-scene h2 {
  grid-column:2;
  grid-row:1;
  padding-top:8px;
}

.dc-scene--lounge h2 {
  max-width:300px;
}

.dc-scene--right {
  grid-template-columns:1fr 60%;
}

.dc-scene--right h2 {
  grid-column:1;
  justify-self:end;
}

.dc-scene--right figure {
  grid-column:2;
}

.dc-scene--patio h2 {
  width:208px;
}

.dc-scene--counter h2 {
  width:min(368px,100%);
}

.dc-scene--elevator h2 {
  width:min(365px,100%);
}

.dc-scene--wide {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:120px;
  margin-bottom:110px;
}

.dc-scene--wide figure {
  width:100%;
  order:0;
}

.dc-scene--wide h2 {
  order:1;
  width:min(639px,80%);
  margin-left:8%;
  padding:0;
}

.dc-scene--wide figcaption {
  padding-right:14px;
}

/* エントランス外観 */
.dc-exterior {
  margin-top:160px!important;
}

.dc-exterior figcaption {
  padding-right:14px;
}

/* マテリアル画像 */
.dc-material {
  width:min(726px,60%);
  margin:100px auto 130px!important;
}

/* デザイナー紹介 */
.dc-designer {
  background:#000;
  padding:100px 12%;
  color:#fff;
}

.dc-designer-frame {
  border:1px solid #847749;
  max-width:980px;
  margin:auto;
  padding:70px 10% 60px;
  position:relative;
}

.dc-designer-frame>h2 {
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%,-50%);
  background:#000;
  padding:0 14px;
  width:240px;
}

/* プロフィールの左右配置（右側の数値が写真の幅） */
.dc-designer-profile {
  display:grid;
  grid-template-columns:1fr 220px;
  gap:30px;
  align-items:start;
}

.dc-designer-profile picture {
  max-width:409px;
}

/* デザイナー写真の幅（上の配置幅とそろえる） */
.dc-designer-portrait {
  width:220px;
}

.dc-designer-pending {
  font-size:13px;
  line-height:2;
  margin-top:25px!important;
}

.dc-designer-projects {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:40px;
}

.dc-designer-projects img {
  width:100%;
}

.dc-designer-projects figcaption {
  text-align:left;
  font-size:11px;
  margin-top:8px;
}

/* スマホ用（画面幅767px以下） */
@media(max-width:767px) {
  .dc-fv h1 {
    width:94%;
  }

  /* 建物画像とメインコピー・サブコピー */
  .dc-intro {
    display:block;
    width:88%;
    margin:30px auto 80px;
  }

  .dc-intro>figure {
    width:82%;
    margin:0 auto 30px;
  }

  .dc-intro-text h2 {
    width:100%;
  }

  .dc-intro-text p {
    margin-top:28px;
    font-size:14px;
    line-height:2.3;
    letter-spacing:.04em;
  }

  .dc-pc-br {
    display:none;
  }

  .dc-scene,
  .dc-scene--right,
  .dc-scene--wide {
    display:flex;
    flex-direction:column;
    width:100%;
    gap:14px;
    margin:0 auto 65px;
    align-items:stretch;
  }

  .dc-scene h2,
  .dc-scene--wide h2 {
    order:0;
    width:auto;
    max-width:88%;
    margin:0 6%;
    padding:0;
    align-self:flex-start;
  }

  .dc-scene h2 img {
    width:auto;
    height:25px;
    max-width:100%;
  }

  .dc-scene figure {
    order:1;
    width:100%;
  }

  .dc-scene figcaption {
    padding-right:10px;
  }

  /* エントランス外観 */
  .dc-exterior {
    margin-top:100px!important;
  }

  /* マテリアル画像 */
  .dc-material {
    width:84%;
    margin:60px auto 80px!important;
  }

  /* デザイナー紹介 */
  .dc-designer {
    padding:60px 5%;
  }

  .dc-designer-frame {
    padding:40px 6% 30px;
  }

  .dc-designer-frame>h2 {
    width:200px;
  }

  /* プロフィールの左右配置（右側の数値が写真の幅） */
  .dc-designer-profile {
    grid-template-columns:1fr 95px;
    gap:16px;
  }

  /* デザイナー写真の幅（上の配置幅とそろえる） */
  .dc-designer-portrait {
    width:95px;
  }

  .dc-designer-pending {
    font-size:11px;
  }

  .dc-designer-projects {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:30px;
  }

}

/* POSITIONページと同じスクロール演出 */
.js-scroll-fade {
  opacity:0;
  transform:translateY(40px);
  filter:blur(10px);
  transition:
    opacity 1.2s cubic-bezier(.22,.61,.36,1),
    transform 1.2s cubic-bezier(.22,.61,.36,1),
    filter 1.6s cubic-bezier(.22,.61,.36,1);
}

.js-scroll-fade.is-show {
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

.js-scroll-fade {
  transform:translateY(20px);
  transition:transform 1s ease-out;
}

.js-scroll-fade.is-show {
  transform:translateY(0);
}

/* 動きを減らす端末設定への対応 */
@media(prefers-reduced-motion:reduce) {
  .dc-fv > picture > img,
  .dc-fv h1 {
    animation:none;
    opacity:1;
    filter:none;
  }

  .dc-fv > picture > img {
    transform:none;
  }

  .js-scroll-fade,
  .js-scroll-fade.is-show {
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }

}

/* 写真と見出しを左右から表示。共通top.jsを使用 */
.dc-page .js-scroll-fade-left,
.dc-page .js-scroll-fade-right {
  opacity:0;
  filter:blur(6px);
  transition:opacity 1.2s cubic-bezier(.22,.61,.36,1),transform 1.2s cubic-bezier(.22,.61,.36,1),filter 1.6s cubic-bezier(.22,.61,.36,1);
}

.dc-page .js-scroll-fade-left {
  transform:translateX(-40px);
}

.dc-page .js-scroll-fade-right {
  transform:translateX(40px);
}

.dc-page .js-scroll-fade-left.is-show,
.dc-page .js-scroll-fade-right.is-show {
  opacity:1;
  transform:translateX(0);
  filter:blur(0);
}

.dc-scene>h2.js-scroll-fade-left,
.dc-scene>h2.js-scroll-fade-right {
  transition-delay:.15s;
}

/* スマホ用（画面幅767px以下） */
@media(max-width:767px) {
  .dc-page .js-scroll-fade-left {
    transform:translateX(-20px);
  }

  .dc-page .js-scroll-fade-right {
    transform:translateX(20px);
  }

  .dc-page .js-scroll-fade-left.is-show,
  .dc-page .js-scroll-fade-right.is-show {
    transform:translateX(0);
  }

}

/* 動きを減らす端末設定への対応 */
@media(prefers-reduced-motion:reduce) {
  .dc-page .js-scroll-fade-left,
  .dc-page .js-scroll-fade-right {
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }

}

/* スマホのデザイナー紹介 */
@media (max-width: 767px) {
  .dc-designer-profile {
    grid-template-columns: minmax(0, 1fr) 120px;
    column-gap: 16px;
    row-gap: 24px;
  }

  /* ロゴと経歴文を別の段に配置 */
  .dc-designer-profile > div {
    display: contents;
  }

  .dc-designer-profile picture {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .dc-designer-portrait {
    grid-column: 2;
    grid-row: 1;
    width: 120px;
  }

  /* 経歴文は写真の下で横幅いっぱいに */
  .dc-designer-pending {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0 !important;
    font-size: 13px;
    line-height: 2;
  }
}

/* スマホのFVタイトルを横幅いっぱいに */
@media (max-width: 767px) {
  .dc-fv h1 {
    width: 96%;
    max-width: none;
  }

  .dc-fv h1 picture,
  .dc-fv h1 img {
    width: 100%;
    max-width: none;
  }
}

/* エントランス画像の上の見出し */
.dc-page .dc-entrance-title {
  margin: 160px 0 24px;
  padding-left: 8%;
}

.dc-page .dc-entrance-title img {
  width: min(410px, 80%);
  height: auto;
}

/* 画像の上の余白は見出し側で取る */
.dc-page .dc-exterior {
  margin-top: 0 !important;
}

/* スマホ */
@media (max-width: 767px) {
  .dc-page .dc-entrance-title {
    margin-top: 100px;
    margin-bottom: 16px;
    padding-left: 6%;
  }

  .dc-page .dc-entrance-title img {
    width: min(280px, 85%);
  }
}


/* 画像の注釈を右下に白字で重ねる */
.dc-page figure {
  position: relative;
}

.dc-page figure > figcaption {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 1;

  max-width: calc(100% - 20px);
  margin: 0;
  padding: 0;

  color: #fff;
  font-size: 10px;
  line-height: 1.5;
  text-align: right;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

/* スマホ */
@media (max-width: 767px) {
  .dc-page figure > figcaption {
    right: 6px;
    bottom: 6px;
    font-size: 9px;
  }
}

/* SP first view: same viewport height as the other interior pages. */
@media (max-width:767px){
  .dc-page .dc-fv{
    height:100vh;
    height:100svh;
    min-height:0;
    overflow:hidden;
  }
  .dc-page .dc-fv > picture{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  .dc-page .dc-fv > picture > img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
  }
  .dc-page .dc-fv .dc-note{
    bottom:calc(8px + env(safe-area-inset-bottom,0px));
  }
}