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

/*  Reset

/* ------------------------------------------------------------------------ */

html {
	overflow-y	: scroll;
	height		: 100%;
	font-size	: 62.5%;
	-webkit-text-size-adjust: 100%;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,blockquote {
	margin 	: 0;
	padding : 0;
}

fieldset {
	display	: inline;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-style : normal;
}

body/**/table {
	line-height	: 1.5;
}

q:before,
q:after {
	content : '';
}

object,embed {
	vertical-align : top;
}

hr,legend	{
	display : none;
}

h1,h2,h3,h4,h5,h6 {
	font-size : 100%;
}

img,abbr,acronym,fieldset {
	border : 0;
}

li {
	list-style-type : none;
}

img[usemap] {
	border		: none;
	height		: auto;
	max-width	: 100%;
	width		: auto;
}

img {
	border		: 0;
	max-width	: 100%;
}

i {
	padding	: 5px 5px 2px 0;
}

p {
	word-wrap: break-word;
}

strong{
	color: #054994;
}

/* Flexible Images */
img{
    max-width	: 100%;
    height		: auto;
    width /***/	: auto;
}

submit	{ -webkit-appearance : none;}

/* ------------------------------------------------------------------------ */

/*  Basic Style

/* ------------------------------------------------------------------------ */

body {
	margin		: 0;
	padding		: 0;
	height		: 100%;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN","メイリオ",Meiryo,Sans-Serif;
	font-weight: 500;	
	font-size	: 1.6rem;
	font-size	: 16px;
	line-height	: 1.8;
	text-align	: center;
	color		: #333;
	-webkit-text-size-adjust	: 100%;
	word-wrap: break-word !important;
}

@media screen and (max-width:550px) {
body {
	font-size	: 1.6rem;
	font-size	: 16px;
}
}
#wrap{
	margin		: 0 auto;
	text-align	: center;
}

body > #wrap { height : auto;width: 100%;}


/* Link
--------------------------------------------------------------------------- */

.opacity a:hover img{
	opacity: 0.85;
}

a:link	{
	text-decoration	: none;
	color			: #333;
}

a:visited	{
	text-decoration	: none;
	color			: #333;
}

a:hover	{
	text-decoration	: underline;
}


/* ------------------------------------------------------------------------ */

/* Hedaer

/* ------------------------------------------------------------------------ */

