@charset "UTF-8";

/*
=====================================
全体設定
=====================================
*/
body {
	background-color: #a6c77f;
}

img {
	width: 100%;
	vertical-align: bottom;
}

main {
	max-width: 1280px;
	position: relative;
	font-family: "Noto sans JP", sans-serif;
	font-size: calc((14 / 375)*100vw);
	margin: auto;
	padding: 61px 0 9%;
}

main .wrap {
	position: relative;
	background-color: #fff;
	border-radius: 4.5vw;
	width: 88%;
	margin: 0 auto 10.5%;
	padding-bottom: 22%;
}

main .wrap::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("../images/p_which_house_sp@2x.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 80%;
	height: 12vw;
	margin: 0 auto 0 12%;
	z-index: 10;
}


@media screen and (min-width: 700px) {
	.spbr {
		display: none;
	}

	.pcbr {
		display: block;
	}

	main .wrap {
		border-radius: 30px;
		width: 86%;
		margin: 0 auto 6.5%;
		padding-bottom: 16%;
	}

	main .wrap::after {
		background-image: url("../images/p_which_house_pc@2x.png");
    width: 60%;
    height: 8vw;
    margin: 0 auto 0 34.7%;
    z-index: 10;
	}
}

@media screen and (min-width: 768px) {
	main {
		padding: 74px 0 9%;
	}
}

@media screen and (min-width: 1024px) {
	main {
		font-size: 16px;
	}
}

@media screen and (min-width: 1280px) {
	main .wrap::after {
		height: 102px;
	}
}

@media screen and (min-width: 1500px) {}

@media screen and (min-width: 1700px) {}

@media screen and (min-width: 1920px) {}

/*
=====================================
リード文
=====================================
*/
main h2 {
	width: 61%;
	margin: 0 auto 3%;
	padding-top: 8.5%;
}

#read {
	padding-top: 6%;
}

#read h3 {
	width: 84%;
	margin: auto;
}

#read p {
	position: relative;
	background-image: url(../images/top_panda_sp@2x.png);
	background-size: 64%;
	background-position: top center;
	background-repeat: no-repeat;
	text-align: justify;
	width: 84%;
	margin: auto;
	padding-top: 47.5%;
	padding-bottom: 8.3%;
}

#read p::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #a6c77f;
	margin: auto;
}

@media screen and (min-width: 480px) {}

@media screen and (min-width: 600px) {}

@media screen and (min-width: 700px) {
	main h2 {
		width: 38%;
		margin: 0 auto 1.7%;
		padding-top: 4.5%;
	}

	#read {
		padding-top: 5%;
	}

	#read h3 {
		width: 94%;
		margin: 0 auto 4.5%;
	}

	#read p {
		background-image: url("../images/top_panda_pc@2x.png");
		background-size: 31%;
		background-position: top -3vw left -9%;
		box-sizing: border-box;
		font-size: 24px;
		letter-spacing: 0.05em;
		line-height: 2.2;
		width: 88%;
		padding-top: 0;
		padding-left: 17%;
		padding-bottom: 6.3%;
	}
}

@media screen and (min-width: 800px) {}

@media screen and (min-width: 900px) {}

@media screen and (min-width: 1024px) {}

@media screen and (min-width: 1280px) {
	#read p {
		background-position: top -40px left -9%;
	}

}

@media screen and (min-width: 1500px) {}

@media screen and (min-width: 1700px) {}

@media screen and (min-width: 1920px) {}

/*
=====================================
SELECT
=====================================
*/
.select_click {
	width: 58.5%;
	padding-top: 3.2%;
	margin: 0 auto 5%;
}

#select {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 2.5vw;
	justify-content: space-between;
	width: 85%;
	margin: 0 auto 10%;
}

#select li {
	position: relative;
	width: 48.5%;
}

#select li a {
	display: block;
	position: relative;
	transition: background-color 0.4s;
}

#select li a::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.55);
	width: 100%;
	height: 100%;
	margin: auto;
	z-index: 20;
}

#select li a:hover::before {
	background-color: transparent;
	transition: background-color 0.4s;
}

#select li picture:first-of-type img {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 30;
}

#select li.select_item_01 picture:first-of-type img {
	width: 78%;
}

