@charset "utf-8";

/* content ---------------------*/
/* .heroimage,
section {
  margin-bottom: 3.2rem;
} */

.flex-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* intro ---------------------*/
.intro .intro_inner{
  border-bottom: 1px dotted #666;
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
}

.intro h3 span {
  display: inline-block;
}

.intro h3 .small {
  font-size: 1.44rem;
}

.intro p {
  margin-bottom: 2.56rem;
}

.intro h3{
  font-size: 2.4rem;
  margin-bottom: 0.8rem;
  font-family: "Noto Sans Japanese-sb";
  line-height: 1;
  border-left: 0.8rem solid #f39938;
  padding-left: 0.8rem;
}

.in_l50{
  flex-basis: 50%;
}

.in_r30{
  flex-basis: 30%;
}

.flex_right{
  justify-content: right;
}

.txt_small{
  font-size: 0.8em;
}

/*スタンダートタイプ*/
.std-box div{
  border-bottom: 1px dotted #666;
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
}


/* lineup ---------------------*/
.lineup_ttl h3 {
  font-size: 2.24rem;
  font-family: "Noto Sans Japanese-m";
  background: #fad0d3;
  padding: 0.32rem 0.8rem;
  border-bottom: 1px solid #ed4450;
  margin-bottom: 1.6rem
}

/* 屋内用・屋外用マーク */
.lineup_ttl .out span,
.lineup_ttl .in span {
  display: block;
  padding: 0 0.8rem;
  font-size: 1.6rem;
  font-family: "Noto Sans Japanese-r";
}

.lineup_ttl .in span {
  background: #bfcbda;
  border-bottom: 1px solid #7f97b5;
  color: #00306c;
}

.lineup_ttl .out span {
  background: #e3bfcd;
  border-bottom: 1px solid #c87f9b;
  color: #910038;
}

.lineup_ttl h3+p {
  margin-bottom: 1.6rem;
}

/* item-box */
.item-box {
  margin-bottom: 0.8rem;
  border: 1px solid #666;
  padding: 1.6rem;
}

.item-box .item-l {
  margin-bottom: 1.6rem;
}

.item-box .item-l h4 {
  font-size: 2.4rem;
  font-family: "Noto Sans Japanese-b";
  border-bottom: 1px solid #3e454c;
  padding-bottom: 1.6rem;
  line-height: 1;
  margin-bottom: 1.6rem;
}

.item-box .item-r h5 {
  width: 100%;
  font-size: 1.92rem;
  font-family: "Noto Sans Japanese-b";
  border-left: 0.8rem solid #ed4450;
  padding-left: 0.8rem;
  margin-bottom: 0.8rem;
  line-height: 1;
}

.item-box .item-r img {
  margin-bottom: 1.6rem;
}

/* スペックボックス */
.item-box .spec {
  background: #eee;
  padding: 0.8rem;
  font-size: 80%;
}

.item-box .spec h6 {
  font-family: "Noto Sans Japanese-r";
  margin-bottom: 0.8rem;
  background: #eee;
  line-height: 1;
}

.item-box .spec dl {
  display: flex;
}

.item-box .spec dl dt {
  white-space: nowrap;
}

.item-box .spec span {
  font-family: "Noto Sans Japanese-r";
}

/* ラインナップ内補足ボックス */
.bgcbox {
  margin-bottom: 1rem;
  padding: 1.6rem 0;
  background: #eaf6fd;
}

.bgcbox .flex-box{
  justify-content: center;
}

.bgcbox .bgcbox_txt {
  padding: 1.6rem;
}

.bgcbox .bgcbox_txt p:first-child {
  margin-bottom: 0.8rem;
}

.bgcbox .bgcbox_txt span {
  display: block;
  font-family: "Noto Sans Japanese-m";
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.2;
  display: inline-block;
  color: #0068b7;
}

