/* reset style
----------------------------------------------------------- */

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
body {
	line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
	display:block;
}

h1,h2,h3,h4,h5,h6,p {
	font-weight:normal;
	font-size: 100%;
	text-align:left;
}

ol,ul,li,nav ul {
	list-style:none;
}

ul,li,img{
	margin:0;
	padding:0;
	list-style:none;
	vertical-align:bottom;
	line-height:1.6;
	text-align:left;
}

caption,th {
	text-align:left;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	text-decoration:none;
	outline:0;
	line-height:1.6;
/* Hides from IE-mac \*/
	overflow:hidden;
/* End hide from IE-mac */
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}

img,td,th {
	border:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

td,th{
	text-align: left;
	vertical-align: top;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
	vertical-align:middle;
}
button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}

/* CLEAR FIX*/
.clearfix:after,
p.text:after{
	content: ".";  
	display: block;  
	visibility: hidden;  
	height: 0.1px;  
	font-size: 0.1em;  
	line-height: 0;  
	clear: both;  
}
.clearfix,
p.text{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
* html p.text { height: 1%;}
.clearfix,
p.text{display: block;}
/* End hide from IE-mac */



/* style
----------------------------------------------------------------------------------*/
img{max-width:100%;height:auto;}
a img{
	-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-ms-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}
@media only print, only screen and (min-width: 769px){
    a:hover img{
        opacity:0.50;
        filter: alpha(opacity=50);
    }
}

/* margin */
.mg0  {margin: 0px!important;}
.mg5  {margin: 5px!important;}
.mg10 {margin:10px!important;}
.mg15 {margin:15px!important;}
.mg20 {margin:20px!important;}
.mg25 {margin:25px!important;}
.mg30 {margin:30px!important;}
.mg40 {margin:40px!important;}
.mg50 {margin:50px!important;}
.mg60 {margin:60px!important;}
.mg70 {margin:70px!important;}
.mg80 {margin:80px!important;}
.mg90 {margin:90px!important;}
.mg100{margin:100px!important;}

.mt0  {margin-top:0px!important;}
.mt5  {margin-top:5px!important;}
.mt10 {margin-top:10px!important;}
.mt15 {margin-top:15px!important;}
.mt20 {margin-top:20px!important;}
.mt25 {margin-top:25px!important;}
.mt30 {margin-top:30px!important;}
.mt40 {margin-top:40px!important;}
.mt50 {margin-top:50px!important;}
.mt60 {margin-top:60px!important;}
.mt70 {margin-top:70px!important;}
.mt80 {margin-top:80px!important;}
.mt90 {margin-top:90px!important;}
.mt100{margin-top:100px!important;}

.mb0  {margin-bottom:0px!important;}
.mb5  {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;}
.mb40 {margin-bottom:40px!important;}
.mb50 {margin-bottom:50px!important;}
.mb60 {margin-bottom:60px!important;}
.mb70 {margin-bottom:70px!important;}
.mb80 {margin-bottom:80px!important;}
.mb90 {margin-bottom:90px!important;}
.mb100{margin-bottom:100px!important;}

.mr0  {margin-right:0px!important;}
.mr5  {margin-right:5px!important;}
.mr10 {margin-right:10px!important;}
.mr15 {margin-right:15px!important;}
.mr20 {margin-right:20px!important;}
.mr25 {margin-right:25px!important;}
.mr30 {margin-right:30px!important;}
.mr40 {margin-right:40px!important;}
.mr50 {margin-right:50px!important;}

.ml0  {margin-left:0px!important;}
.ml5  {margin-left:5px!important;}
.ml10 {margin-left:10px!important;}
.ml15 {margin-left:15px!important;}
.ml20 {margin-left:20px!important;}
.ml25 {margin-left:25px!important;}
.ml30 {margin-left:30px!important;}
.ml40 {margin-left:40px!important;}
.ml50 {margin-left:50px!important;}

/* padding */
.pd0  {padding: 0px!important;}
.pd5  {padding: 5px!important;}
.pd10 {padding:10px!important;}
.pd15 {padding:15px!important;}
.pd20 {padding:20px!important;}
.pd25 {padding:25px!important;}
.pd30 {padding:30px!important;}
.pd40 {padding:40px!important;}
.pd50 {padding:50px!important;}

.pt0  {padding-top:0px!important;}
.pt5  {padding-top:5px!important;}
.pt10 {padding-top:10px!important;}
.pt15 {padding-top:15px!important;}
.pt20 {padding-top:20px!important;}
.pt25 {padding-top:25px!important;}
.pt30 {padding-top:30px!important;}
.pt40 {padding-top:40px!important;}
.pt50 {padding-top:50px!important;}

.pb0  {padding-bottom:0px!important;}
.pb5  {padding-bottom:5px!important;}
.pb10 {padding-bottom:10px!important;}
.pb15 {padding-bottom:15px!important;}
.pb20 {padding-bottom:20px!important;}
.pb25 {padding-bottom:25px!important;}
.pb30 {padding-bottom:30px!important;}
.pb40 {padding-bottom:40px!important;}
.pb50 {padding-bottom:50px!important;}

.pr0  {padding-right:0px!important;}
.pr5  {padding-right:5px!important;}
.pr10 {padding-right:10px!important;}
.pr15 {padding-right:15px!important;}
.pr20 {padding-right:20px!important;}
.pr25 {padding-right:25px!important;}
.pr30 {padding-right:30px!important;}
.pr40 {padding-right:40px!important;}
.pr50 {padding-right:50px!important;}

.pl0  {padding-left:0px!important;}
.pl5  {padding-left:5px!important;}
.pl10 {padding-left:10px!important;}
.pl15 {padding-left:15px!important;}
.pl20 {padding-left:20px!important;}
.pl25 {padding-left:25px!important;}
.pl30 {padding-left:30px!important;}
.pl40 {padding-left:40px!important;}
.pl50 {padding-left:50px!important;}

.fs10{font-size:10px!important;}
.fs12{font-size:12px!important;}
.fs14{font-size:14px!important;}
.fs16{font-size:16px!important;}
.fs18{font-size:18px!important;}
.fs20{font-size:20px!important;}
.fs22{font-size:22px!important;}
.fs24{font-size:24px!important;}
.fs26{font-size:25px!important;}
.fs28{font-size:28px!important;}
.fs30{font-size:30px!important;}
.fs36{font-size:36px!important;}
.fs48{font-size:48px!important;}

.fb{font-weight: bold!important;}

.red{color: #ff0000!important;}
.glay{color: #646464!important;}

.tL,
.taL{text-align:left!important;}
.tR,
.taR{text-align:right!important;}
.tC,
.taC{text-align:center!important;}

.clear{clear:both!important;}
.wrap{overflow:hidden;zoom:1;}
.bdn{border: none!important;}
.db{display: block;}
.dib{letter-spacing: -0.5em;}
.dib li{display: inline-block;letter-spacing: normal;vertical-align: top;}

/* form */
select,
textarea,
input[type="text"],
input[type="tel"],
input[type="email"]{
    padding:5px;
	color:#646464;
    border:1px solid #c3c3c3;
	background: #fff;
}
input[type="radio"],
input[type="checkbox"]{
    position:relative; 
    top:-2px;
}

.fR,
.floR{float:right!important;}
.fL,
.floL{float:left!important;}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.alignleft {
    float: left;
    margin: 0.5em 1em 0.5em 0;
}
.alignright {
    float: right;
    margin: 0.5em 0 0.5em 1em;
}
@media only screen and (max-width: 768px){
    .pc{display:none!important;}
    .tLsp{text-align:left!important;}
    .tRsp{text-align:right!important;}
    .tCsp{text-align:center!important;}
    .fRsp,
    .fLsp{float:none!important;margin: 0 0 10px!important;text-align: center;}
    .alignright,
    .alignleft{display: block;float:none!important;margin: 0 auto 10px!important;text-align: center;}
}
@media only print, only screen and (min-width: 769px){
    .sp{display:none!important;}
}
/* column */
.col2{
	margin: 0 -10px;
	overflow: hidden;
}
.col2 li{
	width: 50%;
	margin: 0 0 20px;
	padding: 0 10px;
	vertical-align: top;
}
.col3{
	margin: 0 -15px;
	overflow: hidden;
}
.col3 li{
	width: 33.333%;
	margin: 0 0 30px;
	padding: 0 15px;
	vertical-align: top;
}
.col4,
.col5{
	margin: 0 -10px;
	overflow: hidden;
}
.col4 li{
	width: 25%;
	margin: 0 0 20px;
	padding: 0 10px;
	vertical-align: top;
}
.col5 li{
	width: 20%;
	margin: 0 0 20px;
	padding: 0 10px;
	vertical-align: top;
}
@media only screen and (max-width: 640px){
    .col2{
        margin: 0;
    }
    .col2 li{
        width: 100%;
        margin: 0 0 20px;
        padding: 0;
    }
    .col3,
    .col4,
    .col5{
        margin: 0 -5px;
    }
    .col3 li,
    .col4 li,
    .col5 li{
        width: 50%;
        margin: 0 0 10px;
        padding: 0 5px;
    }
}

/* table */
@media only screen and (max-width: 640px){
    .table01 th,
    .table01 td{
        float: left;
        width: 100%;
    }
    .table02 {
        display: block;
        position: relative;
    }
    .table02 thead {
        display: block;
        float: left;
    }
    .table02 tbody {
        display: block;
        position: relative;
        width: auto;
        overflow-x: auto;
        white-space: nowrap;
    }
    .table02 thead th {
        display: block;
    }
    .table02 tbody td {
        display: block;
    }
    .table02 tbody tr {
        display: inline-block;
        width: 100%;
    }
    .table02 th:not(:last-child) {
        border-bottom: none;
    }
    .table02 td:not(:last-child) {
        border-bottom: none;
    }
    .table02 td {
        border-left: none;
    }
}
