/* Kyomurasaki Minimal Template (960px) */
:root{
  --bg: #f7f3ef;
  --fuji: #f3eef7;
  --sakura: #ede6ea;
  --kyo: #5a2a6e;
  --text: #3a2f2f;
  --sub: #5a5252;
}

html{
	background-color: transparent;
}

html, body { height:100%; }
article{
  margin:0;
  color:var(--text);
  /*background-color: var(--bg);*/
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url('../img/p0027_l.webp');
  background-size: 1200px auto;
  background-repeat: repeat;
  background-blend-mode: multiply;
  font-family: -apple-system, BlinkMacSystemFont,'Zen Old Mincho', 'Noto Serif JP', serif;
  line-height: 1.9;
}

section#topicpath {
	/*margin-top: 10px*/;}

.wrapper{ max-width:960px; margin:0 auto; padding:48px 24px 96px; }
.section{ margin:72px 0; }
.stack > * + *{ margin-top:24px; }

.kicker{ letter-spacing:.2em; font-size:1.5rem; color:var(--sub); margin:0 0 8px; }
article h1{ font-size:clamp(30px,4vw,50px); color:var(--kyo); letter-spacing:.02em; margin:0 0 12px; font-family:"Yuji Mai",'Yu Mincho',serif; }
article h2{
	font-family: "ten-mincho", serif;
font-weight: 400;
font-style: normal;
font-size:clamp(25px,2.5vw,35px);
text-align: center;
	color: #5a2a6e;
	margin: 200px auto 50px;
}
article h3{
	font-family: "ten-mincho", serif;
	font-weight: 400;
font-style: normal;
font-size:clamp(20px,2.3vw,30px);
	text-align: center;
	color: #5a2a6e;
	margin: 50px auto;
}


article h3.op{
	margin: 0 auto;
}

.lead{ /*font-size:clamp(16px,1.6vw,20px);*/
	font-size: 16px;
	color:var(--text);
	margin:0 0 28px;
}

/*.yuji-syuku-regular {
  font-family: "Yuji Syuku", serif;
  font-weight: 400;
  font-style: normal;
}*/


/*.title-nijimi{ position:relative; display:inline-block; padding:8px 10px 6px; }
.title-nijimi:before{
  content:""; position:absolute; inset:-16px -20px -10px -20px;
  background:
    radial-gradient(60% 50% at 30% 40%, rgba(90,42,110,.22), transparent 60%),
    radial-gradient(50% 45% at 70% 60%, rgba(180,120,200,.18), transparent 70%);
  filter: blur(8px);
  border-radius:24px;
  pointer-events:none;
}*/

.title-nijimi{
  /* 位置 */
  position: absolute;      /* ← 相対親（.hero）の右上に重ねる */
  top: 35%;
  /*right: 40px;*/
  right: 20%;
  z-index: 10;

  /* 縦書き */
  writing-mode: vertical-rl;
  text-orientation: upright;

  /* 見た目 */
  display: inline-block;
  padding: 18px 16px;      /* ← 帯っぽく少し厚め */
  font-family: "Yuji Mai",'Yu Mincho',serif;
  font-size: clamp(40px, 5.5vw, 70px);
  letter-spacing: .18em;
  color: #5a2a6e;

  /* 帯の下地（薄い白） */
  /*background: rgba(255,255,255,.88);
  border: 1px solid #d6cfd8;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);*/
}

/* にじみ（縦帯に合わせて余白を微調整） */
/*.title-nijimi:before{
  content:"";
  position:absolute;
  inset:-14px -16px -14px -16px; 
  background:
    radial-gradient(60% 50% at 35% 25%, rgba(90,42,110,.20), transparent 60%),
    radial-gradient(55% 45% at 65% 75%, rgba(180,120,200,.16), transparent 70%);
  filter: blur(8px);
  border-radius:16px;
  pointer-events:none;
  z-index:-1;
}*/

