@charset "utf-8";

#plpPickup .visible-xxs{display:none; !important}
#plpPickup a{text-decoration:none; display:block; color:#333;}
#plpPickup a:hover{opacity:0.6;}
#plpPickup a img{backface-visibility: hidden;}/*hover時画像のズレ防止*/
#plpPickup img{max-width:100%; height:auto;}

#plpPickup{
	max-width:1200px;
	font-size: 17px;
	line-height:1.6;
	color:#111;
	position:relative;
	margin:30px auto 0;
	font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, "Open Sans", Helvetica, Arial, -apple-system, blinkMacSystemFont, sans-serif;
}
#categoryDetail{
	max-width:1200px;
	text-align:center;
	font-size:17px;
	margin-top:20px;
}
#categoryListlink{
	display:none;
}
#plpPickup h2{
	font-family:"游明朝", YuMincho,"ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	text-align:center;
	margin:40px 0 20px 0;
	font-feature-settings: "palt";
}
#plpPickup h2 + p{
	font-size:14px;
	text-align:center;
}
#plpPickup .inner{
	width:100%;
	background:#F8F8F8;
	padding:1.25%;
	margin:0;
}
#plpPickup .inner ul{
	display:flex;
	flex-wrap:wrap;
}
	
@media screen and (max-width: 1023px){
	#plpPickup h2{font-size:26px;}
	#categoryDetail{font-size:15px;}
}
@media screen and (max-width: 767px){
	#plpPickup .visible-xxs{display:block; !important}
	#plpPickup .hidden-xxs {display:none; !important}
	#plpPickup{margin:20px auto 0;}
	#plpPickup h2 + p{
		font-size:11px;
		text-align:left;
	}
	#categoryListlink{
		display:block;
		text-align:right;
		font-size:12px;
	}
	#categoryListlink a{
		color:#70accb
	}
}
@media screen and (max-width: 479px){
	#plpPickup h2{
		font-size:20px;
		margin:20px 0 15px;
	}
	#categoryDetail{
		margin-top:10px;
		font-size:12px;
	}
}

#plpPickup .inner ul li:after{
	content:"\f138";
	display:inline;
	font-family: FontAwesome;
	text-rendering:auto;
	-webkit-font-smoothing:antialiased;
	color:#916502;
	position:absolute;
	right:10px;
	top:10px;
	line-height:1.0;
	font-size:1.5em;
}
@media screen and (max-width: 479px){
	#plpPickup .inner ul li:after{
		font-size:1.2em;
		right:5px;
		top:8px;
	}
}

/* =================== #function =================== */
#plpPickup #function .inner ul li{
	width:18.8%;
	margin:0.833% 0.6%;
	border:1px solid #DDD;
	border-radius:10px;
	background:#FFF;
	overflow:hidden;
	position:relative;
}
#plpPickup #function .inner ul li:after{
	content:"\f054";
	font-size:12px;
	top:50%;
	margin-top:-5px;
}
#plpPickup #function .inner ul li a{
	padding:10px 30px 10px 10px;
	display:flex;
	align-items:center;
}
#plpPickup #function .inner ul li a img{
	width:54px;
	height:54px;
}
#plpPickup #function .inner ul li a span{
	display:block;
	padding-left:10px;
	line-height:1.4;
}
@media screen and (max-width: 1199px) {
	#plpPickup #function .inner ul li{width:23.8%;}
	#plpPickup #function .inner ul li a img{width:30%; height:30%;}
	#plpPickup #function .inner ul li a span{font-size:15px;}
}
@media screen and (max-width: 767px) {
	#plpPickup #function .inner ul li{width:48.8%;}
	#plpPickup #function .inner ul li a{padding:10px 20px 10px 10px;}
	#plpPickup #function .inner ul li a span{padding-left:5px; font-size:1.955vw;}
}
@media screen and (max-width: 479px){
	#plpPickup #function .inner ul li a span{font-size:3.2vw;}
}

/* =================== #type =================== */
#plpPickup #type .inner > ul > li {
	width:calc(33.3% - 1.666%);
	margin:0.833%;
	border:1px solid #DDD;
	border-radius:10px;
	background:#FFF;
	overflow:hidden;
	position:relative;
}
#plpPickup #type .inner > ul > li:after{display:none;}

