@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Bellefair&family=Cinzel&display=swap');

/*=======================================
	base
=======================================*/



/*=======================================
	rarity_wrap
=======================================*/
/* page_title */
#rarity_wrap .page_title.rarity {
    background: url(../img/rarity/main.jpg) no-repeat center center;
    background-size: cover;
    padding: 0;
    height: 390px;
    position: relative;
    margin: 0;
}
#rarity_wrap .page_title.rarity h2 {
    color: #fff;
    position: absolute;
	width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    text-shadow: 4px 4px 9px #000;
}
#rarity_wrap .page_title.rarity span{
	color: #fff;
    font-size: 12px;
	position: absolute;
	right: 10px;
	bottom: 5px;
}

@media screen and (max-width: 768px) {
#rarity_wrap .page_title.rarity {
    height: 200px;
    }
    #rarity_wrap .page_title.rarity h2 {
        font-size: 24px;
    }
	#rarity_wrap .page_title.rarity span {
		font-size: 10px;
		right: 5px;
	}
}


/*============================
#rarity_intro
============================*/
#rarity_intro {
	padding: 130px 0 0 0;
	max-width: 935px;
	margin: 0 auto 60px;
	width: 90%;
}
#rarity_intro .catch01 {
	font-size: 36px;
	color: #690707;
	text-align: center;
	margin: 0 auto 60px;
	font-feature-settings: "halt";
}
#rarity_intro .img01 {
	max-width: 624px;
	width: 90%;
	text-align: center;
	margin: 0 auto 70px;
}
#rarity_intro .img02 {
	max-width: 604px;
	width: 90%;
	margin: 0 auto;
	text-align: center;
}
#rarity_intro .img02 span {
	font-size: 12px;
	text-align: right;
	margin: 5px 0 0;
	display: block;
}
@media screen and (max-width: 768px) {
	#rarity_intro {
		padding: 65px 0 0 0;
		margin: 0 auto 30px;
	}
	#rarity_intro .catch01 {
		font-size: 22px;
		margin: 0 auto 30px;
	}
	#rarity_intro .img01 {
		margin: 0 auto 35px;
	}
	#rarity_intro .img02 span {
		font-size: 10px;
	}
}



/*============================
#rarity_area1
============================*/
#rarity_area1 {
	max-width: 1000px;
	margin: 0 auto 100px;
	width: 90%;
}
#rarity_area1 .copy {
	margin-bottom: 125px;
}
#rarity_area1 .point01 {
	margin-bottom: 107px;
}
#rarity_area1 .point01 .ttl {
	margin-bottom: 32px;
}
#rarity_area1 .point01 .read {
	margin-bottom: 40px;
}
#rarity_area1 .point01 .box {
	background-color: #ddd4cc;
	padding: 35px 0 40px;
}
#rarity_area1 .point01 .box .sttl {
	font-size: 32px;
	color: #fff;
	background-color: #730000;
	text-align: center;
	max-width: 925px;
	width: 90%;
	margin: 0 auto 40px;
	padding: 20px 5%;
}
#rarity_area1 .point01 .box .innar {
	margin-bottom: 40px;
	display: flex;
	justify-content: space-between;
	gap: 35px;
	max-width: 925px;
	width: 90%;
	margin: 0 auto;
	align-items: center;
}
#rarity_area1 .point01 .box .innar p {
	font-size: 22px;
	width: 50%;
	text-align: justify;
}
#rarity_area1 .point01 .box .innar .img {
	width: 50%;
}

#rarity_area1 .point02 {
	margin-bottom: 110px;
}
#rarity_area1 .point02 .ttl {
	margin-bottom: 38px;
}
#rarity_area1 .point02 .copy {
	font-size: 24px;
	font-weight: bold;
	color: #7d0000;
	margin-bottom: 30px;
}
#rarity_area1 .point02 .copy span {
	font-size: 30px;
	font-weight: bold;
}
#rarity_area1 .point02 .read {
	margin-bottom: 70px;
}
#rarity_area1 .point02 .read span {
	font-size: 12px;
}
#rarity_area1 .point02 .img01 {
	text-align: center;
	margin: 0 auto 80px;
	max-width: 636px;
}
#rarity_area1 .point02 .text {
	margin-bottom: 70px;
}
#rarity_area1 .point02 .future {
	max-width: 815px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 63px;
}
#rarity_area1 .point02 .future .img {
	width: 32.26993865030675%;
}
#rarity_area1 .point02 .future .txt {
	width: 58.89570552147239%;
}
#rarity_area1 .point02 .future .txt .sttl {
	font-size: 30px;
	margin-bottom: 25px;
	padding-left: 20px;
	border-left: #7d0000 5px solid;
	line-height: 1.3;
}
#rarity_area1 .point02 .future .txt p {
	font-size: 20px;
	font-feature-settings: "halt";
}
#rarity_area1 .point02 .future .txt p .red28 {
	font-size: 28px;
	color: #7d0000;
}
#rarity_area1 .point02 .future .txt p .txt12 {
	font-size: 12px;
}

