@charset "utf-8";
@import "reset.css";


img{
	max-width: 100%;
	height: auto
}


#container{position: relative}

@media  (max-width: 767px) {
/* 	#container{padding-top: 60px} */
}	


.wrap,
.wrappc{
	margin: 0 auto;
	width: 90%;
	max-width: 1200px;}


@media only screen and (max-width: 768px) {
	.wrap{width: 90%;text-align: left}
	.wrappc{width: 100%;}
}


/* ************************************************ 
*	header
* ************************************************ */

#header{background: #222;}



/* ------------------------------
 gnav
------------------------------ */

#gnav.open {display: block;}
#gnav.close {display: none;}


ul.nav > li a{
	display: flex;
	align-items: center;
	line-height: 1em;
	text-decoration: none;color: #222;
	font-family: 'Karla', sans-serif;
}

ul.nav li {}

ul.nav > li a:before{
	font-family: icomoon;
	padding-right: .5em;
	color: #eee
}


ul.nav > li:nth-child(1) a:before{content: "\e908";}
ul.nav > li:nth-child(2) a:before{content: "\e911";}
ul.nav > li:nth-child(3) a:before{content: "\ea17";}
ul.nav > li.os a:before{content: "\ea47";}
ul.nav > li.ig a:before{content: "\ea92";}
ul.nav > li.co a:before{content: "\e904";color: #222;
	padding-right: 0
}


@media screen and (max-width: 667px) {
	
	body:not(#home) #main{padding-top: 60px}
	body:not(#home) #siteheader{
	position: fixed;
    left: 0;
    top: 0;
    background: #fff;
    width: 100%;
    height: 60px;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 0 1em 0 1em
  }
  
  
  #home #siteheader{background: none}
  /*メニューボタン*/	
  .nav-button {display: block;cursor: pointer;}

  .nav-button,
  .nav-button span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
  }

  .nav-button {
    z-index: 1000;
    position: fixed;
    top:16px;
    right: 16px;
    width: 30px;
    height: 26px;
  }

  .nav-button span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 4px;
  }
  .nav-button span:nth-of-type(1) {top: 0;}
  .nav-button span:nth-of-type(2) {top: 11px;}
  .nav-button span:nth-of-type(3) {bottom: 0;}

  .nav-button.active span:nth-of-type(1) {
    -webkit-transform: translateY(12px) rotate(-45deg);
    transform: translateY(12px) rotate(-45deg);
  }

  .nav-button.active span:nth-of-type(2) {
    opacity: 0;
  }

  .nav-button.active span:nth-of-type(3) {
    -webkit-transform: translateY(-12px) rotate(45deg);
    transform: translateY(-12px) rotate(45deg);
  }
   
  #gnav{
	 position: fixed;
    left: 0;
    top: 0;
    display: none;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
  }
  #gnav .nav {
    height: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    width: 90%;
    margin: 0 auto;
    padding: 80px 0
  }

   ul.nav > li > a {
    display: block;
    padding: 1.3em .5em;
    font-weight: bold
  }

  ul.nav > li > a{display: block;border-bottom: solid 1px rgba(238, 238, 238, 0.6);font-size: 1.2em;
	  color: #fff  }
  ul.nav > li > a:before{color: #ccc}
  ul.nav > li > ul.normal-sub{margin: 1em 0 1.5em}
  ul.nav > li > ul.normal-sub a{display: block;padding:.3em 1em .5em 3em;font-size: 1.1em}
   
   	ul#info_nav{
	   	display: flex;
	   	justify-content: space-around;
	   	flex-wrap: wrap;
	   	width: 100%;
	   	position: fixed;
	   	top: 0;
	   	z-index: 500;
	   	text-align: center;
	   	margin-top: 60px
   	}
   	
   	ul#info_nav li{width: 50%}
	ul#info_nav li a{
		background: #9a221e;
		color: #fff;
		display: block;
		padding: .6em;
		text-decoration: none;
		-webkit-transition: all .3s;
		transition: all .3s;
		border-right: solid 1px #fff;
	}
	ul#info_nav li:last-child a{
		border-right: none
	}
}



