@charset "utf-8";

/*==================================================
	Base
==================================================
html,body,div,p,h1,h2,h3,h4,h5,h6,address,blockquote,pre,ul,ol,li,dl,dt,dd,table,caption,col,colgroup,thead,tbody,tfoot,tr,th,td,form,fieldset,legend,label,img,iframe,object,span,a,em,strong,sub,sup,del,ins{
margin:0;
padding:0;
}

div,ul,ol,dl,dt,dd{
zoom:1;
}

body{
line-height:1.5;
font-size:75%;
background: url(/images/shotnote/body_bg.jpg) top repeat-x;
}

a:link{color:#167dcb;text-decoration:underline;}
a:visited{color:#6c8293;text-decoration:underline;}
a:hover,
a:active,
a:focus{color:#00b69a;text-decoration:underline;}

ul{
list-style:none;
}

img{
border:0 none;
vertical-align:bottom;
}

*/

/*==================================================
	#header
==================================================
#header{
position:relative;
margin:0 auto 5px;
width:840px;
height:145px;
background:url("../../../../images/shotnote/bg-header-01.gif") repeat-x 0 0;
}

#header p{
position:absolute;
top:20px;
left:20px;
}

#header #top{
position:absolute;
top:33px;
left:192px;
}

#header #manual{
position:absolute;
top:68px;
left:64px;
}
#hmenu{
position:relative;
margin:0 auto 5px;
width:840px;
background:url("../../../../images/shotnote/bg-header-01.gif") repeat-x 0 0;
}
*/

/*==================================================
	#shotnote #content
==================================================*/
#shotnote {
	position: relative;
	padding-top: 120px !important;
}

#shotnote #content > section {
	padding-bottom: 20px;
	border-bottom: 1px solid #DDD;
}

#shotnote #content > section:last-child {
	border-bottom: none;
}

#shotnote #content > section .title h1 {
	padding: 48px 0 32px 0;
}

#shotnote #content{
margin:0 auto;
}

#shotnote #content .date{
margin-bottom:20px;
text-align:right;
font-weight:bold;
color:#b80000;
}

#shotnote #content p{
padding-top: 12px;
padding-bottom: 12px;
}


/*==================================================
	main-visual
==================================================*/
/* 	main-visual-01
--------------------------------------------------*/
#shotnote #content .main-visual-01{
	position:relative;
	height:540px;
	background-image: url("../../../../images/shotnote/bg-main-visual-01.jpg?2");
	background-repeat: no-repeat;
	background-position: right top;
}

#shotnote #content .main-visual-01 h2,
#shotnote #content .main-visual-01 h3,
#shotnote #content .main-visual-01 p,
#shotnote #content .main-visual-01 li{
position:absolute;
}
#shotnote #content .main-visual-01 .img-00{
top:0;
left:0;
}
#shotnote #content .main-visual-01 .img-01{
top:72px;
left:0;
}
#shotnote #content .main-visual-01 .img-02{
top:140px;
left:0;
}
#shotnote #content .main-visual-01 .btn-01{
top:208px;
left:0;
}
#shotnote #content .main-visual-01 .btn-02{
position:absolute;
top:208px;
left:247px;
}
#shotnote #content .main-visual-01 .hdg-10{
top: 317px;
left:0;
}
#shotnote #content .main-visual-01 .btn-03{
top: 350px;
left:0;
}
#shotnote #content .main-visual-01 .btn-04{
top:379px;
left:200px;
}
#shotnote #content .main-visual-01 .img-20{
	top:370px;
	left:202px;
}
#shotnote #content .main-visual-01 .img-22{
top:450px;
left:200px;
}
#shotnote #content .main-visual-01 .hdg-11{
top:281px;
left:430px;
}
#shotnote #content .main-visual-01 .img-14{
top:345px;
left:430px;
}
#shotnote #content .main-visual-01 .img-15{
	top:410px;
	left:550px;
}
#shotnote #content .main-visual-01 .img-15-1{
	top:350px;
	left:460px;
}
#shotnote #content .main-visual-01 .img-16{
	top:470px;
	left:470px;
}
#shotnote #content .main-visual-01 .buynow{
	top: 380px;
	left:580px;
	}
	
#shotnote #content .main-visual-01 .btn-13{
	top: 430px;
	left:0;
	}
/* 	main-visual-02
--------------------------------------------------*/
#shotnote #content .main-visual-02{
position:relative;
width: 800px;
margin: 0 80px;
padding-top: 10px;
height:450px;
background:url("../../../../images/shotnote/bg-main-visual-02.jpg") no-repeat 0 0;
}

#shotnote #content .main-visual-02 ul li{
	position:absolute;
	left: 4px;
}