@media screen and (min-width: 768px) {
  .bgcbox dd {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 767px) {
  .bgcbox dd {
    padding: 0 1.6rem;
    order:2
  }
  .bgcbox .bgcbox_txt {
    order:1
  }
}

/* option ---------------------*/
.lineup .option {
  background: #fff5cc;
  padding: 1.6rem;
}

.kyotsu {
  margin-top: 3.2rem;
}

.lineup .option-inner {
  margin-bottom: 1.6rem;
}

.option h5 {
  margin-bottom: 1.6rem;
  font-size: 1.92rem;
  font-family: "Noto Sans Japanese-r";
  border-bottom: 1px solid #666;
  text-align: right;
}

.option-inner h4 {
  margin-bottom: 1rem;
  font-size: 1.76rem;
  font-family: "Noto Sans Japanese-sb";
  border-left: 0.8rem solid #f39938;
  padding-left: 0.8rem;
}

.option-inner ul {
  font-size: 90%;
}

.option-inner li {
  width: 49%;
  margin-bottom: 0.8rem;
}

.option-inner .op-leg span {
  display: inline-block;
  font-size: 1.6rem;
}

.option-inner .op-color span {
  width: 100%;
  display: inline-block;
  height: 3.2rem;
}

.option-inner .op-color+p {
  margin-top: 0.8rem;
}

.option-inner .flex-clm7::after {
  content: "";
  display: block;
  width: 49%;
}


/* お問い合わせボタン */
.contact_btn a {
  background: #f39938;
  color: #fff;
  padding: 1.6rem;
  display: block;
  border-radius: 10px;
  font-family: "Noto Sans Japanese-r";
  font-size: 1.92rem;
  text-align: center;
  margin: 3.2rem auto 0;
}

.contact_btn a:after {
  content: "\f105";
}

.contact_btn a:after {
  margin-left: 0.8rem;
  font-family: "Font Awesome 5 free";
  font-weight: 900;
  vertical-align: baseline;
}

.contact_btn a:hover {
  background: #f27d00;
}
.mb10{
  margin-bottom:10px;
}

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

  /* 汎用 ---------------------*/
  .flex-box-768 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  /* intro ---------------------*/
  .intro .intro_l {
    flex-basis: 52%;
  }

  .intro .intro_r {
    flex-basis: 46%;
  }

  .intro .intro_r div {
    padding-bottom: 3.2rem;
    margin-bottom: 3.2rem;
  }

  .in_l40 {
    flex-basis: 40%;
  }
  .in_r58 {
    flex-basis: 58%;
  }

  .in_l66 {
    flex-basis: 66%;
  }
  .in_r32 {
    flex-basis: 32%;
  }


  /* line up ---------------------*/
  .lineup_ttl {
    position: relative;
  }

  .lineup_ttl h3 {
    font-size: 2.88rem;
  }

  .lineup_ttl .out span,
  .lineup_ttl .in span {
    position: absolute;
    right: 0.8rem;
    top: 0;
    display: inline-block;
    padding: 0.8rem;
    border: none;
    border-radius: 0 0 10px 10px;
    color: #fff;
  }

  .lineup_ttl .in span {
    background: #00306c;
  }

  .lineup_ttl .out span {
    background: #910038;
  }

  /* item-box ---------------------*/
  .item-box .item-l {
    flex-basis: 59%;
    margin-bottom: 0;
  }

  .item-box .item-r {
    flex-basis: 39%;
  }

 
  /* option ---------------------*/
  .option-inner+.option-inner {
    margin-top: 3.2rem;
  }

  .lineup .option-inner li {
    margin-bottom: 0;
  }

  .option-inner .flex-clm3 li {
    width: 32%;
  }

  .option-inner .flex-clm6 li {
    width: 15%;
  }

  .option-inner .flex-clm6::after {
    content: "";
    display: block;
    width: 15%;
  }

  .option-inner .flex-clm7 li {
    width: 13.5%;
  }

  .option-inner .flex-clm7::after {
    content: "";
    display: block;
    width: 13.5%;
  }

  .option-inner .flex-clm8 li {
    width: 15%;
  }

  .option-inner .flex-clm8::after {
    content: "";
    display: block;
    width: 68%;
  }

  /* お問い合わせボタン */
  .contact_btn a {
    width: 49%;
  }

  /*intro*/
  .intro .intro_inner{
    border-bottom: none;
    padding-bottom: none;
    margin-bottom: none;
  }
  .intro .hr{
    border-bottom: 1px dotted #666;
    padding-bottom: 1.6rem;
    margin-bottom: 1.6rem;  
  }

  /*standard_intro*/
  .std-box{
    display: grid;
    grid-template-columns: 52% 48%;
    grid-template-rows: subgrid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  .std-box .grid01 { grid-area: 1 / 1 / 2 / 2; }
  .std-box .grid03 { grid-area: 2 / 1 / 3 / 2; }
  .std-box .grid04 { grid-area: 3 / 1 / 4 / 2; }
  .std-box .grid05 {
     grid-area: 4 / 1 / 5 / 2;
     border: none;
    }
  .std-box .grid02 {
     grid-area: 1 / 2 / 5 / 3;
     align-self: center;
     border: none;
   }
}

/*タブレットサイズのみ*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .intro .intro_r div p {
    margin-bottom: 0;
  }
}

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

  section {
    font-size: 1.6rem;
  }

  .option-inner ul {
    font-size: 80%;
  }

}

.color-box{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}