@media print, screen and (min-width: 668px) {


	
	
	#header{
	text-align: center;
	padding: 3em 0 2em;
	transition: all 0.3s ease 0s;
	}
	
	#shoplogo{margin-bottom: 1.5em}
	
	#gnav {z-index: 500;background: #fff}

	.nav-button {display: none;}
	
	#gnav {
    display: block !important;
    width: 100%;
	}
	
	

	
	ul.nav {
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
    align-items: center
	}
	
	ul.nav > li > a {
		color: #fff;
	    text-decoration: none;
	    padding: 1.3em 1.2em;
	    text-align: center;
	    display: block;
		-webkit-transition: all .3s;
		transition: all .3s;
		letter-spacing: 1px;}
		
	  
    ul.nav > li:first-child > a{}   
  	
	ul.nav > li > a:hover {color: #999}
	
	ul.nav > li.co a{
	width: 32px;
	height: 32px;
	display: block;
	text-align: center;
	background: #fff;
	border-radius: 50%;
	position: relative;
	padding: 0;
	line-height: 32px;
	margin-left: 1.5em
	}

	
	ul.nav > li.co a:hover{
		background: #999;
		
	}
	
	ul.nav > li.co a:hover:before{color: #fff}
	
	
	ul.nav > li > ul {
	    display: none;
	    width: 100%;
	    background: #fff;
	    position: absolute;
	    z-index: 99;
	    left: 0;
	}
	
	ul.nav > li > ul.normal-sub {
	    width: 300px;
	    left: auto;
	}
	
	ul.nav > li > ul.normal-sub > li {
	    width: 100%;
	    border-bottom: dotted 1px rgba(46, 105, 58, 0.3);
	}
	ul.nav > li > ul.normal-sub > li:last-child{
		border-bottom: none
	}
	ul.nav > li > ul.normal-sub > li a {
		color: #2e693a;
		display: block;
	    padding: .7em 1em;
	    background: #fff;
	}
	
	ul.nav > li > ul.normal-sub > li a:before{
		font-family: icomoon;
		content: "\e974";
	}
	
	
	ul.nav > li > ul.normal-sub > li a:hover{
		background: #035322;
		color: #fff
	}
	

}


@media print, screen and (min-width: 1025px) {
	ul.nav {width: 90%;max-width: 1200px;}
	ul.nav > li > a {
	    padding: 1em 1.5em 1em;
	    font-size: 1.2em;
	}
}


@media only screen and (min-width: 768px) {
	.top-fixed {
	  position:  fixed;
	  top: 0;
	  left: 0;
	  z-index: 100;
	  width: 100%;}
	
	.top-fixed #shoplogo{display: none}
	#header.top-fixed{padding: .5em 0;}
}




@media print, screen and (min-width: 1024px) {
}	





/* ************************************************ 
*	common
* ************************************************ */

#main{}


#contets_title{
	padding: 2em 3em 2em;
	text-align: center
}

#contets_title h1{font-size: 1.8em}

#contets_title h2{margin-top: 1em;
	color: #d36a0c
}

#contets_imgtitle{
	width: 100%;
	height: 150px;
	display: flex;
	align-items: center;
}

#contets_imgtitle h1{font-size: 2.5em;letter-spacing: 2px;color: #fff;
	padding-left: 5%
}

#contets_title h1 span{display: block;font-size: .6em;}

@media screen and (max-width: 667px) {}	


@media print, screen and (min-width: 668px) {
	#contets_title{padding: 2em 0 2em;}
	#contets_title h1{font-size:2.5em;}
	#contets_imgtitle{height: 200px;}
	#contets_imgtitle h1{font-size:3em;letter-spacing: .1em;padding-left: 8%}
}

@media print, screen and (min-width: 1000px) {
	#contets_imgtitle{height: 300px;}
}	
	




/* ************************************************ 
*	CTA
* ************************************************ */

.cta_wrap{
	background: #f3f3f3
}

.cta{
	font-family: "Maru Folk Medium";
	background: rgb(255,120,0);
	background: linear-gradient(180deg, rgba(255,120,0,1) 0%, rgba(255,164,83,1) 91%);
	color: #fff;
}

.cta div{
	display: flex;
	justify-content: center;
	align-items: center;
}

.cta div:before{
	content:"";
	display:inline-block;
	width:30px;
	height:40px;
	background:url(../img/telw.png) no-repeat;
	background-size:contain;
	margin-right: 1em
}	


.cta a{color: #fff;
	font-size: 1.8em;
  	letter-spacing: 0;
  	line-height: 1em;
  	display: block
}

