@charset "utf-8";

body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	overflow-x: hidden;
}
/*---------------------------------------------------------------------------
CMS用に追加
---------------------------------------------------------------------------*/


/*NEW,UPマークなどのアイコン
---------------------------------------------------------------------------*/
/*NEW,UPoption1-icon,option2-icon共通*/
.newicon, .upicon, .option1-icon, .option2-icon {
	display: inline-block;
	padding: 0.3rem 0.5rem;	/*上下、左右への余白*/
	border-radius: 3px;		/*角を少しだけ丸くする指定*/
	font-size: 0.7rem;		/*文字サイズを70%に*/
	line-height: 1;			/*行間*/
	margin-right: 2px;		/*右側に空けるスペース。アイコンが並んだ場合の隙間になります。*/
}

/*newiconへの追加指定。*/
.newicon {
	background: #f00;
	color: #fff;
}

/*upiconへの追加指定。*/
.upicon {
	background: #257dce;
	color: #fff;
}

/*option1-iconへの追加指定。*/
.option1-icon {
	background: #fff;
	color: #777;
	border-radius: 3px;
	border: 1px solid #999;
}

/*option2-iconへの追加指定。*/
.option2-icon {
	background: #ccc;
	color: #555;
}


/*option帯
---------------------------------------------------------------------------*/
/*option1,option2 共通*/
.option1, .option2 {
	font-size: 0.7rem;	/*文字サイズを70%に*/
	display: inline-block;
	width: 200px;		/*幅*/
	text-align: center;	/*テキストをセンタリング*/
	position: absolute;	/*絶対配置する指定*/
	top: 0px;	/*上からの配置場所。*/
	left: 0px;	/*左からの配置場所。*/
	transform: translate(-60px, 20px) rotate(-30deg);	/*translateは移動する距離(X軸, Y軸)でrotateは回転*/
	box-shadow: 0px 3px 2px rgba(0,0,0,0.2);	/*影*/
}

/*h2タグ内で使った場合のoption1,option2 共通*/
h2 .option1, h2 .option2 {
	width: auto;box-shadow: none;
	position: relative;
	transform: translate(0px, -4px) rotate(0deg);
	padding: 5px 5px;
	margin-left: 5px;
	border-radius: 3px;
}

/*option1への追加指定。*/
.option1 {
	background: #ff0000;
	color: #fff;
}

/*option2への追加指定。*/
.option2 {
	background: #ccc;
	color: #777;
}


/*gridタイプのボックス
---------------------------------------------------------------------------*/
	/*画面幅400px以上の追加指定*/
	@media screen and (min-width:500px) {
	/*listブロック全体を囲むブロック*/
	.list-grid {
		display: grid;	/*gridを使う指定*/
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。４列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*マージン的な指定。２文字分。*/
	}

		/*画面幅400px以上の追加指定*/
	@media screen and (min-width:500px) {
	/*listブロック全体を囲むブロック*/
	.list-blog {
		display: grid;	/*gridを使う指定*/
		grid-template-columns: repeat(5, 3fr);	/*2列にする指定。４列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*マージン的な指定。２文字分。*/
	}

	/*ボックス１個あたり*/
	.list-grid .list img {
		margin-bottom: 0;	/*ボックス同士の上下間に空けるスペースをリセット*/
		width: 100%;
		justify-content: center;
	}
	}/*追加指定ここまで*/


/*2カラムの中にある.main-contents要素
---------------------------------------------------------------------------*/
.column {
	padding: 0 2rem;
}
.column .main-contents {
	margin-bottom: 2rem;		/*ボックスの下に空けるスペース。subとの間の余白です。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	/*カラムで使う為の指定*/
	.column {
		display: flex;					/*flexを使う指定*/
		justify-content: space-between;	/*並びかたの種類の指定*/
		gap: 2rem;
	}
	
	/*2カラムの中にある.main-contents要素*/
	.column .main-contents {
		margin-bottom: 0;
		flex: 1;
	}
	
	/*2カラムの中にある.sub-contents要素*/
	.column .sub-contents {
		flex-shrink: 1;
		width: 230px;	/*幅*/
	}

	}/*追加指定ここまで*/


/*sub,sideブロック設定
---------------------------------------------------------------------------*/
#contents .sub-contents h3::before, #contents .side h3::before {border: none;padding: 0;}
/*ブロック内のh3タグ*/
#contents .sub-contents h3, #contents .side h3 {
	margin: 0;border: none;border-radius: 0;
	font-weight: normal;
	padding: 5px;		/*余白*/
	background-color: var(--primary-color);	/*css冒頭で指定しているprimary-colorを読み込みます*/
	color: #4e4e4e;		/*文字色*/
	text-align: center;	/*内容をセンタリング*/
}
#contents .sub-contents h3 a, #contents .side h3 a {color: inherit;}


