@charset "utf-8";

/* contentsWrapper
------------------------------------------------------------------------------------------------------ */

#c5-wrap {
	width: 100%;
	margin:0 auto;
    font-size: 100%;
    display: block;
    background: #fff;
    overflow: hidden;
}
#c5-wrap img{
    width: 100%;
    height: auto;
}
#c5-wrap .pc {
    display: block;
}
#c5-wrap .sp {
    display: none;
}
@media screen and (max-width: 640px) {
#c5-wrap img {
    width:100%;
    height: auto;
    vertical-align: bottom;
}
#c5-wrap .pc {
    display: none;
}
#c5-wrap .sp {
    display: block;
}
}
#c5-wrap ul {
    *zoom: 1;
    margin-left: 0;
    padding: 0;
}
#c5-wrap ul:before,
#c5-wrap ul:after {
    display: block;
    overflow: hidden;
    content: "";
}
#c5-wrap ul:after {
    clear: both;
}
#c5-wrap ul li {
    list-style: none;
}
.clearfix,
.page_navi,
.other {
	zoom:1;
}
.clearfix:after,
.page_navi:after,
.other:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
}
/* title Area
------------------------------------------------------------------------------------------------------ */
#c5-head {
	width:100%;
    position: relative;
}
#c5-head h1 {
	margin: 0;
    width: 100%;
}
#c5-head h1 img{
    width: 100%;
    height: auto;
}
@media screen and (max-width: 640px) {
    #c5-head {
    margin-top: 20px;
}
}
/* Nav Area
------------------------------------------------------------------------------------------------------ */
.c5-nav {
    clear: both;
    margin: 0 auto;
    position: relative;
}
.c5-nav ul {
  margin:0 auto;
  position:relative;
  padding:0;
}
.c5-nav li {
  float: left;
  padding:0;
  width: calc(25% - 1px);
  margin:0;
  cursor: pointer;
  display: table-cell;
  border-left: 1px solid #543d7d;
}
.c5-nav li:first-child {
    width: calc(25% - 1px);
    border-left: 1px solid #543d7d;
}
.c5-nav li a {
 display: block;
 width: 100%;
}
.c5-nav li img {
 width: 100%;
 height: auto;
}
@media screen and (max-width: 640px) {
    .c5-nav {
    margin: 0px auto 30px;
    }
    .c5-nav ul{
    margin: 20px 0 0;
    }
    .c5-nav li {
      float: none;
      padding:0;
      width: 100%;
      margin:0;
      cursor: pointer;
      display: block;
      border: none;
    }
    .c5-nav li:first-child {
        border-left: none;
        width: 100%;
    }
}
/* intro
------------------------------------------------------------------------------------------------------ */
#c5-intro{
 text-align: center;
}
#c5-intro h2 {
    margin: 0;
}
/* #c5-info
-------------------------------------------------------------------------------------- */
#c5-info {
    margin: 20px 0px 0px;
}
#c5-info h3 {
    margin: 0;
    padding: 14px 10px;
    background: #51308e;
    color: #fff;
    text-align: center;
}
#c5-info ul {
    margin: 0;
    width: 100%;
    display: block;
}
#c5-info ul li {
    float: left;
    display: block;
}
#c5-info ul li.left {
    width: 42%;
    padding-right: 2%;
}
#c5-info ul li.left img{
   margin-bottom: 0px;
}
#c5-info ul li.right {
    width: 56%;
}
#c5-info ul li img{
    width: 100%;
    height: auto;
}
#c5-info p{
    padding: 15px;
}
.c5-bl{
    border: 1px solid #ccc;
    padding-bottom: 20px;
}
.c5-taC{
    text-align: center;
    display: inherit;
}

@media screen and (max-width: 640px) {
#c5-info ul {
    margin: 0;
    width: 100%;
    display: block;
}
#c5-info ul li {
    float: none;
    margin-bottom: 20px;
}
#c5-info ul li.left {
    width: 100%;
    padding-right: 0;
}
#c5-info ul li.left img{
   margin-bottom: 30px;
}
#c5-info ul li.right {
    width: 100%;
}
}

