@charset "utf-8";
/* CSS Document */

body{
  margin:0px;
  padding: 0px;
  transition: 0.5s;
}

.text span{
 font-weight: 600;
 color:#000;
}

#wrap{
  position: relative;
  width: 100%;
     position: relative;
     height:auto !important; /*IE6対策*/
     height: 100%; /*IE6対策*/
     min-height: 100%;
}

.title_area{
  padding: 0 1em 0 1em;
}

ul li{
  list-style: none;
}


.text_area{
  text-align: justify;
  line-height: 1.75;
  font-size: 16px;
}


.flex_item{
  font-size:0;/*テキストノード対策*/
  line-height:0;/*テキストノード対策*/
}

  #footer01{
    width: 100%;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
  }


 
#footer01{
  position: relative;
  background-color: #222;
}









@media screen and (min-width: 350px){
  body{background-color:#fff;}
  .pc{display: none;}
  .sp{display: block;}
  

  .container{
    width: 330px;
    margin: 0 auto;
    margin-bottom: 24px;
  }

  .flex_container{
    width: 330px;
    margin: 0 auto;
  }


  /*シリーズ*/
  .item_wrap {
    width:330px;
    margin: 0 auto;
  }

.item {
}



.item p{
  width: 300px;
  padding: 1em 0;
  margin: 0 auto;
}




  .text_area p{padding: 0 0;}


  .logo_s{width: 100px;vertical-align:middle;}

  .highlights{
    display: flex;
    flex-direction: column;
  }

  .highlights .flex_container{
    margin-bottom:48px;
  }

  /*ハイライト内　タイトル*/
  .subtitle{
    padding: 50px 0 40px 0;
    /*border-top:3px solid red;*/
  }

  .col_1{
  width: 100%;
  }

  .col_1 p{
  margin:72px 0; 
  }

  /*ハイライト内　詳細説明*/
  .col_2{
  width: 100%;
  padding: 0 0 24px 0;
  }

  /*ハイライト内　詳細画像 ①*/
  .col_3{
  width:280px;
  padding: 0 0 24px 0;
  margin: 0 auto;
  }

  /*ハイライト内　詳細画像 ②*/
  .col_4{
  width: 280px;
  padding: 0 0 24px 0;
  margin: 0 auto;
  }




  .nav{padding: 10px 16px;}
  .nav li a{
    padding: 3px 0;
    }


  /*フッター*/

  footer{
    width: 100%;
    margin: 0 auto;
  }

  .f_nav_wrap{
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .f_nav_wrap .col{
    font-size: 10px;
    width: 100%;
    line-height: 2.0;
  }

    .f_nav_wrap .col ul li{
    list-style: none;
    font-size: 14px;
  }

  .f_nav_wrap .col ul li a{
    text-decoration: none;
    color: #fff;
    transition: 0.5s;
  }

  .f_nav_wrap .col li{
    color: #fff;
  }

.nav_1 li a:hover{
  color: #d52b1e !important;
}

.nav_2 li a:hover{
  color: #00ffe1 !important;
}

.nav_3 li a:hover{
  color: #00ffe1 !important;
}

.nav_1{
  line-height: 2;
}
.nav_1 li:nth-child(n+2){
  font-size: 12px !important;
  line-height: 1.8;
  padding-left:1.8em ;
}

.nav_2{
  line-height:2;
}
.nav_2 li:nth-child(n+2){
  font-size: 12px !important;
  line-height: 1.8;
  padding-left:1.8em ;
}

.nav_3{
  line-height:2;
}
.nav_3 li:nth-child(n+2){
  font-size: 12px !important;
  line-height: 1.8;
  padding-left:1.8em ;
}

.copyright{
    font-size: 10px;
    background-color: #000;
    padding: 6px 0;
    color: #fff;
  }

.logo .yklm{
    width: 240px;
  }

}
/*@media screen and (min-width: 350px)*/







@media screen and (min-width: 480px){
  .pc{display: none;}
  .sp{display: block;}

  .container{
    width: 420px;
    margin: 0 auto;
    margin-bottom: 72px;
  }

  .flex_container{
    width: 420px;
    margin: 0 auto;
    margin-bottom:36px;
  }

  /*ハイライト内　タイトル*/
  .subtitle{
    padding: 50px 0 40px 0;
    border-top:none;
  }

  .col_1{
  width: 100%;
  }

  .col_1 p{
  margin:72px 0; 
  }

  .highlights{
    display: flex;
    flex-direction: column;
  }

  .highlights .flex_container{
    margin-bottom:48px;
  }

  /*ハイライト内　タイトル*/
  .subtitle{
    padding: 50px 0 40px 0;
    /*border-top:3px solid red;*/
  }

  .col_1{
  width: 100%;
  }

  .col_1 p{
  margin:72px 0; 
  }

  /*ハイライト内　詳細説明*/
  .col_2{
  width: 100%;
  padding: 0 0 24px 0;
  }

  /*ハイライト内　詳細画像 ①*/
  .col_3{
  width:280px;
  padding: 0 0 24px 0;
  margin: 0 auto;
  }

  /*ハイライト内　詳細画像 ②*/
  .col_4{
  width: 280px;
  padding: 0 0 24px 0;
  margin: 0 auto;
  }




  .nav{padding: 10px 16px;}
  .nav li a{
    padding: 3px 0;
    }

  /*フッター*/
  footer{
    width: 100%;
    margin: 0 auto;
  }

  .f_nav_wrap{
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .f_nav_wrap .col{
    font-size: 10px;
    width: 400px;
    line-height: 2.0;
  }

  .logo .yklm{
    width: 260px;
  }


  .copyright{
    font-size: 10px;
    padding: 25px 0;
  }
}

@media screen and (min-width:739px){
  .pc{display: block;}
  .sp{display: none;}



}


@media screen and (min-width:768px){
  .pc{display: none;}
  .sp{display: block;}

  .container{
    width: 720px;
    margin: 0 auto;
    margin-bottom: 128px;: 
  }

  .flex_container{
    width: 720px;
    padding: 0;
    border-bottom:solid 1px #f1f1f1;
  }

  .logo_s{width: 100px;vertical-align:middle;}

  .highlights{
    border-top:none;
    border-left:3px solid red;
    padding-left: 16px;
  }

    /*シリーズ*/

  .logo_s{width: 100px;vertical-align:middle;}

  .highlights{
    border-left:3px solid red;
    padding-left: 16px;
  }

  .flex_container{
　display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
  /*両端揃え*/
  -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    justify-content:space-between;

    justify-content: center;
  align-items: center;

  margin: 0;
}


  .flex_container .col_1{
  width: 100%;
  }

  .flex_container .col_2{
  width: 50%;
  padding: 0 0 12px 0;
  }

  .flex_container .col_3{
  width: 25%;
  padding: 12px 0 12px 12px;
  }

  .flex_container .col_4{
  width: 25%;
  padding: 12px 0 12px 12px;
  }

  .flex_container img{
  max-width: 100%;
  }


  .item_wrap{
    width: 720px;
    display: flex;
  }

  .series{
    flex-direction: column;
    width: 33.33%;
  }

  .series p{
    font-size: 85%;
    width: 230px;
    padding: 16px 2px;
  }

  .btn{
    padding: 0 2px;
    display: block;
  }




  .flex_container img{
  max-width: 100%;
  }


  /*フッター*/
  footer{
    width: 100%;
    margin: 0 auto;
  }

  .f_nav_wrap{
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .f_nav_wrap .col{
    font-size: 10px;
    width: 384px;
    line-height: 2.0;
  }
  .f_nav_wrap .col span{
    display: block;
  }

  .logo .yklm{
    width: 260px;
  }

  .copyright{
    font-size: 10px;
    padding: 25px 0;
  }

}


@media screen and (min-width:1024px){
  body{background-color: #fff;}

  .sp{display: none;}
  .pc{display: block;}

  .container_fluid{
    width: 100%;
    margin: 0 auto;
    margin-bottom: 64px;
  }

  .container{
    width: 980px;
    margin: 0 auto;
    margin-bottom: 32px;
  }

  .flex_container{
    width: 980px;
    padding: 0;
    border-bottom:solid 1px #f1f1f1;
  }


  /*シリーズ*/

  .logo_s{width: 100px;vertical-align:middle;}

  .highlights{
    border-top:none;
    border-left:3px solid red;
    padding-left: 16px;
  }

  .flex_container{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    /*両端揃え*/
    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    justify-content:space-between;

    justify-content: center;
    align-items: center;

    margin: 0;
  }


  .flex_container .col_1{
    width: 100%;
  }

  .flex_container .col_2{
    width: 50%;
    padding: 0 0 12px 0;
  }

  .flex_container .col_3{
    width: 25%;
    padding: 12px 0 12px 12px;
  }

  .flex_container .col_4{
    width: 25%;
    padding: 12px 0 12px 12px;
  }

  .flex_container img{
    max-width: 100%;
  }


  .item_wrap{
    width: 980px;
    display: flex;
  }

  .series{
    flex-direction: column;
    width: 33.33%;
  }

/*
  .series{
    flex-direction: column;
    width: 33.33%;
  }
  */

  .series p{
    text-align: center;
    padding: 1em;
  }

  .series span p{
    width: 100%;
    margin :0;
    padding :0;
    text-align: left;
  }

  .btn{
    padding: 0 1em;
    display: block;
  }



    /*フッター*/


.f_nav_wrap{
    margin: 0 auto;
    width: 980px;
    margin-bottom: 32px;
    display: flex;
    flex-direction: row;
  }

  .f_nav_wrap .col{
    font-size: 10px;
    width: 33.33%;
    line-height: 2.0;
  }

  .f_nav_wrap .col span{
    display: inline;
  }

  .logo .yklm{
    width: 260px;
  }

}





/**/
.store button {
  color: #fff;
  text-align: center;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 2px;
  cursor:pointer;
  width:100%;
  padding: 10px 0;
  background-color: #d52b1e;
  border-radius: 5px;
  transition: 0.5s ;
  margin: 0 auto;
  border:none;
}

.store button:hover{
  width:100%;
  color: #fff;
  cursor:pointer;
  background-color: #af1a1a;
  border-radius: 5px;
  border:none;
}

.store a:hover{
  transition: 3.0;
}

.store button span{
  font-size: 60%;
  margin: 0 5px;
}




footer{
  width: 100%;
  margin: 0 auto;
  color:#fff !important;
}


.copyright{
  font-size: 12px;
  background-color: #000;
  padding: 6px 0;
  color: #fff;
  }

.item_wrap li{
  color: #eee;
  text-decoration: none;
}

.item_wrap li a{
  color: #ddd;
  text-decoration: none;
  transition: 0.8s !important;
}




 
#footer01{
  width: 100%;
  position: relative;
  background-color: #222;
}

.logo{
  padding: 8px 0;
  width: 100%;
  text-align: center;
}


.copyright{
  text-align: center;
  background-color: #000;
  color: #ccc;
   margin: 0;
}