/*サブメニュー設定
---------------------------------------------------------------------------*/
/*サブメニューブロック全体*/
.submenu {
	padding: 0;
	margin: 0 0 0.2rem;	/*上、左右、下へのマージン*/
	
}

/*メニュー１個あたり*/
.submenu li {
	
	border-bottom: 1px solid rgba(0,0,0,0.2);	/*下線の幅、線種、色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	list-style: none;
	margin: 0 0 0.2rem;
	
}
.submenu a {
	display: block;text-decoration: none;
	padding: 0.2rem 1rem;	/*上下、左右へのメニュー内の余白*/
	
}

/*アイコン（Font Awesome）*/
.submenu a::before {
	transition: 0.3s;
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f0da";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #ABABAB;			/*アイコンの色*/
	padding-right: 0.8em;	/*アイコンとテキストの間の余白*/
	font-weight: bold;		/*この設定がないとアイコンが出ない場合があります*/
	
}

/*マウスオン時のアイコン設定*/
.submenu a:hover::before {
	color: #666;			/*アイコンの色*/
}


/*box1設定（このテンプレートでは、2カラム時のsubブロックでのみ使用しています）
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
.box1 {
	background: #fff;		/*背景色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	padding: 20px 10px;			/*ボックス内の余白*/
	border-radius: 5px;		/*角を丸くする指定*/
	margin-bottom: 1rem;	/*ボックスの下に空けるスペース*/
}

/*box1内で使った場合、下のマージンをなくす*/
.box1 .submenu {
	margin-bottom: 0;
}


/*subブロック
---------------------------------------------------------------------------*/
#contents .sub-contents .list h4 {
	margin: 0;
}
#contents .sub-contents .list p {
	line-height: 1.5;
	font-size: 0.8rem;
	margin: 0;
}


/*ページャー
---------------------------------------------------------------------------*/
/*ブロック全体*/
.pager {
	margin-top: 3rem;		/*上に空けるスペース*/
	margin-bottom: 3rem;	/*下に空けるスペース*/
	text-align: center;		/*テキストをセンタリング*/
	color: #999;			/*文字色*/
}

/*ボタン一個あたり*/
.pager a {
	display: inline-block;text-decoration: none;
	margin-bottom: 5px;		/*下に空けるスペース。ボタンが２段になった場合用。*/
	padding: rem 1rem;	/*ボタン内の余白。上下、左右への順番。*/
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	background: #fff;		/*背景色*/
	color: #555;			/*文字色*/
}

/*マウスオン時*/
.pager a:hover {
	background: #fff;	/*背景色*/
	color: #999;		/*文字色*/
	border: 1px solid #333;	/*枠線の幅、線種、色*/
}

/*リンクのないボタン*/
.pager span {
	display: inline-block;
	margin-bottom: 5px;		/*下に空けるスペース。ボタンが２段になった場合用。*/
	padding: 0.5rem 1rem;	/*ボタン内の余白。上下、左右への順番。*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	background: rgba(0,0,0,0.1);	/*背景色。0,0,0は黒、0.1は色が10%出た状態*/
}


/*list
---------------------------------------------------------------------------*/
.list {
	position: relative;
	overflow: hidden;
}

.list.sumi figure img {
	opacity: 0.4;	/*ご契約済み、SOLDOUT系の画像の透明度を下げる。そのままの色にしたいならこの行削除。*/
}


/*詳細ページで使っている「ご契約済み」の大きなボタン
---------------------------------------------------------------------------*/
.sumi-btn {
	display: inline-block;
	font-size: 1.8rem;		/*文字サイズを1.8倍*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	background: #eee;		/*背景色*/
	color: #999;			/*文字色*/
	padding: 0 1.5rem;		/*上下、左右へのボタン内の余白*/
	border-radius: 5px;		/*角を少し丸くする*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}


/*サブコンテンツで使用する横長タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-normal-sub .list {
	display: flex;	/*flexボックスを使う指定*/
	padding: 0.3rem 0;	/*上下、左右へのボックス内の余白*/
}

.list-normal-sub .list div {
	flex: 1;
}