/* ← ここを修正 */
.title-nijimi::before{
  content:"";
  position:absolute;

  /* h1の幅に依存させない */
  width: 44px;                      /* ← にじみ帯の“横幅”を固定（お好みで） */
  height: calc(100% + 24px);        /* ← 縦は少しだけ上下に余白を持たせる */

  /* 中央に配置 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* にじみの見た目（そのまま流用でOK） */
  background:
    radial-gradient(60% 50% at 35% 25%, rgba(90,42,110,.70), transparent 60%),
    radial-gradient(55% 45% at 65% 75%, rgba(180,120,200,.70), transparent 70%);
  filter: blur(10px);
  border-radius:16px;
  pointer-events:none;
  z-index:-1;
}

@media (max-width: 768px){
  .title-nijimi{
    /* ← relative にして、擬似要素の基準にする */
    position: static;             
    writing-mode: horizontal-tb;     /* 横書き */
    text-orientation: mixed;
    display: inline-block;
    margin: 8px 0 0;
    padding: 10px 12px;              /* 少し厚めにして帯感を出す */
    border-radius: 10px;
  }

  .title-nijimi::before{
    content:"";
    position:static;

    /* ▼ 縦書き用の“固定幅センタリング”をリセット */
    width:auto; height:auto;
    left:auto; top:auto; transform:none;

    /* ▼ 横書き用の“inset型”にじみ（要素の外側に広げる） */
    inset: -14px -18px -10px -18px;

    background:
      radial-gradient(60% 50% at 30% 45%, rgba(90,42,110,.38), transparent 60%),
      radial-gradient(50% 45% at 70% 55%, rgba(180,120,200,.32), transparent 70%);
    filter: blur(8px);
    border-radius: 14px;
    pointer-events:none;
    z-index:-1;
  }
}


.band{ padding:28px; /*border-radius:16px;*/ margin:32px 0; }
.band.fuji   { background: rgba(243, 238, 247, 0.92); }
.band.sakura { background: rgba(237, 230, 234, 0.92); }

.grid{ display:grid; grid-template-columns:8fr 5fr; gap:40px; align-items:start; }

.grid.reverse{
  grid-template-columns:5fr 8fr;
}

.illus{ 
	display:block; 
	margin:50px auto;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.10)) drop-shadow(0 2px 0 rgba(0,0,0,.02));
  max-width:600px;
	width: 100%;
}

img#mv.illus{ 
	display:block; 
	margin:0 auto;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.10)) drop-shadow(0 2px 0 rgba(0,0,0,.02));
  max-width:800px;
	width: 55%;
}

@media (max-width:768px){
	img#mv.illus{
		width: 100%;
	}
}

