@charset 'utf-8';

body{
  background: #6d7c73 !important;
}

.mb10 {	margin-bottom:10px !important;}
.mb20 {	margin-bottom:20px !important;}
.mb30 {	margin-bottom:30px !important;}
.mb40 {	margin-bottom:40px !important;}
.mb50 {	margin-bottom:50px !important;}
.mb60 {	margin-bottom:60px !important;}
.mb70 {	margin-bottom:70px !important;}
.mb80 {	margin-bottom:80px !important;}
.mb90 {	margin-bottom:90px !important;}
.mb100 {	margin-bottom:100px !important;}

.mt10 {	margin-top:10px !important;}
.mt20 {	margin-top:20px !important;}
.mt30 {	margin-top:30px !important;}
.mt40 {	margin-top:40px !important;}
.mt50 {	margin-top:50px !important;}
.mt60 {	margin-top:60px !important;}
.mt70 {	margin-top:70px !important;}
.mt80 {	margin-top:80px !important;}
.mt90 {	margin-top:90px !important;}
.mt100 { margin-top:100px !important;}

.sp_only {display: none !important;}

#title{
  padding: 75px 0 200px !important;
  h1{
    font-size: 3.6rem;
    line-height: 150%;
    text-align: left;
    color: #fff;
  }
}
#contents{
  >.inner{
    background: #F7F7F7 !important;
    margin: 0 auto;
    padding: 50px;
    >#pkz{
      padding-top: 0;
    }
    &#Catch{
    margin-top: -100px;
    }
    &#Product1{
    background: #EAEAEA !important;
    padding-top: 60px;
    }
    &#Product2{
    padding-top: 60px;
    }
  }

  padding: 0 0 80px;
  .links{
	display: flex;
	justify-content :space-around;
	flex-wrap: wrap;
    text-align: left;
    line-height: 0;
    margin: 0 auto;
    padding: 80px 0 0;
	overflow: hidden;
    >a{
      letter-spacing: normal;
      vertical-align: top;
      width: 45%;
      margin: 0 0 20px;
	  float: left;
      font-size: 1.6rem;
      color: #333;
      background: #fff;
      border: 1px solid #333;
      text-align: center;
      cursor: pointer;
      position: relative;
      transition: 0.3s ease-in-out;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      &:nth-child(n+2){
      }
      &:nth-child(4n){
        margin-right: 0;
      }
      &:hover,
      &.active{
        text-decoration: none;
        color: #fff;
        background: #333;
        &::after{
          border-top: 1px solid #fff;
          border-right: 1px solid #fff;
        }
      }
      &::after{
        position: absolute;
        top: 50%;
        right: 20px;
        display: block;
        content: '';
        width: 8px;
        height: 8px;
        margin-top: -4px;
        border-top: 1px solid #333;
        border-right: 1px solid #333;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
      }
      >span{
        display: table;
        width: 100%;
        min-height: 55px;
        >span{
          display: table-cell;
          line-height: 140%;
          vertical-align: middle;
        }
      }
    }
  }
}

#tablet{
  #contents{
    .links{
	  >a{
		margin: 0 14px 20px 0;
		&:last-child{
		  margin-right: 0;
        }
      }
    }
  }
}

@media screen and (min-width:768px){

}

@media screen and (max-width:767px){
  .pc_only {display: none !important;}
  .sp_only {display: block !important;}

  #title{
    padding: 50px 0 20px !important;
    background-size: cover !important;
    h1{
      font-size: 2.4rem;
	  padding-bottom: 40px;
    }
  }

  #contents{
    padding: 0 !important;
	margin: 0 auto !important;
	#Catch {
      margin-top: -50px !important;
      margin-bottom: -1px !important;
	}
    >.inner{
      position: relative !important;
      padding: 30px 20px !important;
      >#pkz{
        display: block !important;
		background: none !important;
        margin: -20px 0 40px;
        padding: 20px;
        top: initial;
        bottom: -120px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
		box-shadow: none;
        border: none;
      }
    }
    .links{
      padding-top: 30px;
      >a{
        width: 48%;
        margin: 0 0 8px 0;
        font-size: 1.2rem;
		&:nth-child(2n){
		  float: right;
		}
		&::after{
		  content: none;
		  right: 15px;
		  width: 4px;
		  height: 4px;
		  margin-top: -2px;
		}
		>span{
		  min-height: 50px;
		}
      }
    }

  }
}