/* sp版・全体共通 */

body {
  width: 100%;
  color: #4c4948;

  background-color: #e0e0e0;
}

main {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  padding-bottom: 5rem;
}

.contents {
  width: 90%;

  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* top画像のCSS */
#top-img-area {
  background-image: url("../images/01_bg.png");
  background-size: cover;
  display: flex;
  width: 100%;
  height: 25rem;

  align-items: center;
  background-position: 75% 50%;
}

#top-img-contents {
  width: 50%;
  text-align: center;

  margin-left: 3.5rem;
}

#top-img-text {
  font-size: 1.8rem;
  text-align: left;

  font-family: "Noto Sans Japanese-l";
  letter-spacing: .5rem;
  margin-bottom: 1.3rem;
}

#top-img-text span {
  display: inline-block;
  text-align: left;
}

#home-link-logo {
  display: inline-block;
  text-align: left;
}

#home-link-logo img {
  width: 85%;
}

/* 商品紹介エリアのCSS */
#heding {
  display: flex;
  height: 5rem;
  color: white;
  font-size: 1.5rem;

  background-color: #00b1a9;
  font-family: "Noto Sans Japanese-l";
  letter-spacing: .7rem;
  justify-content: center;
  align-items: center;
}

#product .product-clm2 {
  display: flex;
  flex-direction: column;
}

#smart-plug-contents,
#smart-remcon-contents {
  width: 100%;
  margin: 0rem 0rem 2.5rem 0rem;
}

#smart-plug-contents {
  background-color: #eef0f4;
}

#smart-remcon-contents {
  background-color: #ededec;
}

.smart-title {
  width: 100%;
  margin: 2rem 0rem 2rem 0rem;
  font-size: 1.3rem;
  text-align: center;

  font-family: "Noto Sans Japanese-m";
  letter-spacing: .1rem;
}

.product-name {
  font-size: 1.3rem;

  font-family: "Noto Sans Japanese-r";
}

.model-number {
  font-size: 1.2rem;

  letter-spacing: .2rem;
  font-family: "Noto Sans Japanese-r";
}

.img-area {
  background-image: url("../images/01_1.png");
  background-size: cover;
  display: flex;
  width: 100%;
  height: 15rem;

  align-items: center;
}

#bg-plug {
  background-image: url("../images/01_1.png");

  justify-content: flex-end;
  background-position: center left;
}

#bg-remcon {
  background-image: url("../images/01_2_rc2.png");

  justify-content: flex-start;
  background-position: center right;
}

.img-text-plug {
  padding-right: 6rem;
}

.img-text-remcon {
  padding-left: 3rem;
}

.product-name,
.model-number {
  text-align: center;
}

.func-title {
  color: #00b1a9;
  font-size: 1.5rem;
  text-align: center;

  list-style-type: none;
}

.func-title span {
  display: block;

  font-family: "Noto Sans Japanese-sb";
}

.func-text {
  font-size: 1.3rem;
  text-align: center;

  list-style-type: none;
  line-height: 2.5rem;
}

.func-text span {
  display: block;

  font-family: "Noto Sans Japanese";
}

.top-text,
.bottom-text {
  padding: 1.2rem 0rem;
}

hr {
  width: 90%;
  border: solid 1px #00b1a9;
}

/* リンクボタン部分のCSS */
#sound-control-title {
  font-size: 1.5rem;
  text-align: center;

  margin-top: 3rem;
  margin-bottom: 2rem;
  letter-spacing: .3rem;
}

.control-setting,
#plug-control-setting,
#remcon-control-setting {
  display: flex;
  width: 100%;
  height: 6rem;
  border: solid 2px #00b1a9;
  color: #00b1a9;
  text-decoration: none;
  text-align: center;

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

.control-setting {
  width: 100%;
  height: 6rem;
}

.control-setting a,
#plug-control-setting a,
#remcon-control-setting a {
  display: flex;
  width: 100%;
  height: 100%;
  color: #00b1a9;
  font-size: 1.3rem;
  text-decoration: none;

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

.control-setting a:hover,
#plug-control-setting a:hover,
#remcon-control-setting a:hover {
  color: #ffffff;

  background-color: #00b1a9;
  -webkit-transition: all 300ms 0s ease;
  transition: all 300ms 0s ease;
}

#control-link,
#plug-control-setting {
  display: flex;
}