#shotnote #content .main-visual-02 ul #txt-01{
	top:109px;
}
#shotnote #content .main-visual-02 ul #txt-02{
	top:208px;
}
#shotnote #content .main-visual-02 ul #txt-03{
	top:10px;
	left:540px;
}
#shotnote #content .main-visual-02 ul #txt-04{
	top:104px;
	left:543px;
}
#shotnote #content .main-visual-02 ul #txt-05{
	top:157px;
	left:543px;
}
#shotnote #content .main-visual-02 ul #txt-06{
	top:228px;
	left:539px;
}
#shotnote #content .main-visual-02 ul #txt-07{
	top:330px;
	left:541px;
}
#shotnote #content .main-visual-02 #txt-08{position:absolute;top:332px;}
#shotnote #content .main-visual-02 #txt-09{position:absolute;top:380px;}


/*==================================================
	List
==================================================*/
/* 	btn-list-01
--------------------------------------------------*/
#shotnote #content .btn-list-01{
margin-bottom:20px;
margin-left:auto;
margin-right:auto;
}
#shotnote #content .btn-list-01{
/*padding-left:90px;
*/}
#shotnote #content .btn-list-01 li{
/*	float:left;
*/
}
#shotnote #content .btn-list-01 li.last{
padding-right:0;
}

/*==================================================
	section
==================================================*/
/* 	section-01~03
--------------------------------------------------*/
#shotnote #content .section-01{
margin-bottom:40px;
padding:32px;
border: 1px solid #ddd;
border-top: none;
/*background:url("../../../../images/shotnote/bg-section-01.gif") no-repeat 0 100%;*/
}

#shotnote #content .section-01 .col-01,
#shotnote #content .section-03 .col-01{
}

#shotnote #content .section-01 .col-01 p {
	padding: 0;
}

#shotnote #content .section-01 .col-01 .block,
#shotnote #content .section-03 .col-01 .block{
float:right;
width:420px;
}

#shotnote #content .section-01 .col-01 .block:first-child,
#shotnote #content .section-03 .col-01 .block:first-child{
float:left;
}

#shotnote #content .section-02{
/*margin-bottom:40px;
padding-bottom:20px;
background:url("../../../../images/shotnote/bg-section-02.gif") no-repeat 0 100%;*/
}

#shotnote #content .section-02 .block{
float:right !important;
width:470px !important;
margin-top:5px;
border:1px solid #ddd;
border-top: none;
text-align:center;
overflow:visible;
}

#shotnote #content .section-02 .block h2 {
position:relative;
top: -5px;
}

#shotnote #content .section-02 .block:first-child{
float:left !important;
}

#shotnote #content .section-03{
margin-bottom:40px;
padding:32px;
}

#shotnote #content .section-03 .col-01 .block{
text-align:center;
}

/* 	flow
--------------------------------------------------*/
#shotnote #content .flow{
overflow:hidden;
margin-bottom:8px;
}

#shotnote #content .flow li{
float:left;
}

#shotnote #content .flow li p {
	padding: 0;
}

/* 	lineup
--------------------------------------------------*/
#shotnote #content #lineup {
	padding: 48px 0 0 0;
}

#shotnote-lineup p {
	text-align: center;
	display: block;
}

#shotnote #content .lineup{
	position:relative;
	margin-bottom:12px;
	border: 1px solid #ddd;
	border-top: none;
	/*background-image: url(../../../../images/shotnote/bg-lineup-01.gif);*/
	background-repeat: no-repeat;
	background-position: 0 bottom;
	text-align: center;
}

#shotnote #content .lineup h3,
#shotnote #content .lineup p{
position:absolute;
}

#shotnote #content .lineup .img-21{
top:21px;
left:419px;
}
#shotnote #content .lineup .btn-06{
top:66px;
left:35px;
}
#shotnote #content .lineup .btn-07{
top:66px;
left:419px;
}
#shotnote #content .lineup .btn-08{
top:324px;
left:35px;
}
#shotnote #content .lineup .btn-09{
	top:64px;
	left:36px;
}
#shotnote #content .lineup .img-16{
top:111px;
left:67px;
}
#shotnote #content .lineup .img-17{
top:111px;
left:427px;
}
#shotnote #content .lineup .img-18{
top:370px;
left:67px;
}
#shotnote #content .lineup .img-19{
	/*top:110px;
	left:97px;*/
	position: relative;
}

/*
#shotnote #content .lineup h3{
position:relative;
padding-left:36px;
z-index:2;
}

#shotnote #content .lineup .note{
position:relative;
overflow:hidden;
margin-bottom:37px;
padding-left:35px;
z-index:3;
}

#shotnote #content .lineup .note li{
float:left;
}

#shotnote #content .lineup .cover-01{
margin:-80px 0 47px;
padding-left:35px;
}

#shotnote #content .lineup .cover-02{
overflow:hidden;
margin-top:-21px;
padding-left:153px;
}

#shotnote #content .lineup .cover-02 li{
float:left;
padding-left:33px;
}
*/

