@charset "utf-8";
/* Common */
a{
  text-decoration: none;
  color: #000000;
}
.f-13{
  font-size: 1.3rem;
}
.f-15{
  font-size: 1.5rem;
}
.f-18{
  font-size: 1.8rem;
}
.f-24{
  font-size: 2.4rem;
}
.f-en{
  font-family: 'Montserrat', sans-serif;
}
.f-ja{
  font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", Meiryo, sans-serif;
  letter-spacing: 0;
}
.sub{
  font-size: 1.2rem;
  color: #666666;
  letter-spacing: 0;
  margin: 0 0 2% 0;
  display: block;
  vertical-align: top;
}
hr{
  border-bottom: 1px solid #e4e9ec;
  margin: 5% auto 0;
}
.center{
  text-align: center;
}
.left{
  text-align: left;
}
.v-t{
  vertical-align: top;
}
.v-m{
  vertical-align: middle;
}
.h_bar{
  display: none;
}
h2{
  margin: 3% 0;
  font-weight: bold;
}

h3{
  margin: 5% 0;
  font-size: 4.0rem;
}
h4{
font-size: 2.4rem;
  margin: 15% 0 3% 0;
}
.blc{
  display: block;
  line-height: 1.5;
}
.bold{
  font-weight: bold;
}
/* Unique */
#mainArea{
  margin: 0 auto;
  font-size: 62.5%;
  line-height: 2;
  color: #000000;
  letter-spacing: 1px;
}
#mainImg{
  margin: 3% auto 0;
  text-align: center;
}
.bg_{
  background: #fffdd9;
  position: relative;
}
section{
  padding: 7% 0;
  margin: 5% auto;
  text-align: center;
}
.leadText_ p{
  margin: 1% 0;
}
.contentArea_{
  width: 1100px;
  margin: 10% auto;
}
.value_ {
  width: 75%;
  display: inline-block;
  text-align: left;
  font-size: 1.2rem;
  letter-spacing: 0;
  line-height: 1.5;
  vertical-align: middle;
}
.itemLink_ {
  width: 87%;
  display: inline-block;
}
.linkArea_{
  margin: 20px 0;
}
.linkArea_ span{
  background: #fff100;
  width: 32px;
  height: 32px;
  /* line-height: 24px; */
  font-size: 1.8rem;
  bottom: 7px;
  right: 7px;
  display: inline-block;
  text-align: center;
  margin: 0 10px 0 0;
  vertical-align: top;
}
.co_i_{
  width: 60%;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
.co_i_ div{
  width: 48%;
  display: inline-block;
  text-align: center;
  margin: 1% 0 0 0;
    position: relative;
}
.co_i_ div span{
  background: #fff100;
  width: 32px;
  height: 32px;
  display: inline-block;
  /* line-height: 24px; */
  font-size: 1.8rem;
  position: absolute;
  bottom: 7px;
  right: 7px;
}
.co_t_{
  width: 34%;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  margin: 0 0 0 5%;
}
.goodsArea_{
  margin: 0 auto;
  text-align: center;
}
.goodsArea_ ul li{
  width: 29%;
  display: inline-block;
}
.goodsArea_ ul li:nth-of-type(3) .mask_ .caption{
  font-size: 1.3rem;
  color: #000000;
  padding-top: 40px;
  padding-left: 0px;
  text-align: left;
}
.mask_ {
	width:315px;
	height:315px;
	overflow:hidden;
	margin:0;
	position:relative;
}
.mask_ .caption {
  font-size: 1.3rem;
  color: #000000;
  padding-top: 140px;
  padding-left: 0px;
  text-align: left;
}
.mask_ .mask {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	opacity:0;	/* マスクを表示しない */
	background-color:	#fff100;
	-webkit-transition:	all 0.3s ease;
	transition:all 0.3s ease;
}
.mask_:hover .mask {
	opacity:1;	/* マスクを表示する */
	padding-left:30px;	/* 右にずらす */
}
.inner__ {
  width: 900px;
  margin: 0 auto;
}
.list_{
  width: 48%;
  display: inline-block;
}
.list_:nth-child(2){
  width: 42%;
  position: relative;
}
.list_ p{
  margin: 3% 0;
}
.load {
  -webkit-animation: spin 6s linear infinite;
  -moz-animation: spin 6s linear infinite;
  -ms-animation: spin 6s linear infinite;
  -o-animation: spin 6s linear infinite;
  animation: spin 6s linear infinite;
  position: absolute;
  right: 280px;
  bottom: -40px;
}
.load_ {
  -webkit-animation: spin 6s linear infinite;
  -moz-animation: spin 6s linear infinite;
  -ms-animation: spin 6s linear infinite;
  -o-animation: spin 6s linear infinite;
  animation: spin 6s linear infinite;
  position: absolute;
  left: 490px;
  top: -80px;
}

@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
.sub_{
  margin: 50px 0 0 -50px;
}
.sub_::before{
  position: absolute;
  background: #fff100;
  content: "";
  width: 370px;
  height: 250px;
  top: 230px;
  right: 300px;
  z-index: -999;
}
.btn_ {
  width: 58px;
  display: inline-block;
  text-align: left;
  line-height: 2.4;
  letter-spacing: 0.5px;
  margin: 5px 0;
}
.btn_ a {
  border: 1px solid #000000;
  color: #ffffff;
  background-color: #000000;
  text-align: center;
  padding: 0;
  margin: 0;
  transition: all .3s;
  display: inline-block;
  text-decoration: none;
  width: 100%;
}
.btn_ a:hover,.allBtn_ a:hover {
  border: 1px solid #000000;
  color: #000000;
  background-color: #ffffff;
}
.allBtn_ {
  width: 100%;
  display: inline-block;
  text-align: left;
  line-height: 2.4;
  letter-spacing: 0.5px;
  margin: 0;
}
.allBtn_ a {
  border: 1px solid #000000;
  color: #ffffff;
  background-color: #000000;
  text-align: center;
  padding: 15px;
  margin: 0;
  transition: all .3s;
  display: inline-block;
  text-decoration: none;
  font-size: 1.5rem;
  width: 100%;
}