@charset "utf-8";

/* CSS初期化のスタイルを記載 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, section, article, aside, hgroup, header, footer, nav, dialog, figure, menu, video, audio, mark, time, canvas, details {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	background: transparent;
	font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}

a{color:#444;}
section, article, aside, hgroup, header, footer, nav, dialog, figure, figcaption {
	display: block;
}
body {
	line-height: 1;
	font-family: 'Noto Sans Japanese';
	color:#000;
}
img {
	vertical-align: bottom;
}
ul, li, dl, dt, dd, form {
	margin: 0px;
	padding: 0px;
	border: 0px;
	list-style: none;
	etter-spacing: normal;
    /* For IE 6/7 */
    *display: inline;
    *zoom: 1;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
ins { /* remember to highlight inserts somehow! */
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table { /* markup tables with 'cellspacing="0"' */
	border-collapse: collapse;
	border-spacing: 0;
}

/*Clearfix*/
.clr {
	/zoom : 1;
	}
.clr:after {
	content : ' ';
	display : block;
	clear : both;
	height:0;
	}
.clearboth{
	clear: both !important;
	}
@media screen and (max-width: 640px) {
.spclear {
	clear: both;
}
}


.alc{text-align:center;}
.all{text-align:left;}
.alr{ text-align:right;}
.floatL{
	float: left;	
}
.floatR{
	float: right;	
}

.R-mrgn-10{margin-right:10px !important;}

.R-mrgn-20{margin-right:20px !important;}

.L-mrgn-10{margin-left:10px !important;}

.L-mrgn-20{margin-left:20px !important;}

.L-mrgn-30{margin-left:30px !important;}

.L-mrgn-40{margin-left:40px !important;}

.L-mrgn-50{margin-left:50px !important;}

.L-mrgn-60{margin-left:60px !important;}

.L-mrgn-70{margin-left:70px !important;}


.top-mrgn-1{margin-top:1px !important;}
.top-mrgn-4{margin-top:4px !important;}
.top-mrgn-5{margin-top:5px !important;}
.top-mrgn-10{margin-top:10px !important;}

.top-mrgn-20{margin-top:20px !important;}

.top-mrgn-30{margin-top:30px !important;}

.top-mrgn-40{margin-top:40px !important;}

.top-mrgn-50{margin-top:50px !important;}
.top-mrgn-60{margin-top:60px !important;}

.top-mrgn-70{margin-top:70px !important;}

.top-mrgn-80{margin-top:80px !important;}
.top-mrgn-90{margin-top:90px !important;}


.top-mrgn-100{margin-top:100px !important;}

.top-mrgn-160{margin-top:160px !important;}


.bottom-mrgn-10{margin-bottom:10px !important;}

.bottom-mrgn-20{margin-bottom:20px !important;}

.bottom-mrgn-30{margin-bottom:30px !important;}

.bottom-mrgn-40{margin-bottom:40px !important;}

.bottom-mrgn-50{margin-bottom:50px !important;}
.bottom-mrgn-70{margin-bottom:70px !important;}

.bottom-mrgn-100{margin-bottom:100px !important;}

.top-mrgn-S{margin-top:20px;}

/* スマートフォン(640px以下のディスプレイで見た場合のスタイル) */ @media screen and (max-width: 640px) {
	.top-mrgn-S{margin-top:5px;}
}
.top-mrgn-M{margin-top:30px !important;}

/* スマートフォン(640px以下のディスプレイで見た場合のスタイル) */ @media screen and (max-width: 640px) {
	.top-mrgn-M{margin-top:10px;}
}

.top-mrgn-L{margin-top:50px !important;}

/* スマートフォン(640px以下のディスプレイで見た場合のスタイル) */ @media screen and (max-width: 640px) {
	.top-mrgn-L{margin-top:20px !important;}
}

.top-mrgn-LL{margin-top:80px !important;}

/* スマートフォン(640px以下のディスプレイで見た場合のスタイル) */ @media screen and (max-width: 640px) {
	.top-mrgn-LL{margin-top:40px !important;}
}

.btm-mrgn-S{margin-bottom:20px;}

/* スマートフォン(640px以下のディスプレイで見た場合のスタイル) */ @media screen and (max-width: 640px) {
	.btm-mrgn-S{margin-bottom:5px;}
}
.btm-mrgn-M{margin-bottom:30px;}

/* スマートフォン(640px以下のディスプレイで見た場合のスタイル) */ @media screen and (max-width: 640px) {
	.btm-mrgn-M{margin-bottom:10px;}
}

.btm-mrgn-L{margin-bottom:50px;}

/* スマートフォン(640px以下のディスプレイで見た場合のスタイル) */ @media screen and (max-width: 640px) {
	.btm-mrgn-L{margin-bottom:20px;}
}

.m-auto{ margin-left:auto !important; margin-right:auto !important;}


.col10 { width: 10%;}
.col15 { width: 15%;}
.col20 { width: 20%;}
.col25 { width: 25%;}
.col30 { width: 30%;}
.col35 { width: 35%;}
.col40 { width: 40%;}
.col50 { width: 50%;}
.col60 { width: 60%;}
.col65 { width: 65%;}
.col70 { width: 70%;}
.col75 { width: 75%;}
.col80 { width: 80%;}
.col90 { width: 90%;}
.Lmrgn-5per{ margin-left:5%;}
.Lmrgn-10per{ margin-left:10%;}
.Lmrgn-20per{ margin-left:20%;}

/* スマートフォン(640px以下のディスプレイで見た場合のスタイル) */ 
@media screen and (max-width: 640px) {
.col10 { width: 25%;}
.col15 { width: 25%;}
.col20 { width: 50%;}
.col25 { width: 50%;}
.col30 { width: 100%;}
.col35 { width: 100%;}
.col40 { width: 100%;}
.col50 { width: 100%;}
.col60 { width: 100%;}
.col65 { width: 100%;}
.col70 { width: 100%;}
.col75 { width: 100%;}
.col80 { width: 100%;}
.col90 { width: 100%;}
.col90.Lmrgn-5per{ width: 96%; margin-left:2%;}
}

.CL1 {
	width: 100%;
	max-width: 1000px;
	margin: 10px auto;
}





/* スマートフォン(640px以下のディスプレイで見た場合のスタイル) */ @media screen and (max-width: 640px) {
 .CL1 div h4{
	 text-align:left;
	  padding:5px 10px;
}
  

 .CL1 div img{
   max-width: 100%;
height: auto;
width /***/:auto;
  }
  }
/* 2カラム要素
----------------------------------------------------------- */
.CL2{
	width: 100%;
	max-width: 1000px;
	margin: 15px auto 5px auto;
	zoom: 1;
}
  
.CL2:after {
  content: '';
  display: block;
  clear: both;
}
.CL2 > div {
	float: left;
	width: 50%;
}

.CL2 > div img{
	max-width: 100%;
height: auto;
width /***/:auto;
}



/* スマートフォン(640px以下のディスプレイで見た場合のスタイル) */ @media screen and (max-width: 640px) {
  .CL2 > div {
	  float: none;
    width: 100%;
    overflow: hidden;
    margin: 0px auto;
	text-align:center;
  }

  .CL2 > div + div {
	margin-left: 0;
	margin-top: 10px;
  }

  .CL2 > div img{
   max-width: 100%;
height: auto;
width /***/:auto;
  }
 .CL2 div h4{
	
}
 
}

/* 3カラム要素
----------------------------------------------------------- */

.CL3{
	width: 100%;
	max-width: 1000px;
	margin: 15px auto 5px auto;
	zoom: 1;
}
  
.CL3:after {
  content: '';
  display: block;
  clear: both;
}
.CL3 > div {
  float: left;
  width: 32.3%;
}
.CL3 > div + div {
  margin-left:1.3%;
}

.CL3  > div img{
	max-width: 100%;
height: auto;
width /***/:auto;
}


/* スマートフォン(640px以下のディスプレイで見た場合のスタイル) */ @media screen and (max-width: 640px) {
  .CL3 > div {
	  float: none;
    width: 100%;
    overflow: hidden;
    margin: 0px auto;
	text-align:center;
  }

  .CL3 > div + div {
    margin-left: 0;
    margin-top: 3px;
  }

  .CL3 > div img{
   max-width: 100%;
height: auto;
width /***/:auto;
  }

  
}



/* 4カラム要素
----------------------------------------------------------- */
.CL4{
	width: 100%;
	max-width: 1000px;
	margin: 15px auto 5px auto;
	zoom: 1;
}
  
.CL4:after {
  content: '';
  display: block;
  clear: both;
}
.CL4 > div {
  float: left;
  width: 23%;
  margin-right: 1.8%;
}
.CL4 > div + div {
  margin-right: 1.8%;
}

.CL4 > div img{
	max-width: 100%;
height: auto;
width /***/:auto;
}


/* スマートフォン(640px以下のディスプレイで見た場合のスタイル) */ @media screen and (max-width: 640px) {
.CL4 > div {
	width: 49%;
	float: left;
	margin: 1px 0px 1px 2px;
  }
.CL4 > div + div {
    margin-left: 2px;
	margin-right: 0px;
	}

.CL4 > div img{
	max-width: 100%;
height: auto;
width /***/:auto;
}
.CL4 div p{
	font-size: 10px;
	padding-bottom:10px;
	
}
.clearCL4{
	clear:both;
}
}





.pc{ display:block;}
.sp{ display:none;}
@media screen and (max-width: 640px) {
	.pc{ display: none;}
	.sp{ display:block;}
}