@charset "UTF-8";

/**
 * style.css
 * create: 2018.10.20
 */
/*
utility
 */
span.fs-s {
    font-size: 10px !important;
}

span.fs-l {
    font-size: 18px !important;
    font-weight: bold !important;
}

a.fade {
    transition: .25s;
}

a.fade:hover {
    text-decoration: none;
    opacity: .6;
}

/*--------------------------------------------------
	.compare
 --------------------------------------------------*/
.compare {
    text-align: right;
    margin: 50px 0;
}

/*--------------------------------------------------
	.note
 --------------------------------------------------*/

.note {
    margin-top: 20px;
    font-size: 10px;
    line-height: 1.7;
    color: #666;
}

ul.mod-listMarkText {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

ul.mod-listMarkText li span{
    padding-right: 1em;
}

.past {
    margin-top: 30px;
}

.pc-note{
	display:block;
}

.sp-note{
	display:none;
}

@media screen and (max-width: 639px) {
	.pc-note{
	display:none;
}

.sp-note{
	display:block;
}	
}

/*--------------------------------------------------
	.inner-nav
--------------------------------------------------*/
.inner-nav {
    position: relative;
    margin-top: 10px;
    height: 48px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    line-height: 0;
	margin-left: -13rem;
}

.inner-nav ul {
    display: inline-block;
    *display: inline;
    margin: 0 0 0 1px;
    padding: 0;
    list-style: none;
    zoom: 1;
}

.inner-nav ul::after {
    clear: both;
    display: block;
    content: "";
}

.inner-nav li {
    float: left;
    margin: 0 0 0 -1px;
    font-size: 0.875em;
    line-height: 1.4;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.inner-nav li a {
    display: block;
    padding: 0 35px;
    min-height: 38px;
    color: #242424;
    border-top: 3px solid #fff;
    text-decoration: none;
    cursor: pointer;
}

.inner-nav li a:hover {
    color: #999;
}

.inner-nav li.current a {
    border-top: 3px solid #000;
    height: 46px;
    background-color: #fff;
}

.inner-nav li span {
    display: inline-block;
    margin-top: 11px;
}

.inner-nav li span.line-2 {
    margin-top: 6px;
}

@media (max-width: 979px) {
    .inner-nav li {
        font-size: 10px;
    }

    .inner-nav li a {
        padding: 0 10px;
    }
}

@media (max-width:640px) {
    .inner-nav {
        margin-top: 25px;
        height: auto;
        border-bottom: none;
        text-align: left;
		margin-left: 0;
    }

    .inner-nav ul {
        display: block;
        margin: 0;
    }

    .inner-nav li {
        float: none;
        margin: 5px 0 0 0;
        border: 1px solid #83838f;
    }

    .inner-nav li br {
        display: none;
    }

    .inner-nav li a {
        padding: 13px 10px 11px 20px;
        min-height: 1px;
        border: none;
        background: url("/cyber-shot/lineup/images/ss/lineup_navi_arrow.png") no-repeat 10px center;
        background-size: 5px 6px;
    }

    .inner-nav li.current a {
        border: none;
        height: auto;
        background-color: #C5C5D0;
    }

    .inner-nav li span {
        margin: 0 !important;
    }
}

/*--------------------------------------------------
  .compare-table js
--------------------------------------------------*/
.compare-heading {
    position: relative;
    z-index: 1;
    background: #fff;
    overflow: hidden;
    width: 182px;
}

.compare-topheading__base {
    position: relative;
    height: 0;
}

.compare-topheading__floater {
    background: #fff;
    z-index: 2;
    overflow: hidden;
}

.compare-topheading__bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 186px;
    width: 180px;
    background: #fff;
}

.compare-topheading {
    background: #fff;
    height: 187px;
    top: 0;
    left: 0;
    right: 25px;
    overflow: hidden;
}

.compare-view {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    right: 25px;
    overflow: hidden;
}

.compare-view table {
    position: relative;
}

.compare-btn {
    position: absolute;
    z-index: 10;
    display: none;
    width: 25px;
    height: 70px;
    background: #ccc;
}

.compare-btn.active {
    display: block;
    cursor: pointer;
}

.compare-btn::after {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -9px 0 0 -4px;
    width: 0;
    height: 0;
    border-style: solid;
    content: "";
}

.compare-btn-left {
    left: 155px;
    top: 0;
    height: 100%;
}

.compare-btn-left::after {
    border-width: 9px 8px 9px 0;
    border-color: transparent #fff transparent transparent;
}

.compare-btn-right {
    right: 0;
    top: 0;
    height: 100%;
}

.compare-btn-right::after {
    border-width: 9px 0 9px 8px;
    border-color: transparent transparent transparent #fff;
}

/*--------------------------------------------------
	.mainTable
 --------------------------------------------------*/
.main-table {
    position: relative;
    margin: 50px 0 0;
    overflow: hidden;
    box-sizing: border-box;
}

.main-table .blank {
    width: 180px;
}

.main-table table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 1200px;
    height: 100%;
}