@media screen and (max-width: 768px) {
	#rarity_area1 {
		margin: 0 auto 50px;
	}
	#rarity_area1 .copy {
		margin-bottom: 60px;
	}
	#rarity_area1 .point01 {
		margin-bottom: 50px;
	}
	#rarity_area1 .point01 .ttl {
		margin-bottom: 22px;
	}
	#rarity_area1 .point01 .read {
		margin-bottom: 20px;
	}
	#rarity_area1 .point01 .box {
		padding: 25px 0 20px;
	}
	#rarity_area1 .point01 .box .sttl {
		font-size: 20px;
		padding: 10px 5%;
		margin-bottom: 20px;
	}
	#rarity_area1 .point01 .box .innar {
		margin-bottom: 20px;
		flex-direction: column;
		gap: 20px;
	}
	#rarity_area1 .point01 .box .innar p {
		font-size: 16px;
		width: auto;
	}
	#rarity_area1 .point01 .box .innar .img {
		width: auto;
	}
	
	#rarity_area1 .point02 {
		margin-bottom: 55px;
	}
	#rarity_area1 .point02 .ttl {
		margin-bottom: 20px;
	}
	#rarity_area1 .point02 .copy {
		font-size: 18px;
		margin-bottom: 20px;
	}
	#rarity_area1 .point02 .copy span {
		font-size: 16px;
	}
	#rarity_area1 .point02 .read {
		margin-bottom: 35px;
	}
	#rarity_area1 .point02 .read span {
		font-size: 10px;
		display: inline-block;
	}
	#rarity_area1 .point02 .img01 {
		margin-bottom: 40px;
	}
	#rarity_area1 .point02 .text {
		margin-bottom: 35px;
	}
	#rarity_area1 .point02 .future {
		flex-direction: column;
		gap: 30px;
	}
	#rarity_area1 .point02 .future .img {
		width: 65%;
	}
	#rarity_area1 .point02 .future .txt {
		width: auto;
	}
	#rarity_area1 .point02 .future .txt .sttl {
		font-size: 16px;
		margin-bottom: 15px;
		padding-left: 10px;
	}
	#rarity_area1 .point02 .future .txt p {
		font-size: 16px;
	}
	#rarity_area1 .point02 .future .txt p .red28 {
		font-size: 18px;
	}
	#rarity_area1 .point02 .future .txt p .txt12 {
		font-size: 10px;
	}
}


/*============================
アクセス・ロケーションバナー
============================*/
.banner_area {
	max-width: 1200px;
	margin: 0 auto;
	width: 90%;
}
.banner_area h3 {
	font-family: 'Bellefair', serif;
	font-family: 'Cinzel', serif;
	font-size: 25px;
	text-align: center;
	margin-bottom: 20px;
}
.banner_area ul {
	display: flex;
	justify-content:center;
	max-width: 1000px;
	flex-wrap: wrap;
	margin: 0 auto 80px;
}
.banner_area ul li {
	border-right: #be934f solid 1px;
	border-bottom: #be934f solid 1px;
	width: 50%;
}
.banner_area ul li:nth-child(2) {
	border-right:none;
}
.banner_area ul li:nth-child(3) {
	border-bottom:none;
}
.banner_area ul li:nth-child(4) {
	border-bottom:none;
	border-right:none;
}
.banner_area ul li a {
	transition:all 0.3s ease-in-out;
}
.banner_area ul li img {
	object-fit: cover;
	height: 200px;
}

.banner_area ul li a:hover {
	transition:all 0.3s ease-in-out;
}


@media screen and (max-width: 768px) {
	.banner_area {
		max-width: 1200px;
		margin: 0 auto;
		width: 90%;
	}
	.banner_area h3 {
		font-family: 'Bellefair', serif;
		font-family: 'Cinzel', serif;
		font-size: 21px;
		text-align: center;
		margin-bottom: 20px;
	}
	.banner_area ul {
		display:block;
		max-width: 1000px;
		margin: 0 auto 0px;
	}
	.banner_area ul li {
		border-right:none;
		border-bottom: #be934f solid 1px;
		width: auto;
	}
	.banner_area ul li:nth-child(2) {
		border-right:none;
	}
	.banner_area ul li:nth-child(3) {
		border-bottom: #be934f solid 1px;
	}
	.banner_area ul li:nth-child(4) {
		border-bottom:none;
		border-right:none;
	}
	.banner_area ul li img {
		object-fit:inherit;
		height: auto;
	}
}