@charset 'UTF-8';


#contents {padding-top:122px;}

#key-visual {}
#key-visual > ul {position:relative;}
#key-visual > ul > li {display:none;}
#key-visual > ul > li:first-child {display:block;}
#key-visual > ul > li > a {display:block;}
#key-visual > ul > li img {display:block;}
#key-visual > ul > li img.pc {width:960px; height:380px;}
#key-visual > ul > li img.sp {display:none;}
#key-visual.fac-gallery {position:relative;}
#key-visual.fac-gallery > .slider {width:960px; position:relative; overflow:hidden;}
#key-visual.fac-gallery > .slider > ul {position:relative;}
#key-visual.fac-gallery > .slider > ul:after {display:block; content:""; clear:both; height:0;}
#key-visual.fac-gallery > .slider > ul > li {display:block; float:left; position:static;}
#key-visual.fac-gallery > .slider > ul > li img.pc {width:960px; height:380px;}
#key-visual.fac-gallery > .slider > ul > li img.sp {display:none;}
#key-visual.fac-gallery > nav {width:100%; position:absolute; left:0; top:0; text-align:center;}
#key-visual.fac-gallery > nav > a {
	display:block; width:84px; height:103px; position:absolute; top:139px; background:url(images/slider.png) no-repeat; text-indent:110%; white-space:nowrap; overflow:hidden;}
#key-visual.fac-gallery > nav > a:hover {opacity:0.5;}
#key-visual.fac-gallery > nav > a.previous {left:0;  background-position:0 0;}
#key-visual.fac-gallery > nav > a.next     {right:0; background-position:-100px 0;}
#key-visual.fac-gallery > nav > ul {width:100%; position:absolute; top:390px; letter-spacing:-0.4em;}
#key-visual.fac-gallery > nav > ul > li {display:inline-block; letter-spacing:normal; vertical-align:top;}
#key-visual.fac-gallery > nav > ul > li > a {
	display:block; width:20px; height:20px; background:url(images/slider.png) 0 -110px no-repeat; text-indent:110%; white-space:nowrap; overflow:hidden;}
#key-visual.fac-gallery > nav > ul > li > a:hover, 
#key-visual.fac-gallery > nav > ul > li.selected > a {background-position:-20px -110px;}

#searchbox {width: 960px; margin-top: 50px; background: #f5f3f3; border: 1px solid #e9e9e9; border-radius: 5px; box-sizing: border-box;}
#searchbox #searchboxiframe {width: 900px; height: 136px; margin: 0 auto; }

#index {margin:-30px 0 0 -18px; padding:40px 0 0; letter-spacing:-0.4em;}
#index > div {display:inline-block; width:268px; margin:30px 0 0 18px; padding:19px; border:1px solid #e9e9e9; text-align:center; letter-spacing:normal; vertical-align:top;}
#index > div > a {display:block; margin:-19px; padding:19px; text-decoration:none;}
#index > div .image {position:relative; margin:-20px -20px 0;}
#index > div .image:after {
	display:block; content:""; width:38px; height:20px; position:absolute; left:50%; bottom:0; margin:0 0 0 -19px; background:url(../images/index_image_ornament.png) no-repeat;}
#index > div .image > img {display:block; width:308px; height:169px;}
#index > div .image > .comingsoon{position: absolute; bottom:40%; left:0; width: 100%; padding: 10px 0; text-align: center; background-color: rgba(255,255,255,0.50);}
#index > div b {display:block; margin:18px 0 0; color:#014099; font-size:129%; font-weight:bold;}
#index > div p {margin:8px 0 0; color:#000; font-size:100%; text-align:left;}
#index > div > a:hover > .image > img {opacity:0.8;}
#index > div > a:hover > b {color:#3466ad;}
#index > div > a:hover > p {color:#333;}

