/**********************************************************************/
/* 製品特長
/**********************************************************************/

section.product .bodying .catch{
  padding: 0 0 2em 0;
}
@media screen and (max-width: 520px){
  section.product .bodying .catch{
    text-align: left;
    padding: 0 0 1em 0;
  }
  section.product .bodying .catch br{
    display: none;
  }
}

/*--------------------------------------------------------------------*/
/* logo */

section.product .bodying .logo{
  padding: 3em 0 2em 0;
}
section.product .bodying .logo .symbol{
  margin: auto;
  margin-bottom: .5em;
}
section.product .bodying .logo .type{
  margin: auto;
  margin-bottom: .5em;
}
@media screen and (max-width: 768px){
  section.product .bodying .logo .symbol{
    max-width: 20vw;
  }
  section.product .bodying .logo .type{
    max-width: 46vw;
  }
}

/*--------------------------------------------------------------------*/
/* departments */

section.product .bodying .departments{
  padding: 2em 0;
}
section.product .bodying .departments .list{
  gap: 1.5em;
}
section.product .bodying .departments .item{
  width: 16.8em;
  height: auto;
  background-color: var(--c_white);
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
section.product .bodying .departments .item .upper{
  margin-bottom: auto;
  padding: .75em;
  border-bottom: 1px solid var(--c_border);
  width: 100%;
  box-sizing: border-box;
}
section.product .bodying .departments .item .text{
  flex: 1;
}
section.product .bodying .departments .item .text .label{
  padding-bottom: 3.45em;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 3.45em;
}
@media screen and (max-width: 700px){
  section.product .bodying .departments .item .text{
    font-size: clamp(13px, 2.5vw, 22px);
  }
}
@media screen and (max-width: 520px){
  section.product .bodying .departments{
    padding: 0;
  }
  section.product .bodying .departments .list{
    flex-wrap: wrap;
    gap: 0 2em;
  }
  section.product .bodying .departments .item{
    width: 40vw;
  }
  section.product .bodying .departments .item.i1{
    margin: 0 10vw;
  }
  section.product .bodying .departments .item.i2,
  section.product .bodying .departments .item.i3{
    margin-top: -1em;
  }
}

/*--------------------------------------------------------------------*/
/* アイコン */

section.product .bodying .departments .item.i1 .text .label{
  background-image: url("../img/product/product_image_1.svg");
}
section.product .bodying .departments .item.i2 .text .label{
  background-image: url("../img/product/product_image_2.svg");
}
section.product .bodying .departments .item.i3 .text .label{
  background-image: url("../img/product/product_image_3.svg");
}

/**********************************************************************/
/* 機能タグ
/**********************************************************************/

section.product .features{
  padding: 2em 0;
}
section.product .features .list .term{
  display: inline-block;
  border: 1px solid var(--c_border);
  padding: 2px;
  border-radius: .55em;
}
section.product .features .list .term .icon{
  display: inline-block;
  background-color: var(--c_primary);
  padding: .75em 1em .75em 3em;
  border-radius: .5em;
  line-height: 1.5;
  min-width: 10em;
  box-sizing: border-box;
  background-image: url("../img/product/icon_check.svg");
  background-repeat: no-repeat;
  background-position: left 1em center;
  background-size: 1.25em auto;
}
@media screen and (max-width: 520px){
  section.product .features .list{
    font-size: clamp(12px, 3.4vw, 18px);
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  section.product .features .list .icon{
    width: 100%;
  }
}

/**********************************************************************/
/* メッセージ
/**********************************************************************/

section.product .description{
  padding-top: 2em;
}
section.product .description p + p{
  margin-top: 1.5em;
}
@media screen and (max-width: 520px){
  section.product .description{
    padding-top: 1em;
  }
}

/**********************************************************************/
/* レイアウト
/**********************************************************************/

section.product hr{
  padding: 3em 0;
  margin: 0;
}
@media screen and (max-width: 520px){
  section.product hr{
    padding: 2em 0;
  }
}