/*ポップアップ*/
.overlay {
display: none;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
position: fixed;
z-index: 10000
}
.btn_area {
width: 400px;
height: 250px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
text-align: center;
z-index: 10001
}
.btn_area .ttl {
font-weight: bold
}
.btn_area p {
padding: 15px
}
.btn_area button {
display: block;
margin: 0 auto;
background: #333;
color: #fff;
padding: 20px 40px;
border: none
}
.btn_area button:hover {
background: #777
}


/*背景部分*/
#front-page-background{
	width:100%;
	min-height:100vh;
	background-image:url("http://prive-room.com/wp-content/uploads/2024/12/背景3.png");
	background-size: cover;	
	z-index:-2;
	position:fixed;
}
#front-page-background-left{
	width:150px;
	min-height:100vh;
	z-index:-1;
	background-color:#fdeff2;
	position:fixed;
	color:#B0E1E4;
}
#front-page-background-left > h2{
	margin:0;
	font-size:80px;
	font-family:"Comic Sans MS",cursive;
	writing-mode: vertical-rl;
	position:absolute;
	top:200px;
	left:20px;
} 

/*TOP部分*/
#front-page-top-section{
	width:calc(100% - 150px);
	height:calc(100vh - 200px);	
	padding-left:150px;
	padding-top:200px;
	position:relative;
	overflow-x:hidden;
}

#front-page-campany{
	width:calc(100% / 2);
	position:absolute;
	left:230px;
	top:300px;
}
#front-page-campany > span{
	font-size:1.5em;
	font-family:cursive;
}
#front-page-campany > img{
	width:90%;
	object-fit:contain;
}

#front-page-right-box{
	width:60%;
	height:60%;
	position:absolute;
	left:50%;
	top:240px;
	border-radius: 25% 10%;
	background-color:#FAFFFF;
	
}
.slideshow-fade{
	position: relative;
	height:calc(100% - 20px);
	padding:10px;
}
.slideshow-fade li{
	width: 100%;
	height: 100%;
	overflow:hidden;
}
.slideshow-fade img{
	height: 100%;
	object-fit:contain;
	position: absolute;
	left: 30%;
	top: 10px;	
}

/*VISION部分*/
#front-page-vision{
	width:calc(100% - 150px);
	padding-top:100px;
	padding-left:150px;
	min-height:calc(100vh - 100px);
	position:relative;
	overflow-x:hidden;
}
#front-page-vision>h2{
	width:calc(100% - 150px);
	color:#A5878B;
	padding-left:30px;
	font-size:3.5em;
	font-family:"Century",serif;
	position:absolute;
	top:50%;
	text-align:center;
	margin:0 auto;
}
#front-page-vision>span{
	width:calc(100% - 150px);
	margin:0 auto;
	text-align:center;
	font-size:1.2em;
	font-family:"Century",serif;
}
.vision-first{
	position:absolute;
	top:30%;
}
.vision-second{
	position:absolute;
	bottom:20%;
}

/*ABOUT部分*/
#front-page-about{
	padding-top:100px;
	padding-left:150px;
	min-height:calc(100vh - 100px);
}
#front-page-about>h2{
	color:#A5878B;
	padding-left:30px;
}
#front-page-about>span{
	padding-left:70px;
}

/*SERVICE部分*/
#front-page-service{
	width:calc(100% - 150px);
	padding-top:100px;
	padding-left:150px;
	min-height:calc(100vh - 100px);
	position:relative;
	overflow-x:hidden;
}

#front-page-service-image{
	width:35%;
	height:100%;
	max-height:calc(100vh - 200px);
	position:absolute;
	right:10%;
}
#front-page-service-image img{
	width:100%;
	height:100%;
	object-fit: contain;
}
#front-page-service-contents{
	width:35%;
	height:100%;
	max-height:min(calc(100vh - 200px),550px);
	position:absolute;
	left:180px;
	background-color:#ffffff45;
	box-shadow:2px 2px 4px;
	
}

#front-page-service-contents>h2{
	padding-top:1em;
	margin:0 auto;
	color:#A5878B;
	font-size:2.0em;
	font-family:"Century",serif;
	text-align:center;
}
#front-page-service-contents>p{
	width:80%;
	padding-top:1em;
	margin:0 auto;
	font-size:1.2em;
	font-family:"Century",serif;
	overflow-wrap:anywhere;
}

.front-page-service-contents-sub{
	font-size:1em !important;
}

.front-page-service-contents-btn{
	width:80%;
	height:150px;
	margin:0 !important;
	padding-top:10px !important;
}

.front-page-service-contents-btn a{
	width:100%;
	height:100%;
}

.front-page-service-contents-btn img{
	max-width:100%;
	height:100%;
	object-fit:contain;
	padding-left:2em;
}


/*CAST部分*/
#front-page-cast{
	padding-top:100px;
	padding-left:180px;
	padding-bottom:1em;
	min-height:calc(100vh - 100px);
}
#front-page-cast h2{
	font-family:"Century",serif;
}

/*BOOKING部分*/
#front-page-booking{
	padding-top:100px;
	padding-left:180px;
	padding-bottom:1em;
	min-height:calc(100vh - 100px);
}
#front-page-booking h2{
	font-family:"Century",serif;
}

