@charset "utf-8";

/* ==================================================

  製品ラインナップ 詳細CSS PC

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

 #main .banner,
 #contents .banner {
  display: none;
  margin: 40px 0;
  padding: 0 20px;
 }

 #main .splink.fixed,
 #contents .splink.fixed {
  background: #ffffff00;
  display: block;
  position: fixed;
  bottom: 0;
  margin: 0;
  padding: 20px;
  width: 100%;
  z-index: 48;
  left: 0;
  right: 0;
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
  text-align: center;
  max-width: 100%;
 }

 .banner.splink.fixed a {
  display: inline-block;
 }

 #main .banner>.btn>a {
  line-height: 2;
 }

 #main .btn>a.cpbnr {
  padding: 0;
  box-shadow: none;
 }

 #main .banner>.btn {
  text-align: center;
 }

 #main .banner.temporary {
  display: initial;
  margin: 40px 0;
  padding: 0 20px;
 }

 .item-list-wrap .item-list-content section .CMP-CM11-image-and-text div.splink a .uc-object img {
  max-height: none;
  max-width: none;
 }

 section#main div.CMP-CM11-image-and-text::before {
  display: none;
 }

}

#contents {
 z-index: 0;
 font-size: 16px;
}

.page-txt {
 margin: 30px 0 0;
 height: 2000px;
}

#modal-open01 {
 color: #cc0000;
}

/* モーダル コンテンツエリア */
#modal-window01 {
 display: none;
 width: 980px;
 margin: 0;
 padding: 20px;
 background-color: #ffffff;
 color: #666666;
 position: fixed;
 z-index: 12;
}

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

section.modal-wrap>div {
 width: 49%;
}

/* モーダル 背景エリア */
#modal-bg {
 display: none;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.5);
 position: fixed;
 top: 0;
 left: 0;
 z-index: 11;
}


#main .splink.fixed.add-ta-r{
  text-align: right;
}

/* ==================================================

  製品ラインナップ 詳細CSS SP

================================================== */
@media screen and (max-width: 767px) {

 /* --------------------------------------------------
  .banner
-------------------------------------------------- */
 #main .banner,
 #contents .banner {
  display: none;
  margin: 40px 0;
  padding: 0 20px;
 }

 #main .splink.fixed,
 #contents .splink.fixed {
  background: #ffffff00;
  display: block;
  position: fixed;
  bottom: 0;
  margin: 0;
  padding: 20px;
  width: 100%;
  z-index: 550;
  left: 0;
  right: 0;
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
  text-align: center;
 }

 #main .banner>.btn>a {
  line-height: 2;
 }

 #main .btn>a.cpbnr {
  padding: 0;
  box-shadow: none;
 }

 #main .banner.temporary {
  display: initial;
  margin: 40px 0;
  padding: 0 20px;
 }

 #main .banner.temporary p.btn {
  width: 80%;
  margin: 0 auto;
 }

 a.js-scroll {
  display: none;
 }

 .item-list-wrap .item-list-content section .CMP-CM11-image-and-text div.splink a .uc-object img {
  max-height: none;
  max-width: 100%;
 }

 .item-list-wrap .item-list-content section .CMP-CM11-image-and-text>div.splink {
  max-width: none;
 }

 section#main div.CMP-CM11-image-and-text::before {
  display: none;
 }

 section.modal-wrap {
  flex-direction: column;
 }

 #modal-window01 {
  width: 96%;
 }

 section.modal-wrap>div {
  width: 100%;
 }

 section.modal-wrap>div:first-child {
  margin-bottom: 20px;
 }

 .communication .banner.splink.fixed img {
  padding: 0;
 }


  #main .splink.fixed.add-sp-small img {
    width: auto;
    height: 26.667vw;
  }
}