/*-----------------------------------------------*/
/*-------------------- color --------------------*/
/*-----------------------------------------------*/
@white:#ffffff;
@l_gray:#f1f1f1;
@gray:#D9D9D9;
@d_gray:#B5B5B5;
@dd_gray:#8C8C8C;
@l_black:#525252;
@black:#262626;
@yellow:#EFDE49;
@d_yellow:#A39833;
@dd_yellow:#524C19;
@orange:#EFAE30;
@d_orange:#A37821;
@dd_orange:#523C10;
@red:#d85656;
@d_red:#a53a3a;
@blue:#00539b;
@d_blue:#163b84;
@green:#59b559;
@l_green:#d2edd2;
@d_green:#287528;
@violet:#8243c4;
@d_violet:#58278c;
@sky:#75d9f7;
@l_sky:#c9effb;
@pink:#fdc0c0;
@l_brown:#c9bc9c;
@brown:#4d3425;


/*----------------------------------------------*/
/*-------------------- font --------------------*/
/*----------------------------------------------*/
@font-face{
	font-family:'oswald_exlight';
	src:url('/fonts/Oswald-ExtraLight.ttf');
}
@font-face{
	font-family:'oswald_regular';
	src:url('/fonts/Oswald-Regular.ttf');
}
@font-face{
	font-family:'oswald_bold';
	src:url('/fonts/Oswald-Bold.ttf');
}
@font-face{
	font-family:'DidactGothic-Regular';
	src:url('/fonts/DidactGothic-Regular.ttf');
}
@font-face{
	font-family:'ZenOldMincho-Regular';
	src:url('/fonts/ZenOldMincho-Regular.ttf');
}
@font-face{
	font-family:'NotoSerifJP-SemiBold';
	src:url('/fonts/NotoSerifJP-SemiBold.otf');
}


