/* CSS Document */
/*----- last up date 20170117 -----*/

.sp{display:none;}
.pc{display:block;}

/*--- base ---*/

@media only screen and (max-width:840px){

*{font-family: 'Noto Sans JP';}

article{position: relative;}

body{width:100%; overflow-x:hidden; font-size:11px; font-size:calc(30% + 2vw); background:#ebe8e0;}
#wrap{background:#fff;}
img{width:100%; height:auto;}
*.pc{display:none;}
*.sp{display:block;}

body,
#wrap header{
	position:relative;
	width:100%;
	overflow-x:hidden;
	right:00;
	}

section{
	margin-bottom:5%;
	}

#wrap header,
#wrap header nav,
#wrap header nav ul,
#wrap header nav ul > li,
.topNav .tNavWrap ul,
.topNav .tNavWrap,
.pickup ul,
.list .listWrap,
.list,
.category ul,
.link ul,
.link h2,
.category div,
footer ul,
nav.fNav{
	width:100%;
	}

header nav > ul > li ul img,
header nav > ul > li ul br,
.link ul > li p{display:none;}

	
/*---==============================---*/
/*---======= header構成 ===========---*/
/*---==============================---*/

header nav > ul:after{background:none; width:100%; margin:0;}

#wrap header nav{
	height:62px;
	}

#wrap header nav > ul{
	width:70%;
	position:fixed;
	right:-500px;
	background-color:#ebe8e0;
	text-align:left;
	justify-content:start;
	}

#wrap header nav ul > li{position:relative;}
header nav > ul > li:first-child > a{margin:0;}
#wrap header nav > ul > li > a{padding:10px 0 10px 35px; line-height:27px;}
header nav > ul > li > a{
	padding:0;
	margin:0;
	display:block;
	width:100%;
	height:10vw;
	border-bottom:2px #443730 dotted;
	}

header nav > ul > li:nth-last-child(n+2) > a::before{top:2.5vw; margin-left:10px;}
#wrap header nav ul li:after a{content:">"; position:absolute; right:0; width:10px;}

header nav > ul > li:nth-child(1) > a,
header nav > ul > li:nth-child(2) > a,
header nav > ul > li:nth-child(3) > a,
header nav > ul > li:nth-child(4) > a,
header nav > ul > li:nth-child(5) > a{width:100%;}
#wrap header nav > ul > li > a{padding-left:46px;}

header nav > ul > li ul{
	position:static;
	padding:2% 0;
	top:0;
	left:0;
	}

header nav > ul > li:nth-child(n+2) ul > li:before{
	content:"・";
	width:15px;
	height:5px;
	margin-top:0px;
	display:inline-block;
	}

header nav > ul > li:nth-child(n+2) ul > li{width:98%; height:7vw; text-align:left; padding-left:2%;}
header nav > ul > li:nth-child(n+2) ul > li > a{
	color:#79766f;
	white-space:nowrap;
	width:100%;
	text-align:left;
	font-size:calc(30% + 2vw);
	}

#wrap header nav ul > li.form{
	position:absolute;
	left:-200vw;
	width:100vw;
	top:97vw;
	}

header nav > ul > li > form{width:90%; padding:3vw;}
header nav > ul > li > form input.sP{top:2.5vw;}

#wrap header nav div.menu{
	position: absolute;
	z-index: 999;
	width: 30px;
	height: 33px;
	top:2%;
	right:2%;
	background:#fff;
	padding:1% 2%;
	}

#menuButton {
	overflow: hidden;
	display: block;
	position: relative;
	z-index: 0;
	width: 100%;
	height: 50px;
	cursor: pointer;
	}

#menuButton span,
#menuButton:before,
#menuButton:after {
	display: block;
	position: absolute;
	top:-17px;
	bottom: 0;
	left:0;
	right: 0;
	width: 100%;
	height: 5px;
	margin: auto;
	background: #4f3528;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	}

#menuButton span {
	overflow: hidden;
	z-index: 1;
	color: #4f3528;
	}

#menuButton:before {
	z-index: 2;
	transform: translate(0, -12px);
	content: "";
	}

#menuButton:after {
	z-index: 2;
	transform: translate(0, 12px);
	content: "";
	}

#menuButton span{
	opacity: 1;
	transition: opacity 150ms 50ms;
	}

#menuButton:before,
#menuButton:after {
	transition: transform 200ms;
	}