/*ボックス内のfigure画像*/
.list-normal-sub .list figure {
	width: 30%;				/*画像の幅*/
	margin-right: 0.5rem;	/*画像の右側に空けるスペース*/
}

/*ボックス内のh4タグ*/
.list-normal-sub .list h4 {
	margin: 0;				/*デフォルトマージンを一旦リセット*/
	line-height: 1;
}
.list-normal-sub .list h4 a  {
	color: inherit;
}

/*ボックス内のpタグ*/
.list-normal-sub .list p {
	margin: 0;
	font-size: 0.7em;		/*文字サイズを親要素の70%に。*/
}


/*list内のtableっぽく見える所
---------------------------------------------------------------------------*/
/*ボックス全体*/
dl.line2 {
	margin: 0;
	display: grid;		/*gridボックスを使う指定*/
	grid-template-columns: auto 1fr;	/*２列のうち、左は内容に応じて自動、残りを右側に割り当て*/
	font-size: 0.8em;	/*文字サイズを親要素の70%に。*/
	border-top: 1px solid #ccc;
}
.list-normal dl.line2 {
	grid-template-columns: repeat(2, auto 1fr);	/*上の「auto 1fr」を２回続ける。つまり「auto 1fr auto 1fr」と同じ意味。*/
}

dl.line2 dt, dl.line2 dd {
	border-bottom: 1px solid #ccc;	/*枠線の幅、線種、色*/
	padding: 0 0.5rem;				/*上、左右への余白*/
}
dl.line2 dt {
	background: #eee;	/*背景色*/
}


/*パノラマ画像
---------------------------------------------------------------------------*/
.ofx {overflow-x: hidden;}

.panorama-img {width: 600px !important;height: 400px !important;}

	/*画面幅600px以下の設定*/
	@media screen and (max-width:600px){
	
	.panorama-img {width: 450px !important;height: 300px !important;}
	
	}/*追加指定ここまで*/

/*btn2
---------------------------------------------------------------------------*/
.btn2 a {
	display: block;text-decoration: none;
	text-align: center;
	border-radius: 3px;
	padding: 1rem 2rem;
	background: var(--primary-color);	/*css冒頭で指定しているprimary-colorを読み込みます*/
}


/*ta1
---------------------------------------------------------------------------*/
.ta1 {
	table-layout: fixed;
}

/*「こだわり」向けの設定*/
.ta1 td .specialbox label {
	float: left;
	margin-right: 5px;
}
.ta1 td .specialbox img {
	vertical-align: middle;
}


/*その他
---------------------------------------------------------------------------*/
.mb10 {margin-bottom: 10px !important;}

#menubar nav ul {
	
	list-style: block;
	margin-left: 0px;
	padding: 0;
	display: flex;
	justify-content: center;
}

#menubar nav ul li {
	margin-right: 20px;
	justify-content: center;
}

#menubar nav ul li a {
	text-decoration: none;
	color: #ffffff;
	font-weight: bold;
	
}

.normal{
	font-weight: lighter;
}

.manga {
	margin: 200px 0 150px 0;
	padding:30px 150px 0 150px;
}

@media screen and (max-width: 768px) {
	.manga {
		margin: 60px 0 0 0;
			padding: 30px 30px;
	}
}

.main-content {
	display: inline-flex;
	margin: 0 0 5px 9vw;
	flex-direction: row; /* 横並びを維持 */
	width:20%; /* PCでは32%の幅にする */
	gap: 10px; /* 画像の間隔 */
}


.main-content1 {
	display: flex;
	margin: 0 40px 5px 0;
	flex-direction: row; /* 横並びを維持 */
	width: 100%; /* PCでは32%の幅にする */
	gap: 10px; /* 画像の間隔 */
	overflow-x: auto;
}

.gaiheki img{

	width: 100%; /* PCでは32%の幅にする */
	overflow-x: auto;
}

@media screen and (max-width: 768px) {
	.main-content {
		display: flex;
		flex-direction: row;
		overflow-x: auto; /* 横スクロールを有効にする */
		width: 70%;
		gap: 5px;
		margin: 0 auto;
		scroll-snap-type: x mandatory; /* スワイプを有効にする */
	}

	.main-content img {
		flex-shrink: 0; /* 画像が縮小されないようにする */
		width: 70%; /* 画像の幅を100%にしてスクロール可能にする */
		height: auto; 
		scroll-snap-align: start; /* 画像がスナップされる位置を指定 */
		object-fit: cover; /* 画像が枠いっぱいに表示されるように調整 */
	}
}