/* 	notice
--------------------------------------------------*/
#shotnote #content .notice{
margin-bottom:10px;
font-size:86%;
color:#666;
}

#shotnote #content .notice li{
position:relative;
padding-left:1.6em;
font-size:86%;
color:#666;
zoom:1;
}

#shotnote #content .notice li span{
position:absolute;
top:0;
left:0;
}

#shotnote #content .main-visual-01 .notice li {
color:#FF0000;
font-weight:bold;
} 

/* 	col
--------------------------------------------------*/
#shotnote #content .col-01{
overflow:hidden;
}

#shotnote #content .col-01 .block{
float:left;
width:390px;
}

#shotnote #content .col-02{
overflow:hidden;
}

#shotnote #content .col-02 .block{
float:left;
}

/* 	share-btn
--------------------------------------------------*/
#shotnote #content .share-btn-01{
margin-bottom:10px;
}
#shotnote #content .share-btn-01:after{ display:block;clear:both;content:''; }

#shotnote #content .share-btn-01 li{
padding-right:10px;
float:left;
}

/* 	link
--------------------------------------------------*/
#shotnote #content .link{
margin-bottom:20px;
text-align:right;
}

#shotnote #content .link a{
display:inline-block;
padding-left:20px;
background:url("../../images/shotnote/icon-01.gif") no-repeat 0 0.3em;
}


/*==================================================
	#footer
==================================================*/
#footer{
position:relative;
margin:0 auto;
width:840px;
height:51px;
background:url("../../images/shotnote/bg-footer-01.gif") repeat-x 0 0;
}

#footer p{
position:absolute;
top:15px;
left:300px;
}

.footer_text{
margin-left:auto;
margin-right:auto;
width:800px;
}


/*==================================================
	Ajust
==================================================*/
.pr05{padding-right:5px !important;}
.mb00{margin-bottom:0 !important;}
.mb05{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.mb35{margin-bottom:35px !important;}
.mb40{margin-bottom:40px !important;}


/*==================================================
	iPhone
==================================================*/
.text-iphone{
display:none;
}

@media only screen and (max-device-width:480px){
.text-iphone{
display:block;
}
}


/*==================================================
	Clear
==================================================*/
#shotnote #content .btn-list-01{
zoom:1;
}
#shotnote #content .btn-list-01:after{
display:block;
clear:both;
height:0;
visibility:hidden;
content:".";
font-size:0;
}


#shotnote #content #shotnote-movie embed {
	display: block;
	margin: auto;
}

/*==================================================
	compatible
==================================================*/

#shotnote.compatible {
	padding-top: 0px;
	background-color: #FFF;
	margin-top: -1px;
	padding-top: 0 !important;
}

#shotnote.compatible #contents {
	padding: 0;
    width: 960px;
}

#main h1, #main h2, #main h3, #main h4, #main h5, #main h6, #main p, #main ul, #main ol, #main dl, #main table {
	margin-bottom: 10px;
}

#contents ul.lst-bullet-01 li, #contents ul.lst-bullet-02 li, #contents ul.lst-bullet-2col-01 li, #contents ul.lst-bullet-2col-02 li, #contents ul.lst-bullet-3col-01 li, #contents ul.lst-bullet-3col-02 li, #contents ul.lst-bullet-hr-01 li, #contents ul.lst-bullet-hr-02 li, #contents ul.lst-number-02 li ul.lst-bullet-01 li {
	padding-left: 18px;
}

#main .hdg-l1-01-0{
line-height:1.25;
margin-bottom:28px;
border:2px solid #c2c3c4;
padding:2px;
background:#fff;
font-size: 14px;
}

#main .hdg-l1-01-0 span{
display:block;
border:3px solid #e9eef2;
padding:5px 0 4px 15px;
*background-position:2px 0;
font-size:150%;
background: #e9eef2;
font-family:simsun;
}


/*  hdg-l2-**
-------------------------------------------------------------- */
#main .hdg-l2-01{
line-height:1.25;
margin-top:28px;
margin-bottom:18px;
border:2px solid #e9eef2;
padding:1px;
background:#fff;
}

#main .hdg-l2-01 span{
display:block;
padding:5px;
background:#e9eef2;
}

#main .hdg-l2-01 span span{
border-left:3px solid #167dcb;
padding:0 0 0 7px;
font-size:135%;
}

#main .hdg-l2-01.e2 span span{
border-color:#51ae00;
}

#main .hdg-l2-01 sup{
display:inline-block;
margin-top:-.2em;
*margin-bottom:.4em;
}