.photo-block{ position:relative; width:min(420px,44vw); margin:24px 0; }
.photo-block img{ display:block; width:100%; /*border-radius:12px;*/ box-shadow:0 8px 24px rgba(0,0,0,.08); background:#eee; }
.photo-block.right{ margin-left:auto; }
.photo-block.right:before{ content:""; position:absolute; left:-18px; top:0; bottom:0; width:4px; background:var(--kyo); /*border-radius:2px;*/ opacity:.18; }
.photo-block.left{ margin-right:auto; }
.photo-block.left:before{ content:""; position:absolute; right:-18px; top:0; bottom:0; width:4px; background:var(--kyo); /*border-radius:2px;*/ opacity:.18; }
.photo-block figcaption{ font-size:1.5rem; color:var(--sub); margin-top:8px; }
.photo-block figcaption span{ opacity:.7; }

.cta{ margin-top:24px;
	display:flex;
	justify-content: center;
	padding:10px 18px; 
	border-radius:999px; 
	text-decoration:none; 
	color:#fff!important; 
	background:var(--kyo); 
	letter-spacing: 2px;
	width: 300px;
	transition: transform .25s ease, box-shadow .25s ease;
}

.cta:hover{
	transform: scale(1.06);
	box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

@media (max-width:960px){ .grid{ gap:32px; } }
@media (max-width:768px){
  .wrapper{ padding:40px 18px 72px; }
  /*.grid{ grid-template-columns:1fr; gap:28px; }
  .grid.reverse{ grid-template-columns:1fr; gap:28px; }*/
  .photo-block{ width:100%; margin:32px 0; }
  .band{ padding:24px; /*border-radius:14px;*/ }
	.photo-block.right:before, .photo-block.left:before{
		display: none;
	}
}
  /* スマホレイアウト */
@media (max-width: 900px) {
  .grid, .grid.reverse {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  /* 両方とも「画像 → テキスト」に並ぶよう順番指定 */
  .grid .photo-block,
  .grid.reverse .photo-block {
    order: 1;
  }
  .grid .stack,
  .grid.reverse .stack {
    order: 2;
  }

  .photo-block {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto;             /* センター */
    align-self: stretch;         /* flexのとき親幅いっぱいに */
    padding: 0;
  }
	
  .photo-block img{
    display: block;
    width: 100% !important;     /* max-width:100% だと“縮むだけ”なので、幅固定 */
    max-width: none !important;  /* 既存の max-width を無効化 */
    height: auto !important;
  }

  /* キャプションは改行で落ちるので余白だけ整える */
  .photo-block figcaption{
    margin-top: 8px;
  }	
}	
	


/* lead
--------------------------------------------------------- */
.concept {
  overflow-x: hidden;
  margin:160px 0;
  /*max-width: 1300px;*/
}
.concept img {
  border-radius: 0px;
}
.concept p {
  line-height: 2;
  margin-bottom: 40px;
  text-align: justify;
  font-size: 16px;
}
.content-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.content-top .img-left {
  max-width: 380px;
  margin-top: 180px;
}
.content-top .text {
  max-width: 300px;
  margin: 90px 20px 0;
}
.content-top .img-right {
  max-width: 470px;
}
.content-middle {
  max-width: 830px;
  width: 70vw;
  margin: -40px -80px 0 auto;
}
.content-bottom {
  display: flex;
  margin-top: -40px;
}
.content-bottom .img-left {
  max-width: 220px;
}
.content-bottom .img-right {
  max-width: 280px;
  margin: 250px 80px 0;
}
.content-bottom .text {
  max-width: 460px;
  margin-top: 380px;
  padding: 10px;
}

/* 反転レイアウト */
.concept.reverse .content-top{
  flex-direction: row-reverse;
}

.concept.reverse .text{
  order: 3;   /* 写真 → 見出し → テキスト の並びに調整もできる */
}

.concept.reverse .area_okazaki{
  order: 2;
}

.concept.reverse .img-left,
.concept.reverse .img-right{
  order: 1; /* 画像を先頭にまとめる */
}


/* photos
--------------------------------------------------------- */
#photos {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 0 0;
  /*background-color: #D4CFC9;*/
  /*width: 100vw;*/
  /*margin: 0 calc(50% - 50vw)*/
}
#photos p {
  text-align: center;
  margin-bottom: 35px;
}
.photos_box{
width: 94%;
margin: 0 3%;
}
.photo_txt{
font-size: 1.65rem;
}
#photos .fadein {
  width: 90%;
  margin: 0 auto;
}
.fancybox_area {
  column-count: 6;
  column-gap: 10px;
}
.fancybox_area li a {
  display: inline-block;
  margin: 5px 0 0;
  position: relative;
}
.fancybox_area li a::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  font-family: 'Material Icons';
  content: '\e8b6';
  font-size: 3rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  opacity: 0;
  transition: all .5s ease;
}
.fancybox_area li a:hover::before {
  opacity: 1;
}
.fancybox_area img {
  width: 100% !important;
  height: auto !important;
  vertical-align: bottom;
}

photos ul{
	list-style: none;
}

ul#photo{
	padding-left: 0;
}


li.flipLeftTrigger{
	list-style: none;
}

#photo_gallery p.txt{
	text-align: center;
}

@media (max-width: 767px) {
  #photos {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0 0 0;
  }
  #photos p {
    width: 80%;
    margin: 0 auto 35px;
    text-align: start;
  }
  .fancybox_area {
    column-count: 3;
    width: 95%;
    margin: 0 auto;
  }
}