#plpPickup #type .inner .t_main figure img{
	width:100%;
}
#plpPickup #type .inner .t_main a p:nth-of-type(1){
	font-size:22px;
	font-weight:bold;
	padding:10px 40px 0 10px;
	margin-bottom:5px;
	position:relative;
}
#plpPickup #type .inner .t_main a p:nth-of-type(1):after{
	content:"\f138";
	display:inline;
	font-family: FontAwesome;
	text-rendering:auto;
	-webkit-font-smoothing:antialiased;
	color:#916502;
	position:absolute;
	right:10px;
	bottom:10px;
	line-height:1.0;
	font-size:1em;
}
#plpPickup #type .inner .t_main a p:nth-of-type(2){
	font-size:12px;
	padding:0 10px 10px 10px;
	margin-bottom:0;
	border-bottom:1px dashed #DDD;
}
#plpPickup #type .inner .t_link{
	display:block;
	padding:10px 10px 0 10px;
}
#plpPickup #type .inner .t_link li{
	position:relative;
	padding:0 0 10px;
	line-height:1.4;
}
#plpPickup #type .inner .t_link li:after{
	content:"\f054";
	font-size:12px;
	position:inherit;
	top:50%;
	margin-top:-5px;
	display:inline;
	padding-left:20px;
}
#plpPickup #type .inner .t_link li a{
	display:inline;
	font-size:15px;
	line-height:1.4;
}
@media screen and (max-width: 767px) {
	#plpPickup #type .inner > ul > li {
		width:calc(50% - 2.5%);
		margin:1.25%;
	}
	#plpPickup #type .inner .t_main a p:nth-of-type(1){
		font-size:16px;
	}
	#plpPickup #type .inner .t_link li a{
		font-size:13px;
	}
}
@media screen and (max-width: 479px){
	#plpPickup #type .inner .t_main a p:nth-of-type(1){
		padding:10px 30px 0 10px;
	}
	#plpPickup #type .inner .t_link li:after{
		padding-left:10px;
	}
	#plpPickup #type .inner .t_main a p:nth-of-type(2),
	#plpPickup #type .inner .t_link li a{
		font-size:3.2vw;
	}
}

/* =================== #use =================== */
#plpPickup #use .inner{
	margin-bottom:2px;
}
#plpPickup #use .inner .h3_wrapper{
	text-align:center;
}
#plpPickup #use .inner .h3_wrapper h3{
	font-size:26px;
	text-align:center;
	color:#916502;
	font-family:"游明朝", YuMincho,"ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	display: flex;
	align-items: center;
	justify-content: center;
}
#plpPickup #use .inner .h3_wrapper h3::before,
#plpPickup #use .inner .h3_wrapper h3::after{
	display:block;
	content:"";
	width:100px;
	border-top:2px solid #916502;
}
#plpPickup #use .inner .h3_wrapper h3::before{
	margin-right:1rem;
}
#plpPickup #use .inner .h3_wrapper h3::after{
	margin-left:1rem;
}
#plpPickup #use .inner .h3_wrapper + p{
	margin:0 0.833% 10px;
}
#plpPickup #use .inner ul li{
	width:calc(25% - 1.666%);
	margin:0.833%;
	border:1px solid #DDD;
	border-radius:10px;
	background:#FFF;
	overflow:hidden;
	position:relative;
}
#plpPickup #use .inner ul li p{
	margin:10px 40px 10px 10px;
}
#plpPickup #use .inner ul li figure img{
	width:100%;
	border-radius: 0 0 10px 10px / 0 0 10px 10px;
}
@media screen and (max-width: 1023px) {
	#plpPickup #use .inner .h3_wrapper + p{
		font-size:15px;
	}
	#plpPickup #use .inner ul li p{
		font-size:15px;
		margin:10px 40px 10px 10px;
	}
}
@media screen and (max-width: 767px) {
	#plpPickup #use .inner .h3_wrapper h3{
		font-size:20px;
	}
	#plpPickup #use .inner .h3_wrapper + p{
		font-size:12px;
	}
	#plpPickup #use .inner ul li{
		width:calc(50% - 2.5%);
		margin:1.25%;
	}
	#plpPickup #use .inner .h3_wrapper h3::before,
	#plpPickup #use .inner .h3_wrapper h3::after{
		width:50px;
		border-top:2px solid #916502;
	}
}
@media screen and (max-width: 479px){
	#plpPickup #use .inner ul li p{ font-size:3.2vw; margin:10px 40px 10px 10px; }
}