/* cont
------------------------------------------------------------------------------------------------------ */
#c5-cont{
    padding: 50px 40px;
}
#c5-cont01{
    text-align: center;
    padding: 55px 0 45px;
    background: #edf8ff;
}
#c5-cont01 #cont01-ph{
    padding: 0 20px;
}
#c5-cont01 ul li {
    float: left;
    display: block;
    background-color: #fff;
    border: 1px solid #51308e;
    padding-bottom: 40px;
    min-height: 420px;
}
#c5-cont01 ul li.left {
    width: calc(40% - 2px);
    margin-left: 4%;
    margin-right: 2%;
    padding: 0 2% 18px 2%;
}

#c5-cont01 ul li.right {
    width: calc(40% - 2px);
    margin-right: 4%;
    margin-left: 2%;
    padding: 0 2% 30px 2%;
}
#c5-cont01 ul li.left img{
    max-width: 168px;
}
#c5-cont01 ul li.right img{
    max-width: 356px;
}

#c5-cont01 ul li h3 {
    font-weight: normal;
    padding: 5px 10px;
    text-align: center;
    color: #fff;
    background: #51308e;
    width: 25%;
    margin-bottom: 20px;
    margin-left: -5%;
}
@media screen and (max-width: 640px) {
#c5-cont01 ul li {
    float: none;
    display: block;
    min-height: auto;
}
#c5-cont01 ul li.left,
#c5-cont01 ul li.right {
    width: calc(94%);
    margin-left: 2%;
    margin-right: 2%;
    padding: 0 1% 20px 1%;
    margin-top: 20px;
}
#c5-cont01 ul li h3 {
    margin-left: -1%;
}
}

#c5-cont02{
    background: #fff;
    padding: 40px 20px;
}
#c5-cont02 img{
    max-width: 1030px;
}

#c5-cont03{
    background: #fff;
    padding: 40px 20px;
}
#c5-cont03 img{
    max-width: 1069px;
}

#c5-cont04{
    background: #fff;
    padding: 40px 20px;
}
#c5-cont04 img{
    max-width: 1069px;
}

@media screen and (max-width: 640px) {
    #c5-cont{
    padding: 20px;
}
    #c5-cont02{
    padding: 20px;
}
    .c5-mgT60 {
        margin-top:0px;
}
}

.ttl_line{
  margin: 0 30px;
  font-size: 20px;
}
.c5-tuner_model {
  margin:20px 0 20px 0;
}
.c5-tuner_model ul {
  margin: 80px 0 0;
  padding: 0;
}
.c5-tuner_model li {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  width: 50%;
  text-align: center;
}
.c5-tuner_model li a:hover {
  opacity: 0.7;
}
.c5-tuner_model li img {
  width: 100%;
}
.c5-tuner_model p {
  font-size: 12px;
}
.c5-tuner_model p a {
  text-decoration: underline;
}
@media screen and (max-width: 640px) {
    .ttl_line{
    font-size: 120%;
    }
    .c5-tuner_model ul {
  margin: 0;
}
  .c5-tuner_model li {
    margin: 1%;
    padding: 0;
    float: left;
    width: 98%;
    }
  .c5-tuner_model li img {
    width: 100%;
}
}

/* shindan
------------------------------------------------------------------------------------------------------ */

#c5-S-intro{
    margin: 0 auto;
    text-align: center;
}
.S-sec{
    border: 1px solid #ccc;
    padding: 22px 20px;
    margin-bottom: 30px;
}
.S-sec span.S-icon{
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}
.S-sec dl{
    width: 100%;
}
.S-sec dt.q{
    padding: 5px 15px;
    float: left;
    background: #51308e;
    margin-right: 10px;
}
.S-sec dt.a{
    padding: 5px 15px;
    float: left;
    background: #a11919;
    margin-right: 10px;
}
.S-sec dd{
    padding-top: 10px;
    margin-left: 72px;
    font-size: 20px;
    font-weight: bold;
}
.S-btn {
    display: flex;
  justify-content: center;
  align-items: center;
}
.S-btn .S-L,
.S-btn .S-R {
    text-align: center;
    padding: 40px 39px 0px;
}
.S-btn .S-L a img,
.S-btn .S-R a img{
   width: 100%;
   height: auto;
}
.c5-S-btn{
    text-align:right;
}
.S-img{
    text-align:center;
    margin:0 auto;
    padding: 20px 0;
}
@media screen and (max-width: 640px) {
    .S-sec{
    padding: 5px;
}
    .S-sec span.S-icon{
        font-size: 100%;
    }
    .S-sec dt{
        padding: 2px 5px;
    }
    .S-sec dd{
        font-size: 100%;
        margin-left: 0px;
    }
    #c5-S-cont .S-sec:last-child{
        margin-bottom: 0px;
    }
    .S-btn .S-L,
    .S-btn .S-R {
        padding: 5px;
    }
}

