@charset "utf-8";

#body > nav > ul > li.index {border-bottom-color:#ffffff;}

#body > header {position:relative; text-align:center;}
#body > header > h1 {
	display:table-cell; height:440px; position:relative; z-index:100; 
	color:#fff; font-size:30px; font-weight:normal; text-align:left; line-height:1.2; vertical-align:middle; 
	font-family:SIGMA_Bold, Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;}
#body > header > h1:before {display:block; height:46px; margin:0 0 0 -10px; background:no-repeat; text-indent:110%; white-space:nowrap; overflow:hidden;}
#container.art          > #body > header > h1:before {content:"Art";          background-image:url(../images/header_line_art.png);}
#container.contemporary > #body > header > h1:before {content:"Contemporary"; background-image:url(../images/header_line_contemporary.png);}
#container.sports       > #body > header > h1:before {content:"Sports";       background-image:url(../images/header_line_sports.png);}
#body > header > .image {margin:-440px calc(50% - 50vw) 0; padding:0 calc(50% - 50vw); background:#000;}
#body > header > .image > li {display:none;}
#body > header > .image > li:first-child {display:block;}
#body > header > .image > li > img {display:block; position:relative; left:50%; transform:translateX(-50%);}
#body > header > .banner, 
#body > section .banner {display:block; margin:3em auto 0;}
#body > header > .banner > a, #body > section .banner a {display:inline-block;}
#body > header > .banner img {}
#body > header > .banner p {width:450px; margin:1em auto 0;}

/* バナー複数個用*/
#body > header > .bnrBlock {display: flex; flex-wrap:wrap; justify-content:space-between;}
#body > header > .bnrBlock > .banner {flex-basis: 448px; margin-top: 3em;}
#body > header > .bnrBlock > .banner > img {width:100%; height:auto;}


#body > header > .fac-moveslideshow {}
#body > header > .fac-moveslideshow > .fac-moveslideshow-dummy {display:none;}
#body > header > .fac-moveslideshow > .image {height:440px; position:relative; margin:-440px calc(50% - 50vw) 0; background:#000; overflow:hidden;}
#body > header > .fac-moveslideshow > .image > li {position:absolute; left:-100px; right:-100px; top:-100px; bottom:-100px; z-index:1; padding:100px; background:#000; opacity:0;}
#body > header > .fac-moveslideshow > .image > li.fac-moveslideshow-shown    {animation:8s linear 0s;}
#body > header > .fac-moveslideshow > .image > li.fac-moveslideshow-selected {z-index:3;}
#body > header > .fac-moveslideshow > .image > li.fac-moveslideshow-shown[data-move="right"] {animation-name:move-right;}
#body > header > .fac-moveslideshow > .image > li.fac-moveslideshow-shown[data-move="left"]  {animation-name:move-left;}
#body > header > .fac-moveslideshow > .image > li.fac-moveslideshow-shown[data-move="up"]    {animation-name:move-up;}
#body > header > .fac-moveslideshow > .image > li.fac-moveslideshow-shown[data-move="down"]  {animation-name:move-down;}
#body > header > .fac-moveslideshow > .image > li > img {display:block; position:relative; left:50%; transform:translateX(-50%);}

@keyframes move-right {
  0% {transform:translateX(0); opacity:0;}
 10% {opacity:1;}
100% {transform:translateX(100px); opacity:1;}
}
@keyframes move-left {
  0% {transform:translateX(0); opacity:0;}
 10% {opacity:1;}
100% {transform:translateX(-100px); opacity:1;}
}
@keyframes move-up {
  0% {transform:translateY(0); opacity:0;}
 10% {opacity:1;}
100% {transform:translateY(-100px); opacity:1;}
}
@keyframes move-down {
  0% {transform:translateY(0); opacity:0;}
 10% {opacity:1;}
100% {transform:translateY(100px); opacity:1;}
}

@media screen and (max-width:940px) {
#body > header > .image {margin-left:-10px; margin-right:-10px; padding-left:10px; padding-right:10px;}
#body > header > .fac-moveslideshow > .image {margin-left:-10px; margin-right:-10px;}
}

/* DN */
#container.dn > #body > header > h1 {color:#000;}
#container.dn > #body > header > .image, 
#container.dn > #body > header > .image > li, 
#container.dn > #body > header > .fac-moveslideshow, 
#container.dn > #body > header > .fac-moveslideshow > .image, 
#container.dn > #body > header > .fac-moveslideshow > .image > li {background:#f5f5f5 !important;}