/*  tbl-data-**
-------------------------------------------------------------- */

table {
	border-spacing: 0;
}

#contents .tbl-data-01,
#contents .tbl-data-02{
width:100%;
}

#contents .tbl-data-01{
border-top:1px solid #b7c5d0;
border-left:1px solid #b7c5d0;
}

#contents .tbl-data-01 th,
#contents .tbl-data-01 td{
border-right:1px solid #b7c5d0;
border-bottom:1px solid #b7c5d0;
padding:10px 15px;
}
#contents .tbl-data-01 th{
background:#e9eef2;
}

#contents .tbl-data-01.slim th,
#contents .tbl-data-01.slim td{
padding:4px 8px;
}

#contents .tbl-data-01 em{
color:#167dcb;
}

#contents .tbl-data-01 thead th{
font-weight:bold;
text-align:center;
}

#contents .tbl-data-01.stripe tbody th{
background:none;
font-weight:bold;
}

#contents .tbl-data-01.stripe tbody tr:nth-child(even) th,
#contents .tbl-data-01.stripe tbody tr:nth-child(even) td{
background:#f2f3f3;
}

#contents .tbl-data-01.small th.em,
#contents .tbl-data-01.small td.em{
font-size:110%;
}

#contents .tbl-data-02{
border-top:1px solid #d2d2d2;
border-left:1px solid #d2d2d2;
}

#contents .tbl-data-02 th,
#contents .tbl-data-02 td{
border-right:1px solid #d2d2d2;
border-bottom:1px solid #d2d2d2;
padding:7px 10px;
vertical-align:middle;
}

#contents .tbl-data-02 thead th{
background:#167dcb;
color:#fff;
font-weight:bold;
text-align:center;
}




/* ////////////////////////////////////////////////////////////////////////////////
///
/// under 1023
///
//////////////////////////////////////////////////////////////////////////////// */

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

#shotnote img {
	height: auto !important;
}

#shotnote #content .main-visual-01 .img-00 {
	width: 500px;
}

#shotnote #content .main-visual-01 .img-00 img {
	height: auto;
}

#shotnote #content .flow li {
	width: 33.33%;
}

#shotnote #content .main-visual-02 {
	width: 100%;
	margin: 0;
	height: 420px;
}

#shotnote #content .main-visual-02 ul li img {
	height: auto;
}

#shotnote #content .section-01 {
	padding: 15px;
}

#shotnote #content .section-01 .col-01 .block,
#shotnote #content .section-03 .col-01 .block,
#shotnote #content .section-02 .block,
#shotnote #content .section-02 .block {
	width: 50% !important;
	box-sizing: border-box;
}


}


/* ////////////////////////////////////////////////////////////////////////////////
///
/// under 767
///
//////////////////////////////////////////////////////////////////////////////// */

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

#shotnote {
	padding-top: 100px !important;
}

#shotnote #content .main-visual-01 {
	background: none;
    padding-bottom: 70%;
    background-size: 70%;
    margin-bottom: 30px;
}

#shotnote #content .main-visual-01 .sp {
    display: block;
    position: absolute;
    bottom: 40px;
    right: 20px;
    width: 80%;
}

#shotnote #content .main-visual-01 .img-00 {
	max-width: 500px;
	width: 100%;
}


#shotnote #content .flow li {
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
}

#shotnote #content .section-01 .col-01 .block,
#shotnote #content .section-03 .col-01 .block,
#shotnote #content .section-02 .block,
#shotnote #content .section-02 .block {
	width: 100% !important;
}

#shotnote #content .main-visual-02 {
	display: none;
}

#shotnote #content .main-visual-01 .img-14{
	top: auto;
	bottom: 0px;
	left: 20px;
}

#shotnote #content .main-visual-01 .img-15{
    top: auto;
    bottom: 30px;
    left: 0px;
}

#shotnote #content .main-visual-01 .img-15-1{
	top: 470px;
	left: 0;
}

#shotnote #content .main-visual-01 .img-16{
	top: auto;
	bottom: 0px;
	left: 0px;
}

#shotnote #content .main-visual-01 .buynow{
	top: auto;
	bottom: 0px;
	left: 20px;
}
	
#shotnote #content .main-visual-01 .btn-13{
	
}



}

/* ////////////////////////////////////////////////////////////////////////////////
///
/// under 480
///
//////////////////////////////////////////////////////////////////////////////// */

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

#shotnote #content .main-visual-01 .btn-01 {
	width: 160px;
}

#shotnote #content .main-visual-01 .btn-02 {
	left: 170px;
	width: 100px;
}

#shotnote #content .main-visual-01 .img-15-1 {
	bottom: 0px;
	left: 0px;
}



}