.cta dd{line-height: 1em;margin-top: .3em}
  	
  
@media screen and (max-width: 667px) {
	.cta_wrap{padding: 1em;}
	.cta{padding: .6em 1em .6em;
	border-radius: 5px;
	-webkit-box-shadow:2px 2px 0px #ccc;
	-moz-box-shadow:2px 2px 0px #ccc;
	box-shadow: 2px 2px 0px #ccc;
	position: relative;}
	
	.cta p{width: 100%;
		font-size: 1.2em;
		text-align: center;
		margin-bottom: .5em;
		border-bottom: solid 1px rgba(255, 255, 255, 0.3);}
}	

@media print, screen and (min-width: 668px) {
	.cta{padding: 2em;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: solid 1px #fff
	}
	.cta p{margin-right: 1em;font-size: 1.3em}
	.cta dt{font-size: 1.4em}
	.cta dd{font-size: 1.2em}
}	

@media print, screen and (min-width: 1000px) {
	.cta p{font-size: 1.6em}
}	


/* ************************************************ 
*	.bread_crumb
* ************************************************ */
#bread{
	padding: 1.5em 0;
	margin: 0 auto;}


/* #contents #bread{background: #fff} */


ul.bread_crumb{}
ul.bread_crumb li + li:before{margin: 0 .5em;}
	
ul.bread_crumb li{
	font-size:.9em;
	list-style:none;
	float: left;
}
ul.bread_crumb li a{text-decoration: none;color: #666;
	-webkit-transition: all .3s;
	transition: all .3s;
}
ul.bread_crumb li a:hover{ background: #e8e5e5;}
ul.bread_crumb li span{padding-left: .5em}
ul.bread_crumb li br{display: none}
ul.bread_crumb li.pkhome a{color: #34cb07}
ul.bread_crumb li + li:before {
	margin: 0 .5em 0 0;
	color: #999;
	font-family: icomoon;
	content: "\e977";
}

ul.bread_crumb li.backhome:before{
	font-family: icomoon;
	content: "\e918";
	padding-right: .5em
}

@media (max-width: 480px) {
	ul.bread_crumb li.pkhome a{font-size: 1.1em;}
	ul.bread_crumb li.pkhome{margin-bottom: .3em}
}	











/* ************************************************ 
*	slick
* ************************************************ */


.slick-dots {
    bottom: -35px;
 }


#headline{padding: 3em 0px;
	    background: #eaeee8;
}

#headline ul{
	text-align: left
}

#headline ul li{margin-bottom: .8em}

/* ************************************************ 
*	contact_btn
* ************************************************ */




#contact_btn a{
	display: block;
	width: 100%;
	padding: 1em;
	text-align: center;
	font-family: serif;
	background: #df7503;
	text-decoration: none
}

#contact_btn p{
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center
}

@media screen and (max-width: 667px) {
	#contact_btn p{font-size: 1.2em}
}	

@media (min-width: 668px) {
	#contact_btn p{font-size: 2em;}
}	

@media (min-width: 1024px) {
	#contact_btn{width: 90%;margin: 0 auto}
}

#contact_btn p:before{
	content: '';
	background: url(../img/layout/mail.png)no-repeat center;
	background-size: contain;
	width: 30px;
	height: 30px;
	display: inline-block;
	margin-right: .5em
}


/* ************************************************ 
*	FOOTER
* ************************************************ */

#btn_top{
	right: 2em;
    position: fixed;
    bottom: 5em;
}



#sitefooter ul.link_ban{
	margin-top: 2em
}

#footer_inner .add{
	margin: 1em 0;
}

dl.office_info{
	margin-bottom: 1.5em
}

dl.office_info dt{}

dl.office_info dd{padding-left: 1em}

dl#open dd{border-left: solid 2px #73b9eb}
dl#close dd{border-left: solid 2px #b98cbe}

.cr{font-size: .8em;letter-spacing: 0;
	text-align: center;
	padding: 1.5em;
	letter-spacing: .1em
}

.sisetukijun{
	text-align: center;
	padding: 1em
}

.sisetukijun a{
	color: #666;
	text-decoration: underline
}


@media screen and (max-width: 667px) {
	#footer_inner{
	padding: 3em 0;
	background: url(../img/cs/dot_line_sp.png) no-repeat center top ,
				url(../img/cs/dot_line_sp.png) no-repeat center bottom;
	-moz-background-size:100% auto;background-size:100% auto;
	}
	dl.office_info dt{
		margin-bottom: .5em;
		font-size: 1.1em
	}
}	