/* tuner
------------------------------------------------------------------------------------------------------ */

#c5-T-intro{
    margin: 0 auto;
    text-align: center;
}
#c5-T-intro h3.T-h{
    padding: 10px 15px;
    background: #51308e;
    color: #fff;
    margin-top: 40px;
}
#c5-T-cont{
    border: 1px solid #ccc;
    padding: 40px 25px;
    background: #fff;
}
#c5-T-cont img{
    margin: 0 auto;
    display: block;
}
#c5-T-cont .c5-T-btn{
    text-align: right;
    margin-top: 35px;
    width: 100%;
}
#c5-T-intro .s5-featureC--solid .s5-featureC__imageCol img,
#c5-T-intro .s5-featureA--solid .s5-featureA__imageCol img{
    width: auto;
}

@media screen and (max-width: 640px) {
    #c5-T-intro h3{
        margin-top: 30px;
    }
    #c5-T-cont{
    padding: 20px 10px;
    }
    #c5-T-cont .c5-T-btn{
    text-align: center;
    margin-top: 20px;
}
    #c5-T-intro .s5-featureA__image2 img{
    max-width: 83px;
    height: auto;
}
}

/* qa
------------------------------------------------------------------------------------------------------ */
#c5-Q-cont img{
    width: auto;
}
@media screen and (max-width: 640px) {
#c5-Q-cont img{
    width: 100%;
}
}
#c5-Q-cont #c5-shv img{
    width: 100%;
}
#c5-Q-intro{
    margin: 0 auto;
    text-align: center;
}
#c5-acMenu {
 border: 1px #ccc solid;
}

#c5-acMenu dt{
display:block;
width:100%;
height:auto;
cursor:pointer;
}
#c5-acMenu dd{
width:100%;
height:auto;
display:none;
padding-bottom: 20px;
}
#c5-acMenu .q{
    padding: 10px 15px;
    font-size: 20px;
    font-weight: bold;
}
#c5-acMenu .a{
    padding: 0px 15px;
    margin-top: 10px;
}
#c5-acMenu .q span{
    background: #51308e;
    display: block;
    float: left;
    margin-right: 10px;
    color: #fff;
    font-size: 20px;
    padding: 5px 15px;
}
#c5-acMenu .a span{
    background: #a11919;
    display: block;
    float: left;
    margin-right: 10px;
    color: #fff;
    font-size: 20px;
    padding: 5px 15px;
}
#c5-acMenu .q p{
    padding-left: 60px;
    padding-right: 5%;
    padding-top: 4px;
    font-size: 20px;
}
#c5-acMenu .a p{
    padding-left: 60px;
    padding-top: 4px;
}
dt .q{
    background: url("../img/Q-toggle.png") no-repeat 98% 18px;
}
dt.bg02 .q{
    background: url("../img/Q-toggle02.png") no-repeat 98% 18px;
}
.c5-Q-info {
   border: 1px solid #000;
   display: table;
   width: calc(100% - 2px);
}
.c5-Q-L{
    display: table-cell;
    width: 40%;
}
.c5-Q-L h4{
    padding: 20px;
    background: #333;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid #333;
}
.c5-Q-L p{
    padding: 20px;
}
.c5-Q-L1{
    margin: 25px auto;
    max-width: 650px;
}

.c5-Q-R{
     display: table-cell;
     border-left: 1px solid #333;
}
.c5-Q-R h4{
    padding: 20px;
    background: #333;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid #333;
}
.c5-Q-p{
    padding: 20px;
    width: 100%;
}

.c5-Q-R .c5-lh{
    line-height: 1.3;
}
.c5-Q-R .c5-Q-L2 {
    padding: 0 0 0 20px;
    width: auto;
    text-align: center;
}
.c5-Q-R .c5-Q-L3 {
    padding: 0 0 0 20px;
    width: auto;
    text-align: center;
}
@media screen and (max-width: 640px) {
    #c5-Q-intro{
    margin-bottom: 30px !important;
}
    #c5-acMenu{
    margin-bottom: 30px !important;
}