#select li.select_item_02 picture:first-of-type img {
	width: 42%;
}

#select li.select_item_03 picture:first-of-type img {
	width: 30%;
}

#select li.select_item_04 picture:first-of-type img {
	width: 32%;
}

#select li.select_item_05 picture:first-of-type img {
	width: 63%;
}

#select li.select_item_06 picture:first-of-type img {
	width: 55%;
}

#select li.select_item_07 picture:first-of-type img {
	width: 23%;
}

#select li.select_item_08 picture:first-of-type img {
	width: 55%;
}

#select li.select_item_09 picture:first-of-type img {
	width: 44%;
}

#select li.select_item_10 picture:first-of-type img {
	width: 47%;
}

#select li.select_item_11 picture:first-of-type img {
	width: 51%;
}

#select li.select_item_12 picture:first-of-type img {
	width: 35%;
}

#select li picture:last-of-type img {
	display: block;
	z-index: 20;
}

@media screen and (min-width: 480px) {}

@media screen and (min-width: 600px) {}

@media screen and (min-width: 700px) {
	.select_click {
		width: 32%;
		padding-top: 1.7%;
		margin: 0 auto 1.7%;
	}

	#select {
		row-gap: 1.6vw;
		margin: 0 auto 7%;
	}

	#select li {
		width: 32%;
	}

	#select li.select_item_01 picture:first-of-type img {
		width: 78%;
	}
	
	#select li.select_item_02 picture:first-of-type img {
		width: 49%;
	}
	
	#select li.select_item_03 picture:first-of-type img {
		width: 40%;
	}
	
	#select li.select_item_04 picture:first-of-type img {
		width: 34%;
	}
	
	#select li.select_item_05 picture:first-of-type img {
		width: 71%;
	}
	
	#select li.select_item_06 picture:first-of-type img {
		width: 53%;
	}
	
	#select li.select_item_07 picture:first-of-type img {
		width: 32%;
	}
	
	#select li.select_item_08 picture:first-of-type img {
		width: 75%;
	}
	
	#select li.select_item_09 picture:first-of-type img {
		width: 55%;
	}
	
	#select li.select_item_10 picture:first-of-type img {
		width: 55%;
	}
	
	#select li.select_item_11 picture:first-of-type img {
		width: 53%;
	}
	
	#select li.select_item_12 picture:first-of-type img {
		width: 45%;
	}
	
}

@media screen and (min-width: 800px) {}

@media screen and (min-width: 900px) {}

@media screen and (min-width: 1024px) {}

@media screen and (min-width: 1280px) {
	#select {
		row-gap: 20px;
	}
}

@media screen and (min-width: 1500px) {}

@media screen and (min-width: 1700px) {}

@media screen and (min-width: 1920px) {}

/* =====================================
記事
=====================================
*/
#house {
	display: flex;
	flex-direction: column;
	gap: 8vw;
	width: 85%;
	margin: auto;
}

#house li {
	position: relative;
	border-top: solid 1px #000;
	padding-top: 6%;
	z-index: 1;
}

#house li#item_05::before {
	content: '';
	position: absolute;
	top: -10%;
	left: -9%;
	background-image: url("../images/panda_01_sp@2x.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 16%;
	height: 20%;
	z-index: 10;
}

#house li#item_09::before {
	content: '';
	position: absolute;
	top: -10%;
	right: -9%;
	background-image: url("../images/panda_02_sp@2x.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 16%;
	height: 20%;
	z-index: 10;
}


#house li h4 {
	margin: 0 auto 3%;
}

#house li#item_01 h4 {
	width: 47%;
}

#house li#item_02 h4 {
	width: 95%;
}

#house li#item_03 h4 {
	width: 46%;
}

#house li#item_04 h4 {
	width: 41%;
}

#house li#item_05 h4 {
	width: 88%;
}

#house li#item_06 h4 {
	width: 82%;
}

#house li#item_07 h4 {
	width: 55%;
}

#house li#item_08 h4 {
	width: 83%;
}

#house li#item_09 h4 {
	width: 70%;
}

#house li#item_10 h4 {
	width: 55%;
}

#house li#item_11 h4 {
	width: 42%;
}

