@charset "utf-8";

/* ***************************************************************************** */
/*

　目次

-------------------------------------------------------------------------------

　01. lineupBox
　02. lineupDetail

*/
/* ***************************************************************************** */

/*-----------------------------------------------------------
===  [ 01. lineupBox ]  ====================================
------------------------------------------------------------*/

.lineupBox {
 width: 100%;
 padding-top: 16px;
 overflow: hidden;
}

.lineupBox > .rBlockTitArea {
 margin: 0;
}

.lineupBox .productsFloat {
 float: left;
 width: 48%;
 padding: 10px;
 box-sizing: border-box;
 margin-left: 4%;
}

.lineupBox .productsFloat:nth-child(2n+1) {
 margin-left: 0;
}

.lineupBox .productsFloat .pw46 {
 width: 96%;
 margin: auto;
}

.lineupBox .productsFloat .btn {
 margin-top: 1em;
}

/* SP */
body.responsive-sp .lineupBox {
 padding-top: 0;
}

body.responsive-sp .lineupBox .productsFloat {
 width: 100%;
 padding: 0 0 6% 0;
 margin: 0;
}

body.responsive-sp .lineupBox .productsFloat:nth-child(2n+1) {
 margin: 0;
}

body.responsive-sp .lineupBox .productsFloat .pw46 {
 width: 92%;
}

body.responsive-sp .lineupBox {
 width: 100%;
 overflow: visible;
}

/* ***************************************************************************** */

/*-----------------------------------------------------------
===  [ 02. lineupDetail ]  ====================================
------------------------------------------------------------*/

.lineupDetailBox {
 margin-top: 16px;
}

/* -- detailList -- */
.lineupDetailBox .detailList {
 width: 100%;
 overflow: hidden;
}

.lineupDetailBox .detailList .clearfix {
 width: auto;
 margin: 0 -12px 0 0;
}

.lineupDetailBox .detailList li {
 float: left;
 width: 205px;
 padding: 12px 0;
 margin: 0 12px 12px 0;
 background-color: #025ab3;
 border-radius: 5px;
 text-align: center;
 color: #fff;
}

.lineupDetailBox .detailList li.first-child {
 margin-left: 9px;
}

/* -- detailListbox -- */

.lineupDetailBox .detailListbox {
 width: 680px;
}

.lineupDetailBox .detailListbox div {
 float: left;
 width: 220px;
 margin: 0 10px 0 0;
}

/* - SP - */
body.responsive-sp .lineupDetailBox .detailList .clearfix {
 margin: 0 32px;
}

body.responsive-sp .lineupDetailBox .detailList li {
 float: none;
 width: auto;
 margin: 0 0 14px 0;
 font-size: 138.5%;
}

/* lineupTabBox
----------------------------------------------------*/

/* -- lineupTab -- */

.lineupDetailBox .lineupTab {
 height: 35px;
 overflow: hidden;
 border-bottom: 3px solid #275e72;
 margin: 0 0 20px;
}

.lineupDetailBox .lineupTab li {
 float: left;
 text-align: center;
 font-size: 92.30769%;
 margin-right: 5px;
}

.lineupDetailBox .lineupTab li.first-child {
 background-position: left top;
 margin-right: 6px;
}

.lineupDetailBox .lineupTab li.last-child {
 background-position: right top;
 margin-right: 0;
}

body.responsive-sp .lineupTab li, body.responsive-sp .lineupTab li.first-child, body.responsive-sp .lineupTab li.last-child {
 margin-right: 0;
}

.lineupDetailBox .lineupTab li a {
 display: block;
 padding: 10px 5px;
 width: 151px;
 color: #333;
 font-weight: normal;
 background: #ebeef0;
 text-decoration: none;
 -webkit-border-radius: 5px 5px 0 0;
 -moz-border-radius: 5px 5px 0 0;
 border-radius: 5px 5px 0 0;
}

.lineupDetailBox .lineupTab li a.active, .lineupDetailBox .lineupTab li a:hover {
 color: #fff;
 background: #295e71;
}

.lineupDetailBox .lineupTab li.first-child a.active, .lineupDetailBox .lineupTab li.first-child a:hover {
}

.lineupDetailBox .lineupTab li.last-child a.active, .lineupDetailBox .lineupTab li.last-child a:hover {
}

/* - SP - */
body.responsive-sp .lineupDetailBox .lineupTab {
 margin-bottom: 16px;
 height: auto;
 border-bottom: 0;
}

body.responsive-sp .lineupDetailBox .lineupTab li {
 width: 25%;
 padding-left: 1px;
 margin-bottom: 0;
 box-sizing: border-box;
 background-image: none;
 background-color: transparent;
}

body.responsive-sp .lineupDetailBox .lineupTab li:first-child {
 padding-left: 0;
}

body.responsive-sp .lineupDetailBox .lineupTab li a {
 width: auto;
 padding: 20px 0 44px 0;
 background: #dae0e4 url("/business/image-sensor-camera/products/images/r_lineup_tab_sp_active.png") no-repeat center 50px;
 background-size: 9px auto;
}