.plusone {
	max-width: 30%;
	margin: 0 auto ;
	text-align: center;
}

@media screen and (max-width: 768px) { /* スマホ用の調整 */
	.plusone {
			max-width: 30%; /* 50%に調整して画面いっぱいに広がらないように */
			margin: 0 auto 0;
	}
}

/* 画像の最大幅を制限 */
img {
	max-width: 100%; /* 親要素を超えて拡大しない */
	height: auto; /* 縦横比を維持 */

}
.box {
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.slidein {
	transition: 2s cubic-bezier(0.75, 0, 0.25, 1);
	opacity: 0;
}

.slidein:nth-child(1) {
	transition-delay: 0s;
}
.slidein:nth-child(2) {
	transition-delay: 0.3s;
}
.slidein:nth-child(3) {
	transition-delay: 0.5s;
}

.slide_left {
	opacity: 0;
	transform: translateY(-20px);
	transition: opacity 3s ease-out, transform 5s ease-out;
}


.slide_right {
	transform: translateX(calc(50vw + 50%));
}

.slide_bottom {
	transform: translateY(10px); /* 100px下から出現 */}

.slide_up {
		transform: translateY(-100px); /* 100px下から出現 */}

.show {
	transform: translateX(0) translateY(0);
	opacity: 1;
}

.title-fontsize{
	width: 100%;
	margin: 20px auto 0;
}

.back-ground {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: url('<?php echo get_theme_file_uri("/images/firstview-pc-08-20.png"); ?>') center center / cover no-repeat fixed;
	z-index: -1;
	pointer-events: none;
}

@media screen and (max-width: 768px) {
	.back-ground {
		background: url('<?php echo get_theme_file_uri("/images/firstview-sp-19-21.png"); ?>') center center / cover no-repeat fixed;
	}}


    /* 初期状態（透明 & 上にずらす） */
		header {
			opacity: 0;
			transform: translateY(-50px);
			transition: opacity 3s ease-out, transform 5s ease-out;
	}

	/* JavaScriptで追加するクラス */
	header.show {
			opacity: 1;
			transform: translateY(0);
			margin: 0 auto;
	}
	
	.box{
		background-color: #ffffff;
		margin-top: 0;
		
	}
	.back-groundskeleton{
		opacity: 0;
		width: 35%;
		height: 33vw;
	}

	@media screen and (max-width: 768px) { /* スマホ用の調整 */
		.back-groundskeleton {
				opacity: 0;
				max-width: 200%;
				height: 77vw;
		}
	}


	.main-word1{
		display: flex;
		margin: 0 auto;
		max-width: 100%;
		
	}
	.img-pc,
	.img-sp {
		display: none;
	}
	
	/* PC表示用（例：画面幅769px以上） */
	@media screen and (min-width: 769px) {
		.img-pc {
			display: block;
		}
	}
	
	/* スマホ表示用（例：768px以下） */
	@media screen and (max-width: 768px) {
		.img-sp {
			display: block;
		}
	}
	.main-word{
		display: flex;
		margin: 0 auto;
		max-width: 97%;
		}

		@media screen and (max-width: 768px) { /* スマホ用の調整 */
			.main-word1 {
				margin: 50px auto 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		@media screen and (max-width: 768px) { /* スマホ用の調整 */
			.main-word {
	display: flex;
  justify-content: center;
  align-items: center;
			}
		}

	.photo-contents-idealhome{
		margin: 0 auto;
		text-align: center;
		margin-top: 6%;
		margin-bottom: 2%;
		max-width: 90%;
		}

		@media screen and (max-width: 768px) { /* スマホ用の調整 */
			.photo-contents-idealhome {
				margin: 0 0 0 5vw;
				margin-top: 6%;
				margin-bottom: 2%;
				max-width: 90%;
			}
		}

	.photo-contents{
		margin: 0 auto;
		margin-top: 6%;
		margin-bottom: 2%;
		max-width: 80%;
		
	}

	.photo-contents-news{
		margin: 0 0 0 6.5vw;
		max-width: 70%;
		padding-right:0vw;
	}

	@media screen and (max-width: 1025px) { /* スマホ用の調整 */
		.photo-contents-news {
			margin: 0 0 0 10vw;
			max-width: 80%;
			padding-right:0vw;
		}
	}

	.box-washi{
		background-image:url('/wp-content/themes/tatemi-rehome/images/1409443-23.png');
		background-repeat: repeat-x;
		text-align: center;
		
	}

	.box-washi1 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 5vw;
		margin: 3vw auto;
		max-width: 90%;
	}
	
	.box-washi1 img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.box-washi2 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 5vw;
		margin: 3vw auto;
		max-width: 90%;
	}
	
	.box-washi2 img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}


	.box-washi3 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 5vw;
		margin: 3vw auto;
		max-width: 90%;
	}
	
	.box-washi3 img {
		width: 100%;
		max-width: 100%;
		height: auto;
		}
	
	.box-washi4{
		display: flex;
		margin: 3vw auto;
			max-width: 40%;
			padding-bottom: 3vw;
	}
	@media screen and (max-width: 768px) { /* スマホ用の調整 */
		.box-washi4 {
		  display: flex;
			margin: 3vw auto;
			max-width: 40%;
			padding-bottom: 3vw;
		}
	}
	.right-lineup{
		display: grid;	/*gridを使う指定*/
		grid-template-columns: repeat(3, 3fr);	/*３列にする指定。４列にしたければrepeat(4, 1fr)とする。*/
		gap: 0m;	/*マージン的な指定。２文字分。*/
	}
	@media screen and (max-width: 768px) { /* スマホ用の調整 */
		.right-lineup {
			display: grid;	/*gridを使う指定*/
		grid-template-columns: repeat(1, 1fr);	/*３列にする指定。４列にしたければrepeat(4, 1fr)とする。*/
		gap: 0m;	/*マージン的な指定。２文字分。*/
		}
	}

	.main-contents-word{
		font-size: 130%;
		text-align: center;
		margin-top: 10%;
		margin-bottom: 10%;
		letter-spacing: 0.3em;
		font-weight: 400;
		font-family:  Georgia, 'Times New Roman', Times, serif;
	}

	.font-color-blue{
		color: rgb(47, 66, 174);
	}

	.font-color-orenge{
		color: #FBB03B;
	}
	@media screen and (max-width: 768px) { /* スマホ用の調整 */
		h1 {width: 100%;
			font-size: 80%;
		}
	}

	.house{
		margin: 0 0;
		padding: 0 0;
	}
		@media screen and (max-width: 768px) { /* スマホ用の調整 */
		.house {
			margin: 0 0;
			padding: 0 0;
		}
	}

	.box1 h3 {
		background-color: #ddd;
		color: #333;
		padding: 7px;
		text-align: center;
		font-size: 1.2rem;
		font-weight: lighter;
		margin: 0;
		border-radius: 3px;
	}

