@charset "UTF-8";

/* Common Elements
---------------------------------------------------------- */
body {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

h1 {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

h2 {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.alpha a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

@media (max-width: 767px) {
	.pconly {
	display: none;
	}
}

@media (min-width: 768px) {
	.sponly {
	display: none;
	}
}

.container {
  clear: both;
  min-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.container-fluid01 {
  clear: both;
  min-width: 1200px;
  width: 100%;
  height: 801px;
  margin: 0 auto;
  padding: 0 0 0 0;
  background: #ffffff url("../images/bg_main_vis_pc.png") no-repeat;
  background-size: cover;
  background-position: center;;
}

.container-fluid02 {
  clear: both;
  min-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 65px 0 70px 0;
  background: #ffe109;
}

.container-fluid03 {
  clear: both;
  min-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 14px 0 0 0;
  background: #ffffff;
  border-top: 4px solid #ff8e00;
}

@media screen and (max-width: 767px) {
  h1 {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  h2 {
    width: 90%;
    margin: 0 auto;
    padding: 0;
  }
  
  .container {
    clear: both;
    min-width: 100%;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
  }    
    
  .container-fluid01 {
    clear: both;
    min-width: 100%;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    /*background: #8adbfa url("../images/bg_main_vis_sp.png") no-repeat;*/
    background-size: cover;
    background-position: center;
  }

  .container-fluid02 {
    clear: both;
    min-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 25px 0 30px 0;
    background: #ffe109;
  }

  .container-fluid03 {
    clear: both;
    min-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 14px 0 0 0;
    background: #ffffff;
    border-top: 4px solid #ff8e00;
  }
}


/* Common Class
---------------------------------------------------------- */
.headerBox {
  width: 1200px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.visBox {
  position: relative;
  top: 0px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.goodsBox {
  clear: both;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.goodsBox .unit01 {   
  clear: both;
  width: 960px;
  margin: 25px auto 0 auto;
  padding: 0;
  text-align: center;
}

.goodsBox .unit01 .box01 {
  float: left;
  width: 312px;
  margin: 0 13px 0 0;
  padding: 0;
}

.goodsBox .unit01 .box02 {
  float: left;
  width: 318px;
  margin: 0 13px 0 0;
  padding: 0;
}

.goodsBox .unit01 .box03 {
  float: left;
  width: 304px;
  margin: 0;
  padding: 0;
}

.goodsBox .unit01 .box04 {
  float: left;
  width: 312px;
  margin: 0 13px 20px 0;
  padding: 0;
}

.goodsBox .unit01 .box05 {
  float: left;
  width: 319px;
  margin: 0 12px 20px 0;
  padding: 0;
}

.goodsBox .unit01 .box06 {
  float: left;
  width: 304px;
  margin: 0 0 20px 0;
  padding: 0;
}

.stepBox {
  clear: both;
  width: 100%;
  margin: 49px auto 0 auto;
  padding: 0;
  text-align: center;
}

.stepBox h2 {
  height: 80px;
  margin: 0;
  padding: 0;
}

.stepBox .unit {   
  clear: both;
  width: 960px;
  height: auto;
  margin: 0 auto 0 auto;
  padding: 56px 0 0 0;
  background: #ffffff;
  text-align: center;
}

.stepBox .unit .step01-box {
  width: 960px;
  margin: 0 auto;
  padding: 0 0 0 0;
  background: #ffffff;
}

.stepBox .unit .step01-box .btn-box {
  clear: both;
  width: 848px;
  height: 117px;
  margin: -10px auto 0 auto;
  background: url("../images/img_step01_02_pc.png") no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
}

.stepBox .unit .btn-box .btn01 {
  float: left;
  width: 239px;
  margin: 15px 16px 0 176px;
  padding: 0;
}

.stepBox .unit .btn-box .btn02 {
  float: left;
  width: 196px;
  margin: 15px 0 0 0;
  padding: 0;
}

.stepBox .unit .step02-box {
  width: 960px;
  margin: 0 auto;
  padding: 15px 0 0 0;
  background: #ffffff;
}

.stepBox .unit .step03-box {
  width: 960px;
  margin: 0 auto;
  padding: 15px 0 49px 0;
  background: #ffffff;
}

.campaignBox {
  clear: both;
  width: 90%;
  margin: 72px auto 0 auto;
  padding: 0;
  text-align: center;
}

.campaignBox h2 {
  height: 80px;
  margin: 0 auto;
  padding: 0;
}

.campaignBox .unit {   
  clear: both;
  width: 960px;
  height: 337px;
  margin: 0 auto 0 auto;
  padding: 48px 0 0 0;
  background: #ffffff;
  text-align: center;
}

.campaignBox .unit .btn01 {
  float: left;
  width: 256px;
  height: 256px;
  margin: 0 40px 28px 56px;
  padding: 0;
}

.campaignBox .unit .btn02 {
  float: left;
  width: 256px;
  height: 256px;
  margin: 0 40px 28px 0;
  padding: 0;
}

.campaignBox .unit .btn03 {
  float: left;
  width: 256px;
  height: 256px;
  margin: 0 0 28px 0;
  padding: 0;
}

.campaignBox .unit .txt01 {
  margin: 0 0 0 56px;
  padding: 0;
  text-align: left;
}

.cautionBox {
  clear: both;
  width: 100%;
  margin: 72px auto 0 auto;
  padding: 0;
  text-align: center;
}

.cautionBox h2 {
  height: 80px;
  margin: 0 auto;
  padding: 0;
}

.cautionBox .unit {
  clear: both;
  width: 960px;
  height: auto;
  margin: 0 auto 0 auto;
  padding: 44px 0 44px 0;
  background: #ffffff;
  text-align: center;
}

.returnBox {
  clear: both;
  position: relative;
  top: 100px;
  right: 0;
  width: 1200px;
  margin: 0 auto;
  text-align: right;
}

.footerBox01 {
  clear: both;
  width: 100%;
  margin: 0 auto 0 auto;
  padding: 0;
  text-align: center;
}

.footerBox02 {
  clear: both;
  width: 100%;
  margin: 0 auto 0 auto;
  padding: 0;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .headerBox {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }

  .visBox {
    position: relative;
    top: 0px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }

  .goodsBox {
    clear: both;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }

  .goodsBox .unit01 {   
    clear: both;
    width: 90%;
    margin: 25px auto 18px auto;
    padding: 0;
    text-align: center;
  }

  .stepBox {
    clear: both;
    width: 100%;
    margin: 79px auto 0 auto;
    padding: 0;
    text-align: center;
  }

  .stepBox h2 {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .stepBox .unit {   
    clear: both;
    width: 90%;
    height: auto;
    margin: -12px auto 0 auto;
    padding: 48px 0 0 0;
    background: #ffffff;
    text-align: center;
  }
    
  .stepBox .unit .step01-box {
    width: 90%;
    margin: 0 auto 0 auto;
    padding: 0;
    background: #ffffff;
  }

  .stepBox .unit .step01-box .btn-box {
    clear: both;
    width: 100%;
    height: auto;
    margin: -10px auto 0 auto;
    padding: 15px 0 10px 0;
    background: url("../images/img_step01_02_sp.png") no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
  }

  .stepBox .unit .step01-box .btn-box .btn01 {
    float: none;
    width: 60%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }

  .stepBox .unit .step01-box .btn-box .btn02 {
    float: none;
    width: 50%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }

  .stepBox .unit .step02-box {
    width: 90%;
    margin: 0 auto 0 auto;
    padding: 15px 5% 0 5%;
    background: #ffffff;
  }

  .stepBox .unit .step03-box {
    width: 90%;
    margin: 0 auto;
    padding: 15px 5% 24px 5%;
    background: #ffffff;
  }    

  .campaignBox {
    clear: both;
    width: 100%;
    margin: 80px auto 0 auto;
    padding: 0;
    text-align: center;
  }

  .campaignBox h2 {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .campaignBox .unit {   
    clear: both;
    width: 90%;
    height: auto;
    margin: -12px auto 0 auto;
    padding: 24px 0 0 0;
    background: #ffffff;
    text-align: center;
  }

  .campaignBox .unit .btn01 {
    float: left;
    width: 28%;
    height: auto;
    margin: 0 3% 18px 5%;
    padding: 0;
  }

  .campaignBox .unit .btn02 {
    float: left;
    width: 28%;
    height: auto;
    margin: 0 3% 18px 0;
    padding: 0;
  }

  .campaignBox .unit .btn03 {
    float: left;
    width: 28%;
    height: auto;
    margin: 0 0 18px 0;
    padding: 0;
  }

  .campaignBox .unit .txt01 {
    width: 50%;
    margin: 0 0 0 5%;
    padding: 0 0 16px 0;
    text-align: left;
  }

  .cautionBox {
    clear: both;
    width: 90%;
    margin: 80px auto 0 auto;
    padding: 0;
    text-align: center;
  }

  .cautionBox h2 {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .cautionBox .unit {   
    clear: both;
    width: 90%;
    height: auto;
    margin: -12px auto 0 auto;
    padding: 44px 5% 44px 5%;
    background: #ffffff;
    text-align: center;
  }    
    
  .spmode {
    width: 90%;
    margin: -30px auto 0 auto;
    padding: 0;
  }  

  .returnBox {
    clear: both;
    position: relative;
    top: 50px;
    right: 0;
    width: 15%;
    margin: 0 0 0 80%;
    text-align: right;
  }    
    
  .footerBox01 {
    clear: both;
    width: 60%;
    margin: 0 auto 0 auto;
    padding: 0;
    text-align: center;
  }

  .footerBox02 {
    clear: both;
    width: 60%;
    margin: 0 auto 0 auto;
    padding: 0;
    text-align: center;
  }

  img {
    max-width: 100%;
  }
}


/* ID Name
---------------------------------------------------------- */