@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/
.pearl #p_slider {
	width: 100%;
	height: 50vh;
	}

/*========= レイアウトのためのCSS ===============*/
.pearl{
	font-family: "Sawarabi Mincho", serif;
	font-weight: 400;
	font-style: normal;
	color:#77261b;
	font-size:16px;
	}
.pearl a{
	color: #fff;
	}

.pearl a:hover,
.pearl a:active{
	text-decoration: none;
	}


/*----slider_title----*/
.pearl .p_wrapper{
	position: relative;
	}

.pearl .title{
	background-color: rgba(112,74,45,0.7);
	padding:1.5rem 0 2rem;
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width:60%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 2rem;
	line-height:2rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	}

.pearl .title .stone_en{
	display:block;
	width:70%;
	margin:1rem auto;
	font-size:5rem;
	line-height:6rem;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	}
	
.pearl .title .title_en{
	margin:1rem auto;
	font-size:1.2rem;
	line-height:1.2rem
	}
	

/*----contents1----*/

.pearl #contents1 {
	width:100%;
	margin:0 auto;
	padding:2rem 0;
	background-image:url(https://www.rodeodrive.co.jp/cpage/fe/fe24_pearl/img/bg_con1.jpg);
	background-size:100%;
	background-position:center;
	}
.pearl #contents1 h2{
	background-image:url(https://www.rodeodrive.co.jp/cpage/fe/fe24_pearl/img/wrap_con1_top.png);
	background-size:100%;
	background-position:bottom;
	background-repeat:no-repeat;
	height:20rem;
	width:100%;
	text-align:center;
	position:relative;
}	
.pearl #contents1 h2 img{
	width:55%;
	position:absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	}
.pearl #contents1 img{
	width:100%;
	}
	
.pearl #contents1 .contents{
	background-image:url(https://www.rodeodrive.co.jp/cpage/fe/fe24_pearl/img/wrap_con1_mdl.png);
	background-repeat:repeat-y;
	background-size:100%;
	font-size:16px;
	text-align: center;
	display: block;
	}

.pearl .conttl_en {
	display: flex;
	align-items: center;
	color:#77261b;
	font-size:2rem;
	line-height:2rem;
	width:55%;
	margin:auto;
	padding-top:2rem;
	font-family: "Playball", cursive;
	font-weight: 400;
	font-style: normal;
	}
	
.pearl .conttl_en:before,
.pearl .conttl_en:after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #77261b;
	}

.pearl .conttl_en:before {
	margin-right: 1rem;
	}

.pearl .conttl_en:after {
	margin-left: 1rem;
	}

.pearl #contents1 .text{
	text-align: left;
	display: inline-block;
    margin-top:.5rem;
	width:55%;
	margin-bottom:1rem;
	}

/*----contents2----*/

.pearl #contents2 {
	width:100%;
	margin:0 auto;
	background-image:url(https://www.rodeodrive.co.jp/cpage/fe/fe24_pearl/img/img_topbnr2.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	}
.pearl #contents2 .contents{
	background-color: rgba(255,255,255,0.8);
	padding:2rem;
	width:85%;
	margin:0 auto;
	font-size:16px;
}
.pearl #contents2 h2 ,.pearl #contents3 h2{
	margin-bottom:3rem;
	width:100%;
	text-align:center;
	}		
.pearl #contents2 .contents ul,.pearl #contents3 ul{
	display:flex;
	}
.pearl #contents2 .contents ul li,.pearl #contents3 ul li{
	margin-bottom:2rem;
	}
.pearl #contents2 .contents ul .img ,.pearl #contents3 ul .img{
	width:40%;
	}
.pearl #contents2 .contents ul .img img ,.pearl #contents3 ul .img img{
	width:auto;
	height: 100%;
	object-fit: cover;
	}
.pearl #contents2 .contents ul .tex  ,.pearl #contents3 ul .tex{
	width:60%;
	text-align:center;
	}
.pearl #contents2 .contents ul .tex h3 {
	font-family: "Playball", cursive;
	font-weight: 400;
	font-style: normal;
	color: #77261b;
	font-size:2rem;
	}
.pearl #contents2 .contents ul .tex p  ,.pearl #contents3 ul .tex p{
	text-align:left;
	width:90%;
	margin:0 auto;
	}
.pearl a{
	background-color: #77261b;
	display:block;
	width:80%;
	margin:1rem auto 0;
	padding:.5rem;
	}
.pearl a:hover{
	opacity:1;
	background-color: #ad4334;
	}


/*----contents3----*/

.pearl #contents3 {
	width:100%;
	background-image:url(https://www.rodeodrive.co.jp/cpage/fe/fe24_pearl/img/bg_con3.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	}
.pearl #contents3 .contents{
	padding:2rem;
	width:85%;
	margin:0 auto;
	font-size:16px;
}


/*----contents4----*/

.pearl #contents4 {
	width:100%;
	}
.pearl #contents4 .contents{
	padding:2rem;
	width:85%;
	margin:0 auto;
	text-align:center;
	}
.pearl #contents4 .contents ul{
	display:flex;
	margin:0 auto;
	}
.pearl #contents4 .contents ul li{
	width:50%;
	}
.pearl #contents4 .contents ul li a{
	width:95%;
	}