/*----------------------------------------------------------------------*/
/*------------------------------ sp-start ------------------------------*/
/*----------------------------------------------------------------------*/
@media(max-width:768px){

/*------------------------------------------------*/
/*-------------------- common --------------------*/
/*------------------------------------------------*/
html, body{
	letter-spacing:0;
}

/*------------------------------------------------*/
/*-------------------- header --------------------*/
/*------------------------------------------------*/
header.hide{
	display:block;
}
.top_header{
	display:none;
}
.header_wrap{
	height:60px;
	padding:0 20px;
}
.header_headline{
	font-size:10px;
	box-sizing:border-box;

	p{
		font-size:10px;
	}
	ul{
		display:none;
	}
}
.header_logo{
	padding-left:0;

	img{
		/* width:150px; */
		height:50px;
	}
}
.header_nav{
	display:block;
	position:fixed;
	top:60px;
	right:0;
	bottom:0;
	width:100%;
	height:auto;
	padding: 40px 20px;
	background-color:@l_black;
	box-sizing:border-box;
	overflow:auto;
	opacity:0;
	visibility:hidden;
	transform:translateX(100%);
	z-index:20;
	display: flex;
	flex-direction:column;
	gap:20px;

	a{
		font-size:18px;
		color:@white;
	}
}
/*---------- header > mobile用 ----------*/
.header_mobile{
	display:flex;
	align-items:center;
	gap:20px;
	height:100%;
}
/*---------- header > hambueger ----------*/
.header_hamburger{
	display:block;
	position:relative;
	width:40px;
	height:20px;
	margin-bottom:1px;
	cursor:pointer;
	z-index:100;

	span{
		position:absolute;
		left:0;
		width:100%;
		height:1px;
		background-color:@black;
		animation-duration:0.3s;
		animation-iteration-count:1;
		animation-timing-function:linear;
	}
	span.top{
		top:0;
		transform:rotate(0deg);
	}
	span.middle{
		top:50%;
		transform:rotate(0deg);
	}
	span.bottom{
		top:100%;
		transform:rotate(0deg);
	}
}
.header_back{
	display:block;
	position:fixed;
	top:60px;
	left:0;
	bottom:0;
	width:100%;
	background:rgba(0, 0, 0, 0.7);
	opacity:0;
	visibility:hidden;
	transition:0.3s;
	z-index:10;
}
/*---------- mobile-nav > open ----------*/
body.nav_open{
	overflow:hidden;

	.header_nav{
		opacity:1;
		visibility:visible;
		transform:translateX(0);
	}
	.header_hamburger{
		span.top{
			top:50%;
			transform:rotate(30deg);
		}
		span.middle{
			opacity:0;
		}
		span.bottom{
			top:50%;
			transform:rotate(-30deg);
		}
	}
	.header_back{
		opacity:1;
		visibility:visible;
	}
}
/*---------- hamburger-animation ----------*/
@keyframes nav_open_top{
	0%{
		top:0;
		transform:rotate(0deg);
	}
	50%{
		top:50%;
		transform:rotate(0deg);
	}
	100%{
		top:50%;
		transform:rotate(30deg);
	}
}
@keyframes nav_open_middle{
	0%{
		opacity:1;
	}
	50%{
		opacity:0;
	}
	100%{
		opacity:0;
	}
}
@keyframes nav_open_bottom{
	0%{
		top:100%;
		transform:rotate(0deg);
	}
	50%{
		top:50%;
		transform:rotate(0deg);
	}
	100%{
		top:50%;
		transform:rotate(-30deg);
	}
}
@keyframes nav_close_top{
	0%{
		top:50%;
		transform:rotate(30deg);
	}
	50%{
		top:50%;
		transform:rotate(0deg);
	}
	100%{
		top:0;
		transform:rotate(0deg);
	}
}
@keyframes nav_close_middle{
	0%{
		opacity:0;
	}
	50%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
@keyframes nav_close_bottom{
	0%{
		top:50%;
		transform:rotate(-30deg);
	}
	50%{
		top:50%;
		transform:rotate(0deg);
	}
	100%{
		top:100%;
		transform:rotate(0deg);
	}
}



/*------------------------------------------------*/
/*-------------------- footer --------------------*/
/*------------------------------------------------*/
.footer_wrap {
    flex-direction: column;
	gap: 20px;
}
footer {
    margin-top: 70px;
    padding: 40px 0;
}
/*--------------------------------------------------*/
/*-------------------- paginate --------------------*/
/*--------------------------------------------------*/
.pagination{
	li{
		span{
			padding:8px 10px;
			font-size:13px;
		}
		a{
			padding:8px 10px;
			font-size:13px;
		}
	}
}


/*----------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------*/
/*---------------------------------------- ここからカスタマイズ ----------------------------------------*/
/*----------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------*/


/*---------------------------------------------*/
/*-------------------- top --------------------*/
/*---------------------------------------------*/
.top_price .container {
    grid-template-columns: 1fr;
}
.top_recommend {
    margin-top: 50px;
    padding: 30px 0;
}
.top_recommend h2 {
    font-size: 22px;
}
.top_recommend ul li {
    font-size: 14px;
}
.top_price h2 {
    font-size: 22px;
}
.top_price {
    margin-top: 50px;
}
.top_price .container .box ul li {
    font-size: 14px;
}
.top_price .container .box a {
    padding: 8px;
    font-size: 14px;
}
.top_price .container {
    gap: 15px;
    margin-bottom: 30px;
}
.top_content {
	padding: 0;
}

/*---------------------------------------------*/
/*-------------------- sub --------------------*/
/*---------------------------------------------*/
.sub_container {
    margin-top: 60px;
}
.sub_wrap h1 {
    font-size: 24px;
}
.sub_wrap > p {
    margin-bottom: 30px;
    font-size: 14px;
}
.sub_wrap dl {
    margin-bottom: 15px;
}

/*----------------------------------------------*/
/*-------------------- form --------------------*/
/*----------------------------------------------*/
.form_wrap .container dl {
    grid-template-columns: 1fr;
}
.form_container {
    margin-top: 70px;
}
.form_wrap h1 {
    font-size: 24px;
}
.form_wrap .container dl dd input {
    padding: 10px 15px;
    font-size: 15px;
}
.form_wrap .container dl dt {
    font-size: 15px;
}
.form_wrap .container dl dd span {
    font-size: 15px;
}
.form_wrap .bottom button {
    padding: 10px;
    font-size: 16px;
}
.form_wrap .container {
    margin-bottom: 40px;
}

/*-------------------- @media(max-width:768px)->end --------------------*/
}
/*--------------------------------------------------------------------*/
/*------------------------------ sp-end ------------------------------*/
/*--------------------------------------------------------------------*/