@charset "UTF-8";
/* CSS Document */
/*================================================
 *  ラインナップイメージ
 ================================================*/
.lineupImg{ margin: 0 auto 20px; width: 100%; height: 240px; display: flex; justify-content: space-between;}
.lineup{ width: 580px; height: 240px; display: flex;}
.lineupL{ padding-left: 35px; width: 297px; height: 240px; font-size: 1.2em; color:#fff; display: flex; flex-direction: column; justify-content: center; }
.lineupR{ overflow: hidden; width: 283px; height: 240px; border:1px solid #808080;}
.lineupR img{  object-fit: contain;}
.lineupName{ margin: 0 0 12px ; font-size: 2em; font-weight: 700; }
.BG1{ background:#333; }	
.BG2{ background:#0F325B; }

@media screen and (max-width: 640px) {
	.lineupImg{ padding-top: 11.8vw; margin: 0 0 4vw; width: 100vw; height: auto; flex-direction: column;}
	.lineup{ width: 100vw; height: 31vw; margin-bottom: 2vw;}
	.lineupL{ padding: 0 7vw 0 4.8vw; width: 57.82vw; height: 31vw; text-align: justify; font-size: 3.2vw;}
	.lineupR{ width: 42.18vw; height: 31vw;}
	.lineupName{ margin: 0 0 3vw ; font-size: 4.25vw;}

}

/*================================================
 *  カテゴリータブ
 ================================================*/
.tabs{ position:relative; margin: 30px auto 60px; width: 100%; }
.tabs .tab-buttons{ width: 100%; height: 36px; display: flex; justify-content: space-between; align-items: center; }
.tabs .tab-buttons span{
	 width: 31%; height: 100%; text-align: center; font-size: 1.6em; font-weight: 700; line-height: 36px;  color:#6c6c6c; background-color: #FFF; border-bottom: 2px solid #b2b2b2; display: flex; justify-content: center; align-items: center; cursor:pointer;
}
.tab-buttons span:hover{ color:#000; }
.tab-buttons span a{ color:#6c6c6c; width:100% }
.tab-buttons span a:hover{ color:#000; }
.tab-buttons span.active a{ color: #000; }
.tab-buttons span.active { color: #000; border-bottom: 2px solid #0F325B; }
.tab-content{ padding:30px 0 0 0; width: 1190px; min-height: 100vh; height: auto; display:inline-block; }
.tab-buttons #lamp{ 
	width:31%; height:2px; background:#0F325B; display:block; position:absolute; top:34px; transition: all .3s ease-in;
}
#lamp.content2,#lamp.ccb{ left:34.5%; transition: all .3s ease-in; }
#lamp.content3,#lamp.acc{ left:69%; transition: all .3s ease-in; }
#lamp.content1,#lamp.mvc{ left:0; transition: all .3s ease-in; }

@media screen and (max-width: 640px) {
	.tabs .tab-buttons span{ font-size: 3.5vw;line-height: 1.5;}
	
	.tabs .tab-content{ padding:0; width: 100%; min-height: 100vh;}

	.cameraCategoryBox{ margin: 4.8vw 5vw 4vw; width: 90vw; height: 13.5vw;}
	.cameraCategory{ font-size: 3.7vw; line-height: 1.3; }
	.cameraCategoryBox .current{ color:#000; border-color: #0F325B; background:#EBEEF4;}
}


/*================================================
 *  製品特徴
 ================================================*/
.Features{ margin: 35px 0;}
.FeaturesBox{ 
	position: relative; margin: 15px auto; width: 1190px; height: auto; 
	font-size: 1.4em; border:1px solid #4d4d4d; display: flex; box-sizing: border-box;
}
.FeatureTitle{
	width: 195px; font-weight: 700; color:#fff; background:#6C7585;
	display: flex; justify-content: center; align-items: center;
}
.FeatureContent{ overflow: hidden; width: 995px; height: 50px;
}
.Feature{ padding: 0 35px; width: 100%; height: 50px; line-height: 1.3; display: flex; justify-content: flex-start; align-items: center; }	
.FeatureDetail{ font-size:unset; padding: 15px 35px; line-height: 1.9; color: #000; background:#EBEEF4; }

/*----- OPENボタン -----*/
.FeaturesBox label { 
	position: absolute; top: 0; left: 195px; width: 995px; height: 50px; z-index: 1; display: flex; cursor: pointer;
    align-items: center;
    padding-left: 37px;
}
.FeaturesBox label:after {
	content:'▼'; z-index: 2; display: flex; justify-content: center; align-items: center;margin: 17px 50px 17px auto; padding-top: 1px; width: 16px; height: 16px; font-size: 8px; line-height: 16px; color: #fff; border-radius: 50%; background:#6C7585; transition: 0.2s;
}
.FeaturesBox label sup {
	padding-bottom: 0.8em;
}
.FeaturesBox div:has( input:checked )  + label:after { transform: rotate(180deg); transition: 0.2s; }
.FeaturesBox input { display: none; }
.FeaturesBox div:has( input:checked )  ~ .FeatureContent { height: auto; }

@media screen and (max-width: 640px) {
	.Features{ margin: 2vw auto 5vw;}
	.FeaturesBox{ margin: 2vw auto; width: 90vw; font-size: 3.2vw; }
	.FeatureTitle{ width: 26vw; font-size: 3.7vw; }
	.FeatureContent{ width: 64vw; height: 19.5vw; }
	.Feature{ padding: 0 13vw 0 2.5vw; height: 19.5vw; }	
	.FeatureDetail{ padding: 2.5vw; }
	
	.FeaturesBox label { left: 26vw; width: 64vw; height: 19.5vw; padding-left: 10px;}
	.FeaturesBox label:after { 
		margin: 6.75vw 3.5vw 17px auto;  height: 6vw; font-size: 3vw; line-height: 6vw; flex: 0 0 6vw;
	}
}

/*================================================
 *  絞り込み
 ================================================*/

.refineBox{ position: relative; margin: 0 auto; padding: 20px 50px 20px 0; width: 100%; background:#EBEEF4; display: flex;}
.refineBox label { color: #000;}
.refineL{ width: 195px; padding: 15px 0; display: flex; justify-content: center; align-items: flex-start; font-size: 1.4em; font-weight: 700; }
.refineR{  width: 975px; overflow-x: auto; }

dl.refine{ margin: 0; padding: 15px 0 0; width: 100%; min-height: 50px; display: flex; flex-wrap: wrap; align-items: flex-start; border-bottom: 1px solid #b2b2b2; }
dl.refine:nth-last-child(2){ border-bottom: none; }
dl.refine dt{ width: 190px; padding-left:6px; color: #000; font-size: 1.4em; font-weight: 700; border-left: 4px solid #6C7585; }
dl.refine dd{ margin: 0; width: 750px; display: flex; flex-wrap: wrap; font-size: 1.2em; }
.refineChoices{ position: relative; margin-bottom: 15px; width: 138px; display: flex; align-items: center;}
.refineChoices label{cursor: pointer; display: flex;align-items: center;}
.refineCheck { accent-color: #0F325B; inline-size: 1rem; block-size: 1rem; vertical-align: bottom; }
#refineBtn{ display: none;}
.refineBtn{ margin: 10px 0 0; width: 100%; display: flex; justify-content: flex-end;}
.refineBtn input[type="reset"] { width: 100px; height: 22px; font-size: 12px; border: 1px solid #b2b2b2; background:#fff;}
#refineBtn2{ display: none;}
.refineBtn2{ margin: 10px 0 0; width: 100%; display: flex; justify-content: flex-end;}
.refineBtn2 input[type="reset"] { width: 100px; height: 22px; font-size: 12px; border: 1px solid #b2b2b2; background:#fff;}
@media screen and (max-width: 640px) {
	.refineBox{ margin: 0 auto; padding: 2vw; width: 90vw; flex-direction: column;}
	.refineL{ width: 90vw; padding: 0; align-items: center; font-size: 4.25vw; }
	.refineR{ margin: 0 2.5vw; width: 100%; height: 0; overflow: hidden;}
	
	dl.refine{ margin: 0; padding: 4vw 0 0; width: 82.5vw; font-size: 3.2vw; }
	dl.refine dt{ width: 100%; margin: 0 0 3vw; padding-left:6px; font-size: 3.7vw; }
	dl.refine dd{ margin: 0; width: 100%; }
	.refineChoices{ margin-bottom: 3vw; width: 33%; }
	.refineBtn{ margin: 0 0 5vw; width: 80vw; justify-content: center; }
	.refineBtn input[type="reset"] { display: block; width: 26.7vw; height: 6vw; font-size: 3.2vw;}
	.refineBtn2{ margin: 0 0 5vw; width: 85vw; justify-content: center; }
	.refineBtn2 input[type="reset"] { display: block; width: 26.7vw; height: 6vw; font-size: 3.2vw;}
	
	/*----- OPENボタン -----*/
	.refineBox label.arw { 
	width: 90vw; display: block;position: relative;
    text-align: center;
	}
	.refineBox label.arw:after {
	content:'▼'; z-index: 2; display: flex; justify-content: center; align-items: center;
    padding-top: 1px; width: 6vw; height: 6vw; font-size: 3vw; line-height: 6vw; color: #fff; border-radius: 50%; background:#6C7585; transition: 0.2s;
    position: absolute;
    right: 3.5vw;
    margin-top: -14px;
    margin-bottom: -14px;
    top: 50%;
	}
	.refineBox input:checked + label:after { display: none;  }
	.refineBox input { display: none; }
	.refineBox input:checked ~ .refineR { height: auto; }
	.refineBox input:checked ~ .refineBox label { display: none; }
	input.refineCheck { margin-left: 0; display: inline-block; }
    .refineChoices{align-items: flex-start;}
}

/*================================================
 *  比較
 ================================================*/
/*----- 大枠 -----*/
.compareBox{ margin: 40px auto 20px; width: 1190px; height: 860px; font-size: 1.4em; display: flex;}
.anchorB{ margin: -30px auto; padding-top: 100px;}

.compareL{ margin: 0; width: 195px; text-align: center; display: flex; justify-content: flex-start; align-items: stretch;}
.compareR{ margin: 0; width: 995px; overflow-y: hidden; overflow-x:scroll; display: flex;}

/*----- 項目 -----*/

.compareL table{ list-style: none; margin: 0; padding: 0;border-left: 1px solid #4d4d4d; border-right: 1px solid #4d4d4d; border-collapse: collapse; border-spacing: 0; flex-shrink: 0;}
.compareL table th:first-child{ margin: 0; height: 70px; font-weight: 700; color:#fff; border-bottom: 1px solid #fff; background:#6C7585; text-align: center; vertical-align: middle;width: 199px;}
.compareL table th.compareTitle{ height: 40px; font-size: 1em; background:#0F325B; border-bottom: 1px solid #4d4d4d; }
.compareL table th.modelTd{ height: 70px;}
.compareL table th.img{ height: 136px;}
.compareL table tbody tr:last-child *{ border-bottom: none;}

/*----- 詳細 -----*/
.link{ position: absolute; top:40px; left:0; width: 136px; height: 805px; background:rgba(0,0,0,0); z-index: 10;}

.compareR table.compareDetail{ position: relative; list-style: none; margin: 0; padding: 0; border-right:1px solid #4d4d4d;border-spacing: 0; table-layout: fixed; background: #fff;}
 table.compareDetail td{ color:#000; margin: 0; height: 70px; border-bottom: 1px solid #4d4d4d; text-align: center; vertical-align: middle; width: 136px; border-left: 1px solid #4d4d4d;min-width: 136px;}
 table.compareDetail td.compareCheck{ position: relative; height: 40px; background:#C7CAD2; border-top: 2px solid #4d4d4d; border-bottom: 2px solid #4d4d4d; border-left: 1px solid #4d4d4d; }
table.compareDetail th.modelth{ height: 70px; background: #EBEDF4; font-weight: 700;  border-left: 1px solid #4d4d4d; border-bottom: 1px solid #4d4d4d;position: relative;}
table.compareDetail th.img{ height: 136px; padding: 10px;}
table.compareDetail sup{ color:#000;}
.compareR table.compareDetail tr > *:first-child {
    display: none;
}
#refineLink1, #refineLink2{
    --sb-track-color: #f6f6f6;
    --sb-thumb-color: #bfbfbf;
    --sb-size: 10px;
  }
  .compareR {
    scrollbar-color: var(--sb-thumb-color)  var(--sb-track-color);
    flex: 0 10 995px;
  }
  
  .compareR::-webkit-scrollbar {
    width : var(--sb-size) ;
    height: var(--sb-size) ;
  }
  
  .compareR::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: var(--sb-size) ;
  }
  
  .compareR::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: var(--sb-size) ;
    
    }
   
   .compareL {
      border: 2px solid #009;
      box-sizing: content-box;
      margin: -2px;
      z-index: 4;
      margin-bottom: calc(var(--sb-size) - 2px);
      overflow: hidden;
      box-shadow: 1px 1px 1px 2px #00000026;
      flex: 10 0 195px;
  }
.compareL table.compareDetail{
    z-index: 9;
    border-left: #0F325B 2px solid;
}

table.compareDetail th{
    width: 137px;
    padding: 0;
}

.compareDetail:hover .img img{
    mix-blend-mode: multiply;
}
.modelth{
    position: relative;
}
table.compareDetail th.modelth a {
    height: 810px;
    display: block;
    position: absolute;
    top:0;
    left: 0;
    padding-top: 1.6em;
    width: 100%;
    z-index: 4;
    
}
table.compareDetail th.modelth a:focus,
table.compareDetail th.modelth a:hover{
    background-color: #00003010;
}
.refineBtn button{
    cursor: pointer;
}

.new_item_label_cell{
  font-size: 99%;
}


/*----- チェックボックス -----*/
/*.compareBox input[type=checkbox] { display: none; }*/
.compareBox label{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.compareBox .compareL label{
    cursor: pointer;
}
.compareBox input[type=checkbox]  { 
	box-sizing: border-box; position: relative; display: inline-block; 
	margin: 0; padding: 0; vertical-align: middle; cursor: pointer;
    width: 1.2em;
    height: 1.2em;
}
.compareBox input[type=checkbox] :before {
  position: absolute; top: 8px; left: 57px; width: 22px; height: 22px; border: 1px solid #4d4d4d; background:#fff;
  display: flex; justify-content: center; align-items: center; content:''; z-index: 2;
}
.compareBox input[type=checkbox] :after {
	box-sizing: border-box; position: absolute; top: 0; left: 0; width: 136px; height: 845px;
	border: 4px solid #0F325B; content: ''; opacity: 0;
}
.compareBox input[type=checkbox]:checked::before { 
	border: 1px solid #0F325B; background:#0F325B url("../../../img/check22.svg") no-repeat center center; background-size: 100%;
}
.compareBox input[type=checkbox]:checked::after { opacity: 1; }
.compareCheckbox2 { 
	box-sizing: border-box; position: relative; display: inline-block; 
	margin: 0; padding: 0; vertical-align: middle; cursor: pointer;
}
.compareCheckbox2:before {
  position: absolute; top: 8px; left: 57px; width: 22px; height: 22px; border: 1px solid #4d4d4d; background:#fff;
  display: flex; justify-content: center; align-items: center; content:''; z-index: 2;
}
.compareCheckbox2:after {
	box-sizing: border-box; position: absolute; top: 0; left: 0; width: 136px; height: 776px;
	border: 4px solid #0F325B; content: ''; opacity: 0;
}
.compareBox input[type=checkbox]:checked + .compareCheckbox2:before { 
	border: 1px solid #0F325B; background:#0F325B url("../../../img/check22.svg") no-repeat center center; background-size: 100%;
}
.compareBox input[type=checkbox]:checked + .compareCheckbox2:after { opacity: 1; }

@media screen and (max-width: 640px) {
	.compareBox{ margin:5vw 0 0 5vw; width: 95vw; height: auto; font-size: 3vw; }
	.compareL{ flex:0 0 26vw ;}
	.compareR{ flex:0 100 69vw ; }
	
	ul.compareSub li{ height: 12vw; }
	ul.compareSub li.compareTitle{ height: 10.5vw; font-size: 3.2vw;}
	ul.compareSub li:nth-child(2){ height: 7vw;}
	ul.compareSub li:nth-child(3){ height: 30vw;}
	
	ul.compareDetail{ width: 30vw;}
	ul.compareDetail li{ height: 12vw; }
	ul.compareDetail li.compareCheck{ height: 10.5vw; }
	ul.compareDetail li:nth-child(2){ height: 7vw; }
	ul.compareDetail li:nth-child(3){ height: 30vw; padding: 1.5vw;}
    
    
    table.compareSub{width: 26vw;}
	table.compareSub td{ height: 12vw; }
	table.compareSub td.compareTitle{ height: 10.5vw; font-size: 3.2vw;}
	table.compareSub td.modelTd{ height: 7vw;}
	table.compareSub td.img{ height: 30vw;}
	

    table.compareDetail td{ height: 12vw; }
    table.compareSub td{
        font-size: 12px;
    }

    table.compareDetail td{
        font-size: 12px;
    }
	.compareCheckbox:before { top: 2.2vw; left: 12.1vw; width: 5.8vw; height: 5.8vw;}
	.compareCheckbox:after { width: 30vw; height: 155.5vw; border: 4px solid #0F325B; }
	.compareCheckbox2:before { top: 2.2vw; left: 12.1vw; width: 5.8vw; height: 5.8vw;}
	.compareCheckbox2:after { width: 30vw; height: 143.5vw; border: 4px solid #0F325B; }
}

/*================================================
 *  規格一覧
 ================================================*/
.standardBox{ margin: 20px auto 0;}

.standardL{ width: 195px; text-align: center; background:#6C7585; }
ul.standardSub{ margin: 0; padding: 0; list-style: none;}
ul.standardSub li{ 
	margin: 0; height: 40px; font-size: 1.4em; font-weight: 700; color:#fff; border-bottom: 1px solid #fff; display: flex; justify-content: center; align-items: center;
}
ul.standardSub li:nth-child(4),ul.standardSub li:nth-child(5),ul.standardSub li:nth-child(11),ul.standardSub li:nth-child(15){ height: 60px;}
ul.standardSub li:last-child{ border-bottom: none;}

.standardR{ margin: 0; width: 995px; display: flex; }
.standard{ width: 100%; text-align: center;}
ul.standardList{ margin: 0; padding: 0; list-style: none;}
ul.standardList li{ 
	margin: 0; height: 40px; font-size: 1.4em;  border-left: 1px solid #000;border-bottom: 1px solid #000; display: flex; justify-content: center; align-items: center;
}
ul.standardList li.standardName{ font-size: 1.6em; font-weight: 700; color:#fff; border-left: 1px solid #fff; background:#6C7585; }
ul.standardList li:nth-child(4),ul.standardList li:nth-child(5),ul.standardList li:nth-child(11),ul.standardList li:nth-child(15){ height: 60px;}
ul.standardList li:last-child{ border-bottom: none;}

@media screen and (max-width: 640px) {
	.standardBox{ margin: 5vw 0 0 5vw; width: 95vw; overflow: hidden; border-right: none;}
	.standardL{ width: 26vw; }
	.standardR{ width: 69vw; overflow-x: scroll;}
	
	ul.standardSub{ width: 26vw;}
	ul.standardSub li{ height: 9vw; font-size: 3.2vw; }
	ul.standardSub li:nth-child(4),ul.standardSub li:nth-child(5),ul.standardSub li:nth-child(11),ul.standardSub li:nth-child(15){ height: 13.3vw;}
	
	.standard{ width: 30vw; text-align: center;}
	ul.standardList{ width: 30vw;}
	ul.standardList li{ height: 9vw; font-size: 3.2vw; }
	ul.standardList li.standardName{ font-size: 3.7vw;}
	ul.standardList li:nth-child(4),ul.standardList li:nth-child(5),ul.standardList li:nth-child(11),ul.standardList li:nth-child(15){ height: 13.3vw;}

}

/*================================================
 *  アクセサリー
 ================================================*/
.accessoryBox{ margin: 30px 0 45px; padding-right: 60px; width: 100%; min-height: 242px !important; display: flex; justify-content: space-between; }
.accessoryImg{ padding: 15px; width: 360px; height: 240px; border:1px solid #4d4d4d; }
.accessoryImg img{ width: 330px !important; height: 210px !important; object-fit: contain; }
.accessoryTxt{ width: 706px; }
.accessoryTxt p{
	width: 100% !important; height: auto !important; text-align: left; font-size: 1.4em;
	line-break: strict; word-wrap: break-word; overflow-wrap: break-word;
}

.endMark{ margin:0 auto 3px 15px; padding:0 20px; font-size:0.6em; line-height: 2; font-weight:500; border: 1px solid #000; }
.txtBGgray{ padding:15px 30px; width:100%; background:#ECEFF5; }

.ccbCompareBox {
	height: auto;
}
.ccbCompareBox .compareCheckbox:after {
	height: 736px;
}
.lineup-product-hidden {
	display: none;
}
[v-cloak] {
	display: none;
}


@media screen and (max-width: 640px) {
	.accessoryBox{ margin: 4vw auto 8vw; padding-right: 0; width: 90vw; flex-direction: column; }
	.accessoryImg{ margin: 2vw auto; padding: 15px; width: 70vw; height: 47vw;  }
	.accessoryImg img{ width: 100% !important; height: auto !important; object-fit: contain; }
	.accessoryTxt{ width: 100%; }
	.accessoryTxt p{ font-size: 3.75vw;; }

}


/*守分追記*/
.compareL div:nth-child(n+3) .compareCheckbox::after{
    border-left: none;
}
#refineLink1, #refineLink2{
    --sb-track-color: #f6f6f6;
    --sb-thumb-color: #bfbfbf;
    --sb-size: 10px;
  }
  .compareR {
    scrollbar-color: var(--sb-thumb-color)  var(--sb-track-color);
  }
  
  .compareR::-webkit-scrollbar {
    width : var(--sb-size) ;
    height: var(--sb-size) ;
  }
  
  .compareR::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: var(--sb-size) ;
  }
  
  .compareR::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: var(--sb-size) ;
    
    }
   
   .compareL {
      border: 2px solid #009;
      box-sizing: content-box;
      margin: -2px;
      z-index: 4;
      margin-bottom: calc(var(--sb-size) - 2px);
      overflow: hidden;
      box-shadow: 1px 1px 1px 2px #00000026;
  }
  
  table.compareSub,
  table.compareDetail{
      border-collapse: separate ;
	  height: 850px;
  }
  
  table.compareSub thead tr:last-child td{
      border-bottom: 1px solid #fff ;
  }
  .compareDetail td{
      background-color: #fff;
  }
  
  @media screen and (max-width: 640px){
	.compareBox table td:first-child,
	.compareBox table td.model{
		padding-left:0;
	}
        table.compareDetail th.modelth a {
        padding-top: 9vw;
		left: 0;
      }
      #refineLink1 table.compareDetail th,
      #refineLink1 table.compareDetail td,
      #refineLink2 table.compareDetail th,
      #refineLink2 table.compareDetail td{
          width: 26vw;
          height: 22vw;
          min-width: 26vw;
          font-size: 3vw;
      }
      
      #refineLink1 table.compareSub .img,
      #refineLink1 table.compareDetail .img,
      #refineLink2 table.compareSub .img,
      #refineLink2 table.compareDetail .img{
          height: 26vw;
		  padding: 0;
          min-width: 26vw;
      }
      table.compareDetail th.compareCheck,
      table.compareDetail th,
      .compareL table th:first-child,
      #refineLink1 table .compareTitle,
      #refineLink2 table .compareTitle{
        width: 26vw;
        max-width: 26vw;
        min-width: 26vw;
      }
      #refineLink1 table.compareSub .img img,
      #refineLink1 table.compareDetail .img img,
      #refineLink2 table.compareSub .img img,
      #refineLink2 table.compareDetail .img img{
        width: 26vw;
        max-width: 26vw;
        min-width: 26vw;
      }

      table.compareDetail th.modelth,
      table.compareDetail th.modelTd{
        height:5em;
      }
    }

    /* tab初期非表示 */
    .tab-content > div{
        display: none;
    }

    .Cautionary, .Cautionary2 {
        margin: 5px 0px;
        font-size: 1.4em;
    }