@charset "utf-8";

#mainContents .p_catalogbox p a {font-size: 12px;line-height: 30px;}
#mainContents .p_catalogbox {width: 260px;margin: 0 0 20px auto;}
.productLook_strength {margin: 15px 0;width: 100%;padding: 10px;}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
モーダル
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/* モーダル ボタン*/
.l-product-f{margin-bottom: 30px;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.l-product-f::after{content: "";display: inline-block;width:31.5%}
.l-product-f-box{width: 31.5%;border-top: 5px solid #efefef;border-right: 1px solid #efefef;border-left: 1px solid #efefef;border-bottom: 1px solid #efefef;margin-bottom: 30px}
.l-product-f-box-inner{box-sizing: border-box;padding: 10px}
.m-product-smn{width: 100%;border-bottom: 1px solid #efefef;cursor: pointer;transition: 0.3s;box-sizing: border-box;background-color: #000000;display: inline-block;overflow: hidden;}
.m-product-smn img{width: 100%;transition: 0.3s;}
.m-product-smn img:hover{opacity: 0.9;transform: scale(1.1);}
.m-product-about{height: 100px;display: block;}
.m-product-about:hover{text-decoration: underline;}
.m-product-type{color: #0348a6; font-size: 12px;display: block;margin-bottom: 10px}
.m-product-name{font-size: 15px;font-weight: bold;line-height: 1.2;display: block;margin: 0 0 10px 0;border: none;color: #000;}
.m-product-size{font-size: 11px;display: block;margin-bottom: 10px}
.btn-product-about{font-size: 14px;box-sizing: border-box;margin-right: 10px;padding: 5px 8px;background-color: #efefef;border: 1px solid #ddd;cursor: pointer;transition: 0.3s;display: inline-block;}
.btn-product-about:hover{opacity: 0.7}
.btn-product-pdf{font-size: 14px;padding: 5px;margin: 0 5px;box-sizing: border-box;cursor: pointer;transition: 0.3s;display: inline-block;text-decoration: underline;position: relative;}
.btn-product-pdf:hover{opacity: 0.7;text-decoration: none;}
.btn-product-movie{font-size: 14px;padding: 5px 4px;box-sizing: border-box;cursor: pointer;transition: 0.3s;display: inline-block;text-decoration: underline;position: relative;}
.btn-product-movie:hover{opacity: 0.7;text-decoration: none;}
.btn-product-pdf::before, .btn-product-movie::before {content: url(/images/triangle.gif);position: absolute;left: -5px;display: inline-block;padding: 4px 0;top: 10px;}

@media screen and (max-width: 768px) {
  .l-product-f::after{width:48%}
  .l-product-f-box{width: 48%;}
  .btn-product-pdf::before, .btn-product-movie::before {padding: 8px 0;}
}

@media screen and (max-width: 550px) {
  .l-product-f{margin-bottom: 40px}
  .l-product-f-box{align-items: flex-start;align-items: center;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
  .l-product-f::after{content: none;}
  .l-product-f-box{width: 100%;margin-bottom: 5px;border-top: 1px solid #efefef;}
  .m-product-smn{width: 35%;border-bottom: none;background-color: #FFF}
  .l-product-f-box-inner{width: 65%;}
  .m-product-about{height: auto;}
}

/*モーダル 仕組み*/
body.is-modal-active {overflow: hidden;position:fixed;width: 100%;left:0;}/*背景スクロール防止*/
.modal {position: fixed;width:100%;height:100%;top:0;left:0;display:none;z-index:200;}
.overLay {position:absolute;top:0;left:0;background:rgba(0,0,0,0.8);width:100%;height:100%;z-index:300;}
.modal__inner {position:fixed;width: 80%;max-width: 980px;max-height: 100vh;z-index:400;margin-top:80px;margin-left: 50%;transform: translateX(-50%);top:0;left:0;overflow-y: auto;-ms-overflow-style: none;scrollbar-width: none;}
.modal__inner::-webkit-scrollbar {display: none;}
.modal__inner::after{content: "";display: inline-block;height: 200px}
.l-modalClose{display: inline-block;position: fixed;z-index:  500;margin-top: 80px;right:10%;text-align: right;transform: translateX(150%)}
.l-modalClose img{cursor: pointer;transition: 0.3s}
.l-modalClose img:hover{opacity: 0.7}
.l-modalClose-pc{position: relative;width: 100%;background-color: #4a4a4a;color: #FFF ;background-color: #FFF;text-align: center;}
.l-modalClose-pc p {background-color: #4a4a4a;display: inline-block;box-sizing: border-box;padding: 15px 0;width: 50%;max-width: 250px;margin: 20px auto 40px auto;cursor: pointer;transition: 0.3s}
.l-modalClose-pc p:hover {opacity: 0.7}
.modal__inner-footer{height: 200px}
@media only screen and (max-width: 768px){
  .l-modalClose-sp{position: relative;width: 100%;max-width: 400px;margin: 40px auto 0 auto;background-color: #4a4a4a;color: #FFF;text-align: center;}
  .l-modalClose-sp p{margin: 0 ;padding: 15px;font-weight: normal;;font-size: 17px;}
  .l-modalClose{margin-top: 60px;transform: translateX(0%);right:5%}
  .modal__inner {margin-top:100px;width: 90%;}
}
@media only screen and (max-width: 480px){
  .l-modalClose{margin-top: 13%}
}

/*モーダル 中身*/
.modal__inner article{padding: 50px 25px;box-sizing: border-box;background-color: #FFFFFF;}
.modal__inner article h1{border-left: 5px solid #c01443;font-size: 20px;font-weight: bold;padding-left: 15px;box-sizing: border-box;margin-bottom:10px;}
.modal__inner article .btn-prodct-contact{border: 1px solid #ffe78a;background-color: #ffe78a;display: block;max-width: 500px;width: 100%;padding: 10px;text-align: center;margin: 0 auto;font-weight: bold;box-sizing: border-box;}
.modal__inner article .btn-prodct-contact:hover{color: #000;border: 1px solid #bf1544;opacity: 0.7}
.modal__inner article .btn-prodct-contact-min{font-size: 12px;border: 1px solid #ffe78a;background-color: #ffe78a;display: block;padding: 3px;text-align: center;margin: 0 0 40px auto;font-weight: normal;box-sizing: border-box;width: 170px}
.modal__inner article .btn-prodct-contact-min:hover{color: #000;border: 1px solid #bf1544;opacity: 0.7}
.modal__inner article .modal__inner-flex{margin-bottom: 50px;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.modal__inner article .modal__inner-flex-left{width: 40%}
.modal__inner article .modal__inner-flex-left img{width: 100%}
.modal__inner article .modal__inner-flex-right{width: 55%}
.modal__inner-table{border-top: 1px solid #dddddd;border-left: 1px solid #dddddd;border-right: 1px solid #dddddd;box-sizing: border-box;border-collapse: collapse;border-spacing: 0;font-size: 14px;display:block;width: 100%}
.modal__inner-table tr{border-bottom: 1px solid #dddddd;}
.modal__inner-table tr th{border-right: 1px solid #dddddd;background-color: #efefef;padding: 15px;font-weight: normal;}
.modal__inner-table tr td{padding: 15px;}
.modal__inner-table ul li{margin: 10px 0;line-height: 1.2;padding-left: 1em;text-indent: -1em;}
.modal__inner-table-about tr th{width: 30px}
.thtd100,.thtd50,.thtd33{margin-top: 30px}
.thtd100 tbody, .thtd100 tr, .thtd100 th, .thtd100 td{display: block;width: 100%;box-sizing: border-box;text-align: center;}
.thtd50 tbody, .thtd50 tr{display: block;width: 100%;box-sizing: border-box;text-align: center;}
.thtd50 tr:first-child{background-color: #efefef;}
.thtd50 th, .thtd50 td{display: inline-block;width: 50%;box-sizing: border-box;text-align: center;}
.thtd50 th, .thtd50 td{border-right: 1px solid #dddddd;}
.thtd50 th:last-child, .thtd50 td:last-child{border-right: none;}

@media only screen and (max-width: 768px){
  .modal__inner article{padding: 50px 20px;}
  .modal__inner article .modal__inner-flex-left{width: 100%;margin-bottom: 40px}
  .modal__inner article .modal__inner-flex-right{width: 100%}
}

/*モーダル 中身 youtube*/
.modal__inner_youtube_16-9{position:relative;width:100%;height:0;padding-top:56.25%;}
.modal__inner_youtube_16-9 iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
.modal__inner_youtube_4-3{position:relative;width:80%;height:0;padding-top:75%;}
.modal__inner_youtube_4-3 iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