.main-table h4 {
    line-height: 1;
    margin: 15px 0 0;
}

.main-table p {
    margin: 0;
}

.main-table tr {
    font-size: 13px;
    font-feature-settings: "palt";
    
    letter-spacing: 0.05em;
    
    color: #444444;
    
}

.main-table thead th {
    position: relative;
    border: 1px solid #ccc;
    width: 180px;
    height: 185px;
    box-sizing: border-box;
}

.main-table thead a {
    display: block;
    padding: 40px 10px 10px;
    height: 185px;
    box-sizing: border-box;
}

.main-table .main-table__headinner .new {
    position: absolute;
    top: 10px;
    left: 10px;
}

.main-table .main-table__headinner .lens-g {
    position: absolute;
    top: 10px;
    right: 10px;
}

.main-table .main-table__headinner .lens-zeiss {
    position: absolute;
    top: 10px;
    right: 10px;
}

.main-table .main-table__headinner .camera {
    width: 100px;
}

.main-table th a {
    display: block;
}

.main-table th .model {
    font-size: 20px;
}

.main-table th .description {
    font-size: 10px;
    margin-top: 5px;
	letter-spacing: -0.1em;
}

.main-table tbody th {
    text-align: left;
    background: #f5f5f5;
    border: 1px solid #ccc;
    width: 150px;
    height: 80px;
    padding: 15px;
}

.main-table tbody td {
    text-align: center;
    border: 1px solid #ccc;
    position: relative;
    height: 100%;
    padding: 5px;
}

.main-table .bg {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-table .bg-1 {
    background: #eddda9;
}

.main-table .bg-2 {
    background: #faf6d7;
}

.main-table .bg-inner {
    line-height: 1.39;
}

.sp-main-table {
    display: none;
}

@media screen and (max-width: 639px) {
    .main-table {
        display: none;
    }

    .sp-main-table {
        display: block;
    }
}

/*--------------------------------------------------
	.sp-main-table
 --------------------------------------------------*/
.sp-main-table {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-item {
    padding: 45px 0;
    border-bottom: 1px solid #ccc;
}

.sp-item-inner {
    display: flex;
    vertical-align: bottom;
    justify-content: space-between;
}

.sp-titlebox {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.sp-imgbox {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-left: 20px;
}

.sp-imgbox img {
    max-width: 100%;
}

.sp-main-table .new {
    display: block;
    margin-bottom: 10px;
}

.sp-title-main {
    display: flex;
    align-items: center;
}

.sp-main-table h4 {
    margin: 0;
    font-size: 25px;
    line-height: 1;
}

.sp-main-table .description {
    font-size: 10px;
    margin: 5px 0 0 0;
}

.sp-main-table .lens-zeiss,
.sp-main-table .lens-g {
    margin: 0 0 0 15px;
    width: 22px;
}

.sp-main-table .slogan {
    margin: 10px 0 0;
    font-size: 14px;
	line-height: 1.2;
}

.sp-columns {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.sp-columns-item {
    flex: 1 0 40%;
    background: #797c85;
    border-radius: 5px;
    padding: 10px 2px;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    display: flex;
    justify-content: center;
    align-items: center;
	font-size:13px;
	letter-spacing:0.05em;
}

.sp-columns-item:nth-child(even) {
    margin-left: 5px;
}

.sp-columns-item:nth-child(n+3) {
    margin-top: 5px;
}

.sp-item .mod-button {
    margin-top: 25px;
    display: block;
    text-align: center;
}

/*sp-tag*/
.b64{display:none}
.nb64{display:block}
@media screen and (max-width: 639px) {
	.b64{display:inline-block}
	.nb64{display:none}
}

/**
 * compact and qx
 */
 
#zoom.main-table table {
    height: 0;
}
 
 
#compact.main-table table {
    width: 545px;
    height: 0;
}

#compact.main-table thead th {
    width: 406px;
}

#qx.main-table table {
    width: 720px;
    height: 0;
}

#qx.main-table thead th {
    width: 270px;
}