#menuButton.active span {
	opacity: 0;
	transition: opacity 150ms;
	}

#menuButton.active:before {
	transform: rotate(45deg);
	}

#menuButton.active:after {
	transform: rotate(-45deg);
	}



/*---==============================---*/
/*---========== top構成 ===========---*/
/*---==============================---*/

section h2{font-size:5vw;}

.sliderWrap{z-index:0; height:161vw; overflow:hidden; width:100%;}
.slick-slider .slick-track, .slick-slider .slick-list {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	padding: 0 !important;
	z-index: 0;
}
	

#topSlider.slick-slider .slick-track,
#topSlider.slick-slider .slick-list{
	position: relative;
	left: -23vw;
	width: 150%;
}
	
.slider .sliderWrap{z-index:1; height:40vw;}
.sliderWrap #contentSlider .slick-slide{width:130px;}
.sliderWrap .slick-initialized .slick-slide{margin:0 3px;}

.slick-dots {
	width: 100%;
	padding: 0;
	list-style: none;
	text-align: center;
	z-index: 99;
	position: static;
	top: auto;
}

	
.sliderWrap #contentSlider .slick-prev{top:20%; left:-80%;}
.sliderWrap #contentSlider .slick-next{top:20%; right:-80%;}

.topNavWrap form{
	width:98%;
	padding:3vw;
	margin:0 1%;
	z-index:901;
	position:absolute;
	border:solid 2px #b8b4aa;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.4) inset;
	border-radius:30px;
	background:#ebe8e0;
	text-align:left;
	top:-18vw;
	box-sizing:border-box;
	}

.topNavWrap form input{
	border:none;
	background:none;
	}