/* テーブル全体 */
.ta1 {
	padding: 0 0vw 0 0;
	width: 80%; /* テーブルの幅を100%に設定 */
	margin: 10px auto;
	border-collapse: collapse; /* セルの境界を一つにまとめる */
}
@media screen and (max-width: 768px) { /* スマホ用の調整 */
	.ta1 {	margin: 2vw auto;
		width: 100%; /* テーブルの幅を100%に設定 */
		border-collapse: collapse; /* セルの境界を一つにまとめる */
	}
}
/* セル間の枠線と余白を設定 */
.ta1 th, .ta1 td {
	border: 1px solid #ccc; /* 枠線を設定 */
	padding: 10px 0 10px 10px; /* セル内に余白を追加 */
	text-align: left; /* テキストを左揃え */
}
 .ta1 td {
	border: 1px solid #ccc; /* 枠線を設定 */
	margin: 0 80vw 0 0 ;
	padding: 10px 0 10px 10px; /* セル内に余白を追加 */
	text-align: left; /* テキストを左揃え */
}

/* 左セルの幅を縮小 */
.ta1 td:nth-child(1), /* 左端のセル */
.ta1 th:nth-child(1) { /* ヘッダーの左端のセル */
	width:20%; /* 左セルの幅を縮小（例として20%に設定） */
}

/* その他のセルは均等に設定（必要に応じて） */
.ta1 td, .ta1 th {
	width: auto; /* 自動で残りの幅を埋めるようにする */
}

/* スマホ表示用のレスポンシブデザイン */
@media screen and (max-width: 768px) {
	.ta1 {
			width: 90%; /* モバイルでもテーブルの幅を100%に設定 */
			
	}
	.ta1 td:nth-child(1), /* 左端のセル */
.ta1 th:nth-child(1) { /* ヘッダーの左端のセル */
	width:25%; /* 左セルの幅を縮小（例として20%に設定） */
}
	.ta1 th, .ta1 td {
			border: 1px solid #ccc; /* 枠線を設定 */
			padding: 8px; /* モバイル向けにセル内の余白を少し調整 */
	}
}