header {
	padding: 20px;
	display: flex;
	position:fixed;
	z-index: 100;
	width: 100%;
	background: #FFF;
	box-sizing: border-box;
	align-items: center;
	flex-direction: row-reverse;
}
	header a{
		display: inline-block;
		transition: 0.3s;
	}
	header a:hover{
		text-decoration: none;
		opacity: 0.7;
	}
		header a span{
			display: block;
			color: #5b3932;
		}
	header h1{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	header h1 img{
		max-width: 286px;
		width: 100%
	}
@media all and (-ms-high-contrast: none){
header {
	align-items: flex-start !important;
}
header h1 a img{
	padding-top: 5px;
}
}

@media screen and (max-width:768px) {
		header>a{
			position: relative;
			top: 3px;
		}
}

@media screen and (max-width:550px) {
	header{
		padding: 10px 15px;
		align-items: center;
	}
		header h1 {
			width: 51%;
		}
		header h1 a{
			width: 100%;
		}
		header a{
			width: 34px;
		}
		header a span{
			font-size: 11px;
		}
		
	header h1 img{
		max-width: 186px;
		width: 100%
	}
}
@media screen and (max-width:520px) {
		header h1 {
			width: 40%;
		}
}
@media screen and (max-width:450px) {
		header h1 {
			width: 54%;
		}
}
@media screen and (max-width:325px) {
		header h1 {
			width: 60%;
		}
			header h1 img{
				max-width: 176px;
			}
		
}

/* ------------------------------------------------------------------------ */

/* Navigation

/* ------------------------------------------------------------------------ */

nav .navToggle {
	display: none;
	z-index: 100;
	transition: 0.3s;
}
nav .navToggle:hover {
	opacity: 0.7;
}

nav ul.nav {
	display: none;
	align-items: center;
	margin-left: 15px;
}

nav ul.active{
	display: block;
	align-items: center;
	font-size: 20px;
}


nav ul.nav li span {
	display: inline-block;
	color: #ffffff;
	font-size: 0.75rem !important;
	font: 75%/1.231 "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, MS PGothic, arial, sans-serif;
}

.navToggle {
		display: block !important;
		position: fixed;
		/* bodyに対しての絶対位置指定 */
		right: 25px;
		top: 25px;
		width: 50px;
		height: 51px;
		cursor: pointer;
		z-index: 3;
		text-align: center;
	}
	.navToggle span {
		display: block;
		position: absolute;
		/* .navToggleに対して */
		width: 50px;
		border-bottom: solid 1px #5b3932;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
		left: 6px;
	}
	.navToggle span:nth-child(1) {
		top: 0px;
	}
	.navToggle span:nth-child(2) {
		top: 20px;
	}
	.navToggle span:nth-child(3) {
		top: 40px;
	}
	.navToggle span:nth-child(4) {
		border: none;
		color: #5b3932;
		font-size: 13px;
		top: 50px;
	}
	/* 最初のspanをマイナス45度に */
	.navToggle.active span:nth-child(1) {
		top: 18px;
		left: 6px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	/* 2番目と3番目のspanを45度に */
	.navToggle.active span:nth-child(2), .navToggle.active span:nth-child(3) {
		top: 18px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	headerp ul {
		background: #ccc;
		margin: 0 auto;
		padding: 0;
		width: 100%;
	}
	header ul li {
		font-size: 1.1em;
		list-style-type: none;
		padding: 0;
		width: 100%;
		border-bottom: 1px dotted #333;
	}
	/* 最後はラインを描かない */
	header ul li:last-child {
		/*padding-bottom: 0;*/
		border-bottom: none;
	}
	/* このクラスを、jQueryで付与・削除する */
	header.active {
		transform: translateY(0%);
	}
@media screen and (max-width:550px) {
.navToggle {
    right: 25px;
    top: 15px !important;
    width: 34px;
    height: 34px;
}
.navToggle span {
    width: 36px;
}
.navToggle span:nth-child(1) {
    top: 2px;
}
.navToggle span:nth-child(2) {
    top: 12px;
}
.navToggle span:nth-child(3) {
    top: 22px;
}
.navToggle span:nth-child(4) {
    top: 30px;
	font-size: 11px;
}
}

@media screen and (max-width:325px) {
.navToggle span:nth-child(4) {
	font-size: 11px;
}
}
/* ------------------------------------------------------------------------ */

/* Contents

/* ------------------------------------------------------------------------ */

#mainBlock {
	clear : both;
}

/* ------------------------------------------------------------------------ */

/* Footer

/* ------------------------------------------------------------------------ */

footer {
	clear : both;
	padding: 2.5% 0 2%;
	border-top: 1px solid #CCC;
}

footer .footer_in{
	max-width: 1080px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: first baseline;
}
	footer .footer_in p.sell:before{
		content:url(../img/footer/icon_footer01.png);
		position: relative;
		top: 2px;
		padding-right: 8px;
	}
		footer .footer_in p a .fa{
			display: none;
		}
		
	footer .footer_in ul{
		display: flex;
		flex-wrap: wrap;
		width: 40%;
		text-align: left;
	}
		footer .footer_in ul h4{
			font-weight:500;
			font-size: 1.6rem;
			padding-bottom: 10px;
		} 
		footer .footer_in ul h4:before{
			content:url(../img/footer/icon_footer02.png);
			position: relative;
			top: 2px;
			padding-right: 8px;
		} 
		footer .footer_in ul li{
			font-size: 1.4rem;
			line-height: 1.8;
		} 
		footer .footer_in ul li:before{
			content: "";
			position: relative;
			padding-right: 10px;
			border-top: 1px solid;
			top: 40%;
			margin-right: 5px;
		} 
		footer .footer_in ul li:first-child{
			width: 100%;
			padding-right: 0;
		} 
		footer .footer_in ul li:first-child:before{
			content: none;
		} 
		footer .footer_in ul li:nth-child(2){
			padding-right: 60px;
		} 
		footer .footer_in ul li:nth-child(3){
			padding-right: 60px;
		} 
		footer .footer_in ul li:nth-child(4){
			padding-right: 50px;
		} 
		footer .footer_in ul li:nth-child(5){
			padding-right: 32px;
		} 
		footer .footer_in ul li a .fa{
			display:none;
		} 
		

footer p small{
	margin-top: 4%;
	color: #808080;
	display: block;
}

.icon_style{
	display: none;
}


@media screen and (max-width:1080px) {
	footer{
		padding: 2.5% 25px 2%;
	}
		footer .footer_in ul {
			width: 23%;
		}
}
@media screen and (max-width:768px) {
	footer{
		padding: 2.5% 25px 2%;
	}
		footer .footer_in ul h4 {
			padding-bottom: 5px;
		}
}
@media screen and (max-width:700px) {
		footer .footer_in a.none {
			width: 22%;
		}
		footer .footer_in ul {
			width: 26%;
		}
}
@media screen and (max-width:630px) {
	footer .none{
		display: none;
	}
footer {
    padding: 0 0 2%;
	color: #FFF;
	font-size: 1.6rem;
	text-align: left;
	background:#5b3832;
	border-top: none;
}
	footer a{
		color: #FFF !important;
		font-size: 1.6rem;
	}
	footer .footer_in {
		display: block;
	}
		footer .footer_in p.sell {
			padding: 0;
		}
		footer .footer_in p.sell a{
			padding: 6% 0 4%;
			display: inline-block;
			width: 100%;
			box-sizing: border-box;
			background:#5b3832;
			position: relative;
			border-bottom: 1px solid #8d766e !important;
		}
		footer .footer_in p.sell a i{
			position: absolute;
			right: 15px;
			font-size: 2.7rem;
			top: 13px;
		}
		footer .footer_in p.sell a:hover{
			text-decoration: none;
			opacity: 0.8;
		}
		footer .footer_in p.sell::before {
			content: none;
		}
		footer .footer_in p.sell img {
			width: 20px;
			position: relative;
			top: 3px;
			padding: 0px 8px 0px 15px;
		}
		footer .footer_in p a .fa{
			display: inline-block;
		}
		
footer .footer_in ul {
    width: 100%;
}	
	footer .footer_in ul h4 {
			position: relative;
	}
	footer .footer_in ul h4 i{
			position: absolute;
			right: 15px;
			font-size: 2.7rem;
			top: -6px;
	}
	footer .footer_in ul h4::before {
			content: none;
	}
	footer .footer_in ul h4 img {
		content: none;
		padding: 0px 8px 0px 15px;
		width: 20px;
		position: relative;
		top: 6px;
	}
	footer .footer_in ul li:first-child {
		padding: 6% 0 4%;
		background:#5b3832;	
	}
	footer .footer_in ul li a{
		background:#745751;	
		display: inherit;
		padding: 5% 20px;
		width: 100%;
		border-bottom: 1px solid #8d766e;
		position: relative;
	}
	footer .footer_in ul li a:hover{
		text-decoration:none;
		opacity: 0.8;
	}
	footer .footer_in ul li a i{
		position: absolute;
		right: 15px;
		font-size: 2.7rem;
		top: 10px;
	}
	footer .footer_in ul li a .fa{
		display: block;
	} 
	footer .footer_in ul li a span{
		margin-left: 25px;
	}
	footer .footer_in ul li a span:before{
		content: "";
		position: relative;
		padding-right: 15px;
		border-top: 1px solid #aa9a97;
		top: 40%;
		margin-right: 10px;
	}
	footer .footer_in ul li::before {
		content: none;
	}	
footer .footer_in ul li:nth-child(2),footer .footer_in ul li:nth-child(3),footer .footer_in ul li:nth-child(4),footer .footer_in ul li:nth-child(5),footer .footer_in ul li:nth-child(6) {
    padding-right: 0;
    width: 100%;
	display: inherit;
}	

.sns{
	background:#5b3832;
	padding: 5% 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
	.sns a:first-child{
		width: 40%;
		margin-right: 30px;
	}
	.sns a:nth-child(2){
		width: 13%;
	}
footer p{
	padding:0 20px;
	font-size: 1rem;
}
footer p small{
	margin-top: 0;
	color: #8f7169;
	text-align: center;
}
.icon_style{
	display: inline-block;
}
}

/*TOPへ戻る*/
 
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
	z-index: 999999999999;
}
 
#page-top a {
    display: block;
	background: rgba(91, 56, 50,1);
	border-radius: 50%;
	width: 60px;
	height:60px;
	box-shadow: 0px 0px 5px rgba(255,255,255,0.3);
}
 
#page-top a:hover {
    text-decoration: none;
	opacity: 0.8;
}
#page-top a span {
    position: absolute;
    top: 25px;
    left: 23px;
    width: 15px;
    height: 15px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    box-sizing: border-box;
}

@media screen and (max-width:630px) {
#page-top a {
	width: 50px;
	height:50px;
}
 
#page-top a span {
    position: absolute;
    top: 23px;
    left: 20px;
    width: 10px;
    height: 10px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    box-sizing: border-box;
}
}