#house li#item_12 h4 {
	width: 68%;
}

#house li section>picture:last-of-type img {
	margin: 0 auto 5%;
}

#house li p {
	font-size: calc((12.5 / 375) * 100vw);
	text-align: justify;
	line-height: 1.55;
}

@media screen and (min-width: 480px) {}

@media screen and (min-width: 600px) {}

@media screen and (min-width: 700px) {

	#house {
		gap: 6vw;
	}

	#house li {
		padding-top: 3.5%;
	}

	#house li#item_05::before {
		top: -10%;
		left: -9%;
		background-image: url("../images/panda_01_pc@2x.png");
		width: 16%;
		height: 20%;
	}
	
	#house li#item_09::before {
		top: -10%;
		right: -13%;
		background-image: url("../images/panda_02_pc@2x.png");
		width: 16%;
		height: 20%;
	}

	#house li#item_01 h4 {
		width: 35%;
	}

	#house li#item_02 h4 {
		width: 70%;
	}

	#house li#item_03 h4 {
		width: 35%;
	}

	#house li#item_04 h4 {
		width: 30%;
	}

	#house li#item_05 h4 {
		width: 65%;
	}

	#house li#item_06 h4 {
		width: 60%;
	}

	#house li#item_07 h4 {
		width: 40%;
	}

	#house li#item_08 h4 {
		width: 61%;
	}

	#house li#item_09 h4 {
		width: 51%;
	}

	#house li#item_10 h4 {
		width: 40%;
	}

	#house li#item_11 h4 {
		width: 31%;
	}

	#house li#item_12 h4 {
		width: 50%;
	}

	#house li section>picture:last-of-type img {
		margin: 0px auto 3%;
	}

	#house li p {
		font-size: calc((20 / 1280) * 100vw);
		text-align: justify;
		line-height: 1.55;
	}


}

@media screen and (min-width: 800px) {}

@media screen and (min-width: 900px) {}

@media screen and (min-width: 1024px) {}

@media screen and (min-width: 1280px) {
	#house {
		gap: 75px;
	}

	#house li p {
		font-size: 20px;
	}
}

@media screen and (min-width: 1500px) {}

@media screen and (min-width: 1700px) {}

@media screen and (min-width: 1920px) {}


/*
=====================================
Enjoy More
=====================================
*/
#enjoy {
	color: #fff;
	font-family: "Noto serif JP", serif;
	font-size: calc((12 / 375)* 100vw);
	width: 72%;
	margin: 0 auto 10%;
}

#enjoy p:first-of-type {
	line-height: 1.55;
	width: 69%;
	margin: 0 auto 2%;
}

#enjoy p:nth-of-type(2) {
	margin: 0 auto 6.5%;
}


#enjoy p:last-of-type {
	line-height: 1.55;
}


@media screen and (min-width: 480px) {}

@media screen and (min-width: 600px) {}

@media screen and (min-width: 700px) {
	#enjoy {
		font-size: calc((18 / 1280)* 100vw);
		font-weight: 500;
		width: 48%;
		margin: 0 auto 10%;
	}
	
	#enjoy p:first-of-type {
		line-height: 1.55;
		width: 45%;
		margin: 0 auto 3%;
	}
	
	#enjoy p:nth-of-type(2) {
		width: 73%;
		margin: 0 auto 2.5%;
	}
	
	#enjoy p:last-of-type {
		line-height: 1.55;
	}
	
}

@media screen and (min-width: 800px) {}

@media screen and (min-width: 900px) {}

@media screen and (min-width: 1024px) {}

@media screen and (min-width: 1280px) {
	#enjoy {
		font-size: 18px
	}
}

@media screen and (min-width: 1500px) {}

@media screen and (min-width: 1700px) {}

@media screen and (min-width: 1920px) {}



/*
=====================================
pager
=====================================
*/
.pager ul {
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	width: 80%;
	max-width: 950px;
	/* padding: 50px 0px; */
	font-size: 1em;
	margin: auto;
}

.pager ul li {
	width: 49.8%;
}

.pager ul li:last-of-type {
	text-align: right;
}

.pager ul li a {
	color: #fff;
}


.pager ul li a:hover {
	color: #f5e44c;
}