@charset "utf-8";

/*-----------------
▼grid
-----------------*/


// Create a canvas with double-resolution.
html2canvas(element, {
    scale: 2,
    onrendered: myRenderFunction
});
// Create a canvas with 144 dpi (1.5x resolution).
html2canvas(element, {
    dpi: 144,
    onrendered: myRenderFunction
});




/*-----------------
▼grid
-----------------*/
.grid5				{width:100%;overflow:hidden;margin-bottom:5px;}
.grid6				{width:100%;overflow:hidden;margin-bottom:5px;box-shadow: 0 10px 6px -6px #bbbbbb;}

.grid1, .grid2, .grid3		{width:100%;overflow:hidden;margin-bottom:10px;border-radius:0px;background:#ffffff;}

.grid1 section p, .grid2 section p, .grid3 section p		{text-align:left;}

* html .grid, * html .grid1,* html .grid2, * html .grid3, * html .grid5	{height:1%;}
.grid1 img, .grid2 img,	.grid3 img, .grid5 img				{height:auto;}
.grid1 article, .grid2 article, .grid3 article	{height:1%;padding-bottom:10px;overflow:hidden;}
.grid1 section, .grid2 section, .grid3 section, .grid5 section	{padding:0px;margin:0px;word-wrap: break-word;}

/*-- ▼1column --*/
.grid1 .left			{width:35%; float:left;padding-bottom:5px;padding-right:1%;}
.grid1 .center			{width:100%;float:none;padding-bottom:5px;}
.grid1 .right			{width:35%; float:right;padding-bottom:5px;padding-left:1%;}

/*-- ▼2column --*/
.grid2 section			{width:49%;float:left;}
.grid2 section:last-child	{width:49%;float:right;}

.grid2 .left			{width:48%;float:left;padding-bottom:5px;padding-right:2%;}
.grid2 .center			{width:100%;float:none;padding-bottom:5px;}
.grid2 .right			{width:48%;float:right;padding-bottom:5px;padding-left:2%;}

/*-- ▼3column --*/
.grid3 section			{width:32%;float:left;margin:0px 1% 0px 1%;}
.grid3 section:first-of-type 	{width:32%;float:left;margin:0px 1% 0px 0px;}
.grid3 section:last-of-type 	{width:32%;float:right;margin:0px 0px 0px 1%;}

.grid3 .left			{width:50%;float:left;padding:0px 10px 0px 0px;}
.grid3 .center			{width:100%;float:none;padding:0px 0px 10px 0px;}
.grid3 .right			{width:50%;float:right;padding:0px 0px 0px 10px;}

/*-- ▼5column --*/
.grid5 .left			{width:50%;float:left;padding:0px 10px 0px 0px;}
.grid5 .center			{width:100%;float:none;padding:0px 0px 10px 0px;}
.grid5 .right			{width:50%;float:right;padding:0px 0px 0px 10px;}

/*-----------------
▼main contents
-----------------*/
section{margin-top:10px;}

section.grid,
section.content-l,
section.content-r {border-radius:6px;background:#fff;overflow:hidden;}

section.grid p,
section.content-l p,
section.content-r p {padding:10px;}

section.grid img,
section.content-l img {float:left;width:50%;height:auto;margin:0 10px 0 0;}
section.content-r img {float:right;width:50%;height:auto;margin:0 0 0 10px;}

* html section.grid,
* html section.content-l,
* html section.content-r {height:1%;}


/*-----------------
▼960px above
-----------------*/
@media only screen and (min-width:960px){
html 				{font-size:100%;}
}

/*-----------------
▼940px below
-----------------*/
@media only screen and (max-width:960px){

html 				{font-size:87.5%;}

/*-- ▼2column --*/
.grid2 .left,
.grid2 .center,
.grid2 .right			{width:100%;float:none;padding:0px 0px 10px 0px;}

/*-- ▼3column --*/
.grid3 .left,
.grid3 .center,
.grid3 .right		 	{width:100%;float:none;padding:0px 0px 10px 0px;}

/*-- ▼etc --*/
.btns50		{width:60%;}

}

/*-----------------
▼768px below
-----------------*/
@media only screen and (max-width:768px){
html 				{font-size:87.5%;}

/*-- ▼etc --*/
.btns50		{width:70%;}

}

/*-----------------
▼640px below
-----------------*/
@media only screen and (max-width:640px){

html 				{font-size:75%;}

/*-- ▼3column --*/
.grid3 section			{width:100%;float:left;margin:10px 0px 10px 0px;padding-bottom:10px;border-bottom:1px solid #cccccc;}
.grid3 section:first-of-type	{width:100%;float:left;margin:10px 0px 10px 0px;border-bottom:1px solid #cccccc;}
.grid3 section:last-of-type	{width:100%;float:left;margin:10px 0px 0px 0px;border-bottom:0px;}
.grid3 .left,.grid3
.center,.grid3 .right		{width:45%;float:left;padding:0px 10px 10px 0px;}

/*-- ▼etc --*/
.btns50		{width:80%;}

}

/*-----------------
▼480px below
-----------------*/
@media only screen and (max-width:480px){

/*-- ▼1column --*/
.grid1 .left,
.grid1 .center,
.grid1 .right			{width:100%;float:none;padding:0px 0px 10px 0px;}

section .swiper-container,
section.content-l img,
section.content-r img {float:none;max-width:470px;width:100%;height:auto;margin:0 5px 0 0;}

/*-- ▼2column --*/
.grid2 section			{width:100%;float:left;margin:10px 0px 10px 0px;padding-bottom:10px;border-bottom:1px solid #cccccc;}
.grid2 section:first-of-type	{width:100%;float:left;margin:10px 0px 10px 0px;border-bottom:1px solid #cccccc;}
.grid2 section:last-of-type	{width:100%;float:left;margin:10px 0px 0px 0px;border-bottom:0px;}

/*-- ▼etc --*/
.btns50		{width:90%;}

}