@charset "UTF-8";
html,body{
	margin: 0px;
	padding: 0px;
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

h2{
	font-family:arial black;
	text-align: center;
	font-size: 1.2em;
	font-weight: 1200;
	line-height: 2;
	letter-spacing: 10px;
}
h3{
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: 1px;	
}
img{
	width: 100%;
}
a:link { 	
	transition-duration:0.4s;
	color: #000000; }
a:visited { color: #000000; }
a:active { color: #000000; }
a:hover{ color: #999999; }

div.header{
  display: -webkit-box; /*Android4.3*/
  display: -moz-box;    /*Firefox21*/
  display: -ms-flexbox; /*IE10*/
  display: -webkit-flex; /*PC-Safari,iOS8.4*/
  display: flex;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

div.top_logo{
	background-color: #000;
	text-align: center;
	width: 45%;
}
p.logo{
	width: 60%;
	text-align: center;
	margin-top: 25%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 15%;
}
p.logoissue{
	width: 30%;
	max-width: 200px;
	text-align: center;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10%;
}
div.top_img{
	text-align: right;
	width: 55%;
	padding: 0;
}
p.topimg{
	text-align: right;
	margin: 0;
	padding: 0;
}
p.topimg img{
	width: 100%;
	margin: 0px;
	display: block;
}
div.contents{
	width: 70%;
	min-width: 700px;
	text-align: center;
	margin: 50px auto 0;
	clear: both;
}
div.intro{
	text-align: center;
	padding-top: 70px;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 2;
	letter-spacing: 1px;
}
.intro span{font-size: 1.3em;}

div.function{
	text-align: center;
	margin-top: 80px;
}
.function p{
	font-size: 0.7em;
	font-weight: 600;
	line-height: 2;
	letter-spacing: 1px;
}

div.function_left{
	float: left;
	width: 45%;
	margin-bottom: 50px;
}
div.function_left img{width: 100%;}
div.function_right{
	float: left;
	width: 45%;
	margin-left: 10%;
	margin-bottom: 50px;
}
div.function_right img{width: 100%;}

div.longbase{
	width: 700px;
	height: 580px;
	position: relative;
	clear: both;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	background: url(img/long.gif) no-repeat center center;
	background-size:49% auto;
}
div.shortbase{
	display: inline-block;
	clear: both;
	width: 700px;
	height: 550px;
	margin-top: 90px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	text-align: left;
	background: url(img/short.gif) no-repeat center center;
	background-size:49% auto;
}
.longbase p{
	font-size: 0.7em;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 1px;
}
.shortbase p{
	font-size: 0.7em;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 1px;
}

.long_title{
	display: inline-block;
	width: 20%;
	max-width: 150px;
	position: absolute;
	top:20%;
    left: 5%;
}
.short_title{
	display: inline-block;
	width: 20%;
	max-width: 150px;
	position: absolute;
	top: 10%;
    left: 75%;
}

.marker_pink{
	background: #ff88cc;
	padding: 0.2em;
}
.marker_yellow{
	background: #ffff00;
	padding: 0.2em;}

div.shortlong_cap{
	font-family:Impact;
	display: block;
	text-align: center;
	margin: 10px auto 50px;
	line-height: 1.5;
}
div.shortlong_price{
	text-align: right;
	font-size: 0.7em;
	font-weight: 300;
	line-height: 2;
	letter-spacing: 1px;
	margin-right :30px;
	width: 43%;
	float: left;
}
.shortlong_price span{
	font-size: 1.5em;
}
.long1{
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
	   position: absolute;
	 top:30%;
    left: 76%;

}
.longline1{
	width: 13%;
	position: absolute;
	 top:30%;
    left: 62%;
}
.long2{
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
		   position: absolute;
	 top:70%;
    left: 5%;
}
.longline2{
	width: 13%;
	 position: absolute;
	 top:62%;
    left:15%;
}
.long3{
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
		   position: absolute;
	 top:63%;
    left: 66%;
}
.longline3{
	width: 13%;
	position: absolute;
	 top:61%;
    left: 66%;
}
.short1{
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
		position: absolute;
	 top:40%;
    left: 0%;
}
.shortline1{
	width: 11%;
	position: absolute;
	 top:35%;
    left: 20%;
}
.short2{
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
		position: absolute;
	 top:38%;
    left: 75%;
}
.shortline2{
	width: 12%;
	position: absolute;
	 top:33%;
    left: 70%;
}
.short3{
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
			position: absolute;
	 top: 75%;
    left: 3%;
}
.shortline3{
	width: 14%;
	position: absolute;
	 top:65%;
    left: 19%;
}
.short4{
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
			position: absolute;
	 top:73%;
    left: 73%;
}
.shortline4{
	width: 12%;
	position: absolute;
	 top: 65%;
    left: 65%;
}
a.webshop p:link { color: #ffffff; }
a.webshop p:visited { color: #ffffff;}
a.webshop p:active { color: #ffffff; }
a.webshop p:hover{
	color: #000000;
	background: #ffffff;
}
p.btn{
	border-radius: 10px;
	margin-top: 3%;
	background: #000000;
	padding: 1.1em;
	letter-spacing: 2px;
	text-decoration: none;
	text-align: center;
	border: solid 1px #000000;
	float: left;
	width: 30%;
	transition-duration:0.4s;
	font-size: 0.9em;
	font-weight: 700;
	color:#ffffff;
}
div.issue001{
	display:inline-block;
	margin-top:100px;
}
div.issue_one{
	display:inline-block;
	width: 100%;
	clear: both;
	margin-top: 1%;
}
div.issue_one_vertical{
	display:inline-block;
	width: 100%;
	clear: both;
	margin-top: 1%;
}
div.issue_two{
	display:inline-block;
	width: 100%;
	margin-top: 1%;
}
div.issue_two_left{
	display:inline-block;
	width: 49%;
	float: left;
}
div.issue_two_right{
	display:inline-block;
	width: 49%;
	float: left;
	margin-left: 2%;
}

div.coordinate{
	clear: both;
	text-align:center;
	width: 450px;
	height: 809px;
	margin: 150px auto;
	background: url(img/coordinate_bg.png) no-repeat center center;
background-size:100% auto;
	}
div.coordinateslide{
	text-align: center;
	padding:70px;
}
div.coordinateimg{width:100%;
margin:auto;
margin-top:20px;}
p.coordinatetitle{
	width:45%;
	margin:auto;
}
table.coordinate_cap{
	width:100%;
	margin-top:30px;
	font-size:0.8em;
	text-align:left;
}
table.coordinate_cap td{
	margin-top:30px;
	margin-left:20px;
}
/* fotter */
td.footertd{width:23%;}
.footertd img{width:60%;}
td.footertdsns{width:15%;}
.footertdsns img{width:30%;}
.sp_icon{width:60px;
display:inline-block;}
.sp_logo{width:120px;}

.sp { display: none !important; }

/* フェードイン */
.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}

/* レスポンシブ */

 @media screen and ( max-width : 480px ){
    /*　画面サイズ 500pxから999pxまで適用　*/
.pc { display: none !important; }
.sp { display: block !important; }
h2{font-family:GillSans-Bold;}
h3{	font-size: 0.7em;
	font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}

div.header{
		 display:block;
		 width:100%;
		 padding:0;
		 position:relative;
	 }
div.top_logo_sp{
	display:block;
	position:absolute;
	width:63%;
	 top:49%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
	 }
div.logoissue_sp{
	display:block;
	position:absolute;
	width:26%;
	 top:70%;
left: 20%;}
div.logoissue2_sp{
	display:block;
	position:absolute;
	width:26%;
	 top:70%;
left: 54%;}
div.contents{
	width: 90%;
	min-width: 1px;
	text-align: center;
	margin: 50px auto 0;
	clear: both;
}
div.intro{
	text-align: center;
	padding-top: 40px;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 2;
	letter-spacing: 0.4px;
}
div.function_left{
	margin-right:auto;
	margin-left:auto;
	display:block;
	width: 100%;
	margin-bottom: 50px;
}
div.function_right{
	margin-right:auto;
	margin-left:auto;
	display:block;
	width: 100%;
	margin-bottom: 50px;
}
.function p{
	font-size: 0.6em;
	font-weight: 600;
	line-height: 2;
	letter-spacing: 1px;
}
.long_title{
	width: 25%;
	max-width: 150px;
	position: absolute;
	top:20%;
    left: 5%;
}
.short_title{
	width: 28%;
	max-width: 150px;
	position: absolute;
	top: 10%;
    left: 5%;
}
	 span.letter_s_sp{
		 font-size:0.5em;
		 letter-spacing: 0;
	 }
	 
div.longbase{
	width:100%;
	height:500px;
	background-size:70% auto;
	 }	 
div.shortbase{
	width:100%;
	height:500px;
	background-size:70% auto;
	 }
.longbase p{
	font-size: 0.6em;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 1px;
}
.shortbase p{
	font-size: 0.6em;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 1px;
}

.long1{
	 top:38%;
    left: 70%;
    -moz-transform: rotate(8deg);
    -webkit-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);
}
.longline1{
	width: 15%;
	 top: 32%;
    left: 70%;
}
.long2{
	 top:60%;
    left: 2%;
    -moz-transform: rotate(8deg);
    -webkit-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);
	 }
.longline2{
	width: 13%;
	 top:55%;
    left:15%;
}
.long3{
	 top:68%;
    left: 66%;
    -moz-transform: rotate(-8deg);
    -webkit-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
	 }
.longline3{
	width: 15%;
	 top:64%;
    left: 62%;
}	 
.short1{
	 top:59%;
    left: 64%;
    -moz-transform: rotate(-8deg);
    -webkit-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);}
.shortline1{
	width: 13%;
	 top:30%;
    left: 10%;
}
.short2{
	 top:30%;
    left: 70%;
}
.shortline2{
	width: 15%;
	 top:26%;
    left: 67%;
}
.short3{
	 top: 68%;
    left: 4%;
}
.shortline3{
	width: 14%;
	 top: 63%;
    left: 15%;
}
.short4{
	 top:35%;
    left: 0%;
    -moz-transform: rotate(8deg);
    -webkit-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);
	 }
.shortline4{
	width: 12%;
	 top: 53%;
    left: 64%;
}
	 
div.shortlong_cap{
	clear:both;
	width:100%;
	text-align: center;
	line-height: 1.5;
	font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
div.shortlong_price{
	display:inline-block;
	clear:both;
	text-align: center;
	font-size: 0.8em;
	font-weight: 500;
	line-height: 2;
	width:60%;
	letter-spacing: 1px;
	margin-right: 20%;
	margin-left: 20%;	
}
div.btn_sp{width:60%;
	margin-right:15%;
	margin-left:15%;}
p.btn{
	display:inline-block;
	clear:both;
	width: 100%;
	transition-duration:0.4s;
	font-size: 0.9em;
	font-weight: 700;
	color:#ffffff;
}
	 
div.issue001{
	display:inline-block;
	margin-top:100px;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
}
div.issue_one{
	display:inline-block;
	width: 90%;
	clear: both;
	margin-top: 2%;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
}
div.issue_one_vertical{
		width: 70%;
	margin-right:auto;
	margin-left:auto; 
	 }
div.issue_two{
 		clear: both;
		width: 100%;
		margin-top: 2%;
}
div.issue_two_left{
		clear: both;
	display:inline-block;
	width: 70%;
	margin-top: 0%;
	margin-right:15%;
	margin-left:15%;
}
div.issue_two_right{
		clear: both;
	display:inline-block;
	width: 70%;
	margin-top: 2%;
	margin-right:15%;
	margin-left:15%;
}
div.coordinate{
	clear: both;
	width: 100%;
	height: 700px;
	margin: 100px auto;
background-size:100% auto;
	}
p.coordinatetitle{
	width:50%;padding-top:20px;
}
table.coordinate_cap{
	width:100%;
	margin-top:30px;
	font-size:0.6em;
	text-align:left;
}
}