#index > #products {width:960px; padding:0; border:none;}
#index > #products > ul {margin:-18px 0 0 -22px; letter-spacing:-0.4em;}
#index > #products > ul > li {display:inline-block; width:174px; margin:18px 0 0 22px; letter-spacing:normal; vertical-align:top;}
#index > #products > ul > li > a {display:block; text-decoration:none;}
#index > #products > ul > li > .product {padding:9px; border:1px solid #e9e9e9; background:#fff; text-align:center;}
#index > #products > ul > li > .product > .image {margin:0;}
#index > #products > ul > li > .product > .image:after {display:none;}
#index > #products > ul > li > .product > .image > img {display:block; width:125px; height:125px; margin:0 auto;}
#index > #products > ul > li > .product > strong {display:block; margin:8px 0 0; color:#014099; font-size:100%; font-weight:bold;}
#index > #products > ul > li > .product > b      {display:block; margin:0; color:#000; font-size:72%; font-weight:normal;}
#index > #products > ul > li > a:hover > .image > img {opacity:0.8;}
#index > #products > ul > li > a:hover > strong {color:#3466ad;}
#index > #products > ul > li > a:hover > b      {color:#333;}

#index > #support {}

#index > #about {}

#index > #aqualike {}

#index > #topics {width: 100%; padding:24px; background:#f5f3f3; border:1px solid #e9e9e9; border-radius: 5px; box-sizing: border-box;}
#topics dl { }
#index > #topics dl dt {margin-bottom:10px; font-size: 16px; font-weight:bold; color:#014099;}
#index > #topics dl dd {margin-bottom:10px; text-align: left;} 
#index > #topics dl dd:last-child {margin-bottom: 0;}

#wrapper > #banners {margin-top:20px;}


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

#contents {}

#key-visual {margin:0 -10px;}
#key-visual > ul {}
#key-visual > ul > li {}
#key-visual > ul > li:first-child {}
#key-visual > ul > li > a {}
#key-visual > ul > li img {}
#key-visual > ul > li img.pc {display:none;}
#key-visual > ul > li img.sp {display:block; width:100%; height:auto;}
#key-visual.fac-gallery {position:relative;}
#key-visual.fac-gallery > .slider {width:auto;}
#key-visual.fac-gallery > .slider > ul {}
#key-visual.fac-gallery > .slider > ul:after {}
#key-visual.fac-gallery > .slider > ul > li {}
#key-visual.fac-gallery > .slider > ul > li img.pc {display:none;}
#key-visual.fac-gallery > .slider > ul > li img.sp {display:block; width:100%; height:auto;}
#key-visual.fac-gallery > nav {top:auto; bottom:0;}
#key-visual.fac-gallery > nav > a {display:none;}
#key-visual.fac-gallery > nav > a:hover {}
#key-visual.fac-gallery > nav > a.previous {}
#key-visual.fac-gallery > nav > a.next     {}
#key-visual.fac-gallery > nav > ul {top:10px;}
#key-visual.fac-gallery > nav > ul > li {}
#key-visual.fac-gallery > nav > ul > li > a {}
#key-visual.fac-gallery > nav > ul > li > a:hover, 
#key-visual.fac-gallery > nav > ul > li.selected > a {}

#searchbox {width: 100%; display: none;}

#index {margin:-10px 0 0;}
#index > div {width:100%; margin:10px 0 0; padding:9px 3%; box-sizing: border-box}
#index > div > a {margin:-9px -3%; padding:9px 3%;}
#index > div .image {position:relative; margin:-10px -3.7% 0;}
#index > div .image:after {}
#index > div .image > img {width:100%; height:auto;}
#index > div b {font-size:17px;}
#index > div p {font-size:12px; }
#index > div > a:hover > .image > img {}
#index > div > a:hover > b {}
#index > div > a:hover > p { }

#index > #products {width:auto;}
#index > #products > ul {margin:-10px 0 0;}
#index > #products > ul > li {width:50%; margin:10px 0 0 -1px; box-sizing:border-box;}
#index > #products > ul > li > a {}
#index > #products > ul > li > .product {}
#index > #products > ul > li > .product > .image {}
#index > #products > ul > li > .product > .image:after {}
#index > #products > ul > li > .product > .image > img {width:100%; max-width:125px; height:auto;}
#index > #products > ul > li > .product > strong {margin:8px 0 0; font-size:15px;}
#index > #products > ul > li > .product > b      {font-size:10px;}
#index > #products > ul > li > a:hover > .image > img {}
#index > #products > ul > li > a:hover > strong {}
#index > #products > ul > li > a:hover > b      {}

#index > #support { }

#index > #about {}

#index > #aqualike {}

#index > #topics {width: 100%;}

#wrapper > #banners {margin-top:20px;}

}