#control-link {
  justify-content: center;
  flex-direction: column;
}

i {
  margin-right: .5rem;
}

.google {
  margin: 1.5rem 0rem;
}

.google-text {
  display: block;
  text-align: left;
}

#sns-link {
  height: 4rem;
}

.ic30a {
  width: 100%;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 768px) {
  /* 768px以上 */

  #top-img-area {
    width: 100%;
    height: 38rem;

    background-position: 75% 50%;
  }

  #top-img-contents {
    margin-left: 10rem;
  }

  #top-img-text {
    font-size: 4.3rem;

    letter-spacing: 1rem;
    margin-bottom: 1.5rem;
  }

  #home-link-logo img {
    width: 80%;
  }

  /* 商品紹介 */
  #heding {
    height: 6rem;
    font-size: 3.5rem;
  }

  #product {
    flex-direction: column;
  }

  #smart-plug-contents,
  #smart-remcon-contents {
    width: 100%;
    margin: 0rem 0rem 4rem 0rem;
  }

  .smart-title {
    margin: 3.5rem 0rem 2rem 0rem;
    font-size: 2.5rem;

    letter-spacing: .2rem;
  }

  .product-name {
    font-size: 2.5rem;
  }

  .model-number {
    font-size: 2.2rem;

    letter-spacing: .2rem;
  }

  .img-area {
    width: 100%;
    height: 35rem;
  }

  .img-text-plug {
    padding-right: 13rem;
  }

  .img-text-remcon {
    padding-left: 10rem;
  }

  .func-title {
    font-size: 2.4rem;
  }

  .func-text {
    font-size: 1.5rem;

    line-height: 2.5rem;
  }

  .top-text,
  .bottom-text {
    padding: 3rem 0rem;
  }

  hr {
    width: 80%;
  }

  /* リンクボタン部分のCSS */
  #sound-control-title {
    font-size: 3rem;

    margin-top: 8rem;
    margin-bottom: 4rem;
    letter-spacing: .3rem;
  }

  .control-setting,
  #plug-control-setting,
  #remcon-control-setting {
    height: 12rem;
    border: solid 3px #00b1a9;
  }

  .control-setting {
    height: 12rem;
  }

  .control-setting a,
  #plug-control-setting a,
  #remcon-control-setting a {
    font-size: 2.4rem;
  }

  .google {
    margin: 1.5rem 0rem;
  }
}

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

  /* 1024px以上 */
  #top-img-area {
    width: 100%;
    height: 60.7rem;
  }

  #top-img-contents {
    margin-left: 13rem;
  }

  #top-img-text {
    font-size: 6rem;

    letter-spacing: 1rem;
    margin-bottom: 3rem;
  }

  #home-link-logo img {
    width: 80%;
  }

  /* 商品紹介 */
  #heding {
    height: 9rem;
    font-size: 4rem;
  }

  #product .product-clm2 {
    flex-direction: row;
    justify-content: center;
  }

  #smart-plug {
    width: 50rem;

    margin-right: 4rem;
  }

  #smart-remcon {
    width: 50rem;
  }

  #smart-remcon {
    width: 50rem;
  }

  #smart-plug-contents,
  #smart-remcon-contents {
    height: 60rem;
  }

  .smart-title {
    margin: 4.5rem 0rem 2rem 0rem;
    font-size: 2.5rem;

    letter-spacing: .2rem;
  }

  .product-name {
    font-size: 2.2rem;
  }

  .model-number {
    font-size: 1.8rem;

    letter-spacing: .2rem;
  }

  .img-area {
    height: 30rem;
  }

  .img-text-plug {
    padding-right: 4rem;
  }

  .img-text-remcon {
    padding-left: 2rem;
  }

  /* リンクボタン部分のCSS */
  .control-setting {
    width: 34rem;
    height: 12rem;
  }

  #control-link {
    flex-direction: row;
  }

  .google {
    margin: 0rem 1.5rem;
  }
}

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

@media screen and (max-width: 768px) {
  .pc_view {
    display: none;
  }
}

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

  /* 1366px以上 */
  #top-img-contents {
    margin-left: 20rem;
  }

  #top-img-text {
    font-size: 6.5rem;

    margin-bottom: 5rem;
  }

  #home-link-logo img {
    width: 70%;
  }

  /* 商品紹介 */
  #heding {
    font-size: 5rem;
  }

  .smart-title {
    font-size: 3rem;
  }

  .img-area {
    height: 30rem;
  }

  .img-text-plug {
    padding-right: 6rem;
  }

  .img-text-remcon {
    padding-left: 3rem;
  }
}