#body > header > strong {display:block; margin:40px 0 0; font:bold 28px/1.5 serif; text-align:center;}
#body > header > small {display:block; position:absolute; right:50%; bottom:-4em; margin:0 -460px; font-size:10px;}
#body > header > strong + small {position:static; margin:1em auto 0;}
#body > header > .design-detail {display:none; margin:25px 0 0; text-align:center;}
html.fac-js-enabled #body > header > .design-detail {display:block;}
#body > header > .design-detail > .image {}
#body > header > .design-detail > .image > img {display:block; margin:0 auto; transition:opacity 0.2s ease-in-out 0s; cursor:pointer;}
#body > header > .design-detail > .image > img:hover {opacity:0.5;}
#body > header > .design-detail > h1 {margin:10px 0 0; font-size:10px; font-weight:normal;}
#body > header > .design-detail > ul {display:none;}
#body > header > p {display:block; margin:20px 0 0; font-size:14px; text-align:center;}
#body > header > p small {}
#body > header > p sup {font-size: smaller;}
#body > header > p.accessories,
#body > header > p.mounts {margin:0.5em 0 0; font-size:12px;}
#body > header > p.mounts strong {display: block; font-size: 11px;}
#body > header > p.accessories span,
#body > header > p.mounts span {display: inline-block;}
#body > header > p.notes {margin:0; font-size:11px;}
#body > header > p.correspondenceTable {margin-bottom:-5px;}
#body > header > p:last-child {margin-bottom:-20px;}
#body > header > p.mountList{margin: 0.7em 0 0;}
#body > header > p.mountList > br.sp {display: none;}
#body > header > div.mountLink{width: 590px; margin: 1.3em auto 0; display: flex; border-right: 1px solid #e5e5e5;}
#body > header > div.mountLink > div.mountLinkChild {flex: 1 0 50%;}
#body > header > div.mountLink > div.mountLinkChild {border-left: 1px solid #e5e5e5;}
#body > header > div.mountLink > div.mountLinkChild > a {display:block; position:relative; padding: 0.4em 20px 0.4em 120px; text-align:left; text-decoration:none;}
#body > header > div.mountLink > div.mountLinkChild > a:before{display:inline-block; content:""; position: absolute; top:50%; left: 50%; font-size:14px; font-family: SIGMA_Bold, Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;}
#body > header > div.mountLink > div.mountLinkChild > a.eMount:before{content:"Sony E-mount"; margin:-10px 0 0 -130px;}
#body > header > div.mountLink > div.mountLinkChild > a.lMount:before{content:"L-mount"; margin:-10px 0 0 -112px;}
#body > header > div.mountLink > div.mountLinkChild > a > span {text-decoration:underline;}

#features {margin:30px 0 0;}
#features > h1 {font-size:16px; font-weight:bold;}
#features > ul {margin:20px 0 0; border:1px solid #e5e5e5;}
#features > ul > li {position:relative; padding:50px 50px 50px 160px; border-top:1px solid #e5e5e5;}
#features > ul > li:first-child {border-top:none;}
#features > ul > li > a {display:block; position:relative; margin:-50px -50px -50px -160px; padding:50px 50px 50px 160px; text-decoration:none;}
#features > ul > li .image {width:140px; height:90px; position:absolute; left:20px; top:50%; margin:-45px 0 0; overflow:hidden;}
#features > ul > li .image > img {display:block; margin:-55px -758px -55px -20px;}
#features > ul > li b {display:block; font:bold 24px/1.4 serif;}
#features > ul > li small {display:block; margin:1em 0 0;  font:16px/1.5 serif;}
#features > ul > li i {
	display:block; position:absolute; right:0; bottom:0; padding:20px; color:#464646; font-size:10px; font-style:normal; line-height:1; 
	font-family:Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;}
#features > ul > li i:before {display:inline-block; content:"\e609"; margin:-0.2em 0 0 0; font:12px/1 icons; vertical-align:middle; text-indent:0;}
#features > ul > li:after {
	display:block; position:absolute; left:0; top:0; padding:20px; font-size:20px; 
	font-family:SIGMA_Bold, Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;}
