/*-----------------------------------------------------
	http://sa-su-ke.com
	Author:AMRITA RECORD
------------------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);
@import url(http://fonts.googleapis.com/css?family=BenchNine:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Poller+One);

@font-face {
    font-family: 'AnimalsNormal';
    src: url('fonts/animals-webfont.eot');
    src: url('fonts/animals-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/animals-webfont.woff') format('woff'),
         url('fonts/animals-webfont.ttf') format('truetype'),
         url('fonts/animals-webfont.svg#AnimalsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* CSS reset
--------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0;padding:0;}
html,body {margin:0;padding:0;height: 100%;width: 100%;font-family:Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img { border:0;}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;}
address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
span.ja {font-size:100%;font-weight:bold;font-family:  Georgia, serif;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}

body {font-size: 15px;color: #1e1e1e;-webkit-font-smoothing: antialiased;background: #d00010;}
h1,h2,h3,h4,h5,h6 {font-family: 'Lato', Meiryo,sans-serif;}

a {color: #515151;text-decoration: none; font-family: 'Lato', Meiryo,sans-serif;}
footer a {font-weight:bold;color: #fff;}
a:hover {color: #777;}
.clr {clear: both;padding: 0;height: 0;margin: 0;}
.clrl{clear: both;padding: 0 0 30px 0;height: 0;margin: 0;}


html { height: 100%; }

*,
*:after,
*:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding: 0;margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:after {content: "";display: table;clear: both;}

#spdaiya {width: 100%;}
#wrap {width: 80%; margin:0 auto;}

header {width: 90%; margin:0 auto;}
header h1.title {height: 0;padding-top: 15%;background: url('img/h1minsho.png') 0 0 no-repeat;background-size: contain;text-indent:-9999px;}
header h1.titlegoods {display:block;height: 0;padding-top: 33.72%;background: url('LORAN2015GOODS.jpg') 0 0 no-repeat;background-size: contain;text-indent:-9999px;}
footer {width: 100%; padding:30px 0;}
footer p {width: 90%; margin:0 auto;}

div.border { margin:13px 0px;padding:5px; border:1px solid #212121;background: #fff;}
img.spno {width: 30%; }
div.sptext {width: 90%;margin:0 auto;}
div.kashi {display:block;height: 0;padding-top: 100%;background: url('img/yellsongword.jpg') 0 0 no-repeat;background-size: contain;text-indent:-9999px;}
div.shot3 {display:block;height: 0;padding-top: 70%;background: url('img/3shot.jpg') 0 0 no-repeat;background-size: contain;text-indent:-9999px;}
#wrap div.ifr {position: relative;overflow: hidden;height: 0;padding-bottom: 56.25%;padding-top: 30px;margin: 0 auto 10px auto;}
#wrap .ifr iframe,
#wrap .ifr object,
#wrap .ifr embed{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

h2.h2titleup{position: relative;margin: 10px 0 1.5em;padding: 0.8em;background: #ffd800;color: #212121;font-size: 150%;font-weight: bold;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}
h2.h2titleup:after{position: absolute;top: -15px;left: 10%;z-index: 90;margin-left: -15px;border-bottom: 15px solid #ffd800;border-left: 15px solid transparent;border-right: 15px solid transparent;border-top: 0;content: "";}
h2.h2title{position: relative;margin: 10px 0 1.5em;padding: 0.8em;background: #ffd800;color: #212121;font-size: 150%;font-weight: bold;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}
h2.h2title:after{position: absolute;bottom: -15px;left: 10%;z-index: 90;margin-left: -15px;border-top: 15px solid #ffd800;border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 0;content: "";}
h2.h2titlem{position: relative;margin: 10px 0 1.5em;padding: 0.8em;background: #7ecc3e;color: #fff;font-size: 150%;font-weight: bold;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}
h2.h2titlem:after{position: absolute;bottom: -15px;left: 10%;z-index: 90;margin-left: -15px;border-top: 15px solid #7ecc3e;border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 0;content: "";}
h3{width: 98%; position: relative;margin: 17px auto;padding:  2px 0.8em;background: #c14f51;color: #fff;font-size: 120%;font-weight: bold;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}
h3:after{position: absolute;bottom: -15px;left: 10%;z-index: 90;margin-left: -15px;border-top: 15px solid #c14f51;border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 0;content: "";}
h2.maru{font-family: 'BenchNine',Meiryo, sans-serif; font-weight: 900;font-size: 300%; padding: 90px 0 0 0; color: #fff;position: relative;width: 200px;height: 200px; -webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;background-color: #1158c1;text-align: center;float: left; line-height: 25px;margin: 0 auto 20px auto;}
h2.maru:after{position: absolute;top: 85px;right: -20px;width: 0;height: 0;border-top:  15px solid transparent;border-right: none;border-bottom: 15px solid transparent;border-left: 30px solid #1158c1;content: "";}

p.description { font-size:130%;margin:0 0 10px 0;font-weight: bold;}
ol {counter-reset: li; /* Initiate a counter */list-style: decimal; /* Remove default numbering */*list-style: decimal; /* Keep using default numbering for IE6/7 */font: 110% 'trebuchet MS', 'lucida sans';padding: 0;margin-bottom: 2em;text-shadow: 0 1px 0 rgba(255,255,255,.5);}
.number li:before {float: left;background: #8bcdba;width: 1.5em;height: 1.5em;border-radius: 50%;color: #fff;text-align: center;line-height: 1.5;}
.number li{position: relative;display: block;padding: .4em .4em .4em .8em;*padding: .4em;margin: .5em 0 .5em 2.5em;background: #ddd;color: #444;font-weight: bold;text-decoration: none;transition: all .3s ease-out;   }
.number li:before{content: counter(li);counter-increment: li;position: absolute; left: -2.5em;top: 50%;margin-top: -1em;background: #fa8072;height: 2em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;}

span.red { font-size:130%;font-weight: bold;color:#B92A2C;}
span.fat { font-size:250%;font-weight: bold;color:#B92A2C;}
span.pinkji { font-size:95%;color:#c22761;}
span.komo { font-size:90%;color:#212121;font-weight: normal;}
span.fatku { font-size:118%;font-weight: bold;color:#212121;}

p.jump{clear: both;position: relative;margin: 0 0 1.5em;background: #d3286c;color: #fff;font-size: 150%;font-weight: bold;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;}
p.jump a {display:block;padding: 0.5em; color: #fff; }
p.jump a:hover{ color: #53cdd8;background: #e34d89;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;}
p.content{ margin:0 0 15px 0;}

ul.size{width:50%;}
ul.size li{width:25%;float:left;border:1px solid #999999;padding:1px;}
span.vox {margin: 2px 0 5px 2px;padding:2px 5px;color:#fff;font-weight:bold;text-align:center;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;}
span.black{background:#000;}
span.blue{background:#0b3682;}
span.gray{background:#868380;}
span.blown{background:#3a2720;}
span.navy{background:#1e2544;}
span.oblue{background:#1e8cc8;}
span.pink{background:#c22761;}
span.led{background:#c9222e;}
span.vio{background:#40276d;}
p.pcolor{clear: both;padding:10px 10px 15px 10px;line-height:200%;}

div.jacket{width:30%;float:left;}
div.jacket img{width:100%;border:1px solid #888888;}
div.jacket_text{width:68%;float:right;}

img.naka{width:100%;margin:0 auto;}


#open01,#open02,#open03,#open04,#open05,#open06,#open07,#open08,#open09,#open10 {top: 0;left: 0;width: 100%;height: 100%;display: none;position: absolute;}

.close_overlay {top: 0;left: 0;width: 100%;height: 100%;display: block;text-indent: -9999px;position: absolute;background: #000;opacity: 0.5;z-index: 5;}
.modal_window {top: 30%;left: 50%;margin: -150px 0 0 -200px;width: 600px;height: 800px;text-align: center;display: block;background: #fff;position: absolute;z-index: 10;}
.modal_window h2 {margin-bottom: 20px;width: 600px;height: 30px;line-height: 30px;color: #fff;font-size: 12px;font-weight: bold;text-align: left;text-indent: 15px;background: #000;}

img.mama{width:100%;}
p.cyui{padding:5px; margin:10px 0; border:1px solid #999999;}
.boxlink {display:block;width:170px; height: auto;text-align: center; margin: 1px 0 1px 20px; border-radius: 5px;color:#999;font-family: 'Lato', Meiryo,sans-serif;}
.boxlink a{display:block;color:#fff;padding: 3px; line-height: 140%; }
.boxlink a:hover{ opacity: 0.35;color:#fff;}
p.facebook { float: left; background-color: #3257b7;}
p.twitter { float: left; background-color: #74cadc;}
p.Instagram { float: left; background-color: #413D3C;}
p.line { float: left; background-color: #76BA2A;}
p.hp {width:220px; float: left; background-color: #3c8fb6;}
p.gai {width:250px; background-color: #4db1c6;}
.button{width:170px; height: auto;text-align: center; margin: 1px 0 1px 20px; border-radius: 5px;color:#fff;font-family: 'Lato', Meiryo,sans-serif;background-color: #3257b7;}
p.kakusan{width:80%; height: auto;text-align: center; font-size: 180%;font-weight: bold;margin: 1px 0 1px 20px; border-radius: 5px;color:#fff;font-family: 'Lato', Meiryo,sans-serif;background-color: #3257b7;}


/* CSS3 ModalWindow SET
-------------------------- */
@-webkit-keyframes modalFadeIn {
	0% {opacity:0;display:block;}
	100% {opacity:1;}
}
div#modal div:target {
	-webkit-animation-name: modalFadeIn; 
  	-webkit-animation-duration: 1s;
  	-webkit-animation-iteration-count: 1;
	opacity: 1;
	display:block;
}

@media screen and (max-width: 768px) {
header {width: 90%; margin:0 auto;}
}

@media screen and (max-width: 480px) {
header {width: 100%;}
#wrap {width: 95%; margin:0 auto;}
img.spno { display:none; }
div.sptext { float: none;width: 100%;margin:0;}
h2.h2title{margin: 0 0 1.5em;}
h2.maru{ display:none; }
ul.size{width:100%;}
.modal_window {top: 50%;left: 50%;margin: -150px 0 0 -200px;width: 100%;height: 100%;text-align: center;display: block;background: #fff;position: absolute;z-index: 10;}
.modal_window h2 {margin-bottom: 20px;width: 100%;height: 30px;line-height: 30px;color: #fff;font-size: 12px;font-weight: bold;text-align: left;text-indent: 15px;background: #000;}
}