@charset "utf-8";
/*
Theme Name: dev-2026
Theme URI: https://ogi-ya.co.jp/development/
Description: 大木開発-音羽長沢分譲地 用テーマ
Author: imaismix
Version: 1.0
Tags: white
*/

:root{
	--theme-color: #a38324;
	--theme-light-color: #d6cfbc;
	--normal-color: #333;
	--dark-color: #111;
	--light-color: #f8f8f8;
}

section{
	margin: 0;
	padding: 3em 0;
	width: 100%;
}
section .section-inner{
	margin: 0;
	max-width: 1000px;
}
section h3{
	margin-bottom: 1em;
	text-align: center;
	line-height: 1.5em;
	font-size: 2em;
}

#Nagasawa-Pict{
	padding: 0;

	div.image{
		position: relative;
		display: block;
		margin: 0 auto;
		width: 100vw;
		max-width: 1000px;
		height: 65vw;
		max-height: 650px;
		overflow: hidden;


		img.logo{
			position: absolute;
			top: 0;
			left: 0;
			width: 80vw;
			max-width: 700px;
			z-index: 10;
		}
	}

	p{
		margin: 0 auto;
		text-align: right;
		font-size: 0.9em;
	}
}

#Nagasawa-Copy{
	text-align: center;

	p{
		word-break: keep-all;
		overflow-wrap: break-word;
	}
	p.large{
		line-height: 1.5em;
		font-size: 1.5em;
	}
	p.small{
		line-height: 1.2em;
		font-size: 1em;
	}
}

#Nagasawa-Spec{
	background-color: var(--theme-light-color);

	table{
		margin: 0 auto 1em;
		width: 100%;
		border-spacing: 0;
		line-height: 2em;
	}
	table th{
		font-size: 1.1em;
	}
	table td{
		font-size: 1.2em;
	}
	table th,
	table td{
		padding: 0.5em 0.5em;
		border-top: solid 2px var(--normal-color);
	}
	table tr:last-child th,
	table tr:last-child td{
		border-bottom: solid 2px var(--normal-color);
	}

	img{
		width: 100%;
	}
}

#Nagasawa-Plot{
	p{
		text-align: center;
	}
}

div.plot{
	position: relative;
	width: 100%;
	container-type: inline-size;
}
div.plot img{
	width: 100%;
}
.plot-item{
	position: absolute;
}
.plot-item a{
	display: block;
	width: 3.2em;
	height: 1em;
	font-size: 1.7cqw;
	line-height: 1em;
}
.plot-item.sold span{
	background-color: red;
	color: white;
}
.plot-item.progress span{
	background-color: orange;
	color: black;
}

.popup{
	width: min(90vw, 360px);
	height: auto;
}
.popup > .close-button{
	color: var(--light-color);
	text-decoration: none;
}
#Popup-Content h4{
	margin: 0;
	padding: 1em;
	text-align: center;
	line-height: 1.5em;
	font-size: 2em;
	font-weight: bold;
	background-color: var(--theme-color);
	color: var(--light-color);
}
#Content{
	margin: 1em auto;
	text-align: center;
	line-height: 1.5em;
	font-size: 2em;
}


/* 画面幅による切り替え */
@media screen and (min-width: 769px){
	section{
		padding: 5em 0;
	}
	section .section-inner{
		margin: 0 auto;
	}

	#Nagasawa-Pict{
		div.image{
			img.logo{
				width: 60vw;
			}
		}
	}
	#Nagasawa-Copy{
		p.large{
			line-height: 2em;
			font-size: 2em;
		}
		p.small{
			line-height: 1.3em;
			font-size: 1.3em;
		}
	}

	#Nagasawa-Spec{
		table th{
			font-size: 1.5em;
		}
		table td{
			font-size: 2em;
		}
		table th,
		table td{
			padding: 0.5em 2em;
		}
	}
}

/* フェーダ */
#Nagasawa-Fader{
    position: relative;
}
#Nagasawa-Fader img{
    position: absolute;
	width: 100%;
    opacity: 0;
    animation: fader-anime 25s infinite;
}

/* 画像枚数分用意する */
#Nagasawa-Fader img:nth-of-type(1){
    animation-delay: 0s;
}
#Nagasawa-Fader img:nth-of-type(2){
    animation-delay: 5s;
}
#Nagasawa-Fader img:nth-of-type(3){
    animation-delay: 10s;
}
#Nagasawa-Fader img:nth-of-type(4){
    animation-delay: 15s;
}
#Nagasawa-Fader img:nth-of-type(5){
    animation-delay: 20s;
}

/* アニメーションの進行 */
@keyframes fader-anime{
    0%{
        opacity: 0;
    }
    10%{
        opacity: 1;
        z-index: 5;
    }
    20%{
        opacity: 1;
    }
    /**
    * 画像が5枚のため1枚当たり20%
    * 1枚目->2枚目(20%・不透明から50%・透明)にフェードして切り替える
    * 50%到達(全体アニメーション時間の半分)で前の画像が見えなくなる
    */
    50%{
        opacity: 0;
        z-index: 1;
    }
    100%{
        opacity: 0;
    }
}