body.responsive-sp .lineupDetailBox .lineupTab li a.active, body.responsive-sp .lineupDetailBox .lineupTab li a:hover {
 background: #275e72 url("/business/image-sensor-camera/products/images/r_lineup_tab_sp_active.png") no-repeat center 50px;
 background-size: 9px auto;
}

/* ***************************************************************************** */

.specification sup.notes {
 color: #333333;
}

.specification ul.notesList li span {
 color: #333333;
}

ul.notesList li {
 padding-left: 0.8em;
 text-indent: -0.8em;
}

/* モーダル追記 */
.unitmm {
 margin-bottom: 20px;
 text-align: right;
}

table.speclist.tbl02.tblEven.wp100.mbem1.tcamera {
 width: 100%;
 table-layout: fixed;
}

.main_data {
 text-align: center !important;
}

.main_data img {
 width: 100%;
 height: auto
}

th.speclist_title2 {
 color: #fff;
 font-weight: bold !important;
 background: #666 !important;
 border: 1px solid #414141;
 text-align: center;
 vertical-align: middle;
}

th.speclist_title3 {
 color: #fff;
 font-weight: bold !important;
 background: #7bb589 !important;
 border: 1px solid #414141;
 text-align: center;
 vertical-align: middle;
}

.boxC01 {
 background-color: #d4e0f0 !important;
}

.boxC02 {
 background-color: #dbedf8 !important;
}

.boxC03 {
 background-color: #d4e0f0 !important;
}

.boxC04 {
 background-color: #eae0ec !important;
}

.boxC05 {
 background-color: #edf3df !important;
}

.speeding {
 display: inline-block;
 border: 1px solid #333;
 padding: 4px 8px;
 font-weight: 700;
}

.plus {
 padding: 0 5px;
 font-weight: 700;
}

body.responsive-sp .plus {
 display: block;
 margin: 5px 0;
}

sup {
 font-size: 11px;
}

.blue {
 color: #00b0f0;
}

.app {
 background: #dcdcdc;
 padding: 15px;
}

.app h4 {
 font-size: 109%;
 margin-bottom: 10px;
}

.app li {
 float: left;
 width: 30.2%;
 padding: 0 1.5%;
 border-right: 1px solid #929091;
}

.app li:last-child {
 border-right: none;
}

.app h5 {
 margin-bottom: 5px;
 font-size: 105%;
}

.app img {
 margin-bottom: 5px;
}

body.responsive-sp .app {
 padding: 15px 10px;
}

body.responsive-sp .app h4 {
 text-align: center;/*margin-bottom: 25px;*/
}

body.responsive-sp .app li {
 float: none;
 width: 98%;
 padding: 0 2% 25px;
 border-right: none;
 text-align: center;
 /*margin-bottom: 25px;*/
 margin-top: 25px;
 border-bottom: 1px solid #929091;
}

body.responsive-sp .app li:last-child {
 border-bottom: none;
}

body.responsive-sp .app h5 {
 margin-bottom: 5px;
}

.arrow {
 margin-top: 2px;
 display: inline-block;
}

.cclink {
 width: 100%;
 margin-bottom: 10px;
}

.cclink th {
 border: 1px solid #777372;
 background-color: #dcdcdc;
 padding: 10px;
 text-align: center;
}

.cclink td {
 border: 1px solid #777372;
 background-color: #eee;
 padding: 10px;
 font-weight: 700;
}

.cclink th.red {
 background-color: #f6c4ab;
 border-top: 2px solid #e04158;
 border-left: 2px solid #e04158;
 border-right: 2px solid #e04158;
}

.cclink td.red {
 background-color: #fdece3;
 border-left: 2px solid #e04158;
 border-right: 2px solid #e04158;
}

.cclink td.red2 {
 background-color: #fdece3;
 border-left: 2px solid #e04158;
 border-right: 2px solid #e04158;
 border-bottom: 2px solid #e04158;
}

.clearfix.lineups {
 margin-bottom: 20px;
}

.listindent li {
 margin-bottom: 0.5em;
 font-size: 100%;
 color: #333;
 padding-left: 1.5em;
 text-indent: -1.0em;
}

p.catch-title {
 text-align: center;
 font-size: 1.5em;
 margin-bottom: 15px;
 font-weight: bold;
}

.alLeft {
 height: 50px;
}

body.responsive-sp p.alLeft {
 height: auto !important;
}

/* -- モーダル追記 -- */
.modalHeading1 {
 font-weight: bold;
 font-size: 30px;
 line-height: 1.5;
}

.modalHeading2 {
 margin-top: 1.5em;
 font-size: 2.1rem;
 line-height: 1.5;
}

.modalHeading3 {
 margin-top: 30px;
}

.modalHeading4 {
 position: relative;
 margin-top: 1.5em;
 font-size: 1.4rem;
 line-height: 1.5;
}

.leadText {
 margin-top: 1em;
 font-size: 20px;
 line-height: 1.5;
 font-weight: bold;
}

