@charset "UTF-8";
#beltbnr {
 display: none;
}
.h_bar{
  display: none;
}
#beltbnr {
	display: none;
}
section{
  margin: 6em 0em 4em
}
.back-g {
	background: #f2f2f2;
}
#mainArea{
    width: 900px;
    margin: 0 auto;
    letter-spacing: 0;
    line-height: 2;
    overflow: hidden;
    margin: 0 auto;
}
.lead {
   width: 90%;
    font-size: 1.3rem;
    margin: 8% auto 15%;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
}
.bold{
  font-weight: 700 !important;
}
.blc{
  display: block;
}
.in-blc{
  display: inline-block;
}
.right{
  text-align: right;
}
.left{
  text-align: left;
}
.center{
  text-align: center;
}
.v-m{
  vertical-align: middle;
}
.f-11 {
  font-size: 1.1rem;
}
.f-12 {
  font-size: 1.2rem;
}
.f-20 {
  font-size: 2.0rem;
}
.f-n {
	font-family: 'Noto Sans JP', sans-serif;
}
.f-vag {
	font-family: vag-rundschrift-d, sans-serif;
	font-weight: 400;
	font-style: normal;
}
.z-2 {
	position: relative;
	z-index: 2;
}
.f-f {
	background:#ec6d72;
}
h2 {
    font-size: 2.8rem;
    line-height: 1.7;
    text-align: center;
    margin-bottom: 8%;
}
h2 span{
  text-shadow:1px 0 0 #222,0 1px 0 #222,-1px 0 0 #222,0 -1px 0 #222;
  color:#fff;
	letter-spacing: 1.5px;
}
h3 {
	font-family: vag-rundschrift-d, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3.2rem;
    line-height: 1.2;
    text-align: left;
    vertical-align: middle;
    display: inline-block;
}
h4 {
    font-size: 2.5rem;
    line-height: 1.7;
    font-family: 'Noto Sans JP', sans-serif;
    color: #fff;
    position: absolute;
    top: -15px;
    right: -21px;
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    z-index: 3;
}
h4 span {
	padding: 5px 3px;
}
.b-or {background: #ffaf33;}
.b-bl {background: #3371ff;}
.b-red {background: #e94b35;}
.b-mg {background: #00bd9c;}
.b-lb {background: #00afff;}
h5 {
    display: flex;
    align-items: center;
	font-size: 1.8rem;
	margin-bottom: 5%;
}
h5:before,
h5:after {
        content: "";
        height: 1px;
        flex-grow: 1;
	background-color: #666;
}
h5:before {
        margin-right: 1rem;
}
h5:after {
        margin-left: 1rem;
}
h6 {
        font-size: 1.6rem;
    line-height: 1.7;
    margin: 0 auto 5%;
    text-align: center;
    font-weight: 800;
}
.item_ {
	width: 94%;
	margin: 0 auto;
}
.img__ {
	position: relative;
        width: 50%;
        display:inline-block;
        vertical-align: middle;
}
.cap__ {
        width: 38%;
        display:inline-block;
        vertical-align: middle;
}

.m-r {margin-right:10%;}
.m-l {margin-left:10%;}
.credit-inner {
    width: 46%;
    display: inline-block;
    vertical-align: middle;
}
.credit-inner:nth-child(2n) {
   margin-right:7%;
}
/*///*/
.img__inner {
	position: relative;
}
.img__inner::before{
   content:"";
   display: block;
   width: 80px;
   height: 80px;
   background-color: #ffaf33;
   position: absolute;
   top: -13px;
   left: -13px;
}
.img__inner::after{
   content:"";
   display:inline-block;
   width: 80px;
   height: 80px;
   background-color: #ffaf33;
   position: absolute;
   bottom: -13px;
   right: -13px;
   z-index: -1;
}
/*///*/
.img__inner-2 {
	position: relative;
}
.img__inner-2::before{
   content:"";
   display: block;
   width: 80px;
   height: 80px;
   background-color: #3371ff;
   position: absolute;
   top: -13px;
   left: -13px;
}
.img__inner-2::after{
   content:"";
   display:inline-block;
   width: 80px;
   height: 80px;
   background-color: #3371ff;
   position: absolute;
   bottom: -13px;
   right: -13px;
   z-index: -1;
}
/*///*/
.img__inner-3 {
	position: relative;
}
.img__inner-3::before{
   content:"";
   display: block;
   width: 80px;
   height: 80px;
   background-color: #e94b35;
   position: absolute;
   top: -13px;
   left: -13px;
}
.img__inner-3::after{
   content:"";
   display:inline-block;
   width: 80px;
   height: 80px;
   background-color: #e94b35;
   position: absolute;
   bottom: -13px;
   right: -13px;
   z-index: -1;
}
/*///*/
.img__inner-4 {
	position: relative;
}
.img__inner-4::before{
   content:"";
   display: block;
   width: 80px;
   height: 80px;
   background-color: #00bd9c;
   position: absolute;
   top: -13px;
   left: -13px;
}
.img__inner-4::after{
   content:"";
   display:inline-block;
   width: 80px;
   height: 80px;
   background-color: #00bd9c;
   position: absolute;
   bottom: -13px;
   right: -13px;
   z-index: -1;
}
/*///*/
.img__inner-5 {
	position: relative;
}
.img__inner-5::before{
   content:"";
   display: block;
   width: 80px;
   height: 80px;
   background-color: #00afff;
   position: absolute;
   top: -13px;
   left: -13px;
}
.img__inner-5::after{
   content:"";
   display:inline-block;
   width: 80px;
   height: 80px;
   background-color: #00afff;
   position: absolute;
   bottom: -13px;
   right: -13px;
   z-index: -1;
}
/*///*/
.about_area {
	width: 85%;
	margin: 0 auto;
	padding: 8% 0;
	position:relative;
}
.about_area::before{
   content:"";
   display:block;
   width:100%;
   height:1px;
   background-color:#222;
   position:absolute;
   top:0;
}
.about_area::after{
   content:"";
   display:block;
   width:100%;
   height:1px;
   background-color: #222;
   position:absolute;
   bottom:0;
   z-index: -1;
}
.about_img {
	width: 33%;
    margin: 0% 10% 0%;
    display: inline-block;
    vertical-align: middle;
}
.about_text {
    width: 38%;
    display: inline-block;
    vertical-align: middle;
}
.caption_ {
	margin: 10% auto 17%;
}
.caption2_ {
        margin: 8% 0 2%;
}
.caption3_ {
    display: inline-block;
    width: 41%;
    margin-left: 7%;
    vertical-align: top;
}
.title_area {
	margin: 0 0 12%;
}
.item-no {
	width: 60px;
    margin-right: 15px;
    vertical-align: middle;
    display: inline-block;
}
.crdit {
    display: inline-block;
    width: 74%;
    vertical-align: middle;
    font-size: 1.1rem;
    line-height: 1.8;
}
.crdit p {
    margin-bottom: 3px;
}
.mb5 {
	margin-bottom: 5px;
}
.mb10 {
	margin-bottom: 10px;
}
.mb20 {
	margin-bottom: 20px;
}
.mb30 {
	margin-bottom: 30px;
}
.img-c img {
	width: 100%;
	-webkit-backface-visibility: hidden;
}
.credit_area {
	width: 80%;
	margin: 0 auto;
	padding: 5% 0;
}
.line_ {
	border: solid #3f3f3f 0.5px;
    margin: 9% 0 2%;
}
/*////*/
.button_1 {
  width: 70px;
  height: 70px;
  border-radius: 50px;
  border: solid 1px #ffaf33;
  background: #ffaf33;
  text-align: center;
  transition : 1s;
}
.eff_1 {
  text-decoration: none;
	line-height: 70px;
	color: #fff !important;
	font-size: 1.5rem;
	letter-spacing: 1px;
}
.button_1:hover{
    background: #fff;
	border: solid 1px #ffaf33;
	color: #ffaf33 !important; 
	transition : .3s;
}
.eff_1:hover {
    color: #ffaf33 !important;
    background: #fff;
}
/*////*/
.button_2 {
  width: 70px;
  height: 70px;
  border-radius: 50px;
  border: solid 1px #3371ff;
  background: #3371ff;
  text-align: center;
  transition : 1s;
}
.eff_2 {
  text-decoration: none;
	line-height: 70px;
	color: #fff !important;
	font-size: 1.5rem;
	letter-spacing: 1px;
}
.button_2:hover{
    background: #fff;
	border: solid 1px #3371ff;
	color: #3371ff !important; 
	transition : .3s;
}
.eff_2:hover {
    color: #3371ff !important;
    background: #fff;
}
/*////*/
.button_3 {
  width: 70px;
  height: 70px;
  border-radius: 50px;
  border: solid 1px #e94b35;
  background: #e94b35;
  text-align: center;
  transition : 1s;
}
.eff_3 {
  text-decoration: none;
	line-height: 70px;
	color: #fff !important;
	font-size: 1.5rem;
	letter-spacing: 1px;
}
.button_3:hover{
    background: #fff;
	border: solid 1px #e94b35;
	color: #e94b35 !important; 
	transition : .3s;
}
.eff_3:hover {
    color: #e94b35 !important;
    background: #fff;
}
/*////*/
.button_4 {
  width: 70px;
  height: 70px;
  border-radius: 50px;
  border: solid 1px #00bd9c;
  background: #00bd9c;
  text-align: center;
  transition : 1s;
}
.eff_4 {
  text-decoration: none;
	line-height: 70px;
	color: #fff !important;
	font-size: 1.5rem;
	letter-spacing: 1px;
}
.button_4:hover{
    background: #fff;
	border: solid 1px #00bd9c;
	color: #e00bd9c !important; 
	transition : .3s;
}
.eff_4:hover {
    color: #00bd9c !important;
    background: #fff;
}
/*////*/
.button_5 {
  width: 70px;
  height: 70px;
  border-radius: 50px;
  border: solid 1px #00afff;
  background: #00afff;
  text-align: center;
  transition : 1s;
}
.eff_5 {
  text-decoration: none;
	line-height: 70px;
	color: #fff !important;
	font-size: 1.5rem;
	letter-spacing: 1px;
}
.button_5:hover{
    background: #fff;
	border: solid 1px #00afff;
	color: #e00bd9c !important; 
	transition : .3s;
}
.eff_5:hover {
    color: #00afff !important;
    background: #fff;
}
/*////*/
.button_6 {
  width: 70px;
  height: 70px;
  border-radius: 50px;
  border: solid 1px #8f5be1;
  background: #8f5be1;
  text-align: center;
  transition : 1s;
}
.eff_6 {
  text-decoration: none;
	line-height: 70px;
	color: #fff !important;
	font-size: 1.5rem;
	letter-spacing: 1px;
}
.button_6:hover{
    background: #fff;
	border: solid 1px #8f5be1;
	color: #8f5be1 !important; 
	transition : .3s;
}
.eff_6:hover {
    color: #8f5be1 !important;
    background: #fff;
}
/*////*/
.button_7 {
  width: 70px;
  height: 70px;
  border-radius: 50px;
  border: solid 1px #065945;
  background: #065945;
  text-align: center;
  transition : 1s;
}
.eff_7 {
  text-decoration: none;
	line-height: 70px;
	color: #fff !important;
	font-size: 1.5rem;
	letter-spacing: 1px;
}
.button_7:hover{
    background: #fff;
	border: solid 1px #065945;
	color: #065945 !important; 
	transition : .3s;
}
.eff_7:hover {
    color: #065945 !important;
    background: #fff;
}
/*////*/
.button_8 {
  width: 70px;
  height: 70px;
  border-radius: 50px;
  border: solid 1px #ff719f;
  background: #ff719f;
  text-align: center;
  transition : 1s;
}
.eff_8 {
  text-decoration: none;
	line-height: 70px;
	color: #fff !important;
	font-size: 1.5rem;
	letter-spacing: 1px;
}
.button_8:hover{
    background: #fff;
	border: solid 1px #ff719f;
	color: #ff719f !important; 
	transition : .3s;
}
.eff_8:hover {
    color: #ff719f !important;
    background: #fff;
}
/*////*/
.button_9 {
  width: 70px;
  height: 70px;
  border-radius: 50px;
  border: solid 1px #7d8286;
  background: #7d8286;
  text-align: center;
  transition : 1s;
}
.eff_9 {
  text-decoration: none;
	line-height: 70px;
	color: #fff !important;
	font-size: 1.5rem;
	letter-spacing: 1px;
}
.button_9:hover{
    background: #fff;
	border: solid 1px #7d8286;
	color: #7d8286 !important; 
	transition : .3s;
}
.eff_9:hover {
    color: #7d8286 !important;
    background: #fff;
}
/*////*/

.button_crdit {
	width: 78%;
	display: inline-block;
	vertical-align: middle;
}
.button_ {
  width: 58px;
  height: 30px;
  border: solid 1px #222;
  background: #fff;
  text-align: center;
  transition : 1s;
  vertical-align: middle;
}
.eff {
  text-decoration: none;
	line-height: 30px;
	color: #222 !important;
	font-size: 1.1rem;
	letter-spacing: 1px;
}
.button_:hover{
    background: #222;
	border: solid 1px #222;
	color: #fff !important; 
	transition : .3s;
}
.eff:hover {
    color: #fff !important;
    background: #222;
}
.btn_all {
    width: 400px;
    text-align: left;
    line-height: 4.2;
    margin: 13% auto 10%;
    vertical-align: middle;
}
.btn_all a {
	width: 100%;
   border: 2px solid #111;
    color: #111;
    background-color: #fff;
    text-align: center;
    padding: 0px;
    font-size: 1.2rem;
	font-weight: 800;
    transition: all 0.3s ease 0s;
    display: inline-block;
    text-decoration: none;
    border-radius: 60px;
}
.btn_all a:hover {
    color: #fff !important;
    background-color: #111;
    border: 2px solid #111;
}
.fade {
    z-index: 2;
	}
.goods_area {
    vertical-align: top;
    margin: 0em 0em 6em;
    display: inline-block;
    width: 42%;
}
.goods_area:nth-child(2n) {
   margin-left: 11em;
}
.topic_area {
    margin: 2em 0em 3em;
    position: relative;
}
.topic_area:nth-child(2n) {
   margin-left: 2em;
}
.topic_area::before,
    .topic_area::after {
      position: absolute;
      content: '';
      width: 30px;
      height: 30px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
.topic_::before,
   .topic_::after {
      position: absolute;
      content: '';
      width: 30px;
      height: 30px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
 .topic_area::before {
        top: 0px;
        left: 15px;
        border-top: 6px solid #b8d03a;
        border-left: 6px solid #b8d03a;
    }
 .topic_::before {
      top: 0px;
      right: 15px;
      border-top: 6px solid #b8d03a;
      border-right: 6px solid #b8d03a;
    }

 .topic_area::after {
        bottom: -35px;
        left: 15px;
        border-bottom: 6px solid #b8d03a;
        border-left: 6px solid #b8d03a;
    }
  .topic_::after {
        bottom: -35px;
        right: 15px;
        border-bottom: 6px solid #b8d03a;
        border-right: 6px solid #b8d03a;
    }