@charset "utf-8";
/* =========================
   MODEL ROOM Slider（修正版：コピーを上に配置）
   ========================= */

.modelroom .w1080{
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== コピー（画像の上） ===== */
.modelroom > .box{
  max-width: 1080px;
  margin: 30px auto 0;
  text-align: center;
  padding: 0; /* 必要なら左右padding入れてOK */
}

.modelroom > .box .maincopy{
  max-width: 440px;
  margin: 120px auto 0;
}

.modelroom > .box .subcopy{
  max-width: 680px; /* 元の雰囲気に近い幅 */
  margin: 18px auto 0;
}

.modelroom > .box .maincopy img,
.modelroom > .box .subcopy img{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* フェードイン（HTMLの .fadein を活かす） */
.modelroom > .box .fadein{
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.9s ease-out forwards;
}
.modelroom > .box .maincopy.fadein{ animation-delay: 0.3s; }
.modelroom > .box .subcopy.fadein{ animation-delay: 0.6s; }

@media screen and (max-width: 767px){
  .modelroom > .box{
    margin-top: 18px;
    padding: 0 5vw;
  }
  .modelroom > .box .maincopy{
    max-width: 65vw;
  }
  .modelroom > .box .subcopy{
    max-width: 70vw;
    margin-top: 10px;
  }
}

/* ===== メイン（画像エリア） ===== */
.mainvisual{
  position: relative;
  margin: 60px auto 0;
  overflow: hidden;

  width: 100%;
  max-width: 1080px;

  /* あなたが調整した高さ */
  height: 660px;
  max-height: 960px;

  background: #f2f2f2;

  /* 画像エリア自体のフェードイン（不要なら削除OK） */
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
  animation-delay: 0.2s;
}

@media screen and (max-width: 767px){
  .mainvisual{
    height: min(520px, 55vh);
    max-height: none;
  }
}

/* スライド（2枚重ね） */
.mainvisual .slides{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.mainvisual .slide-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  opacity: 0;
  transition: opacity 450ms ease;
  display: block;
}
.mainvisual .slide-img.is-active{
  opacity: 1;
}

/* 左右ナビ：SVGをそのまま（背景・余白なし） */
.mainvisual .nav-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
}

/* ★SVGが0サイズになって消えるケース回避：幅だけ指定 */
.mainvisual .nav-btn img{
  display: block;
  width: 56px;
  height: auto;
}

.mainvisual .nav-prev{ left: 0px; }
.mainvisual .nav-next{ right: 0px; }

@media screen and (max-width: 767px){
  .mainvisual .nav-prev{ left: 10px; }
  .mainvisual .nav-next{ right: 10px; }
  .mainvisual .nav-btn img{ width: 44px; }
}

.mainvisual .nav-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,0.35);
  outline-offset: 2px;
}

/* ===== アニメ ===== */
@keyframes fadeInUp{
  from{ opacity: 0; transform: translateY(20px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* ===== サムネ ===== */
ul.thumbs{
  display: flex;
  gap: 10px;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
}

ul.thumbs .thumb{
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: block;

  border-radius: 6px;
  overflow: hidden;
  opacity: 0.75;
  transition: opacity 200ms ease, transform 200ms ease;
}

ul.thumbs .thumb img{
  width: 100%;
  height: auto;
  display: block;
}

ul.thumbs .thumb:hover{
  opacity: 1;
  transform: translateY(-2px);
}

ul.thumbs .thumb.is-active{
  opacity: 1;
  outline: 2px solid #000;
  outline-offset: 2px;
}

@media screen and (max-width: 767px){
  ul.thumbs{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px 10px;
    display: none; /* いまの運用を維持 */
  }
  ul.thumbs li{
    flex: 0 0 auto;
    width: 110px;
  }
}

/* ===== 注釈 ===== */
.slide-text{
  margin: 40px auto 0;
  max-width: 1080px;
}

@media screen and (max-width: 767px){
  .slide-text{
    margin-top: 15px;
    padding: 0 5vw;
  }
}



.c-1 {
	padding: 90px 5vw;
}

.c-1 .flex {
	display: flex;
	justify-content: space-between;
	gap:40px;
}

.c-1 .flex .text {
	width: 35%;
}

.c-1 .flex .text .plan-title{
	max-width: 80%;
	margin: 0 auto 20px;
}

.c-1 .flex .text h2 {
	background: url("../images/plan/type.svg")no-repeat;
	background-size: cover;
	display: block;
	color: #FFF;
	font-size: 48px;
	line-height: 100%;
	padding: 10px 0;
	text-align: center;
}

.c-1 .flex .text h2 span {
	margin-left: 10px;
	font-size: 25px;
}

.c-1 .flex .text h3 {
	background: #231815;
	color: #FFF;
	text-align: center;
	font-size: 24px;
}

.c-1 .flex .text h3 span {
	font-size: 16px;
}

.c-1 .flex .text .data {
	padding: 0 10px;
}
.c-1 .flex .text .data h4 {
	font-size: 16px;
	line-height: 140%;
	padding: 10px 0;
}

.c-1 .flex .text .data h4 span.big {
	font-size: 48px;
	line-height: 48px;
}

.c-1 .flex .text .data h4 span.mid {
	font-size: 24px;
}

.c-1 .flex .text .data p span {
}

.c-1 .copy-area {
}

.c-1 .copy-area h5 {
	padding: 50px 0;
	font-size: 26px;
	letter-spacing: 1px;
}

.c-1 .copy-area .copy-text {
}

.c-1 .copy-area .copy-text p {
	font-size: 16px;
  padding-left: 1em;   /* 1字分の左余白 */
  text-indent: -1em;   /* 1行目だけ左に戻す → 2行目以降が1字下がる */
	margin-bottom: 30px;
}

.c-1 .copy-area .icon {
	margin-top: 40px;
}

.c-1 .left .comment {
	font-size: 12px;
	line-height: 140%;
	margin-top: 20px;
}

.c-1 .flex .floor {
	width: 60%;
}

@media screen and (max-width: 767px) {
	.c-1 {
		padding: 60px 5vw;
	}

	.c-1 .flex {
		display: flex;
		flex-flow: column;
		gap:30px;
	}

	.c-1 .flex .text {
		width: auto;
	}

	.c-1 .flex .text h2 {
		background: url("../images/plan/type.svg")no-repeat;
		background-size: cover;
		display: block;
		color: #FFF;
		font-size: 40px;
		text-align: center;
	}

	.c-1 .flex .text h3 {
		background: #231815;
		color: #FFF;
		text-align: center;
		font-size: 24px;
	}

	.c-1 .flex .text h3 span {
		font-size: 16px;
	}

	.c-1 .flex .text h4 {
		font-size: 16px;
		line-height: 140%;
		padding: 10px 0;
	}

	.c-1 .flex .text h4 span.big {
		font-size: 48px;
		line-height: 48px;
	}

	.c-1 .flex .text h4 span.mid {
		font-size: 24px;
	}

	.c-1 .copy-area {
		padding: 0 5vw;
	}

	.c-1 .copy-area h5 {
		padding: 20px 0;
		font-size: 24px;
		letter-spacing: 1px;
		line-height: 140%;
		margin: 20px 0;
	}

	.c-1 .copy-area .copy-text {
		padding-top: 0;
	}

	.c-1 .copy-area .copy-text p {
		padding: 0;
		font-size: 14px;
		line-height: 160%;
	}

	.c-1 .flex .floor {
		width: 100%;
		max-width: 960px;
		margin: 0 auto;
	}
}