.modalDisplay {
 overflow: hidden;
 position: fixed;
 width: 100%;
 height: 100%;
}

.modalLayout {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.7);
 z-index: 10000;
 display: none;
}

*, *:before, *:after {
 /*box-sizing: inherit;*/
}

.modalLayoutInner {
 box-sizing: border-box;
 width: 100%;
 max-width: 850px;
 margin: 0 auto;
 padding: 100px 50px;
 background-color: #fff;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}

.modalLayoutInner p.text {
 text-align: left;
 font-size: 15px;
 margin-top: 1em;
 line-height: 1.5;
}

.modalLayoutInner > *:first-child {
 margin-top: 0;
}

.is-fhp-text {
 text-align: center;
}

.is-fhp-button a {
 display: block;
 background-color: #fff;
 text-align: center;
 box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
 transition-property: background-color, border-color, color, box-shadow;
 transition-duration: 0.4s;
}

.is-fhp-button > a:hover {
 transition-property: background-color, border-color, color, box-shadow;
 transition-duration: 0.4s;
 box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.15);
}

.modalLayout .closeBtn {
 position: absolute;
 top: 0;
 right: 0;
 background-color: #999;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 z-index: 10;
}

.modalLayout .closeBtn > a {
 display: block;
 width: 60px;
 height: 60px;
}

.modalLayout .closeBtn > a:before {
 content: "";
 position: absolute;
 top: 15px;
 right: 15px;
 display: inline-block;
 width: 30px;
 height: 30px;
 background: url(/common/img/com_sprite01.png) no-repeat -90px -20px;
}

.tbl02 th, .tbl02 td {
 border-right: 1px solid #b4b9bd;
 border-bottom: 1px solid #b4b9bd;
 padding: 7px;
 vertical-align: middle;
}

.tbl02 td.at_text1 {
 text-align: left !important;
 padding-left:5em;
}

.tbl02 td.at_text2 {
 text-align: left !important;
  padding-left:5em;
}

.rBlockSectTit span.green {
 color: #fff;
 background-color: #7bb589;
 display: inline-block;
 padding: 2px 4px;
 margin-right: 0.5em;
}

@media print, screen and (min-width: 768px) {

.is-fhp-flex4.is-flex4 > * {
 width: calc((100% - 54px) / 4);
}
}

@media only screen and (max-width: 767px) {

.modalLayout {
 overflow-x: hidden;
}

.leadText {
 font-size: 16px;
}

.modalHeading1 {
 font-size: 20px;
}

.modalLayoutInner p.text {
 font-size: 13px;
}

div.modalLayoutInner ul.btnLink li.iie {
 margin-top: 1em;
}

div.modalLayoutInner ul.btnLink li {
 display: block;
}

.modalLayoutInner {
 padding: 30px;
 margin: 25px 0 0;
}

.is-fhp-flex4.is-flex4 > * {
 width: 100%;
}

.is-fhp-flex4.is-flex4 > .column:not(:first-child), .is-fhp-flex4.is-flex4 > .column:nth-child(2) {
 margin-top: 20px !important;
}

.is-fhp-button {
 margin-top: 5px;
}

.is-fhp-text {
 text-align: center;
 font-size: 1.2rem;
 color: #555;
}

.modalLayout .closeBtn > a {
 width: 50px;
 height: 50px;
}

.modalLayout .closeBtn > a:before {
 top: 10px;
 right: 10px;
}

.tbl02 td.at_text1 ,
.tbl02 td.at_text2 {
 text-align: left !important;
  padding-left:7px;
}


}

.square_btn a {
 text-decoration: none;
}

.square_btn {
 display: inline-block;
 padding: 0.3em 1em;
 text-decoration: none;
 color: #ce0c0c;
 border: solid 1px #ce0c0c;
 border-radius: 3px;
 transition: .4s;
}

ul.btnLink li.iie a.square_btn {
 border: solid 1px #929292;
}

ul.btnLink li {
 display: table-cell;
}

ul.btnLink {
 border-collapse: separate;
 border-spacing: 1em 0;
 overflow: hidden;
 display: table;
 margin: 1em auto 0;
}

ul.btnLink li a {
 text-decoration: none;
 width: 200px;
 font-size: 1.2em;
 padding: 10px;
 color: #ce0c0c;
}

ul.btnLink li.iie a {
 color: #929292;
}

ul.btnLink li a span {
 font-size: 0.8em;
}

ul.btnLink li.iie {
 margin-right: 0;
}

ul.btnLink li.iie a.square_btn:hover {
 background: #929292;
 color: white;
}

.square_btn:hover {
 background: #ce0c0c;
 color: white;
}

.mu01 {
 background: #565656;
 padding: 5px;
 color: #fff;
 font-size: 15px;
 line-height: 1;
}

.mu02 {
 background: #757575;
 padding: 3px;
 color: #fff;
 font-size: 13px;
 line-height: 1;
 text-align: center;
}

.mu03 {
 background: #fcee21;
 width: 50%;
 padding: 5px;
 font-weight: bold;
 font-size: 15px;
 line-height: 1;
 text-align: center;
}