#features > ul > li:nth-child(1):after {content:"1";}
#features > ul > li:nth-child(2):after {content:"2";}
#features > ul > li:nth-child(3):after {content:"3";}
#features > ul > li:nth-child(4):after {content:"4";}
#features > ul > li:nth-child(5):after {content:"5";}
#features > ul > li:nth-child(6):after {content:"6";}
#features > ul > li:nth-child(7):after {content:"7";}
#features > ul > li:nth-child(8):after {content:"8";}
#features > ul > li:nth-child(9):after {content:"9";}

#body > #links {padding:0; border-top:none; text-align:left; margin-top: 80px;}
#body > #links > h1 {font-size:16px;}
#body > #links > p {margin:1em 0 0; font-size:14px;}
#body > #links > ul {margin:-1em 0 0; padding:1em 0 0;}
#body > #links > ul > li {margin:1em 0 0; font-size:14px;}
#body > #links > ul > li:before {display:inline-block; content:"\e909"; font:14px/1 icons;}
#body > #links > ul > li > a {display:inline-block; position:relative; margin:0 0 0 1em; text-decoration:underline;}
#body > #links > ul > li > a:before {display:inline-block; content:" | "; width:1em; position:absolute; left:-1em;}
#body > #links > ul > li > a:first-child {margin-left:0;}
#body > #links > ul > li > a:first-child:before, 
#body > #links > ul > li > a:nth-child(2):before {display:none;}
#body > #links > ul > li > p {margin:0.5em 0 0; font-size:12px;}

#body .correspondenceTable a.link {display:inline-block; margin: 0em 0 0;}


/** by language **/
#body > header > strong, 
#features > ul > li b, 
#features > ul > li small {
	font-weight:normal; font-family:"century-old-style-std", serif;}
html:lang(ja) #body > header > strong, 
html:lang(ja) #features > ul > li b, 
html:lang(ja) #features > ul > li small {
	font-family:NIS_SMS5, "ヒラギノ明朝 W6", "Hiragino Mincho W6", "游明朝体", "Yu Mincho", serif;}


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

#body > nav > ul > li.index {}

#body > header {padding:0 20px;}
#body > header > h1 {display:none;}

#body > header > .image {width:auto; margin:0 -20px; padding:0;}
#body > header > .image > li {}
#body > header > .image > li:first-child {}
#body > header > .image > li > img {width:100%; height:auto;}
#body > header > .banner {margin-top:2em;}
#body > header > .banner > a {display:block;}
#body > header > .banner img {width:100%; max-width:280px; height:auto;}
#body > header > .banner p {width:auto; max-width:280px; margin-top:0.5em; font-size:10px; text-align: left;}

/* バナー複数個用*/
#body > header > .bnrBlock {display: flex; flex-wrap:wrap; justify-content:space-between;}
#body > header > .bnrBlock > .banner {flex-basis: 448px; margin-top: 2em;}
#body > header > .bnrBlock > .banner > img {width:100%; height:auto;}

#body > header > .fac-moveslideshow {position:relative; margin:0 -20px; overflow:hidden;}
#body > header > .fac-moveslideshow > .fac-moveslideshow-dummy {display:block; width:auto; height:55vw; visibility:hidden;}
#body > header > .fac-moveslideshow > .image {height:auto; position:absolute; left:0; right:0; top:0; bottom:0; margin:0;}
#body > header > .fac-moveslideshow > .image > li {}
#body > header > .fac-moveslideshow > .image > li.fac-moveslideshow-shown    {}
#body > header > .fac-moveslideshow > .image > li.fac-moveslideshow-selected {}
#body > header > .fac-moveslideshow > .image > li.fac-moveslideshow-shown[data-move="right"] {}
#body > header > .fac-moveslideshow > .image > li.fac-moveslideshow-shown[data-move="left"]  {}
#body > header > .fac-moveslideshow > .image > li.fac-moveslideshow-shown[data-move="up"]    {}
#body > header > .fac-moveslideshow > .image > li.fac-moveslideshow-shown[data-move="down"]  {}
#body > header > .fac-moveslideshow > .image > li > img {width:auto; height:55vw;}

