@charset "utf-8";

/*▼▼▼スライドショー下コンセプト▼▼▼*/
/*▼トップリボン*/
.topribon{width:100%; text-align:center; }
@media ( max-width: 767px ) {.topribon{height:60px; }}
@media ( min-width: 768px ) {.topribon{height:100px; }}
.topribon img{position:relative; z-index:500; height:auto;}
@media ( max-width: 767px ) {.topribon img{top:-20px; max-width:280px;  width:90%; }}
@media ( min-width: 768px ) {.topribon img{top:-50px; max-width:500px;  width:80%; }}
/*▼トップコンセプト*/
.topconcept_wrapper{width:100%;}
.topconcept{width:90%; padding:20px 0; letter-spacing:1px; }
@media ( max-width: 767px ) {.topconcept h1{font-size:12pt; line-height:180%;} .topconcept p{font-size:11pt; line-height:180%; padding-top:5px; }}
@media ( min-width: 768px ) {.topconcept h1{font-size:22pt; line-height:180%; font-weight:normal; } .topconcept p{font-size:12pt; line-height:220%; padding-top:10px; }}
/*▼セクション毎のにラッピング*/
.section_wrapper{width:100%; padding:10px 0 30px;}
/*▼ベースカラー*/
.bgcolor01{background-color:#ebeef1;}
.bgcolor02{background-color:#fff;}

/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼商品一覧▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
/*▼何をつくる？吹き出し*/
.balloon1 {position: relative; display: inline-block; padding: 7px 10px; min-width: 120px; max-width: 100%; color: #fff; font-size: 14pt; background: #00dcd2; border-radius: 12px; letter-spacing:3px; margin-top:40px; }
.balloon1:before { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -12px; border: 12px solid transparent; border-top: 12px solid #00dcd2; }
.balloon1 p { margin: 0; padding: 14px 20px; }
.showcase_title{width:100%; text-align:center; font-size:18pt; margin:30px 0 14px; color:#505050;}
/*▼商品-プロダクトレイアウト*/
@media (min-width: 768px) {
.product_index_wrapper { width: 100%; padding-bottom: 80px; }
.product_index { max-width: 1280px; margin: auto; width: 96%; display: flex; flex-wrap: wrap; }
.product_index li { flex-basis: 50%; list-style-type: none; } }
@media (max-width: 767px) { .product_index_img img { width: 90%; height: auto; } }
@media (min-width: 768px) { .product_index_img img { width: 96%; height: auto; } }
.product_listindex { width: 90%; margin: 6px auto 0; display: flex; flex-wrap: wrap; }
.product_listindex li { border: 0px red solid; margin-top: 2px; flex-basis: 50%; font-size: 8pt; padding: 6px 0; list-style-type: none; }
@media (max-width: 767px) { .product_listindex li { font-size: 8pt; } }
@media (min-width: 768px) { .product_listindex li { font-size: 9pt; } }
.product_listindex li:nth-child(even) { border-left: 1px #dcdcdc solid; }
.product_listindex a { display: block; text-decoration: none; color: #000; }
.product_listindex a:hover { text-decoration: underline; }
/*▼商品-プロダクト-価格*/
.product_index_img {
  position: relative;
}

.price-container {
  position: absolute;

  left: 0;
  right: 0;
  font-weight: bold;
  color:#666;
  font-size:14pt;
}
@media (max-width:767px) {.price-container {  bottom: 12px;}}
@media (min-width:768px) {.price-container {  bottom: 8px;}}

.price-1 {
  text-align: center;
  animation: fadeInOut 6s infinite;
}

.price-2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  opacity: 0;
  animation: fadeInOut 6s infinite 3s;
}

@keyframes fadeInOut {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0; }
  100% { opacity: 1; }
}

/*▼タイトル箇所*/
.titlepack{max-width:1280px; text-align:center; width:90%; }
@media ( max-width: 767px ) {.title01{ font-size:24pt;  color:#333;  font-weight:bold;  margin-top:10px; } }
@media ( min-width: 768px ) {.title01{ font-size:22pt;  color:#333;  font-weight:bold;  margin-top:12px;  } }
@media ( max-width: 767px ) {.title02{ padding:6px 0 0; font-size:10pt;  color:#333; font-weight:normal; line-height:140%; } }
@media ( min-width: 768px ) {.title02{ padding:6px 0 0; font-size:9pt;  color:#333; font-weight:normal;  line-height:160%; } }

/* title01とtitle02を含むリンクの装飾 */
a {
  text-decoration: none; /* アンダーラインを削除 */
  color: inherit; /* 親要素の色を継承 */
  transition: color 1s ease; /* ふわっと変わるトランジション効果 */ }

a:hover .title01, a:hover .title02 { color: #3cbeb6; /* マウスオーバー時の色 */}



/*▼実績アーカイブ*/
.achievement{max-width:1280px; width:98%;  margin:auto;}
@media ( max-width: 767px ) {.achievement figure{float:left; width:25%;}}
@media ( min-width: 768px) {.achievement figure{float:left; width:20%;}}
.achievement figure img{max-width:100%; height:auto;}
/*▼ニュース*/
.news { border-top:1px #dcdcdc solid; padding: 10px 0 0 0; text-align:left; max-width:1280px; width:90%; line-height:140%; }
.news li{ border-bottom:1px #dcdcdc solid; padding: 12px 0 20px 5px; margin-bottom:10px; list-style-type:none; }
.news li a{display:block; color:#333; text-decoration:none;}
.news li a:hover{display:block; color:#333; text-decoration:underline;}
@media ( max-width: 767px ) {.news{  font-size:8pt;  } }
@media ( min-width: 768px ) {.news{  font-size:9pt; } }
/*▼トップページのボタン*/
.button_wrapper2019{width:250px; margin:30px auto 0;}/*←消して良い*/
.button_wrapper_product_index{width:250px; margin:10px auto 10px;}
.button2019 {display: inline-block; width:100%; line-height: 54px; text-align: center; text-decoration: none; outline: none; background-color: #fff;  color: #000; letter-spacing:2px; margin:0px auto 1px auto; border-radius: 27px;        /* CSS3草案 */   -webkit-border-radius: 27px;    /* Safari,Google Chrome用 */   -moz-border-radius: 27px;   /* Firefox用 */   font-family:Arial,Helvetica,sans-serif; font-size:10pt; font-weight:bold; }
.button2019 img{margin-top:30px;}
.button2019::before,
.button2019::after { position: absolute; z-index: -1; display: block; content: ''; }
.button2019,
.button2019::before,
.button2019::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s;}
.button2019:hover { background-color: #fff; border-color: #00dcd2; color: #00dcd2;}
@media ( max-width: 767px ) {.button2019{border: 1px solid #000; height: 54px; } }
@media ( min-width: 768px ) {.button2019{border: 2px solid #000; height: 56px; }}

/*▼トップスライドショー */
#wrap{width:100%; max-width:1280px; height:auto; margin-left:auto; margin-right:auto; cursor: pointer; }
#slideshow { position:relative; width:100%; height:auto; cursor: pointer; }
#slideshow img { position:absolute; top:0; left:0; z-index:8; width:100%; height:auto; cursor: pointer;}
#slideshow img.active { z-index:10; }
#slideshow img.last-active { z-index:9; }
#slideshow img:hover { -webkit-filter: brightness(1.05); -moz-filter: brightness(1.05); -o-filter: brightness(1.05); -ms-filter: brightness(1.05); filter: brightness(1.05); cursor: pointer;}
.slideshow_spacer img{width:100%; height:auto; cursor: pointer; }
/*▼実績紹介*/
.gisseki { font-weight: bold; text-align: center; color: #15dbd1; display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.gisseki_results{position: relative; top:10px; }
@media (min-width: 1024px) { .jisseki_f { font-size: 20pt; } .jisseki_l { font-size: 30pt; } .jisseki { width: 30px; height: auto; margin: 0 8px; } }
@media (min-width: 768px) and (max-width: 1023px) { .jisseki_f { font-size: 16pt; } .jisseki_l { font-size: 26pt; } .jisseki { width: 28px; height: auto; margin: 0 8px; } }
@media (max-width: 767px) { .jisseki_f { font-size: 14pt; } .jisseki_l { font-size: 24pt; } .jisseki { width: 28px; height: auto; margin: 0 8px; } }
.gisseki li { margin-bottom: 5px; list-style-type:none; }
.gisseki_genzai { font-size: 8pt; color: #828282; margin-top: 4px; letter-spacing: 1px; }
@media ( max-width: 767px ) {.gissekititle{ padding:14px 0 14px; font-size:8pt;  color:#333; font-weight:normal; line-height:140%; } }
@media ( min-width: 768px ) {.gissekititle{ padding:14px 0 14px; font-size:9pt;  color:#333; font-weight:normal;  line-height:160%; } }
/*▼まだまだイロイロ作れます */
.non_product_outwrapper{width:100%; background-color:#898e8f; padding:0 0 60px; }
.non_product_wrapper{border:1px #fff solid; border-radius:30px; max-width:900px; margin:auto; color:#fff; padding:50px 0 40px; margin:0 18px 0; }
@media (min-width:768px) {.non_product{width:100%; margin:auto; font-size:16pt; text-align:left; letter-spacing:1px; text-align:center; }}
@media (max-width:767px)  {.non_product{width:100%; margin:auto; font-size:12pt; text-align:left; letter-spacing:1px; text-align:center; }}

.non_product_title{width:100%; text-align:center; letter-spacing:4px; text-indent:6px; }
@media (min-width:768px) {.non_product_title{font-size:46px; margin-top:18px; }}
@media (max-width:767px) {.non_product_title{font-size:30px; margin-top:18px; line-height:140%; }}
.non_product_wrapper .non_product_txt{width:90%; text-align:center; margin:auto; margin-top:18px; line-height:200%; font-size:12pt; letter-spacing:1px; text-indent:1px; text-align: justify; text-justify: inter-ideograph;}
@media (min-width:768px) {.non_product_wrapper .non_product_txt{font-size:12pt; }}
@media (max-width:767px) {.non_product_wrapper .non_product_txt{font-size:12pt; }}
.button_nonproduct_wrapper{width:250px; margin:30px auto 0;}
.button_nonproduct { display: inline-block; width: 100%; height: 50px; line-height: 48px; text-align: center; text-decoration: none; outline: none; background-color: #fff; border: 2px solid #fff; color: #333; letter-spacing:2px; margin:0px auto 1px auto; font-family:Arial,Helvetica,sans-serif; font-size:9pt; font-weight:bold;  }
.button_nonproduct::before,
.button_nonproduct::after { position: absolute; z-index: -1; display: block; content: ''; }
.button_nonproduct,
.button_nonproduct::before,
.button_nonproduct::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; }
.button_nonproduct:hover { background-color: #fff; border-color: #59b1eb; color: #59b1eb; }