.c5-Q-info {
    border: 1px solid #000;
   display: block;
}
.c5-Q-L{
    display: block;
    width: auto;
}
.c5-Q-R{
     display: block;
     border: none;
}
.c5-Q-R h4{
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    border-left: none;
}
.c5-Q-R .c5-Q-L2{
    float: none;
    padding: 0;
    margin: 20px auto 0 auto;
    width: 50%;
    max-width: 128px;
}
.c5-Q-R .c5-Q-L3 {
    float: none;
    padding: 20px 0 0 0px;
    width: auto;
    text-align: center;
}
}

.c5-Q-supbnr{
    margin:0 auto;
    text-align: center;
}


/* modal
------------------------------------------------------------------------------------------------------ */

/*オーバーレイの設定*/
#boxer-overlay {
  background: #000;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 105;
}

/* lineup Area
-------------------------------------------------------------------------------------- */
#c5-lineup a.c5-btn {
  text-decoration:none;
  margin-top: 6%;
}

#c5-lineup {
    clear: both;
    width: 100%;
    overflow: hidden;
}
/*
#c5-lineup p {
    font-size: 116%;
    font-weight: bold;
    margin: 20px 0;
}
*/
#c5-lineup ul {
    margin-right: -3.8461%;
    *zoom: 1;
    padding: 0;
}
#c5-lineup ul:before,
#c5-lineup ul:after {
    display: block;
    overflow: hidden;
    content: "";
}
#c5-lineup ul:after {
    clear: both;
}
#c5-lineup li {
    float: left;
    margin-right: 1%;
    width: 31.3%;
    list-style: none;
    padding: 0;
}

@media screen and (max-width: 640px) {
  #c5-lineup {
    margin-top: 20px;
}
#c5-lineup li {
  height: auto;
}
.c5-imgsec {
    width: 100% !important;
    margin-right: 0;
    margin-top: 0;
}
.c5-imgsec2 {
    width: 100% !important;
    margin-right: 0;
    margin-top: 0;
}
}

#c5-lineup li dl.c5-prdbox {
    margin: 0 0 2%;
    padding: 2%;
    border: 1px solid #ccc;
    float: left;
    /*overflow: hidden;*/
    background: #fff;
    min-height: 505px;
}
#c5-lineup li dl.c5-prdbox dt {
    margin: 0 3.5% 0 0;
    padding: 0;
    float: left;
    width: 38%;
}
#c5-lineup li dl.c5-prdbox dt img {
    width: 100%;
    float: left;
}
#c5-lineup li dl.c5-prdbox dd {
    margin: 2% 0 6%;
    padding: 0;
    float: left;
    width: 58%;
}

#c5-lineup li span.c5-labelb,
#c5-lineup li span.c5-name
 {
    font-size: 76%;
    display: block;
}

#c5-lineup li span a {
    color: #666;
    text-decoration: none;
}
#c5-lineup li span a:hover, #c5-lineup li span a:active {
    color: #999;
    text-decoration: none;
}
#c5-lineup li dl.c5-prdbox dd span.c5-labelb {
    /*margin: 6% 0 0;*/
    padding: 0;
    display: block;
    color: #000 !important;
    font-weight: normal;
    border-radius: 5px;
    line-height: 1;

}
#c5-lineup li dl.c5-prdbox dd span.c5-name{
    margin: 6% 0 0;
    font-weight: bold;
    line-height: 1;
}
#c5-lineup li dl.c5-prdbox dd span a {
    color: #fff !important;
}
#c5-lineup li dl.c5-prdbox dd span a:hover, #c5-lineup li dl.c5-prdbox dd span a:active {
    color: #fff !important;
}
.s5-link a {
    text-decoration: underline !important;
}
.s5-link a:hover {
    text-decoration: none !important;
}

.c5-logoset {
    display: block;
    margin: 0;
    padding: 0 0 3%;
    width: 70%;
    overflow: hidden;
}