/* 20230530 */
.flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

.item_lineup {
  position: relative;
  align-items: stretch;
  margin-bottom: 60px;
}

@media screen and (min-width:768px) {
  .item_lineup {
    margin-bottom: 0px;
  }
}

.item_lineup>div {
  width: 100%;
  position: relative;
  align-items: stretch;
  padding-bottom: 29px;
}

@media screen and (max-width:767px) {
  .flexbox.item_lineup {
    display: block;
  }
}

@media screen and (min-width:768px) {
  .item_lineup>div {
    width: 48%;
    padding-bottom: 0;
  }
}

@media screen and (min-width:1336px) {
  .item_lineup>div {
    padding-bottom: 65px;
  }
  /* 3つ目以降 */
  .item_lineup>div:nth-child(n+3) {
    margin-top: 65px;
  }
}

.item_lineup h2 {
  text-align: center;
  margin: 3rem 0rem 2rem 0rem;
  font-size: 1.3rem;
}

@media screen and (min-width:1024px) {
  .item_lineup h2 {
    margin: 4.5rem 0rem 2rem 0rem;
    font-size: 2.5rem;
    letter-spacing: .2rem;
  }
}

@media screen and (min-width:1366px) {
  .item_lineup h2 {
    font-size: 3rem;
  }
}

.item_lineup p.item_name {
  padding-top: 8px;
  font-size: 12px;
}

.link_bt {
  position: absolute;
  bottom: 0;
  left: 0;
  border: #00b1a9 3px solid;
  padding: 15px;
  background-color: #ffffff;
  width: 100%;
  text-align: center;
  font-size: 16px;
}



.link_bt a {
  color: #00b1a9;
  text-decoration: none;
}

.link_bt02 {
  position: absolute;
  bottom: -66px;
  left: 0;
  border: #00b1a9 3px solid;
  padding: 15px;
  background-color: #ffffff;
  width: 100%;
  text-align: center;
  font-size: 16px;
}

@media screen and (max-width: 1200px) {
    .link_bt,
    .link_bt02 {
      position: relative;
      margin-bottom: 10px;
    }

    .link_bt02 {
        bottom: unset;
    }
  }

@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 200;
  src: url("/common/font/NotoSansCJKJP-Light.eot");
  src: url("/common/font/NotoSansCJKJP-Light.eot?#iefix") format("embedded-opentype"), url("/common/font/NotoSansCJKjp-Light.woff") format("woff"), url("/common/font/NotoSansCJKjp-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Noto Sans Japanese-l";
  font-style: normal;
  font-weight: 300;
  src: url("/common/font/NotoSansCJKjp-DemiLight.eot");
  src: url("/common/font/NotoSansCJKjp-DemiLight.eot?#iefix") format("embedded-opentype"), url("/common/font/NotoSansCJKjp-DemiLight.woff") format("woff"), url("/common/font/NotoSansCJKjp-DemiLight.ttf") format("truetype");
}

@font-face {
  font-family: "Noto Sans Japanese-r";
  font-style: normal;
  font-weight: 400;
  src: url("/common/font/NotoSansCJKjp-Regular.eot");
  src: url("/common/font/NotoSansCJKjp-Regular.eot?#iefix") format("embedded-opentype"), url("/common/font/NotoSansCJKjp-Regular.woff") format("woff"), url("/common/font/NotoSansCJKjp-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Noto Sans Japanese-m";
  font-style: normal;
  font-weight: 500;
  src: url("/common/font/NotoSansCJKjp-Medium.eot");
  src: url("/common/font/NotoSansCJKjp-Medium.eot?#iefix") format("embedded-opentype"), url("/common/font/NotoSansCJKjp-Medium.woff") format("woff"), url("/common/font/NotoSansCJKjp-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Noto Sans Japanese-sb";
  font-style: normal;
  font-weight: 700;
  src: url("/common/font/NotoSansCJKjp-Bold.eot");
  src: url("/common/font/NotoSansCJKjp-Bold.eot?#iefix") format("embedded-opentype"), url("/common/font/NotoSansCJKjp-Bold.woff") format("woff"), url("/common/font/NotoSansCJKjp-Bold.ttf") format("truetype");
}