/*MEMBER*/
#front-page-member{
	padding-top:100px;
	padding-left:180px;
	padding-bottom:1em;
	min-height:calc(100vh - 100px);
}
#front-page-member h2{
	font-family:"Century",serif;
}

/*NEWS部分*/
#front-page-news{
	padding-top:100px;
	padding-left:180px;
	min-height:calc(100vh - 100px);
	position:relative;
}
#front-page-news-box{
	width:70%;
	height:calc(100vh - 200px);
	display:flex;
	position:absolute;
	top:150px;
	left:150px;
	background-image:url("http://prive-room.com/wp-content/uploads/2024/12/news背景2.png");
	background-size: cover;	
	box-shadow: 2px 2px 4px;
	padding:0.5em 1em;
	overflow:hidden;
}
#front-page-news-box h2{
	font-size:2em;
	height:100%;
	padding:0.5em;
	padding-top:1.5em;
	margin:0;
	font-family:"Comic Sans MS",cursive;
	writing-mode: vertical-rl;
	border-right:2px dotted #fff;
	
}
#front-page-news-box ul{
	padding:1em;
}
#front-page-news-box li{
	padding:0.5em;
	font-size:1.5em;
	font-family:"Century",serif;
}

#front-page-news-box a{
	color:#000;
}

/*SUMMARY部分*/
#front-page-summary{
	padding-top:100px;
	padding-left:180px;
	padding-bottom:1em;
	min-height:calc(100vh - 100px);
}
#front-page-summary h2{
	font-family:"Century",serif;
}

/*FORM部分*/
#front-page-inquiry{
	padding-top:100px;
	padding-left:180px;
	padding-bottom:2em;
	min-height:calc(100vh - 100px);
}
#front-page-inquiry h2{
	font-family:"Century",serif;
}

/* フォーム全体のスタイル */
.wpcf7 {
background-color: #f0f0f0; /* ライトグレー */
padding: 20px;
border-radius: 10px;
max-width: 600px;
margin: auto;
}
/* ラベルのスタイル */
.wpcf7-form label {
display: block;
margin-bottom: 10px;
font-size: 16px;
color: #333333; /* ダークグレー */
}
/* 必須フィールドのラベルスタイル */
.wpcf7-form .required {
background-color: #ff0000; /* レッド */
color: white;
padding: 2px 5px;
border-radius: 3px;
margin-left: 10px;
font-size: 12px;
}
/* インプットフィールドのスタイル */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"]
{
	width: 100%;
}
.wpcf7-form textarea {
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #cccccc; /* ライトグレー */
border-radius: 5px;
font-size: 16px;
background-color: #ffffff; /* 白 */
}
/* テキストエリアのスタイル */
.wpcf7-form textarea {
height: 150px;
resize: vertical;
}
/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
background-color: #007BFF; /* ブルー */
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
border: none;
}
.wpcf7-form input[type="submit"]:hover {
background-color: #0056b3; /* 濃いブルー */
}
/* エラーメッセージと成功メッセージのスタイル */
.wpcf7-form .wpcf7-not-valid-tip {
color: red;
font-size: 14px;
}
.wpcf7-form .wpcf7-mail-sent-ok {
color: green;
font-size: 16px;
margin-bottom: 20px;
}

/*----------------------------*/
/* cast list */
.list-items{
	width:250px;
	padding:0.5em;
	padding-bottom:0;
	margin:1em;
	border:4px double #000;
	background-color:#FAFFFF;
	color:#000;
}

.list-items-image{
	height:250px !important;
	margin-bottom:10px;
}

.list-items-text{
	text-align:center;
	margin:0 auto;
	font-size:1.5em;
	font-family:"游明朝","ヒラギノ明朝 ProN（Pro）",serif;
}

/* member list */
.member_list-items{
	width:400px;
	padding:0.5em;
	padding-bottom:0;
	margin:1em;
	border:4px double #000;
	background-color:#FAFFFF;
}

.member_list-items-image{
	height:400px !important;
	margin-bottom:10px;
}

.member_list-items-text{
	text-align:center;
	margin:0 auto;
	font-size:1.5em;
	font-family:"游明朝","ヒラギノ明朝 ProN（Pro）",serif;
}

/* sp style */
@media screen and (max-width:720px) { 
	#front-page-background-left{
		display:none;
	}
	#front-page-background{
		height:150vh;
	}
	#front-page-top-section,
	#front-page-service,
	#front-page-cast,
	#front-page-booking,
	#front-page-news,
	#front-page-inquiry{
		width:100%;
		height:auto;	
		padding-left:0;
		padding-top:0;
	}
	
	#front-page-top-section{
		padding-top:5em;
	}
	
	#front-page-cast ul,
	#front-page-booking ul{
		justify-content: space-around !important;
	}
	
	#front-page-inquiry input{
		width:90%;
		max-width:90%;
	}

	#front-page-campany{
		width:95%;
		position:relative;
		left:auto;
		top:auto;
	}
	
	#front-page-service-contents{
		width:95%;
		max-height:calc(100vh - 200px);
		left:auto;
		top:auto;
		margin:0 auto;
	}
	#front-page-service-image{
		display:none;
	}
	
	#front-page-right-box{
		display:none;
	}
	#front-page-news-box{
		width:auto;
		top:auto;
		left:auto;
	}
	
	.header-list{
		display:none;
	}
	
}