@charset "UTF-8";
body { font-family: 'Noto Sans Japanese', sans-serif; }
@media screen and (min-width: 481px) {
/*PC*/
.pcnone { display:none;}
html, body { height: 100%; }
a { -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;}
header { height: 100%; position: relative; }
#header { width: 100%; max-height: 1020px; height: 100%; min-height: 600px; background-image: url(../img/mainimg-bg.png); background-position: center center; position: relative; background-repeat: repeat-x; }
#header .wrap { width: 100%; max-width: 1280px; min-width: 900px; max-height: 1020px; height: 100%; min-height: 600px; margin: 0 auto; position: relative; background-image: url(../img/mainimg-model.png); background-position: 11% center; background-repeat: no-repeat; }
#header .wrap .SHELLY_logo { position: absolute; top: 50px; left: 68px; }
#header .wrap .nav { width: 90%; margin: 0 auto; text-align: right; top: 50px; position: absolute; }
#header .wrap .nav li { display: inline-block; padding: 0 0 0 54px; }
#header .wrap .nav li a { font-size: 12px; text-decoration: none; color: #000; }
#header .wrap .nav li a:hover { color: #666; }
#header .wrap .maintitle { padding: 0 0 0 50%; width: 50%; height: 50%; top: 50%; position: absolute; }
#header .wrap .maintitle span { top: -220px; position: absolute; }
#header .wrap .maintitle h1 { padding: 26px 0 30px; }
#header .wrap .maintitle .name { width: 310px; text-align: center; font-size: 26px; color: #666; font-family: "Times New Roman", Times, serif; font-weight: normal; letter-spacing: 1px; }
#header .wrap .pagedown { text-align: center; position: absolute; bottom: 10px; width: 100% }
/**/
.section { width: 100%; }
.sectionIn { width: 900px; margin: 0 auto; position: relative; height: 100%; }
.section .point { font-size: 16px; background: #555; color: #fff; display: inline-block; padding: 2px; font-weight: 400; line-height: 1em }
.section h2 { font-size: 26px; font-weight: 400; line-height: 1.5em; padding: 0 0 0.8em; }
.section h3 { font-size: 18px; font-weight: 400; line-height: 1.5em; padding: 0 0 0.8em; }
.section p { font-size: 13px; line-height: 1.8em; }
/**/
#point1 { height: 1020px; }
#point1 .exp { position: absolute; top: 90px; left: 560px; }
#point1 .photo1 { position: absolute; top: 20px; left: -61px; }
#point1 .photo2 { position: absolute; top: 390px; left: 345px; }
#point1 .exp2 { position: absolute; right: -126px; top: 920px; display: block; }
/**/
#point2 { height: 380px; background: #eee; }
#point2 .exp { position: absolute; top: 72px; left: 4px; }
#point2 .photo3 { position: absolute; top: 0px; left: 440px; }
/**/
#point3 { height: 930px; }
#point3 .exp { position: absolute; top: 73px; left: 560px; }
#point3 .photo4 { position: absolute; top: 0px; left: 0px; }
#point3 .exp2 { position: absolute; top: 620px; left: 100px; }
#point3 .photo5 { position: absolute; bottom: 0px; left: 483px; }
/**/
#shoplistlink { background: #333; padding: 50px 0; text-align: center; margin: 0 0 150px; }
#shoplistlink a { width: 420px; padding: 35px 0 50px; color: #fff; font-size: 22px; text-decoration: none; text-align: center; display: block; border: 2px solid #fff; margin: 0 auto; background: url(../img/shoplistlink.png) center 75px  no-repeat; border-radius: 10px; }
#shoplistlink a:hover{background: url(../img/shoplistlink.png) center 80px  no-repeat #404040;}
/**/
.imgBox { height: 206px; padding: 154px 0 0; width: 100%; position: relative; text-align: center; }
.leftimg { width: 50%; height: 360px; position: absolute; top: 0; left: 0; }
#imgBox1 .leftimg { background-position: center center; background-image: url(../img/imgbox1.png); background-size: cover; }
.rightimg { width: 50%; height: 360px; position: absolute; top: 0; right: 0; }
#imgBox1 .rightimg { background-position: center center; background-image: url(../img/imgbox2.png); background-size: cover; }
.imglogo { position: relative; }
#imgBox2 .leftimg { background-position: center center; background-image: url(../img/imgbox3.png); background-size: cover; }
#imgBox2 .rightimg { background-position: center center; background-image: url(../img/imgbox4.png); background-size: cover; }
/**/
#osusume { width: 900px; margin: 0 auto; text-align: center; padding: 70px 0; }
#osusume h2 { padding: 5px 0 56px; font-size: 24px; font-weight: 400; letter-spacing: 1px; }
#osusume ul li { display: inline-block; vertical-align: top; padding: 0 11px; }
#osusume ul li:nth-of-type(1) { padding: 0 0 0 11px; }
#osusume ul li:nth-of-type(4) { padding: 0 11px 0 0; }
#osusume ul li .text1 { font-size: 14px; line-height: 1.5em; padding: 10px 0 0; }
#osusume ul li .next { padding: 20px 0 0; }
#osusume ul li .osusumePH { padding: 24px 0 0; }
#osusume ul li .text2 { font-size: 16px; line-height: 1.5em; padding: 10px 0 0; }
/**/
#movie { width: 100%; height: 630px; background: url(../img/movie-bg.png) right top no-repeat #333; }
#movie .youtube { width:900px; padding:100px 0 0; margin:0 auto; }
#movie .youtube iframe { width:704px; height:396px; }
/**/
#summary { width: 100%; padding: 100px 0 160px; position: relative; }
#summary h2 { width: 200px; margin: 0 auto; padding: 0 0 0 10px; font-size: 21px; font-weight: 400; text-align: center; letter-spacing: 10px; display: block; }
/**/
#summary .spec { width: 350px; height: 800px; padding: 0 0px 0 550px; margin: 0 auto; position:relative; }
#summary .spec h3 { padding: 135px 0 46px; font-size: 20px; font-weight: 500; text-align: center; letter-spacing: 2px; }
#summary .spec h3 em { font-size: 17px; font-style: normal; }
#summary .spec h4 { font-size: 13px; line-height: 23px; font-weight: 400; padding: 0 0 0 8px; }
#summary .spec dl { font-size: 13px; line-height: 23px; padding: 0 0 26px; }
#summary .spec dl dt { width: 120px; font-weight: 600; float : left; clear : both;/**/ }
#summary .spec dl dd { }
#summary .spec p { display: block; text-align: center; padding: 20px 0; }
#summary .spec p strong { color: #f00; font-size: 15px; font-weight: 500; border: #f00 solid 1px; padding: 6px 10px; margin: 0 auto; }
/**/
#summary .spec .productBox { position:absolute; top:70px; left:50px;}
#summary .spec .productBox p img{ width:420px;}

#summary .spec .productBox ul li { border:1px solid #ddd; width:130px; height:130px; display:inline-block; margin:0 2px; padding:1px;cursor:-moz-zoom-in;cursor:-webkit-zoom-in;cursor:zoom-in; }
#summary .spec .productBox ul li img{width:130px; height:130px;}
#summary .spec .productBox ul li { -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;}
#summary .spec .productBox ul li:hover{ border:1px solid #000; background:#000; }
/**/
#summary .variation { width: 100%; }
#summary .variation>p { width: 900px; margin: 22px auto; text-align: center; display: block; background: url(../img/black-line.gif) repeat-x center; }
#summary .variation>p span { display: inline-block; background: #fff; font-size: 16px; width: 136px; }
#summary .variation ul { width: 100%; letter-spacing: -0.4em; overflow: hidden; }
#summary .variation ul li { display: inline-block; letter-spacing: normal; float: left; }
#summary .variation ul li i { display: block; width: 100%; background-position: center; height: 160px; }
#summary .variation ul li p { font-size: 14px; padding: 24px 1em 0; background: url(../img/yajirushi.png) no-repeat center 8px; text-align: center; }
#summary #normal .variation ul li { width: 25%; }
#summary #notebook .variation ul li { width: 17%; }
#summary #notebook .variation ul li:nth-of-type(1) { width: 16%; }
#summary #notebook .variation ul li:nth-of-type(6) { width: 16%; }
/**/
#shoplist { width: 100%; background: #eee; padding: 80px 0 120px; }
#shoplist h2 { font-size: 21px; text-align: center; width: 100%; font-weight: 400; letter-spacing: 3px;  }
#shoplist ul { text-align:center; padding:50px 0; margin:0 auto; width:900px;}
#shoplist ul li { border:1px solid #666; float:left; margin:0 5px; }
#shoplist ul li a { color:#000; font-size:18px; text-decoration:none; padding:20px; display:block;}
#shoplist ul li a:hover { background:#ccc; } 
/**/
#attention { width:100%; padding:30px 0; background:#888; color:#fff; }
#attention p { width:900px; margin:0 auto; padding:10px 0; font-size:11px; line-height:1.8em; }
#attention p strong{ font-size:13px; font-weight:400;}
/**/
#footer { width:100%; padding: 60px 0 140px; background: #333; }
#footer .logo { text-align: center; width: 100%; }
#footer .contact { text-align: center; width: 100%;  font-size:13px; color:#fff; padding:35px 0 5px; font-weight:300; }
#footer .contact a { color:#fff; }
#footer .contact a:hover {  color:#bbb; }
#footer h5.copyright { text-align: center; color: #fff; text-align: center; font-weight: 400; font-size: 14px; letter-spacing: 2px; padding: 30px 0; display: block; }
/**/
#totop { width:50px; height:50px;  position: fixed; bottom:100px; right: 2%; display:block; z-index:10000; }
#totop a { position: absolute; display: block; width: 50px; height: 50px; border: solid 2px #fff; background: url(../img/totop.png) rgba(0,0,0,0.20); border-radius: 6px;  }
#totop a { -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;}
#totop a:hover { cursor:pointer; }
}
@media screen and (max-width: 480px) {
/*スマホ*/
.spnone { display:none;}
img{max-width:100%; height:auto;}
#header { width: 100%; position: relative; height:580px; }
#header .wrap { width: 100%; height:580px; margin: 0 auto; position: relative; background-image: url(../img/mainimg.png); background-position: center top; background-repeat: no-repeat; background-size: 210% auto; }
#header .wrap .SHELLY_logo { position: absolute; top: 20px; left: 20px; width:60px; height:auto; }
#header .wrap .nav { width: 90%; left:5%; text-align: center; bottom: 30px; position: absolute; }
#header .wrap .nav li { display: inline-block; width:46%;padding: 4px 1%;  }
#header .wrap .nav li a {display: block; font-size: 13px; text-decoration: none; color: #000;padding: 14px 0; width:100%; border:1px solid #666; }
#header .wrap .maintitle { position: absolute; top: 60px; right: 10px; width:180px;}
#header .wrap .maintitle span { top: 0px; }
#header .wrap .maintitle .copy img { width:180px;}
#header .wrap .maintitle h1 { padding: 15px 0 20px; }
#header .wrap .maintitle h1 img{ width:180px;}
#header .wrap .maintitle .top-product{ width:180px;}
#header .wrap .maintitle .name { width: 180px; text-align: center; font-size: 22px; color: #666; font-family: "Times New Roman", Times, serif; font-weight: normal; letter-spacing: 1px; }
#header .wrap .pagedown { display:none; }
/**/
.section { width: 100%;  }
.sectionIn { width: 90%; margin: 0 auto; position: relative; overflow:hidden; }
.section .point { font-size: 14px; background: #555; color: #fff; display: inline-block; padding: 4px 10px; font-weight: 400; line-height: 1em; }
.section h2 { font-size: 23px; font-weight: 400; line-height: 1.5em; padding:0.8em  0 ; }
.section h3 { font-size: 18px; font-weight: 400; line-height: 1.5em; padding: 0 0 0.8em; }
.section p { font-size: 14px; line-height: 1.8em; }
/**/
#point1 .sectionIn { height: 940px; }
#point1 .exp { }
#point1 .photo1 { width:95%; }
#point1 .photo2 { width:100%; }
#point1 .exp2 { position: absolute; right: 0px; bottom:30px;  display: block; }
/**/
#point2 {  background: #eee; }
#point2 .sectionIn { height: 400px; }
#point2 .exp { position: absolute; top: 180px; left: 0px; }
#point2 .photo3 { position: absolute; top: 0px; left: 0px; }
/**/
#point3 .sectionIn { height: 1050px; }
#point3 .exp { position: absolute; top: 300px; left: 0px; }
#point3 .photo4 { position: absolute; top: 0px;right: 0px; text-align:right; }
#point3 .photo4 img { width:70%; }

#point3 .exp2 { position: absolute; top: 560px; left: 0px; }
#point3 .photo5 { position: absolute; bottom: 0px; left: 0px; }
#point3 .photo5 img { width:70%; }
/**/
#shoplistlink { background: #333; padding: 30px 0; text-align: center; margin: 0 0 50px; }
#shoplistlink a { width: 250px; padding: 18px 0 33px; color: #fff; font-size: 16px; text-decoration: none; text-align: center; display: block; border: 2px solid #fff; margin: 0 auto; background: url(../img/shoplistlink.png) center 40px  no-repeat; border-radius: 10px; }
/**/
.imgBox { height: 100px; padding: 130px 0 0; width: 100%; position: relative; text-align: center; }
.leftimg { width: 50%; height: 150px; position: absolute; top: 0; left: 0; }
#imgBox1 .leftimg { background-position: center center; background-image: url(../img/imgbox1.png); background-size: cover; }
.rightimg { width: 50%; height: 150px; position: absolute; top: 0; right: 0; }
#imgBox1 .rightimg { background-position: center center; background-image: url(../img/imgbox2.png); background-size: cover; }
.imglogo { position: relative; }
.imglogo img{ width:150px;}
#imgBox2 .leftimg { background-position: center center; background-image: url(../img/imgbox3.png); background-size: cover; }
#imgBox2 .rightimg { background-position: center center; background-image: url(../img/imgbox4.png); background-size: cover; }
/**/
#osusume { width: 100%;height: 460px; padding:20px 0; overflow: hidden; margin:0 0 20px;}
#osusume h2 { padding: 5px 0 40px; font-size: 24px; font-weight: 400; letter-spacing: 1px; text-align: center;}
#osusume .mask { height: 480px; /* 横スクロールする理屈上の高さ */ width: 100%; -webkit-overflow-scrolling: touch;  /* 慣性スクロール */ overflow-x: auto; }
#osusume .mask {background: url(../img/maskbg.png) center center no-repeat; background-size: 100% auto; }
#osusume ul {
  display: inline-table;
  max-width: 100%;}
#osusume ul li { vertical-align: top; display: table-cell; text-align: center; }
#osusume ul li>img { width: 40px;}
#osusume ul li .text1 { font-size: 16px; line-height: 1.5em; padding: 10px 0 0; }
#osusume ul li .next { padding: 20px 0 0; }
#osusume ul li .next img { width: 60px; }
#osusume ul li .osusumePH {  width: 200px; margin:10px auto 0; }
#osusume ul li .text2 {width: 380px; font-size: 18px; line-height: 1.5em; padding: 10px 0 50px; }
/**/
#movie { width: 100%; height:230px; background: url(../img/movie-bg.png) right top no-repeat #333 ; background-size:auto 100%; }
#movie .youtube { width:90%; padding:30px 0 0; margin:0 auto; }
#movie .youtube iframe {  width: 240px; height:160px; }
/**/
#summary { width: 100%; padding: 50px 0 60px; position: relative; }
#summary h2 { width: 200px; margin: 0 auto; padding: 0 0 0 10px; font-size: 21px; font-weight: 400; text-align: center; letter-spacing: 10px; display: block; }
/**/
#summary .spec { width: 90%; margin: 0 auto; position:relative; }
#summary .spec h3 { padding: 60px 0 40px; font-size: 20px; font-weight: 500; text-align: center; letter-spacing: 2px; }
#summary .spec h3 em { font-size: 17px; font-style: normal; }
#summary .spec h4 { font-size: 13px; line-height: 23px; font-weight: 400; padding: 0 0 0 8px; }
#summary .spec dl { font-size: 13px; line-height: 23px; padding: 0 0 10px; }
#summary .spec dl dt { width: 110px; font-weight: 600; float : left; clear : both;/**/ }
#summary .spec dl dd { }
#summary .spec p { display: block; text-align: center; padding: 20px 0; }
#summary .spec p strong { color: #f00; font-size: 15px; font-weight: 500; border: #f00 solid 1px; padding: 6px 10px; margin: 0 auto; }
/**/
#summary .spec .productBox { }
#summary .spec .productBox p { height:320px;}
#summary .spec .productBox ul li { border:1px solid #ddd; width:30%; height:auto; display:inline-block; margin:0 2px; padding:1px;}
#summary .spec .productBox ul li img {width:100%; height:auto;}
/**/
#summary .variation { width: 100%; }
#summary .variation>p { width: 100%; margin: 22px auto; text-align: center; display: block; background: url(../img/black-line.gif) repeat-x center; }
#summary .variation>p span { display: inline-block; background: #fff; font-size: 16px; width: 136px; }
#summary .variation ul { width: 100%; letter-spacing: -0.4em; overflow: hidden; }
#summary .variation ul li { display: inline-block; letter-spacing: normal; float: left; }
#summary .variation ul li i { display: block; width: 100%; background-position: center; height: 120px; }
#summary .variation ul li p { font-size: 12px; padding: 24px 1em 16px; background: url(../img/yajirushi.png) no-repeat center 8px; text-align: center; }
#summary #normal .variation ul li { width: 50%; }
#summary #notebook .variation ul li { width: 33%; }
#summary #notebook .variation ul li:nth-of-type(2) { width: 34%; }
#summary #notebook .variation ul li:nth-of-type(5) { width: 34%; }
/**/
#shoplist { width: 100%; background: #eee; padding: 50px 0 30px; }
#shoplist h2 { font-size: 21px; text-align: center; width: 100%; font-weight: 400; letter-spacing: 1px; }
#shoplist ul { text-align:center; padding:30px 0; margin:0 auto; width:90%;}
#shoplist ul li { border:1px solid #666; width:100%; margin:20px 0; }
#shoplist ul li a { color:#000; font-size:16px; text-decoration:none; padding:25px 10px; display:block;}
/**/
#attention { width:100%; padding:30px 0; background:#888; color:#fff; }
#attention p { width:90%; margin:0 auto; padding:10px 0; font-size:11px; line-height:1.8em; }
#attention p strong{ font-size:14px; font-weight:400;}
/**/
#footer {  width:100%; padding: 40px 0 40px; background: #333; }
#footer .logo { text-align: center; width: 100%; }
#footer .contact { text-align: center; width: 100%;  font-size:14px; color:#fff; padding:35px 0 5px; font-weight:300; }
#footer .contact a { color:#fff; }
#footer h5.copyright { text-align: center; color: #fff; text-align: center; font-weight: 400; font-size: 10px; letter-spacing: 2px; padding: 30px 0; display: block; }

}