@charset "UTF-8";

/**
 * 各ページ用CSS
 */
/* topページ スライダー */
#toppage .top_visual_ {
	padding: 0;
}
#toppage .top_visual_ .bx-wrapper {
	box-shadow: none;
	border: 0;
	margin-bottom: 0;
}
#toppage .top_visual_ .bx-wrapper .bx-pager {
	padding-top: 0;
	bottom: 8.67%;
}
#toppage .bx-wrapper .bx-pager.bx-default-pager a {
	background: #fff;
}
#toppage .bx-wrapper .bx-pager.bx-default-pager a:focus,
#toppage .bx-wrapper .bx-pager.bx-default-pager a:hover,
#toppage .bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #000;
}

#toppage .top_visual_ .slide1_,
#toppage .top_visual_ .slide2_,
#toppage .top_visual_ .slide3_ {
	position: relative;
}
#toppage .top_visual_ .caption_,
#toppage .top_visual_ .subcaption_ {
	position: absolute;
	text-align: left;
	font-family: Garamond;
}
#toppage .top_visual_ .slide1_ .caption_ {
	font-size: 5vw;
	line-height: 5.5vw;
	top: 32%;
	left: 1%;
}
#toppage .top_visual_ .slide2_ .caption_ {
	font-size: 5vw;
	line-height: 5.5vw;
	top: 32%;
	left: 1%;
}
#toppage .top_visual_ .slide3_ .caption_ {
	color: #ffffff;
	font-size: 5vw;
	line-height: 5.5vw;
	top: 38%;
	right: 3%;
}
#toppage .top_visual_ .slide3_ .subcaption_ {
	color: #ffffff;
	font-size: 2vw;
	top: 50%;
	right: 1%;
}
/* トップページ コンテンツ */
#toppage section {
	padding: 6% 4%;
}
#toppage section h2 {
	font-size: 5vw;
	font-family: Garamond;
	padding-bottom: 1.5vw;
	position: relative;
}
#toppage section h2:after {
	content: " ";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 5vw;
	height: 0;
	border-bottom: 2px solid #009944;
}
#toppage section .lead_ {
	margin-top: 3%;
	line-height: 1.5;
}
#toppage section ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 100%;
}
#toppage section li {
	margin-top: 3%;
	width: 49%;
}
#toppage section li a {
	display: block;
	position: relative;
}
#toppage section a .caption_ {
	margin-top: 3%;
	font-size: 3vw;
}
#toppage section li a .icon_ {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 20%;
}
#toppage section .more_ a {
	display: block;
	border: 2px solid #323232;
	width: 36.67%;
	margin: 4% auto 0;
	padding: 1.5% 0;
	font-size: 3vw;
	font-family: Garamond;
	text-decoration: none;
}

#toppage .shop_list_,
#toppage .about_us_ {
	background-color: #f5f4f4;
}
#toppage .about_us_ .content_imgbox_ {
	width: 47%;
	margin: 3% auto 0;
}

@media (max-width:750px) {
#toppage section.about_us_{
	background: url(../img/toppage/about_us_img_bg_sp01.png) no-repeat center bottom #f5f6f8;
	background-size: cover;
}
#toppage section.about_us_ .lead_{margin-bottom: 65%;}
}

@media (max-width:940px) {
	#toppage section.about_us_{
	background-size: cover;
	}
}

/* トップページ 751px以上のサイズ */
@media (min-width:751px) {
#toppage section {
	padding: 4% 0;
}
#toppage section h2 {
	font-size: 3vw;
	line-height: 1;
}
#toppage section h2::after {
	width: 3vw;
}
#toppage section a .caption_ {
	display: inline-block;
	font-size: 1.5vw;
}
#toppage section li a .icon_ img {
	max-width: 100%;
	width: auto;
}
#toppage section.products_ ul li {
	width: 24%;
}
#toppage section.products_ .caption_ {
	display: none;
}
#toppage section.products_ a:hover {
	opacity:1;
}
#toppage section.products_ a:hover .caption_ {
	display: inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	z-index: 100;
	color: #ffffff;
	background-color: rgba(0,0,0,.7);
	padding-top: 47%;
}
#toppage section .more_ a {
	display: inline-block;
	width: auto;
	font-size: 1.5vw;
	position: relative;
	margin: 3% auto 0;
	padding: 0;
	padding-bottom: 5px;
	border: 0;
	border-bottom: 1px solid #a5d7b5;
}
#toppage section .more_ a:before {
	content: " ";
	position: absolute;
	right: -10px;
	bottom: -1px;
	width: 10px;
	border-bottom: 1px solid #a5d7b5;
	height: 0px;
}
#toppage section .more_ a:after {
	content: " ";
	position: absolute;
	right: -10px;
	bottom: 1px;
	width: 6px;
	border-bottom: 1px solid #a5d7b5;
	height: 0px;
	transform: rotate(45deg);
}
#toppage .philosophy_inner_ {
	max-width: 1100px;
	margin: 0 auto;
}
#toppage .shop_list_inner_ {
	max-width: 1100px;
	margin: 0 auto;
}
#toppage .products_inner_ {
	max-width: 1500px;
	margin: 0 auto;
}
#toppage .about_us_ {
	min-height: 335px;
	max-height: 425px;
	background: url(../img/toppage/about_us_img_bg01.png) no-repeat center bottom #f5f6f8;
	height: 44vw;
	margin-top: 59px;
}
#toppage .about_us_inner_ {
	position: relative;
	max-width: 980px;
	margin: 0 auto;
	padding-top: 55px;
	/*padding-top: 8vw;*/
}
#toppage section.about_us_ h2,
#toppage section.about_us_ .lead_,
#toppage section.about_us_ .more_ {
	width: 40%;
	margin-left: 60%;
	text-align: left;
}
#toppage section.about_us_ h2::after {
	right: auto;
}
#toppage section.about_us_ .content_imgbox_ {
	position: absolute;
	top: 0;
	left: 0;
	width: 34%;
	margin: 0 13%;
}
}
/* 1100px以上のサイズ 主にフォント関係*/
@media (min-width:1100px) {
#toppage section h2 {
	font-size: 33px;
}
#toppage .top_visual_ .slide1_ .caption_,
#toppage .top_visual_ .slide2_ .caption_ {
	font-size: 55px;
	line-height: 60px;
	left: calc(50% - 540px);
	top: calc(50% - 55px);
}
#toppage .top_visual_ .slide3_ .caption_ {
	font-size: 55px;
	line-height: 60px;
	right: calc(50% - 540px);
	top: calc(50% - 55px);
}
#toppage .top_visual_ .slide3_ .subcaption_ {
	font-size: 22px;
	right: calc(50% - 540px);
}
#toppage section a .caption_ {
	font-size: 16.5px;
}
#toppage section .more_ a {
	font-size: 16.5px;
}
}