@charset "utf-8";

/* ------------------------
 global common
------------------------- */

.clear{clear:both; height:1;}
.cleardiv{clear:both; width:1px; height:1px;}

.ptop{padding-top:20px; text-align:right}
.bold{font-weight:bold;}
.newmark{color:#cc0000;}
 

/* block */
.pdg0{padding:0;}
.pdg03{padding:0.3em;}
.pdg05{padding:0.5em;}
.pdg0{padding:0;}
.pdg1{padding:1em;}
.pdg2{padding:2em;}
.pdg3{padding:3em;}
.pdg4{padding:4em;}
.pdg5{padding:5em;}

.mgn0{margin:0;}
.mgn03{margin:0.3em;}
.mgn05{margin:0.5em;}
.mgn1{margin:1em;}
.mgn2{margin:2em;}
.mgn3{margin:3em;}
.mgn4{margin:4em;}
.mgn5{margin:5em;}

.mgn-t0{margin-top:0;}
.mgn-t05{margin-top:0.5em;}
.mgn-t1{margin-top:1em;}
.mgn-t2{margin-top:2em;}
.mgn-t3{margin-top:3em;}
.mgn-t4{margin-top:4em;}
.mgn-t5{margin-top:5em;}

.mgn-b0{margin-bottom:0;}
.mgn-b05{margin-bottom:0.5em;}
.mgn-b1{margin-bottom:1em;}
.mgn-b2{margin-bottom:2em;}
.mgn-b3{margin-bottom:3em;}
.mgn-b4{margin-bottom:4em;}
.mgn-b5{margin-bottom:5em;}

.mgn-l0{margin-left:0;}
.mgn-l05{margin-left:0.5em;}
.mgn-l1{margin-left:1em;}
.mgn-l2{margin-left:2em;}
.mgn-l3{margin-left:3em;}
.mgn-l4{margin-left:4em;}
.mgn-l5{margin-left:5em;}

.mgn-r0{margin-right:0;}
.mgn-r05{margin-right:0.5em;}
.mgn-r1{margin-right:1em;}
.mgn-r2{margin-right:2em;}
.mgn-r3{margin-right:3em;}
.mgn-r4{margin-right:4em;}
.mgn-r5{margin-right:5em;}

.pdg-t0{padding-top:0;}
.pdg-t05{padding-top:0.5em;}
.pdg-t1{padding-top:1em;}
.pdg-t2{padding-top:2em;}
.pdg-t3{padding-top:3em;}
.pdg-t4{padding-top:4em;}
.pdg-t5{padding-top:5em;}

.pdg-b0{padding-bottom:0;}
.pdg-b05{padding-bottom:0.5em;}
.pdg-b1{padding-bottom:1em;}
.pdg-b2{padding-bottom:2em;}
.pdg-b3{padding-bottom:3em;}
.pdg-b4{padding-bottom:4em;}
.pdg-b5{padding-bottom:5em;}

.pdg-l0{padding-left:0;}
.pdg-l05{padding-left:0.5em;}
.pdg-l1{padding-left:1em;}
.pdg-l2{padding-left:2em;}
.pdg-l3{padding-left:3em;}
.pdg-l4{padding-left:4em;}
.pdg-l5{padding-left:5em;}

.pdg-r0{padding-right:0;}
.pdg-r05{padding-right:0.5em;}
.pdg-r1{padding-right:1em;}
.pdg-r2{padding-right:2em;}
.pdg-r3{padding-right:3em;}
.pdg-r4{padding-right:4em;}
.pdg-r5{padding-right:5em;}

.pdg-v05{padding-top:0.5em; padding-bottom:0.5em;}
.pdg-v1{padding-top:1em; padding-bottom:1em;}
.pdg-v2{padding-top:2em; padding-bottom:2em;}
.pdg-v3{padding-top:3em; padding-bottom:3em;}

.pdg-h05{padding-left:0.5em; padding-right:0.5em;}
.pdg-h1{padding-left:1em; padding-right:1em;}
.pdg-h2{padding-left:2em; padding-right:2em;}
.pdg-h3{padding-left:3em; padding-right:3em;}

.bg-ccc{background-color:#ccc;}
.bg-eee{background-color:#eee;}
.bg-000{background-color:#000;}
.bg-fff{background-color:#fff;}
.bg-yellow{background-color:#FCD406;}


/* radius */
.kadomaru50p{
    -webkit-border-radius: 50%;  /* Safari,Google Chrome */  
    -moz-border-radius: 50%;   /* Firefox */
	border-radius: 50%;        /* CSS3 draft */  
}

.kadomaru30{
    -webkit-border-radius: 30px;  /* Safari,Google Chrome */  
    -moz-border-radius: 30px;   /* Firefox */
	border-radius: 30px;        /* CSS3 draft */  
}

.kadomaru20{
    -webkit-border-radius: 20px;  /* Safari,Google Chrome */  
    -moz-border-radius: 20px;   /* Firefox */
	border-radius: 20px;        /* CSS3 draft */  
}

.kadomaru10{
	border-radius: 10px;        /* CSS3 draft */  
    -webkit-border-radius: 10px;  /* Safari,Google Chrome */  
    -moz-border-radius: 10px;   /* Firefox */
}

.kadomaru10-t{
	border-radius: 10px 10px 0 0 / 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
}

.kadomaru10-b{
	border-radius: 0 0 10px 10px / 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px / 0 0 10px 10px;
	-moz-border-radius: 0 0 10px 10px / 0 0 10px 10px;
}
.kadomaru5{
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.kadomaru5-t{
	border-radius: 5px 5px 0 0 / 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0 / 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0 / 5px 5px 0 0;
}

.kadomaru5-b{
	border-radius: 0 0 5px 5px / 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px / 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px / 0 0 5px 5px;
}


/* border */
.bd-c{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	border:1px solid #ccc;
 	box-sizing:border-box;
}
 
 .bd-0{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	border:1px solid #000;
 	box-sizing:border-box;
 }


 /* text */
.a-l{text-align:left;}
.a-c{text-align:center;}
.a-r{text-align:right;}

.f-l{float:left;}
.f-r{float:right;}

.c-blue{color:blue;}
.c-lblue{color:#00A3D9;}
.c-red{color:red;}
.c-pink{color:#FF00FF;}
.c-orange{color:#FF6600;}
.c-yellow{color:rgba(255,248,84,1.00);}
.c-purple{color:#990099;}
.c-green{color:#29800B;}
.c-salmon{color:#F34177;}
.c-brown{color:#663300;}
.c-white{color:#FFFFFF;}
.c-fff{color:#FFFFFF;}
.c-yellow{color:#FFD24D;}
.c-666{color:#666666;}
.c-000{color:#000000;}

.uline{text-decoration:underline;}



@media screen and (max-width: 480px){
	.l1{font-size:100%}
	.l2{font-size:105%}
	.l3{font-size:110%}
	.l4{font-size:115%}
	.l5{font-size:120%}
	.l6{font-size:125%}
	.l7{font-size:130%}
	.l8{font-size:135%}
	.l9{font-size:140%}
	.l10{font-size:150%}
	.l11{font-size:160%}
	.l12{font-size:170%}

	.s1{font-size:90%}
	.s2{font-size:75%}
	.s3{font-size:65%}
	.s4{font-size:50%}
	.s5{font-size:40%}
}

@media screen and (min-width: 481px) and (max-width : 767px){
	.l1{font-size:100%}
	.l2{font-size:105%}
	.l3{font-size:110%}
	.l4{font-size:115%}
	.l5{font-size:120%}
	.l6{font-size:125%}
	.l7{font-size:130%}
	.l8{font-size:135%}
	.l9{font-size:140%}
	.l10{font-size:155%}
	.l11{font-size:170%}
	.l12{font-size:200%}

	.s1{font-size:90%}
	.s2{font-size:80%}
	.s3{font-size:70%}
	.s4{font-size:60%}
	.s5{font-size:50%}
}


@media screen and (min-width: 768px){
	.l1{font-size:110%}
	.l2{font-size:125%}
	.l3{font-size:135%}
	.l4{font-size:145%}
	.l5{font-size:160%}
	.l6{font-size:180%}
	.l7{font-size:200%}
	.l8{font-size:250%}
	.l9{font-size:300%}
	.l10{font-size:350%}
	.l11{font-size:400%}
	.l12{font-size:450%}

	.s1{font-size:90%}
	.s2{font-size:85%}
	.s3{font-size:80%}
	.s4{font-size:75%}
	.s5{font-size:70%}
	}
	

/* flexbox */

.flexbox{
	-js-display: flex; /* flexibility.js */
	display: -webkit-box; /* android用 */
	display: -ms-flexbox; /* IE用 */
	display: -webkit-flex; /* Safari用 */
	display: flex;
}

.flexbox-align-items-s{
	-webkit-box-align:start;/*--- Androidブラウザ用 ---*/
	-ms-flex-align:start;/*--- IE10 ---*/
	-webkit-align-items:flex-start;/*--- safari（PC）用 ---*/
	align-items:flex-start;
}

.flexbox-align-items-c{
	-webkit-align-items: center; /* Safari用 */
	-ms-align-items: center; /* IE用 */
	-webkit-align-items:center; /*--- safari（PC）用 ---*/
	align-items: center;
}
  
.flexbox-align-items-e{
	-webkit-box-align:baseline;/*--- Androidブラウザ用 ---*/
	-ms-flex-align:baseline;/*--- IE10 ---*/
	-webkit-align-items:flex-end;/*--- safari（PC）用 ---*/
	align-items:flex-end;
}

.flexbox-align-items-str{
	-webkit-box-align:strech;/*--- Androidブラウザ用 ---*/
	-ms-flex-align:stretch;/*--- IE10 ---*/
	-webkit-align-items:stretch;/*--- safari（PC）用 ---*/
	align-items:stretch;
}

.flexbox-wrap{
    -ms-flex-wrap:wrap;/*--- IE10用 ---*/
    -webkit-flex-wrap:wrap;/*--- safari（PC）用 ---*/
    flex-wrap:wrap;
}