/* deg360
--------------------------------------------------------- */
section#deg360 {
	width: 100%;
	/*background-color: #D4CFC9;*/
	padding-block-start:100px;
	/*color: #707070;*/
	/*width: 100vw;*/
	/*margin: 0 calc(50% - 50vw)*/
}
section#deg360 .innerWrap{
	padding-block-end:100px;
}
section#deg360 p {
	text-align: center;
	margin-block-end: 20px;
	font-size: 16px;
	letter-spacing: 0.05rem;
	line-height: 1.8;
}
section#deg360 .camera_box {
	max-width: 1080px;
	margin-inline-start: auto;
	margin-inline-end: auto;
}
section#deg360 p {
	text-align: center;
	margin-block-end: 20px;
	/*font-size: 1.6rem;*/
}

section#deg360 p.des{
	text-align: justify;
}


/* details　物件概要
---------------------------------------------------------------*/
section#details {
padding-block-start:100px;
}
dl {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	border-top: none;
}
dt {
	width: 18%;
	padding: 14px 8px 8px 8px;
	box-sizing: border-box;
	border-block-end: 1px solid #5e5e5e;
	font-weight: 600;
	font-family: "KokuMincho", serif;
}
dd {
	padding: 14px 8px 8px 8px;
	margin: 0;
	border-block-end: 1px solid #5e5e5e;
	width: 82%;
	box-sizing: border-box;
	font-family: "KokuMincho", serif;
}
.producer:after {
	content: "\0bb";
}


@media screen and (max-width: 767px) {
	/* photo */
	section#photo_list {
		margin-inline-start: 3%;
	}
	section#photo_list div {
		padding: 3px 6px;
		width: 32%;
	}
	section#photo_list div:not(:nth-child(3n+3)) {
		margin-block-end: 1%;
	}
	/* deg360 */
	section#deg360 {
		width: 100%;
		margin: 0 auto;
	}
	section#deg360 .camera_box iframe {
		height: 440px;
	}
	/* details */
	section#details dt, dd {
		display: block;
		width: 100%;
		border: none;
	}
	dt {
		background-color: rgba(90, 42, 110, 0.18);
	}
}

.banner{
	display: flex;
	align-items: center;
	flex-direction: column;
}

.banner img{
	width: 100%;
	max-width: 500px;
	height: auto;
}


#inquiry{
    display: flex;
    justify-content: center;
    /* width: 300px; */
    margin: 100px auto;
}

/* pagetop */
.pagetop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: none;
	z-index: 150;
	cursor: pointer;
}

/* fadeIn */
.fadeIn{
animation-name: fadeInAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
animation-timing-function: ease-out; /* ← ふわっと感UP */
animation-delay: .1s;  
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.openhouse{
	font-size: 25px;
	text-align: center
}

@media (max-width:768px){
	.openhouse{
		font-size: 20px;
	}
}

.open_txt{
	text-align: center;
}


/*--------------------------
  Floating Buttons Group
----------------------------*/
.floatingButtonGroup {
  position: fixed;
  bottom: 5%;
  right: 2%;
  display: flex;
  flex-direction: column;
  gap: 12px; /* ボタンの間隔 */
  z-index: 1000;
}

/*--------------------------
  Floating Button Base
----------------------------*/
.floatingButton {
  background-color: #5a2a6e;
  /*border-radius: 50%;*/
  text-align: center;
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

.floatingButton.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.floatingButton:hover {
  opacity: 0.8;
}

.floatingButton a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  color: #fff;
  text-decoration: none;
}

.floatingButton a span {
  font-size: 3rem;
  line-height: 1;
}

.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

/*--------------------------
  Responsive
----------------------------*/
@media (max-width: 767px) {
  .floatingButton a {
    width: 48px;
    height: 48px;
  }
  .floatingButton a span {
    font-size: 1.8rem;
  }
  .floatingButtonGroup {
    gap: 8px;
    bottom: 4%;
    right: 3%;
  }
}


@media (max-width:900px){
  .photo-block{ width:100%; }
}


/* PCでは何もしない */
.sp {
    display: inline;
}

/* SPだけ改行（768px以下など任意で変更OK） */
@media (max-width: 768px) {
    .sp {
        display: block; /* ← 改行になる */
    }
}