#body > header > strong {margin: 20px 0 0;font-size: 20px;text-align:left;}
#body > header > strong br {display:none;}
#body > header > small {position:static; margin:2em 0 0; text-align:left;}
#body > header > .design-detail {margin-top:15px;}
html.fac-js-enabled #body > header > .design-detail {}
#body > header > .design-detail > .image {}
#body > header > .design-detail > .image > img {width:80%; height:auto; max-width: 302px;}
#body > header > .design-detail > .image > img:hover {}
#body > header > .design-detail > h1 {}
#body > header > .design-detail > ul {}
#body > header > p {font-size:12px;}
#body > header > p small {display: block; text-align:left;}
#body > header > p sup {}
#body > header > p.accessories,
#body > header > p.mounts {margin:0.5em 0 0; font-size:12px;}
#body > header > p.notes {font-size:10px;}
#body > header > p:last-child {margin-bottom:0;}
#body > header > p.mountList{margin: 0.7em 0 0;}
#body > header > p.mountList > br.sp {display: block;}
#body > header > div.mountLink {width: 100%; margin: 0.8em 0 0; border-right:none; flex-wrap: wrap;}
#body > header > div.mountLink > div.mountLinkChild {border-left: hidden;}
#body > header > div.mountLink > div.mountLinkChild {display: table; height: 40px; width:100%;  max-width: 353px; margin: 0 auto; flex:unset;}
#body > header > div.mountLink > div.mountLinkChild:not(:first-child){margin-top: 1.3em}
#body > header > div.mountLink > div.mountLinkChild > a {border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; font-size: 10px; padding: 0em 15px 0em 115px; box-sizing: border-box; display: table-cell; vertical-align: middle; width:100%; height: 100%;}
#body > header > div.mountLink > div.mountLinkChild > a:before{font-size: 13px; left: 18px; margin: -9px 0 0 0px;}
#body > header > div.mountLink > div.mountLinkChild > a.eMount:before{margin: -9px 0 0 0px;}
#body > header > div.mountLink > div.mountLinkChild > a.lMount:before{margin: -9px 0 0 16px;}
#body > header > div.mountLink > div.mountLinkChild > a > span {}

#features {margin:20px 0 0;}
#features > h1 {padding:0 20px; font-size:12px;}
#features > ul {margin:15px 0 0; border-left:none; border-right:none;}
#features > ul > li {padding:20px;}
#features > ul > li:first-child {}
#features > ul > li > a {margin:-20px; padding:20px;}
#features > ul > li .image {position:static; margin:0 auto;}
#features > ul > li .image > img {}
#features > ul > li b {margin:0.5em 0 0;font-size: 20px;text-align:center;line-height: 1.35;}
#features > ul > li b br {display:none;}
#features > ul > li small {margin:0.5em 0 0;font-size: 14px;}
#features > ul > li small br {display:none;}
#features > ul > li i {margin:1em 0 0; padding:14px; position:static; border:1px solid #e5e5e5; background:none; font-size:14px; text-align:center;}
#features > ul > li i:before {display:inline-block; content:"\e909"; margin:-2px 5px 0 0; font:16px/1 icons; vertical-align:middle; text-indent:0;}
#features > ul > li:after {}
#features > ul > li:nth-child(1):after {}
#features > ul > li:nth-child(2):after {}
#features > ul > li:nth-child(3):after {}
#features > ul > li:nth-child(4):after {}
#features > ul > li:nth-child(5):after {}
#features > ul > li:nth-child(6):after {}
#features > ul > li:nth-child(7):after {}
#features > ul > li:nth-child(8):after {}
#features > ul > li:nth-child(9):after {}

#body > footer {margin-top:-1px;}

#body > #links {padding:20px 20px 30px; margin-top: 0px}
#body > #links > h1 {font-size:14px;}
#body > #links > p {font-size:12px;}
#body > #links > ul {}
#body > #links > ul > li {font-size:12px;}
#body > #links > ul > li:before {font-size:12px;}
#body > #links > ul > li > a {}
#body > #links > ul > li > a:before {}
#body > #links > ul > li > a:first-child {}
#body > #links > ul > li > a:first-child:before, 
#body > #links > ul > li > a:nth-child(2):before {}
#body > #links > ul > li > p {}

/** by language **/
#body > header > strong, 
#features > ul > li b, 
#features > ul > li small {}
html:lang(ja) #body > header > strong, 
html:lang(ja) #features > ul > li b, 
html:lang(ja) #features > ul > li small {}

}