@media print, screen and (min-width: 668px) {
	#footer_inner{
	padding: 5em 0;
	background: url(../img/cs/dot_line.png) no-repeat center top ,
				url(../img/cs/dot_line.png) no-repeat center bottom;
	-moz-background-size:100% auto;background-size:100% auto;
	}
	#footer_inner .add{text-align: center}
	
}	


@media print, screen and (min-width: 768px) {
	.info_wrap{
	display: flex;
	justify-content: space-between;
	margin: 0 auto 2em;
	flex-wrap: wrap
	}
	
	.info_wrap div:nth-child(1){width: 48%}
	.info_wrap div:nth-child(2){width: 48%}
	
	dl.office_info{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1.5em
	}
	
	dl.office_info dt{width: 20%}

	dl.office_info dd{width: 80%;padding-left: 1em}


	#footer_inner .add{font-size: 1.1rem}
	.cr{padding: 2em;font-size: .7em;}
}	

@media print, screen and (min-width: 1000px) {
	#sitefooter{padding: 3em 2em 0}
}	





	


/* ************************************************ 
*	more
* ************************************************ */

@media (max-width: 767px) {}	

@media  (min-width: 768px) {	

	.more_sb{
		width: 33%;
		margin: 0 auto
	}

}
.more{margin: 0 auto;text-align: center}

a.morelink{
	display: block;
	margin: 0 auto;
	text-decoration: none;
	border: solid 2px #006932;
	padding: .8em 2em;
	width: 90%;
	max-width: 400px;
	position: relative;
	font-size: 1.2em;
	color: #006932;
}


a.morelink::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-bottom: 14px solid #006932;
  border-left: 14px solid transparent;
}


a.morelink:hover {
	color: #fff;
	background-color: #006932;
	border: solid 2px #006932;
	opacity: 1
}

/* ------------------------------
 Youtube iframe
------------------------------ */		
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    margin: 0 auto
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ************************************************ 
*	prevnext
* ************************************************ */
.pagenav{
	margin: 0 auto;
	padding: 1em 0;
}

.pagenav li {margin: 5px 0}

.pagenav li a{
	display: block;
	text-decoration: none;
	padding: .5em 1em;
	background: #f5f5f5;
	border-radius: 5px;
	position: relative;
	
}
	
.pagenav li.prev{text-align: left;}

.pagenav li.prev a:before{
	font-family: icomoon;
		content: "\e973";
		padding-right: .5em
}
	
.pagenav li.next{text-align: right;}

.pagenav li.next a:after{
		font-family: icomoon;
		content: "\e974";
		padding-left: .5em
}

@media screen and (max-width: 667px) {
	.pagenav{margin: 0 auto;width: 90%}
}	

@media print, screen and (min-width: 668px) {
	.pagenav{
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
	}
	.pagenav li {width: 49.5%;}
}	

@media print, screen and (min-width: 1000px) {}	


/* ************************************************ 
*	Pager
* ************************************************ */

#pager{overflow: hidden;
    position: relative;
    margin-bottom: 50px}
    
    
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
    position: relative;
    color: #665145;
}

.pagination span, .pagination a {
	color: #665145;
    display: block;
    width: auto;
    margin: 0 .3em;
    padding: .4em .5em;
    border: 2px solid #665145;
    background-color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 1.2em;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    position: relative;
    }

/* ページ番号 */
.pagination .pager{
    width: 32px;
}

/* ホバー時 & 現在のページ */
.pagination a:hover,
.pagination .current  {
    color: #fff;
    border-color: #665145;
    background-color: #665145;
}

/* 前へ */
.pagination a.before {
    margin-right: 16px;
}
/* 次へ */
.pagination a.next {
    margin-left: 16px;
}
/* 最初へ */
.pagination a.first {}
/* 最後へ */
.pagination a.last {}

/* Page x / y */
.pagination span.page_num {
    display: none;
}


dl.tax_att{
	border: solid 2px red;
	padding: 1em;
	margin-bottom: 1.5em;
	font-weight: bold;
}
dl.tax_att dt{font-size: 1.3em;color: red;margin-bottom: .5em}
dl.tax_att dd a{background: #fbff00}

@media (max-width: 767px) {
	dl.tax_att{margin: 0 1em 1.5em}
}	


@media  (min-width: 768px) {
	dl.tax_att{text-align: center}
}

/* ------------------------------
 INDEX
------------------------------ */

#notfound > div{
	text-align: center;
	padding: 10% 5%;
	background: #f8f8f8;
	border-radius: 5px;
	position: relative;
	
}