@media screen and (max-width: 640px) {
  #c5-lineup {
    clear: both;
    width: 100%;
    overflow: hidden;
  }
  /*
  #c5-lineup p {
    font-size: 120%;
    font-weight: bold;
  }
  */
  #c5-lineup ul {
    margin-right: 0;
    *zoom: 1;
    padding: 0;
  }
  #c5-lineup ul:before,
  #c5-lineup ul:after {
    display: block;
    overflow: hidden;
    content: "";
  }
  #c5-lineup ul:after {
    clear: both;
  }
  #c5-lineup li {
    clear: left;
    margin-right: 0;
    margin-bottom: 2%;
    width: 100%;
    list-style: none;
    padding: 0;
  }
  #c5-lineup li dl.c5-prdbox {
    float: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    min-height: auto;
  }
}

/*#c5-lineup li dl.c5-prdbox dd .s5-storeButton,*/
#c5-lineup li dl.c5-prdbox dd .s5-button{
    width: 90%;
    text-align: center;
    color: #FFF;
    font-size: 14px;
    font-size: .875rem;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    padding: 8px 18px;
    border: none;
    border-radius: 1px;
    background: #5787f4;
    background-color: rgb(87, 135, 244);
    font-weight: normal;
}
#c5-lineup li dl.c5-prdbox dd .s5-storeButton{
    width: 90%;
    text-align: center;
    color: #FFF;
    font-size: 14px;
    font-size: .875rem;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    padding: 8px 18px;
    border: none;
    border-radius: 1px;
    font-weight: normal;
}
.s5-button:before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 .6em .2em 0;
  /* triangle */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: .25em 0 .25em .4em;
  border-color: transparent transparent transparent #fff;
}

.c5-name {
    margin-bottom: 10px !important;
}
.c5-labelb {
    padding: 4px 6px !important;
    color: #000 !important;
    font-weight: bold;
    font-size: 80%;
    display: inline-block!important;
    border: 1px solid #000;
    border-radius: 5px;
    margin-top: 2px;
}
.c5-copyright{
    font-size: 11px;
    margin-top: 20px;
}
.c5-copyright2{
    font-size: 11px;
    margin-top: 20px;
}
@media screen and (max-width: 640px) {
  .c5-copyright{
  font-size: 10px;
  margin-top: 0px;
  margin-bottom: 20px;
  }
  .c5-copyright2{
  font-size: 11px;
  margin-top: 0px;
  margin-bottom: 20px;
  }
}
#c5-lineup li dl.c5-prdbox dd span.c5-lineup-note{
    color: red !important;
}

.c5-labelmg{
    margin: 10px 0 30px 0;
}
.c5-labelmg2{
    margin: 10px 0 5px 0;
}

@media screen and (max-width: 640px) {
    .c5-labelmg2{
    margin: 10px 0 30px 0;
    }
}

/* floatingArea
-------------------------------------------------------------------------------------- */
#c5-wrap .floating{
position: fixed;
bottom:330px;
right: 0;
z-index: 10000;
}
#c5-wrap .floating a{
display: block;
color: #FFF;
text-decoration: none;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
background: #ab8b5d;
font-size: 15px;
padding: 15px 6px 15px 0;
width: 39px;
box-sizing: border-box;
}
#c5-wrap .floating a img{
width: 15px;
height: auto;
margin: 0 3px 5px 0;
vertical-align: middle;
display: inline-block;
position: relative;
transform: translateX(-2px);
}
/* #c5-wrap .survey{
position: fixed;
bottom:100px;
right: 0;
z-index: 10000;
border: solid 1px #FFF;
border-right: none;
}
#c5-wrap .survey a{
display: block;
color: #FFF;
text-decoration: none;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
background: #000;
padding: 10px 6px 10px 0;
width: 39px;
box-sizing: border-box;
}
#c5-wrap .survey a img{
width: 15px;
height: auto;
margin: 5px 3px 5px 0;
vertical-align: middle;
display: inline-block;
position: relative;
transform: translateX(-2px);
}
#c5-wrap .survey a img:last-child{
width: 15px;
} */



/* 2022.05.31 add 発売モデル開始予定日
------------------------------------------------------------------------*/
.c5-newrelease {
    display: block;
    font-size: .75rem;
    font-weight: normal;
    line-height: 1.4;
    color: #f00;
    margin: 5px 0 0;
    padding-left:1em;
    text-indent:-1em;
}