.topNavWrap form input[type="submit"]{
	background:url(https://www.mitoyo-kanko.com/site/wp-content/themes/mitoyo/images/common/h-nav_sprite.png) no-repeat 0 -116px;
	width:27px;
	height:27px;
	position:absolute;
	right:5px;
	top:10px;
	text-indent:-9999px;
	border:none;
	box-shadow:none;
	}

.topNav{height:60vw; margin-top:81vw;}
.topNav .tNavWrap{top:0;}
.topNav .tNavWrap ul{
		width:98%;
		background-size:100%;
		margin:0 1%;
		justify-content:start;
		height:13vw;
		}

.topNav .tNavWrap ul > li{
	margin:4vw 0;
	}

.topNav .tNavWrap ul:nth-child(1),
.topNav .tNavWrap ul:nth-child(2),
.topNav .tNavWrap ul:nth-child(3),
.topNav .tNavWrap ul:nth-child(4){padding:0 1vw 0 14vw;}
.topNav .tNavWrap ul:nth-child(4),
.topNav .tNavWrap ul:nth-child(5){width:48%;}
.topNav .tNavWrap ul:nth-child(1) > li:first-child a,
.topNav .tNavWrap ul:nth-child(2) > li:first-child a,
.topNav .tNavWrap ul:nth-child(3) > li:first-child a,
.topNav .tNavWrap ul:nth-child(4) > li:first-child a{width:14vw;}
.topNav .tNavWrap ul:nth-child(5) > li{width:49%; margin-top:1vw;}
.topNav .tNavWrap ul:nth-child(1) > li:nth-child(2) img{width:14vw;}
.topNav .tNavWrap ul:nth-child(1) > li:nth-child(3) img{width:11vw;}
.topNav .tNavWrap ul:nth-child(1) > li:nth-child(4) img{width:18vw;}
.topNav .tNavWrap ul:nth-child(1) > li:nth-child(5) img{width:11vw;}
.topNav .tNavWrap ul:nth-child(1) > li:nth-child(6) img{width:20vw;}
.topNav .tNavWrap ul:nth-child(2) > li:nth-child(2) img{width:14vw;}
.topNav .tNavWrap ul:nth-child(2) > li:nth-child(3) img{width:11vw;}
.topNav .tNavWrap ul:nth-child(2) > li:nth-child(4) img{width:11vw;}
.topNav .tNavWrap ul:nth-child(3) > li:nth-child(2) img{width:14vw;}
.topNav .tNavWrap ul:nth-child(3) > li:nth-child(3) img{width:17vw;}
.topNav .tNavWrap ul:nth-child(3) > li:nth-child(4) img{width:17vw;}
.topNav .tNavWrap ul:nth-child(3) > li:nth-child(5) img{width:14vw;}
.topNav .tNavWrap ul:nth-child(3) > li:nth-child(6) img{width:20vw;}
.topNav .tNavWrap ul:nth-child(4) > li:nth-child(2) img{width:7vw;}
.topNav .tNavWrap ul:nth-child(4) > li:nth-child(3) img{width:11vw;}

.pickup ul{margin:0 auto 0;}
.pickup ul > li{width:48%; margin:0 0 10px;}
.pickup ul > li:nth-child(2n+2){margin-left:2%;}
.pickup ul > li.hot::before{
	width:25%;
	height:23%;
	background-size:100%;
	}

.pickup.widget ul{
	justify-content:start;
	width:98%;
	margin:1%;
	}

.pickup.widget ul > li{
	width:calc(99% / 2);
	margin:1% 0;
	}

.pickup.widget ul > li:nth-child(1),
.pickup.widget ul > li:nth-child(2){
	width:100%;
	margin:1% 0;
	}

.pickup.widget ul > li:nth-child(2n+4){
	margin:0;
	margin:1% 0 1% 1%;
	}
	
.list .listWrap h2,
.widget.widgetWrap h2{
	border-bottom:#675c55 5px solid;
	color:#675c55;
	padding:10px 0;
	text-indent:5px;
	position:relative;
	font-size:20px;
	font-weight:bold;
	font-family: "Rounded Mplus 1p";
	text-align:left;
	}
	
.widget.widgetWrap,
.widget.widgetWrap h2{
	max-width:1000px;
	width:100%;
	margin:0 auto 10px;
	}
	
	
.widget.widgetWrap > p{
	margin:2vw 4vw;
	}

.widget.widgetWrap ul > li:nth-child(1),
.widget.widgetWrap ul > li:nth-child(2),
.widget.widgetWrap ul > li:nth-child(3),
.widget.widgetWrap ul > li:nth-child(4),
.widget.widgetWrap ul > li:nth-child(5),
.widget.widgetWrap ul > li:nth-child(6),
.widget.widgetWrap ul > li:nth-child(7),
.widget.widgetWrap ul > li:nth-child(8){
	text-align:center;
	margin:5vw;
	width:100%;
	}
	
.widget.widgetWrap ul > li:nth-child(1){
	margin-top:0;
	}

.widget.widgetWrap ul > li:nth-child(2n+1){
	margin-bottom:0;
	}

.widget.widgetWrap ul > li:nth-child(2n+1) img{
	margin:3vw 0;
	width:94vw;
	}

.widget.widgetWrap ul > li:nth-child(2n) img{
	display:none;
	}

.widget.widgetWrap ul > li p{
	text-align:left;
	}

.widget.widgetWrap ul > li p input{
	display: block;
	width: 96%;
	padding: 4px 2%;
	border: none;
	outline: none;
	background-color: #efefef;
	}


.mitoyo{
	background:url(https://www.mitoyo-kanko.com/site/wp-content/themes/mitoyo/images/top/section_bg_01_sp.png) repeat-x top center;
	background-size:110%;
	height:130vw;
	}
	

.mitoyo h2, .mitoyo div{width:80%;}
.mitoyo h2{font-size:7vw; padding-top:60vw;}

article section ul.bnrs02 li,
article section ul.bnrs03 li{width:160%; margin:0 -30%;}

.list .listWrap h2{font-size:5vw;}
.list .listWrap h2 a{right:5vw;}
.list .listWrap ul > li::after{background:none; border-bottom:dotted 3px #ccc; height:7px;}
.list .listWrap{float:none;}
.list .listWrap:first-child{padding-right:0; margin-bottom:10%;}

.category ul > li,
.link ul > li{width:47%;}

.link ul > li h3{
	float:right;
	width:70%;
	white-space:nowrap;
	}

.category ul > li:before{
	width:50px;
	height:32px;
	background-size:100%;
	}

	.category ul > li.active > a:nth-child(1){
			height:auto;
	}

.list .listWrap ul{width:95%; margin:0 2.5%;}


/*---==============================---*/
/*---======= footer構成 ===========---*/
/*---==============================---*/

footer{padding:5% 0;}
footer ul > li{width:98%; margin:1% 1% 10%;}
nav.fNav ul > li{margin:1vw 0.5vw; justify-content:start;}
footer p.toLink{width:10%; height:10%; bottom:0;}

footer .wp-my-instagram ul.wpmi-list > li{width:calc(100% / 2); margin:0;}


}