﻿@charset "utf-8";
/* CSS Document */

/*----------------
Product Information　アイコン 
------------------*/
.products_icon{
	justify-content: flex-start;
}
.products_icon li{
	position:relative;
	font-size:1.4rem;
	color:#ff0909;
	margin-right:1em;
	padding-left:2.3em;
	line-height:1;
}
.product_box .products_icon li{
	font-size:0.7em;
}
.products_icon li:before {
    position: absolute;
    content: "";
    width: 2.2em;
    height: 2.2em;
    left: 0em;
    top: 50%;
    margin-top: -1.2em;
}
.products_icon li.new:before{
	background: url(/products/common/img/icon_new.svg) center center/contain no-repeat;
}
.products_icon li.period:before{
	background: url(/products/common/img/icon_calendar.svg) center center/contain no-repeat;
}
.products_icon li.local:before{
	background: url(/products/common/img/icon_map.svg) center center/contain no-repeat;
}
.products_icon li.omiyage:before{
	background: url(/products/common/img/icon_bag.svg) center center/contain no-repeat;
}


/*----------------
バナーエリア 
------------------*/
#banner_area{
	background-color:#f1eee9;
	padding:4rem 0;
}
#banner_area ul{
	justify-content:space-between;
}
#banner_area li{
	/*width:31.82%;*/
  width: 48.5%;
		border-radius:0.5rem;

}
#banner_area li img{
	width:46.9%;
	height:auto;
}
#banner_area li a{
	flex-wrap:nowrap;
	align-items: stretch;
	transition-duration:0.3s;
}
#banner_area li a:hover{
	opacity:0.7;
}
#banner_area li div{
	background-color:#FFF;
	justify-content: center;
	flex-direction: column;
	width:53.1%;
	box-sizing:border-box;
	padding:0 5%;

}
#banner_area li div p{
	font-size:1.7rem;
	color:#EB0100;
	padding:0.4em 0;
	border-top:0.1rem solid;
	border-bottom:0.1rem solid;
	width:100%;
	box-sizing:border-box;
	text-align:center;
}
#banner_area li a img {
    align-self: flex-start;
}


/*---------------------------------------------------------------
横幅768px～1190pxまでのレイアウト
---------------------------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1150px){
#top .right h1 {
	font-size:3.36vw;
}
#banner_area li div p:nth-of-type(1){
	font-size:1.35vw;
}
#banner_area li div p:nth-of-type(2){
	font-size:1.69vw;
}



}





/*---------------------------------------------------------------
スマホレイアウト
---------------------------------------------------------------*/
@media screen and (max-width:767px){

/*----------------
Product Information　アイコン 
------------------*/
.products_icon li{
	font-size:1.2rem;
}
.products_icon li:before {
    margin-top: -1.15em;
}
.products_icon li.new:before{
	background-size:contain;
}
.products_icon li.period:before{
	background-size:contain;
}
.products_icon li.local:before{
	background-size:contain;
}

/*----------------
バナーエリア 
------------------*/
#banner_area {
    padding: 3rem 0;
}
#banner_area li {
    width: 100%;
	margin-bottom:3vw;
}
#banner_area li:last-child {
	margin-bottom:0vw;
}
#banner_area li div p:nth-of-type(1) {
    line-height: 1.4;
}
#banner_area li div {
    padding: 0 3.5%;
}
#banner_area li div p:nth-of-type(1) {
    font-size: 1.4rem;
}
#banner_area li div p:nth-of-type(2) {
    font-size: 1.5rem;
	padding:0.4em 0 0.4em 0.4em;
}


	
}
