@charset "utf-8";
/* CSS Document */



*{
	font-size:18px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-weight: 500;
	line-height:1.8;
	}
	
img{
	max-width:100%;
}

#sp_hidden{
		display:none;
	}

#pc_hidden{
		display:block;
	}

.content{
	width:1024px;
	margin:0 auto;
	position:relative;
}

.mv{
	background:#a49a7f;
	padding:0;
}

.intro{
	font-size:20px;
}

h1{
	text-align:center;
	padding:30px 0;
}

.index{
	padding:45px 0 0;
}

nav{
	background:url(../img/category_line.png) no-repeat bottom;
	padding:0 0 50px;
}

nav h2{
	font-family: "Poppins";
	font-size:50px;
	font-weight:900;
	color:#848484;
	margin:100px 0 15px;
	text-align:center;
}

nav ul{
    display: flex;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

nav ul li{
	width:320px;
	background:#EFEFEF;
	margin-bottom:15px;
	position:relative;
}

nav ul li a{
	display:block;
	padding:20px;

}

nav ul li a:after{
	content:url(../img/arrow-down-alt2.png);
	position: absolute;
	right:10px;
}

.item_list{
	margin-top:150px;
}

.item_list2{
	margin-top:100px;
}

.item_list3{
	margin-top:50px;
}

.item_list h3{
	text-align:center;
	margin-bottom:50px;
}

.item_list h3 p{
	border:1px solid #000;
	padding:35px 130px;
	display:inline-block;
	font-size:20px;
}

.item_list ul{
	display: flex;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.item_list ul li{
	width:320px;
	margin-bottom:20px;
}

.item_list ul li p{
	text-align:center;
	margin-top:10px;
}

.more{
	text-align:center;
	margin-top:30px;
}

.more a{
	background:#000000;
	padding:20px 170px;
	color:#ffffff;
	display:inline-block;
}

.more a:after{
	content:url(../img/arrow-drop-right-fill.png);
	margin-left:10px;
}

#search{
	border:1px solid #DDD;
	padding:45px;
	margin-top:100px;
}

#search h3{
	text-align:center;
}

#search ul{
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;	
}

#search ul li{
	width:auto;
	margin:10px 10px 0 0;
}


#search ul li a{
	background:#EFEFEF;
	padding:10px 20px;
	display:inline-block;
}

.footer{
	border-top:1px solid #DDD;
	margin-top:50px;
}

.footer .content{
	padding:50px 0;
}


.footer h4{
	text-align:center;
	margin-bottom:20px;
}

.footer .toppage{
	text-align:center;
}

.footer .toppage a{
	border:1px solid #005BAC;
	display:inline-block;
	padding:20px 100px;
	border-radius:5px;
}

.copyright{
	text-align:center;
	border-top:1px solid #DDD;
	padding:20px 0;
}

#page_top {
    position: fixed;
    bottom: 30px;
    right: 20px;
}
#page_top a {
    background-color: #999;
    color: #fff;
    text-align: center;
    text-decoration: none;
    padding: 20px 20px;
}
#page_top a:hover {
    background-color: #666;
    text-decoration: none;
}

#sp_hedden{
    display: none;
}




/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	right:-60px;
	bottom:0;
	transform:translateY(50%) ;   /*全体の高さ*/
	height:200px;
	overflow-y:hidden;
}


/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	bottom: 0;
	right:10px;
	transform-origin:top;
    /*線の形状*/
	width: 1px;
	height: 135px;
	background: #000;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
	transition:0.3s;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:20px;
		top:75px;
		opacity: 1;
	}
	30%{
		height:100px;
		opacity: 1;
	}
	
	50%{
		height:135px;
		opacity: 0.5;
	}
	
	100%{
		height:0;
		top:300px;
		opacity: 0;
	}
}

@media screen and (min-width:768px) and ( max-width:1024px) {
	
	.scrolldown1{
		right:20px;
		transform: translateY(110%);
	}
	
	.intro{
		width:85%;
	}
	
	.mv div{
		background: black;
	}

	.mv .content{
		width:100%;
		padding:0;
	}
	
	.content{
		width:95%;
		margin:0 auto;
	}
	
	nav ul li{
		width:32%;
	}
	
	.item_list{
		margin-top:75px;
	}
	
	.item_list ul li{
		width:32%;
	}


}


@media (max-width: 767px) {

		
	*{
		font-size:14px;
	}
	
	.content{
		width:95%;
	}
	
	.mv .content{
		width:100%;
		
	}
	
	.sp_hidden{
		display:none;
	}

	.pc_hidden{
		display:block;
	}
	
	.mv{
		padding:10px 0 10px;
	}
	
	.mv_sp{
		width:100%;

	}
	
	.scrolldown1{
		right:20px;
		transform: translateY(110%);
	}
	
	.intro{
		width:85%;
		font-size:14px;
	}
	
	
	nav ul li{
		width:49%;
		margin-bottom:10px;
	}
	
	nav h2{
		margin:40px 0;
	}
	
	.item_list h3 p{
	padding:25px 60px;
	}
	
	nav ul li a{
		padding:10px;
	}
	
	.item_list ul li{
		width:49%;
	}

	.item_list{
		margin-top:100px;
	}

	
	.more a{
	background:#000000;
	padding:15px 100px;
	color:#ffffff;
	}
	
	#search{
		padding:20px;
	}

	#pc_hidden{
	    display: none;
	}

	#sp_hidden{
	    display: block;
	}	
}