@charset "utf-8";
/*  style　[  ]
=================================================================== */
.inq-box {
  display: table;
  margin: 2em auto;
  position: relative;
  padding: 1em 2em;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}
.inq-box:before, .inq-box:after {
  content: '';
  position: absolute;
  top: -10px;
  width: 1px;
  height: -webkit-calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: black;
}
.inq-box:before {
  left: 10px;
}
.inq-box:after {
  right: 10px;
}
.inq-box p {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 1.2em;
}
/* ------------------------------
   製品紹介
------------------------------ */
.product-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 3em 3em 0 3em;
}
.img-box {
  width: 30%;
}
.text-box {
  width: 60%;
}
.text-box h4 {
  margin: 1em 0;
}
.bg-cream .product-box {
  flex-direction: row-reverse;
}

/* ～768px(xs) ____________________________________________________ */
@media screen and (max-width: 768px) {
  .img-box {
    width: 100%;
  }
  .text-box {
    width: 100%;
  }
}
/*-------------------------------------------------------*/
/* アコーディオンA */
.ac-box {
  width: auto;
  border-bottom: #000 1px solid;
  padding-bottom: 1em;
}
/*ラベル*/
.ac-box label {
  font-weight: bold;
  background: #00008b;
  position: relative;
  display: table;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  transition: all 0.5s;
  margin: 0 auto 3em auto;
  padding: 0.5em 3em;
}
/*ラベルホバー時*/
.ac-box label:hover {
  opacity: .7;
  -webkit-transition: all .3s;
  transition: all .3s;
}
/*チェックを隠す*/
.ac-box input {
  display: none;
}
/*チェックのアイコン（↓）*/
.ac-box label:after {
  color: #fff;
  content: "▼";
}
/*チェックのアイコン（↑）*/
.ac-box input:checked ~ label::after {
  color: #fff;
  content: "▲";
}
/*中身を非表示にしておく*/
.ac-box div {
  height: 0px;
  padding: 0px;
  overflow: hidden;
  opacity: 0;
  transition: 0.5s;
}
/*クリックで中身を表示*/
.ac-box input:checked ~ div {
  height: auto;
  padding: 5px;
  background: #eaeaea;
  opacity: 1;
}
/*表示内容の調整
.ac-box div p{
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-align: justify;
}

.ac-small p{
margin-bottom: 0px;
}
*/
/* 詳細内容 */
.product-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.product-list li {
  width: 33%;
  text-align: center;
  margin: 1em 0;
  padding: 2px 10px;
}
.txt {
  color: #00A6DE;
  font-size: 1.2em;
}
table {
  border-collapse: collapse;
}
.size_table th {
  background-color: #f1c392;
  border: 1px solid #333131;
  padding: 5px;
  font-weight: normal;
  width: 140px;
  text-align: center;
}
.size_table td {
  border: 1px solid #333131;
  background-color: #fff;
  padding: 5px;
  width: 140px;
  text-align: center;
}
.size_table {
  margin: 0 auto;
}
/* ～767px(xs) ____________________________________________________ */
@media screen and (max-width: 767px) {
  .product-list li {
    width: 46%;
    margin: 1em 5px;
  }
}
/*----------------------------------------------
   480px以下
  ---------------------------------------------*/
@media screen and (max-width: 480px) {
  
}

/* ～767px(xs) 仮____________________________________________________ */
@media screen and (max-width: 767px) {
  .ac-box label {
    display: none;
  }
  .img-box_pc{
    display: none;
  }
  .table_color td{
    color: #333;
  }
  .table_frame{
    border: none;
  }
  
}
@media screen and (min-width: 768px) {
  .img-box_mobaile{
    display: none;
  }
}
/* @media screen and (min-width: 767px) {
.gallery_form{
  display: none;
}
} -*/
/*===モーダル表示のためのcss　*/
.hide-area { /*モーダル表示をする場所をあらかじめ隠す*/
  display: none;
}
.modaal-fullscreen .modaal-content-container { /*full画面の色設定*/
  background: #333;
  color: #fff;
  text-align: center;
}
.modaal-fullscreen .modaal-close { /*ボタンの色、位置*/
  background: none;
  right: 20px;
}
/*クローズボタンの×の色変更*/
.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
  background: #666;
}
/*キャプション*/
.caption {
  display: block;
  padding: 10px 0;
}
/*===　サムネイル表示のためのcss　*/
.gallery { /*ベースになるギャラリーを横並びに*/
  display: flex;
  justify-content: space-between;
}
.gallery li {
  width: 33.333%;
  padding: 0 10px;
  list-style: none;
}
/*画像の横幅を100%にしてレスポンシブ化*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; /*画像の下にできる余白を削除*/
}
.hide-area { /*モーダル表示をする場所をあらかじめ隠す*/
  display: none;
}
.modaal-fullscreen .modaal-content-container { /*full画面の色設定*/
  background: #333;
  color: #fff;
  text-align: center;
}
.modaal-fullscreen .modaal-close { /*ボタンの色、位置*/
  background: none;
  right: 20px;
}
/*クローズボタンの×の色変更*/
.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
  background: #666;
}
/*キャプション*/
.caption {
  display: block;
  padding: 10px 0;
}
/*===　サムネイル表示のためのcss　*/
.gallery { /*ベースになるギャラリーを横並びに*/
  display: flex;
  justify-content: space-between;
}
.gallery li {
  width: 33.333%;
  padding: 0 10px;
  list-style: none;
}
/*画像の横幅を100%にしてレスポンシブ化*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; /*画像の下にできる余白を削除*/
}