@charset "UTF-8";

/*==================================
【basic color】
==================================*/
#howto_language{ background:#000;}
#howto_language_inner li{ background:#fff; color:#000;}
#howto_language_inner li a{ color: #000;}
#howto_language_inner a.current{ background: #ffe200; pointer-events: none;}
.howto_inner{ background:#f3f3f3;}

/*==================================
【basic pc style】
==================================*/
/*-------howto-------*/
.tit_howto{ width:750px; margin:10px auto; line-height:1;}

#howto_language_inner{
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 10px 0;
    font-size: 16px;
    text-align: center;
}
#howto_language_inner li {
    margin: 0 8px;
    border-radius: 6px;
  }
#howto_language_inner li a {
    display: block;
    border-radius: 6px;
    line-height: 1.5em;
    text-align: center;
    padding: 5px 15px;
    font-weight: bold;
    transition: background 0.3s ease 0s;
  }
#howto_language_inner li a:hover{
    background: #e1e3e7;
    cursor: pointer;
}
#howto_language_inner li.current a {
    background: #ffe200;
    pointer-events: none;
  }

h1#tit_whats{ width:640px; margin:0 auto;}

#howto_area{ width:1035px; margin:35px auto 0 auto;}
.howto_border{ background:url(../images/bg_howto.png) repeat; padding:15px 0;}
.howto_inner{ width:1005px; margin:0 auto; position:relative; padding:40px 0 0 0;}
.howtoheight{ min-height:390px;}
.howtoheight02{ min-height:454px;}
#howto01_tit{ position:absolute; top:-35px; left:202.5px; width:600px;}
#howto02_tit{ position:absolute; top:-35px; left:202.5px; width:600px;}
#howto03_tit{ position:absolute; top:-35px; left:202.5px; width:600px;}
#howto04_tit{ position:absolute; top:-35px; left:202.5px; width:600px;}
#howto05_tit{ position:absolute; top:-35px; left:202.5px; width:600px;}

#howto01_img01{ position:absolute; width:500px; left:15px; z-index:5;}
#howto01_img02{ position:absolute; width:500px; right:15px; z-index:5;}
#howto02_img01{ position:absolute; width:500px; left:15px; z-index:1;}
#howto02_img02{ position:absolute; width:500px; right:15px; z-index:1;}
#howto03_img01{ position:absolute; width:688px; bottom:0px; left:158.5px; z-index:1;}
#howto04_img01{ position:absolute; width:688px; bottom:0px; left:158.5px; z-index:1;}
#howto05_img01{ position:absolute; width:500px; left:15px; z-index:1;}
#howto05_img02{ position:absolute; width:500px; right:15px; z-index:1;}

#howto_notice{ float: right; width:650px;}

.arrow01{ position:absolute; z-index:10; bottom:60px; left:462px;}
.arrow02,.arrow02_2{ display:none;}
.arrow03{ margin:20px auto 30px auto; width:20px;}
#howto_bannertxt{ font-size:27px; font-weight:bold; border-left:solid #000 6px; padding:0 0 0 10px; line-height:1.2em; margin:0 0 15px 0;}

.productsBnrCol { width:1036px; margin: 0 auto;}
.productsBnrCol li {
  display: block;
  float: left;
  width: 500px;
  margin: 5px 8.5px;
}
.productsBnrCol li:nth-child(2n+1):last-child {
  display: block;
  float: none;
  width: 500px;
  margin: 5px auto;
}

.bnrProduct {
  width: 1120px;
  margin: 20px auto;
  display: block;
}

.bnrProduct img{
  width: 100%;
}

/* Media Queries - Small Tablet & Smartphone */
@media (max-width: 768px) {

/*-------howto-------*/
.tit_howto{ width:100%; margin:1% auto;}

#howto_language_inner{
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 10px 0;
    font-size: 3vw;
    text-align: center;
}
#howto_language_inner li {
    border-radius: 6px;
    margin: 0 1%;
}
#howto_language_inner li a {
    display: block;
    border-radius: 6px;
    line-height: 1.5em;
    text-align: center;
    padding: 5px 10px;
    font-weight: bold;
}
#howto_language_inner li.current a {
    background: #ffe200;
    pointer-events: none;
  }

h1#tit_whats{ width:100%;}
#howto_area{ width:98%; margin:7% auto 0 auto;}

.howto_border{ padding:3% 0;}
.howto_inner{ width:95%; padding:0 0 5% 0; position:relative;}
.howtoheight{ min-height:0px;}
.howtoheight02{ min-height:0px;}
h4.howto_inner_tit{ height:10%;}

#howto01_tit{ position:static; width:100%; margin:0 auto;}
#howto02_tit{ position:static; width:100%; margin:0 auto;}
#howto03_tit{ position:static; width:100%; margin:0 auto;}
#howto04_tit{ position:static; width:100%; margin:0 auto;}
#howto05_tit{ position:static; width:100%; margin:0 auto;}
#howto01_tit img,#howto02_tit img,#howto03_tit img,#howto04_tit img,#howto05_tit img{ margin-top:-10%;}

#howto01_img01{ position:static; width:100%; z-index:1; margin:-3% auto 0;}
#howto01_img02{ position:static; width:100%; z-index:1; margin:-9% auto -8%;}
#howto02_img01{ position:static; width:100%; z-index:1; margin:-3% auto 0;}
#howto02_img02{ position:static; width:100%; z-index:1; margin:-9% auto -8%;}
#howto03_img01{ position:static; width:100%; z-index:1; margin:1% auto -4%;}
#howto04_img01{ position:static; width:100%; z-index:1; margin:1% auto -4%;}
#howto05_img01{ position:static; width:100%; z-index:1; margin:-3% auto 0;}
#howto05_img02{ position:static; width:100%; z-index:1; margin:-9% auto -8%;}
  
#howto_notice{ position:static; width:100%; z-index:1; margin:0 auto;}

.arrow01{ display:none;}
.arrow02{ display:block; position:absolute; width:10%; bottom:43.5%; left:50%;}
.arrow02_2{ display:block; position:absolute; width:10%; bottom:43.5%; left:45%;}
.arrow03{ margin:3% auto 8%; width:5%;}
#howto_bannertxt{ font-size:24px; margin:0 0 3% 0;}

.productsBnrCol { width:98%;}
.productsBnrCol li, .productsBnrCol li:nth-child(2n+1):last-child {
    display: block;
    float: none;
    clear: both;
    width: 100%;
    margin: 1% auto 0;
  }
  
.bnrProduct {
    width: 95%;
    margin: 4% auto;
    display: block;
  }
}