/* =================== #series =================== */
#plpPickup #series .inner ul li{
	width:calc(20% - 1.666%);
	margin:0.833%;
	border:1px solid #DDD;
	border-radius:10px;
	background:#FFF;
	overflow:hidden;
	position:relative;
}
#plpPickup #series .inner ul li .s_txt{
	font-size:16px;
	padding:10px 32px 10px 10px;
	margin:0;
}
#plpPickup #series .inner ul li .s_txt span{
	letter-spacing:-2px;
}
#plpPickup #series .inner ul li figure img{
	width:100%;
}
#plpPickup #series .inner ul li .s_name{
	font-size:22px;
	height:102px;
	margin:0;
	font-weight:bold;
	color:#FFF;
	display:flex;
	align-items:center;
	border-radius: 0 0 10px 10px / 0 0 10px 10px;
}
#plpPickup #series .inner ul li .s_name span{
	flex:1;
	text-align:center;
}
#plpPickup #series .inner ul .eco .s_name{ background:#a67082; }
#plpPickup #series .inner ul .pile .s_name{ background:#a28e62; }
#plpPickup #series .inner ul .hotel .s_name{ background:#798147; font-size:18px; }
#plpPickup #series .inner ul .micro .s_name{ background:#816453; font-size:18px; }
#plpPickup #series .inner ul .imabari .s_name{ background:#8c8c8c; }

@media screen and (max-width: 1290px) {
	#plpPickup #series .inner ul li{
		width:calc(33.333333% - 2.5%);
		margin:1.25%;
	}
	#plpPickup #series .inner ul li .s_txt{ font-size:16px; }
	#plpPickup #series .inner ul li .s_name{ font-size:18px; height:90px; }
	#plpPickup #series .inner ul .hotel .s_name{ font-size:16px; }
	#plpPickup #series .inner ul .micro .s_name{ font-size:16px;}
}
@media screen and (max-width: 767px) {
	#plpPickup #series .inner ul li{
		width:calc(50% - 2.5%);
		margin:1.25%;
	}
	#plpPickup #series .inner ul li .s_txt{ font-size:14px; padding:10px 30px 10px 10px; }
	#plpPickup #series .inner ul li .s_name{ font-size:16px; height:90px; }
	#plpPickup #series .inner ul .hotel .s_name{ font-size:14px; }
	#plpPickup #series .inner ul .micro .s_name{ font-size:14px;}
}
@media screen and (max-width: 479px){
	#plpPickup #series .inner ul li .s_txt{ font-size:3.2vw; padding:10px 22px 10px 10px; }
}

/* =================== #s_link =================== */
#plpPickup #s_link a{
	margin:10px auto 0;
	padding:10px;
	width:55%;
	border:1px solid #DDD;
	border-radius:10px;
	background:#FFF;
	overflow:hidden;
	position:relative;
	text-align:center;
	display:block;
	position:relative;
}
#plpPickup #s_link a:after{
	display:inline;
	font-family: FontAwesome;
	text-rendering:auto;
	-webkit-font-smoothing:antialiased;
	color:#916502;
	position:absolute;
	right:10px;
	line-height:1.0;
	content:"\f054";
	font-size:12px;
	top:50%;
	margin-top:-5px;
}
@media screen and (max-width: 767px) {
	#plpPickup #s_link a{
		width:80%;
	}
}

/* =================== .gridTtl =================== */
.gridTtl{
	text-align:center;
	font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, "Open Sans", Helvetica, Arial, -apple-system, blinkMacSystemFont, sans-serif;
}
h2.gridTtl{
	font-family:"ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	margin-top:36px;
	font-feature-settings: "palt";
}
@media screen and (max-width: 767px) {
	h2.gridTtl{font-size:20px;}
	.gridTtl:not(h2){text-align:left;}
}

