.cm-ctsIdt { padding-left: calc(50 * var(--rs)); padding-right: calc(50 * var(--rs)); overflow: hidden; } .cm-ctsWidth { width: 100%; max-width: 1200px; margin: 0 auto; } .cm-ctsWidth--large { max-width: 1600px; } .cm-ctsWidth--max { max-width: 2560px; } .cm-ctsOverflow { margin-left: calc(-180 * var(--rs)); margin-right: calc(-180 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .cm-ctsIdt { padding-left: calc(40 * var(--rs)); padding-right: calc(40 * var(--rs)); } } .cm-bg { background: var(--bg-color); } .cm-bgBlack { background: #000; color: #fff; } .cm-bgBlack a { color: #fff; } .cm-colorRed { color: var(--color-red); } .cm-contain, .cm-contain img { -o-object-fit: contain !important; object-fit: contain !important; } .cm-cover, .cm-cover img { -o-object-fit: cover !important; object-fit: cover !important; } .md-icnInfo { display: inline-block; width: calc(16 * var(--rs)); height: calc(16 * var(--rs)); background: var(--icn-info-black); cursor: pointer; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-icnInfo { width: calc(30 * var(--rs)); height: calc(30 * var(--rs)); } } .md-anchorOffset { position: relative; } .md-anchorOffset a { position: absolute; pointer-events: none; /* top: calc(-90 * var(--rs)); */ top: calc(-170 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-anchorOffset a { top: calc(-240 * var(--rs)); } } .md-btnSquare { display: flex; width: 100%; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 calc(10 * var(--rs)); background: #000; color: #fff; text-align: center; font-size: calc(14 * var(--rs)); font-weight: bold; text-decoration: none; transition: opacity 0.3s linear; } .md-btnSquare:hover { opacity: 0.5; text-decoration: underline; } .md-squareBtnWrap._is-download .md-btnSquare, .page-accessoryTop .md-squareBtnWrap .md-btnSquare, .secAccessory .md-squareBtnWrap .md-btnSquare { min-height: calc(50 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-btnSquare { width: calc(326 * var(--rs)); margin: 0 auto; font-size: calc(26 * var(--rs)); } .md-btnSquare--download { padding-left: 0; } .md-btnSquare--download::before { content: " "; width: calc(30 * var(--rs)); height: calc(30 * var(--rs)); left: calc(20 * var(--rs)); transform: translateY(-50%); } .secAccessory .md-squareBtnWrap .md-btnSquare { min-height: calc(90 * var(--rs)); } } .md-inputSelect { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; height: calc(42 * var(--rs)); box-sizing: border-box; padding: calc(12 * var(--rs)) calc(44 * var(--rs)) calc(12 * var(--rs)) calc(18 * var(--rs)); border-radius: calc(3 * var(--rs)); font-size: calc(13 * var(--rs)); line-height: 1.4; cursor: pointer; background: transparent; border: 1px solid; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-inputSelect { height: calc(85 * var(--rs)); padding: calc(22 * var(--rs)) calc(44 * var(--rs)) calc(22 * var(--rs)) calc(20 * var(--rs)); font-size: calc(26 * var(--rs)); } } .md-breadcrumb { padding-top: calc(26 * var(--rs)); padding-bottom: calc(26 * var(--rs)); } #js-includeContentsRecommend + .md-breadcrumb { background: #f4f4f5; } .cm-bg + .md-breadcrumb { margin-top: 0; padding-top: calc(60 * var(--rs)); background: #f4f4f5; } .md-breadcrumb ul { display: flex; } .md-breadcrumb ul li { font-size: calc(11 * var(--rs)); line-height: 1.45; letter-spacing: 0.02em; } .md-breadcrumb ul li + li { padding-left: calc(26 * var(--rs)); position: relative; } .md-breadcrumb ul li + li::before { content: ">"; font-size: calc(11 * var(--rs)); line-height: 1.45; position: absolute; top: 0; left: calc(11 * var(--rs)); } .md-breadcrumb ul li a { text-decoration: underline; } .md-breadcrumb ul li a:hover { text-decoration: none; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-breadcrumb .cm-ctsWidth { display: none !important; } } .md-lenscategoryNavi { margin-top: calc(55 * var(--rs)); padding-top: calc(55 * var(--rs)); } .md-contentsSecColDtl + .md-secRecommend { margin-top: calc(60 * var(--rs)); } .md-secRecommend + * .md-lenscategoryNavi { padding-top: 0; } .md-lenscategoryNavi .secInr { box-sizing: border-box; padding: calc(38 * var(--rs)) calc(46 * var(--rs)) calc(40 * var(--rs)); border: 1px solid #eaeaea; background: #fff; } .md-lenscategoryNavi .secTtl { display: flex; align-items: center; } .md-lenscategoryNavi .secTtl .ttl { font-size: calc(20 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; } .md-lenscategoryNavi .secTtl .catTxt { margin-left: auto; } .md-lenscategoryNavi .secTtl .catTxt .anc { font-size: calc(15 * var(--rs)); line-height: 1.4; letter-spacing: 0.06em; } .md-lenscategoryNavi .secTtl .catTxt .anc:hover { text-decoration: none; } .md-lenscategoryNavi .secCtsWrap { display: flex; margin-top: calc(36 * var(--rs)); } .md-lenscategoryNavi .secCtsWrap .ctsItem .ctsTtl { color: #808080; font-size: calc(18 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; letter-spacing: 0.02em; } .md-lenscategoryNavi .secCtsWrap .ctsItem .ctsCol { margin: calc(4 * var(--rs)) calc(-14 * var(--rs)) 0; } .md-lenscategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap { box-sizing: border-box; padding: 0 calc(14 * var(--rs)); } .md-lenscategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat { border-top: 1px solid #c9c9c9; } .md-lenscategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat:first-child { border-top: none; } .md-lenscategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr { display: block; box-sizing: border-box; padding: calc(20 * var(--rs)) calc(32 * var(--rs)) calc(20 * var(--rs)) 0; text-decoration: none; font-size: calc(15 * var(--rs)); line-height: 1.86; letter-spacing: 0.01em; position: relative; transition: opacity 0.3s ease-out; } .md-lenscategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr::after { content: " "; width: calc(6 * var(--rs)); height: calc(11 * var(--rs)); background: url(/special/archive-contents/common/images/icn_arrow_right_black.svg) no-repeat center center; background-size: 100% auto; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .md-lenscategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr:hover { opacity: 0.7; } .md-lenscategoryNavi .secCtsWrap .ctsItem.prod { flex: 1 0 0%; box-sizing: border-box; padding-right: calc(74 * var(--rs)); } .md-lenscategoryNavi .secCtsWrap .ctsItem.prod .ctsCol { display: flex; } .md-lenscategoryNavi .secCtsWrap .ctsItem.prod .ctsCol .catWrap { width: 50%; } .md-lenscategoryNavi .secCtsWrap .ctsItem.concept { width: 100%; max-width: calc(326 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-lenscategoryNavi { margin-top: calc(55 * var(--rs)); } .md-contentsSecColDtl + .md-secRecommend { margin-top: calc(100 * var(--rs)); } .md-lenscategoryNavi .secInr { padding: calc(55 * var(--rs)) calc(40 * var(--rs)) calc(46 * var(--rs)); } .md-lenscategoryNavi .secTtl { display: block; } .md-lenscategoryNavi .secTtl .ttl { font-size: calc(44 * var(--rs)); letter-spacing: 0.03em; } .md-lenscategoryNavi .secTtl .catTxt { margin-top: 0; margin-left: 0; } .md-lenscategoryNavi .secTtl .catTxt .anc { font-size: calc(26 * var(--rs)); } .md-lenscategoryNavi .secCtsWrap { display: block; margin-top: calc(50 * var(--rs)); } .md-lenscategoryNavi .secCtsWrap .ctsItem .ctsTtl { font-size: calc(36 * var(--rs)); line-height: 1.1; } .md-lenscategoryNavi .secCtsWrap .ctsItem .ctsCol { margin: calc(20 * var(--rs)) 0 0; } .md-lenscategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap { padding: 0; } .md-lenscategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap + .catWrap .cat:first-child { border-top: 1px solid #c9c9c9; } .md-lenscategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr { padding: calc(24 * var(--rs)) calc(46 * var(--rs)) calc(20 * var(--rs)) 0; font-size: calc(28 * var(--rs)); line-height: 1; } .md-lenscategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr::after { width: calc(12 * var(--rs)); height: calc(22 * var(--rs)); } .md-lenscategoryNavi .secCtsWrap .ctsItem.prod { padding-right: 0; } .md-lenscategoryNavi .secCtsWrap .ctsItem.prod .ctsCol { display: block; } .md-lenscategoryNavi .secCtsWrap .ctsItem.prod .ctsCol .catWrap { width: 100%; } .md-lenscategoryNavi .secCtsWrap .ctsItem.concept { width: 100%; max-width: none; margin-top: calc(48 * var(--rs)); } } .md-cameracategoryNavi { margin-top: calc(104 * var(--rs)); } .md-cameracategoryNavi .secInr { box-sizing: border-box; padding: calc(38 * var(--rs)) calc(46 * var(--rs)) calc(40 * var(--rs)); border: 1px solid #eaeaea; background: #fff; } .md-cameracategoryNavi .secTtl { display: flex; align-items: center; } .md-cameracategoryNavi .secTtl .ttl { font-size: calc(20 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; } .md-cameracategoryNavi .secTtl .catTxt { margin-left: auto; } .md-cameracategoryNavi .secTtl .catTxt .anc { font-size: calc(15 * var(--rs)); line-height: 1.4; letter-spacing: 0.06em; } .md-cameracategoryNavi .secTtl .catTxt .anc:hover { text-decoration: none; } .md-cameracategoryNavi .secCtsWrap { display: flex; margin-top: calc(36 * var(--rs)); } .md-cameracategoryNavi .secCtsWrap .ctsItem .ctsTtl { color: #808080; font-size: calc(18 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; letter-spacing: 0.02em; } .md-cameracategoryNavi .secCtsWrap .ctsItem .ctsCol { margin: calc(4 * var(--rs)) calc(-14 * var(--rs)) 0; } .md-cameracategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap { box-sizing: border-box; padding: 0 calc(14 * var(--rs)); } .md-cameracategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat { border-top: 1px solid #c9c9c9; } .md-cameracategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat:first-child { border-top: none; } .md-cameracategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr { display: block; box-sizing: border-box; padding: calc(20 * var(--rs)) calc(32 * var(--rs)) calc(20 * var(--rs)) 0; text-decoration: none; font-size: calc(15 * var(--rs)); line-height: 1.86; letter-spacing: 0.01em; position: relative; transition: opacity 0.3s ease-out; } .md-cameracategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr::after { content: " "; width: calc(6 * var(--rs)); height: calc(11 * var(--rs)); background: url(/special/archive-contents/common/images/icn_arrow_right_black.svg) no-repeat center center; background-size: 100% auto; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .md-cameracategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr:hover { opacity: 0.7; } .md-cameracategoryNavi .secCtsWrap .ctsItem { width: calc(326 * var(--rs)); } .md-cameracategoryNavi .secCtsWrap .ctsItem.prod { margin-right: calc(60 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-cameracategoryNavi { margin-top: calc(55 * var(--rs)); } .md-cameracategoryNavi .secInr { padding: calc(55 * var(--rs)) calc(40 * var(--rs)) calc(46 * var(--rs)); } .md-cameracategoryNavi .secTtl { display: block; } .md-cameracategoryNavi .secTtl .ttl { font-size: calc(44 * var(--rs)); letter-spacing: 0.03em; } .md-cameracategoryNavi .secTtl .catTxt { margin-top: 0; margin-left: 0; } .md-cameracategoryNavi .secTtl .catTxt .anc { font-size: calc(26 * var(--rs)); } .md-cameracategoryNavi .secCtsWrap { display: block; margin-top: calc(50 * var(--rs)); } .md-cameracategoryNavi .secCtsWrap .ctsItem .ctsTtl { font-size: calc(36 * var(--rs)); line-height: 1.1; } .md-cameracategoryNavi .secCtsWrap .ctsItem .ctsCol { margin: calc(20 * var(--rs)) 0 0; } .md-cameracategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap { padding: 0; } .md-cameracategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap + .catWrap .cat:first-child { border-top: 1px solid #c9c9c9; } .md-cameracategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr { padding: calc(24 * var(--rs)) calc(46 * var(--rs)) calc(20 * var(--rs)) 0; font-size: calc(28 * var(--rs)); line-height: 1; } .md-cameracategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr::after { width: calc(12 * var(--rs)); height: calc(22 * var(--rs)); } .md-cameracategoryNavi .secCtsWrap .ctsItem { width: 100%; } .md-cameracategoryNavi .secCtsWrap .ctsItem.prod { padding-right: 0; } .md-cameracategoryNavi .secCtsWrap .ctsItem.prod .ctsCol { display: block; } .md-cameracategoryNavi .secCtsWrap .ctsItem.concept { margin-top: calc(48 * var(--rs)); } } .md-cineCategoryNavi { margin-top: calc(104 * var(--rs)); } .md-cineCategoryNavi .secInr { box-sizing: border-box; padding: calc(38 * var(--rs)) calc(46 * var(--rs)) calc(40 * var(--rs)); border: 1px solid #eaeaea; background: #fff; } .md-cineCategoryNavi .secTtl { display: flex; align-items: center; } .md-cineCategoryNavi .secTtl .ttl { font-size: calc(20 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; } .md-cineCategoryNavi .secTtl .catTxt { margin-left: auto; } .md-cineCategoryNavi .secTtl .catTxt .anc { font-size: calc(15 * var(--rs)); line-height: 1.4; letter-spacing: 0.06em; } .md-cineCategoryNavi .secTtl .catTxt .anc:hover { text-decoration: none; } .md-cineCategoryNavi .secCtsWrap { display: flex; margin-top: calc(36 * var(--rs)); } .md-cineCategoryNavi .secCtsWrap .ctsItem .ctsTtl { color: #808080; font-size: calc(18 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; letter-spacing: 0.02em; } .md-cineCategoryNavi .secCtsWrap .ctsItem .ctsCol { margin: calc(4 * var(--rs)) calc(-14 * var(--rs)) 0; } .md-cineCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap { box-sizing: border-box; padding: 0 calc(14 * var(--rs)); } .md-cineCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat { border-top: 1px solid #c9c9c9; } .md-cineCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat:first-child { border-top: none; } .md-cineCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr { display: block; box-sizing: border-box; padding: calc(20 * var(--rs)) calc(32 * var(--rs)) calc(20 * var(--rs)) 0; text-decoration: none; font-size: calc(15 * var(--rs)); line-height: 1.86; letter-spacing: 0.01em; position: relative; transition: opacity 0.3s ease-out; } .md-cineCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr::after { content: " "; width: calc(6 * var(--rs)); height: calc(11 * var(--rs)); background: url(/special/archive-contents/common/images/icn_arrow_right_black.svg) no-repeat center center; background-size: 100% auto; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .md-cineCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr:hover { opacity: 0.7; } .md-cineCategoryNavi .secCtsWrap .ctsItem { width: calc(326 * var(--rs)); } .md-cineCategoryNavi .secCtsWrap .ctsItem.prod { margin-right: calc(60 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-cineCategoryNavi { margin-top: calc(55 * var(--rs)); } .md-cineCategoryNavi .secInr { padding: calc(55 * var(--rs)) calc(40 * var(--rs)) calc(46 * var(--rs)); } .md-cineCategoryNavi .secTtl { display: block; } .md-cineCategoryNavi .secTtl .ttl { font-size: calc(44 * var(--rs)); letter-spacing: 0.03em; } .md-cineCategoryNavi .secTtl .catTxt { margin-top: 0; margin-left: 0; } .md-cineCategoryNavi .secTtl .catTxt .anc { font-size: calc(26 * var(--rs)); } .md-cineCategoryNavi .secCtsWrap { display: block; margin-top: calc(50 * var(--rs)); } .md-cineCategoryNavi .secCtsWrap .ctsItem .ctsTtl { font-size: calc(36 * var(--rs)); line-height: 1.1; } .md-cineCategoryNavi .secCtsWrap .ctsItem .ctsCol { margin: calc(20 * var(--rs)) 0 0; } .md-cineCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap { padding: 0; } .md-cineCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap + .catWrap .cat:first-child { border-top: 1px solid #c9c9c9; } .md-cineCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr { padding: calc(24 * var(--rs)) calc(46 * var(--rs)) calc(20 * var(--rs)) 0; font-size: calc(28 * var(--rs)); line-height: 1; } .md-cineCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr::after { width: calc(12 * var(--rs)); height: calc(22 * var(--rs)); } .md-cineCategoryNavi .secCtsWrap .ctsItem { width: 100%; } .md-cineCategoryNavi .secCtsWrap .ctsItem.prod { padding-right: 0; } .md-cineCategoryNavi .secCtsWrap .ctsItem.prod .ctsCol { display: block; } .md-cineCategoryNavi .secCtsWrap .ctsItem.concept { margin-top: calc(48 * var(--rs)); } } .md-secSupport { margin-top: calc(135 * var(--rs)); margin-bottom: calc(90 * var(--rs)); } .md-secSupport .secTtl { font-size: calc(34 * var(--rs)); font-weight: var(--weight-medium); text-align: center; } .md-secSupport .linkList { margin-top: calc(20 * var(--rs)); display: flex; flex-wrap: wrap; } .md-secSupport .linkList .item { width: 33.3333%; height: calc(110 * var(--rs)); margin-top: calc(30 * var(--rs)); padding: 0 calc(15 * var(--rs)); box-sizing: border-box; } .md-secSupport .linkList .item .link { display: flex; align-items: center; height: 100%; position: relative; text-decoration: none; padding: calc(18 * var(--rs)) calc(42 * var(--rs)); box-sizing: border-box; border-radius: 5px; border: 1px solid #c9c9c9; } .md-secSupport .linkList .item .link .icn { width: calc(49 * var(--rs)); } .md-secSupport .linkList .item .link .icn img { width: 100%; height: auto; } .md-secSupport .linkList .item .link .txt { flex: 1; white-space: nowrap; text-align: left; line-height: 1.375; font-size: calc(16 * var(--rs)); font-weight: var(--weight-medium); margin-left: calc(15 * var(--rs)); } .md-secSupport .linkList .item .link:hover .txt { text-decoration: underline; } .md-secSupport .btnLine { width: calc(300 * var(--rs)); margin: calc(60 * var(--rs)) auto 0; } .md-secSupport .btnLine .md-btnSquare { min-height: calc(50 * var(--rs)); margin: calc(-10 * var(--rs)) auto 0; } .md-secSupport.secSupportCine .linkList { flex-wrap: wrap; } .md-secSupport.secSupportCine .linkList .item { width: 25%; padding: 0 calc(16 * var(--rs)); } .md-secSupport.secSupportCine .linkList .item .link { padding: calc(18 * var(--rs)) calc(24 * var(--rs)); } .md-secSupport.secSupportCine .linkList .item .link .txt { position: static; top: 0; left: 0; transform: translateX(0); } .md-secSupport.secSupportCine .btnLine { margin-top: calc(60 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-secSupport { margin-top: calc(125 * var(--rs)); margin-bottom: calc(90 * var(--rs)); } .md-secSupport .secTtl { font-size: calc(50 * var(--rs)); } .md-secSupport .linkList { display: block; margin-top: calc(60 * var(--rs)); padding: 0 calc(30 * var(--rs)); box-sizing: border-box; } .md-secSupport .linkList .item { width: 100%; min-height: calc(160 * var(--rs)); margin-top: calc(20 * var(--rs)); padding: 0; } .md-secSupport .linkList .item .link { text-decoration: none; padding: calc(18 * var(--rs)) calc(42 * var(--rs)); } .md-secSupport .linkList .item .link .icn { width: calc(78 * var(--rs)); } .md-secSupport .linkList .item .link .txt { line-height: 1.286; font-size: calc(32 * var(--rs)); } .md-secSupport .btnLine { width: calc(326 * var(--rs)); height: calc(90 * var(--rs)); margin: calc(80 * var(--rs)) auto 0; } .md-secSupport .btnLine .md-btnSquare { width: 100%; height: 100%; } .md-secSupport.secSupportCine .linkList { display: block; } .md-secSupport.secSupportCine .linkList .item { width: auto; padding: 0; } .md-secSupport.secSupportCine .linkList .item:not(:first-child) { margin-top: calc(20 * var(--rs)); } .md-secSupport.secSupportCine .linkList .item .link { padding: calc(18 * var(--rs)) calc(42 * var(--rs)); } .md-secSupport.secSupportCine .linkList .item .link .txt { position: static; top: 0; left: 0; transform: translateX(0); } .md-secSupport.secSupportCine .btnLine { margin-top: calc(80 * var(--rs)); } } .productDetailTopSupport .md-secSupport { margin-top: calc(90 * var(--rs)); margin-bottom: calc(90 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .productDetailTopSupport .md-secSupport { margin-top: calc(120 * var(--rs)); margin-bottom: calc(120 * var(--rs)); } } .md-secRecommend { background: #f4f4f5; } .md-secRecommend .ctsOverWrap { max-width: 1920px; margin: 0 auto; overflow: hidden; } .md-secRecommend .secInr { box-sizing: border-box; padding-top: calc(84 * var(--rs)); padding-bottom: calc(55 * var(--rs)); } .md-secRecommend .secTtl .ttl { font-size: calc(20 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; letter-spacing: 0.02em; } .md-secRecommend .secCtsWrap { width: 100%; max-width: calc(1300 * var(--rs)); margin: 0 auto; box-sizing: border-box; padding-left: calc(50 * var(--rs)); padding-right: calc(50 * var(--rs)); position: relative; } .md-secRecommend .secCtsWrap::before, .md-secRecommend .secCtsWrap::after { content: " "; width: calc(360 * var(--rs)); height: 100%; background-color: #f4f4f5; opacity: 0.7; position: absolute; top: 0; z-index: 100; pointer-events: none; } .md-secRecommend .secCtsWrap::before { left: calc(20 * var(--rs)); transform: translateX(-100%); } .md-secRecommend .secCtsWrap::after { right: calc(20 * var(--rs)); transform: translateX(100%); } .md-secRecommend .secCtsWrap .wrapInr { margin: calc(22 * var(--rs)) calc(-18 * var(--rs)) 0; } .md-secRecommend .slideCts .mask { overflow: visible; } .md-secRecommend .slideCts .slider .item { box-sizing: border-box; padding: 0 calc(18 * var(--rs)); } .md-secRecommend .slideCts .slider .item .itemInr { display: block; text-decoration: none; } .md-secRecommend .slideCts .slider .item .img { height: calc(230 * var(--rs)); position: relative; overflow: hidden; } .md-secRecommend .slideCts .slider .item .img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .md-secRecommend .slideCts .slider .item .itemCol { margin-top: calc(20 * var(--rs)); } .md-secRecommend .slideCts .slider .item .cat { display: inline-flex; align-items: center; height: calc(26 * var(--rs)); box-sizing: border-box; padding: calc(3 * var(--rs)) calc(16 * var(--rs)) calc(2 * var(--rs)); border-radius: calc(25 * var(--rs)); border: 1px solid #eaeaea; background: #fff; color: #111; font-size: calc(13 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.1; } .md-secRecommend .slideCts .slider .item .txtWrap .txt { margin-top: calc(12 * var(--rs)); font-size: calc(18 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.55; letter-spacing: 0.01em; } .md-secRecommend .slideCts .slider .item .itemInr:hover .txtWrap .txt { text-decoration: underline; } .md-secRecommend .slideCts .slider .item .txtWrap .min { margin-top: calc(12 * var(--rs)); font-size: calc(14 * var(--rs)); line-height: 1.6; letter-spacing: 0.01em; } .md-secRecommend .slideCts .btnWrap { display: flex; justify-content: flex-end; margin-top: calc(54 * var(--rs)); } .md-secRecommend .slideCts .next, .md-secRecommend .slideCts .prev { display: flex; align-items: center; justify-content: center; width: calc(46 * var(--rs)); height: calc(46 * var(--rs)); margin: 0 calc(10 * var(--rs)); border-radius: 100%; background: #000; cursor: pointer; transition: opacity 0.3s ease-out; } .md-secRecommend .slideCts .next:hover, .md-secRecommend .slideCts .prev:hover { opacity: 0.7; } .md-secRecommend .slideCts .next img, .md-secRecommend .slideCts .prev img { width: calc(12 * var(--rs)); height: auto; } .md-secRecommend .secBnrWrap { display: flex; flex-wrap: wrap; max-width: calc(1320 * var(--rs)); margin: calc(4 * var(--rs)) auto 0; box-sizing: border-box; padding-left: calc(50 * var(--rs)); padding-right: calc(50 * var(--rs)); } .md-secRecommend .secBnrWrap .bnrCol { margin: calc(20 * var(--rs)) auto 0; box-sizing: border-box; padding-left: calc(10 * var(--rs)); padding-right: calc(10 * var(--rs)); } .md-secRecommend .secBnrWrap .bnrCol.bnr--wid02 { width: 50%; } .md-secRecommend .secBnrWrap .bnrInr { display: block; width: 100%; margin: 0 auto; text-decoration: none; transition: opacity 0.3s linear; } .md-secRecommend .secBnrWrap .bnrInr:hover { opacity: 0.7; } .md-secRecommend .secBnrWrap .img img { width: 100%; height: auto; } .md-secRecommend #js-recommendPlace, .md-secRecommend .secBnrWrap + .secCtsWrap { margin-top: calc(44 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-secRecommend .secInr { padding-top: calc(110 * var(--rs)); padding-left: calc(30 * var(--rs)); padding-right: calc(30 * var(--rs)); } .md-secRecommend .secTtl .ttl { font-size: calc(46 * var(--rs)); letter-spacing: 0.03em; } .md-secRecommend .secCtsWrap { margin: calc(46 * var(--rs)) auto 0; } .md-secRecommend .slideCts .mask { width: calc(520 * var(--rs)); margin: 0 auto; } .md-secRecommend .slideCts .slider .item { padding: 0 calc(20 * var(--rs)); } .md-secRecommend .slideCts .slider .item .img { height: calc(294 * var(--rs)); } .md-secRecommend .slideCts .slider .item .itemCol { margin-top: calc(24 * var(--rs)); } .md-secRecommend .slideCts .slider .item .cat { height: calc(50 * var(--rs)); padding: calc(4 * var(--rs)) calc(26 * var(--rs)) calc(5 * var(--rs)); border-radius: calc(90 * var(--rs)); font-size: calc(26 * var(--rs)); } .md-secRecommend .slideCts .slider .item .txtWrap .txt { margin-top: calc(20 * var(--rs)); font-size: calc(36 * var(--rs)); } .md-secRecommend .slideCts .slider .item .txtWrap .min { margin-top: calc(16 * var(--rs)); font-size: calc(28 * var(--rs)); line-height: 1.42; } .md-secRecommend .slideCts .btnWrap { margin-top: calc(72 * var(--rs)); } .md-secRecommend .slideCts .next, .md-secRecommend .slideCts .prev { width: calc(60 * var(--rs)); height: calc(60 * var(--rs)); margin: 0 calc(15 * var(--rs)); } .md-secRecommend .slideCts .next img, .md-secRecommend .slideCts .prev img { width: calc(17 * var(--rs)); } .md-secRecommend .secBnrWrap { margin-top: calc(26 * var(--rs)); padding-left: calc(25 * var(--rs)); padding-right: calc(25 * var(--rs)); } .md-secRecommend .secBnrWrap .bnrCol { margin: calc(20 * var(--rs)) auto 0; padding-left: 0; padding-right: 0; } .md-secRecommend .secBnrWrap .bnrCol.bnr--wid02 { width: 100%; } .md-secRecommend .secBnrWrap .bnrInr { display: block; width: 100%; margin: 0 auto; text-decoration: none; transition: opacity 0.3s linear; } .md-secRecommend .secBnrWrap .bnrInr:hover { opacity: 0.7; } .md-secRecommend .secBnrWrap .img img { width: 100%; height: auto; } .md-secRecommend .secBnrWrap + .secCtsWrap { margin-top: calc(44 * var(--rs)); } ｆ .md-secRecommend .secCtsWrap::after { width: calc(360 * var(--rs)); } .md-secRecommend .secCtsWrap::before { left: calc(65 * var(--rs)); } .md-secRecommend .secCtsWrap::after { right: calc(65 * var(--rs)); } } .md-attachedAccessoryList + .md-attachedAccessoryList { margin-top: calc(75 * var(--rs)); } .md-attachedAccessoryList .listTtl { font-size: calc(16 * var(--rs)); font-weight: var(--weight-medium); margin-bottom: calc(-20 * var(--rs)); margin-top: calc(50 * var(--rs)); } .md-attachedAccessoryList ul { display: flex; flex-wrap: wrap; margin: 0 calc(-20 * var(--rs)); position: relative; } .md-attachedAccessoryList ul .item { width: 25%; box-sizing: border-box; padding: calc(70 * var(--rs)) calc(20 * var(--rs)) 0; display: flex; flex-direction: column; } .md-attachedAccessoryList ul .item .itemInr { text-decoration: none; flex: 1; cursor: pointer; display: flex; flex-direction: column; } .md-attachedAccessoryList ul .item .thum { width: calc(155 * var(--rs)); height: calc(122 * var(--rs)); margin: 0 auto; } .md-attachedAccessoryList ul .item .thum img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; transition: opacity 0.3s ease-in-out; cursor: pointer; } .md-attachedAccessoryList ul .item .thum:hover img { opacity: 0.7; } .md-attachedAccessoryList ul .item .name { font-size: calc(16 * var(--rs)); line-height: 1.6; text-align: center; } .md-attachedAccessoryList ul .item .itemInr:hover .name, .md-attachedAccessoryList ul .item .itemInr:hover .icn { text-decoration: underline; } .md-attachedAccessoryList ul .item .dtlBtn { display: table; margin: auto auto 0 auto; padding-top: calc(20 * var(--rs)); cursor: pointer; } .md-attachedAccessoryList ul .item .dtlBtn .btn { display: flex; align-items: center; padding-left: 0; font-size: calc(13 * var(--rs)); position: relative; padding: 0 calc(30 * var(--rs)); } .md-attachedAccessoryList ul .item .dtlBtn .btn::before { content: " "; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .md-attachedAccessoryList ul .item .dtlModal .dtlBtn .btn::before { width: calc(12 * var(--rs)); height: calc(12 * var(--rs)); background: var(--icn-modal); right: calc(10 * var(--rs)); } .md-attachedAccessoryList--category ul .item { width: 20%; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-attachedAccessoryList + .md-attachedAccessoryList { margin-top: calc(120 * var(--rs)); } .md-attachedAccessoryList .listTtl { font-size: calc(36 * var(--rs)); margin-bottom: calc(-20 * var(--rs)); margin-top: calc(80 * var(--rs)); } .md-attachedAccessoryList ul { flex-wrap: wrap; margin: 0 calc(-10 * var(--rs)); } .md-attachedAccessoryList ul .item { width: 50%; padding: calc(55 * var(--rs)) calc(6 * var(--rs)) 0; } .md-attachedAccessoryList ul .item .thum { width: calc(280 * var(--rs)); height: calc(220 * var(--rs)); } .md-attachedAccessoryList ul .item .name { font-size: calc(32 * var(--rs)); } .md-attachedAccessoryList + .btnLine { margin-top: calc(80 * var(--rs)); } .md-attachedAccessoryList + .btnLine .md-btnSquare { width: 100%; margin: 0 auto; } .md-attachedAccessoryList--buy .listTtl { margin-bottom: calc(-50 * var(--rs)); } .md-attachedAccessoryList--buy ul .item { padding-top: calc(110 * var(--rs)); } .md-attachedAccessoryList--buy ul .item .itemInr { display: flex; flex-direction: column; } .md-attachedAccessoryList ul .item .dtlBtn { margin: auto auto 0 auto; padding-top: calc(30 * var(--rs)); } .md-attachedAccessoryList ul .item .dtlBtn .btn { padding: 0 calc(45 * var(--rs)); font-size: calc(28 * var(--rs)); } .md-attachedAccessoryList ul .item .dtlModal .dtlBtn .btn::before { width: calc(24 * var(--rs)); height: calc(24 * var(--rs)); right: 0; } .md-attachedAccessoryList ul .item .dtlModal .dtlBtn .btn::after { width: calc(60 * var(--rs)); height: calc(60 * var(--rs)); } } .md-modalOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: rgba(0, 0, 0, 0.8); display: none; } html.js-modalShow, html.js-modalShow body { height: 100%; } .md-modal { height: 100%; width: 100%; box-sizing: border-box; position: relative; z-index: 1001; pointer-events: none; display: none; } .md-modal .modalInr { display: table-cell; vertical-align: middle; } .md-modal .modalBg { width: calc(1040 * var(--rs)); margin: 0 auto; padding: calc(40 * var(--rs)) 0; } .md-modal .modalBg .modalBgInr { pointer-events: all; position: relative; background: #fff; padding: calc(30 * var(--rs)) calc(40 * var(--rs)) calc(40 * var(--rs)); } .md-modal .modalBg .modalClose { position: absolute; top: calc(3 * var(--rs)); right: calc(3 * var(--rs)); width: calc(60 * var(--rs)); height: calc(60 * var(--rs)); cursor: pointer; } .md-modal .modalBg .modalClose::before, .md-modal .modalBg .modalClose::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: calc(30 * var(--rs)); margin-left: calc(-15 * var(--rs)); height: 1px; background: #111; } .md-modal .modalBg .modalClose::before { transform: rotate(-45deg); } .md-modal .modalBg .modalClose::after { transform: rotate(45deg); } .md-modal .modalCts .modalTtl { font-size: calc(30 * var(--rs)); line-height: 1.4; } .md-modal .modalCts .technologyBody { margin-top: calc(20 * var(--rs)); word-break: break-all; } .md-modal .modalCts .technologyBody h2 { font-size: calc(20 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.5; } .md-modal .modalCts .technologyBody h3 { margin-top: calc(22 * var(--rs)); font-size: calc(16 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.87; } .md-modal .modalCts .technologyBody p, .md-modal .modalCts .technologyBody li { font-size: calc(16 * var(--rs)); line-height: 1.87; } .md-modal .modalCts .technologyBody ul { margin-top: calc(15 * var(--rs)); } .md-modal .modalCts .technologyBody .note { margin-top: calc(12 * var(--rs)); } .md-modal .modalCts .technologyBody .note p { font-size: calc(13 * var(--rs)); line-height: 2; } .md-modal .modalCts .technologyBody .note p:not(:first-child) { margin-top: calc(8 * var(--rs)); } .md-modal .modalCts .technologyBody img { max-width: 100%; height: auto; } .md-modal .modalCts .technologyBody h2:not(:first-child) { margin-top: calc(46 * var(--rs)); } .md-modal .modalCts .technologyBody a { text-decoration: none; } .md-modal .modalCts .technologyBody li { padding-left: 1em; position: relative; list-style: none; } .md-modal .modalCts .technologyBody li::before { content: "・"; display: inline-block; position: absolute; top: 0; left: 0; } .md-modal .modalCts .technologyBody a[target="_blank"] { padding-right: calc(16 * var(--rs)); position: relative; } .md-modal .modalCts .technologyBody a[target="_blank"]::after { content: " "; width: calc(10 * var(--rs)); height: calc(10 * var(--rs)); background: var(--icn-blank-black); position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .md-modal .modalCts .technologyBody a:hover { text-decoration: underline; } .md-modal .modalCts .technologyBody img + * { margin-top: calc(40 * var(--rs)); } .md-modal .modalCts .technologyBody h2 + .note, .md-modal .modalCts .technologyBody h2 + * { margin-top: calc(34 * var(--rs)); } .md-modal .modalCts .technologyBody h3 + * { margin-top: calc(6 * var(--rs)); } .md-modal .modalCts .technologyBody sup { font-size: calc(11 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-modal .modalBg { width: 100%; box-sizing: border-box; padding: calc(40 * var(--rs)) calc(70 * var(--rs)); } .md-modal .modalBg .modalBgInr { padding: calc(75 * var(--rs)) calc(40 * var(--rs)) calc(45 * var(--rs)); } .md-modal .modalBg .modalClose { position: absolute; top: calc(7 * var(--rs)); right: calc(0 * var(--rs)); } .md-modal .modalCts .modalTtl { font-size: calc(46 * var(--rs)); } .md-modal .modalCts .technologyBody { margin-top: calc(20 * var(--rs)); font-size: calc(32 * var(--rs)); } .md-modal .modalCts .technologyBody h2 { font-size: calc(40 * var(--rs)); } .md-modal .modalCts .technologyBody h3 { margin-top: calc(36 * var(--rs)); font-size: calc(36 * var(--rs)); } .md-modal .modalCts .technologyBody p, .md-modal .modalCts .technologyBody li { font-size: calc(32 * var(--rs)); } .md-modal .modalCts .technologyBody ul { margin-top: calc(20 * var(--rs)); } .md-modal .modalCts .technologyBody .note { margin-top: calc(24 * var(--rs)); } .md-modal .modalCts .technologyBody .note p { font-size: calc(28 * var(--rs)); line-height: 1.4; } .md-modal .modalCts .technologyBody .note p:not(:first-child) { margin-top: calc(26 * var(--rs)); } .md-modal .modalCts .technologyBody h2:not(:first-child) { margin-top: calc(60 * var(--rs)); } .md-modal .modalCts .technologyBody a[target="_blank"] { padding-right: calc(36 * var(--rs)); } .md-modal .modalCts .technologyBody a[target="_blank"]::after { width: calc(22 * var(--rs)); height: calc(22 * var(--rs)); } .md-modal .modalCts .technologyBody h2 + .note, .md-modal .modalCts .technologyBody h2 + * { margin-top: calc(26 * var(--rs)); } .md-modal .modalCts .technologyBody h3 + * { margin-top: calc(8 * var(--rs)); } .md-modal .modalCts .technologyBody sup { font-size: calc(26 * var(--rs)); } } .md-modal .modalCts .mountList { display: flex; flex-wrap: wrap; margin: 0 calc(-12 * var(--rs)); } .md-modal .modalCts .mountList .item { width: calc(100% / 3); box-sizing: border-box; padding: calc(20 * var(--rs)) calc(12 * var(--rs)) 0; display: flex; } .md-modal .modalCts .mountList .item .itemInr { text-decoration: none; display: block; width: 100%; background: #f2f2f2; box-sizing: border-box; padding: calc(18 * var(--rs)) calc(22 * var(--rs)) calc(25 * var(--rs)); } .md-modal .modalCts .mountList .item .name { line-height: 1.4; font-size: calc(18 * var(--rs)); font-weight: var(--weight-medium); } .md-modal .modalCts .mountList .item .priceLine { margin-top: calc(10 * var(--rs)); } .md-modal .modalCts .mountList .item .priceLine .hl { font-size: calc(13 * var(--rs)); } .md-modal .modalCts .mountList .item .priceLine .price { font-size: calc(22 * var(--rs)); font-weight: var(--weight-medium); margin-top: calc(6 * var(--rs)); } .md-modal .modalCts .mountList .item .priceLine .price .tax { font-size: calc(16 * var(--rs)); } .md-modal .modalCts .mountList .item .priceLine .openprice { font-size: calc(16 * var(--rs)); font-weight: var(--weight-medium); margin-top: calc(10 * var(--rs)); } .md-modal .modalCts .mountList .item .serialNum { margin-top: calc(20 * var(--rs)); font-size: calc(15 * var(--rs)); line-height: 1.4; } .md-modal .modalCts .mountList .item .buyBtn { margin-top: calc(25 * var(--rs)); width: auto; } .md-modal .modalCts .mountList .item .buyBtn .btn { display: flex; width: calc(115 * var(--rs)); height: calc(36 * var(--rs)); background: #222; border-radius: calc(2 * var(--rs)); color: #fff; align-items: center; justify-content: center; margin: 0 auto; font-size: calc(13 * var(--rs)); font-weight: var(--weight-medium); text-decoration: none; transition: opacity 0.3s linear; margin: 0 auto; } .md-modal .modalCts .mountList .item .buyBtn .btn:hover { opacity: 0.7; } .md-modal .modalCts .mountList .item .buyBtn .btn .icn { position: relative; padding-left: calc(28 * var(--rs)); } .md-modal .modalCts .mountList .item .buyBtn .btn .icn::before { content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 0; background: var(--icn-cart); width: calc(18 * var(--rs)); height: calc(15 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-modal .modalCts .mountList { margin: 0 calc(-10 * var(--rs)); } .md-modal .modalCts .mountList .item { width: 50%; padding: calc(20 * var(--rs)) calc(10 * var(--rs)) 0; } .md-modal .modalCts .mountList .item .itemInr { padding: calc(35 * var(--rs)) calc(26 * var(--rs)) calc(45 * var(--rs)); display: flex; flex-direction: column; } .md-modal .modalCts .mountList .item .name { font-size: calc(26 * var(--rs)); } .md-modal .modalCts .mountList .item .priceLine { margin-top: calc(20 * var(--rs)); } .md-modal .modalCts .mountList .item .priceLine .hl { font-size: calc(22 * var(--rs)); } .md-modal .modalCts .mountList .item .priceLine .price { font-size: calc(34 * var(--rs)); margin-top: calc(10 * var(--rs)); } .md-modal .modalCts .mountList .item .priceLine .price .tax { font-size: calc(16 * var(--rs)); } .md-modal .modalCts .mountList .item .priceLine .openprice { font-size: calc(22 * var(--rs)); margin-top: calc(18 * var(--rs)); } .md-modal .modalCts .mountList .item .serialNum { margin-top: calc(15 * var(--rs)); font-size: calc(22 * var(--rs)); } .md-modal .modalCts .mountList .item .buyBtn { margin-top: auto; padding-top: calc(34 * var(--rs)); } .md-modal .modalCts .mountList .item .buyBtn .btn { width: calc(180 * var(--rs)); height: calc(56 * var(--rs)); font-size: calc(24 * var(--rs)); } .md-modal .modalCts .mountList .item .buyBtn .btn .icn { padding-left: calc(36 * var(--rs)); } .md-modal .modalCts .mountList .item .buyBtn .btn .icn::before { width: calc(26 * var(--rs)); height: calc(22 * var(--rs)); } } .md-modal--chart .hasImageCol { display: flex; margin-top: calc(26 * var(--rs)); } .md-modal--chart .hasImageCol .imgCol { width: calc(436 * var(--rs)); order: 2; } .md-modal--chart .hasImageCol .imgCol img { width: 100%; } .md-modal--chart .hasImageCol .txtCol { flex: 1; box-sizing: border-box; padding-right: calc(73 * var(--rs)); } .md-modal--chart .hasImageCol .txtCol .dtlTxt { line-height: 1.8; font-size: calc(16 * var(--rs)); } .md-modal--chart .hasImageCol .txtCol .dtlTxt p:not(:first-child) { margin-top: calc(20 * var(--rs)); } .md-modal--chart .relatedTerm { display: flex; margin-top: calc(20 * var(--rs)); } .md-modal--chart .relatedTerm .listTtl { padding-right: calc(20 * var(--rs)); } .md-modal--chart .relatedTerm .listDtl { flex: 1; } .md-modal--chart .relatedTerm .listDtl .linkList li:not(:first-child) { margin-top: calc(10 * var(--rs)); } .md-modal--chart .relatedTerm .listDtl .linkList li .termLink { text-decoration: none; cursor: pointer; display: inline-block; padding-left: calc(20 * var(--rs)); position: relative; } .md-modal--chart .relatedTerm .listDtl .linkList li .termLink:hover { text-decoration: underline; } .md-modal--chart .relatedTerm .listDtl .linkList li .termLink::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: calc(16 * var(--rs)); height: calc(16 * var(--rs)); background: var(--icn-info-black); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-modal--chart .hasImageCol { display: block; margin-top: calc(20 * var(--rs)); } .md-modal--chart .hasImageCol .imgCol { width: auto; } .md-modal--chart .hasImageCol .txtCol { padding-right: 0; } .md-modal--chart .hasImageCol .txtCol .dtlTxt { line-height: 1.6; font-size: calc(32 * var(--rs)); margin-top: calc(20 * var(--rs)); } .md-modal--chart .hasImageCol .txtCol .dtlTxt p:not(:first-child) { margin-top: calc(20 * var(--rs)); } .md-modal--chart .relatedTerm { display: block; margin-top: calc(32 * var(--rs)); } .md-modal--chart .relatedTerm .listTtl { padding-right: 0; } .md-modal--chart .relatedTerm .listDtl .linkList { margin-top: calc(15 * var(--rs)); } .md-modal--chart .relatedTerm .listDtl .linkList li:not(:first-child) { margin-top: calc(15 * var(--rs)); } .md-modal--chart .relatedTerm .listDtl .linkList li .termLink { padding-left: calc(40 * var(--rs)); } .md-modal--chart .relatedTerm .listDtl .linkList li .termLink::before { width: calc(30 * var(--rs)); height: calc(30 * var(--rs)); background: var(--icn-info-black); } } .md-modal--fullImg { height: 100%; width: 100%; box-sizing: border-box; position: relative; overflow: hidden; z-index: 1001; pointer-events: none; display: none; } .md-modal--fullImg .modalInr { display: block; height: 100%; width: 100%; } .md-modal--fullImg .modalBg { width: auto; height: 100%; padding: 0; } .md-modal--fullImg .modalBg .modalClose { z-index: 10; pointer-events: all; width: calc(120 * var(--rs)); height: calc(120 * var(--rs)); top: 0; right: 0; } .md-modal--fullImg .modalBg .modalClose::before, .md-modal--fullImg .modalBg .modalClose::after { background: #fff; width: calc(50 * var(--rs)); margin-left: calc(-25 * var(--rs)); } .md-modal--fullImg .modalCts, .md-modal--fullImg .slide, .md-modal--fullImg .mask, .md-modal--fullImg .slider, .md-modal--fullImg .item, .md-modal--fullImg .itemInr { height: 100%; width: 100%; pointer-events: none; } .md-modal--fullImg .item { box-sizing: border-box; } .md-modal--fullImg .slide .next, .md-modal--fullImg .slide .prev { position: absolute; top: 0; width: calc(100 * var(--rs)); height: 100%; cursor: pointer; z-index: 2; pointer-events: all; background: no-repeat center center; background-size: calc(25 * var(--rs)) auto; } .md-modal--fullImg .slide .next { right: 0; background-image: url(/special/archive-contents/common/images/icn_slide_arrow_right_white.svg); } .md-modal--fullImg .slide .prev { left: 0; background-image: url(/special/archive-contents/common/images/icn_slide_arrow_left_white.svg); } .md-modal--fullImg .slide .pager { display: none; } .md-modal--fullImg .itemInr { overflow: hidden; position: relative; box-sizing: border-box; padding: calc(30 * var(--rs)); padding-bottom: calc(80 * var(--rs)); } .md-modal--fullImg .itemInr img { width: 100%; height: 100%; pointer-events: all; -o-object-fit: scale-down; object-fit: scale-down; } .md-modal--fullImg .itemCapPlace { height: calc(40 * var(--rs)); box-sizing: border-box; padding: 0 calc(20 * var(--rs)); position: absolute; bottom: calc(30 * var(--rs)); left: 0; width: 100%; text-align: center; overflow: hidden; } .md-modal--fullImg .itemCap { color: #fff; font-size: calc(14 * var(--rs)); line-height: 1.5; pointer-events: none; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-modal--fullImg .modalBg .modalClose { width: calc(80 * var(--rs)); height: calc(80 * var(--rs)); } .md-modal--fullImg .slide .next, .md-modal--fullImg .slide .prev { width: calc(60 * var(--rs)); } .md-modal--fullImg .itemCapPlace { height: calc(230 * var(--rs)); padding: 0 calc(30 * var(--rs)); bottom: calc(38 * var(--rs)); } .md-modal--fullImg .itemCap { font-size: calc(25 * var(--rs)); } } .md-modal--accessories .modalCts .modalTtl { font-size: calc(24 * var(--rs)); line-height: 1.25; } .md-modal--accessories .accessoryCts { display: flex; } .md-modal--accessories .accessoryCts .img { order: 1; width: calc(400 * var(--rs)); padding-top: calc(20 * var(--rs)); height: calc(400 * var(--rs)); margin-top: calc(20 * var(--rs)); background: #f4f4f5; } .md-modal--accessories .accessoryCts .img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .md-modal--accessories .accessoryCts .txtCol { flex: 1; box-sizing: border-box; padding-top: calc(20 * var(--rs)); padding-right: calc(80 * var(--rs)); } .md-modal--accessories .accessoryCts .txtCol .priceLine { margin-top: calc(35 * var(--rs)); } .md-modal--accessories .accessoryCts .explanation { font-size: calc(16 * var(--rs)); line-height: 1.87; } .md-modal--accessories .accessoryCts .explanation .note { margin-top: calc(20 * var(--rs)); } .md-modal--accessories .accessoryCts .explanation a { text-decoration: underline; } .md-modal--accessories .accessoryCts .explanation a:hover { text-decoration: none; } .md-modal--accessories .accessoryCts .attached { margin-top: calc(36 * var(--rs)); box-sizing: border-box; padding: calc(16 * var(--rs)) calc(16 * var(--rs)); border: 1px solid #eaeaea; } .md-modal--accessories .accessoryCts .attached .ttl { font-size: calc(13 * var(--rs)); font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; } .md-modal--accessories .accessoryCts .attached .txt { margin-top: calc(8 * var(--rs)); font-size: calc(13 * var(--rs)); line-height: 1.69; letter-spacing: 0.01em; } .md-modal--accessories .accessoryCts .purchase { margin-top: calc(20 * var(--rs)); display: flex; align-items: flex-end; justify-content: space-between; } .md-modal--accessories .accessoryCts .purchase .itemDtl { flex: 1; } .md-modal--accessories .accessoryCts .purchase .priceLine { display: flex; align-items: center; } .md-modal--accessories .accessoryCts .purchase .priceLine .hl { font-size: calc(13 * var(--rs)); padding-right: calc(18 * var(--rs)); padding-top: calc(2 * var(--rs)); } .md-modal--accessories .accessoryCts .purchase .priceLine .price { font-size: calc(22 * var(--rs)); } .md-modal--accessories .accessoryCts .purchase .priceLine .openprice { font-size: calc(13 * var(--rs)); font-weight: var(--weight-medium); } .md-modal--accessories .accessoryCts .purchase .serialNum { margin-top: calc(15 * var(--rs)); font-size: calc(15 * var(--rs)); } .md-modal--accessories .accessoryCts .buyBtn { width: calc(113 * var(--rs)); } .md-modal--accessories .accessoryCts .buyBtn .btn, .md-modal--accessories .accessoryCts .buyBtn .md-btnSquare { display: flex; align-items: center; justify-content: center; width: 100%; height: calc(36 * var(--rs)); background: #000; border-radius: calc(2 * var(--rs)); color: #fff; text-decoration: none; font-size: calc(13 * var(--rs)); transition: opacity 0.3s linear; } .md-modal--accessories .accessoryCts .buyBtn .btn:hover, .md-modal--accessories .accessoryCts .buyBtn .md-btnSquare:hover { opacity: 0.7; } .md-modal--accessories .accessoryCts .buyBtn .btn .icn, .md-modal--accessories .accessoryCts .buyBtn .md-btnSquare .icn { padding-left: calc(26 * var(--rs)); position: relative; } .md-modal--accessories .accessoryCts .buyBtn .btn .icn::before, .md-modal--accessories .accessoryCts .buyBtn .md-btnSquare .icn::before { content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: calc(-5 * var(--rs)); width: calc(19 * var(--rs)); height: calc(18 * var(--rs)); background: var(--icn-cart); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-modal--accessories .modalCts .modalTtl { font-size: calc(40 * var(--rs)); } .md-modal--accessories .accessoryCts { display: block; } .md-modal--accessories .accessoryCts .img { width: auto; height: auto; } .md-modal--accessories .accessoryCts .img img { /* width: 100%; height: auto; -o-object-fit: none; object-fit: none; */ } .md-modal--accessories .accessoryCts .txtCol { padding-top: calc(40 * var(--rs)); padding-right: 0; } .md-modal--accessories .accessoryCts .txtCol .priceLine { margin-top: calc(50 * var(--rs)); } .md-modal--accessories .accessoryCts .explanation { font-size: calc(32 * var(--rs)); line-height: 1.625; } .md-modal--accessories .accessoryCts .explanation .note { margin-top: calc(40 * var(--rs)); font-size: calc(26 * var(--rs)); } .md-modal--accessories .accessoryCts .attached { margin-top: calc(60 * var(--rs)); padding: calc(40 * var(--rs)) calc(30 * var(--rs)); } .md-modal--accessories .accessoryCts .attached .ttl { font-size: calc(22 * var(--rs)); } .md-modal--accessories .accessoryCts .attached .txt { margin-top: calc(16 * var(--rs)); font-size: calc(22 * var(--rs)); line-height: 1.5; } .md-modal--accessories .accessoryCts .purchase { margin-top: calc(40 * var(--rs)); display: block; } .md-modal--accessories .accessoryCts .purchase .priceLine .hl { font-size: calc(22 * var(--rs)); padding-right: calc(30 * var(--rs)); padding-top: calc(2 * var(--rs)); } .md-modal--accessories .accessoryCts .purchase .priceLine .price { font-size: calc(34 * var(--rs)); } .md-modal--accessories .accessoryCts .purchase .priceLine .openprice { font-size: calc(28 * var(--rs)); } .md-modal--accessories .accessoryCts .purchase .serialNum { margin-top: calc(15 * var(--rs)); font-size: calc(22 * var(--rs)); } .md-modal--accessories .accessoryCts .buyBtn { width: auto; margin-top: calc(60 * var(--rs)); } .md-modal--accessories .accessoryCts .buyBtn .btn, .md-modal--accessories .accessoryCts .buyBtn .md-btnSquare { width: calc(326 * var(--rs)); height: calc(90 * var(--rs)); font-size: calc(26 * var(--rs)); border-radius: calc(4 * var(--rs)); margin: 0 auto; } .md-modal--accessories .accessoryCts .buyBtn .btn .icn, .md-modal--accessories .accessoryCts .buyBtn .md-btnSquare .icn { padding-left: calc(50 * var(--rs)); } .md-modal--accessories .accessoryCts .buyBtn .btn .icn::before, .md-modal--accessories .accessoryCts .buyBtn .md-btnSquare .icn::before { left: 0; width: calc(34 * var(--rs)); height: calc(28 * var(--rs)); } } .md-modal--support .modalCts .modalTtl { font-size: calc(24 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.66; } .md-modal--support .suppportCts .ttlCol { margin-top: calc(44 * var(--rs)); } .md-modal--support .suppportCts .ttlCol .ttl { font-size: calc(21 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.57; } .md-modal--support .suppportCts .ttlCol .ttl.numTtl { padding-left: 1em; text-indent: -1em; } .md-modal--support .suppportCts .txtCol { margin-top: calc(18 * var(--rs)); font-size: calc(16 * var(--rs)); line-height: 1.62; } .md-modal--support .suppportCts .txtCol .txt + .txt { margin-top: calc(18 * var(--rs)); } .md-modal--support .suppportCts .txtCol strong { font-weight: bold; } .md-modal--support .suppportCts .txtCol .gMap { display: inline-block; padding-left: calc(32 * var(--rs)); position: relative; text-decoration: underline; } .md-modal--support .suppportCts .txtCol .gMap::before { content: " "; width: calc(18 * var(--rs)); height: calc(22 * var(--rs)); background: url(/special/archive-contents/common/images/icn_map_black.svg) no-repeat center / contain; position: absolute; top: 0; left: 0; } .md-modal--support .suppportCts .txtCol .gMap:hover { text-decoration: none; } .md-modal--support .suppportCts .note { margin-top: calc(8 * var(--rs)); font-size: calc(13 * var(--rs)); line-height: 2; } .md-modal--support .suppportCts .note p { padding-left: 1em; text-indent: -1em; } .md-modal--support .suppportCts .modalNoteWrap { margin-top: calc(38 * var(--rs)); box-sizing: border-box; padding: calc(30 * var(--rs)) calc(28 * var(--rs)); background: #f7f7f7; } .md-modal--support .suppportCts .modalNoteWrap .ttl { font-size: calc(21 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.9; } .md-modal--support .suppportCts .modalNoteWrap .txtCol { margin-top: calc(10 * var(--rs)); font-size: calc(16 * var(--rs)); line-height: 1.87; } .md-modal--support .suppportCts .termsListWrap { height: calc(474 * var(--rs)); margin-top: calc(22 * var(--rs)); margin-right: calc(-10 * var(--rs)); overflow: hidden; } .md-modal--support .suppportCts .termsListWrap .wrapInr { height: 100%; box-sizing: border-box; padding-right: calc(20 * var(--rs)); overflow: auto; } .md-modal--support .suppportCts .termsListWrap .wrapInr::-webkit-scrollbar { width: calc(7 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr::-webkit-scrollbar-track { background: #eaeaea; } .md-modal--support .suppportCts .termsListWrap .wrapInr::-webkit-scrollbar-thumb { border-radius: 0; background: #412929; } .md-modal--support .suppportCts .txtCol .img { display: block; width: calc(770 * var(--rs)); margin: calc(42 * var(--rs)) auto 0; padding-bottom: calc(40 * var(--rs)); } .md-modal--support .suppportCts .txtCol .img img { width: 100%; height: auto; } .md-modal--support .suppportCts .termsListWrap .wrapInr h1, .md-modal--support .suppportCts .termsListWrap .wrapInr h2, .md-modal--support .suppportCts .termsListWrap .wrapInr h3, .md-modal--support .suppportCts .termsListWrap .wrapInr h4, .md-modal--support .suppportCts .termsListWrap .wrapInr h5, .md-modal--support .suppportCts .termsListWrap .wrapInr h6 { margin-top: calc(20 * var(--rs)); box-sizing: border-box; padding-top: calc(22 * var(--rs)); border-top: 1px solid #eaeaea; font-size: calc(18 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.5; } .md-modal--support .suppportCts .termsListWrap .wrapInr li, .md-modal--support .suppportCts .termsListWrap .wrapInr p { font-size: calc(14 * var(--rs)); line-height: 1.71; } .md-modal--support .suppportCts .termsListWrap .wrapInr h1 + p, .md-modal--support .suppportCts .termsListWrap .wrapInr h2 + p, .md-modal--support .suppportCts .termsListWrap .wrapInr h3 + p, .md-modal--support .suppportCts .termsListWrap .wrapInr h4 + p, .md-modal--support .suppportCts .termsListWrap .wrapInr h5 + p, .md-modal--support .suppportCts .termsListWrap .wrapInr h6 + p { margin-top: calc(20 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr p:not(:first-child) { margin-top: calc(10 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr ul, .md-modal--support .suppportCts .termsListWrap .wrapInr ol { margin-top: calc(10 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr ul + p, .md-modal--support .suppportCts .termsListWrap .wrapInr ol + p { margin-top: calc(10 * var(--rs)); } .md-modal--support .pmd-supportBtn.consentBtn { margin-top: calc(22 * var(--rs)); } .md-modal--support .pmd-supportBtn.consentBtn .btn { width: calc(322 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap.last { border-top: none; } .md-modal--support .suppportCts .termsListWrap.last .listCol { text-align: right; } .md-modal--support .suppportCts .termsListWrap .wrapInr .termsList { margin-top: calc(30 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr .termsTtl p { font-size: calc(20 * var(--rs)); font-weight: bold; line-height: 1.6; } .md-modal--support .suppportCts .termsListWrap .wrapInr .listCol p { line-height: 1.8; font-size: calc(16 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr .listCol p + p { margin-top: calc(20 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr .termsList.last { text-align: right; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-modal--support .modalCts .modalTtl { font-size: calc(40 * var(--rs)); line-height: 1.42; } .md-modal--support .suppportCts .ttlCol { margin-top: calc(40 * var(--rs)); } .md-modal--support .suppportCts .ttlCol .ttl { font-size: calc(34 * var(--rs)); } .md-modal--support .suppportCts .txtCol { margin-top: calc(30 * var(--rs)); font-size: calc(30 * var(--rs)); } .md-modal--support .suppportCts .txtCol .txt + .txt { margin-top: calc(30 * var(--rs)); } .md-modal--support .suppportCts .txtCol .gMap { padding-left: calc(40 * var(--rs)); } .md-modal--support .suppportCts .txtCol .gMap::before { width: calc(24 * var(--rs)); height: calc(30 * var(--rs)); top: calc(12 * var(--rs)); } .md-modal--support .suppportCts .note { margin-top: calc(18 * var(--rs)); font-size: calc(28 * var(--rs)); line-height: 1.78; } .md-modal--support .suppportCts .note p { padding-left: 1em; text-indent: -1em; } .md-modal--support .suppportCts .modalNoteWrap { margin-top: calc(56 * var(--rs)); padding: calc(40 * var(--rs)) calc(30 * var(--rs)); } .md-modal--support .suppportCts .modalNoteWrap .ttl { font-size: calc(34 * var(--rs)); line-height: 1.76; } .md-modal--support .suppportCts .modalNoteWrap .txtCol { margin-top: calc(30 * var(--rs)); font-size: calc(30 * var(--rs)); line-height: 1.66; } .md-modal--support .suppportCts .termsListWrap { height: calc(660 * var(--rs)); margin-top: calc(20 * var(--rs)); margin-right: calc(-20 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr { padding-right: calc(30 * var(--rs)); } .md-modal--support .suppportCts .txtCol .img { width: 100%; margin: calc(46 * var(--rs)) 0 0; } .md-modal--support .suppportCts .termsListWrap .wrapInr::-webkit-scrollbar { width: calc(14 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr h1, .md-modal--support .suppportCts .termsListWrap .wrapInr h2, .md-modal--support .suppportCts .termsListWrap .wrapInr h3, .md-modal--support .suppportCts .termsListWrap .wrapInr h4, .md-modal--support .suppportCts .termsListWrap .wrapInr h5, .md-modal--support .suppportCts .termsListWrap .wrapInr h6 { margin-top: calc(50 * var(--rs)); padding-top: calc(50 * var(--rs)); font-size: calc(32 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr li, .md-modal--support .suppportCts .termsListWrap .wrapInr p { font-size: calc(30 * var(--rs)); line-height: 1.5; } .md-modal--support .suppportCts .termsListWrap .wrapInr h1 + p, .md-modal--support .suppportCts .termsListWrap .wrapInr h2 + p, .md-modal--support .suppportCts .termsListWrap .wrapInr h3 + p, .md-modal--support .suppportCts .termsListWrap .wrapInr h4 + p, .md-modal--support .suppportCts .termsListWrap .wrapInr h5 + p, .md-modal--support .suppportCts .termsListWrap .wrapInr h6 + p { margin-top: calc(24 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr p:not(:first-child) { margin-top: calc(35 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr ul, .md-modal--support .suppportCts .termsListWrap .wrapInr ol { margin-top: calc(30 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr ul + p, .md-modal--support .suppportCts .termsListWrap .wrapInr ol + p { margin-top: calc(30 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr li { margin-top: calc(18 * var(--rs)); } .md-modal--support .pmd-supportBtn.consentBtn { margin-top: calc(64 * var(--rs)); } .md-modal--support .pmd-supportBtn.consentBtn .btn { width: 100%; height: auto; box-sizing: border-box; padding: calc(26 * var(--rs)) calc(40 * var(--rs)); text-align: center; } .md-modal--support .suppportCts .termsListWrap .wrapInr .termsList { margin-top: calc(40 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr .termsTtl p { font-size: calc(32 * var(--rs)); font-weight: bold; line-height: 1.6; } .md-modal--support .suppportCts .termsListWrap .wrapInr .listCol p { line-height: 1.8; font-size: calc(26 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr .listCol p + p { margin-top: calc(40 * var(--rs)); } .md-modal--support .suppportCts .termsListWrap .wrapInr .termsList.last { text-align: right; } } .md-modal--contents .modalCts .mountList { margin: 0 calc(-20 * var(--rs)); padding-top: calc(55 * var(--rs)); } .md-modal--contents .modalCts .mountList .item { width: 50%; padding: 0 calc(20 * var(--rs)); } .md-modal--contents .modalCts .mountList .item .itemInr { padding: calc(30 * var(--rs)) calc(20 * var(--rs)); } .md-modal--contents .modalCts .mountList .item .list { display: flex; } .md-modal--contents .modalCts .mountList .item .list:not(:first-child) { margin-top: calc(13 * var(--rs)); } .md-modal--contents .modalCts .mountList .item .list .ttl { width: calc(210 * var(--rs)); font-size: calc(18 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.55; } .md-modal--contents .modalCts .mountList .item .list .txt { flex: 1; box-sizing: border-box; padding-left: calc(15 * var(--rs)); font-size: calc(15 * var(--rs)); line-height: 1.46; } .md-modal--contents .modalCts .modalDlBtn { margin-top: calc(40 * var(--rs)); } .md-modal--contents .modalCts .modalDlBtn .btn { display: flex; align-items: center; justify-content: center; width: calc(200 * var(--rs)); height: calc(48 * var(--rs)); background: #000; box-sizing: border-box; padding: calc(4 * var(--rs)) calc(10 * var(--rs)); text-decoration: none; color: #fff; font-size: calc(16 * var(--rs)); font-weight: var(--weight-medium); transition: opacity 0.3s linear; } .md-modal--contents .modalCts .modalDlBtn .btn:hover { opacity: 0.7; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-modal--contents .modalCts .mountList { margin: 0; padding-top: 0; } .md-modal--contents .modalCts .mountList { display: block; } .md-modal--contents .modalCts .mountList .item { width: 100%; padding: 0; } .md-modal--contents .modalCts .mountList .item:not(:first-child) { margin-top: calc(40 * var(--rs)); } .md-modal--contents .modalCts .mountList .item .itemInr { padding: calc(36 * var(--rs)) calc(40 * var(--rs)); } .md-modal--contents .modalCts .mountList .item .list { display: block; } .md-modal--contents .modalCts .mountList .item .list:not(:first-child) { margin-top: calc(24 * var(--rs)); } .md-modal--contents .modalCts .mountList .item .list .ttl { width: auto; font-size: calc(32 * var(--rs)); line-height: 1.31; } .md-modal--contents .modalCts .mountList .item .list .txt { margin-top: calc(6 * var(--rs)); padding-left: 0; font-size: calc(30 * var(--rs)); line-height: 1.4; } .md-modal--contents .modalCts .modalDlBtn { margin-top: calc(60 * var(--rs)); } .md-modal--contents .modalCts .modalDlBtn .btn { width: calc(326 * var(--rs)); height: calc(80 * var(--rs)); padding: calc(10 * var(--rs)) calc(20 * var(--rs)); font-size: calc(26 * var(--rs)); } } .md-slidePager { display: flex; align-items: center; justify-content: center; width: 100%; pointer-events: none; } .md-slidePager .pagerItem { width: calc(12 * var(--rs)); height: calc(12 * var(--rs)); border-radius: 100%; margin: 0 calc(5 * var(--rs)); box-sizing: border-box; background: #e0e0e0; pointer-events: all; cursor: pointer; } .md-slidePager .pagerItem.js-stay { border: none; border: 1px solid #fffafa; background: #000; cursor: default; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-slidePager .pagerItem { width: calc(20 * var(--rs)); height: calc(20 * var(--rs)); margin: 0 calc(12 * var(--rs)); } } /* PC -------------------------------------*/ @media screen and (min-width: 769px) { .md-detailToggleWrap:not(.md-detailToggleWrap--pc) { padding: 0 !important; } .md-detailToggleWrap:not(.md-detailToggleWrap--pc) .spDetailToggle { height: auto !important; } .md-detailToggleWrap:not(.md-detailToggleWrap--pc) .spDetailToggleBtn { display: none !important; } .cm-bg + .cm-bg, .cm-bg + .md-detailToggleWrap.cm-bg .md-secFeatureDetail, .md-detailToggleWrap.cm-bg + .md-detailToggleWrap.cm-bg .md-secFeatureDetail { padding-top: 0; } .md-detailToggleWrap--pc { position: relative; padding-bottom: 0; transition: padding-bottom 0.3s linear; overflow: hidden; } .md-detailToggleWrap--pc .spDetailToggle { overflow: hidden; height: calc(500 * var(--rs)); margin: 0 calc(-40 * var(--rs)); padding: 0 calc(40 * var(--rs)); } .md-detailToggleWrap--pc .spDetailToggleBtn { padding-bottom: calc(120 * var(--rs)); position: absolute; bottom: 0; width: 100%; z-index: 2; } .md-detailToggleWrap--pc .spDetailToggleBtn .cover { display: block; width: 100%; position: absolute; height: calc(390 * var(--rs)); bottom: 0; left: 0; background: #fff; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); transition: opacity 0.3s linear; } .md-detailToggleWrap--pc.cm-bg .spDetailToggleBtn .cover { background: var(--bg-color); background: linear-gradient(to bottom, rgba(244,244,245,0) 0%,rgba(244,244,245,1) 50%,rgba(244,244,245,1) 100%); } .md-detailToggleWrap--pc .spDetailToggleBtn .btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: calc(184 * var(--rs)); height: calc(50 * var(--rs)); background: #000; color: #fff; font-size: calc(14 * var(--rs)); font-weight: var(--weight-medium); margin: 0 auto; position: relative; z-index: 10; transition: background 0.3s linear; cursor: pointer; } .md-detailToggleWrap--pc.js-toggleOpen { padding-bottom: calc(190 * var(--rs)); } .md-detailToggleWrap--pc.js-toggleOpen .spDetailToggleBtn .cover { opacity: 0; pointer-events: none; } .md-detailToggleWrap--pc.js-toggleOpen .spDetailToggleBtn .btn { background: #f4f4f5; border: 1px solid #c9c9c9; color: #000; } } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-detailToggleWrap { position: relative; padding-bottom: 0; transition: padding-bottom 0.3s linear; overflow: hidden; } .md-detailToggleWrap .spDetailToggle { overflow: hidden; height: calc(1200 * var(--rs)); margin: 0 calc(-40 * var(--rs)); padding: 0 calc(40 * var(--rs)); } .md-detailToggleWrap .spDetailToggleBtn { padding-bottom: calc(120 * var(--rs)); position: absolute; bottom: 0; width: 100%; z-index: 2; } .md-detailToggleWrap .spDetailToggleBtn .cover { display: block; width: 100%; position: absolute; height: calc(390 * var(--rs)); bottom: 0; left: 0; background: #fff; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); transition: opacity 0.3s linear; } .md-detailToggleWrap.cm-bg .spDetailToggleBtn .cover { background: var(--bg-color); background: linear-gradient(to bottom, rgba(244,244,245,0) 0%,rgba(244,244,245,1) 50%,rgba(244,244,245,1) 100%); } .md-detailToggleWrap .spDetailToggleBtn .btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: calc(320 * var(--rs)); height: calc(72 * var(--rs)); background: #000; color: #fff; font-size: calc(30 * var(--rs)); font-weight: var(--weight-medium); margin: 0 auto; position: relative; z-index: 10; transition: background 0.3s linear; cursor: pointer; } .md-detailToggleWrap.js-toggleOpen { padding-bottom: calc(190 * var(--rs)); } .md-detailToggleWrap.js-toggleOpen .spDetailToggleBtn .cover { opacity: 0; pointer-events: none; } .md-detailToggleWrap.js-toggleOpen .spDetailToggleBtn .btn { background: #f4f4f5; border: 1px solid #c9c9c9; color: #000; } } /* -------------------------------------------- ↓↓↓ レンズ一覧 絞り込み ↓↓↓ -------------------------------------------- */ .md-productIndexList .visWrap { margin-top: calc(40 * var(--rs)); } .md-productIndexList .visWrap .visTtl .ttl { font-size: calc(34 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.6; letter-spacing: 0.03em; } .md-productIndexList .visWrap .searchColWrap { margin-top: calc(26 * var(--rs)); box-sizing: border-box; padding: calc(24 * var(--rs)) calc(28 * var(--rs)) calc(30 * var(--rs)); background: #fff; position: relative; } .md-productIndexList .visWrap .searchColWrap .ttlLine { box-sizing: border-box; padding-right: calc(120 * var(--rs)); } .md-productIndexList .visWrap .searchColWrap .ttlLine .ttl { font-size: calc(18 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.8; letter-spacing: 0.02em; } .md-productIndexList .visWrap .searchColWrap .filterCts { display: flex; flex-wrap: wrap; margin: 0 calc(-20 * var(--rs)); } .md-productIndexList .visWrap .filterCts .filter { margin-top: calc(22 * var(--rs)); box-sizing: border-box; padding: 0 calc(10 * var(--rs)); } .md-productIndexList .visWrap .filterCts .filter .ttl { display: table; padding-left: calc(14 * var(--rs)); font-size: calc(14 * var(--rs)); line-height: 1.4; letter-spacing: 0.02em; position: relative; font-weight: var(--weight-medium); } .md-productIndexList .visWrap .filterCts .filter .ttl::before { content: " "; display: inline-block; width: calc(7 * var(--rs)); height: calc(7 * var(--rs)); background: #525252; position: absolute; top: calc(6 * var(--rs)); left: 0; } .md-productIndexList .visWrap .filterCts .filter .ttl .md-icnInfo { position: absolute; top: 50%; right: calc(-24 * var(--rs)); transform: translateY(-50%); } .md-productIndexList .visWrap .filterCts .filter .catItemWrap { display: flex; margin: calc(8 * var(--rs)) calc(-3 * var(--rs)) 0; } .md-productIndexList .visWrap .filterCts .filter .catItemWrap li { box-sizing: border-box; padding: 0 calc(3 * var(--rs)); } .md-productIndexList .visWrap .filterCts .filter .catItemWrap li .checkLine { display: block; position: relative; } .md-productIndexList .visWrap .filterCts .filter .catItemWrap li .checkLine.js-isDisabled { opacity: 0.5; pointer-events: none; } .md-productIndexList .visWrap .filterCts .filter .catItemWrap li .checkLine input[type="checkbox"] { width: 100%; height: 100%; position: absolute; top: 0; left: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 100%; padding: 0; margin: 0; border: none; } .md-productIndexList .visWrap .filterCts .filter .catItemWrap li .btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: calc(5 * var(--rs)) calc(12 * var(--rs)) calc(6 * var(--rs)); border: 1px solid #c9c9c9; border-radius: calc(3 * var(--rs)); background: #fff; font-size: calc(13 * var(--rs)); line-height: 1.2; text-decoration: none; transition: background 0.3s linear, color 0.3s linear, border-color 0.3s linear; cursor: pointer; } .md-productIndexList .visWrap .filterCts .filter .catItemWrap li input[type="checkbox"]:checked + .btn { background: #666e66; border-color: #666e66; color: #fff; } .md-productIndexList .visWrap .filterCts .filter--mount { width: 23.2%; } .md-productIndexList .visWrap .filterCts .filter--mount .catItemWrap { margin-left: 0; margin-right: 0; } .md-productIndexList .visWrap .filterCts .filter--mount .select { border-color: #c9c9c9; padding: calc(5 * var(--rs)) calc(44 * var(--rs)) calc(6 * var(--rs)) calc(12 * var(--rs)); line-height: 1.2; } .md-productIndexList .visWrap .clearBtn { width: auto; position: absolute; top: calc(26 * var(--rs)); right: calc(28 * var(--rs)); } .md-productIndexList .visWrap .clearBtn .btn { box-sizing: border-box; padding: calc(4 * var(--rs)) calc(6 * var(--rs)); text-decoration: underline; font-size: calc(13 * var(--rs)); line-height: 2; letter-spacing: 0.01em; } .md-productIndexList .visWrap .clearBtn .btn:hover { text-decoration: none; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-productIndexList .visWrap { margin-top: calc(70 * var(--rs)); } .md-productIndexList .visWrap .visTtl .ttl { font-size: calc(46 * var(--rs)); } .md-productIndexList .visWrap .searchColWrap { margin-top: calc(30 * var(--rs)); /* padding: calc(44 * var(--rs)) calc(40 * var(--rs)) calc(46 * var(--rs)); */ padding: 0; } .md-productIndexList .visWrap .searchColWrap .ttlLine { padding: calc(44 * var(--rs)) calc(60 * var(--rs)) calc(46 * var(--rs)) calc(40 * var(--rs)); position: relative; cursor: pointer; } .md-productIndexList .visWrap .searchColWrap .ttlLine::after { content: ""; width: calc(34 * var(--rs)); height: calc(18 * var(--rs)); background: url(/special/archive-contents/common/images/icn_arrow_black.svg) no-repeat center center; background-size: 100% auto; position: absolute; top: 50%; right: calc(30 * var(--rs)); transform: translateY(-50%) rotate(0); transition: transform 0.3s ease-out; } .md-productIndexList .visWrap .searchColWrap.js-open .ttlLine::after { transform: translateY(-50%) rotate(180deg); } .md-productIndexList .visWrap .searchColWrap .ttlLine .ttl { font-size: calc(38 * var(--rs)); line-height: 1.6; letter-spacing: 0.03em; } .md-productIndexList .visWrap .searchColWrap .ctsCol { display: none; height: 0; } .md-productIndexList .visWrap .searchColWrap .filterCts { display: block; margin: 0; box-sizing: border-box; padding: 0 calc(40 * var(--rs)); } .md-productIndexList .visWrap .filterCts .filter { margin-top: calc(64 * var(--rs)); padding: 0; } .md-productIndexList .visWrap .filterCts .filter .ttl { padding-left: calc(26 * var(--rs)); font-size: calc(34 * var(--rs)); line-height: 1.6; } .md-productIndexList .visWrap .filterCts .filter .ttl::before { width: calc(13 * var(--rs)); height: calc(13 * var(--rs)); top: calc(22 * var(--rs)); } .md-productIndexList .visWrap .filterCts .filter .ttl .md-icnInfo { display: inline-block; margin-left: 0; position: relative; transform: translateY(0); top: calc(13 * var(--rs)); } .md-productIndexList .visWrap .filterCts .filter .catItemWrap { flex-wrap: wrap; margin: calc(6 * var(--rs)) calc(-7 * var(--rs)) 0; } .md-productIndexList .visWrap .filterCts .filter .catItemWrap li { margin-top: calc(14 * var(--rs)); padding: 0 calc(7 * var(--rs)); } .md-productIndexList .visWrap .filterCts .filter .catItemWrap li .btn { padding: calc(5 * var(--rs)) calc(16 * var(--rs)) calc(6 * var(--rs)); font-size: calc(28 * var(--rs)); } .md-productIndexList .visWrap .filterCts .filter--mount { width: 100%; margin-top: 0; } .md-productIndexList .visWrap .filterCts .filter--mount .catItemWrap { margin-left: 0; margin-right: 0; } .md-productIndexList .visWrap .filterCts .filter--mount .md-select { flex: 1; } .md-productIndexList .visWrap .filterCts .filter--mount .select { padding: calc(5 * var(--rs)) calc(16 * var(--rs)) calc(6 * var(--rs)); font-size: calc(28 * var(--rs)); } .md-productIndexList .visWrap .clearBtn { display: table; margin-left: auto; padding: calc(64 * var(--rs)) calc(40 * var(--rs)) calc(46 * var(--rs)); position: static; } .md-productIndexList .visWrap .clearBtn .btn { padding: calc(4 * var(--rs)) calc(6 * var(--rs)); font-size: calc(28 * var(--rs)); } } .md-productIndexList .secNewItem { margin-top: calc(46 * var(--rs)); } .md-productIndexList .secNewItem .secTtl .ttl { font-size: calc(28 * var(--rs)); line-height: 1.66; } .md-productIndexList .secNewItem .secCtsWrap { display: flex; margin: calc(16 * var(--rs)) calc(-10 * var(--rs)) 0; } .md-productIndexList .secNewItem .secCtsWrap .ctsBnr { width: 50%; box-sizing: border-box; padding: 0 calc(10 * var(--rs)); } .md-productIndexList .secNewItem .secCtsWrap .ctsBnr .bnr { display: block; text-decoration: none; transition: opacity 0.3s linear; } .md-productIndexList .secNewItem .secCtsWrap .ctsBnr .bnr:hover { opacity: 0.7; } .md-productIndexList .secNewItem .secCtsWrap .ctsBnr .bnr img { width: 100%; height: auto; } .md-productIndexList .secNewItem .secCtsWrap .ctsBnr .bnr:hover img { opacity: 1; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-productIndexList .secNewItem { margin-top: calc(80 * var(--rs)); } .md-productIndexList .secNewItem .secTtl .ttl { font-size: calc(42 * var(--rs)); } .md-productIndexList .secNewItem .secCtsWrap { display: block; margin: calc(44 * var(--rs)) calc(-40 * var(--rs)) 0; } .md-productIndexList .secNewItem .secCtsWrap .ctsBnr { width: 100%; padding: 0; } } .md-productIndexList .secLens .lensType { padding-top: calc(78 * var(--rs)); } .md-productIndexList .secLens .lensType .dtlTtlLine { display: flex; align-items: center; } .md-productIndexList .secLens .lensType .dtlTtlLine .ttl { font-size: calc(28 * var(--rs)); line-height: 1.66; } .md-productIndexList .secLens .lensType .dtlTtlLine .comparison { margin-left: auto; } .md-productIndexList .secLens .lensType .dtlTtlLine .comparison .btn { display: flex; align-items: center; justify-content: center; width: calc(160 * var(--rs)); height: calc(36 * var(--rs)); box-sizing: border-box; padding: calc(2 * var(--rs)) calc(6 * var(--rs)); border-radius: calc(3 * var(--rs)); border: 1px solid #c9c9c9; text-decoration: none; color: #000; font-size: calc(14 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.1; letter-spacing: 0.04em; transition: all 0.3s ease-out; } .md-productIndexList .secLens .lensType .dtlTtlLine .comparison .btn:hover { background-color: #000; color: #fff; border-color: #000; } .md-productIndexList .secLens .lensType .itemWrap { display: flex; flex-wrap: wrap; margin: calc(6 * var(--rs)) calc(-7 * var(--rs)) 0; position: relative; } .md-productIndexList .secLens .lensType .itemWrap .item { width: calc(100% / 3); margin-top: calc(16 * var(--rs)); box-sizing: border-box; padding: 0 calc(7 * var(--rs)); } .md-productIndexList .secLens .lensType .itemWrap .item .itemInr { display: flex; align-items: flex-start; flex-direction: column; height: 100%; box-sizing: border-box; padding: calc(25 * var(--rs)) calc(20 * var(--rs)) calc(24 * var(--rs)); background: #fff; text-decoration: none; transition: opacity 0.3s ease-out; } .md-productIndexList .secLens .lensType .itemWrap .item .productLine { width: 100%; height: calc(26 * var(--rs)); background: no-repeat left center; background-size: auto 100%; } .md-productIndexList .secLens .lensType .itemWrap .item .productLine--A { background-image: url(/special/archive-contents/common/images/icn_line_txt_a.png); } .md-productIndexList .secLens .lensType .itemWrap .item .productLine--C { background-image: url(/special/archive-contents/common/images/icn_line_txt_c.png); } .md-productIndexList .secLens .lensType .itemWrap .item .productLine--S { background-image: url(/special/archive-contents/common/images/icn_line_txt_s.png); } .md-productIndexList .secLens .lensType .itemWrap .item .productLine--others { color: #666; font-size: calc(17 * var(--rs)); font-weight: 500; line-height: 1.6; } .md-productIndexList .secLens .lensType .itemWrap .item .itemTtl { box-sizing: border-box; padding-left: calc(30 * var(--rs)); font-size: calc(23 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.43; } .md-productIndexList .secLens .lensType .itemWrap .item--noproductLine .itemTtl { padding-left: 0 !important; } .md-productIndexList .secLens .lensType .itemWrap .item .itemInr:hover .itemTtl { text-decoration: underline; } .md-productIndexList .secLens .lensType .itemWrap .item .mountList { flex: 1; } .md-productIndexList .secLens .lensType .itemWrap .item .mountWrap { display: flex; flex-wrap: wrap; align-items: flex-start; margin: calc(16 * var(--rs)) calc(-4 * var(--rs)) 0 0; } .md-productIndexList .secLens .lensType .itemWrap .item .mountWrap .mount { margin-top: calc(4 * var(--rs)); margin-right: calc(4 * var(--rs)); box-sizing: border-box; padding: 0 calc(2 * var(--rs)); display: flex; align-items: center; justify-content: center; min-height: calc(22 * var(--rs)); box-sizing: border-box; padding: calc(2 * var(--rs)) calc(12 * var(--rs)) calc(3 * var(--rs)); border-radius: calc(25 * var(--rs)); background: #f2f2f2; font-size: calc(11 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.2; } .md-productIndexList .secLens .lensType .itemWrap .item .itemImg { margin-top: calc(10 * var(--rs)); width: 100%; height: calc(220 * var(--rs)); position: relative; overflow: hidden; } .md-productIndexList .secLens .lensType .itemWrap .item .itemImg img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .md-productIndexList .secLens .lensType .itemWrap .item.new .itemImg::before { content: "NEW"; display: flex; align-items: center; justify-content: center; width: calc(42 * var(--rs)); height: calc(20 * var(--rs)); background: #cb0000; color: #fff; font-size: calc(12 * var(--rs)); font-weight: bold; line-height: 1.2; position: absolute; top: calc(20 * var(--rs)); left: calc(6 * var(--rs)); z-index: 2; } .md-productIndexList .positionBtnCol { display: none; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-productIndexList .secLens .lensType { padding-top: calc(130 * var(--rs)); } .md-productIndexList .secLens .lensType .dtlTtlLine .ttl { flex: 1 0 0%; font-size: calc(42 * var(--rs)); } .md-productIndexList .secLens .lensType .dtlTtlLine .comparison .btn { width: calc(240 * var(--rs)); height: calc(50 * var(--rs)); font-size: calc(26 * var(--rs)); } .md-productIndexList .secLens .lensType .itemWrap { display: block; margin: calc(40 * var(--rs)) 0 0; } .md-productIndexList .secLens .lensType .itemWrap .item { width: 100%; margin-top: calc(20 * var(--rs)); padding: 0; } .md-productIndexList .secLens .lensType .itemWrap .item .itemInr { flex-direction: row; padding: calc(20 * var(--rs)) calc(30 * var(--rs)); align-items: center; } .md-productIndexList .secLens .lensType .itemWrap .item .ttlCol { flex: 1; } .md-productIndexList .secLens .lensType .itemWrap .item .productLine { height: calc(32 * var(--rs)); } .md-productIndexList .secLens .lensType .itemWrap .item .itemTtl { padding-left: calc(42 * var(--rs)); font-size: calc(32 * var(--rs)); } .md-productIndexList .secLens .lensType .itemWrap .item.item--noproductLine .itemTtl { padding-left: 0; } .md-productIndexList .secLens .lensType .itemWrap .item.new .ttlCol::after { content: "NEW"; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; background: var(--color-red); color: #fff; margin-left: calc(42 * var(--rs)); font-size: calc(22 * var(--rs)); font-weight: bold; margin-top: calc(15 * var(--rs)); padding: calc(4 * var(--rs)) calc(15 * var(--rs)) calc(6 * var(--rs)); } .md-productIndexList .secLens .lensType .itemWrap .item .itemImg { height: auto; width: auto; } .md-productIndexList .secLens .lensType .itemWrap .item .itemImg img { height: calc(140 * var(--rs)); width: auto; } .md-productIndexList .secLens .lensType .itemWrap .item .mountList { display: none; } .md-productIndexList .secLens .lensType .itemWrap .item.new .itemImg::before { content: none; } .md-productIndexList .positionBtnCol { display: block; position: -webkit-sticky; position: sticky; padding: calc(40 * var(--rs)) calc(40 * var(--rs)) calc(20 * var(--rs)); pointer-events: none; width: 100%; box-sizing: border-box; top: 0; bottom: 0; z-index: 10; } .md-productIndexList .positionBtnCol .btnAnker { width: calc(120 * var(--rs)); height: calc(120 * var(--rs)); background: #000; display: flex; align-items: center; justify-content: center; font-size: calc(22 * var(--rs)); color: #fff; font-weight: var(--weight-medium); border-radius: 100%; text-decoration: none; margin-left: auto; pointer-events: all; } .md-productIndexList .positionBtnCol .btnAnker .icn { display: block; padding-top: calc(33 * var(--rs)); position: relative; } .md-productIndexList .positionBtnCol .btnAnker .icn::before { content: ""; display: block; position: absolute; top: 0; left: 50%; width: calc(29 * var(--rs)); height: calc(16 * var(--rs)); margin-left: calc(-15 * var(--rs)); background: url(/special/archive-contents/common/images/icn_btn_sort.svg) no-repeat center / contain; } .md-productIndexList .md-lenscategoryNavi { margin-top: calc(60 * var(--rs)); } } /* -------------------------------------------- ↑↑↑ レンズ一覧 絞り込み ↑↑↑ -------------------------------------------- */ /* ------------------------------------------- ↓↓↓ 比較 ↓↓↓ ------------------------------------------- */ .md-productComparison { margin-top: calc(70 * var(--rs)); overflow: visible; } .md-productComparison .noSelectCol { margin-top: calc(60 * var(--rs)); margin-bottom: calc(100 * var(--rs)); background: #fbfbfb; box-sizing: border-box; padding: 0 calc(40 * var(--rs)) calc(56 * var(--rs)); display: none; } .md-productComparison--blank .noSelectCol { display: block; } .md-productComparison--blank .itemDtlWrap { display: none; } .md-productComparison--blank .specNote { display: none; } .md-productComparison .noSelectCol .img { width: calc(360 * var(--rs)); margin: 0 auto; } .md-productComparison .noSelectCol .img img { width: 100%; height: auto; } .md-productComparison .noSelectCol .txtCol { margin-top: calc(10 * var(--rs)); text-align: center; } .md-productComparison .noSelectCol .txtCol .txt { font-size: calc(22 * var(--rs)); line-height: 2; letter-spacing: 0.03em; } .md-productComparison .noSelectCol .txtCol .sub { margin-top: calc(10 * var(--rs)); font-size: calc(15 * var(--rs)); line-height: 2; letter-spacing: 0.01em; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-productComparison { margin-top: calc(100 * var(--rs)); } .md-productComparison .noSelectCol { padding: 0 calc(40 * var(--rs)) calc(160 * var(--rs)); } .md-productComparison .noSelectCol .img { width: calc(100% * var(--rs)); } .md-productComparison .noSelectCol .txtCol { margin-top: calc(20 * var(--rs)); } .md-productComparison .noSelectCol .txtCol .txt { font-size: calc(40 * var(--rs)); line-height: 1.5; } .md-productComparison .noSelectCol .txtCol .sub { margin-top: calc(30 * var(--rs)); font-size: calc(30 * var(--rs)); line-height: 1.5; letter-spacing: 0.02em; } } .md-productComparison .selectWrap { margin: 0 calc(-30 * var(--rs)); } .md-productComparison .selectWrap .wrapInr { display: flex; } .md-productComparison .compItem { width: calc(100% / 3); box-sizing: border-box; padding: 0 calc(30 * var(--rs)); position: relative; } .md-productComparison .compItem > div { display: flex; flex-direction: column; height: 100%; } .md-productComparison .itemDtlWrap .compItem .tableWrap { display: flex; flex-direction: column; flex: 1; } .md-productComparison .itemDtlWrap .compItem .dtlTable .list { flex: 1; } .md-productComparison .selectWrap .compItem .pt-select { position: relative; } .md-productComparison .selectWrap .compItem .pt-select::after { content: " "; width: calc(11 * var(--rs)); height: calc(6 * var(--rs)); background: url(/special/archive-contents/common/images/icn_arrow_black.svg) no-repeat center center; background-size: 100% auto; position: absolute; top: 50%; right: calc(18 * var(--rs)); transform: translateY(-50%); z-index: 2; pointer-events: none; } .md-productComparison .itemDtlWrap .compItem { padding-bottom: calc(90 * var(--rs)); } .md-productComparison.md-productComparison--blank .selectWrap .compItem:nth-child(even)::before { content: none; } .md-productComparison .selectWrap .compItem:nth-child(even)::before { content: " "; width: 100%; height: calc(134 * var(--rs)); background: #fbfbfb; position: absolute; top: calc(-60 * var(--rs)); left: 0; z-index: 0; } .md-productComparison .itemDtlWrap .compItem:nth-child(even) { background-color: #fbfbfb; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-productComparison .selectWrap { margin: 0 calc(-25 * var(--rs)); } .md-productComparison .compItem { width: 50%; padding: 0 calc(25 * var(--rs)); } .md-productComparison .selectWrap .compItem03, .md-productComparison .itemDtlWrap .compItem03 { display: none; } .md-productComparison .selectWrap .compItem .pt-select { position: relative; } .md-productComparison .selectWrap .compItem .pt-select::before { content: " "; width: calc(110 * var(--rs)); height: calc(100% - (8 * var(--rs))); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 58%); position: absolute; top: calc(4 * var(--rs)); right: calc(4 * var(--rs)); pointer-events: none; } .md-productComparison .selectWrap .compItem .pt-select::after { width: calc(23 * var(--rs)); height: calc(12 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem { padding-bottom: calc(90 * var(--rs)); } .md-productComparison.md-productComparison--blank .selectWrap .compItem:nth-child(even)::before { content: none; } .md-productComparison .selectWrap .compItem:nth-child(even)::before { content: " "; width: 100%; height: calc(230 * var(--rs)); background: #fbfbfb; position: absolute; top: calc(-60 * var(--rs)); left: 0; z-index: 0; } .md-productComparison .itemDtlWrap .compItem:nth-child(even) { background-color: #fbfbfb; } } .md-productComparison .itemDtlWrap { margin-top: calc(30 * var(--rs)); margin-bottom: calc(100 * var(--rs)); } .md-productComparison .itemDtlWrap .wrapInr { display: flex; margin: 0 calc(-30 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .dtlItem .itemInr { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: calc(24 * var(--rs)) calc(20 * var(--rs)) calc(18 * var(--rs)); text-decoration: none; transition: all 0.3s ease-out; } .md-productComparison .itemDtlWrap .compItem .dtlItem a.itemInr:hover { opacity: 0.7; } .md-productComparison .itemDtlWrap .compItem .dtlItem .itemInr:hover img { opacity: 1; } .md-productComparison .itemDtlWrap .compItem .dtlItem .ttlCol { flex: 1; } .md-productComparison .itemDtlWrap .compItem .dtlItem .ttlCol .productLine { width: 100%; height: calc(26 * var(--rs)); background: no-repeat left center; background-size: auto 100%; } .md-productComparison .itemDtlWrap .compItem .dtlItem .ttlCol .productLine--A { background-image: url(/special/archive-contents/common/images/icn_line_txt_a.png); } .md-productComparison .itemDtlWrap .compItem .dtlItem .ttlCol .productLine--C { background-image: url(/special/archive-contents/common/images/icn_line_txt_c.png); } .md-productComparison .itemDtlWrap .compItem .dtlItem .ttlCol .productLine--S { background-image: url(/special/archive-contents/common/images/icn_line_txt_s.png); } .md-productComparison .itemDtlWrap .compItem .dtlItem .ttlCol .itemTtl { margin-top: calc(6 * var(--rs)); padding-left: calc(25 * var(--rs)); font-size: calc(21 * var(--rs)); font-weight: 500; line-height: 1.42; } .md-productComparison .itemDtlWrap .compItem .dtlItem.dtlItem--noproductLine .ttlCol .itemTtl { padding-left: 0; } .md-productComparison .itemDtlWrap .compItem .dtlItem .mountWrap { display: flex; flex-wrap: wrap; align-items: flex-start; margin: calc(16 * var(--rs)) calc(4 * var(--rs)) 0 0; } .md-productComparison .itemDtlWrap .compItem .dtlItem .mountWrap .mount { margin-top: calc(4 * var(--rs)); margin-right: calc(4 * var(--rs)); box-sizing: border-box; padding: 0 calc(2 * var(--rs)); display: flex; align-items: center; justify-content: center; min-height: calc(22 * var(--rs)); box-sizing: border-box; padding: calc(2 * var(--rs)) calc(12 * var(--rs)) calc(3 * var(--rs)); border-radius: calc(25 * var(--rs)); background: #f2f2f2; font-size: calc(11 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.2; } .md-productComparison .itemDtlWrap .compItem .dtlItem .itemImg { margin-top: calc(10 * var(--rs)); width: 100%; height: calc(220 * var(--rs)); position: relative; overflow: hidden; } .md-productComparison .itemDtlWrap .compItem .dtlItem .itemImg img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .md-productComparison .itemDtlWrap .compItem .dtlTable { margin-top: calc(4 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .dtlTable .list { box-sizing: border-box; padding: calc(26 * var(--rs)) 0; border-bottom: 1px solid #eaeaea; } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dt { font-size: calc(16 * var(--rs)); font-weight: 500; line-height: 1.75; letter-spacing: 0.01em; } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dd { box-sizing: border-box; padding: calc(8 * var(--rs)) calc(10 * var(--rs)) 0; } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dd .txt { font-size: calc(15 * var(--rs)); line-height: 1.46; letter-spacing: 0.01em; word-break: break-all; } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dd .txt--editionNumber > p, .md-productComparison .itemDtlWrap .compItem .dtlTable .list dd .txt--editionNumber > div { display: inline-block; } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dd .editionNum { display: inline-block; margin-left: calc(23 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dd .txt .priceLineItem:not(:first-child) { margin-top: calc(15 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .noteWrap { margin-top: calc(26 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .note { font-size: calc(13 * var(--rs)); line-height: 2; } .md-productComparison .itemDtlWrap .compItem .cartBtn { margin-top: calc(40 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .cartBtn .btn { display: flex; align-items: center; justify-content: center; width: calc(130 * var(--rs)); height: calc(36 * var(--rs)); box-sizing: border-box; padding: calc(6 * var(--rs)) 0; border-radius: calc(3 * var(--rs)); background: #222; color: #fff; text-decoration: none; cursor: pointer; transition: opacity 0.3s ease-out; } .md-productComparison .itemDtlWrap .compItem .cartBtn .btn:hover { opacity: 0.7; } .md-productComparison .itemDtlWrap .compItem .cartBtn .btn .txt { box-sizing: border-box; padding-left: calc(26 * var(--rs)); font-size: calc(13 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.2; position: relative; } .md-productComparison .itemDtlWrap .compItem .cartBtn .btn .txt::before { content: " "; width: calc(18 * var(--rs)); height: calc(16 * var(--rs)); background: url(/special/archive-contents/common/images/icn_cart.svg) no-repeat center center; background-size: 100% auto; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dd .txt .thecLink { display: inline-block; padding-left: calc(21 * var(--rs)); font-size: calc(13 * var(--rs)); position: relative; cursor: pointer; } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dd .txt .thecLink::before { content: " "; content: ""; display: block; position: absolute; top: calc(3 * var(--rs)); left: 0; width: calc(16 * var(--rs)); height: calc(16 * var(--rs)); background: var(--icn-info-black); } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dd .txt .thecLink:hover { text-decoration: underline; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-productComparison .itemDtlWrap { margin-top: calc(60 * var(--rs)); } .md-productComparison .itemDtlWrap .wrapInr { margin: 0 calc(-25 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .dtlItem .itemInr { padding: calc(20 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .dtlItem .ttlCol .productLine { height: calc(32 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .dtlItem .ttlCol .itemTtl { padding-left: calc(30 * var(--rs)); font-size: calc(24 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .dtlItem.dtlItem--noproductLine .ttlCol .itemTtl { padding-left: 0; } .md-productComparison .itemDtlWrap .compItem .dtlItem .mountWrap { display: none; } .md-productComparison .itemDtlWrap .compItem .dtlItem .itemImg { margin-top: calc(16 * var(--rs)); width: auto; height: auto; text-align: center; } .md-productComparison .itemDtlWrap .compItem .dtlItem .itemImg img { width: auto; height: calc(140 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .dtlTable { margin-top: calc(10 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .dtlTable .list { padding: calc(50 * var(--rs)) 0; } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dt { font-size: calc(30 * var(--rs)); line-height: 1.46; letter-spacing: 0.03em; } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dd { padding: calc(16 * var(--rs)) calc(28 * var(--rs)) 0; } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dd .txt { font-size: calc(26 * var(--rs)); line-height: 1.61; } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dd .txt .priceLineItem:not(:first-child) { margin-top: calc(30 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .noteWrap { margin-top: calc(50 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .note { padding-left: 0; text-indent: 0; font-size: calc(22 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .cartBtn { margin-top: calc(100 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .cartBtn .btn { width: calc(250 * var(--rs)); height: calc(72 * var(--rs)); margin: 0 auto; } .md-productComparison .itemDtlWrap .compItem .cartBtn .btn .txt { padding-left: calc(48 * var(--rs)); font-size: calc(26 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .cartBtn .btn .txt::before { width: calc(33 * var(--rs)); height: calc(28 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dd .txt .thecLink { padding-left: calc(30 * var(--rs)); font-size: calc(26 * var(--rs)); line-height: 1.61; } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dd .txt .thecLink::before { text-indent: 0; top: calc(12 * var(--rs)); width: calc(22 * var(--rs)); height: calc(22 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dd .txt > p { display: block; } .md-productComparison .itemDtlWrap .compItem .dtlTable .list dd .editionNum { display: block; margin-left: 0; } } .md-productComparison .itemDtlWrap .compItem .dtlTable .list sup { font-size: calc(11 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .note .md-infoTxtLink { padding-left: calc(18 * var(--rs)); text-indent: 0; font-size: calc(13 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .note .md-infoTxtLink::before { text-indent: 0; top: calc(5 * var(--rs)); width: calc(14 * var(--rs)); height: calc(14 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-productComparison .itemDtlWrap .compItem .dtlTable .list sup { font-size: calc(22 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .note .md-infoTxtLink { padding-left: calc(30 * var(--rs)); font-size: calc(22 * var(--rs)); } .md-productComparison .itemDtlWrap .compItem .note .md-infoTxtLink::before { top: calc(14 * var(--rs)); width: calc(20 * var(--rs)); height: calc(20 * var(--rs)); } } /* ------------------------------------------- ↑↑↑ 比較 ↑↑↑ ------------------------------------------- */ /* ------------------------------------------- ↓↓↓ シネレンズ比較 ↓↓↓ ------------------------------------------- */ .page-cineLensComparison .md-productComparison .itemDtlWrap .compItem .noteWrap { font-size: calc(16 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; } .page-cineLensComparison .md-productComparison .itemDtlWrap .compItem .noteWrap p { margin-top: calc(10 * var(--rs)); font-size: calc(15 * var(--rs)); font-weight: 400; line-height: 1.48; } .page-cineLensComparison .md-productComparison .specNote.specNote--cine { margin-top: calc(30 * var(--rs)); margin-bottom: calc(100 * var(--rs)); font-size: calc(11 * var(--rs)); line-height: 2; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .page-cineLensComparison .md-productComparison .itemDtlWrap .compItem .noteWrap { font-size: calc(30 * var(--rs)); line-height: 1.46; } .page-cineLensComparison .md-productComparison .itemDtlWrap .compItem .noteWrap p { margin-top: calc(16 * var(--rs)); font-size: calc(26 * var(--rs)); line-height: 1.61; } .page-cineLensComparison .md-productComparison .specNote.specNote--cine { margin-top: calc(50 * var(--rs)); font-size: calc(22 * var(--rs)); } } /* ------------------------------------------- ↑↑↑ シネレンズ比較 ↑↑↑ ------------------------------------------- */ /* ------------------------------------------- ↓↓↓ 製品詳細 ↓↓↓ ------------------------------------------- */ .md-productTtlLine .secTtl .pageTtl { font-size: calc(34 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.4; } .md-productTtlLine .tabLine { display: flex; align-items: center; margin-top: calc(22 * var(--rs)); min-height: calc(36 * var(--rs)); } .md-productTtlLine .tabLine .tabWrap { display: flex; margin-left: calc(-10 * var(--rs)); } .md-productTtlLine .tabLine .tabWrap .tab { box-sizing: border-box; margin: 0 calc(10 * var(--rs)); } .md-productTtlLine .tabLine .tabWrap .tab .tabInr { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 calc(6 * var(--rs)); text-decoration: none; color: #111; font-size: calc(13 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.5; position: relative; } .md-productTtlLine .tabLine .tabWrap .tab .tabInr[target="_blank"] { margin-left: calc(15 * var(--rs)); padding-left: calc(35 * var(--rs)); border-left: 1px solid #c9c9c9; } .md-productTtlLine .tabLine .tabWrap .tab .tabInr[target="_blank"]::after { content: ""; display: inline-block; width: calc(10 * var(--rs)); height: calc(10 * var(--rs)); margin-left: calc(4 * var(--rs)); background: var(--icn-blank-black); vertical-align: middle; transition: background 0.3s linear; } .md-productTtlLine .tabLine .tabWrap .tab .tabInr[target="_blank"]::before { width: calc(100% - calc(29 * var(--rs))); left: auto; right: 0; } .md-productTtlLine .tabLine .tabWrap .tab .tabInr::before { content: " "; width: 100%; height: 2px; background-color: #222; position: absolute; bottom: calc(-6 * var(--rs)); left: 0; opacity: 0; } .md-productTtlLine .tabLine .tabWrap .tab .tabInr:hover::before, .md-productTtlLine .tabLine .tabWrap .tab--current .tabInr::before, .md-productTtlLine .tabLine.tabLine--refineSearch .tabWrap input:checked + .tabInr::before { opacity: 1; } .md-productTtlLine .tabLine .cartBtn { margin-left: auto; } .md-productTtlLine .tabLine .cartBtn .btn { display: flex; align-items: center; justify-content: center; height: calc(36 * var(--rs)); box-sizing: border-box; padding: calc(6 * var(--rs)) calc(10 * var(--rs)); border-radius: calc(3 * var(--rs)); background: #222; color: #fff; text-decoration: none; cursor: pointer; transition: opacity 0.3s ease-out; } .md-productTtlLine .tabLine .cartBtn .btn:hover { opacity: 0.7; } .md-productTtlLine .tabLine .cartBtn .btn .txt { box-sizing: border-box; padding-left: calc(26 * var(--rs)); font-size: calc(13 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.2; position: relative; } .md-productTtlLine .tabLine .cartBtn .btn .txt::before { content: " "; width: calc(18 * var(--rs)); height: calc(16 * var(--rs)); background: url(/special/archive-contents/common/images/icn_cart.svg) no-repeat center / contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .md-productTtlLine .tabLine.tabLine--refineSearch label { display: block; position: relative; cursor: pointer; } .md-productTtlLine .tabLine.tabLine--refineSearch input { width: 0; height: 0; position: absolute; top: 0; left: 0; pointer-events: none; visibility: hidden; } .page-softwareForWinMac .md-productTtlLine .tabLine .tabWrap .tab { padding-bottom: calc(6 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-productTtlLine.md-hdNavMenu { overflow: visible; position: relative; } .md-productTtlLine .secTtl .pageTtl { font-size: calc(50 * var(--rs)); letter-spacing: normal; } .md-productTtlLine .ctsWrap { display: block; padding: 0 calc(45 * var(--rs)); } .md-productTtlLine .tabLine { display: block; margin-top: calc(15 * var(--rs)); overflow-x: scroll; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; position: relative; min-height: auto; } .md-productTtlLine .tabLine::-webkit-scrollbar { display: none; } .md-productTtlLine .tabLine .tabWrap { width: -webkit-max-content; width: -moz-max-content; width: max-content; margin: 0 calc(-7 * var(--rs)); position: relative; } .md-productTtlLine .tabLine .tabWrap .tab { width: auto; box-sizing: border-box; margin: calc(15 * var(--rs)) calc(30 * var(--rs)) 0 0; padding-bottom: calc(6 * var(--rs)); } .md-productTtlLine .tabLine .tabWrap .tab .tabInr { height: calc(54 * var(--rs)); padding: 0 calc(20 * var(--rs)); font-size: calc(28 * var(--rs)); white-space: nowrap; } .md-productTtlLine .tabLine .tabWrap .tab .tabInr[target="_blank"]::after { width: calc(22 * var(--rs)); height: calc(22 * var(--rs)); margin-left: calc(6 * var(--rs)); } .md-productTtlLine .tabLine .js-scrollbar { display: none !important; } .md-productTtlLine .tabLine .cartBtn { display: none; } .md-hdNavMenu { opacity: 0; } .md-productTtlLine .spNavPager { display: flex; align-items: center; justify-content: center; width: calc(85 * var(--rs)); height: calc(85 * var(--rs)); background: #fff; cursor: pointer; position: absolute; bottom: calc(-6 * var(--rs)); opacity: 0; } .md-productTtlLine .spNavPagerL { left: 0; } .md-productTtlLine .spNavPagerR { right: 0; } .md-productTtlLine .spNavPager.js-disabled { pointer-events: none; } .md-productTtlLine .spNavPager .icn { width: calc(38 * var(--rs)); height: calc(38 * var(--rs)); font-size: 0; } .md-productTtlLine .spNavPager .icn::before { content: " "; display: inline-block; width: 100%; height: 100%; background: no-repeat center / contain; } .md-productTtlLine .spNavPagerL .icn::before { background-image: url(/special/archive-contents/common/images/icn_nav_pager_l.svg); } .md-productTtlLine .spNavPagerR .icn::before { background-image: url(/special/archive-contents/common/images/icn_nav_pager_r.svg); } .md-productTtlLine.js-first .spNavPagerL, .md-productTtlLine.js-last .spNavPagerR { display: none; } .md-productTtlLine.js-notSlid .spNavPager.spNavPagerL, .md-productTtlLine.js-notSlid .spNavPager.spNavPagerR { display: none !important; } } .md-productDtlWrap { margin-top: calc(40 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-productDtlWrap { margin-top: calc(70 * var(--rs)); } } .md-fixBtnToList { position: -webkit-sticky; position: sticky; top: 0; bottom: 0; left: 0; z-index: 90; } .md-fixBtnToList .btnList { display: flex; justify-content: flex-end; } .md-fixBtnToList .btnList .btn { margin-left: 1px; } .md-fixBtnToList .btnList .btn a { display: flex; align-items: center; justify-content: center; width: calc(218 * var(--rs)); height: calc(50 * var(--rs)); background: #000; text-decoration: none; color: #fff; font-size: calc(14 * var(--rs)); font-weight: var(--weight-medium); transition: opacity 0.3s linear; } .md-fixBtnToList .btnList .btn a:hover { opacity: 0.7; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-fixBtnToList { padding: 0; } .md-fixBtnToList .btnList .btn { margin-left: 0; width: 50%; box-sizing: border-box; background: #fff; } .md-fixBtnToList .btnList .btn:first-child { padding-right: 0.5px; } .md-fixBtnToList .btnList .btn:last-child { padding-left: 0.5px; } .md-fixBtnToList .btnList .btn a { width: 100%; height: calc(100 * var(--rs)); font-size: calc(28 * var(--rs)); } } .md-productDetailKV { margin-top: calc(20 * var(--rs)); } .md-productDetailKV .slide { position: relative; } .md-productDetailKV .slide .mask { height: calc(600 * var(--rs)); } .md-productDetailKV .slide .mask .slider { height: 100%; width: 500vw; } .md-productDetailKV .item { height: 100%; position: relative; overflow: hidden; } .md-productDetailKV .item .itemInr { display: block; width: calc(1920 * var(--rs)); position: absolute; top: 0; left: 50%; transform: translateX(-50%); text-decoration: none; } .md-productDetailKV .item .img { display: block; } .md-productDetailKV .item .img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .md-productDetailKV .item .itemInr:hover img { opacity: 1; } .md-productDetailKV .pager { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; position: absolute; left: 0; bottom: calc(22 * var(--rs)); pointer-events: none; } .md-productDetailKV .pager .pagerItem { width: calc(12 * var(--rs)); height: calc(12 * var(--rs)); border-radius: 100%; margin: 0 calc(5 * var(--rs)); box-sizing: border-box; background: #e0e0e0; pointer-events: all; cursor: pointer; } .md-productDetailKV .pager .pagerItem.js-stay { border: none; border: 1px solid #fffafa; background: #000; cursor: default; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-productDetailKV { margin-top: calc(30 * var(--rs)); } .md-productDetailKV .slide { position: relative; } .md-productDetailKV .slide .mask { height: calc(770 * var(--rs)); } .md-productDetailKV .item .itemInr { width: 100%; left: 0; transform: none; text-decoration: none; } .md-productDetailKV .pager { padding: 0; bottom: calc(40 * var(--rs)); } .md-productDetailKV._is-pagerBottom .pager { bottom: calc(-40 * var(--rs)); } .md-productDetailKV .pager .pagerItem { width: calc(20 * var(--rs)); height: calc(20 * var(--rs)); margin: 0 calc(12 * var(--rs)); } } .md-secSummary { padding-bottom: calc(100 * var(--rs)); } .md-secSummary h2 { font-size: calc(34 * var(--rs)); line-height: 1.47; } .md-secSummary .entBody h3 { margin-top: calc(36 * var(--rs)); font-size: calc(24 * var(--rs)); line-height: 1.66; letter-spacing: 0.03em; } .md-secSummary .entBody h4 { margin-top: calc(58 * var(--rs)); text-align: left; font-size: calc(20 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; } .md-secSummary .entBody .entTxt .note { margin-top: calc(20 * var(--rs)); font-size: calc(13 * var(--rs)); line-height: 1.6; } .md-secSummary .entBody .entTxt .note p { font-size: calc(13 * var(--rs)); line-height: 1.6; } .md-secSummary .entBody p { margin-top: calc(40 * var(--rs)); text-align: left; font-size: calc(16 * var(--rs)); line-height: 2; } .md-secSummary .entBody p strong { font-weight: var(--weight-medium); } .md-secSummary .entBody h4 + p { margin-top: calc(10 * var(--rs)); } .md-secSummary .note { margin-top: calc(44 * var(--rs)); } .md-secSummary span.note { margin-top: 0; } .md-secSummary .note p { font-size: calc(13 * var(--rs)); } .md-secSummary .btnWrap { margin-top: calc(36 * var(--rs)); } .md-secSummary .btnWrap .ancBtn { display: table; } .md-secSummary .btnWrap .ancBtn .btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: calc(6 * var(--rs)) calc(20 * var(--rs)); background: #000; text-decoration: none; color: #fff; font-size: calc(14 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; transition: opacity 0.3s linear; position: relative; } .md-secSummary .btnWrap .ancBtn .btn:hover { opacity: 0.7; text-decoration: underline; } .md-secSummary .btnWrap .ancBtn .btn[target="_blank"]::after { content: ""; display: inline-block; width: calc(9 * var(--rs)); height: calc(9 * var(--rs)); margin-left: calc(10 * var(--rs)); background: var(--icn-blank-white); vertical-align: middle; } .md-secSummary--noImg { margin-top: calc(80 * var(--rs)); } .md-secSummary--noImg .summaryCts { max-width: 990px; margin: 0 auto; } .md-secSummary--noImg .summaryCts .entBody { text-align: center; } .md-secSummary--hasImg { margin-top: calc(100 * var(--rs)); min-height: calc(830 * var(--rs)); } .md-secSummary--hasImg .summaryCts { position: relative; overflow: visible; } .md-secSummary--hasImg .entBody, .md-secSummary--hasImg .note { width: calc(608 * var(--rs)); } /* .md-secSummary--hasImg .entBody p { line-height: 2.625; } */ .md-secSummary--hasImg .slideCol { position: absolute; top: 0; left: 50%; box-sizing: border-box; padding-left: calc(115 * var(--rs)); width: 50%; max-width: calc(calc(845 + 115) * var(--rs)); } .md-secSummary--hasImg .slide { position: relative; } .md-secSummary--hasImg .slide .item .itemInr { position: relative; overflow: hidden; width: 100%; padding-bottom: calc(650 / 845 * 100%); } .md-secSummary--hasImg .slide .item img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transform: translate(-50%, -50%); } .md-secSummary--hasImg .slide .item .itemCap { display: none; } .md-secSummary--hasImg .slide .itemCap { font-size: calc(14 * var(--rs)); line-height: 1.4; padding-top: calc(15 * var(--rs)); } .md-secSummary--hasImg .slide .pager { position: absolute; box-sizing: border-box; width: 100%; left: 0; display: flex; justify-content: center; z-index: 3; margin-top: calc(-30 * var(--rs)); pointer-events: none; } .md-secSummary--hasImg .slide .pager .pagerItem { width: calc(12 * var(--rs)); height: calc(12 * var(--rs)); border-radius: 100%; margin: 0 calc(5 * var(--rs)); box-sizing: border-box; background: #e0e0e0; pointer-events: all; cursor: pointer; } .md-secSummary--hasImg .slide .pager .pagerItem.js-stay { border: none; border: 1px solid #fffafa; background: #000; cursor: default; pointer-events: all; } .md-secSummary--hasImg .slide .item .imgNote { margin-top: calc(13 * var(--rs)); font-size: calc(14 * var(--rs)); line-height: 1.4; letter-spacing: 0.01em; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-secSummary { padding-bottom: calc(126 * var(--rs)); } .md-secSummary h2 { font-size: calc(55 * var(--rs)); line-height: 1.47; } .md-secSummary .entBody h3 { margin-top: calc(70 * var(--rs)); font-size: calc(40 * var(--rs)); line-height: 1.5; } .md-secSummary .entBody h4 { margin-top: calc(70 * var(--rs)); font-size: calc(40 * var(--rs)); line-height: 1.5; } .md-secSummary .entBody .entTxt .note { margin-top: calc(30 * var(--rs)); } .md-secSummary .entBody .entTxt .note p { font-size: calc(28 * var(--rs)); } .md-secSummary .entBody p { margin-top: calc(72 * var(--rs)); font-size: calc(32 * var(--rs)); } .md-secSummary .note { margin-top: calc(44 * var(--rs)); } .md-secSummary span.note { margin-top: 0; } .md-secSummary .note p { font-size: calc(28 * var(--rs)); } .md-secSummary .btnWrap { margin-top: calc(100 * var(--rs)); } .md-secSummary .btnWrap .ancBtn { display: flex; align-items: center; justify-content: center; width: calc(326 * var(--rs)); height: calc(90 * var(--rs)); margin: 0 auto; } .md-secSummary .btnWrap .ancBtn .btn { padding: 0; font-size: calc(26 * var(--rs)); font-weight: var(--weight-medium); width: 100%; height: 100%; } .md-secSummary .btnWrap .ancBtn .btn[target="_blank"]::after { width: calc(16 * var(--rs)); height: calc(16 * var(--rs)); margin-left: calc(6 * var(--rs)); } .md-secSummary--noImg { margin-top: calc(116 * var(--rs)); } .md-secSummary--noImg .summaryCts .entBody { text-align: left; } .md-secSummary--hasImg { margin-top: calc(116 * var(--rs)); min-height: auto; } .md-secSummary--hasImg .summaryCts { position: relative; } .md-secSummary--hasImg .entBody, .md-secSummary--hasImg .note { width: auto; } .md-secSummary--hasImg .entBody p { line-height: 2; } .md-secSummary--hasImg .slideCol { position: static; padding-left: 0; width: auto; max-width: none; margin-top: calc(100 * var(--rs)); } .md-secSummary--hasImg .slide { position: relative; } .md-secSummary--hasImg .slide .item .itemInr { padding-bottom: calc(650 / 845 * 100%); } .md-secSummary--hasImg .slide .itemCap { font-size: calc(26 * var(--rs)); padding-top: calc(40 * var(--rs)); } .md-secSummary--hasImg .slide .pager { margin-top: calc(-40 * var(--rs)); } .md-secSummary--hasImg .slide .pager .pagerItem { width: calc(20 * var(--rs)); height: calc(20 * var(--rs)); margin: 0 calc(12 * var(--rs)); } .md-secSummary--hasImg .btnWrap { margin-top: calc(78 * var(--rs)); } .md-secSummary--hasImg .slide .item .imgNote { margin-top: calc(40 * var(--rs)); font-size: calc(26 * var(--rs)); } } .md-secSpecSummary { background: var(--bg-color); padding-top: calc(65 * var(--rs)); padding-bottom: calc(65 * var(--rs)); } .md-secSpecSummary .floatCol { display: flex; } .md-secSpecSummary .img { box-sizing: border-box; width: calc(475 * var(--rs)); padding-right: calc(25 * var(--rs)); } .md-secSpecSummary .img img { width: 100%; } .md-secSpecSummary .dtlCol { flex: 1; } .md-secSpecSummary .name { font-size: calc(30 * var(--rs)); font-weight: var(--weight-medium); } .md-secSpecSummary .specList { margin-top: calc(23 * var(--rs)); display: flex; flex-wrap: wrap; } .md-secSpecSummary .specList .spec { width: 25%; box-sizing: border-box; border-left: 1px solid #b5b5b5; padding: calc(13 * var(--rs)) calc(25 * var(--rs)) 0; text-align: center; margin-top: calc(28 * var(--rs)); display: flex; flex-direction: column; text-align: left; } .md-secSpecSummary .specList .spec:nth-child(4), .md-secSpecSummary .specList .spec:last-child { border-right: 1px solid #b5b5b5; } .md-secSpecSummary .specList .spec .ttl { font-size: calc(13 * var(--rs)); padding-bottom: calc(10 * var(--rs)); } .md-secSpecSummary .specList .spec .dtl { display: flex; flex-direction: column; min-height: calc(65 * var(--rs)); align-items: flex-start; justify-content: center; font-size: calc(17 * var(--rs)); font-weight: var(--weight-medium); } .md-secSpecSummary .specList .spec .dtl .icn { padding-right: calc(4 * var(--rs)); } .md-secSpecSummary .specList .spec .dtl .num { font-size: calc(27 * var(--rs)); } .md-secSpecSummary .specList .spec .dtl .unit { font-size: calc(14 * var(--rs)); padding-left: calc(3 * var(--rs)); padding-right: calc(3 * var(--rs)); } .md-secSpecSummary .specList .spec .dtl .icnPlus { margin-top: calc(3 * var(--rs)); padding-top: calc(12 * var(--rs)); position: relative; } .md-secSpecSummary .specList .spec .dtl .icnPlus::before { content: "×"; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: calc(12 * var(--rs)); } .md-secSpecSummary .catLists { display: block; margin-right: calc(-32 * var(--rs)); margin-top: calc(15 * var(--rs)); } .md-secSpecSummary .catLists .catCell { margin-right: calc(32 * var(--rs)); display: flex; padding: calc(20 * var(--rs)) 0; } .md-secSpecSummary .catLists .catCell + .catCell { border-top: 1px solid #b5b5b5; } .md-secSpecSummary .catLists .catCell .ttl { font-size: calc(13 * var(--rs)); width: calc(200 * var(--rs)); line-height: 1.5; } .md-secSpecSummary .catLists .catCell .list { flex: 1; } .md-secSpecSummary .catLists .catCell .list li { display: inline; color: #111; font-size: calc(14 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.5; } .md-secSpecSummary .catLists .catCell .list li + li::before { content: ", "; } .md-secSpecSummary .priceLine { display: flex; align-items: center; justify-content: space-between; margin-top: calc(12 * var(--rs)); } .md-secSpecSummary .priceLine .priceCol { order: 1; } .md-secSpecSummary .priceLine .priceCol .price { font-weight: var(--weight-medium); display: flex; align-items: center; justify-content: flex-end; font-size: calc(13 * var(--rs)); } .md-secSpecSummary .priceLine .priceCol .price .ttl { position: relative; top: calc(2 * var(--rs)); } .md-secSpecSummary .priceLine .priceCol .price .num { font-size: calc(22 * var(--rs)); margin-left: calc(10 * var(--rs)); } .md-secSpecSummary .priceLine .priceCol .price .openprice { padding-left: calc(10 * var(--rs)); position: relative; top: calc(2 * var(--rs)); } .md-secSpecSummary .priceLine .specNote { font-size: calc(13 * var(--rs)); } .md-secSpecSummary .ancBtn { margin-top: calc(35 * var(--rs)); display: table; } .md-secSpecSummary .ancBtn .btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: calc(6 * var(--rs)) calc(20 * var(--rs)); background: #000; text-decoration: none; color: #fff; font-size: calc(14 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; transition: opacity 0.3s linear; position: relative; } .md-secSpecSummary .ancBtn .btn:hover { opacity: 0.7; text-decoration: underline; } .md-secSpecSummary .ancBtn .btn::after { content: ""; display: inline-block; width: calc(9 * var(--rs)); height: calc(9 * var(--rs)); margin-left: calc(10 * var(--rs)); background: var(--icn-blank-white); vertical-align: middle; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-secSpecSummary { padding-top: calc(90 * var(--rs)); padding-bottom: calc(128 * var(--rs)); } .md-secSpecSummary .cm-ctsWidth { padding-left: calc(30 * var(--rs)); padding-right: calc(30 * var(--rs)); box-sizing: border-box; } .md-secSpecSummary .floatCol { display: block; } .md-secSpecSummary .img { width: auto; padding-right: 0; margin-top: calc(40 * var(--rs)); } .md-secSpecSummary .img img { width: 100%; } .md-secSpecSummary .name { font-size: calc(50 * var(--rs)); } .md-secSpecSummary .specList { margin: calc(15 * var(--rs)) calc(-15 * var(--rs)) 0; } .md-secSpecSummary .specList .spec { padding: calc(13 * var(--rs)) 0 0; width: calc(50% - calc(30 * var(--rs))); border-left: none; padding-top: 0; text-align: left; margin: calc(25 * var(--rs)) calc(15 * var(--rs)) 0; padding-bottom: calc(23 * var(--rs)); border-bottom: 1px solid #b5b5b5; display: block; } .md-secSpecSummary .specList .spec:nth-child(4), .md-secSpecSummary .specList .spec:last-child { border-right: none; } .md-secSpecSummary .specList .spec:last-child, .md-secSpecSummary .specList .spec:nth-last-child(2) { border-bottom: none; } .md-secSpecSummary .specList .spec .ttl { font-size: calc(26 * var(--rs)); padding-bottom: calc(12 * var(--rs)); } .md-secSpecSummary .specList .spec .dtl { display: block; flex-direction: column; min-height: auto; font-size: calc(26 * var(--rs)); } .md-secSpecSummary .specList .spec .dtl p { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .md-secSpecSummary .specList .spec .dtl .num { font-size: calc(40 * var(--rs)); /* padding-left: calc(7 * var(--rs)); */ } .md-secSpecSummary .specList .spec .dtl .unit { font-size: calc(26 * var(--rs)); padding-left: calc(6 * var(--rs)); } .md-secSpecSummary .specList .spec .dtl .icnPlus { padding-top: calc(20 * var(--rs)); } .md-secSpecSummary .specList .spec .dtl .icnPlus::before { font-size: calc(26 * var(--rs)); } .md-secSpecSummary .catLists { display: block; margin-right: calc(-16 * var(--rs)); margin-top: calc(50 * var(--rs)); } .md-secSpecSummary .catLists .catCell { margin-right: 0; margin-top: 0; display: block; } .md-secSpecSummary .catLists .catCell .ttl { font-size: calc(26 * var(--rs)); width: 100%; padding-top: 0; } .md-secSpecSummary .catLists .catCell .ttl--spMulch { padding-top: 0; } .md-secSpecSummary .catLists .catCell .list { margin-top: calc(10 * var(--rs)); margin-right: 0; } .md-secSpecSummary .catLists .catCell .list li { font-size: calc(30 * var(--rs)); } .md-secSpecSummary .priceLine { display: block; margin-top: calc(55 * var(--rs)); } .md-secSpecSummary .priceLine .priceCol .price { justify-content: flex-end; font-size: calc(30 * var(--rs)); } .md-secSpecSummary .priceLine .priceCol .price .num { font-size: calc(60 * var(--rs)); margin-left: calc(10 * var(--rs)); } .md-secSpecSummary .priceLine .priceCol { margin-top: calc(60 * var(--rs)); } .md-secSpecSummary .priceLine .specNote { font-size: calc(28 * var(--rs)); margin-top: calc(30 * var(--rs)); line-height: 1.786; } .md-secSpecSummary .buyBtn { margin-top: calc(80 * var(--rs)); } .md-secSpecSummary .buyBtn .btn { display: flex; align-items: center; justify-content: center; width: -webkit-max-content; width: -moz-max-content; width: max-content; min-width: calc(326 * var(--rs)); height: calc(90 * var(--rs)); background: #222; border-radius: calc(2 * var(--rs)); color: #fff; margin: 0 auto; font-size: calc(26 * var(--rs)); font-weight: var(--weight-medium); text-decoration: none; transition: opacity 0.3s linear; cursor: pointer; } .md-secSpecSummary .buyBtn .btn:hover { opacity: 0.7; } .md-secSpecSummary .buyBtn .btn .icn { position: relative; padding-left: calc(48 * var(--rs)); } .md-secSpecSummary .buyBtn .btn .icn::before { content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 0; background: var(--icn-cart); width: calc(33 * var(--rs)); height: calc(28 * var(--rs)); } .md-secSpecSummary .ancBtn { margin: calc(90 * var(--rs)) auto 0; } .md-secSpecSummary .ancBtn .btn { padding: calc(26 * var(--rs)) calc(60 * var(--rs)); font-size: calc(26 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; transition: opacity 0.3s linear; position: relative; } .md-secSpecSummary .ancBtn .btn:hover { opacity: 0.7; } .md-secSpecSummary .ancBtn .btn::after { content: ""; display: inline-block; width: calc(16 * var(--rs)); height: calc(16 * var(--rs)); margin-left: calc(10 * var(--rs)); background: var(--icn-blank-white); vertical-align: middle; } } .md-secFeatureList { overflow: visible; box-sizing: border-box; padding-top: calc(82 * var(--rs)); padding-bottom: calc(104 * var(--rs)); background-color: #000; } .md-secFeatureList .secTtl { font-size: calc(28 * var(--rs)); line-height: 1.66; color: #fff; } .md-secFeatureList .secCts { margin-top: calc(40 * var(--rs)); } .md-secFeatureList .itemWrap { display: flex; flex-wrap: wrap; justify-content: center; } .md-secFeatureList .itemWrap .item { box-sizing: border-box; } .md-secFeatureList .itemWrap .item .itemInr { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; box-sizing: border-box; padding: calc(28 * var(--rs)) calc(28 * var(--rs)) calc(45 * var(--rs)) calc(28 * var(--rs)); background: #fff; text-decoration: none; min-height: calc(340 * var(--rs)); position: relative; } .md-secFeatureList .itemWrap .item .itemInr:hover { text-decoration: underline; } .md-secFeatureList .itemWrap .item .txtCol { flex: 1 0 0%; text-align: left; padding-top: calc(85 * var(--rs)); position: relative; display: flex; width: 100%; } .md-secFeatureList .itemWrap .item .txtCol::before { position: absolute; display: block; top: 0; left: 0; font-size: calc(54 * var(--rs)); font-weight: var(--weight-medium); color: #000; line-height: 1; padding-bottom: calc(7 * var(--rs)); border-bottom: 1px solid #000; } .md-secFeatureList .itemWrap .item:nth-child(1) .txtCol::before { content: "01"; } .md-secFeatureList .itemWrap .item:nth-child(2) .txtCol::before { content: "02"; } .md-secFeatureList .itemWrap .item:nth-child(3) .txtCol::before { content: "03"; } .md-secFeatureList .itemWrap .item:nth-child(4) .txtCol::before { content: "04"; } .md-secFeatureList .itemWrap .item:nth-child(5) .txtCol::before { content: "05"; } .md-secFeatureList .itemWrap .item:nth-child(6) .txtCol::before { content: "06"; } .md-secFeatureList .itemWrap .item:nth-child(7) .txtCol::before { content: "07"; } .md-secFeatureList .itemWrap .item:nth-child(8) .txtCol::before { content: "08"; } .md-secFeatureList .itemWrap .item:nth-child(9) .txtCol::before { content: "09"; } .md-secFeatureList .itemWrap .item:nth-child(10) .txtCol::before { content: "10"; } .md-secFeatureList .itemWrap .item:nth-child(11) .txtCol::before { content: "11"; } .md-secFeatureList .itemWrap .item:nth-child(12) .txtCol::before { content: "12"; } .md-secFeatureList .itemWrap .item:nth-child(13) .txtCol::before { content: "13"; } .md-secFeatureList .itemWrap .item:nth-child(14) .txtCol::before { content: "14"; } .md-secFeatureList .itemWrap .item .txtCol .txt { font-size: calc(20 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; letter-spacing: 0.03em; } .md-secFeatureList .itemWrap .item .dtlBtn { position: absolute; bottom: calc(20 * var(--rs)); left: calc(28 * var(--rs)); } .md-secFeatureList .itemWrap .item .dtlBtn .btn { display: flex; align-items: center; justify-content: center; margin: 0 auto; box-sizing: border-box; color: #000; font-size: calc(14 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.4; letter-spacing: 0.04em; white-space: nowrap; } .md-secFeatureList .itemWrap .item .itemInr:hover .dtlBtn .btn { text-decoration: underline; } /* PC -------------------------------------*/ @media screen and (min-width: 769px) { .md-secFeatureList .itemWrap--child1 .item { width: 50%; padding: 0 calc(20 * var(--rs)); } .md-secFeatureList .itemWrap--child1 { margin: 0 calc(-20 * var(--rs)); } .md-secFeatureList .itemWrap--child2 { margin: 0 calc(-20 * var(--rs)); } .md-secFeatureList .itemWrap--child2 .item { width: 50%; padding: 0 calc(20 * var(--rs)); } .md-secFeatureList .itemWrap--child3 { margin: 0 calc(-18 * var(--rs)); } .md-secFeatureList .itemWrap--child3 .item { width: 33.333333%; padding: 0 calc(18 * var(--rs)); } .md-secFeatureList .itemWrap--child4 { margin: 0 calc(-15 * var(--rs)); } .md-secFeatureList .itemWrap--child4 .item { width: 25%; padding: 0 calc(15 * var(--rs)); } .md-secFeatureList .itemWrap--child5, .md-secFeatureList .itemWrap--child6 { margin: 0 calc(-20 * var(--rs)); } .md-secFeatureList .itemWrap--child5 .item, .md-secFeatureList .itemWrap--child6 .item { width: 33.333333%; padding: 0 calc(20 * var(--rs)); } .md-secFeatureList .itemWrap--child5 .item:nth-child(n+4), .md-secFeatureList .itemWrap--child6 .item:nth-child(n+4) { margin-top: calc(34 * var(--rs)); } .md-secFeatureList .itemWrap--childMore, .md-secFeatureList .itemWrap--child7 { display: block; } .md-secFeatureList .itemWrap--childMore .item, .md-secFeatureList .itemWrap--child7 .item { display: flex; margin-top: calc(17 * var(--rs)); } .md-secFeatureList .itemWrap--childMore .item .itemInr, .md-secFeatureList .itemWrap--child7 .item .itemInr { flex-direction: initial; align-items: center; justify-content: flex-start; width: 100%; height: auto; min-height: 0; padding: calc(22 * var(--rs)) calc(30 * var(--rs)); } .md-secFeatureList .itemWrap--childMore .item .txtCol, .md-secFeatureList .itemWrap--child7 .item .txtCol { box-sizing: border-box; padding: 0 calc(120 * var(--rs)) 0 calc(52 * var(--rs)); text-align: left; } .md-secFeatureList .itemWrap--childMore .item .txtCol::before, .md-secFeatureList .itemWrap--child7 .item .txtCol::before { top: 50%; left: 0; transform: translateY(-50%); margin-top: 0; font-size: calc(27 * var(--rs)); } .md-secFeatureList .itemWrap--childMore .item .dtlBtn, .md-secFeatureList .itemWrap--child7 .item .dtlBtn { margin-top: 0; left: auto; right: calc(30 * var(--rs)); bottom: auto; } } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-secFeatureList { padding-top: calc(115 * var(--rs)); padding-bottom: calc(125 * var(--rs)); background-color: transparent; } .md-secFeatureList .secTtl { color: #000; font-size: calc(48 * var(--rs)); } .md-secFeatureList .secCts { margin-top: calc(0 * var(--rs)); } .md-secFeatureList .itemWrap .item { width: 100%; margin-top: calc(55 * var(--rs)); } .md-secFeatureList .itemWrap .item .itemInr { flex-direction: row; justify-content: flex-start; height: auto; box-shadow: none; padding: 0; min-height: 0; text-decoration: none; } .md-secFeatureList .itemWrap .item .txtCol { display: flex; text-align: left; padding-top: 0; padding-left: calc(76 * var(--rs)); } .md-secFeatureList .itemWrap .item .txtCol::before { font-size: calc(48 * var(--rs)); padding-bottom: calc(10 * var(--rs)); display: block; top: calc(4 * var(--rs)); left: 0; transform: translateX(0); } .md-secFeatureList .itemWrap .item .txtCol .txt { font-size: calc(32 * var(--rs)); } .md-secFeatureList .itemWrap .item .itemInr:hover .txtCol .txt { text-decoration: none; } .md-secFeatureList .itemWrap .item .dtlBtn { display: none; } .md-secFeatureList .itemWrap .item .dtlBtn .btn { width: calc(320 * var(--rs)); height: calc(68 * var(--rs)); padding: 0; font-size: calc(28 * var(--rs)); letter-spacing: normal; } } .md-secProductReview { padding-top: calc(45 * var(--rs)); padding-bottom: calc(92 * var(--rs)); background: var(--bg-color); } .md-secProductReview .secTtl { font-size: calc(20 * var(--rs)); font-weight: var(--weight-medium); } .md-secProductReview .reviewList { margin-top: calc(25 * var(--rs)); } .md-secProductReview .reviewList .item { margin-top: calc(8 * var(--rs)); background: #fff; padding: calc(20 * var(--rs)); line-height: 1.5; } .md-secProductReview .reviewList .item .itemInr { display: flex; align-items: center; } .md-secProductReview .reviewList .item .shopCol { width: calc(325 * var(--rs)); } .md-secProductReview .reviewList .item .shopCol .name { font-size: calc(20 * var(--rs)); font-weight: var(--weight-medium); } .md-secProductReview .reviewList .item .shopCol .dsc { color: #5a5a5a; font-size: calc(13 * var(--rs)); margin-top: calc(8 * var(--rs)); } .md-secProductReview .reviewList .item .linkCol { flex: 1; font-size: calc(14 * var(--rs)); } .md-secProductReview .reviewList .item .linkCol .list li:not(:first-child) { margin-top: calc(15 * var(--rs)); } .md-secProductReview .reviewList .item .linkCol .list li a { display: inline-block; text-decoration: none; } .md-secProductReview .reviewList .item .linkCol .list li a:hover { text-decoration: underline; } .md-secProductReview .reviewList .item .linkCol .list li a[target="_blank"]::after { content: ""; display: inline-block; width: calc(10 * var(--rs)); height: calc(10 * var(--rs)); background: var(--icn-blank-black); margin-left: calc(4 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-secProductReview { padding-bottom: calc(120 * var(--rs)); } .md-secProductReview .cm-ctsWidth { box-sizing: border-box; padding-left: calc(30 * var(--rs)); padding-right: calc(30 * var(--rs)); } .md-secProductReview .secTtl { font-size: calc(46 * var(--rs)); } .md-secProductReview .reviewList { margin-top: calc(40 * var(--rs)); } .md-secProductReview .reviewList .item { margin-top: 0; padding: calc(45 * var(--rs)) calc(40 * var(--rs)) calc(80 * var(--rs)); } .md-secProductReview .reviewList .item:not(:first-child) { margin-top: calc(20 * var(--rs)); } .md-secProductReview .reviewList .item .itemInr { display: block; } .md-secProductReview .reviewList .item .shopCol { width: auto; } .md-secProductReview .reviewList .item .shopCol .name { font-size: calc(42 * var(--rs)); } .md-secProductReview .reviewList .item .shopCol .dsc { font-size: calc(26 * var(--rs)); margin-top: 0; } .md-secProductReview .reviewList .item .linkCol { font-size: calc(30 * var(--rs)); margin-top: calc(50 * var(--rs)); } .md-secProductReview .reviewList .item .linkCol .list li:not(:first-child) { margin-top: calc(38 * var(--rs)); } .md-secProductReview .reviewList .item .linkCol .list li a[target="_blank"]::after { width: calc(22 * var(--rs)); height: calc(22 * var(--rs)); margin-left: calc(8 * var(--rs)); } } .md-secFeatureDetail { padding-top: calc(100 * var(--rs)); padding-bottom: calc(120 * var(--rs)); } .md-secFeatureDetail .item--mtNone { margin-top: 0 !important; } .md-secFeatureDetail .mainTtl { margin-bottom: calc(50 * var(--rs)); } .md-secFeatureDetail .mainTtl h2 { font-size: calc(36 * var(--rs)); line-height: 1.6; } .md-secFeatureDetail .hasImage { display: flex; } .md-secFeatureDetail .hasImage .secCts { flex: 1; } .md-secFeatureDetail .hasImage .secTtl { font-size: calc(36 * var(--rs)); line-height: 1.8; } .md-secFeatureDetail .hasImage .secLead { margin-top: calc(25 * var(--rs)); font-size: calc(24 * var(--rs)); line-height: 1.8; } .md-secFeatureDetail .hasImage .imgCol { width: calc(570 * var(--rs)); box-sizing: border-box; padding-left: calc(90 * var(--rs)); margin-top: calc(30 * var(--rs)); } .md-secFeatureDetail .hasImage .imgCol .img { width: calc(846 * var(--rs)); } .md-secFeatureDetail .hasImage .imgCol .img img { width: 100%; } .md-secFeatureDetail .hasImage .txtCol { margin-top: calc(40 * var(--rs)); line-height: 2.313; font-size: calc(16 * var(--rs)); } .md-secFeatureDetail .hasImage .txtCol strong { font-weight: var(--weight-medium); } .md-secFeatureDetail .hasImage .txtCol a { text-decoration: underline; } .md-secFeatureDetail .hasImage .txtCol a:hover { text-decoration: none; } .md-secFeatureDetail .hasImage .txtCol *:not(:nth-of-type(1)) { margin-top: calc(40 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-secFeatureDetail { padding-top: calc(130 * var(--rs)); padding-bottom: calc(90 * var(--rs)); } .md-secFeatureDetail .mainTtl { margin-bottom: calc(60 * var(--rs)); } .md-secFeatureDetail .mainTtl h2 { font-size: calc(56 * var(--rs)); } .page-detailFeature--hasImage { padding-top: calc(75 * var(--rs)); padding-bottom: calc(90 * var(--rs)); } .md-secFeatureDetail .hasImage { display: block; } .md-secFeatureDetail .hasImage .secTtl { font-size: calc(55 * var(--rs)); line-height: 1.464; } .md-secFeatureDetail .hasImage .secLead { margin-top: calc(54 * var(--rs)); font-size: calc(44 * var(--rs)); line-height: 1.8; } .md-secFeatureDetail .hasImage .imgCol { width: auto; margin: calc(80 * var(--rs)) calc(-40 * var(--rs)) 0; padding-left: 0; } .md-secFeatureDetail .hasImage .imgCol .img { width: 100%; } .md-secFeatureDetail .hasImage .txtCol { margin-top: calc(50 * var(--rs)); line-height: 2; font-size: calc(32 * var(--rs)); /* order: 4; */ } } .md-secFeatureDetail .noImage { width: calc(990 * var(--rs)); margin: 0 auto; } .md-secFeatureDetail .noImage .secTtl { font-size: calc(36 * var(--rs)); line-height: 1.8; text-align: center; } .md-secFeatureDetail .noImage .subTtl { font-size: calc(24 * var(--rs)); margin-top: calc(5 * var(--rs)); line-height: 1.6; text-align: center; } .md-secFeatureDetail .noImage .leadTxt { font-size: calc(24 * var(--rs)); line-height: 1.87; margin-top: calc(28 * var(--rs)); text-align: center; } .md-secFeatureDetail .noImage .leadTxt .note { margin-top: calc(28 * var(--rs)); font-size: calc(13 * var(--rs)); line-height: 1.5; } .md-secFeatureDetail .noImage .txtCol { width: calc(990 * var(--rs)); margin: calc(40 * var(--rs)) auto 0; text-align: center; font-size: calc(16 * var(--rs)); line-height: 2.313; } .md-secFeatureDetail .noImage .txtCol img { max-width: 100%; height: auto; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-secFeatureDetail .noImage { width: 100%; } .md-secFeatureDetail .noImage .secTtl { font-size: calc(55 * var(--rs)); line-height: 1.464; text-align: left; } .md-secFeatureDetail .noImage .subTtl { font-size: calc(36 * var(--rs)); margin-top: calc(5 * var(--rs)); text-align: left; } .md-secFeatureDetail .noImage .leadTxt { font-size: calc(36 * var(--rs)); margin-top: calc(56 * var(--rs)); text-align: left; } .md-secFeatureDetail .noImage .leadTxt .note { font-size: calc(28 * var(--rs)); } .md-secFeatureDetail .noImage .txtCol { width: auto; margin: calc(50 * var(--rs)) auto 0; text-align: left; font-size: calc(32 * var(--rs)); line-height: 2; } } sup { vertical-align: super; font-size: 0.8em; } .md-secFeatureDetail .secTtl sup { font-size: calc(22 * var(--rs)); } .md-secFeatureDetail .hasImage .leadTxt { font-size: calc(24 * var(--rs)); line-height: 1.87; margin-top: calc(28 * var(--rs)); } .md-secFeatureDetail .txtCol .note { margin-top: calc(40 * var(--rs)); font-size: calc(13 * var(--rs)); line-height: 1.6; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-secFeatureDetail .secTtl sup { font-size: calc(36 * var(--rs)); } .md-secFeatureDetail .hasImage .leadTxt { font-size: calc(36 * var(--rs)); margin-top: calc(56 * var(--rs)); } .md-secFeatureDetail .txtCol .note { margin-top: calc(30 * var(--rs)); font-size: calc(28 * var(--rs)); } } .md-secFeatureDetail .dtlList { display: flex; flex-wrap: wrap; justify-content: center; } .md-secFeatureDetail .dtlList .item { width: 100%; margin-top: calc(70 * var(--rs)); box-sizing: border-box; } .md-secFeatureDetail .dtlList .item .itemTtl { font-size: calc(22 * var(--rs)); line-height: 1.556; font-weight: var(--weight-medium); } .md-secFeatureDetail .dtlList .item .itemTxt { margin-top: calc(20 * var(--rs)); font-size: calc(16 * var(--rs)); line-height: 2; } .md-secFeatureDetail .dtlList .item .itemTxt .note { font-size: calc(13 * var(--rs)); margin-top: calc(30 * var(--rs)); } .md-secFeatureDetail .dtlList .item .pictWrap + .itemTxt { margin: calc(32 * var(--rs)) auto 0; } .md-secFeatureDetail .dtlList .item .img img { width: 100%; } .md-secFeatureDetail .dtlList .item .img + .itemTtlBox { margin-top: calc(20 * var(--rs)); } .md-secFeatureDetail .noImage + .pictWrap, .md-secFeatureDetail .dtlList + .pictWrap, .md-secFeatureDetail .dtlList .item .itemTxt + .pictWrap { margin-top: calc(80 * var(--rs)); } .md-secFeatureDetail .pictWrap img { width: 100%; height: auto; } .md-secFeatureDetail .dtlList .item .itemTxt p:not(:first-child) { margin-top: calc(22 * var(--rs)); } .md-secFeatureDetail .dtlList .item .itemTxt p strong { font-weight: var(--weight-medium); } .md-secFeatureDetail .dtlList .item .itemTxt .iframeWrap { width: 100%; padding-top: 56.25%; position: relative; } .md-secFeatureDetail .dtlList .item .itemTxt img { max-width: 100%; height: auto; } .md-secFeatureDetail .dtlList .item .itemTxt .iframeWrap iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .md-secFeatureDetail .dtlList .item .itemTxt a { text-decoration: underline; } .md-secFeatureDetail .dtlList .item .itemTxt a:hover { text-decoration: none; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-secFeatureDetail .dtlList { margin: 0; display: block; } .md-secFeatureDetail .dtlList .item { width: auto; box-sizing: border-box; padding: 0; margin-top: calc(120 * var(--rs)); } .md-secFeatureDetail .dtlList .item:first-child { margin-top: calc(80 * var(--rs)); } .md-secFeatureDetail .dtlList .item .itemInr { display: flex; flex-direction: column; } .md-secFeatureDetail .dtlList .item .itemTtl { margin-top: calc(50 * var(--rs)); font-size: calc(40 * var(--rs)); line-height: 1.5; } .md-secFeatureDetail .dtlList .item .itemTxt { margin-top: calc(30 * var(--rs)); font-size: calc(32 * var(--rs)); } .md-secFeatureDetail .dtlList .item .itemTxt .note { font-size: calc(28 * var(--rs)); margin-top: calc(30 * var(--rs)); line-height: 2; } .md-secFeatureDetail .dtlList .item--imgFull .img { margin: 0 calc(-40 * var(--rs)); } .md-secFeatureDetail .dtlList .item .pictWrap + .itemTxt { margin-top: calc(50 * var(--rs)); } .md-secFeatureDetail .dtlList .item .itemTxt + .img { margin-top: calc(90 * var(--rs)); } .md-secFeatureDetail .dtlList .item .itemTxt p:not(:first-child) { margin-top: calc(60 * var(--rs)); } .md-secFeatureDetail .dtlList .item .itemTxt a { margin-left: auto; } } .md-secFeatureDetail .dtlList .item .itemTtlBox { display: flex; align-items: center; height: auto; /* margin-bottom: calc(20 * var(--rs)); */ } .md-secFeatureDetail .dtlList .item .itemTtlBox .boxInr { width: 100%; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-secFeatureDetail .dtlList .item .itemTtlBox { height: auto !important; } } /* ----------------------------------- 【01】画像→見出し→副見出し→本文 【02】画像→副見出し→見出し→本文 【03】見出し→副見出し→画像→本文 【04】副見出し→見出し→画像→本文 ----------------------------------- */ /* item--orderType01 == 【01】画像→見出し→副見出し→本文 */ .md-secFeatureDetail .dtlList .item.item--orderType01 .sub { margin-top: calc(10 * var(--rs)); } /* item--orderType02 == 【02】画像→副見出し→見出し→本文 */ .md-secFeatureDetail .dtlList .item.item--orderType02 .itemTtl { margin-top: calc(10 * var(--rs)); } /* item--orderType03 == 【03】見出し→副見出し→画像→本文 */ .md-secFeatureDetail .dtlList .item.item--orderType03 .img { margin-top: calc(20 * var(--rs)); } .md-secFeatureDetail .dtlList .item.item--orderType03 .itemTtl, .md-secFeatureDetail .dtlList .item.item--orderType03 .sub { margin-top: 0; } .md-secFeatureDetail .dtlList .item.item--orderType03 .itemTtl + .sub { margin-top: calc(10 * var(--rs)); } /* item--orderType04 == 【04】副見出し→見出し→画像→本文 */ .md-secFeatureDetail .dtlList .item.item--orderType04 .img { margin-top: calc(20 * var(--rs)); } .md-secFeatureDetail .dtlList .item.item--orderType04 .itemTtl, .md-secFeatureDetail .dtlList .item.item--orderType04 .sub { margin-top: 0; } .md-secFeatureDetail .dtlList .item.item--orderType04 .sub + .itemTtl { margin-top: calc(10 * var(--rs)); } /* コンテンツ 左揃え */ .md-secFeatureDetail .dtlList.dtlList--contLeft { justify-content: flex-start; } .md-secFeatureDetail .dtlList.dtlList--contLeft .item--widL .itemInr, .md-secFeatureDetail .dtlList.dtlList--contLeft .item--widM .itemInr { margin-left: 0; margin-right: 0; } /* セクション：タイトル、テキスト センター */ /* カラム：タイトル、テキスト センター */ .md-secFeatureDetail .dtlList.dtlList--alignCenter, .md-secFeatureDetail .dtlList .item.item--alignCenter { text-align: center; } /* カラム：タイトル、テキスト 左揃え */ .md-secFeatureDetail .dtlList .item.item--alignLeft { text-align: left; } /* item 幅 */ .md-secFeatureDetail .dtlList .item--widL, .md-secFeatureDetail .dtlList .item--widM { width: 100%; } .md-secFeatureDetail .dtlList .item--widL .itemInr { width: 80%; } .md-secFeatureDetail .dtlList .item--widM .itemInr { width: 60%; } .md-secFeatureDetail .dtlList .item--widL .itemInr, .md-secFeatureDetail .dtlList .item--widM .itemInr { margin-left: auto; margin-right: auto; } .md-secFeatureDetail .dtlList .item--wid02 { width: 50%; padding-right: calc(20 * var(--rs)); padding-left: calc(20 * var(--rs)); } .md-secFeatureDetail .dtlList .item--wid03 { width: calc(100% / 3); padding-right: calc(20 * var(--rs)); padding-left: calc(20 * var(--rs)); } .md-secFeatureDetail .dtlList .item--wid04 { width: 25%; padding-right: calc(20 * var(--rs)); padding-left: calc(20 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { /* item 幅 */ .md-secFeatureDetail .dtlList .item--widL .itemInr, .md-secFeatureDetail .dtlList .item--widM .itemInr, .md-secFeatureDetail .dtlList .item--wid02, .md-secFeatureDetail .dtlList .item--wid03, .md-secFeatureDetail .dtlList .item--wid04 { width: 100%; } .md-secFeatureDetail .dtlList .item--wid02, .md-secFeatureDetail .dtlList .item--wid03, .md-secFeatureDetail .dtlList .item--wid04 { padding-right: 0; padding-left: 0; } .md-secFeatureDetail .dtlList.dtlList--alignCenter, .md-secFeatureDetail .dtlList .item.item--alignCenter { text-align: left; } } .md-secFeatureDetail .dtlList .item--partsLink .itemThum .thumInr { display: block; text-decoration: underline; transition: opacity 0.3s linear; } .md-secFeatureDetail .dtlList .item--partsLink .itemThum .thumInr:hover { opacity: 0.7; text-decoration: none; } .md-secFeatureDetail .dtlList .item--partsLink .itemThum .img { width: calc(205 * var(--rs)); height: calc(164 * var(--rs)); margin: 0 auto; overflow: hidden; } .md-secFeatureDetail .dtlList .item--partsLink .itemThum .img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .md-secFeatureDetail .dtlList .item--partsLink .itemThum .itemName { margin-top: calc(10 * var(--rs)); text-align: center; font-size: calc(16 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.6; } .md-secFeatureDetail .dtlList .item--partsLink .itemThum .thumInr:hover .itemName { text-decoration: underline; } .md-secFeatureDetail .dtlList .item--partsLink .dtlTxtCol { word-break: break-all; margin-top: calc(13 * var(--rs)); font-size: calc(15 * var(--rs)); line-height: 2; } .md-secFeatureDetail .dtlList .item--partsLink .dtlTxtCol .note { font-size: calc(13 * var(--rs)); margin-top: calc(30 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-secFeatureDetail .dtlList .item--partsLink .itemThum .thumInr { display: flex; align-items: center; } .md-secFeatureDetail .dtlList .item--partsLink .itemThum .img { order: 1; width: calc(268 * var(--rs)); height: calc(220 * var(--rs)); margin: 0; } .md-secFeatureDetail .dtlList .item--partsLink .itemThum .itemName { flex: 1; text-align: left; font-size: calc(32 * var(--rs)); line-height: 1.5; } .md-secFeatureDetail .dtlList .item--partsLink .dtlTxtCol { margin-top: calc(26 * var(--rs)); font-size: calc(30 * var(--rs)); line-height: 2; } .md-secFeatureDetail .dtlList .item--partsLink .dtlTxtCol .note { font-size: calc(28 * var(--rs)); margin-top: calc(30 * var(--rs)); line-height: 2; } } /* テキストのみ .detail-textOnly */ .md-secFeatureDetail.detail-typeLeft .ttlWrap .secTtl { font-size: calc(28 * var(--rs)); line-height: 1.4; } .md-secFeatureDetail.detail-typeLeft .ttlWrap .leadTxt { margin-top: calc(25 * var(--rs)); font-size: calc(18 * var(--rs)); line-height: 2; } .md-secFeatureDetail.detail-typeLeft .ttlWrap .txtCol { margin: calc(40 * var(--rs)) auto 0; font-size: calc(16 * var(--rs)); line-height: 2.313; } .md-secFeatureDetail.detail-typeLeft .dtlList .item { margin-top: 0; box-sizing: border-box; padding-top: calc(36 * var(--rs)); padding-bottom: calc(36 * var(--rs)); } .md-secFeatureDetail .dtlList .item.item-textOnly:not(:first-child) { border-top: 1px solid #eaeaea; } .md-secFeatureDetail .dtlList .item.item-textOnly:last-child { padding-bottom: 0; } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTtlBox .itemTtl { font-size: calc(20 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTtlBox .sub { font-size: calc(16 * var(--rs)); line-height: 1.8; } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt { margin-top: calc(8 * var(--rs)); } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt p { font-size: calc(16 * var(--rs)); line-height: 1.8; } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt p:not(:first-child) { margin-top: calc(22 * var(--rs)); } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt p a { text-decoration: underline; } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt p a[target="_blank"] { padding-right: calc(20 * var(--rs)); position: relative; } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt p a[target="_blank"]::after { content: " "; display: block; width: calc(10 * var(--rs)); height: calc(10 * var(--rs)); background: var(--icn-blank); position: absolute; top: 50%; right: calc(5 * var(--rs)); margin-top: calc(-5 * var(--rs)); } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt p a:hover { text-decoration: underline; } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt .note { margin-top: calc(30 * var(--rs)); } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt p.note, .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt .note p { font-size: calc(13 * var(--rs)); line-height: 1.6; } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt ul li { box-sizing: border-box; padding-left: 1em; text-indent: -0.5em; } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt ul li::before { content: "・"; display: inline-block; } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt li { font-size: calc(16 * var(--rs)); line-height: 1.8; } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt li:not(:first-child) { margin-top: calc(6 * var(--rs)); } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt strong { font-weight: var(--weight-medium); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-secFeatureDetail.detail-typeLeft .ttlWrap { padding-left: 0; padding-right: 0; } .md-secFeatureDetail.detail-typeLeft .ttlWrap .secTtl { font-size: calc(50 * var(--rs)); line-height: 1.5; } .md-secFeatureDetail.detail-typeLeft .ttlWrap .leadTxt { font-size: calc(32 * var(--rs)); margin-top: calc(60 * var(--rs)); text-align: left; } .md-secFeatureDetail.detail-typeLeft .ttlWrap .txtCol { margin: calc(50 * var(--rs)) auto 0; font-size: calc(32 * var(--rs)); line-height: 2; } .md-secFeatureDetail.detail-typeLeft .dtlList .item { padding-top: calc(72 * var(--rs)); padding-bottom: calc(72 * var(--rs)); } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTtlBox .itemTtl { margin-top: 0; font-size: calc(40 * var(--rs)); line-height: 1.5; } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTtlBox .sub { margin-top: calc(14 * var(--rs)); font-size: calc(36 * var(--rs)); line-height: 1.4; } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt { margin-top: calc(14 * var(--rs)); } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt p { font-size: calc(32 * var(--rs)); line-height: 2; } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt p:not(:first-child) { margin-top: calc(60 * var(--rs)); } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt p a[target="_blank"] { padding-right: 0; } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt p a[target="_blank"]::after { display: inline-block; width: calc(18 * var(--rs)); height: calc(18 * var(--rs)); margin-top: 0; margin-left: calc(6 * var(--rs)); position: static; right: calc(0 * var(--rs)); } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt .note { margin-top: calc(30 * var(--rs)); } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt p.note, .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt .note p { font-size: calc(28 * var(--rs)); line-height: 1.78; } .md-secFeatureDetail .dtlList .item + .item-textOnly { margin-top: calc(30 * var(--rs)); } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt ul { margin-top: calc(20 * var(--rs)); } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt li { font-size: calc(32 * var(--rs)); line-height: 1.78; } .md-secFeatureDetail .dtlList .item.item-textOnly .itemTxt li:not(:first-child) { margin-top: calc(20 * var(--rs)); } } /* ↓↓↓ セクション注釈 ↓↓↓ */ .md-secTotalNoteWrap { margin-top: calc(36 * var(--rs)); } .md-secTotalNoteWrap .noteCol { box-sizing: border-box; padding: calc(24 * var(--rs)) calc(28 * var(--rs)); background: #f7f7f7; } .cm-bg .md-secTotalNoteWrap .noteCol { background: #fff; } .md-secTotalNoteWrap .noteCol p { font-size: calc(11 * var(--rs)); line-height: 1.6; } .md-secTotalNoteWrap .noteCol p:not(:first-child) { margin-top: calc(6 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-secTotalNoteWrap { margin-top: calc(28 * var(--rs)); } .md-secTotalNoteWrap .noteCol { padding: calc(48 * var(--rs)) calc(30 * var(--rs)); } .md-secTotalNoteWrap .noteCol p { font-size: calc(28 * var(--rs)); line-height: 1.78; } .md-secTotalNoteWrap .noteCol p:not(:first-child) { margin-top: calc(14 * var(--rs)); } } /* ↑↑↑ セクション注釈 ↑↑↑ */ .md-secFeatureDetail .dtlList .item .sub { font-size: calc(14 * var(--rs)); font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-secFeatureDetail .dtlList .item .sub { font-size: calc(28 * var(--rs)); line-height: 2; } } /* PC ----------------------------------*/ @media screen and (min-width: 769px) { .md-secFeatureDetail--fitImg .hasImage .imgCol { flex: 1; width: auto; } .md-secFeatureDetail--fitImg .hasImage .imgCol .img { min-height: calc(632 * var(--rs)); position: relative; } .md-secFeatureDetail--fitImg .hasImage .imgCol .img picture { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .md-secFeatureDetail--fitImg .hasImage .secCts { flex: none; width: calc(630 * var(--rs)); } } @media screen and (max-width: 1950px) { .md-secFeatureDetail--fitImg .hasImage .imgCol .img { width: 43.74vw; } .md-secFeatureDetail--fitImg .hasImage .imgCol .img { min-height: 32.41vw; } } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-secFeatureDetail--fitImg .hasImage .imgCol .img { width: auto; } } .md-secTechnologyList { padding-bottom: calc(130 * var(--rs)); } .cm-bg + .md-secTechnologyList { padding-top: calc(130 * var(--rs)); } .md-secTechnologyList .secTtl { font-size: calc(28 * var(--rs)); } .md-secTechnologyList .techMain { margin-top: calc(20 * var(--rs)); } .md-secTechnologyList .techMain .list { margin: 0 calc(-10 * var(--rs)); display: flex; flex-wrap: wrap; } .md-secTechnologyList .techMain .list li { box-sizing: border-box; width: calc(100% / 7); padding: 0 calc(10 * var(--rs)); margin-top: calc(10 * var(--rs)); display: flex; } .md-secTechnologyList .techMain .list li .thecLink { display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: calc(76 * var(--rs)); background: #f2f2f2; position: relative; border-radius: calc(5 * var(--rs)); transition: opacity 0.3s linear; cursor: pointer; padding: calc(10 * var(--rs)); } .md-secTechnologyList .techMain .list li .thecLink::before { content: ""; display: block; position: absolute; top: calc(8 * var(--rs)); left: calc(8 * var(--rs)); width: calc(16 * var(--rs)); height: calc(16 * var(--rs)); background: var(--icn-info-black); } .md-secTechnologyList .techMain .list li .thecLink:hover { opacity: 0.7; } .md-secTechnologyList .techMain .list li .thecLink { font-size: calc(13 * var(--rs)); font-weight: bold; line-height: 1.5; } .md-secTechnologyList .techMain .list li .thecLink .subName { font-size: calc(11 * var(--rs)); line-height: 1.2; margin-top: calc(5 * var(--rs)); } .md-secTechnologyList .techSub { margin-top: calc(27 * var(--rs)); } .md-secTechnologyList .techSub .subTtl { font-size: calc(16 * var(--rs)); font-weight: var(--weight-medium); } .md-secTechnologyList .techSub .listCol .list { display: flex; flex-wrap: wrap; margin-top: calc(5 * var(--rs)); } .md-secTechnologyList .techSub .listCol .list li { width: 33.33333%; box-sizing: border-box; margin-top: calc(15 * var(--rs)); line-height: 1.5; font-size: calc(13 * var(--rs)); padding-left: 1.5em; position: relative; } .md-secTechnologyList .techSub .listCol .list li::before { content: "●"; font-size: 1em; position: absolute; top: 0; left: 0; } .md-secTechnologyList .techSub .listCol .list li .thecLink { display: inline-block; padding-right: calc(21 * var(--rs)); position: relative; cursor: pointer; } .md-secTechnologyList .techSub .listCol .list li .thecLink:hover { text-decoration: underline; } .md-secTechnologyList .techSub .listCol .list li .thecLink::before { content: ""; display: block; position: absolute; top: calc(3 * var(--rs)); left: 0; width: calc(16 * var(--rs)); height: calc(16 * var(--rs)); background: var(--icn-info-black); } .md-secTechnologyList .techSub .listCol .list li .thecLink.notPass { text-decoration: none; } .md-secTechnologyList .techSub .listCol .list li .thecLink.notPass, .md-secTechnologyList .techMain .list li .thecLink.notPass { cursor: auto; } .md-secTechnologyList .techMain .list li .thecLink.notPass::before, .md-secTechnologyList .techSub .listCol .list li .thecLink.notPass::before { content: none; } .md-secTechnologyList .techMain .list li .thecLink.notPass:hover { opacity: 1; } .md-secTechnologyList .techSub .listCol .list li.hasThecLink { padding-left: 0; } .md-secTechnologyList .techSub .listCol .list li.hasThecLink::before { content: none; } .md-secTechnologyList .techSub .listCol .list li.hasThecLink .thecLink { padding-left: 1.5em; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-secTechnologyList { padding-bottom: calc(120 * var(--rs)); } .cm-bg + .md-secTechnologyList { padding-top: calc(120 * var(--rs)); } .md-secTechnologyList .secTtl { font-size: calc(50 * var(--rs)); } .md-secTechnologyList .techMain { margin-top: calc(15 * var(--rs)); } .md-secTechnologyList .techMain .list li { width: 50%; margin-top: calc(20 * var(--rs)); } .md-secTechnologyList .techMain .list li .thecLink { height: calc(164 * var(--rs)); } .md-secTechnologyList .techMain .list li .thecLink::before { top: calc(20 * var(--rs)); left: calc(20 * var(--rs)); width: calc(30 * var(--rs)); height: calc(30 * var(--rs)); } .md-secTechnologyList .techMain .list li .thecLink { font-size: calc(28 * var(--rs)); } .md-secTechnologyList .techMain .list li .thecLink .subName { font-size: calc(26 * var(--rs)); } .md-secTechnologyList .techSub { margin-top: calc(80 * var(--rs)); } .md-secTechnologyList .techSub .subTtl { font-size: calc(36 * var(--rs)); } .md-secTechnologyList .techSub .listCol .list { display: block; margin-top: calc(30 * var(--rs)); } .md-secTechnologyList .techSub .listCol .list li { width: auto; margin-top: 0; line-height: 1.5; font-size: calc(28 * var(--rs)); } .md-secTechnologyList .techSub .listCol .list li:not(:first-child) { margin-top: calc(25 * var(--rs)); } .md-secTechnologyList .techSub .listCol .list li .thecLink { display: inline-block; padding-left: 0; padding-right: 0; position: relative; } .md-secTechnologyList .techSub .listCol .list li .thecLink::before { top: calc(9 * var(--rs)); width: calc(30 * var(--rs)); height: calc(30 * var(--rs)); } } .md-secProductImgSlide { margin-bottom: calc(-50 * var(--rs)); padding-top: calc(50 * var(--rs)); padding-bottom: calc(100 * var(--rs)); background: var(--bg-color); } .md-secProductImgSlide .slide { position: relative; } .md-secProductImgSlide .slide .item .itemInr { width: calc(900 * var(--rs)); height: calc(600 * var(--rs)); margin: 0 auto; overflow: hidden; } .md-secProductImgSlide .slide .item img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .md-secProductImgSlide .slide .next, .md-secProductImgSlide .slide .prev { position: absolute; top: 0; width: calc(150 * var(--rs)); height: 100%; cursor: pointer; background: #000; background: no-repeat center; background-size: calc(24 * var(--rs)) auto; } .md-secProductImgSlide .slide .next { left: calc(50% + calc(450 * var(--rs))); background-image: url(/special/archive-contents/common/images/icn_slide_arrow_right.svg); } .md-secProductImgSlide .slide .prev { right: calc(50% + calc(450 * var(--rs))); background-image: url(/special/archive-contents/common/images/icn_slide_arrow_left.svg); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-secProductImgSlide { padding-top: calc(50 * var(--rs)); padding-bottom: calc(50 * var(--rs)); } .md-secProductImgSlide .slide .item .itemInr { width: calc(610 * var(--rs)); height: calc(406 * var(--rs)); } .md-secProductImgSlide .slide .next, .md-secProductImgSlide .slide .prev { width: calc(170 * var(--rs)); background-size: calc(24 * var(--rs)) auto; } .md-secProductImgSlide .slide .next { left: auto; right: 0; } .md-secProductImgSlide .slide .prev { right: auto; left: 0; } } .page-detailFeature .md-secProductMovie { background: #000; color: #fff; margin-bottom: calc(-50 * var(--rs)); padding-top: calc(68 * var(--rs)); padding-bottom: calc(158 * var(--rs)); } .md-secProductMovie .secTtl { font-size: calc(34 * var(--rs)); line-height: 1.6; text-align: center; font-weight: var(--weight-medium); } .md-secProductMovie .movCol + .secTtl { margin-top: calc(170 * var(--rs)); } .md-secProductMovie .leadTxt { font-size: calc(16 * var(--rs)); line-height: 2.313; margin-top: calc(20 * var(--rs)); text-align: center; } .md-secProductMovie .movCol { margin: calc(53 * var(--rs)) auto 0; width: 100%; max-width: calc(1200 * var(--rs)); padding-bottom: calc(9 / 16 * 100%); position: relative; } .md-secProductMovie .movCol iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .md-secProductMovie .movSlider { margin-top: calc(53 * var(--rs)); } .md-secProductMovie .movSlider .movCol { margin-top: 0; } .md-secProductMovie .movSlider .movCol .iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .md-secProductMovie .movSlider .pager { margin-top: calc(20 * var(--rs)); } .md-secProductMovie .movSlider { position: relative; } .md-secProductMovie .movSlider .next, .md-secProductMovie .movSlider .prev { position: absolute; top: 0; width: calc(80 * var(--rs)); height: 100%; cursor: pointer; background: #000; background: no-repeat center; background-size: calc(24 * var(--rs)) auto; } .md-secProductMovie .movSlider .next { left: calc(50% + calc(510 * var(--rs))); background-image: url(/special/archive-contents/common/images/icn_slide_arrow_right_white.svg); } .md-secProductMovie .movSlider .prev { right: calc(50% + calc(510 * var(--rs))); background-image: url(/special/archive-contents/common/images/icn_slide_arrow_left_white.svg); } .md-secProductMovie .movThum .img { display: block; } .md-secProductMovie .movThum .img img { width: 100%; height: auto; } .md-secProductMovie .movCap { margin-top: calc(22 * var(--rs)); } .md-secProductMovie .movCap h3 { margin-top: calc(45 * var(--rs)); font-size: calc(24 * var(--rs)); line-height: 1.4; } .md-secProductMovie .movCap p { font-size: calc(16 * var(--rs)); line-height: 2.3; } .md-secProductMovie .movCap h3 + p { margin-top: calc(26 * var(--rs)); } .md-secProductMovie .movCap.centerCap { width: calc(990 * var(--rs)); margin-left: auto; margin-right: auto; } .md-secProductMovie .movCap.centerCap h3 { text-align: center; } .md-secProductMovie .movCap .frameCts { width: calc(960 * var(--rs)); margin: calc(28 * var(--rs)) auto 0; box-sizing: border-box; padding-top: 34.3434%; position: relative; } .md-secProductMovie .movCap .frameCts iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .page-detailFeature .md-secProductMovie .movColItem:not(:first-child) { margin-top: calc(40 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-secProductMovie { padding-top: calc(120 * var(--rs)); padding-bottom: calc(130 * var(--rs)); } .md-secProductMovie .cm-ctsWidth { box-sizing: border-box; padding-right: calc(30 * var(--rs)); padding-left: calc(30 * var(--rs)); } .md-secProductMovie .secTtl { text-align: left; font-size: calc(54 * var(--rs)); } .md-secProductMovie .movCol + .secTtl { margin-top: calc(100 * var(--rs)); } .md-secProductMovie .leadTxt { font-size: calc(30 * var(--rs)); line-height: 2; margin-top: calc(60 * var(--rs)); } .md-secProductMovie .movCol { margin: calc(90 * var(--rs)) auto 0; width: 100%; } .md-secProductMovie .movSlider { margin: calc(90 * var(--rs)) auto 0; } .md-secProductMovie .movSlider .next, .md-secProductMovie .movSlider .prev { width: calc(70 * var(--rs)); background-size: calc(24 * var(--rs)) auto; } .md-secProductMovie .movSlider .next { left: auto; right: calc(-70 * var(--rs)); } .md-secProductMovie .movSlider .prev { right: auto; left: calc(-70 * var(--rs)); } .md-secProductMovie .movCap { margin-top: calc(56 * var(--rs)); } .md-secProductMovie .movCap h3 { margin-top: calc(100 * var(--rs)); font-size: calc(44 * var(--rs)); } .md-secProductMovie .movCap p { font-size: calc(32 * var(--rs)); line-height: 1.87; } .md-secProductMovie .movCap h3 + p { margin-top: calc(56 * var(--rs)); } .md-secProductMovie .movCap.centerCap { width: 100%; } .md-secProductMovie .movCap.centerCap h3 { text-align: left; } .md-secProductMovie .movCap .frameCts { width: 100%; margin: calc(40 * var(--rs)) auto 0; padding-top: 44.7761%; } } .md-secSummary .btnWrap { margin-top: calc(36 * var(--rs)); } .md-secSummary .btnWrap .ancBtn { display: table; } .md-secSummary .btnWrap .ancBtn .btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: calc(6 * var(--rs)) calc(20 * var(--rs)); background: #000; text-decoration: none; color: #fff; font-size: calc(14 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; transition: opacity 0.3s linear; position: relative; } .md-secSummary .btnWrap .ancBtn .btn:hover { text-decoration: underline; opacity: 0.7; } .md-secSummary .btnWrap .ancBtn .btn[target="_blank"]::after { content: ""; display: inline-block; width: calc(9 * var(--rs)); height: calc(9 * var(--rs)); margin-left: calc(10 * var(--rs)); background: var(--icn-blank-white); vertical-align: middle; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-secSummary .btnWrap { margin-top: calc(100 * var(--rs)); } .md-secSummary .btnWrap .ancBtn { display: flex; align-items: center; justify-content: center; width: auto; height: calc(90 * var(--rs)); margin: 0 auto; } .md-secSummary .btnWrap .ancBtn .btn { padding: 0 calc(30 * var(--rs)); font-size: calc(26 * var(--rs)); font-weight: var(--weight-medium); width: auto; height: 100%; } .md-secSummary .btnWrap .ancBtn .btn[target="_blank"]::after { width: calc(16 * var(--rs)); height: calc(16 * var(--rs)); margin-left: calc(6 * var(--rs)); } } /* ------------------------------------------- ↑↑↑ 製品詳細 ↑↑↑ ------------------------------------------- */ .md-catPageTitle { margin-top: calc(40 * var(--rs)); } .md-catPageTitle .pageTtl { font-size: calc(34 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.6; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-catPageTitle { margin-top: calc(60 * var(--rs)); } .md-catPageTitle .pageTtl { font-size: calc(36 * var(--rs)); } } .md-secProductMainVis { margin-top: calc(10 * var(--rs)); } .md-secProductMainVis .slideMain .mask { height: calc(500 * var(--rs)); } .md-secProductMainVis .slider .item { height: calc(500 * var(--rs)); position: relative; width: 100%; overflow: hidden; } .md-secProductMainVis .slider .item .img { width: calc(2560 * var(--rs)); height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .md-secProductMainVis .slider .item img { display: block; width: auto; height: 100%; margin: 0 auto; opacity: 1 !important; } .md-secProductMainVis .slider .item .movItem { position: absolute; top: 0; left: 50%; width: calc(1920 * var(--rs)); margin-left: calc(calc(-1920 * var(--rs)) / 2); height: calc(500 * var(--rs)); overflow: hidden; } .md-secProductMainVis .slider .item .movItem video { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; } .md-secProductMainVis .slider .item .movItem .cover { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 2; } .md-secProductMainVis .slider .item .youtubeItem { position: absolute; width: calc(1920 * var(--rs)); padding-top: 56.25%; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); } .md-secProductMainVis .slider .item .youtubeItem .cover { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 2; } .md-secProductMainVis .slider .item .youtubeItem iframe { width: 100%; position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .md-secProductMainVis .slideMain .pager { margin-top: calc(10 * var(--rs)); display: flex; justify-content: center; } .md-secProductMainVis .slideMain .pager .pagerItem { width: calc(12 * var(--rs)); height: calc(12 * var(--rs)); border-radius: 100%; margin: 0 calc(5 * var(--rs)); box-sizing: border-box; background: #e0e0e0; cursor: pointer; } .md-secProductMainVis .slideMain .pager .pagerItem.js-stay { border: none; border: 1px solid #fffafa; background: #000; cursor: default; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { :root { --top-main-sp-height: 800; } .md-secProductMainVis { margin-top: calc(20 * var(--rs)); } .md-secProductMainVis .slideMain .mask { width: 100%; height: calc(var(--top-main-sp-height) * var(--rs)); } .md-secProductMainVis .slider .item { width: 100%; height: calc(var(--top-main-sp-height) * var(--rs)); } .md-secProductMainVis .slider .item .img { display: block; width: 100%; height: calc(var(--top-main-sp-height) * var(--rs)); position: static; transform: translateX(0); overflow: hidden; } .md-secProductMainVis .slider .item img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .md-secProductMainVis .slider .item .movItem { position: static; display: block; overflow: hidden; width: 100%; margin-left: 0; height: calc(var(--top-main-sp-height) * var(--rs)); overflow: hidden; } .md-secProductMainVis .slider .item .youtubeItem { overflow: hidden; width: 100%; height: 100%; background: #000; } .md-secProductMainVis .slideMain .pager { margin-top: calc(30 * var(--rs)); } .md-secProductMainVis .slideMain .pager .pagerItem { width: calc(30 * var(--rs)); height: calc(30 * var(--rs)); margin: 0 calc(12 * var(--rs)); } } .md-secCatTopNews { margin-top: calc(100 * var(--rs)); } .md-secCatTopNews .secInr { box-sizing: border-box; padding: calc(28 * var(--rs)) calc(28 * var(--rs)) calc(30 * var(--rs)); border: 1px solid #eaeaea; position: relative; } .md-secCatTopNews .ttlLine { box-sizing: border-box; padding-right: calc(150 * var(--rs)); } .md-secCatTopNews .ttlLine .secTtl { font-size: calc(21 * var(--rs)); font-weight: var(--weight-medium); } .md-secCatTopNews .secCts { margin-top: calc(22 * var(--rs)); position: relative; } .md-secCatTopNews .entryList .item:not(:first-child) { margin-top: calc(20 * var(--rs)); } .md-secCatTopNews .entryList .item a { text-decoration: none; } .md-secCatTopNews .entryList .item > * { display: flex; } .md-secCatTopNews .entryList .item .dateLine { display: flex; } .md-secCatTopNews .entryList .item .date { font-size: calc(16 * var(--rs)); padding-right: calc(10 * var(--rs)); padding-top: calc(3 * var(--rs)); white-space: nowrap; } .md-secCatTopNews .entryList .item .cat { padding-right: calc(23 * var(--rs)); } .md-secCatTopNews .entryList .item .cat .label { display: flex; justify-content: center; align-items: center; width: calc(130 * var(--rs)); height: calc(24 * var(--rs)); background: #eaeaea; border-radius: calc(20 * var(--rs)); font-size: calc(12 * var(--rs)); font-weight: var(--weight-medium); } .md-secCatTopNews .entryList .item .txt { flex: 1 0 0%; font-size: calc(16 * var(--rs)); line-height: 1.5; } .md-secCatTopNews .entryList .item a:hover .txt span { text-decoration: underline; } .md-secCatTopNews .entryList .item.new .txt { margin-right: calc(-37 * var(--rs)); } .md-secCatTopNews .entryList .item.new .txt::after { content: "NEW"; display: inline; white-space: nowrap; background: var(--color-red); color: #fff; font-size: calc(12 * var(--rs)); margin-left: calc(10 * var(--rs)); position: relative; top: calc(-1 * var(--rs)); font-weight: bold; line-height: 1; padding: calc(1 * var(--rs)) calc(8 * var(--rs)) calc(2 * var(--rs)); } .md-secCatTopNews .btnLine { width: calc(140 * var(--rs)); margin: calc(35 * var(--rs)) auto 0; } .md-secCatTopNews .btnLine .md-btnSquare { width: 100%; height: calc(36 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-secCatTopNews { margin-top: calc(60 * var(--rs)); } .md-secCatTopNews .secInr { padding: calc(70 * var(--rs)) calc(40 * var(--rs)) calc(70 * var(--rs)); } .md-secCatTopNews .ttlLine { padding-right: 0; } .md-secCatTopNews .ttlLine .secTtl { font-size: calc(36 * var(--rs)); } .md-secCatTopNews .secCts { margin-top: calc(60 * var(--rs)); } .md-secCatTopNews .entryList .item:not(:first-child) { margin-top: calc(58 * var(--rs)); } .md-secCatTopNews .entryList .item > * { display: block; } .md-secCatTopNews .entryList .item .dateLine { display: flex; } .md-secCatTopNews .entryList .item .date { font-size: calc(30 * var(--rs)); padding-right: calc(42 * var(--rs)); padding-top: calc(6 * var(--rs)); } .md-secCatTopNews .entryList .item.new .dateLine::after { content: "NEW"; display: flex; align-items: center; justify-content: center; white-space: nowrap; background: var(--color-red); color: #fff; font-size: calc(24 * var(--rs)); margin-left: calc(20 * var(--rs)); position: relative; top: calc(-1 * var(--rs)); font-weight: bold; line-height: 1; padding: calc(1 * var(--rs)) calc(16 * var(--rs)) calc(2 * var(--rs)); } .md-secCatTopNews .entryList .item .cat { padding-right: calc(20 * var(--rs)); } .md-secCatTopNews .entryList .item .cat .label { width: calc(260 * var(--rs)); height: calc(46 * var(--rs)); border-radius: calc(90 * var(--rs)); font-size: calc(24 * var(--rs)); } .md-secCatTopNews .entryList .item .txt { margin-top: calc(24 * var(--rs)); font-size: calc(30 * var(--rs)); line-height: 1.6; } .md-secCatTopNews .entryList .item.new .txt { margin-right: 0; } .md-secCatTopNews .entryList .item.new .txt::after { content: none; } .md-secCatTopNews .entryList .item.new a { box-sizing: border-box; padding-top: calc(30 * var(--rs)); position: relative; } .md-secCatTopNews .entryList .item.new a::before { font-size: calc(22 * var(--rs)); margin-left: calc(15 * var(--rs)); top: calc(-3 * var(--rs)); padding: 0 calc(15 * var(--rs)) calc(3 * var(--rs)); } .md-secCatTopNews .btnLine { width: calc(326 * var(--rs)); height: calc(90 * var(--rs)); position: static; margin: calc(70 * var(--rs)) auto 0; } .md-secCatTopNews .btnLine .md-btnSquare { width: 100%; height: 100%; } } /* -------------------------------------------- ↓↓↓ 撮影サンプル ↓↓↓ -------------------------------------------- */ .md-galleryDetail { margin-top: calc(20 * var(--rs)); } .md-galleryDetail .secMainVis img { width: 100%; height: auto; } .md-galleryDetail .secGallery { margin-top: calc(85 * var(--rs)); padding-bottom: calc(160 * var(--rs)); } .md-galleryDetail .secGallery .secTtl { color: #333; font-size: calc(34 * var(--rs)); letter-spacing: 0.05em; } .md-galleryDetail .secGallery .list { display: flex; flex-wrap: wrap; margin: calc(55 * var(--rs)) calc(-60 * var(--rs)) calc(-87 * var(--rs)) 0; } .md-galleryDetail .secGallery .list .item { width: calc((100% - 120 * var(--rs)) / 2); margin: 0 calc(60 * var(--rs)) calc(87 * var(--rs)) 0; } .md-galleryDetail .secGallery .list .item .img { position: relative; height: calc(380 * var(--rs)); } .md-galleryDetail .secGallery .list .item .img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* object-fit: cover; */ -o-object-fit: contain; object-fit: contain; } .md-galleryDetail .secGallery .list .item .itemCol { display: block; margin-top: calc(24 * var(--rs)); } .md-galleryDetail .secGallery .list .item .infoList { margin-top: calc(15 * var(--rs)); } .md-galleryDetail .secGallery .list .item .infoList .row { display: flex; align-items: center; font-size: calc(15 * var(--rs)); line-height: 1.4; letter-spacing: 0.01em; padding: calc(13 * var(--rs)) 0; } .md-galleryDetail .secGallery .list .item .infoList .row + .row { border-top: 1px solid #c9c9c9; } .md-galleryDetail .secGallery .list .item .infoList .row + .row { margin-top: calc(11 * var(--rs)); } .md-galleryDetail .secGallery .list .item .infoList .term { font-weight: var(--weight-medium); width: 50%; padding-right: calc(32 * var(--rs)); box-sizing: border-box; } .md-galleryDetail .secGallery .list .item .infoList .desc .small { font-size: calc(13 * var(--rs)); } .md-galleryDetail .secGallery .list .item { padding-bottom: calc(1 * var(--rs)); } .md-galleryDetail .secGallery .list .item .btnWrap { margin-top: calc(35 * var(--rs)); display: flex; justify-content: center; } .md-galleryDetail .secGallery .list .item .btn { display: flex; align-items: center; justify-content: center; width: 100%; max-width: calc(200 * var(--rs)); height: calc(47 * var(--rs)); box-sizing: border-box; padding: calc(2 * var(--rs)) calc(4 * var(--rs)) calc(4 * var(--rs)); background-color: #000; color: #fff; font-weight: var(--weight-medium); font-size: calc(16 * var(--rs)); line-height: 1.78; text-decoration: none; transition: opacity 0.3s linear; } .md-galleryDetail .secGallery .list .item .btn:hover { opacity: 0.5; text-decoration: underline; } .md-galleryDetail .secGallery .list .item .ph { font-weight: var(--weight-medium); font-size: calc(13 * var(--rs)); line-height: 1.46; letter-spacing: 0.01em; } .md-galleryDetail .secGallery .list .item .name { margin-top: calc(6 * var(--rs)); font-size: calc(24 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.56; letter-spacing: 0.01em; } /* PC -------------------------------------*/ @media screen and (min-width: 769px) { .md-galleryDetail .secGallery .list .item:nth-child(odd) .formatCol { margin-left: calc(98 * var(--rs)); } .md-galleryDetail .secGallery .list .item:nth-child(even) .formatCol { margin-left: calc(64 * var(--rs)); } } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-galleryDetail { margin-top: calc(50 * var(--rs)); } .md-galleryDetail .secGallery { margin-top: calc(120 * var(--rs)); padding-bottom: calc(140 * var(--rs)); } .md-galleryDetail .secGallery .secTtl { font-size: calc(54 * var(--rs)); letter-spacing: normal; } .md-galleryDetail .secGallery .list { display: block; margin: calc(50 * var(--rs)) 0 0; } .md-galleryDetail .secGallery .list .item { width: auto; margin: 0; display: block; } .md-galleryDetail .secGallery .list .item:not(:first-child) { margin-top: calc(130 * var(--rs)); } .md-galleryDetail .secGallery .list .item .img { height: calc(450 * var(--rs)); } .md-galleryDetail .secGallery .list .item .itemCol { display: block; margin-top: calc(45 * var(--rs)); } .md-galleryDetail .secGallery .list .item .infoList { display: block; margin: 0; } .md-galleryDetail .secGallery .list .item .infoList .row { width: 100%; box-sizing: border-box; font-size: calc(30 * var(--rs)); line-height: 1.4; letter-spacing: normal; margin-top: 0; padding: calc(25 * var(--rs)) 0; display: flex; align-items: flex-start; } .md-galleryDetail .secGallery .list .item .infoList .row + .row { margin-top: 0; } .md-galleryDetail .secGallery .list .item .infoList .term { width: 50%; padding-right: calc(40 * var(--rs)); } .md-galleryDetail .secGallery .list .item .infoList .desc { width: 50%; } .md-galleryDetail .secGallery .list .item .infoList .desc .small { font-size: calc(28 * var(--rs)); } .md-galleryDetail .secGallery .list .item { padding-bottom: 0; display: block; margin-top: calc(55 * var(--rs)); align-items: flex-end; } .md-galleryDetail .secGallery .list .item .btnWrap { margin: calc(50 * var(--rs)) auto 0; width: calc(326 * var(--rs)); } .md-galleryDetail .secGallery .list .item .btn { height: calc(80 * var(--rs)); font-size: calc(24 * var(--rs)); width: 100%; max-width: 100%; } .md-galleryDetail .secGallery .list .item .phInfo { flex: 1; } .md-galleryDetail .secGallery .list .item .ph { font-size: calc(26 * var(--rs)); letter-spacing: normal; } .md-galleryDetail .secGallery .list .item .name { margin-top: 0; font-size: calc(48 * var(--rs)); letter-spacing: normal; } } /*移行記事用*/ #js-detailGalleryContentsPlace > .p-page-box { padding-bottom: calc(140 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { #js-detailGalleryContentsPlace > .p-page-box { padding-bottom: calc(140 * var(--rs)); } } /* -------------------------------------------- ↑↑↑ 撮影サンプル ↑↑↑ -------------------------------------------- */ /* -------------------------------------------- ↓↓↓ レンズ詳細（インプレッション一覧） ↓↓↓ -------------------------------------------- */ .md-ctsLeadWrap { margin-top: calc(26 * var(--rs)); display: none !important; } .md-ctsLeadWrap .leadInr { font-size: calc(16 * var(--rs)); line-height: 2; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-ctsLeadWrap { margin-top: calc(50 * var(--rs)); display: none !important; } .md-ctsLeadWrap .leadInr { font-size: calc(32 * var(--rs)); line-height: 1.68; } } /* .md-detailImpressionList { padding-bottom: calc(120 * var(--rs)); } .md-detailImpressionList .listInr { display: flex; flex-wrap: wrap; margin-top: calc(-20 * var(--rs)); pointer-events: none; } .md-detailImpressionList .listInr > * { pointer-events: all; } .md-detailImpressionList .item { width: 50%; margin-top: calc(80 * var(--rs)); box-sizing: border-box; } .md-detailImpressionList .item:nth-child(even) { padding-left: calc(10 * var(--rs)); } .md-detailImpressionList .item:nth-child(odd) { padding-right: calc(10 * var(--rs)); } .md-detailImpressionList .item .itemInr { display: block; text-decoration: none; } .md-detailImpressionList .item .imgCol { width: 100%; } .md-detailImpressionList .item .imgCol .img { width: 100%; height: calc(400 * var(--rs)); overflow: hidden; } .md-detailImpressionList .item .imgCol .img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .md-detailImpressionList .item .txtCol { margin-top: calc(28 * var(--rs)); } .md-detailImpressionList .item .txtCol .itemTxt .ttl { font-size: calc(21 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.28; } .md-detailImpressionList .item .txtCol .itemTxt .name { margin-top: calc(8 * var(--rs)); font-size: calc(14 * var(--rs)); line-height: 1.5; } .md-detailImpressionList .item .itemInr:hover .txtCol .itemTxt .ttl { text-decoration: underline; }*/ /* SP -------------------------------------*/ @media screen and (max-width: 768px) { /* .md-detailImpressionList { padding-bottom: 0; } .md-detailImpressionList .listInr { display: block; margin-top: calc(40 * var(--rs)); } .md-detailImpressionList .item { width: auto; margin-top: 0; } .md-detailImpressionList .item:nth-child(even) { margin: 0 calc(-40 * var(--rs)); padding: calc(60 * var(--rs)) calc(40 * var(--rs)) calc(80 * var(--rs)); background: #f4f4f5; } .md-detailImpressionList .item:nth-child(odd) { padding: calc(60 * var(--rs)) 0 calc(80 * var(--rs)); } .md-detailImpressionList .item .imgCol .img { height: calc(450 * var(--rs)); } .md-detailImpressionList .item .txtCol { margin-top: calc(40 * var(--rs)); } .md-detailImpressionList .item .txtCol .itemTxt .ttl { font-size: calc(40 * var(--rs)); line-height: 1.55; } .md-detailImpressionList .item .txtCol .itemTxt .name { margin-top: calc(16 * var(--rs)); font-size: calc(28 * var(--rs)); line-height: 1.42; } */ } .md-detailImpressionList { pointer-events: none; padding-top: calc(36 * var(--rs)); padding-bottom: calc(120 * var(--rs)); } .md-detailImpressionList .listInr > * { pointer-events: all; } .md-detailImpressionList .listInr { display: flex; flex-wrap: wrap; /* justify-content: space-between; */ } .md-detailImpressionList .item { width: calc(100% / 3); box-sizing: border-box; padding: 0 calc(15 * var(--rs)); } .md-detailImpressionList .item:nth-child(n+4) { margin-top: calc(70 * var(--rs)); } .md-detailImpressionList .item .itemInr { display: block; text-decoration: none; } .md-detailImpressionList .item .thum { display: block; height: calc(270 * var(--rs)); } .md-detailImpressionList .item .thum img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .md-detailImpressionList .item .tabLine { margin-top: calc(20 * var(--rs)); } .md-detailImpressionList .item.new .tabLine::after { content: "NEW"; display: inline-flex; align-items: center; justify-content: center; width: calc(44 * var(--rs)); height: calc(20 * var(--rs)); margin-left: calc(15 * var(--rs)); background: #cb0000; color: #fff; font-size: calc(12 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.4; } .md-detailImpressionList .item .tabLine .tab { display: inline-flex; box-sizing: border-box; padding: calc(3 * var(--rs)) calc(12 * var(--rs)) calc(3 * var(--rs)); border-radius: calc(45 * var(--rs)); background: #eaeaea; font-size: calc(13 * var(--rs)); line-height: 1.4; } .md-detailImpressionList .item .itemCol { margin-top: calc(12 * var(--rs)); } .md-detailImpressionList .item .itemCol .ttlWrap .ttl { font-size: calc(17 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.58; } .md-detailImpressionList .item .itemCol .ttlWrap .prod { margin-top: calc(4 * var(--rs)); font-size: calc(13 * var(--rs)); } .md-detailImpressionList .item .itemCol .txtWrap { margin-top: calc(24 * var(--rs)); font-size: calc(15 * var(--rs)); line-height: 2; } .md-detailImpressionList .item .itemCol .txtWrap p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .md-detailImpressionList .item .itemInr:hover .itemCol .ttlWrap .ttl { text-decoration: underline; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-detailImpressionList { padding-top: 0; padding-bottom: 0; } .md-detailImpressionList .listInr { display: block; margin: 0; } .md-detailImpressionList .item { width: auto; margin: 0 calc(-40 * var(--rs)); padding: calc(80 * var(--rs)) calc(40 * var(--rs)); } .md-detailImpressionList .item .thum { height: calc(476 * var(--rs)); } .md-detailImpressionList .item:nth-child(n+4) { margin-top: calc(40 * var(--rs)); } .md-detailImpressionList .item:nth-child(even) { background: #f4f4f5; } .md-detailImpressionList .item .tabLine { margin-top: calc(40 * var(--rs)); } .md-detailImpressionList .item.new .tabLine::after { width: calc(84 * var(--rs)); height: calc(36 * var(--rs)); margin-left: calc(30 * var(--rs)); font-size: calc(22 * var(--rs)); } .md-detailImpressionList .item .tabLine .tab { padding: calc(6 * var(--rs)) calc(34 * var(--rs)) calc(6 * var(--rs)); font-size: calc(24 * var(--rs)); } .md-detailImpressionList .item .itemCol { margin-top: calc(15 * var(--rs)); } .md-detailImpressionList .item .itemCol .ttlWrap .ttl { font-size: calc(40 * var(--rs)); line-height: 1.55; } .md-detailImpressionList .item .itemCol .ttlWrap .prod { margin-top: calc(16 * var(--rs)); font-size: calc(28 * var(--rs)); } .md-detailImpressionList .item .itemInr:hover .itemCol .ttlWrap .ttl { text-decoration: underline; } } /* -------------------------------------------- ↑↑↑ レンズ詳細（インプレッション一覧） ↑↑↑ -------------------------------------------- */ /* -------------------------------------------- ↓↓↓ レンズ詳細（仕様） ↓↓↓ -------------------------------------------- */ .page-detailSpec .sectionWrap { padding-bottom: calc(120 * var(--rs)); } .page-detailSpec .secSpecDetail { margin-top: calc(85 * var(--rs)); padding-bottom: calc(85 * var(--rs)); } .page-detailSpec .secSpecDetail .secTtl { font-size: calc(36 * var(--rs)); } .md-detailListImg { line-height: 1.8; margin-top: calc(50 * var(--rs)); } .md-detailListImg .chartColWrap { box-sizing: border-box; padding: calc(30 * var(--rs)) 0; } .md-detailListImg .chartColWrap:not(:first-child) { border-top: 1px solid #eaeaea; } .md-detailListImg .item { display: flex; } .md-detailListImg .item .itemTtl { font-size: calc(28 * var(--rs)); width: calc(300 * var(--rs)); } .md-detailListImg .item .itemTtl .itemTtlTxt { display: flex; align-items: center; } .md-detailListImg .item .itemTtl .itemTtlTxt .md-icnInfo { margin-left: calc(5 * var(--rs)); } .md-detailListImg .item .itemCts { flex: 1; flex-wrap: wrap; } .md-detailListImg .item--structure .img { width: calc(658 * var(--rs)); } .md-detailListImg .item--structure .img img { width: 100%; } .md-detailListImg .item--chart .itemCts { display: flex; flex-wrap: wrap; margin-top: calc(18 * var(--rs)); } .md-detailListImg .item--chart .chartItem { width: calc(360 * var(--rs)); } .md-detailListImg .chartColWrap--mtfChart .item--chart .chartItem:nth-child(n+3) { margin-top: calc(40 * var(--rs)); } .md-detailListImg .item--chart .chartItem:nth-child(odd) { margin-right: calc(80 * var(--rs)); } .md-detailListImg .item--chart .chartItem .chartTtl { font-size: calc(14 * var(--rs)); font-weight: var(--weight-medium); } .md-detailListImg .item--chart .chartItem .img { margin-top: calc(34 * var(--rs)); } .md-detailListImg .item--chart .chartItem .chartTtl + .img { margin-top: calc(10 * var(--rs)); } .md-detailListImg .item--chart .chartItem .img img { width: 100%; } .md-detailListImg .item--structure .capWrap { width: calc(658 * var(--rs)); box-sizing: border-box; padding-bottom: calc(20 * var(--rs)); } .md-detailListImg .item--structure .capWrap .capInr { display: flex; flex-wrap: wrap; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; } .md-detailListImg .item--structure .capWrap .selectColorCap { display: flex; align-items: center; margin-top: calc(18 * var(--rs)); box-sizing: border-box; padding: 0 calc(10 * var(--rs)); } .md-detailListImg .item--structure .capWrap .selectColorCap .color, .md-detailListImg .item--structure .capWrap .selectColorCap .border { width: calc(15 * var(--rs)); height: calc(15 * var(--rs)); margin-right: calc(6 * var(--rs)); box-sizing: border-box; } .md-detailListImg .item--structure .capWrap .selectColorCap .border { border-width: 1px; border-style: solid; } .md-detailListImg .item--structure .capWrap .selectColorCap .cap { font-size: calc(13 * var(--rs)); line-height: 1.3; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .page-detailSpec .sectionWrap { padding-bottom: calc(120 * var(--rs)); } .page-detailSpec .secSpecDetail { margin-top: calc(60 * var(--rs)); padding-bottom: calc(120 * var(--rs)); } .page-detailSpec .secSpecDetail .secTtl { font-size: calc(56 * var(--rs)); } .md-detailListImg { margin-top: calc(56 * var(--rs)); } .md-detailListImg .chartColWrap { padding: calc(80 * var(--rs)) 0; } .md-detailListImg .chartColWrap:first-child { padding-top: 0; } .md-detailListImg .item { display: block; } .md-detailListImg .item .itemTtl { font-size: calc(50 * var(--rs)); width: auto; } .md-detailListImg .itemCts { margin-top: calc(35 * var(--rs)); } .md-detailListImg .item--structure .img { width: auto; } .md-detailListImg .item--structure .img img { width: 100%; } .md-detailListImg .item--chart .itemCts { display: block; margin-left: calc(-20 * var(--rs)); margin-right: calc(-20 * var(--rs)); } .md-detailListImg .item--chart .chartItem { width: 100%; box-sizing: border-box; margin-top: calc(50 * var(--rs)); margin-right: 0; padding: 0 calc(20 * var(--rs)); } .md-detailListImg .chartType--light .item--chart .chartItem:not(:first-child) { margin-top: calc(100 * var(--rs)); } .md-detailListImg .chartColWrap--mtfChart .item--chart .chartItem:nth-child(n+3) { margin-top: calc(80 * var(--rs)); } .md-detailListImg .item--chart .chartItem:nth-child(odd) { margin-right: 0; } .md-detailListImg .item--chart .chartItem .chartTtl { font-size: calc(28 * var(--rs)); } .md-detailListImg .item--chart .chartItem .img { margin-top: calc(70 * var(--rs)); } .md-detailListImg .item--chart .chartItem .chartTtl + .img { margin-top: calc(18 * var(--rs)); } .md-detailListImg .item--structure .capWrap { width: auto; } .md-detailListImg .item--structure .capWrap .selectColorCap { margin-top: calc(30 * var(--rs)); padding: 0 calc(20 * var(--rs)); } .md-detailListImg .item--structure .capWrap .selectColorCap .color, .md-detailListImg .item--structure .capWrap .selectColorCap .border { width: calc(32 * var(--rs)); height: calc(32 * var(--rs)); margin-right: calc(12 * var(--rs)); } .md-detailListImg .item--structure .capWrap .selectColorCap .cap { font-size: calc(26 * var(--rs)); } } .page-detailSpec .secSpecDetail .specDetailList { margin-top: calc(42 * var(--rs)); } .page-detailSpec .secSpecDetail .specDetailList .listTtl { font-size: calc(28 * var(--rs)); } .page-detailSpec .secSpecDetail .detailList { line-height: 1.8; margin-top: calc(50 * var(--rs)); border: 1px solid #c9c9c9; border-bottom: none; } .page-detailSpec .secSpecDetail .detailList .item { display: flex; border-bottom: 1px solid #c9c9c9; } .page-detailSpec .secSpecDetail .detailList .item .itemTtl { font-size: calc(16 * var(--rs)); width: calc(310 * var(--rs)); box-sizing: border-box; padding: calc(12 * var(--rs)) calc(15 * var(--rs)); background: #f2f2f2; border-right: 1px solid #c9c9c9; font-weight: var(--weight-medium); } .page-detailSpec .secSpecDetail .detailList .item .itemCts { flex: 1; flex-wrap: wrap; font-size: calc(15 * var(--rs)); padding: calc(12 * var(--rs)) calc(18 * var(--rs)); } .page-detailSpec .secSpecDetail .detailList .item .dtlTxt { display: flex; flex-wrap: wrap; margin-right: calc(-24 * var(--rs)); } .page-detailSpec .secSpecDetail .detailList .item .dtlTxt--no-flex { display: block; } .page-detailSpec .secSpecDetail .detailList .item .dtlTxt .note { width: 100%; } .page-detailSpec .secSpecDetail .detailList .item .dtlTxt p { margin-right: calc(24 * var(--rs)); } .page-detailSpec .secSpecDetail .detailList .item .dtlTxt .note { font-size: calc(13 * var(--rs)); } .page-detailSpec .secSpecDetail .detailList .item .editionNum { font-size: calc(13 * var(--rs)); } .page-detailSpec .secSpecDetail .detailList .item .editionNum .thecLink { padding-left: calc(20 * var(--rs)); position: relative; cursor: pointer; } .page-detailSpec .secSpecDetail .detailList .item .editionNum .thecLink:hover { text-decoration: underline; } .page-detailSpec .secSpecDetail .detailList .item .editionNum .thecLink::before { content: ""; display: block; position: absolute; top: calc(3 * var(--rs)); left: 0; width: calc(16 * var(--rs)); height: calc(16 * var(--rs)); background: var(--icn-info-black); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .page-detailSpec .secSpecDetail .specDetailList { margin-top: calc(120 * var(--rs)); } .page-detailSpec .secSpecDetail .specDetailList .listTtl { font-size: calc(50 * var(--rs)); } .page-detailSpec .secSpecDetail .detailList { line-height: 1.8; margin-top: calc(35 * var(--rs)); border-top: 1px solid #c9c9c9; } .page-detailSpec .secSpecDetail .detailList .item { display: block; border-bottom: 1px solid #c9c9c9; } .page-detailSpec .secSpecDetail .detailList .item .itemTtl { font-size: calc(30 * var(--rs)); width: auto; padding: calc(25 * var(--rs)) calc(30 * var(--rs)); border-right: none; border-bottom: 1px solid #c9c9c9; } .page-detailSpec .secSpecDetail .detailList .item .itemCts { font-size: calc(28 * var(--rs)); padding: calc(12 * var(--rs)) calc(18 * var(--rs)); } .page-detailSpec .secSpecDetail .detailList .item .dtlTxt { display: block; padding: calc(25 * var(--rs)) calc(20 * var(--rs)) calc(25 * var(--rs)) calc(50 * var(--rs)); } .page-detailSpec .secSpecDetail .detailList .item .dtlTxt + .dtlTxt { padding-top: 0; } .page-detailSpec .secSpecDetail .detailList .item .dtlTxt p { margin-right: calc(15 * var(--rs)); } .page-detailSpec .secSpecDetail .detailList .item .dtlTxt .note { margin-top: calc(20 * var(--rs)); font-size: calc(22 * var(--rs)); } .page-detailSpec .secSpecDetail .detailList .item--editionNum .dtlTxt { display: flex; align-items: center; } .page-detailSpec .secSpecDetail .detailList .item--editionNum .dtlTxt p:first-child { margin-right: calc(42 * var(--rs)); } .page-detailSpec .secSpecDetail .detailList .item--editionNum .editionNum { font-size: calc(24 * var(--rs)); position: relative; top: calc(-3 * var(--rs)); } .page-detailSpec .secSpecDetail .detailList .item--editionNum .editionNum .thecLink { padding-left: calc(47 * var(--rs)); position: relative; } .page-detailSpec .secSpecDetail .detailList .item--editionNum .editionNum .thecLink::before { top: calc(5 * var(--rs)); width: calc(33 * var(--rs)); height: calc(33 * var(--rs)); } } .page-detailSpec .secLensTechnology { padding-bottom: 0; } .page-detailSpec .specNote { margin-top: calc(40 * var(--rs)); padding-top: calc(30 * var(--rs)); font-size: calc(11 * var(--rs)); border-top: 1px solid #eaeaea; line-height: 2; } .page-detailSpec .specNote .md-infoTxtLink { padding-left: calc(18 * var(--rs)); font-size: calc(11 * var(--rs)); } .page-detailSpec .specNote .md-infoTxtLink::before { width: calc(12 * var(--rs)); height: calc(12 * var(--rs)); top: calc(6 * var(--rs)); left: calc(2 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .page-detailSpec .specNote { margin-top: calc(80 * var(--rs)); padding-top: calc(90 * var(--rs)); font-size: calc(28 * var(--rs)); line-height: 1.786; } .page-detailSpec .specNote .md-infoTxtLink { padding-left: calc(32 * var(--rs)); font-size: calc(28 * var(--rs)); } .page-detailSpec .specNote .md-infoTxtLink::before { width: calc(24 * var(--rs)); height: calc(24 * var(--rs)); top: calc(14 * var(--rs)); left: calc(4 * var(--rs)); } } /* -------------------------------------------- ↑↑↑ レンズ詳細 (仕様) ↑↑↑ -------------------------------------------- */ /* -------------------------------------------- ↓↓↓ インプレッション詳細 ↓↓↓ -------------------------------------------- */ .md-impressionDetail .detailWrap { margin-top: calc(64 * var(--rs)); } .md-impressionDetail .titleCol .title { line-height: 1.578; font-size: calc(45 * var(--rs)); } .md-impressionDetail .titleCol.titleOnly .title { font-size: calc(34 * var(--rs)); } .md-impressionDetail .titleCol .sub { margin-top: calc(14 * var(--rs)); font-size: calc(23 * var(--rs)); line-height: 1.42; } .md-impressionDetail .titleCol .catWrap { display: flex; flex-wrap: wrap; } .md-impressionDetail .titleCol .catWrap .cat { display: flex; align-items: center; justify-content: center; height: calc(24 * var(--rs)); margin-top: calc(12 * var(--rs)); box-sizing: border-box; padding: calc(3 * var(--rs)) calc(22 * var(--rs)); border-radius: calc(45 * var(--rs)); background: #eaeaea; font-size: calc(12 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.2; } .md-impressionDetail .titleCol .name { color: #111; line-height: 1.5; font-size: calc(14 * var(--rs)); margin-top: calc(30 * var(--rs)); } .md-impressionDetail .titleCol .name + .name { margin-top: calc(10 * var(--rs)); } .md-impressionDetail .tabLine { display: flex; align-items: center; margin-top: calc(22 * var(--rs)); min-height: calc(36 * var(--rs)); } .md-impressionDetail .tabLine .tabWrap { display: flex; margin-left: calc(-10 * var(--rs)); } .md-impressionDetail .tabLine .tabWrap .tab { box-sizing: border-box; margin: 0 calc(10 * var(--rs)); } .md-impressionDetail .tabLine .tabWrap .tab .tabInr { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 calc(6 * var(--rs)); text-decoration: none; color: #111; font-size: calc(13 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.5; position: relative; cursor: pointer; } .md-impressionDetail .tabLine .tabWrap .tab .tabInr[target="_blank"] { margin-left: calc(15 * var(--rs)); padding-left: calc(35 * var(--rs)); border-left: 1px solid #c9c9c9; } .md-impressionDetail .tabLine .tabWrap .tab .tabInr[target="_blank"]::after { content: ""; display: inline-block; width: calc(10 * var(--rs)); height: calc(10 * var(--rs)); margin-left: calc(4 * var(--rs)); background: var(--icn-blank-black); vertical-align: middle; transition: background 0.3s linear; } .md-impressionDetail .tabLine .tabWrap .tab .tabInr[target="_blank"]::before { width: calc(100% - calc(29 * var(--rs))); left: auto; right: 0; } .md-impressionDetail .tabLine .tabWrap .tab .tabInr::before { content: " "; width: 100%; height: 2px; background-color: #222; position: absolute; bottom: calc(-6 * var(--rs)); left: 0; opacity: 0; } .md-impressionDetail .tabLine .tabWrap .tab .tabInr:hover::before, .md-impressionDetail .tabLine .tabWrap .tab--current .tabInr::before, .md-impressionDetail .tabLine.tabLine--refineSearch .tabWrap input:checked + .tabInr::before { opacity: 1; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .detailWrap { margin-top: calc(50 * var(--rs)); } .md-impressionDetail .titleCol .title { line-height: 1.6; font-size: calc(52 * var(--rs)); } .md-impressionDetail .titleCol.titleOnly .title { font-size: calc(50 * var(--rs)); } .md-impressionDetail .titleCol .sub { margin-top: calc(28 * var(--rs)); font-size: calc(38 * var(--rs)); } .md-impressionDetail .titleCol .catWrap .cat { height: calc(46 * var(--rs)); margin-top: calc(28 * var(--rs)); padding: calc(4 * var(--rs)) calc(34 * var(--rs)); font-size: calc(24 * var(--rs)); } .md-impressionDetail .titleCol .name { font-size: calc(24 * var(--rs)); margin-top: calc(10 * var(--rs)); } .md-impressionDetail .titleCol .catWrap + .name { margin-top: calc(64 * var(--rs)); } .md-impressionDetail .tabLine { display: block; margin-top: calc(15 * var(--rs)); overflow-x: scroll; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; position: relative; min-height: auto; } .md-impressionDetail .tabLine::-webkit-scrollbar { display: none; } .md-impressionDetail .tabLine .tabWrap { width: -webkit-max-content; width: -moz-max-content; width: max-content; margin: 0 calc(-7 * var(--rs)); position: relative; } .md-impressionDetail .tabLine .tabWrap .tab { width: auto; box-sizing: border-box; margin: calc(15 * var(--rs)) calc(30 * var(--rs)) 0 0; padding-bottom: calc(6 * var(--rs)); } .md-impressionDetail .tabLine .tabWrap .tab .tabInr { height: calc(54 * var(--rs)); padding: 0 calc(20 * var(--rs)); font-size: calc(28 * var(--rs)); white-space: nowrap; } .md-impressionDetail .tabLine .tabWrap .tab .tabInr[target="_blank"]::after { width: calc(22 * var(--rs)); height: calc(22 * var(--rs)); margin-left: calc(6 * var(--rs)); } .md-impressionDetail .tabLine .js-scrollbar { display: none !important; } .md-impressionDetail .tabLine .cartBtn { display: none; } } .md-impressionDetail .detailCts { margin-top: calc(35 * var(--rs)); padding-bottom: calc(140 * var(--rs)); overflow: hidden; } .md-impressionDetail .ctsModule { margin-top: calc(135 * var(--rs)); } .md-impressionDetail .ctsModule:first-child { margin-top: 0; } .md-impressionDetail .ctsModule .itemCap { font-size: calc(14 * var(--rs)); line-height: 1.5; text-align: center; padding-top: calc(20 * var(--rs)); margin-top: 0 !important; } .md-impressionDetail .ctsModule .itemCap--s { font-size: calc(11 * var(--rs)); } .md-impressionDetail .ctsModule .imgCol img { width: 100%; height: auto; } .md-impressionDetail .ctsModule .slide { position: relative; } .md-impressionDetail .ctsModule .slide .item .img { display: block; } .md-impressionDetail .ctsModule .slide .item .img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .md-impressionDetail .ctsModule .slide .pager { position: absolute; top: 100%; left: 0; width: 100%; display: flex; justify-content: center; margin-top: calc(-30 * var(--rs)); } .md-impressionDetail .ctsModule .slide .pager .pagerItem { width: calc(12 * var(--rs)); height: calc(12 * var(--rs)); margin: 0 calc(5 * var(--rs)); border-radius: 100%; box-sizing: border-box; background: #e0e0e0; font-size: 1px; cursor: pointer; } .md-impressionDetail .ctsModule .slide .pager .pagerItem.js-stay { border: none; border: 1px solid #fffafa; background: #000; cursor: default; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .detailCts { margin-top: calc(40 * var(--rs)); padding-bottom: calc(180 * var(--rs)); } .md-impressionDetail .ctsModule { margin-top: calc(180 * var(--rs)); } .md-impressionDetail .ctsModule:first-child { margin-top: 0; } .md-impressionDetail .ctsModule .itemCap, .md-impressionDetail .ctsModule .itemCap { font-size: calc(26 * var(--rs)); text-align: left; padding-top: calc(35 * var(--rs)); } .md-impressionDetail .ctsModule .itemCap--s { font-size: calc(28 * var(--rs)); line-height: 1.7; } .md-impressionDetail .ctsModule .imgCol img { width: 100%; height: auto; } .md-impressionDetail .ctsModule .slide .pager { margin-top: calc(-40 * var(--rs)); } .md-impressionDetail .ctsModule .slide .pager .pagerItem { width: calc(20 * var(--rs)); height: calc(20 * var(--rs)); margin: 0 calc(8 * var(--rs)); } } .md-impressionDetail .ctsModule .txtCol { font-size: calc(16 * var(--rs)); line-height: 2; } .md-impressionDetail .ctsModule .txtCol h1 + p, .md-impressionDetail .ctsModule .txtCol h2 + p, .md-impressionDetail .ctsModule .txtCol h3 + p, .md-impressionDetail .ctsModule .txtCol h4 + p, .md-impressionDetail .ctsModule .txtCol h1 + ul, .md-impressionDetail .ctsModule .txtCol h2 + ul, .md-impressionDetail .ctsModule .txtCol h3 + ul, .md-impressionDetail .ctsModule .txtCol h4 + ul, .md-impressionDetail .ctsModule .txtCol h1 + ol, .md-impressionDetail .ctsModule .txtCol h2 + ol, .md-impressionDetail .ctsModule .txtCol h3 + ol, .md-impressionDetail .ctsModule .txtCol h4 + ol { margin-top: calc(20 * var(--rs)) !important; } .md-impressionDetail .ctsModule .txtCol p + p { margin-top: calc(30 * var(--rs)); } .md-impressionDetail .ctsModule .txtCol p + ul, .md-impressionDetail .ctsModule .txtCol p + ol, .md-impressionDetail .ctsModule .txtCol ul + p, .md-impressionDetail .ctsModule .txtCol ol + p { margin-top: calc(45 * var(--rs)); } .md-impressionDetail .ctsModule .txtCol ul:not(:first-child), .md-impressionDetail .ctsModule .txtCol ol:not(:first-child) { margin-top: calc(30 * var(--rs)); } .md-impressionDetail .ctsModule .txtCol ul li { padding-left: 1em; text-indent: -1em; } .md-impressionDetail .ctsModule .txtCol ul li::before { content: "・"; display: inline; } .md-impressionDetail .ctsModule .txtCol ol { counter-reset: num 0; } .md-impressionDetail .ctsModule .txtCol ol li { counter-increment: num 1; padding-left: 1em; text-indent: -0.8em; } .md-impressionDetail .ctsModule .txtCol ol li::before { content: counter(num)" "; } .md-impressionDetail .ctsModule .txtCol li { margin-top: calc(10 * var(--rs)); line-height: 1.8; } .md-impressionDetail .ctsModule .txtCol a[target="_blank"]::after { content: ""; display: inline-block; width: calc(10 * var(--rs)); height: calc(10 * var(--rs)); background: var(--icn-blank); margin-left: calc(6 * var(--rs)); } .md-impressionDetail .ctsModule .txtCol strong { font-weight: var(--weight-medium); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .ctsModule .txtCol { font-size: calc(32 * var(--rs)); line-height: 2; } .md-impressionDetail .ctsModule .txtCol h1 + p, .md-impressionDetail .ctsModule .txtCol h2 + p, .md-impressionDetail .ctsModule .txtCol h3 + p, .md-impressionDetail .ctsModule .txtCol h4 + p, .md-impressionDetail .ctsModule .txtCol h1 + ul, .md-impressionDetail .ctsModule .txtCol h2 + ul, .md-impressionDetail .ctsModule .txtCol h3 + ul, .md-impressionDetail .ctsModule .txtCol h4 + ul, .md-impressionDetail .ctsModule .txtCol h1 + ol, .md-impressionDetail .ctsModule .txtCol h2 + ol, .md-impressionDetail .ctsModule .txtCol h3 + ol, .md-impressionDetail .ctsModule .txtCol h4 + ol { margin-top: calc(30 * var(--rs)) !important; } .md-impressionDetail .ctsModule .txtCol p + p { margin-top: calc(50 * var(--rs)); } .md-impressionDetail .ctsModule .txtCol p + ul, .md-impressionDetail .ctsModule .txtCol p + ol, .md-impressionDetail .ctsModule .txtCol ul + p, .md-impressionDetail .ctsModule .txtCol ol + p { margin-top: calc(60 * var(--rs)); } .md-impressionDetail .ctsModule .txtCol ul:not(:first-child), .md-impressionDetail .ctsModule .txtCol ol:not(:first-child) { margin-top: calc(55 * var(--rs)); } .md-impressionDetail .ctsModule .txtCol li { margin-top: calc(20 * var(--rs)); } .md-impressionDetail .ctsModule .txtCol a[target="_blank"]::after { width: calc(26 * var(--rs)); height: calc(26 * var(--rs)); margin-left: calc(20 * var(--rs)); } } .md-impressionDetail .ctsModule--wideImg { max-width: 1920px; margin: calc(160 * var(--rs)) auto 0; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .ctsModule--wideImg { margin-top: calc(180 * var(--rs)); } .md-impressionDetail .ctsModule--wideImg .itemCap { padding-left: calc(40 * var(--rs)); padding-right: calc(40 * var(--rs)); } } .md-impressionDetail .ctsModule--txtAndImg01 { margin-top: calc(160 * var(--rs)); position: relative; } .md-impressionDetail .ctsModule--txtAndImg01 .txtCol { width: calc(465 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg01 .imgCol { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; padding-left: calc(50% - calc(75 * var(--rs))); pointer-events: none; } .md-impressionDetail .ctsModule--txtAndImg01 .imgCol .imgColInr { width: 100%; max-width: 910px; pointer-events: all; } .md-impressionDetail .ctsModule--txtAndImg01.ctsModule--rev .txtCol { margin-left: auto; } .md-impressionDetail .ctsModule--txtAndImg01.ctsModule--rev .imgCol { padding-left: 0; padding-right: calc(50% - calc(75 * var(--rs))); } .md-impressionDetail .ctsModule--txtAndImg01.ctsModule--rev .imgCol .imgColInr { margin-left: auto; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .ctsModule--txtAndImg01 { margin-top: calc(140 * var(--rs)); position: relative; } .md-impressionDetail .ctsModule--txtAndImg01 .txtCol { width: auto; height: auto !important; } .md-impressionDetail .ctsModule--txtAndImg01 .imgCol { position: relative; width: auto; padding-left: 0; pointer-events: all; left: calc(40 * var(--rs)); height: auto !important; margin-top: calc(60 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg01 .imgCol .imgColInr { max-width: none; } .md-impressionDetail .ctsModule--txtAndImg01 .imgCol .itemCap { padding-right: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg01.ctsModule--rev .txtCol { margin-left: auto; } .md-impressionDetail .ctsModule--txtAndImg01.ctsModule--rev .imgCol { padding-left: 0; padding-right: 0; left: auto; right: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg01.ctsModule--rev .imgCol .imgColInr { margin-left: auto; } .md-impressionDetail .ctsModule--txtAndImg01.ctsModule--rev .imgCol .itemCap { padding-right: 0; padding-left: calc(40 * var(--rs)); } } .md-impressionDetail .ctsModule--txtAndImg02 { margin-top: calc(140 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg02 .floatCol { display: flex; align-items: center; justify-content: space-between; } .md-impressionDetail .ctsModule--txtAndImg02 .txtCol { width: calc(625 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg02 .imgCol { width: calc(500 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg02.ctsModule--rev .txtCol { order: 2; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .ctsModule--txtAndImg02 { margin-top: calc(160 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg02 .floatCol { display: block; } .md-impressionDetail .ctsModule--txtAndImg02 .txtCol { width: auto; } .md-impressionDetail .ctsModule--txtAndImg02 .imgCol { width: auto; margin-top: calc(60 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg02 .imgCol .modImg { width: auto; } } .md-impressionDetail .ctsModule--txtAndImg03 { margin-top: calc(95 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg03 .txtCol { margin: calc(95 * var(--rs)) auto 0; width: calc(820 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg03 .imgColWrap { margin-top: calc(165 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg03 .imgCol--01 { margin: calc(140 * var(--rs)) auto 0; max-width: 1670px; } .md-impressionDetail .ctsModule--txtAndImg03 .imgCol--01 .imgColInr { width: calc(910 * var(--rs)); margin-left: auto; } .md-impressionDetail .ctsModule--txtAndImg03 .imgCol--02 { margin: calc(140 * var(--rs)) auto 0; } .md-impressionDetail .ctsModule--txtAndImg03 .imgCol--02 .imgColInr { width: calc(910 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg03.ctsModule--rev .imgCol--01 .imgColInr { margin-left: 0; } .md-impressionDetail .ctsModule--txtAndImg03.ctsModule--rev .imgCol--02 .imgColInr { margin-left: auto; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .ctsModule--txtAndImg03 { margin-top: calc(100 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg03 .txtCol { margin: 0; width: auto; } .md-impressionDetail .ctsModule--txtAndImg03 .imgColWrap { margin-top: calc(160 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg03 .imgCol--01 { margin: calc(160 * var(--rs)) auto 0; } .md-impressionDetail .ctsModule--txtAndImg03 .imgCol--01 .imgColInr { width: calc(670 * var(--rs)); margin-left: auto; } .md-impressionDetail .ctsModule--txtAndImg03 .imgCol--01 .imgColInr .itemCap { padding-right: calc(10 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg03 .imgCol--02 { margin: calc(120 * var(--rs)) auto 0; } .md-impressionDetail .ctsModule--txtAndImg03 .imgCol--02 .imgColInr { width: calc(670 * var(--rs)); margin-left: calc(-40 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg03 .imgCol--02 .imgColInr .itemCap { padding-left: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg03.ctsModule--rev .imgCol--01 .imgColInr { margin-left: 0; left: auto; right: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg03.ctsModule--rev .imgCol--01 .imgColInr .itemCap { padding-left: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg03.ctsModule--rev .imgCol--02 .imgColInr { margin-left: auto; margin-right: calc(-40 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg03.ctsModule--rev .imgCol--02 .imgColInr .itemCap { padding-left: 0; padding-right: calc(10 * var(--rs)); } } .md-impressionDetail .ctsModule--txtAndImg04 { margin-top: calc(160 * var(--rs)); position: relative; } .md-impressionDetail .ctsModule--txtAndImg04 .txtFloatWrap { width: calc(638 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg04 .imgCol--float { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; padding-left: calc(50% + calc(110 * var(--rs))); pointer-events: none; } .md-impressionDetail .ctsModule--txtAndImg04 .imgCol--float .imgColInr { width: 100%; max-width: 705px; padding-top: calc(120 * var(--rs)); pointer-events: all; } .md-impressionDetail .ctsModule--txtAndImg04 .imgCol--txt { margin-top: calc(110 * var(--rs)); width: calc(615 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg04 .txtCol .imgCol .itemCap { margin-top: calc(20 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg04.ctsModule--rev .txtFloatWrap { margin-left: auto; } .md-impressionDetail .ctsModule--txtAndImg04.ctsModule--rev .imgCol--float { padding-left: 0; padding-right: calc(50% + calc(110 * var(--rs))); } .md-impressionDetail .ctsModule--txtAndImg04.ctsModule--rev .imgCol--float .imgColInr { margin-left: auto; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .ctsModule--txtAndImg04 { margin-top: calc(160 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg04 .txtFloatWrap { width: auto; } .md-impressionDetail .ctsModule--txtAndImg04 .imgCol--float { position: static; width: 100%; padding-left: 0; pointer-events: all; height: auto !important; } .md-impressionDetail .ctsModule--txtAndImg04 .imgCol--float .imgColInr { position: relative; max-width: none; padding-top: 0; margin-top: calc(60 * var(--rs)); left: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg04 .imgCol--float .imgColInr .itemCap { padding-right: calc(10 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg04 .imgCol--txt { margin-top: calc(120 * var(--rs)); width: auto; height: auto !important; position: relative; right: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg04 .imgCol--txt .itemCap { padding-left: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg04 .txtCol .imgCol .itemCap { margin-top: calc(20 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg04.ctsModule--rev .txtFloatWrap { margin-left: auto; } .md-impressionDetail .ctsModule--txtAndImg04.ctsModule--rev .imgCol--float { padding-left: 0; padding-right: 0; } .md-impressionDetail .ctsModule--txtAndImg04.ctsModule--rev .imgCol--float .imgColInr { margin-left: auto; left: auto; right: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg04.ctsModule--rev .imgCol--float .imgColInr .itemCap { padding-left: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg04.ctsModule--rev .imgCol--txt { right: auto; left: calc(40 * var(--rs)); } } .md-impressionDetail .ctsModule--txtAndImg05 { margin-top: calc(180 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg05 .floatCol { display: flex; justify-content: space-between; } .md-impressionDetail .ctsModule--txtAndImg05 .txtCol { width: calc(510 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg05 .imgCol { width: calc(610 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg05.ctsModule--rev .txtCol { order: 2; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .ctsModule--txtAndImg05 { margin-top: calc(160 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg05 .floatCol { display: block; } .md-impressionDetail .ctsModule--txtAndImg05 .txtCol { width: auto; } .md-impressionDetail .ctsModule--txtAndImg05 .imgCol { width: auto; margin-top: calc(60 * var(--rs)); position: relative; right: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg05 .imgCol .itemCap { padding-left: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg05.ctsModule--rev .imgCol { right: auto; left: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg05.ctsModule--rev .imgCol .itemCap { padding-left: 0; padding-right: calc(40 * var(--rs)); } } .md-impressionDetail .ctsModule--txtAndImg06 { margin-top: calc(120 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg06 .txtCol { width: calc(820 * var(--rs)); margin: 0 auto; } .md-impressionDetail .ctsModule--txtAndImg06 .txtCol h3 { font-size: calc(18 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; } .md-impressionDetail .ctsModule--txtAndImg06 .txtCol h3.alignCenter { text-align: center; } .md-impressionDetail .ctsModule--txtAndImg06 .txtCol h3 + p { margin-top: calc(20 * var(--rs)) !important; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .ctsModule--txtAndImg06 { margin-top: calc(140 * var(--rs)); } .md-impressionDetail .ctsModule--txtAndImg06 .txtCol { width: 100%; } .md-impressionDetail .ctsModule--txtAndImg06 .txtCol h3 { font-size: calc(36 * var(--rs)); line-height: 1.6; } .md-impressionDetail .ctsModule--txtAndImg06 .txtCol h3 + p { margin-top: calc(30 * var(--rs)) !important; } } .md-impressionDetail .ctsModule--movieCap { margin-top: calc(160 * var(--rs)); } .md-impressionDetail .ctsModule--movieCap iframe { width: 100%; height: calc(675 * var(--rs)); } .md-impressionDetail .ctsModule--movieCap .cap { text-align: center; font-size: calc(14 * var(--rs)); line-height: 1.87; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .ctsModule--movieCap iframe { width: 100%; height: calc(675 * var(--rs)); } .md-impressionDetail .ctsModule--movieCap .cap { margin-top: calc(30 * var(--rs)); text-align: left; font-size: calc(26 * var(--rs)); line-height: 1.53; } } .md-impressionDetail .ctsModule--singleImg { margin-top: calc(140 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .ctsModule--singleImg { margin-top: calc(140 * var(--rs)); position: relative; right: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--singleImg .itemCap { padding-left: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--singleImg.ctsModule--rev { right: auto; left: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--singleImg.ctsModule--rev .itemCap { padding-left: 0; padding-right: calc(40 * var(--rs)); } } .md-impressionDetail .ctsModule--singleImgNarrow { margin: calc(160 * var(--rs)) auto 0; width: calc(910 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .ctsModule--singleImgNarrow { margin: calc(120 * var(--rs)) auto 0; width: calc(590 * var(--rs)); } } .md-impressionDetail .ctsModule--imgGapImg { margin-top: calc(140 * var(--rs)); } .md-impressionDetail .ctsModule--imgGapImg .floatCol { margin: 0 calc(-30 * var(--rs)); display: flex; } .md-impressionDetail .ctsModule--imgGapImg .imgCol { width: 50%; box-sizing: border-box; padding: 0 calc(30 * var(--rs)); } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .ctsModule--imgGapImg { margin-top: calc(160 * var(--rs)); } .md-impressionDetail .ctsModule--imgGapImg .floatCol { margin: 0; display: block; } .md-impressionDetail .ctsModule--imgGapImg .imgCol { width: auto; padding: 0; position: relative; } .md-impressionDetail .ctsModule--imgGapImg .imgCol:first-child { right: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--imgGapImg .imgCol:first-child .itemCap { padding-left: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--imgGapImg .imgCol:nth-child(2) { right: auto; left: calc(40 * var(--rs)); margin-top: calc(120 * var(--rs)); } .md-impressionDetail .ctsModule--imgGapImg .imgCol:nth-child(2) .itemCap { padding-left: 0; padding-right: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--imgGapImg.ctsModule--rev .imgCol:first-child { right: auto; left: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--imgGapImg.ctsModule--rev .imgCol:first-child .itemCap { padding-left: 0; padding-right: calc(40 * var(--rs)); } .md-impressionDetail .ctsModule--imgGapImg.ctsModule--rev .imgCol:nth-child(2) { right: calc(40 * var(--rs)); left: auto; } .md-impressionDetail .ctsModule--imgGapImg.ctsModule--rev .imgCol:nth-child(2) .itemCap { padding-right: 0; padding-left: calc(40 * var(--rs)); } } .md-impressionDetail .ctsModule--imgSepImg { margin-top: calc(120 * var(--rs)); } .md-impressionDetail .ctsModule--imgSepImg .floatCol { display: flex; } .md-impressionDetail .ctsModule--imgSepImg .imgCol { width: 50%; box-sizing: border-box; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .ctsModule--imgSepImg { margin-top: calc(160 * var(--rs)); } .md-impressionDetail .ctsModule--imgSepImg .floatCol { margin: 0 calc(-40 * var(--rs)); } .md-impressionDetail .ctsModule--imgSepImg .imgCol { width: 50%; box-sizing: border-box; } .md-impressionDetail .ctsModule--imgSepImg .imgCol:nth-child(1) { padding-right: 0.5px; } .md-impressionDetail .ctsModule--imgSepImg .imgCol:nth-child(2) { padding-left: 0.5px; } .md-impressionDetail .ctsModule--imgSepImg .imgCol:nth-child(1) .itemCap { padding-left: calc(40 * var(--rs)); padding-right: calc(10 * var(--rs)); } .md-impressionDetail .ctsModule--imgSepImg .imgCol:nth-child(2) .itemCap { padding-left: calc(10 * var(--rs)); padding-right: calc(40 * var(--rs)); text-align: right; } } .md-impressionDetail .secPhotographer .morePhotoCol { background: var(--bg-color); padding-top: calc(90 * var(--rs)); padding-bottom: calc(95 * var(--rs)); color: #333; } .md-impressionDetail .secPhotographer .morePhotoCol .colTtl { font-size: calc(24 * var(--rs)); color: #333; } .md-impressionDetail .secPhotographer .morePhotoCol .photoList { margin: calc(25 * var(--rs)) calc(-7 * var(--rs)) 0; display: flex; flex-wrap: wrap; } .md-impressionDetail .secPhotographer .morePhotoCol .photoList .img { width: calc(100% /3); margin-top: calc(14 * var(--rs)); box-sizing: border-box; padding: 0 calc(7 * var(--rs)); } .md-impressionDetail .secPhotographer .morePhotoCol .photoList .img .imgInr { height: calc(390 * var(--rs)); cursor: pointer; transition: all 0.3s ease-out; } .md-impressionDetail .secPhotographer .morePhotoCol .photoList .img .imgInr:hover { opacity: 0.7; } .md-impressionDetail .secPhotographer .morePhotoCol .photoList .img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .secPhotographer .morePhotoCol { padding: calc(120 * var(--rs)) calc(40 * var(--rs)); margin-bottom: 0; } .md-impressionDetail .secPhotographer .morePhotoCol .colTtl { font-size: calc(34 * var(--rs)); } .md-impressionDetail .secPhotographer .morePhotoCol .photoList { margin: calc(40 * var(--rs)) calc(-5 * var(--rs)) 0; } .md-impressionDetail .secPhotographer .morePhotoCol .photoList .img { width: calc(100% /3); margin-top: calc(10 * var(--rs)); padding: 0 calc(5 * var(--rs)); } .md-impressionDetail .secPhotographer .morePhotoCol .photoList .img .imgInr { height: calc(190 * var(--rs)); } } .md-impressionDetail .secPhotographer .photographer { /* padding: calc(100 * var(--rs)) 0; */ padding-top: calc(100 * var(--rs)); padding-bottom: calc(100 * var(--rs)); background: #626262; color: #fff; } .md-impressionDetail .secPhotographer .photographer .introduce { display: flex; } .md-impressionDetail .secPhotographer .photographer .introduce + .introduce { margin-top: calc(60 * var(--rs)); } .md-impressionDetail .secPhotographer .photographer .introduce .introImg { width: calc(214 * var(--rs)); } .md-impressionDetail .secPhotographer .photographer .introduce .introImg img { width: 100%; height: auto; } .md-impressionDetail .secPhotographer .photographer .introCol { flex: 1; box-sizing: border-box; padding-left: calc(56 * var(--rs)); } .md-impressionDetail .secPhotographer .photographer .introCol .name { font-size: calc(19 * var(--rs)); font-weight: 500; line-height: 1.65; letter-spacing: 0.01em; } .md-impressionDetail .secPhotographer .photographer .introCol .job { font-size: calc(12 * var(--rs)); line-height: 2; letter-spacing: 0.01em; } .md-impressionDetail .secPhotographer .photographer .introCol .txtWrap { margin-top: calc(20 * var(--rs)); } .md-impressionDetail .secPhotographer .photographer .introCol .txtWrap .txt { font-size: calc(16 * var(--rs)); line-height: 1.93; } .md-impressionDetail .secPhotographer .photographer .introCol .ancCol { display: flex; flex-wrap: wrap; margin-top: calc(20 * var(--rs)); } .md-impressionDetail .secPhotographer .photographer .introCol .ancCol p + p { margin-left: calc(40 * var(--rs)); } .md-impressionDetail .secPhotographer .photographer .introCol .ancCol .btn { display: inline-block; padding: 0 calc(14 * var(--rs)) 0 0; text-decoration: underline; font-size: calc(14 * var(--rs)); line-height: 2; letter-spacing: 0.01em; color: #fff; position: relative; } .md-impressionDetail .secPhotographer .photographer .introCol .ancCol a[target="_blank"]::after { content: " "; width: calc(8 * var(--rs)); height: calc(8 * var(--rs)); background: var(--icn-blank-white); position: absolute; top: calc(10 * var(--rs)); right: 0; } .md-impressionDetail .secPhotographer .photographer .introCol .ancCol a.btn:hover { text-decoration: none; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .secPhotographer .photographer { padding: calc(120 * var(--rs)) calc(40 * var(--rs)); } .md-impressionDetail .secPhotographer .photographer .introduce { display: block; } .md-impressionDetail .secPhotographer .photographer .introduce + .introduce { margin-top: calc(100 * var(--rs)); } .md-impressionDetail .secPhotographer .photographer .introduce .introImg { width: calc(190 * var(--rs)); } .md-impressionDetail .secPhotographer .photographer .introCol { margin-top: calc(32 * var(--rs)); padding-left: 0; } .md-impressionDetail .secPhotographer .photographer .introCol .name { font-size: calc(34 * var(--rs)); line-height: 1.235; } .md-impressionDetail .secPhotographer .photographer .introCol .job { font-size: calc(26 * var(--rs)); margin-top: calc(10 * var(--rs)); } .md-impressionDetail .secPhotographer .photographer .introCol .txtWrap { margin-top: calc(30 * var(--rs)); } .md-impressionDetail .secPhotographer .photographer .introCol .txtWrap .txt { font-size: calc(30 * var(--rs)); line-height: 1.6; } .md-impressionDetail .secPhotographer .photographer .introCol .ancCol { display: block; margin-top: calc(35 * var(--rs)); } .md-impressionDetail .secPhotographer .photographer .introCol .ancCol p + p { margin-left: 0; margin-top: calc(20 * var(--rs)); } .md-impressionDetail .secPhotographer .photographer .introCol .ancCol .btn { padding: 0 calc(28 * var(--rs)) 0 0; font-size: calc(24 * var(--rs)); } .md-impressionDetail .secPhotographer .photographer .introCol .ancCol a[target="_blank"]::after { width: calc(16 * var(--rs)); height: calc(16 * var(--rs)); top: calc(18 * var(--rs)); } } /*テスト用*/ .md-impressionDetail .ctsModule .imgCol .modImg, .md-impressionDetail .ctsModule .imgCol .modImg + .itemCap { /*display: none;*/ } .md-impressionDetail .ctsModule .imgCol .modImg--multi, .md-impressionDetail .ctsModule .imgCol .modImg--multi + .itemCap { /*display: none;*/ } .md-impressionDetail .detailWrap .detailVis { position: relative; } .md-impressionDetail .detailWrap .detailVis .titleCol { width: calc(424 * var(--rs)); } .md-impressionDetail .detailWrap .titleCol .leadCol { margin-top: calc(36 * var(--rs)); } .md-impressionDetail .detailWrap .detailVis .titleCol .leadCol { margin-top: calc(26 * var(--rs)); } .md-impressionDetail .detailWrap .titleCol .leadCol p { font-size: calc(16 * var(--rs)); line-height: 2.3; } .md-impressionDetail .detailWrap .titleCol .leadCol .lead:not(:first-child) { margin-top: calc(40 * var(--rs)); } .md-impressionDetail .detailWrap .detailVis .titleVis { width: 100%; padding-left: calc(50% - calc(95 * var(--rs))); position: absolute; top: 0; left: 0; pointer-events: none; } .md-impressionDetail .detailWrap .detailVis .titleVis .imgCol { width: 100%; max-width: calc(930 * var(--rs)); pointer-events: all; } .md-impressionDetail .detailWrap .detailVis .titleVis .imgCol .modImg { /* display: none; */ } .md-impressionDetail .detailWrap .detailVis .titleVis .imgCol .modImg .img { display: block; } .md-impressionDetail .detailWrap .detailVis .titleVis .imgCol .modImg img { width: 100%; height: auto; } .md-impressionDetail .detailWrap .detailVis .titleVis .imgCol .itemCap { font-size: calc(14 * var(--rs)); line-height: 1.5; text-align: left; padding-top: calc(20 * var(--rs)); margin-top: 0 !important; } .md-secProductMovie .movThum { margin-top: calc(60 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-impressionDetail .detailWrap .detailVis .titleCol { width: 100%; } .md-impressionDetail .detailWrap .titleCol .leadCol { margin-top: calc(60 * var(--rs)); } .md-impressionDetail .detailWrap .detailVis .titleCol .leadCol { margin-top: calc(140 * var(--rs)); } .md-impressionDetail .detailWrap .titleCol .leadCol p { font-size: calc(32 * var(--rs)); line-height: 2; } .md-impressionDetail .detailWrap .titleCol .leadCol .lead:not(:first-child) { margin-top: calc(70 * var(--rs)); } .md-impressionDetail .detailWrap .detailVis .titleVis { width: auto; margin: calc(40 * var(--rs)) calc(-40 * var(--rs)) 0; padding-left: 0; position: static; } .md-impressionDetail .detailWrap .detailVis .titleVis .imgCol .itemCap { font-size: calc(26 * var(--rs)); line-height: 1.53; padding: calc(38 * var(--rs)) calc(40 * var(--rs)) 0; } } /* -------------------------------------------- ↑↑↑ インプレッション詳細 ↑↑↑ -------------------------------------------- */ .md-squareBtnWrap { display: flex; justify-content: center; margin-top: calc(80 * var(--rs)); } .md-squareBtnWrap .btnLine { width: calc(300 * var(--rs)); } .page-camerasDetailTop .md-squareBtnWrap { flex-direction: column; align-items: center; justify-content: flex-start; } .md-squareBtnWrap .btnLine.recommendation { width: calc(540 * var(--rs)); margin-top: calc(50 * var(--rs)); } .md-squareBtnWrap .btnLine.recommendation .md-btnSquare { flex-direction: column; min-height: auto; box-sizing: border-box; padding: calc(25 * var(--rs)) calc(70 * var(--rs)); background: #fff; border: 1px solid #c9c9c9; color: #000; font-size: calc(18 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.5; position: relative; } .md-squareBtnWrap .btnLine.recommendation .md-btnSquare::after { content: " "; width: calc(20 * var(--rs)); height: calc(20 * var(--rs)); background: url(/special/archive-contents/common/images/icn_slide_circle_r.svg) no-repeat center /contain; position: absolute; top: 50%; right: calc(30 * var(--rs)); transform: translateY(-50%); } .md-squareBtnWrap .btnLine.recommendation .md-btnSquare .sub { display: inline-block; margin-top: calc(6 * var(--rs)); font-size: calc(11 * var(--rs)); line-height: 2; } .page-detailAccessory .md-secFeatureDetail { padding-top: calc(60 * var(--rs)); } .page-detailAccessory .md-secFeatureDetail + .md-secFeatureDetail, .page-detailAccessory .md-secFeatureDetail + .md-detailToggleWrap .md-secFeatureDetail, .page-detailAccessory .md-detailToggleWrap + .md-detailToggleWrap .md-secFeatureDetail, .page-detailAccessory .md-detailToggleWrap + .md-secFeatureDetail { padding-top: calc(100 * var(--rs)); } .page-detailAccessory .secAccessory .md-squareBtnWrap .btnLine { width: calc(214 * var(--rs)); } .md-squareBtnWrap._is-download .md-btnSquare { position: relative; padding-left: calc(20 * var(--rs)); box-sizing: border-box; } .md-squareBtnWrap._is-download .md-btnSquare::before { content: " "; width: calc(12 * var(--rs)); height: calc(12 * var(--rs)); background: url(/special/archive-contents/common/images/icn_download.svg) no-repeat center center; background-size: 100% auto; position: absolute; top: 50%; left: calc(20 * var(--rs)); transform: translateY(-50%); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-squareBtnWrap { align-items: center; width: calc(326 * var(--rs)); margin: calc(100 * var(--rs)) auto 0; } .md-squareBtnWrap.squareItemWrap { width: auto; margin: calc(100 * var(--rs)) calc(-9 * var(--rs)) 0; } .md-squareBtnWrap .btnLine { width: 100%; padding: 0; } .md-squareBtnWrap.squareItemWrap .btnLine { width: 50%; box-sizing: border-box; padding: 0 calc(9 * var(--rs)); } .md-squareBtnWrap .btnLine.recommendation { width: 100%; margin-top: calc(40 * var(--rs)); padding: 0; } .md-squareBtnWrap .btnLine.recommendation .md-btnSquare { width: 100%; padding: calc(44 * var(--rs)) calc(90 * var(--rs)); font-size: calc(32 * var(--rs)); } .md-squareBtnWrap .btnLine.recommendation .md-btnSquare::after { width: calc(40 * var(--rs)); height: calc(40 * var(--rs)); } .md-squareBtnWrap .btnLine.recommendation .md-btnSquare .sub { margin-top: calc(12 * var(--rs)); font-size: calc(22 * var(--rs)); line-height: 1.4; } .page-detailAccessory .md-secFeatureDetail { padding-top: calc(60 * var(--rs)); } .page-detailAccessory .md-secFeatureDetail + .md-secFeatureDetail, .page-detailAccessory .md-secFeatureDetail + .md-detailToggleWrap .md-secFeatureDetail, .page-detailAccessory .md-detailToggleWrap + .md-detailToggleWrap .md-secFeatureDetail, .page-detailAccessory .md-detailToggleWrap + .md-secFeatureDetail { padding-top: calc(130 * var(--rs)); } .page-detailAccessory .secAccessory .md-squareBtnWrap .btnLine { width: auto; } .md-squareBtnWrap .btnLine .md-btnSquare { height: auto; box-sizing: border-box; padding: calc(22 * var(--rs)) calc(20 * var(--rs)); text-align: center; line-height: 1.6; } .md-squareBtnWrap._is-download { width: calc(450 * var(--rs)); } .md-squareBtnWrap._is-download .md-btnSquare { padding-left: calc(40 * var(--rs)); box-sizing: border-box; } .md-squareBtnWrap._is-download .md-btnSquare::before { content: " "; width: calc(30 * var(--rs)); height: calc(30 * var(--rs)); left: calc(40 * var(--rs)); transform: translateY(-50%); } } .md-detailListImg .supplement { margin-top: calc(36 * var(--rs)); } .page-detailSpec .md-detailListImg .note { margin-top: calc(16 * var(--rs)); margin-left: calc(350 * var(--rs)); font-size: calc(13 * var(--rs)); line-height: 1.43; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-detailListImg .supplement { width: 100%; margin-top: calc(60 * var(--rs)); } .page-detailSpec .md-detailListImg .note { margin-top: calc(32 * var(--rs)); margin-left: 0; font-size: calc(28 * var(--rs)); } } .md-followingHd { width: 100%; box-sizing: border-box; padding: 0 calc(50 * var(--rs)); background: #fff; position: fixed; top: 0; left: 0; z-index: 990; transition: top 0.3s linear; } .md-followingHd.js-showFollowing { top: calc(90 * var(--rs)); } .md-followingHd .followInr { max-width: 1200px; margin: 0 auto; } .md-followingHd .ctsWrap { display: flex; align-items: center; box-sizing: border-box; padding: calc(14 * var(--rs)) 0; } .md-followingHd .ctsWrap .secTtl { flex: 1; box-sizing: border-box; padding-right: calc(20 * var(--rs)); } .md-followingHd .ctsWrap .secTtl .pageTtl { font-size: calc(20 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.6; } .md-followingHd .ctsWrap .tabLine { display: flex; align-items: center; } .md-followingHd .ctsWrap .tabLine .tabWrap { display: flex; } .md-followingHd .ctsWrap .tabLine .tabWrap .tab { box-sizing: border-box; padding: calc(2 * var(--rs)) calc(6 * var(--rs)) 0; } .md-followingHd .ctsWrap .tabLine .tabWrap .tab .tabInr { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 calc(15 * var(--rs)); text-decoration: none; color: #111; font-size: calc(13 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.5; position: relative; } .md-followingHd .ctsWrap .tabLine .tabWrap .tab .tabInr[target="_blank"] { margin-left: calc(15 * var(--rs)); padding-left: calc(35 * var(--rs)); border-left: 1px solid #c9c9c9; } .md-followingHd .ctsWrap .tabLine .tabWrap .tab .tabInr[target="_blank"]::after { content: ""; display: inline-block; width: calc(10 * var(--rs)); height: calc(10 * var(--rs)); margin-left: calc(4 * var(--rs)); background: var(--icn-blank-black); vertical-align: middle; transition: background 0.3s linear; } .md-followingHd .ctsWrap .tabLine .tabWrap .tab .tabInr[target="_blank"]::before { width: calc(100% - calc(29 * var(--rs))); left: auto; right: 0; } .md-followingHd .ctsWrap .tabLine .tabWrap .tab .tabInr::before { content: ""; width: 100%; height: 2px; background-color: #222; position: absolute; bottom: calc(-6 * var(--rs)); left: 0; opacity: 0; } .md-followingHd .ctsWrap .tabLine .tabWrap .tab input { display: none; } .md-followingHd .ctsWrap .tabLine .tabWrap .tab .tabInr:hover::before, .md-followingHd .ctsWrap .tabLine .tabWrap .tab.tab--current .tabInr::before, .md-followingHd .ctsWrap .tabLine .tabWrap .tab input:checked + .tabInr { opacity: 1; } .md-followingHd .ctsWrap .tabLine .cartBtn { display: flex; align-items: center; justify-content: center; height: calc(36 * var(--rs)); margin-left: calc(10 * var(--rs)); box-sizing: border-box; padding: calc(6 * var(--rs)) calc(10 * var(--rs)); border-radius: calc(3 * var(--rs)); background: #222; color: #fff; text-decoration: none; cursor: pointer; transition: opacity 0.3s linear; } .md-followingHd .ctsWrap .tabLine .cartBtn:hover { opacity: 0.7; } .md-followingHd .ctsWrap .tabLine .cartBtn .btn .txt { color: #fff; box-sizing: border-box; padding-left: calc(26 * var(--rs)); font-size: calc(13 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.2; position: relative; } .md-followingHd .ctsWrap .tabLine .cartBtn .btn .txt::before { content: " "; width: calc(18 * var(--rs)); height: calc(16 * var(--rs)); background: url(/special/archive-contents/common/images/icn_cart.svg) no-repeat center / contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-followingHd { width: 100%; padding: 0 calc(40 * var(--rs)); top: calc(-115 * var(--rs)); } .md-followingHd.js-showFollowing { top: calc(118 * var(--rs)); } .md-followingHd .ctsWrap { display: block; padding: calc(15 * var(--rs)) calc(45 * var(--rs)); } .md-followingHd .ctsWrap .secTtl { display: none; } .md-followingHd .ctsWrap .tabLine { display: block; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } .md-followingHd .ctsWrap .tabLine::-webkit-scrollbar { display: none; } .md-followingHd .ctsWrap .tabLine .tabWrap { width: -webkit-max-content; width: -moz-max-content; width: max-content; margin: 0 calc(-7 * var(--rs)); } .md-followingHd .ctsWrap .tabLine .tabWrap .tab { width: auto; padding: 0 calc(15 * var(--rs)) calc(6 * var(--rs)); } .md-followingHd .ctsWrap .tabLine .tabWrap .tab .tabInr { height: calc(54 * var(--rs)); padding: 0 calc(20 * var(--rs)); font-size: calc(26 * var(--rs)); } .md-followingHd .ctsWrap .tabLine .tabWrap .tab .tabInr[target="_blank"]::after { width: calc(22 * var(--rs)); height: calc(22 * var(--rs)); } .md-followingHd .ctsWrap .tabLine .cartBtn { display: none; } .md-followingHd .followInr { max-width: 1200px; margin: 0 auto; position: relative; } .md-followingHd .spNavPager { display: flex; align-items: center; justify-content: center; width: calc(85 * var(--rs)); height: 100%; background: #fff; cursor: pointer; position: absolute; top: 0; } .md-followingHd .spNavPager.spNavPagerL { left: calc(-40 * var(--rs)); } .md-followingHd .spNavPager.spNavPagerR { right: calc(-40 * var(--rs)); } .md-followingHd .spNavPager .icn { width: calc(38 * var(--rs)); height: calc(38 * var(--rs)); font-size: 0; } .md-followingHd .spNavPager .icn::before { content: " "; display: inline-block; width: 100%; height: 100%; background: no-repeat center / contain; } .md-followingHd .spNavPager.spNavPagerL .icn::before { background-image: url(/special/archive-contents/common/images/icn_nav_pager_l.svg); } .md-followingHd .spNavPager.spNavPagerR .icn::before { background-image: url(/special/archive-contents/common/images/icn_nav_pager_r.svg); } .md-followingHd .spNavPager.spNavPagerL.js-hide, .md-followingHd .spNavPager.spNavPagerR.js-hide { display: none; } .md-followingHd.js-first .spNavPager.spNavPagerL, .md-followingHd.js-last .spNavPager.spNavPagerR { display: none; } .md-followingHd.js-notSlid .spNavPager.spNavPagerL, .md-followingHd.js-notSlid .spNavPager.spNavPagerR { display: none !important; } } /* =================================== ↓↓↓ wiswig実装予定 ↓↓↓ =================================== */ /* ↓↓↓ ダウンロードボタン ↓↓↓ */ .md-userAncWrap { display: flex; flex-wrap: wrap; margin-top: calc(12 * var(--rs)); } .md-userCreatBtn { display: inline-flex; align-items: center; justify-content: center; min-height: calc(50 * var(--rs)); margin-top: calc(10 * var(--rs)); margin-right: calc(20 * var(--rs)); box-sizing: border-box; padding: calc(2 * var(--rs)) calc(36 * var(--rs)); background: #000; color: #fff; text-decoration: none !important; font-size: calc(14 * var(--rs)); font-weight: bold; line-height: 1.2; transition: opacity 0.3s linear; } .md-secFeatureDetail.detail-typeLeft .dtlList .item-textOnly .md-userCreatBtn { min-height: calc(36 * var(--rs)); } .md-userCreatBtn:hover { opacity: 0.7; text-decoration: underline !important; } .md-userCreatBtn[target="_blank"]::after { content: " "; display: inline-block; width: calc(10 * var(--rs)); height: calc(10 * var(--rs)); margin-left: calc(10 * var(--rs)); background: var(--icn-blank-white); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-userAncWrap { display: flex; flex-wrap: wrap; margin-top: calc(40 * var(--rs)); margin-left: calc(-20 * var(--rs)); margin-right: calc(-20 * var(--rs)); } .md-userCreatBtn { display: inline-flex; min-width: calc(326 * var(--rs)); min-height: calc(90 * var(--rs)); margin-top: calc(20 * var(--rs)); margin-right: calc(20 * var(--rs)); margin-right: auto; padding: calc(4 * var(--rs)) calc(14 * var(--rs)); font-size: calc(26 * var(--rs)); } .md-secFeatureDetail.detail-typeLeft .dtlList .item-textOnly .md-userCreatBtn { min-height: calc(90 * var(--rs)); } .md-userCreatBtn[target="_blank"]::after { width: calc(22 * var(--rs)); height: calc(22 * var(--rs)); margin-left: calc(20 * var(--rs)); } } /* ↑↑↑ ダウンロードボタン ↑↑↑ */ /* ↓↓↓ モーダルアイコン md-infoTxtLink ↓↓↓ */ .md-infoTxtLink { display: inline-block; padding-left: calc(24 * var(--rs)); font-size: calc(16 * var(--rs)); position: relative; cursor: pointer; } .md-infoTxtLink::before { content: ""; display: block; position: absolute; top: calc(8 * var(--rs)); /* top: 0; */ left: calc(4 * var(--rs)); width: calc(16 * var(--rs)); height: calc(16 * var(--rs)); background: var(--icn-info-black); } .md-infoTxtLink:hover { text-decoration: underline; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-infoTxtLink { padding-left: calc(44 * var(--rs)); font-size: calc(32 * var(--rs)); } .md-infoTxtLink::before { width: calc(29 * var(--rs)); height: calc(29 * var(--rs)); top: calc(18 * var(--rs)); left: calc(8 * var(--rs)); } } /* ↑↑↑ モーダルアイコン md-infoTxtLink ↑↑↑ */ /* ↓↓↓ 連番テキスト ↓↓↓ */ .md-icnNumTxt { display: inline-flex; align-items: center; justify-content: center; width: calc(18 * var(--rs)); height: calc(18 * var(--rs)); box-sizing: border-box; padding: calc(2 * var(--rs)) calc(1 * var(--rs)) calc(2 * var(--rs)); border-radius: 100%; background: #f91712; color: #fff; text-align: center; font-size: calc(13 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-icnNumTxt { width: calc(36 * var(--rs)); height: calc(36 * var(--rs)); padding: calc(4 * var(--rs)) calc(2 * var(--rs)) calc(4 * var(--rs)); font-size: calc(26 * var(--rs)); } } /* ↑↑↑ 連番テキスト ↑↑↑ */ /* ↓↓↓ 仕様ページ チャート補足 ↓↓↓ */ .md-chartExpo { display: table; table-layout: fixed; width: 100%; max-width: calc(534 * var(--rs)) !important; margin-left: calc(350 * var(--rs)); box-sizing: border-box; border-top: 1px solid #c9c9c9; border-left: 1px solid #c9c9c9; } .md-chartExpo th, .md-chartExpo td { box-sizing: border-box; padding: calc(4 * var(--rs)) calc(10 * var(--rs)); border-right: 1px solid #c9c9c9; border-bottom: 1px solid #c9c9c9; text-align: center; vertical-align: middle; } .md-chartExpo th { background: #eaeaea; font-size: calc(15 * var(--rs)); } .md-chartExpo th:first-child { width: calc(116 * var(--rs)); } .md-chartExpo tr:first-child th { font-size: calc(14 * var(--rs)); font-weight: var(--weight-medium); } .md-chartExpo td { table-layout: fixed; } .md-chartExpo td .md-chartBorder, .md-chartExpo td .md-chartDashed { display: flex; align-items: center; justify-content: center; width: calc(65 * var(--rs)); margin: 0 auto; } .md-chartExpo td .md-chartBorder .i { width: 100%; height: 2px; } .md-chartExpo td .md-chartDashed .i { width: 33%; height: 2px; margin: 0 7%; } .md-chartBorder--red .i, .md-chartDashed--red .i { background-color: #db3548; } .md-chartBorder--blue .i, .md-chartDashed--blue .i { background-color: #1c487f; } .md-chartBorder--green .i, .md-chartDashed--green .i { background-color: #00623b; } .md-chartExpo--light .md-chartBorder--green .i, .md-chartExpo--light .md-chartDashed--green .i { background-color: #9bbb59; } .md-chartExpo.md-chartExpo--light { max-width: calc(300 * var(--rs)) !important; margin-left: calc(50 * var(--rs)); } .md-chartExpo.md-chartExpo--light .tr { display: flex; } .md-chartExpo.md-chartExpo--light .th, .md-chartExpo.md-chartExpo--light .td { box-sizing: border-box; padding: calc(4 * var(--rs)) calc(10 * var(--rs)); border-right: 1px solid #c9c9c9; border-bottom: 1px solid #c9c9c9; text-align: center; vertical-align: middle; } .md-chartExpo.md-chartExpo--light .th { width: calc(90 * var(--rs)); background: #eaeaea; font-size: calc(14 * var(--rs)); font-weight: var(--weight-medium); } .md-chartExpo.md-chartExpo--light .td .md-chartBorder, .md-chartExpo.md-chartExpo--light .td .md-chartDashed { display: flex; align-items: center; justify-content: center; width: calc(120 * var(--rs)); min-height: calc(24 * var(--rs)); margin: 0 auto; } .md-chartExpo.md-chartExpo--light .td { flex: 1; } .md-chartExpo.md-chartExpo--light .td .md-chartBorder .i { width: 100%; height: 2px; } .md-chartExpo.md-chartExpo--light .td .md-chartDashed .i { width: calc(100% / 3 - calc(10 * var(--rs))); height: 2px; /* margin: 0 7%; */ } .md-chartExpo.md-chartExpo--light .td .md-chartDashed .i:first-child { margin-right: calc(20 * var(--rs)); } .md-chartExpo.md-chartExpo--light .td .md-chartDashed .i:last-child { margin-left: calc(20 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-chartExpo { width: auto; max-width: 100% !important; margin-left: 0; } .md-chartExpo th { font-size: calc(28 * var(--rs)); } .md-chartExpo tr:first-child th { font-size: calc(28 * var(--rs)); } .md-chartExpo td .md-chartBorder, .md-chartExpo td .md-chartDashed { width: calc(120 * var(--rs)); } .md-chartExpo th:first-child { width: calc(244 * var(--rs)); } .md-chartExpo th:not(:first-child) { width: calc(214 * var(--rs)); } .md-chartExpo th, .md-chartExpo td { padding: calc(6 * var(--rs)) calc(4 * var(--rs)); } .md-chartExpo.md-chartExpo--light { display: flex; max-width: 100% !important; margin-left: 0; } .md-chartExpo.md-chartExpo--light .tr { display: block; width: calc(100% / 3); } .md-chartExpo.md-chartExpo--light .th, .md-chartExpo.md-chartExpo--light .td { height: calc(60 * var(--rs)); box-sizing: border-box; padding: calc(4 * var(--rs)) calc(10 * var(--rs)); border-right: 1px solid #c9c9c9; border-bottom: 1px solid #c9c9c9; text-align: center; vertical-align: middle; } .md-chartExpo.md-chartExpo--light .th { display: flex; align-items: center; justify-content: center; width: 100%; background: #eaeaea; font-size: calc(28 * var(--rs)); font-weight: var(--weight-medium); } .md-chartExpo.md-chartExpo--light .td .md-chartBorder, .md-chartExpo.md-chartExpo--light .td .md-chartDashed { display: flex; align-items: center; justify-content: center; width: calc(120 * var(--rs)); height: 100%; min-height: calc(24 * var(--rs)); margin: 0 auto; } .md-chartExpo.md-chartExpo--light .td { flex: 1; } .md-chartExpo.md-chartExpo--light .td .md-chartBorder .i { width: 100%; height: 2px; } } /* ↑↑↑ 仕様ページ チャート補足 ↑↑↑ */ /* ↓↓↓ プロダクトアイテム ↓↓↓ */ .md-prodItemWrap { display: flex; flex-wrap: wrap; justify-content: center; } .md-prodItemWrap .item { width: 100%; margin-top: calc(20 * var(--rs)); box-sizing: border-box; padding: calc(20 * var(--rs)); } .md-prodItemWrap .item .itemInr { display: flex; flex-direction: column; } .md-prodItemWrap .item .itemThum .thumInr { display: block; text-decoration: none; transition: opacity 0.3s linear; } .md-prodItemWrap .item .itemThum a.thumInr:hover { opacity: 0.7; } .md-prodItemWrap .item .itemThum .img { width: calc(205 * var(--rs)); height: calc(164 * var(--rs)); margin: 0 auto; overflow: hidden; } .md-prodItemWrap .item .itemThum .img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .md-prodItemWrap .item .itemThum .itemName { margin-top: calc(14 * var(--rs)); } .md-prodItemWrap .item .itemThum .itemName p { margin-top: 0; text-align: center; font-size: calc(16 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.6; } .md-prodItemWrap .item .dtlTxtCol { word-break: break-all; margin-top: calc(13 * var(--rs)); } .md-prodItemWrap .item .dtlTxtCol p { margin-top: 0; font-size: calc(15 * var(--rs)); line-height: 2; } .md-prodItemWrap .item.item--widL { width: 80%; } .md-prodItemWrap .item.item--widM { width: 60%; } .md-prodItemWrap .item.item--wid02 { width: 50%; } .md-prodItemWrap .item.item--wid03 { width: calc(100% / 3); } .md-prodItemWrap .item.item--wid04 { width: 25%; } /* SP -------------------------------------*/ @media screen and (max-width: 768px) { .md-prodItemWrap { display: block; padding-top: calc(80 * var(--rs)); padding-bottom: calc(60 * var(--rs)); } .md-prodItemWrap .item { width: auto; margin-top: 0; box-sizing: border-box; padding: 0; } .md-prodItemWrap .item:not(:first-child) { margin-top: calc(70 * var(--rs)); } .md-prodItemWrap .item .itemThum .thumInr { display: flex; align-items: center; } .md-prodItemWrap .item .itemThum .img { order: 1; width: calc(268 * var(--rs)); height: calc(220 * var(--rs)); margin: 0; } .md-prodItemWrap .item .itemThum .itemName { margin-top: 0; flex: 1; } .md-prodItemWrap .item .itemThum .itemName p { text-align: left; font-size: calc(32 * var(--rs)); line-height: 1.5; } .md-prodItemWrap .item .dtlTxtCol { margin-top: calc(6 * var(--rs)); } .md-prodItemWrap .item .dtlTxtCol p { margin-top: 0; font-size: calc(30 * var(--rs)); line-height: 2; } .md-prodItemWrap .item.item--widL { width: 100%; } .md-prodItemWrap .item.item--widM { width: 100%; } .md-prodItemWrap .item.item--wid02 { width: 100%; } .md-prodItemWrap .item.item--wid03 { width: 100%; } .md-prodItemWrap .item.item--wid04 { width: 100%; } } /* ↑↑↑ プロダクトアイテム ↑↑↑ */ /* =================================== ↑↑↑ wiswig実装予定 ↑↑↑ =================================== */ /* シネレンズラインナップ */ .md-secItemLineUp { padding-top: calc(70 * var(--rs)); padding-bottom: calc(130 * var(--rs)); } .md-secItemLineUp h2 { font-size: calc(28 * var(--rs)); line-height: 1.6; } .md-secItemLineUp .itemSlideWrap { margin-top: calc(50 * var(--rs)); } .md-secItemLineUp .item { padding: 0 calc(28 * var(--rs)); box-sizing: border-box; } .md-secItemLineUp .itemInr { text-align: center; } .md-secItemLineUp .img img { width: 100%; height: auto; } .md-secItemLineUp .cap { margin-top: calc(5 * var(--rs)); font-size: calc(16 * var(--rs)); line-height: 1.6; } .md-secItemLineUp .slideBtn { position: absolute; bottom: calc(-15 * var(--rs)); right: calc(-10 * var(--rs)); transform: translateY(100%); display: flex; align-items: center; } .md-secItemLineUp .next, .md-secItemLineUp .prev { margin: 0 calc(10 * var(--rs)); width: calc(46 * var(--rs)); height: calc(46 * var(--rs)); background-repeat: no-repeat; background-position: center center; background-size: cover; cursor: pointer; } .md-secItemLineUp .next { background-image: url(/special/archive-contents/common/images/icn_slide_circle_r.svg); } .md-secItemLineUp .prev { background-image: url(/special/archive-contents/common/images/icn_slide_circle_l.svg); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-secItemLineUp { padding-top: calc(90 * var(--rs)); padding-bottom: calc(120 * var(--rs)); } .md-secItemLineUp h2 { font-size: calc(50 * var(--rs)); } .md-secItemLineUp .itemSlideWrap { margin: calc(20 * var(--rs)) calc(40 * var(--rs)) 0; width: auto; } .md-secItemLineUp .item { padding: 0 calc(25 * var(--rs)); } .md-secItemLineUp .cap { margin-top: calc(20 * var(--rs)); font-size: calc(32 * var(--rs)); } .md-secItemLineUp .slideBtn { display: contents; } .md-secItemLineUp .next, .md-secItemLineUp .prev { margin: 0; width: calc(90 * var(--rs)); height: calc(90 * var(--rs)); position: absolute; top: 50%; transform: translateY(-90%); } .md-secItemLineUp .next { right: calc(-65 * var(--rs)); } .md-secItemLineUp .prev { left: calc(-65 * var(--rs)); } } .md-secShotOn { background-color: #0b0b0b; padding-top: calc(90 * var(--rs)); padding-bottom: calc(100 * var(--rs)); } .md-secShotOn .secShotOnInr { position: relative; } .md-secShotOn .secTtlWrap { color: #fff; position: absolute; top: calc(90 * var(--rs)); left: 0; } .md-secShotOn .secTtlWrap h2 { font-size: calc(48 * var(--rs)); line-height: 1.6; } .md-secShotOn .secTtlWrap p { margin-top: calc(30 * var(--rs)); font-size: calc(16 * var(--rs)); line-height: 2; } .md-secShotOn .secItemListWrap { display: flex; align-items: flex-end; margin: 0 calc(-12 * var(--rs)); } .md-secShotOn .secItemList { flex: 1; display: flex; align-items: flex-start; } .md-secShotOn .secItemList .img { width: calc(146 * var(--rs)); height: calc(196 * var(--rs)); overflow: hidden; } .md-secShotOn .secItemList .img img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .md-secShotOn .secItem { padding: 0 calc(12 * var(--rs)); box-sizing: border-box; color: #fff; } .md-secShotOn .secPickItem { width: calc(540 * var(--rs)); text-align: center; order: 2; } .md-secShotOn .secPickItem .img { height: calc(723 * var(--rs)); overflow: hidden; } .md-secShotOn .secPickItem .img img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .md-secShotOn .secItemInr { position: relative; display: block; text-decoration: none; } .md-secShotOn .secItemInr img { width: 100%; } .md-secShotOn .secItemInr .cap { position: absolute; bottom: calc(-10 * var(--rs)); left: 0; transform: translateY(100%); color: #fff; font-size: calc(18 * var(--rs)); line-height: 1.6; width: 100%; } .md-secShotOn .secItemInr:hover .cap { text-decoration: underline; } .md-secShotOn .md-squareBtnWrap { margin-top: calc(120 * var(--rs)); } .md-secShotOn .md-btnSquare { min-height: calc(50 * var(--rs)); border: 1px solid #fff; background-color: transparent; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-secShotOn { padding-top: calc(90 * var(--rs)); padding-bottom: calc(140 * var(--rs)); } .md-secShotOn .secTtlWrap { position: static; } .md-secShotOn .secTtlWrap h2 { font-size: calc(50 * var(--rs)); } .md-secShotOn .secTtlWrap p { margin-top: calc(50 * var(--rs)); font-size: calc(32 * var(--rs)); line-height: 2; } .md-secShotOn .secItemListWrap { display: block; margin: 0; } .md-secShotOn .secItemList { display: flex; align-items: flex-start; margin: calc(60 * var(--rs)) calc(-40 * var(--rs)) 0 0; width: auto; } .md-secShotOn .secItemList .img { width: auto; height: calc(347 * var(--rs)); } .md-secShotOn .secItem { flex: none; padding: 0 calc(12 * var(--rs)); box-sizing: border-box; color: #fff; } .md-secShotOn .secPickItem { width: calc(460 * var(--rs)); margin: calc(90 * var(--rs)) auto 0; } .md-secShotOn .secPickItem .img { height: auto; } .md-secShotOn .secPickItem .img img { height: auto; } .md-secShotOn .secItemInr .cap { position: static; transform: translateY(0); margin-top: calc(10 * var(--rs)); font-size: calc(36 * var(--rs)); } .md-secShotOn .md-squareBtnWrap { margin-top: calc(120 * var(--rs)); } .md-secShotOn .btnLine { width: 100%; } .md-secShotOn .md-btnSquare { border: 1px solid #fff; background-color: transparent; } } .md-specDetailTable { margin-top: calc(40 * var(--rs)); } .md-specDetailTable .tableArea { overflow-x: auto; overflow-y: hidden; } .md-specDetailTable .tableArea table { width: auto; } .md-specDetailTable .tableArea th { background-color: #f2f2f2; text-align: left; } .md-specDetailTable .tableArea th, .md-specDetailTable .tableArea td { border: 1px solid #c9c9c9; text-align: left; padding: calc(10 * var(--rs)) calc(18 * var(--rs)); box-sizing: border-box; line-height: 1.5; } .md-specDetailTable .tableArea td { min-width: calc(295 * var(--rs)) !important; font-size: calc(15 * var(--rs)); } .md-specDetailTable .tableArea tr:first-of-type th { background-color: #eaeaea; font-weight: 500; font-size: calc(18 * var(--rs)); } .md-specDetailTable .tableArea th:first-of-type { min-width: calc(270 * var(--rs)) !important; font-weight: 500; font-size: calc(16 * var(--rs)); } .md-specDetailTable .tableArea .md-infoTxtLink { width: calc(16 * var(--rs)); height: calc(16 * var(--rs)); margin-left: calc(10 * var(--rs)); } .md-specDetailTable .tableArea strong { font-weight: 500; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-specDetailTable { margin-top: calc(60 * var(--rs)); } .md-specDetailTable .tableArea table { width: auto; } .md-specDetailTable .tableArea th, .md-specDetailTable .tableArea td { border: 1px solid #c9c9c9; text-align: left; padding: calc(25 * var(--rs)) calc(30 * var(--rs)); } .md-specDetailTable .tableArea td { min-width: calc(515 * var(--rs)) !important; font-size: calc(28 * var(--rs)); } .md-specDetailTable .tableArea tr:first-of-type th { font-size: calc(36 * var(--rs)); } .md-specDetailTable .tableArea th:first-of-type { min-width: calc(450 * var(--rs)) !important; font-size: calc(30 * var(--rs)); } .md-specDetailTable .tableArea .md-infoTxtLink { width: calc(32 * var(--rs)); height: calc(32 * var(--rs)); margin-left: calc(20 * var(--rs)); } .md-specDetailTable .tableArea .md-infoTxtLink::before { top: calc(7 * var(--rs)); } .md-specDetailTable .tableArea .th { margin: calc(-25 * var(--rs)) calc(-30 * var(--rs)) calc(25 * var(--rs)) calc(-30 * var(--rs)); padding: calc(25 * var(--rs)) calc(30 * var(--rs)); box-sizing: border-box; background-color: #f7f7f7; border-bottom: 1px solid #c9c9c9; } } .md-shotOnSigma { margin-bottom: calc(100 * var(--rs)); } .md-shotOnSigma .ttl { margin-top: calc(70 * var(--rs)); font-size: calc(36 * var(--rs)); line-height: 1.5; } .md-shotOnSigma .listWrap { display: flex; flex-wrap: wrap; margin: calc(15 * var(--rs)) calc(-15 * var(--rs)) 0; } .md-shotOnSigma .listItem { width: 33.33333%; padding: calc(30 * var(--rs)) calc(15 * var(--rs)); box-sizing: border-box; } .md-shotOnSigma .listItem a { display: block; text-decoration: none; } .md-shotOnSigma .listItem .img { background-color: #f4f4f5; } .md-shotOnSigma .listItem img { width: 100%; height: calc(506 * var(--rs)); -o-object-fit: contain; object-fit: contain; } .md-shotOnSigma .listItem .txt { margin-top: calc(15 * var(--rs)); } .md-shotOnSigma .listItem .itemTtl { font-size: calc(18 * var(--rs)); font-weight: 500; line-height: 1.5; } .md-shotOnSigma .listItem .itemSubTtl { margin-top: calc(5 * var(--rs)); font-size: calc(15 * var(--rs)); line-height: 1.5; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-shotOnSigma { margin-bottom: calc(100 * var(--rs)); } .md-shotOnSigma .ttl { margin-top: calc(60 * var(--rs)); font-size: calc(50 * var(--rs)); } .md-shotOnSigma .listWrap { margin: calc(20 * var(--rs)) calc(-20 * var(--rs)) 0; } .md-shotOnSigma .listItem { width: 50%; padding: calc(20 * var(--rs)) calc(20 * var(--rs)); } .md-shotOnSigma .listItem a { } .md-shotOnSigma .listItem img { height: calc(419 * var(--rs)); } .md-shotOnSigma .listItem .txt { margin-top: calc(15 * var(--rs)); } .md-shotOnSigma .listItem .itemTtl { font-size: calc(36 * var(--rs)); } .md-shotOnSigma .listItem .itemSubTtl { margin-top: calc(5 * var(--rs)); font-size: calc(30 * var(--rs)); } } .md-secSpec { margin-top: calc(100 * var(--rs)); margin-bottom: calc(100 * var(--rs)); } .md-secSpec .secTtl { font-size: calc(36 * var(--rs)); } .md-secSpec .listTtl { font-size: calc(28 * var(--rs)); } .md-secSpec .secCts { margin-top: calc(40 * var(--rs)); } .md-detailListImg + .md-secSpec { margin-top: calc(42 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-secSpec { margin-top: calc(60 * var(--rs)); margin-bottom: calc(60 * var(--rs)); } .md-secSpec .secTtl { font-size: calc(56 * var(--rs)); } .md-secSpec .listTtl { font-size: calc(50 * var(--rs)); } .md-secSpec .secCts { margin-top: calc(72 * var(--rs)); } .md-detailListImg + .md-secSpec { margin-top: calc(120 * var(--rs)); } } .md-specTtl { margin-top: calc(30 * var(--rs)); box-sizing: border-box; padding: calc(12 * var(--rs)) calc(18 * var(--rs)); border: 1px solid #c9c9c9; background: #eaeaea; font-size: calc(20 * var(--rs)); font-weight: 500; } .md-specTtl .note { margin-top: 0; vertical-align: middle; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-specTtl { margin-top: calc(70 * var(--rs)); font-size: calc(36 * var(--rs)); padding: calc(28 * var(--rs)) calc(30 * var(--rs)); } } .md-specList { display: flex; border: 1px solid #c9c9c9; border-top: 0; } .md-specList:first-child { border-top: 1px solid #c9c9c9; } .md-specList .specListTtl { width: calc(314 * var(--rs)); border-right: 1px solid #c9c9c9; background: #f7f7f7; font-weight: 500; line-height: 1.75; font-size: calc(16 * var(--rs)); box-sizing: border-box; padding: calc(12 * var(--rs)) calc(18 * var(--rs)); } .md-specList .specListDesc { flex: 1; line-height: 1.86; box-sizing: border-box; padding: calc(12 * var(--rs)) calc(18 * var(--rs)); font-size: calc(15 * var(--rs)); } .md-specList .specListDesc p + p { margin-top: calc(16 * var(--rs)); } .md-specList .specListDesc .note { margin-top: calc(5 * var(--rs)); font-size: calc(13 * var(--rs)); } .md-specList .specListDesc strong { font-weight: 500; } .md-specList .specListDesc .eyefi { vertical-align: text-bottom; padding-left: calc(5 * var(--rs)); } .md-specList .specListDesc ul li { padding-left: 1em; text-indent: -0.5em; } .md-specList .specListDesc ul li::before { content: "・"; display: inline-block; } .md-specList .specListDesc li:not(:first-child) { margin-top: calc(6 * var(--rs)); } .md-specList .specListDesc a { text-decoration: underline; } .md-specList .specListDesc a:hover { text-decoration: none; } .md-specSpacer { margin-top: calc(30 * var(--rs)); border-top: 1px solid #c9c9c9; height: 0; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-specList { display: block; } .md-specList .specListTtl { width: 100%; padding: calc(30 * var(--rs)); border-right: none; border-bottom: 1px solid #c9c9c9; line-height: 1.46; font-size: calc(30 * var(--rs)); } .md-specList .specListDesc { padding: calc(30 * var(--rs)) calc(50 * var(--rs)); font-size: calc(28 * var(--rs)); } .md-specList .specListDesc p + p { margin-top: calc(28 * var(--rs)); } .md-specList .specListDesc .note { margin-top: calc(28 * var(--rs)); font-size: calc(26 * var(--rs)); } .md-specSpacer { margin-top: calc(70 * var(--rs)); border-top: 1px solid #c9c9c9; } } .md-specOnlyList { margin-top: calc(40 * var(--rs)); display: flex; border: 1px solid #c9c9c9; } .md-specOnlyList .specListTtl { display: flex; align-items: center; width: calc(314 * var(--rs)); box-sizing: border-box; padding: calc(12 * var(--rs)) calc(18 * var(--rs)); background: #eaeaea; font-size: calc(20 * var(--rs)); font-weight: 500; vertical-align: middle; border-right: 1px solid #c9c9c9; } .md-specOnlyList .specListDesc { flex: 1; line-height: 1.86; box-sizing: border-box; padding: calc(12 * var(--rs)) calc(18 * var(--rs)); font-size: calc(15 * var(--rs)); } .md-specOnlyList .specListDesc p + p { margin-top: calc(16 * var(--rs)); } .md-specOnlyList .specListDesc .note { margin-top: calc(5 * var(--rs)); font-size: calc(13 * var(--rs)); } .md-specOnlyList .specListDesc strong { font-weight: 500; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-specOnlyList { margin-top: calc(70 * var(--rs)); display: block; } .md-specOnlyList .specListTtl { display: block; width: 100%; padding: calc(28 * var(--rs)) calc(30 * var(--rs)); border-right: none; border-bottom: 1px solid #c9c9c9; font-size: calc(36 * var(--rs)); } .md-specOnlyList .specListDesc { padding: calc(30 * var(--rs)) calc(50 * var(--rs)); font-size: calc(28 * var(--rs)); } .md-specOnlyList .specListDesc p + p { margin-top: calc(28 * var(--rs)); } .md-specOnlyList .specListDesc .note { margin-top: calc(28 * var(--rs)); font-size: calc(26 * var(--rs)); } } .md-noteColWrap { margin-top: calc(60 * var(--rs)); } .md-noteColWrap p { padding-left: 1em; text-indent: -1em; font-size: calc(13 * var(--rs)); line-height: 1.76; } .md-noteColWrap .compatibilityBtn + p { margin-top: calc(20 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-noteColWrap { margin-top: calc(80 * var(--rs)); } .md-noteColWrap p { font-size: calc(26 * var(--rs)); } .md-noteColWrap .compatibilityBtn + p { margin-top: calc(80 * var(--rs)); } } /* ↓↓↓ シネレンズ、アクセサリー sp購入ボタン ↓↓↓ */ /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-spBuyBtn { margin-top: calc(80 * var(--rs)); } .md-spBuyBtn .btn { display: flex; align-items: center; justify-content: center; width: calc(326 * var(--rs)); height: calc(90 * var(--rs)); background: #222; border-radius: calc(2 * var(--rs)); color: #fff; margin: 0 auto; font-size: calc(26 * var(--rs)); font-weight: var(--weight-medium); text-decoration: none; transition: opacity 0.3s linear; } .md-spBuyBtn .btn:hover { opacity: 0.7; } .md-spBuyBtn .btn .icn { position: relative; padding-left: calc(48 * var(--rs)); } .md-spBuyBtn .btn .icn::before { content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 0; background: var(--icn-cart); width: calc(33 * var(--rs)); height: calc(28 * var(--rs)); } } /* ↑↑↑ シネレンズ、アクセサリー sp購入ボタン ↑↑↑ */ .md-btnDiscon { display: flex; align-items: center; justify-content: center; background: #808080; color: #fff; border-radius: 2px; width: -webkit-max-content; width: -moz-max-content; width: max-content; margin: 0 auto; min-width: calc(115 * var(--rs)); min-height: calc(36 * var(--rs)); font-size: calc(13 * var(--rs)); font-weight: var(--weight-medium); } .md-followingHd .ctsWrap .tabLine .cartBtn .md-btnDiscon { margin: 0 calc(-10 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-btnDiscon { min-width: calc(326 * var(--rs)); height: calc(90 * var(--rs)); font-size: calc(26 * var(--rs)); } .md-modal--lensBuy .md-btnDiscon { min-width: calc(180 * var(--rs)); height: calc(56 * var(--rs)); font-size: calc(24 * var(--rs)); } } .md-searchWindow { margin-top: calc(36 * var(--rs)); } .md-searchWindow .search { width: 100%; height: calc(54 * var(--rs)); position: relative; } .md-searchWindow .search::after { content: " "; width: calc(26 * var(--rs)); height: calc(26 * var(--rs)); background: url(/special/archive-contents/common/images/icn_search.svg) no-repeat center / contain; position: absolute; top: 50%; right: calc(16 * var(--rs)); transform: translateY(-50%); pointer-events: none; } .md-searchWindow .search input { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; height: 100%; width: 100%; border: none; background: #efefef; box-sizing: border-box; padding: calc(5 * var(--rs)) calc(60 * var(--rs)) calc(4 * var(--rs)) calc(18 * var(--rs)); border-radius: calc(2 * var(--rs)); font-size: calc(16 * var(--rs)); line-height: 1.2; } #main .md-searchWindow .mf_finder_searchBox_items { padding: 0; background: #efefef; } #main .md-searchWindow .mf_finder_searchBox input { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; height: calc(54 * var(--rs)); width: 100%; border: none; background: #efefef; box-sizing: border-box; padding: 0 calc(60 * var(--rs)) 0 calc(18 * var(--rs)); border-radius: calc(2 * var(--rs)); font-size: calc(16 * var(--rs)); line-height: calc(54 * var(--rs)); } #main .md-searchWindow .mf_finder_searchBox { margin: 0; } #main .md-searchWindow .mf_finder_searchBox_submit { font-size: 1px; background: none; opacity: 0; width: calc(60 * var(--rs)); } .md-searchWindow .keyWordWrap, .md-searchWindow .mf_finder_keywordranking { display: flex; margin-top: calc(20 * var(--rs)); } .md-searchWindow .keyWordWrap .txt, .md-searchWindow .mf_finder_keywordranking .mf_finder_keywordranking_head { width: calc(188 * var(--rs)); font-size: calc(14 * var(--rs)); line-height: 1.42; padding: 0; } .md-searchWindow .mf_finder_keywordranking .mf_finder_keywordranking_head:before { content: none !important; } .md-searchWindow .keyWordWrap .keyWordList, .md-searchWindow .mf_finder_keywordranking .mf_finder_keywordranking_items { flex: 1; display: flex; flex-wrap: wrap; margin: calc(-15 * var(--rs)) 0 0; } .md-searchWindow .keyWordWrap .keyWordList li, .md-searchWindow .mf_finder_keywordranking .mf_finder_keywordranking_items .mf_finder_keywordranking_item { margin-top: calc(15 * var(--rs)); box-sizing: border-box; padding: 0 calc(14 * var(--rs)); border-right: 1px solid #c9c9c9; list-style: none; } .md-searchWindow .keyWordWrap .keyWordList li:last-child, .md-searchWindow .mf_finder_keywordranking .mf_finder_keywordranking_items .mf_finder_keywordranking_item:last-child { border-right: none; } .md-searchWindow .keyWordWrap .keyWordList li a, .md-searchWindow .mf_finder_keywordranking .mf_finder_keywordranking_items .mf_finder_keywordranking_item a { display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: calc(13 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.6; transition: opacity 0.3s linear; } .md-searchWindow .keyWordWrap .keyWordList li a::before, .md-searchWindow .mf_finder_keywordranking .mf_finder_keywordranking_items .mf_finder_keywordranking_item a::before { content: "#"; margin-right: calc(4 * var(--rs)); font-size: calc(13 * var(--rs)); font-weight: 500; } .md-searchWindow .keyWordWrap .keyWordList li a:hover, .md-searchWindow .mf_finder_keywordranking .mf_finder_keywordranking_items .mf_finder_keywordranking_item a:hover { text-decoration: underline; } .md-searchWindow .archiveWrap { display: flex; margin-top: calc(60 * var(--rs)); } .md-searchWindow .archiveWrap .pt-select { width: calc(200 * var(--rs)); height: calc(38 * var(--rs)); position: relative; } .md-searchWindow .archiveWrap .pt-select:not(:first-child) { margin-left: calc(20 * var(--rs)); } .md-searchWindow .archiveWrap .pt-select::after { content: " "; width: calc(11 * var(--rs)); height: calc(6 * var(--rs)); background: url(/special/archive-contents/common/images/icn_arrow_black.svg) no-repeat center / contain; position: absolute; top: 50%; right: calc(10 * var(--rs)); transform: translateY(-50%); } .md-searchWindow .archiveWrap .pt-select .inputSelect { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; height: 100%; box-sizing: border-box; padding: calc(10 * var(--rs)) calc(30 * var(--rs)); border-radius: calc(3 * var(--rs)); border: 1px solid #c9c9c9; background: #fff; text-align: center; font-size: calc(13 * var(--rs)); font-weight: var(--weight-medium); cursor: pointer; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-searchWindow { margin-top: calc(66 * var(--rs)); } .md-searchWindow .search { width: 100%; height: calc(104 * var(--rs)); } .md-searchWindow .search::after { right: calc(30 * var(--rs)); } .md-searchWindow .search input { padding: calc(30 * var(--rs)) calc(80 * var(--rs)) calc(30 * var(--rs)) calc(30 * var(--rs)); font-size: calc(28 * var(--rs)); } #main .md-searchWindow .mf_finder_searchBox input { padding: 0 calc(30 * var(--rs)); font-size: calc(28 * var(--rs)); height: calc(104 * var(--rs)); } #main .md-searchWindow .mf_finder_searchBox_submit { width: calc(86 * var(--rs)); } .md-searchWindow .keyWordWrap, .md-searchWindow .mf_finder_keywordranking { display: block; margin-top: calc(26 * var(--rs)); } .md-searchWindow .keyWordWrap .txt, .md-searchWindow .mf_finder_keywordranking .mf_finder_keywordranking_head { width: auto; font-size: calc(28 * var(--rs)); } .md-searchWindow .keyWordWrap .keyWordList, .md-searchWindow .mf_finder_keywordranking .mf_finder_keywordranking_items { margin: 0 calc(-32 * var(--rs)); } .md-searchWindow .keyWordWrap .keyWordList li, .md-searchWindow .mf_finder_keywordranking .mf_finder_keywordranking_items .mf_finder_keywordranking_item { margin-top: calc(20 * var(--rs)); padding: 0 calc(32 * var(--rs)); } .md-searchWindow .keyWordWrap .keyWordList li a, .md-searchWindow .mf_finder_keywordranking .mf_finder_keywordranking_items .mf_finder_keywordranking_item a { font-size: calc(24 * var(--rs)); } .md-searchWindow .keyWordWrap .keyWordList li a::before, .md-searchWindow .mf_finder_keywordranking .mf_finder_keywordranking_items .mf_finder_keywordranking_item a::before { margin-right: calc(6 * var(--rs)); font-size: calc(24 * var(--rs)); } .md-searchWindow .archiveWrap { margin: calc(120 * var(--rs)) calc(-20 * var(--rs)) 0; } .md-searchWindow .archiveWrap .pt-select { width: 50%; height: calc(85 * var(--rs)); box-sizing: border-box; padding: 0 calc(20 * var(--rs)); } .md-searchWindow .archiveWrap .pt-select:not(:first-child) { margin-left: 0; } .md-searchWindow .archiveWrap .pt-select::after { content: " "; width: calc(23 * var(--rs)); height: calc(12 * var(--rs)); right: calc(40 * var(--rs)); } .md-searchWindow .archiveWrap .pt-select .inputSelect { padding: calc(20 * var(--rs)) calc(40 * var(--rs)) calc(20 * var(--rs)) calc(20 * var(--rs)); font-size: calc(28 * var(--rs)); } } .md-ctsIcnBlockWrap { display: flex; flex-wrap: wrap; margin: 0 calc(-13 * var(--rs)); } .md-ctsIcnBlockWrap .item { width: 25%; height: calc(200 * var(--rs)); margin-top: calc(22 * var(--rs)); box-sizing: border-box; padding: 0 calc(13 * var(--rs)); } .md-ctsIcnBlockWrap .item .itemInr { display: block; align-items: center; justify-content: center; box-sizing: border-box; height: 100%; padding: calc(44 * var(--rs)) calc(20 * var(--rs)) calc(28 * var(--rs)); border: 1px solid #c9c9c9; border-radius: 4px; text-decoration: none; transition: opacity 0.3s linear; } .md-ctsIcnBlockWrap .item .itemInr:hover { opacity: 0.7; } .md-ctsIcnBlockWrap .item .icn { width: calc(120 * var(--rs)); margin: 0 auto; } .md-ctsIcnBlockWrap .item .icn img { width: 100%; height: auto; } .md-ctsIcnBlockWrap .item .txtCol { margin-top: calc(15 * var(--rs)); } .md-ctsIcnBlockWrap .item .txtCol .txt { text-align: center; font-size: calc(16 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.56; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-ctsIcnBlockWrap { margin: 0 calc(-15 * var(--rs)); } .md-ctsIcnBlockWrap .item { width: 50%; height: calc(280 * var(--rs)); margin-top: calc(30 * var(--rs)); padding: 0 calc(15 * var(--rs)); } .md-ctsIcnBlockWrap .item .itemInr { padding: calc(38 * var(--rs)) calc(18 * var(--rs)) calc(34 * var(--rs)); } .md-ctsIcnBlockWrap .item .icn { width: calc(188 * var(--rs)); } .md-ctsIcnBlockWrap .item .txtCol { margin-top: calc(20 * var(--rs)); } .md-ctsIcnBlockWrap .item .txtCol .txt { font-size: calc(26 * var(--rs)); line-height: 1.28; } } .md-supportCategoryNavi { margin-top: calc(104 * var(--rs)); } .md-supportCategoryNavi .secInr { box-sizing: border-box; padding: calc(38 * var(--rs)) calc(46 * var(--rs)) calc(40 * var(--rs)); border: 1px solid #eaeaea; background: #fff; } .md-supportCategoryNavi .secTtl { display: flex; align-items: center; } .md-supportCategoryNavi .secTtl .ttl { font-size: calc(20 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; } .md-supportCategoryNavi .secTtl .catTxt { margin-left: auto; } .md-supportCategoryNavi .secTtl .catTxt .anc { font-size: calc(15 * var(--rs)); line-height: 1.4; letter-spacing: 0.06em; } .md-supportCategoryNavi .secTtl .catTxt .anc:hover { text-decoration: none; } .md-supportCategoryNavi .secCtsWrap { display: flex; flex-wrap: wrap; margin-top: calc(36 * var(--rs)); } .md-supportCategoryNavi .secCtsWrap .ctsItem .ctsTtl { color: #808080; font-size: calc(18 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; letter-spacing: 0.02em; } .md-supportCategoryNavi .secCtsWrap .ctsItem .ctsCol { margin: calc(4 * var(--rs)) calc(-14 * var(--rs)) 0; } .md-supportCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap { width: 100%; box-sizing: border-box; padding: 0 calc(14 * var(--rs)); } .md-supportCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat { border-top: 1px solid #c9c9c9; } .md-supportCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat:first-child { border-top: none; } .md-supportCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr { display: block; box-sizing: border-box; padding: calc(20 * var(--rs)) calc(32 * var(--rs)) calc(20 * var(--rs)) 0; text-decoration: none; font-size: calc(15 * var(--rs)); line-height: 1.86; letter-spacing: 0.01em; position: relative; transition: opacity 0.3s ease-out; } .md-supportCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr.pdCat { padding: calc(6 * var(--rs)) calc(32 * var(--rs)) calc(6 * var(--rs)) 0; } .md-supportCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr::after { content: ""; width: calc(6 * var(--rs)); height: calc(11 * var(--rs)); background: url(/special/archive-contents/common/images/icn_arrow_right_black.svg) no-repeat center center; background-size: 100% auto; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .md-supportCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr:hover { opacity: 0.7; } .md-supportCategoryNavi .secCtsWrap .ctsItem.purpose { width: calc(100% - calc(326 * var(--rs))); box-sizing: border-box; padding-right: calc(60 * var(--rs)); } .md-supportCategoryNavi .secCtsWrap .ctsItem.purpose .ctsCol { display: flex; } .md-supportCategoryNavi .secCtsWrap .ctsItem.customization { width: calc(326 * var(--rs)); } .md-supportCategoryNavi .secCtsWrap .ctsItem.other { width: calc(326 * var(--rs)); margin-top: calc(30 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-supportCategoryNavi { margin-top: calc(100 * var(--rs)); } .md-supportCategoryNavi .secInr { padding: calc(55 * var(--rs)) calc(40 * var(--rs)) calc(46 * var(--rs)); } .md-supportCategoryNavi .secTtl { display: block; } .md-supportCategoryNavi .secTtl .ttl { font-size: calc(44 * var(--rs)); letter-spacing: 0.03em; } .md-supportCategoryNavi .secTtl .catTxt { margin-top: 0; margin-left: 0; } .md-supportCategoryNavi .secTtl .catTxt .anc { font-size: calc(26 * var(--rs)); } .md-supportCategoryNavi .secCtsWrap { display: block; margin-top: calc(50 * var(--rs)); } .md-supportCategoryNavi .secCtsWrap .ctsItem .ctsTtl { font-size: calc(36 * var(--rs)); line-height: 1.1; } .md-supportCategoryNavi .secCtsWrap .ctsItem .ctsCol { margin: calc(20 * var(--rs)) 0 0; } .md-supportCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap { padding: 0; } .md-supportCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap + .catWrap .cat:first-child { border-top: 1px solid #c9c9c9; } .md-supportCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr { padding: calc(24 * var(--rs)) calc(46 * var(--rs)) calc(20 * var(--rs)) 0; font-size: calc(28 * var(--rs)); line-height: 1.5; } .md-supportCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr::after { width: calc(12 * var(--rs)); height: calc(22 * var(--rs)); } .md-supportCategoryNavi .secCtsWrap .ctsItem { width: 100%; margin-top: calc(58 * var(--rs)); } .md-supportCategoryNavi .secCtsWrap .ctsItem.purpose { width: 100%; padding-right: 0; } .md-supportCategoryNavi .secCtsWrap .ctsItem.purpose .ctsCol { display: block; } .md-supportCategoryNavi .secCtsWrap .ctsItem.other { width: 100%; margin-top: calc(58 * var(--rs)); } .md-supportCategoryNavi .secCtsWrap .ctsItem.customization { width: 100%; } .md-supportCategoryNavi .secCtsWrap .ctsItem .ctsCol .catWrap .cat .catInr.pdCat { padding: calc(24 * var(--rs)) calc(46 * var(--rs)) calc(20 * var(--rs)) 0; } } .md-filterSelect { box-sizing: border-box; border: 1px solid #eaeaea; border-radius: calc(4 * var(--rs)); padding: calc(24 * var(--rs)) calc(28 * var(--rs)); } .md-filterSelect .ttl { font-size: calc(18 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; } .md-filterSelect .selectWrap { margin-top: calc(20 * var(--rs)); } .md-filterSelect .selectWrap .wrapInr { display: flex; box-sizing: border-box; padding-left: calc(16 * var(--rs)); } .md-filterSelect .selectWrap .inputLine { margin-right: calc(25 * var(--rs)); } .md-filterSelect .selectWrap .inputLine label { position: relative; } .md-filterSelect .selectWrap .inputLine input[type="checkbox"] { width: 100%; height: 100%; position: absolute; top: 0; left: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 100%; padding: 0; margin: 0; border: none; cursor: pointer; } .md-filterSelect .selectWrap .inputLine .selectLine { box-sizing: border-box; padding-left: calc(24 * var(--rs)); font-size: calc(13 * var(--rs)); line-height: 2; position: relative; cursor: pointer; } .md-filterSelect .selectWrap .inputLine .selectLine::before { content: " "; width: calc(16 * var(--rs)); height: calc(16 * var(--rs)); border: 1px solid #c9c9c9; border-radius: calc(2 * var(--rs)); background: #fff; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .md-filterSelect .selectWrap .inputLine input[type="checkbox"]:checked + .selectLine::after { content: "✓"; color: #000; font-size: calc(13 * var(--rs)); line-height: 1; position: absolute; top: calc(3 * var(--rs)); left: calc(5 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-filterSelect { padding: 0; } .md-filterSelect .ttl { box-sizing: border-box; padding: calc(40 * var(--rs)) calc(114 * var(--rs)) calc(40 * var(--rs)) calc(30 * var(--rs)); font-size: calc(38 * var(--rs)); position: relative; } .md-filterSelect .ttl::before { content: " "; width: calc(34 * var(--rs)); height: calc(18 * var(--rs)); background: url(/special/archive-contents/common/images/icn_arrow_black.svg) no-repeat center / contain; position: absolute; top: 50%; right: calc(50 * var(--rs)); transform: translateY(-50%) rotate(0); transition: transform 0.3s linear; } .md-filterSelect.js-open .ttl::before { transform: translateY(-50%) rotate(180deg); } .md-filterSelect .selectWrap { display: none; height: 0; margin-top: 0; } .md-filterSelect .selectWrap .wrapInr { flex-wrap: wrap; margin: 0 calc(-14 * var(--rs)); padding: 0 calc(40 * var(--rs)) calc(30 * var(--rs)); } .md-filterSelect .selectWrap .inputLine { width: 50%; margin-right: 0; box-sizing: border-box; padding: 0 calc(14 * var(--rs)); } .md-filterSelect .selectWrap .inputLine .selectLine { display: block; padding-left: calc(46 * var(--rs)); font-size: calc(28 * var(--rs)); } .md-filterSelect .selectWrap .inputLine .selectLine::before { width: calc(30 * var(--rs)); height: calc(30 * var(--rs)); border-radius: calc(3 * var(--rs)); } .md-filterSelect .selectWrap .inputLine input[type="checkbox"]:checked + .selectLine::after { font-size: calc(26 * var(--rs)); top: calc(14 * var(--rs)); left: calc(8 * var(--rs)); } } .md-newsPager { display: table; margin: calc(34 * var(--rs)) auto 0; } .md-newsPager .pagerInr, .md-newsPager .btn, .md-newsPager .numWrap { display: flex; align-items: center; justify-content: center; } .md-newsPager .btn .icn, .md-newsPager .numWrap .num { width: calc(32 * var(--rs)); height: calc(32 * var(--rs)); padding: 0 calc(3 * var(--rs)); position: relative; } .md-newsPager .btn .icn a, .md-newsPager .numWrap .num a { display: flex; align-items: center; justify-content: center; height: 100%; box-sizing: border-box; border: 1px solid #c9c9c9; border-radius: calc(3 * var(--rs)); text-decoration: none; transition: background 0.3s, color 0.3s, border-color 0.3s linear; cursor: pointer; } .md-newsPager .btn .icn a:hover, .md-newsPager .numWrap .num a:hover, .md-newsPager .numWrap .num.num--current a { color: #fff; background: #000; border-color: #000; } .md-newsPager .numWrap .num.num--current a { cursor: default; pointer-events: none; } .md-newsPager .numWrap { margin: 0 calc(22 * var(--rs)); } .md-newsPager .numWrap .num a { font-size: calc(13 * var(--rs)); font-weight: var(--weight-medium); } .md-newsPager .btn .icn a { font-size: 0; } .md-newsPager .btn .icn .prevFirst::before, .md-newsPager .btn .icn .nextLast::after { content: " "; width: calc(10 * var(--rs)); height: calc(11 * var(--rs)); background: no-repeat center / contain; transition: background-image 0.3s linear; } .md-newsPager .btn .icn .prevFirst::before { background-image: url(/special/archive-contents/common/images/icn_pager_prev_first.svg); } .md-newsPager .btn .icn .nextLast::after { background-image: url(/special/archive-contents/common/images/icn_pager_next_last.svg); } .md-newsPager .btn .icn .prev::before, .md-newsPager .btn .icn .next::after { content: " "; width: calc(6 * var(--rs)); height: calc(11 * var(--rs)); background: no-repeat center / contain; transition: background-image 0.3s linear; } .md-newsPager .btn .icn .prev::before { background-image: url(/special/archive-contents/common/images/icn_pager_prev.svg); } .md-newsPager .btn .icn .next::after { background-image: url(/special/archive-contents/common/images/icn_pager_next.svg); } .md-newsPager .btn .icn .prevFirst:hover::before { background-image: url(/special/archive-contents/common/images/icn_pager_prev_first_wt.svg); } .md-newsPager .btn .icn .nextLast:hover::after { background-image: url(/special/archive-contents/common/images/icn_pager_next_last_wt.svg); } .md-newsPager .btn .icn .prev:hover::before { background-image: url(/special/archive-contents/common/images/icn_pager_prev_wt.svg); } .md-newsPager .btn .icn .next:hover::after { background-image: url(/special/archive-contents/common/images/icn_pager_next_wt.svg); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-newsPager { display: block; margin: calc(72 * var(--rs)) calc(-4 * var(--rs)) 0; } .md-newsPager .btn .icn, .md-newsPager .numWrap .num { width: calc(58 * var(--rs)); height: calc(58 * var(--rs)); padding: 0 calc(4 * var(--rs)); } .md-newsPager .numWrap .num a { font-size: calc(26 * var(--rs)); } .md-newsPager .numWrap { margin: 0 calc(30 * var(--rs)); } .md-newsPager .btn .icn .prevFirst::before, .md-newsPager .btn .icn .nextLast::after { width: calc(20 * var(--rs)); height: calc(24 * var(--rs)); } .md-newsPager .btn .icn .prev::before, .md-newsPager .btn .icn .next::after { width: calc(12 * var(--rs)); height: calc(24 * var(--rs)); } } /* #main .mf_finder_logo { display: none; } */ #main .mf_finder_organic_pager { margin: calc(34 * var(--rs)) auto 0; } #main .mf_finder_organic_pager .mf_finder_pager_items { } .md-secInfoArea { margin-top: calc(78 * var(--rs)); margin-bottom: calc(100 * var(--rs)); } .md-secInfoArea .secTtl .ttl { width: calc(210 * var(--rs)); font-size: calc(28 * var(--rs)); line-height: 1.42; } .md-secInfoArea .secCts { margin-top: calc(20 * var(--rs)); } .md-secInfoArea .secCts .lead .txt { font-size: calc(16 * var(--rs)); line-height: 2; } .md-secInfoArea .secCts .infoAnc { margin-top: calc(30 * var(--rs)); } .md-secInfoArea .secCts .infoAnc .txt { font-size: calc(15 * var(--rs)); line-height: 1.86; } .md-secInfoArea .secCts .infoAnc .txt a { display: inline-block; position: relative; text-decoration: underline; } .md-secInfoArea .secCts .infoAnc .txt a:hover { text-decoration: none; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-secInfoArea { margin-top: calc(126 * var(--rs)); } .md-secInfoArea .secColWrap { display: block; } .md-secInfoArea .secTtl .ttl { width: auto; font-size: calc(50 * var(--rs)); } .md-secInfoArea .secCts { margin-top: calc(60 * var(--rs)); padding-left: 0; } .md-secInfoArea .secCts .lead .txt { font-size: calc(32 * var(--rs)); } .md-secInfoArea .secCts .infoAnc { margin-top: calc(70 * var(--rs)); } .md-secInfoArea .secCts .infoAnc .txt { font-size: calc(30 * var(--rs)); line-height: 1.66; } .md-secInfoArea .secCts .infoAnc .txt:not(:first-child) { margin-top: calc(28 * var(--rs)); } .md-secInfoArea .secCts .infoAnc .txt a { } .md-secInfoArea .secCts .infoAnc .txt a::before { width: calc(12 * var(--rs)); height: calc(20 * var(--rs)); top: calc(12 * var(--rs)); } } .md-sectionAncLine { display: flex; } .md-sectionAncLine p { display: flex; align-items: center; min-height: calc(33 * var(--rs)); margin-right: calc(58 * var(--rs)); font-size: calc(16 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.6; position: relative; } .md-sectionAncLine p:last-child { margin-right: 0; } .md-sectionAncLine .anc { box-sizing: border-box; padding-left: calc(44 * var(--rs)); text-decoration: none; transition: opacity 0.3s linear; } .md-sectionAncLine .anc:hover { opacity: 0.7; text-decoration: underline; } .md-sectionAncLine .anc::before { content: " "; width: calc(14 * var(--rs)); height: calc(8 * var(--rs)); background: url(/special/archive-contents/common/images/icn_arrow_black.svg) no-repeat center / contain; position: absolute; top: 54%; left: calc(9 * var(--rs)); transform: translateY(-50%); } .md-sectionAncLine .anc::after { content: " "; width: calc(31 * var(--rs)); height: calc(31 * var(--rs)); box-sizing: border-box; border: 1px solid #c9c9c9; border-radius: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .md-sectionAncLine + .md-openItemListLine { margin-top: calc(10 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-sectionAncLine { display: block; } .md-sectionAncLine p { min-height: calc(60 * var(--rs)); margin-right: 0; font-size: calc(28 * var(--rs)); } .md-sectionAncLine p:not(:first-child) { margin-top: calc(34 * var(--rs)); } .md-sectionAncLine .anc { padding-left: calc(88 * var(--rs)); } .md-sectionAncLine .anc::before { width: calc(24 * var(--rs)); height: calc(14 * var(--rs)); left: calc(18 * var(--rs)); } .md-sectionAncLine .anc::after { width: calc(58 * var(--rs)); height: calc(58 * var(--rs)); } .md-sectionAncLine + .md-openItemListLine { margin-top: calc(50 * var(--rs)); } } .md-txtNewIcn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: calc(1 * var(--rs)) calc(16 * var(--rs)) calc(2 * var(--rs)); border-radius: calc(45 * var(--rs)); background: #000; color: #fff; font-size: calc(12 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.4; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-txtNewIcn { padding: calc(1 * var(--rs)) calc(16 * var(--rs)) calc(2 * var(--rs)); font-size: calc(22 * var(--rs)); line-height: 1.3; } } /* ↓↓↓ コンテンツ詳細 ↓↓↓ */ .md-contentsDetailVisImg { margin-top: calc(35 * var(--rs)); } .md-contentsDetailVisImg .visWrap { box-sizing: border-box; padding-top: 68.5%; position: relative; } .md-contentsDetailVisImg .visImg { width: calc(1920 * var(--rs)); position: absolute; top: 0; left: 50%; transform: translateX(-50%); cursor: pointer; } .md-contentsDetailVisImg .visImg img { width: 100%; height: auto; } .md-contentsDetailVisImg .visCol { width: calc(960 * var(--rs)); margin: calc(24 * var(--rs)) auto 0; } .md-contentsDetailVisImg .visCol .capCol { font-size: calc(16 * var(--rs)); line-height: 2.3; } .md-contentsDetailVisImg .visWrap::before { content: " "; width: calc(20 * var(--rs)); height: calc(20 * var(--rs)); background: var(--icn-info-white); position: absolute; right: calc(20 * var(--rs)); bottom: calc(20 * var(--rs)); z-index: 1; pointer-events: none; } .md-contentsDetailVisImg .visCol .capCol a[target="_blank"]::after { content: " "; width: calc(8 * var(--rs)); height: calc(8 * var(--rs)); background: var(--icn-blank-white); position: absolute; top: calc(10 * var(--rs)); right: 0; } .md-contentsDetailVisImg .visCol .capCol .dtlModal { cursor: pointer; } .md-contentsDetailVisImg .visCol .capCol .dtlModal:hover { text-decoration: underline; } .md-contentsDetailVisImg .visCol .capCol .dtlModal::after { content: " "; display: inline-block; width: calc(12 * var(--rs)); height: calc(12 * var(--rs)); background: var(--icn-modal); margin-left: calc(5 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-contentsDetailVisImg { margin-top: calc(40 * var(--rs)); } .md-contentsDetailVisImg .visWrap { margin: 0 calc(-40 * var(--rs)); padding-top: 0; } .md-contentsDetailVisImg .visImg { display: block; width: 100%; position: static; transform: translateX(0); } .md-contentsDetailVisImg .visCol { width: auto; margin: calc(40 * var(--rs)) auto 0; } .md-contentsDetailVisImg .visCol .capCol { font-size: calc(32 * var(--rs)); line-height: 2; } .md-contentsDetailVisImg .visWrap::before { content: " "; width: calc(30 * var(--rs)); height: calc(30 * var(--rs)); right: calc(30 * var(--rs)); bottom: calc(30 * var(--rs)); } .md-contentsDetailVisImg .visCol .capCol a[target="_blank"]::after { width: calc(16 * var(--rs)); height: calc(16 * var(--rs)); top: calc(18 * var(--rs)); } .md-contentsDetailVisImg .visCol .capCol .dtlModal::after { width: calc(24 * var(--rs)); height: calc(24 * var(--rs)); margin-left: calc(5 * var(--rs)); } } .md-contentsDetailColWrap { margin-top: calc(100 * var(--rs)); } .md-contentsDetailColWrap .setInr { width: calc(960 * var(--rs)); margin: 0 auto; } .md-contentsDetailColWrap .col { font-size: calc(16 * var(--rs)); line-height: 2.3; } .col + .md-detailColSet { margin-top: calc(100 * var(--rs)); } .md-detailColSet + .md-detailColSet { margin-top: calc(120 * var(--rs)); } .md-detailColSet .colImg { display: block; position: relative; cursor: pointer; } .md-detailColSet .colImg.imgVertical { width: calc(718 * var(--rs)); margin: 0 auto; } .md-detailColSet .colImg::before { content: " "; width: calc(20 * var(--rs)); height: calc(20 * var(--rs)); background: var(--icn-info-white); position: absolute; right: calc(20 * var(--rs)); bottom: calc(20 * var(--rs)); } .md-detailColSet .colImg img { width: 100%; height: auto; } .md-detailColSet .cap { margin-top: calc(20 * var(--rs)); font-size: calc(16 * var(--rs)); line-height: 2.3; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-contentsDetailColWrap { margin-top: calc(140 * var(--rs)); } .md-contentsDetailColWrap .setInr { width: 100%; } .md-contentsDetailColWrap .col { font-size: calc(32 * var(--rs)); line-height: 2; } .col + .md-detailColSet { margin-top: calc(140 * var(--rs)); } .md-detailColSet + .md-detailColSet { margin-top: calc(140 * var(--rs)); } .md-detailColSet .colImg.imgVertical { width: 100%; } .md-detailColSet .colImg::before { content: " "; width: calc(30 * var(--rs)); height: calc(30 * var(--rs)); right: calc(30 * var(--rs)); bottom: calc(30 * var(--rs)); } .md-detailColSet .cap { margin-top: calc(40 * var(--rs)); font-size: calc(32 * var(--rs)); line-height: 2; } } .md-contentsDetailVisMovie { margin-top: calc(22 * var(--rs)); background: #000; } .md-contentsDetailVisMovie .slideMain .mask { width: calc(1200 * var(--rs)); height: calc(674 * var(--rs)); margin: 0 auto; } .md-contentsDetailVisMovie .slider .item { height: calc(674 * var(--rs)); position: relative; width: 100%; overflow: hidden; } .md-contentsDetailVisMovie .slider .item .youtubeItem { position: absolute; width: 100%; padding-top: 56.25%; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); } .md-contentsDetailVisMovie .slider .item .youtubeItem iframe { width: 100%; height: 100%; position: absolute; top: 0; right: 0; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-contentsDetailVisMovie { margin-top: calc(56 * var(--rs)); } .md-contentsDetailVisMovie .slideMain .mask { width: 100%; height: calc(804 * var(--rs)); } .md-contentsDetailVisMovie .slider .item { height: calc(804 * var(--rs)); } } .md-contentsSecColDtl .secTtl.secTtlCenter { text-align: center; } .md-contentsSecColDtl .secTtl .ttl { font-size: calc(36 * var(--rs)); line-height: 1.52; } .md-contentsSecColDtl .btnWrap .ancBtn { display: table; } .md-contentsSecColDtl .btnWrap .ancBtn .btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: calc(4 * var(--rs)) calc(20 * var(--rs)); background: #000; text-decoration: none; color: #fff; font-size: calc(14 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; transition: opacity 0.3s linear; position: relative; } .md-contentsSecColDtl .btnWrap .ancBtn .btn:hover { opacity: 0.7; } .md-contentsSecColDtl .btnWrap .ancBtn .btn[target="_blank"]::after { content: ""; display: inline-block; width: calc(9 * var(--rs)); height: calc(9 * var(--rs)); margin-left: calc(10 * var(--rs)); background: var(--icn-blank-white); vertical-align: middle; } .md-contentsSecColDtl .secSlide { margin: calc(35 * var(--rs)) auto 0; } .md-contentsSecColDtl .secSlide .mask { margin: 0 auto; width: calc(680 * var(--rs)); overflow: visible; } .md-contentsSecColDtl .secSlide .slide { margin: 0 calc(-50 * var(--rs)); width: auto; } .md-contentsSecColDtl .secSlide .item { padding: 0 calc(20 * var(--rs));; } .md-contentsSecColDtl .secSlide img { width: 100%; } .md-contentsSecColDtl .secSlide .pager { position: absolute; bottom: calc(-25 * var(--rs)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; } .md-contentsSecColDtl .secSlide .pager .pagerItem { width: calc(12 * var(--rs)); height: calc(12 * var(--rs)); background-color: #e0e0e0; margin: 0 calc(5 * var(--rs)); border-radius: 99px; cursor: pointer; } .md-contentsSecColDtl .secSlide .pager .pagerItem.js-stay { background-color: #000; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-contentsSecColDtl .secTtl.secTtlCenter { text-align: left; } .md-contentsSecColDtl .secTtl .ttl { font-size: calc(64 * var(--rs)); line-height: 1.56; } .md-contentsSecColDtl .btnWrap .ancBtn { display: flex; align-items: center; justify-content: center; width: calc(326 * var(--rs)); height: calc(90 * var(--rs)); margin: 0 auto; } .md-contentsSecColDtl .btnWrap .ancBtn .btn { padding: 0; font-size: calc(26 * var(--rs)); font-weight: var(--weight-medium); width: 100%; height: 100%; } .md-contentsSecColDtl .btnWrap .ancBtn .btn[target="_blank"]::after { width: calc(16 * var(--rs)); height: calc(16 * var(--rs)); margin-left: calc(6 * var(--rs)); } .md-contentsSecColDtl .secSlide { margin-top: calc(80 * var(--rs)); } .md-contentsSecColDtl .secSlide .mask { width: calc(570 * var(--rs)); overflow: visible; } .md-contentsSecColDtl .secSlide .slide { margin: 0 -70%; width: auto; } .md-contentsSecColDtl .secSlide .pager { bottom: calc(-40 * var(--rs)); } .md-contentsSecColDtl .secSlide .pager .pagerItem { width: calc(20 * var(--rs)); height: calc(20 * var(--rs)); margin: 0 calc(8 * var(--rs)); } .md-contentsSecColDtl .secSlide .pager .pagerItem.js-stay { background-color: #000; } } .md-contentsLeadColWrap { margin-top: calc(36 * var(--rs)); } .md-contentsLeadColWrap .leadCol { font-size: calc(16 * var(--rs)); line-height: 2.3; } .md-contentsLeadColWrap .leadCol .note { margin-top: calc(24 * var(--rs)); } .md-contentsLeadColWrap .leadCol .note p { font-size: calc(14 * var(--rs)); line-height: 1.57; } .md-impressionDetail .md-contentsLeadColWrap + .ancLine { margin-top: calc(80 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-contentsLeadColWrap { margin-top: calc(60 * var(--rs)); } .md-contentsLeadColWrap .leadCol { font-size: calc(32 * var(--rs)); line-height: 2; } .md-contentsLeadColWrap .leadCol .note { margin-top: calc(30 * var(--rs)); } .md-contentsLeadColWrap .leadCol .note p { font-size: calc(28 * var(--rs)); line-height: 1.78; } } .md-contentsColWrap { padding-top: calc(45 * var(--rs)); } .md-contentsColWrap.contentsWid--M .colInr { width: calc(990 * var(--rs)); } .md-contentsColWrap.contentsCenterCol .colInr { margin: 0 auto; } .md-contentsColWrap .colTtl.colTtlCenter { text-align: center; } .md-contentsColWrap .colTtl .ttl { font-size: calc(24 * var(--rs)); line-height: 1.62; } .md-contentsColWrap .colTxtWrap { font-size: calc(16 * var(--rs)); line-height: 2; } .md-contentsColWrap .colTtl + .colTxtWrap { margin-top: calc(28 * var(--rs)); } .md-contentsColWrap .colTxtWrap p:not(:first-child) { margin-top: calc(26 * var(--rs)); } .md-contentsColWrap .colTxtWrap p a { text-decoration: underline; } .md-contentsColWrap .colTxtWrap p a[target="_blank"] { padding-right: calc(15 * var(--rs)); position: relative; } .md-contentsColWrap .colTxtWrap p a[target="_blank"]::after { content: " "; width: calc(10 * var(--rs)); height: calc(10 * var(--rs)); background: var(--icn-blank-black); position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .md-contentsColWrap .colTxtWrap p a:hover { text-decoration: none; } .md-contentsColWrap .memberList { display: flex; flex-wrap: wrap; margin: 0 calc(-26 * var(--rs)); } .md-contentsColWrap .memberList .list { width: 25%; box-sizing: border-box; padding: 0 calc(26 * var(--rs)); } .md-contentsColWrap .memberList .list .listInr { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: calc(22 * var(--rs)) 0; } .md-contentsColWrap .memberList .list:nth-child(n+5) .listInr { border-top: 1px solid #c9c9c9; } .md-contentsColWrap .memberList .list .sub { flex: 1; font-size: calc(14 * var(--rs)); line-height: 1.6; } .md-contentsColWrap .memberList .list .name { margin-top: calc(4 * var(--rs)); font-size: calc(18 * var(--rs)); line-height: 1.82; } .md-contentsColWrap .prodList { display: flex; flex-wrap: wrap; margin: 0 calc(-26 * var(--rs)); } .md-contentsColWrap .prodList .list { width: 20%; box-sizing: border-box; padding: 0 calc(26 * var(--rs)); } .md-contentsColWrap .prodList .list .listInr { display: block; margin-top: calc(26 * var(--rs)); text-decoration: none; cursor: pointer; } .md-contentsColWrap .prodList .list .img { display: block; width: 100%; height: calc(140 * var(--rs)); } .md-contentsColWrap .prodList .list .img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .md-contentsColWrap .prodList .list .cap { margin-top: calc(10 * var(--rs)); text-align: center; font-size: calc(16 * var(--rs)); line-height: 1.6; } .md-contentsColWrap .prodList .list .listInr:hover .cap { text-decoration: underline; } .md-contentsColWrap .prodList .list.dtlModal .cap::after { content: " "; display: inline-block; width: calc(12 * var(--rs)); height: calc(12 * var(--rs)); background: var(--icn-modal); margin-left: calc(10 * var(--rs)); margin-right: calc(-20 * var(--rs)); } .md-contentsColWrap.contentsWid--L { padding-top: 0; } .md-contentsColWrap.contentsWid--L .colInr { width: calc(1200 * var(--rs)); padding-top: calc(120 * var(--rs)); box-sizing: border-box; } .md-contentsSecColDtl + .md-contentsColWrap .colInr { border-top: 1px solid #c9c9c9; padding-top: calc(45 * var(--rs)); padding-bottom: calc(80 * var(--rs)); } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-contentsColWrap { padding-top: calc(60 * var(--rs)); } .md-contentsColWrap.contentsWid--M .colInr { width: 100%; } .md-contentsColWrap.contentsCenterCol { padding-left: 0; padding-right: 0; } .md-contentsColWrap:not(:first-child) { padding-top: calc(100 * var(--rs)); } .md-contentsColWrap .colTtl.colTtlCenter { text-align: left; } .md-contentsColWrap .colTtl .ttl { font-size: calc(44 * var(--rs)); line-height: 1.54; } .md-contentsColWrap .colTxtWrap { font-size: calc(32 * var(--rs)); } .md-contentsColWrap .colTtl + .colTxtWrap { margin-top: calc(46 * var(--rs)); } .md-contentsColWrap .colTxtWrap p:not(:first-child) { margin-top: calc(20 * var(--rs)); } .md-contentsColWrap .colTxtWrap p a[target="_blank"] { padding-right: calc(40 * var(--rs)); } .md-contentsColWrap .colTxtWrap p a[target="_blank"]::after { width: calc(22 * var(--rs)); height: calc(22 * var(--rs)); } .md-contentsColWrap .memberList { margin: calc(46 * var(--rs)) calc(-30 * var(--rs)) 0; } .md-contentsColWrap .memberList .list { width: 50%; padding: 0 calc(30 * var(--rs)); } .md-contentsColWrap .memberList .list .listInr { display: block; padding: calc(36 * var(--rs)) 0; } .md-contentsColWrap .memberList .list:nth-child(n+3) .listInr { border-top: 1px solid #c9c9c9; } .md-contentsColWrap .memberList .list .sub { font-size: calc(24 * var(--rs)); line-height: 1.75; } .md-contentsColWrap .memberList .list .name { margin-top: calc(10 * var(--rs)); font-size: calc(34 * var(--rs)); line-height: 1.5; } .md-contentsColWrap .prodList { margin: 0 calc(-20 * var(--rs)); } .md-contentsColWrap .prodList .list { width: 50%; padding: 0 calc(20 * var(--rs)); } .md-contentsColWrap .prodList .list .listInr { margin-top: calc(60 * var(--rs)); } .md-contentsColWrap .prodList .list .img { height: calc(220 * var(--rs)); } .md-contentsColWrap .prodList .list .cap { margin-top: calc(12 * var(--rs)); font-size: calc(32 * var(--rs)); } .md-contentsColWrap .prodList .list.dtlModal .cap::after { width: calc(24 * var(--rs)); height: calc(24 * var(--rs)); margin-left: calc(10 * var(--rs)); margin-right: calc(-20 * var(--rs)); } .md-contentsColWrap.contentsWid--L { padding-top: 0; } .md-contentsColWrap.contentsWid--L .colInr { width: 100%; padding-left: calc(40 * var(--rs)); padding-right: calc(40 * var(--rs)); } .md-contentsSecColDtl + .md-contentsColWrap .colInr { border-top: 1px solid #c9c9c9; padding-top: calc(120 * var(--rs)); padding-bottom: calc(120 * var(--rs)); } } .md-contentsColWrap .profileCol { margin-top: calc(68 * var(--rs)); } .md-contentsColWrap .profileCol._mt-0 { margin-top: 0 !important; } .md-contentsColWrap .profileCol .interviewInr { display: flex; } .md-contentsColWrap .profileCol .img { display: block; width: calc(214 * var(--rs)); margin-top: calc(8 * var(--rs)); } .md-contentsColWrap .profileCol .img img { width: 100%; height: auto; } .md-contentsColWrap .profileCol .interviewTxt { flex: 1; box-sizing: border-box; padding-left: calc(56 * var(--rs)); } .md-contentsColWrap .profileCol .interviewTxt .nameCol .name { font-size: calc(19 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.73; } .md-contentsColWrap .profileCol .interviewTxt .nameCol .post { margin-top: calc(4 * var(--rs)); font-size: calc(12 * var(--rs)); line-height: 1.6; } .md-contentsColWrap .profileCol .interviewTxt .txtCol { margin-top: calc(20 * var(--rs)); font-size: calc(16 * var(--rs)); line-height: 1.93; } .md-contentsColWrap .profileCol .interviewTxt .txtCol p:not(:first-child) { margin-top: calc(20 * var(--rs)); } .md-contentsColWrap .profileCol .interviewTxt .txtCol p a { text-decoration: underline; } .md-contentsColWrap .profileCol .interviewTxt .txtCol p a:hover { text-decoration: none; } .md-contentsColWrap .profileCol .interviewTxt p a[target="_blank"] { padding-right: calc(15 * var(--rs)); position: relative; } .md-contentsColWrap .profileCol .interviewTxt p a[target="_blank"]::after { content: " "; width: calc(10 * var(--rs)); height: calc(10 * var(--rs)); background: var(--icn-blank-black); position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .md-contentsColWrap .profileCol .interviewTxt p a:hover { text-decoration: underline; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-contentsColWrap .profileCol { margin-top: calc(80 * var(--rs)); } .md-contentsColWrap .profileCol .interviewInr { display: block; } .md-contentsColWrap .profileCol .img { width: calc(335 * var(--rs)); margin-top: 0; } .md-contentsColWrap .profileCol .interviewTxt { padding-left: 0; } .profileCol .interviewTxt .nameCol { margin-top: calc(30 * var(--rs)); } .md-contentsColWrap .profileCol .interviewTxt .nameCol .name { font-size: calc(36 * var(--rs)); line-height: 1.16; } .md-contentsColWrap .profileCol .interviewTxt .nameCol .post { margin-top: calc(8 * var(--rs)); font-size: calc(24 * var(--rs)); line-height: 1.37; } .md-contentsColWrap .profileCol .interviewTxt .txtCol { margin-top: calc(46 * var(--rs)); font-size: calc(32 * var(--rs)); line-height: 1.87; } .md-contentsColWrap .profileCol .interviewTxt p a[target="_blank"] { padding-right: calc(40 * var(--rs)); } .md-contentsColWrap .profileCol .interviewTxt p a[target="_blank"]::after { width: calc(22 * var(--rs)); height: calc(22 * var(--rs)); } } .md-contentsArticle { display: flex; position: relative; } .md-contentsArticle .entCol { flex: 1; box-sizing: border-box; padding-top: calc(58 * var(--rs)); } .md-contentsArticle .entCol p { font-size: calc(16 * var(--rs)); line-height: 2.6; } .md-contentsArticle .entCol p + .btnWrap { margin-top: calc(44 * var(--rs)); } .md-contentsArticle .imgCol { width: calc(590 * var(--rs)); box-sizing: border-box; padding-left: calc(100 * var(--rs)); } .md-contentsArticle .img { width: calc(846 * var(--rs)); } .md-contentsArticle .img picture { display: block; } .md-contentsArticle .img img { width: 100%; height: auto; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-detailToggleWrap .md-contentsArticle { padding-bottom: calc(90 * var(--rs)); } .md-contentsArticle { display: block; } .md-contentsArticle .entCol { padding-top: calc(60 * var(--rs)); } .md-contentsArticle .entCol p { font-size: calc(32 * var(--rs)); line-height: 2; } .md-contentsArticle .btnWrap { margin-top: calc(80 * var(--rs)); } .md-contentsArticle .entCol p + .btnWrap { margin-top: calc(80 * var(--rs)); } .md-contentsArticle .imgCol { width: auto; margin: calc(100 * var(--rs)) calc(-40 * var(--rs)) 0; padding-left: 0; } .md-contentsArticle .img { width: 100%; } } .md-contentsTimeCol:not(:first-child) { margin-top: calc(100 * var(--rs)); } .md-contentsTimeCol .award .ttl { font-size: calc(36 * var(--rs)); line-height: 1.77; } .md-contentsTimeCol .award .sub { display: flex; margin-top: calc(15 * var(--rs)); font-size: calc(20 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; } .md-contentsTimeCol .award .sub .prize + p { flex: 1; } .md-contentsTimeCol .img { margin: calc(48 * var(--rs)) auto 0; } .md-contentsTimeCol .img.img--widL { width: 960px; } .md-contentsTimeCol .img.img--widM { width: 720px; } .md-contentsTimeCol .img picture { display: block; text-align: center; } .md-contentsTimeCol .img img { width: 100%; height: auto; } .md-contentsTimeCol .img .imgCap { margin-top: calc(25 * var(--rs)); font-size: calc(18 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.55; } .md-contentsTimeCol .timeCol { margin-top: calc(40 * var(--rs)); } .md-contentsTimeCol .timeCol .time { box-sizing: border-box; padding: calc(16 * var(--rs)) calc(20 * var(--rs)); background: #eaeaea; font-size: calc(22 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.27; } .md-contentsTimeCol .timeCol .colWrap .ttlCol { box-sizing: border-box; padding: calc(20 * var(--rs)) calc(30 * var(--rs)); background: #f7f7f7; font-size: calc(20 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; cursor: pointer; position: relative; } .md-contentsTimeCol .timeCol .colWrap .ttlCol .openIcn { width: calc(33 * var(--rs)); height: calc(33 * var(--rs)); background: #fff; border-radius: 100%; position: absolute; top: 50%; right: calc(20 * var(--rs)); transform: translateY(-50%); z-index: 0; } .md-contentsTimeCol .timeCol .colWrap .ttlCol .openIcn .bar { height: 100%; position: relative; } .md-contentsTimeCol .timeCol .colWrap .ttlCol .openIcn .bar::after, .md-contentsTimeCol .timeCol .colWrap .ttlCol .openIcn .bar::before { content: ""; width: calc(12 * var(--rs)); height: calc(2 * var(--rs)); background: #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(0); transition: transform 0.3s linear; } .md-contentsTimeCol .timeCol .colWrap .ttlCol .openIcn .bar::after { transform: translate(-50%,-50%) rotate(90deg); } .md-contentsTimeCol .timeCol .colWrap.js-open .ttlCol .openIcn .bar::after { transform: translate(-50%,-50%) rotate(0); } .md-contentsTimeCol .timeCol .colWrap .txtCol { display: none; height: 0; } .md-contentsTimeCol .timeCol .colWrap .txtCol .colInr { box-sizing: border-box; padding: 0 calc(30 * var(--rs)) calc(25 * var(--rs)); background: #f7f7f7; font-size: calc(16 * var(--rs)); line-height: 1.8; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-contentsTimeCol:not(:first-child) { margin-top: calc(120 * var(--rs)); } .md-contentsTimeCol .award .ttl { font-size: calc(56 * var(--rs)); line-height: 1.46; } .md-contentsTimeCol .award .sub { margin-top: calc(30 * var(--rs)); font-size: calc(42 * var(--rs)); line-height: 1.47; } .md-contentsTimeCol .img { margin: calc(64 * var(--rs)) auto 0; } .md-contentsTimeCol .img.img--widL, .md-contentsTimeCol .img.img--widM { width: 100%; } .md-contentsTimeCol .img .imgCap { margin-top: calc(40 * var(--rs)); font-size: calc(36 * var(--rs)); font-weight: 400; } .md-contentsTimeCol .timeCol { margin-top: calc(60 * var(--rs)); } .md-contentsTimeCol .timeCol .time { padding: calc(36 * var(--rs)) calc(30 * var(--rs)); font-size: calc(40 * var(--rs)); line-height: 1.4; } .md-contentsTimeCol .timeCol .colWrap .ttlCol { padding: calc(40 * var(--rs)) calc(30 * var(--rs)); font-size: calc(36 * var(--rs)); line-height: 1.5; } .md-contentsTimeCol .timeCol .colWrap .ttlCol .openIcn { width: calc(80 * var(--rs)); height: calc(80 * var(--rs)); right: calc(30 * var(--rs)); } .md-contentsTimeCol .timeCol .colWrap .ttlCol .openIcn .bar::after, .md-contentsTimeCol .timeCol .colWrap .ttlCol .openIcn .bar::before { width: calc(22 * var(--rs)); } .md-contentsTimeCol .timeCol .colWrap .txtCol .colInr { padding: 0 calc(30 * var(--rs)) calc(40 * var(--rs)); font-size: calc(30 * var(--rs)); line-height: 2.1; } } .md-contents24hours .secCol { width: calc(960 * var(--rs)); margin: 0 auto; } .md-contents24hours .secCol .secTtl { text-align: center; font-size: calc(36 * var(--rs)); line-height: 1.58; } .md-contents24hours .secCol .txtWrap { margin-top: calc(20 * var(--rs)); font-size: calc(16 * var(--rs)); line-height: 2.3; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { } /* ↑↑↑ コンテンツ詳細 ↑↑↑ */ .md-dlcBtnWrap { margin-top: calc(18 * var(--rs)); } .md-dlcBtnWrap .ctsAgree { display: flex; justify-content: center; } .md-dlcBtnWrap .ctsAgree .inputCheckbox { display: block; cursor: pointer; } .md-dlcBtnWrap .ctsAgree .inputCheckbox .txt { font-size: calc(13 * var(--rs)); line-height: 2; } .md-dlcBtnWrap .supportBtn { display: flex; align-items: center; justify-content: center; width: calc(248 * var(--rs)); height: calc(50 * var(--rs)); margin: calc(18 * var(--rs)) auto 0; box-sizing: border-box; padding: calc(10 * var(--rs)) calc(20 * var(--rs)); background: #808080; color: #fff; font-size: calc(14 * var(--rs)); font-weight: var(--weight-medium); line-height: 2; pointer-events: none; transition: background 0.3s linear, opacity 0.3s linear; } .md-dlcBtnWrap a.supportBtn { text-decoration: none; } .md-dlcBtnWrap .supportBtn:hover { opacity: 0.7; } .md-dlcBtnWrap .supportBtn.js-enabled { background: #000; pointer-events: all; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-dlcBtnWrap { margin-top: calc(40 * var(--rs)); } .md-dlcBtnWrap .ctsAgree .inputCheckbox .txt { font-size: calc(28 * var(--rs)); line-height: 1.4; } .md-dlcBtnWrap .supportBtn { width: calc(326 * var(--rs)); height: calc(80 * var(--rs)); margin: calc(50 * var(--rs)) auto 0; font-size: calc(26 * var(--rs)); } } .logoIcnMin .eyefi { width: calc(48 * var(--rs)); height: auto; box-sizing: border-box; padding-left: calc(5 * var(--rs)); vertical-align: text-bottom; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .logoIcnMin .eyefi { width: calc(90 * var(--rs)); } } .md-select { position: relative; } .md-select::before { content: " "; width: calc(80 * var(--rs)); height: calc(100% - (8 * var(--rs))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 58%); position: absolute; top: calc(4 * var(--rs)); right: calc(4 * var(--rs)); pointer-events: none; } .md-select::after { content: " "; width: calc(11 * var(--rs)); height: calc(6 * var(--rs)); background: url(/special/archive-contents/common/images/icn_arrow_black.svg) no-repeat center center; background-size: 100% auto; position: absolute; top: 50%; right: calc(18 * var(--rs)); transform: translateY(-50%); z-index: 2; pointer-events: none; } .md-select .select { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; box-sizing: border-box; padding: calc(12 * var(--rs)) calc(44 * var(--rs)) calc(12 * var(--rs)) calc(18 * var(--rs)); border-radius: calc(3 * var(--rs)); font-size: calc(13 * var(--rs)); line-height: 1.4; cursor: pointer; background: transparent; border: 1px solid; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-select::before { width: calc(110 * var(--rs)); } .md-select::after { width: calc(23 * var(--rs)); height: calc(12 * var(--rs)); } .md-select .select { height: calc(85 * var(--rs)); padding: calc(22 * var(--rs)) calc(44 * var(--rs)) calc(22 * var(--rs)) calc(20 * var(--rs)); font-size: calc(26 * var(--rs)); } } .md-tabLineWrap { margin-top: calc(30 * var(--rs)); } .md-tabLineWrap .tabWrap { display: flex; } .md-tabLineWrap .tabWrap .tab { box-sizing: border-box; padding: 0 calc(3 * var(--rs)); } .md-tabLineWrap .tabWrap .tabTxt { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: calc(32 * var(--rs)); padding: calc(4 * var(--rs)) calc(18 * var(--rs)) calc(5 * var(--rs)); border: 1px solid #c9c9c9; border-radius: calc(3 * var(--rs)); text-decoration: none; color: #111; font-size: calc(13 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.1; transition: background 0.3s linear, color 0.3s linear; cursor: pointer; } .md-tabLineWrap .tabWrap .tabTxt:hover, .md-tabLineWrap .tabWrap input:checked + .tabTxt, .md-tabLineWrap .tabWrap .tab.tab--current .tabTxt { background: #000; color: #fff; border-color: #000; } .md-tabLineWrap .tabWrap input { display: none; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-tabLineWrap { margin-top: calc(25 * var(--rs)); } .md-tabLineWrap .tabWrap { flex-wrap: wrap; } .md-tabLineWrap .tabWrap .tab { padding: calc(7 * var(--rs)); } .md-tabLineWrap .tabWrap .tab { width: 50%; } .md-tabLineWrap .tabWrap .tabTxt { min-height: calc(54 * var(--rs)); height: auto; font-size: calc(28 * var(--rs)); } .md-tabLineWrap .tabWrap .tabTxt:hover, .md-tabLineWrap .tabWrap input:checked + .tabTxt, .md-tabLineWrap .tabWrap .tab.tab--current .tabTxt { background: #000; color: #fff; border-color: #000; } .md-tabLineWrap .tabWrap input { display: none; } } .md-mbNone { margin-bottom: 0 !important; } /* PC ----------------------------------*/ @media screen and (min-width: 769px) { .md-productIndexList { padding-bottom: calc(100 * var(--rs)); } .md-pcMbNone { margin-bottom: 0 !important; } } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-spPb100 { padding-bottom: calc(100 * var(--rs)) !important; } .md-spMbNone { margin-bottom: 0 !important; } } .js-md-noResultTxt { text-align: center; margin: calc(80 * var(--rs)) 0; font-size: calc(25 * var(--rs)); } @media screen and (max-width: 768px) { .js-md-noResultTxt { font-size: calc(33 * var(--rs)); line-height: 1.5; } } .md-mountItemWrap { display: flex; flex-wrap: wrap; margin: 0 calc(-15 * var(--rs)); } .md-mountItemWrap .mount { width: 50%; margin-top: calc(50 * var(--rs)); box-sizing: border-box; padding: 0 calc(15 * var(--rs)); } .md-mountItemWrap .mount .mountInr { display: flex; } .md-mountItemWrap .mount .img { display: block; width: calc(255 * var(--rs)); height: calc(120 * var(--rs)); box-sizing: border-box; padding-right: calc(10 * var(--rs)); } .md-mountItemWrap .mount .img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .md-mountItemWrap .mount .mountInr:hover img { opacity: 1; } .md-mountItemWrap .mount .col { flex: 1; } .md-mountItemWrap .mount .col .ttl { font-size: calc(20 * var(--rs)); font-weight: var(--weight-medium); line-height: 1.6; } .md-mountItemWrap .mount .col .txt { margin-top: calc(14 * var(--rs)); font-size: calc(16 * var(--rs)); line-height: 1.8; } /* SP ----------------------------------*/ @media screen and (max-width: 768px) { .md-mountItemWrap { display: block; margin: 0; } .md-mountItemWrap .mount { width: 100%; margin-top: calc(100 * var(--rs)); padding: 0; } .md-mountItemWrap .mount .mountInr { display: block; } .md-mountItemWrap .mount .img { width: calc(335 * var(--rs)); height: calc(180 * var(--rs)); padding-right: 0; } .md-mountItemWrap .mount .col { margin-top: calc(30 * var(--rs)); } .md-mountItemWrap .mount .col .ttl { font-size: calc(40 * var(--rs)); line-height: 1.45; } .md-mountItemWrap .mount .col .txt { margin-top: calc(30 * var(--rs)); font-size: calc(30 * var(--rs)); } }