@charset "utf-8";
/* CSS Document */

/* CONCEPT - 私たちを形成する“強み” */
.vertical-message-wrapper {
  display: flex;
  justify-content: center;
}
.vertical-message {
  writing-mode: vertical-rl;
  text-align: center;
  font-size: 1.2em;
  line-height: 2.2;
  letter-spacing: 0.15em;
  font-family: 'Zen Old Mincho', serif;
  color: #1e1e1e;
  /* 画面左右中央に配置 */
  height: auto;
  margin: 60px auto;
  position: relative;
  display: flex;
  align-items: flex-start;   /* 上揃え */
  justify-content: center;   /* 左右中央 */
  /*width: fit-content;*/
}

.design-description {
  font-size: 16px;
  text-align: center;
  line-height: 2;
  margin-top: 40px;
  padding: 0 20px;
  color: #1e1e1e;
  font-family: 'Zen Old Mincho', serif;
}

.concept-background-wrapper {
  position: relative;
  padding: 60px 0;
  overflow: hidden;
  /*background-color: #f8f5ed;  ベース色を指定 */
}

.concept-background-wrapper::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 950px;
  height: 761px;
  background-image: url('../images/concept_bg01.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
  z-index: 0;
  opacity: 0.7;
  pointer-events: none;
}

.concept-background-wrapper::after {
  content: '';
  position: fixed;
  bottom: 0;
  right: 0;
  width: 650px;
  height: 512px;
  background-image: url('../images/concept_bg02.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  z-index: 0;
  opacity: 0.7;
  pointer-events: none;
}

/* コンテンツは前面に表示 */
.concept-background-wrapper > * {
  position: relative;
  z-index: 1;
}



/* DESIGN COMPETITION - デザインコンペへの“挑戦” */

/* セクション全体を横幅いっぱいに */
#competition {
  width: 100vw;       /* ビューポートの横幅いっぱい */
  max-width: 100%;    /* 念のための制限 */
  margin: 0 auto;
  position: relative;
  /*background-color: #f8f5ed;  必要なら背景色指定 */
  overflow: hidden;
  padding: 60px 0;    /* 上下のスペース確保 */
}


/* 内部の中央寄せコンテンツ用（すでに .container や .content-block があれば不要） 
#competition .content-block {
  /*max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px;
}*/
.compe-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  margin-top: 60px;
  flex-wrap: wrap;
}

.compe-image img {
  width: 680px;
  max-width: 100%;
  height: auto;
  /*border-radius: 8px;  任意。角丸を付けたい場合 */
}

.compe-text {
  max-width: 360px;
  text-align: left;
}

.compe-text h4 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #1e1e1e;
  font-family: 'Zen Old Mincho', serif;
  font-weight: Medium;
  letter-spacing: 0.12em;
  line-height: 1.8em;
}

.compe-text p {
  font-size: 16px;
  line-height: 1.8;
  color: #1e1e1e;
  font-family: 'Zen Old Mincho', serif;
}

/* reverseクラスで順番を逆にする */
.compe-section.reverse {
  flex-direction: row-reverse;
}


/* スマホ画像（デフォルトで非表示） */
.compe-sp-image {
  display: none;
  margin-bottom: 20px;
}

.compe-sp-image img {
  width: 100%;
  height: auto;
}

/* PC用横並び */

.compe-text-center {
  max-width: 500px;
  text-align: left;
}

.compe-text-center h4 {
  font-size: 20px;
  font-family: 'Zen Old Mincho', serif;
  font-weight: bold;
  margin-bottom: 15px;
  color: #1e1e1e;
}

.compe-text-center p {
  font-size: 14px;
  line-height: 1.8;
  color: #1e1e1e;
  font-family: 'Zen Old Mincho', serif;
}

/* 表示切り替え */
.pc-only {
  display: block;
}
.sp-only {
  display: none;
}

.compe-future-block {
  margin-top: 60px;
  text-align: center;
}

/* スマホ専用 */
.compe-sp-only {
  display: none;
}

.compe-sp-only img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.compe-sp-only .compe-future-text {
  padding: 0 20px;
  text-align: center;
}

.compe-sp-only h4 {
  font-size: 18px;
  margin-bottom: 10px;
}

.compe-sp-only p {
  font-size: 14px;
  line-height: 1.8;
  color: #1e1e1e;
}

/* PC用レイアウト */
.compe-pc-only {
  display: block;
}

.compe-future-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.compe-future-image-left img,
.compe-future-image-right img {
  width: 250px;
  height: auto;
}

.compe-future-text {
  max-width: 500px;
  text-align: left;
}

.compe-future-text h4 {
  font-size: 20px;
  margin-bottom: 15px;
  font-family: 'Zen Old Mincho', serif;
  font-weight: bold;
  color: #1e1e1e;
}

.compe-future-text p {
  font-size: 14px;
  line-height: 2;
  color: #1e1e1e;
  font-family: 'Zen Old Mincho', serif;
}


/* 集合写真のところ */
.compe-photo-parallax-wrapper {
  position: relative;
  overflow: hidden;
  height: auto;
  margin: 60px 0;
}

/* 背景帯 */
.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 85%;
  height: 300px;
  background-color: #f8f5ed;
  z-index: 0;
  transform: translateY(0);
  transition: transform 0.1s linear;
}

.compe-photo-block {
  position: relative;
  margin: 60px auto;
  text-align: right; /* ← 右寄せ */
  padding-right: 5%; /* 右に余白を持たせて中央からずらす */
}
/* 背景帯 */
.compe-photo-bg {
  display: none;
}

/* 画像右寄せ・大きく */
.compe-photo-block img {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  border-radius: 0;
}


/* 背景帯を追加 */
@media (min-width: 769px) {
  .compe-photo-block::before {
    content: '';
    position: absolute;
    top: 60%;
    left: 0;
    transform: translateY(-40%);
    width: 100%;
    height: 460px; /* ← 背景帯の縦幅を拡大 */
    background-color: #f8f5ed;
    z-index: 0;
  }

  .compe-photo-block img {
    position: relative;
    z-index: 1;
    width: 100%;
    /*max-width: 1000px;  ← 横幅を少し縮小 */
    height: auto;
    display: inline-block;
  }
}


/* スマホではシンプルに画像だけ */
@media (max-width: 768px) {
  .compe-photo-block {
    margin: 20px 0;
    padding: 0;
  }

  .compe-photo-block img {
    width: 100%;
    border-radius: 0;
  }
}


@media (max-width: 768px) {
/* レスポンシブ切り替え */
  .compe-pc-only {
    display: none;
  }

  .compe-sp-only {
    display: block;
  }

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

/* スマホ表示：縦並びに切り替え */
  .compe-desktop-layout {
    display: none;
  }

  .compe-sp-image {
    display: block;
  }

/* スマホ時も縦並び */
  .compe-section.reverse {
    flex-direction: column;
  }

  .compe-section {
    flex-direction: column;
  }

  .compe-text {
    text-align: left;
	margin-top: 0;
    padding: 0 20px;
  }
  .compe-image {
    margin-bottom: 0; 
  }

}