body	{ color: #fff; background-color: #000000; font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "小塚ゴシック Pro L", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",sans-serif; }

::selection {background: #00fffc; color: #000;}
::-moz-selection {background: #00fffc; color: #000;}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 990px;
  }
}
@media (min-width: 1240px) {
  .container {
    width: 1230px;
  }
}


a:hover img.hov {
transition: 0.5s;
opacity: .7;
-webkit-opacity: .7;
-moz-opacity: .7;
filter: alpha(opacity=70);	/* IE lt 8 */
-ms-filter: "alpha(opacity=70)"; /* IE 8 */
}

a img {
-webkit-transition: opacity 0s ease-out;
-moz-transition: opacity 0s ease-out;
-ms-transition: opacity 0s ease-out;
transition: opacity 0s ease-out;
backface-visibility: hidden; 
}

a, a:link, a:visited, a:active {
    color: #000;
    text-decoration: none;
}
a:hover {
    color: #1c8cff;
}

.styleArea	{ display: block; }
.styleArea a, 
.styleArea a:link, 
.styleArea a:visited, 
.styleArea a:active	{ color: #fff; text-decoration: none; }
.styleArea a	{ margin: 0 0 10px; padding: 10px 25px; border: solid 1px #fff; display: block; border-radius: 5px;-webkit-border-radius: 5px; -moz-border-radius: 5px; }
.styleArea p	{ font-size: 80%; line-height: 1.4em; }
.styleArea p	{ display: table-cell; vertical-align: middle; height: 2.5em; }

.styleMa a:hover	{ color: #00d2ff; border: solid 1px #00d2ff; transition: 0.5s; }
.styleWo a:hover	{ color: #e422e6; border: solid 1px #e422e6; transition: 0.5s; }
.areastyle	{ font-size: 14px; font-weight: bold; margin: 20px 0 5px; padding: 0; display: block; }


@media (max-width: 992px) {
	.styleArea a	{ margin: 0 0 10px; padding: 10px 15px; }
	.styleArea p	{ font-size: 75%; line-height: 1.4em; }
	.areastyle	{ font-size: 12px; margin: 10px 0 5px; }
}
@media (max-width: 500px) {
	.styleArea a	{ margin: 0 0 5px; padding: 5px 10px; }
	.styleArea p	{ font-size: 65%; line-height: 1.4em; }
	.areastyle	{ font-size: 11px; margin: 10px 0 5px; }
}

.copy	{ font-size: 80%; line-height: 1.5em; margin: 10px 0 10px 0; }


.header	{ text-align: left; display: block; }
.header .logo	{ margin: 20px 0; }
@media (max-width: 768px) {
	.header	{ text-align: center; display: block; }
	.header .logo	{ margin: 10px 0; }
}

.visual	{ float: left; width: 77%; }
.visual p	{ margin: 0; padding: 0 2px; }
.mainTxt	{ float: left; width: 23%; }
.mainTxt strong	{ font-size: 110%; font-weight: bold; margin: 0; padding: 15px 0 10px; display: block; }
.mainTxt strong span	{ white-space: nowrap; }
.mainTxt p	{ font-size: 83%; line-height: 1.4em; margin: 0 0 5px; }
.mainTxtInner	{ margin: 0; padding: 0 0 10px 15px; }
.ss01	{ float: left; height: 45px; }
.text-center img.img-responsive	{ margin: 0 auto; }
.text-right img.img-responsive	{ margin: 0 0 0 auto; }
.underNavi	{ margin: 30px 0 50px; padding: 30px 0 0; border-top: 1px dotted #999; }
.topNavi	{ display: none; }

@media (max-width: 1239px) {
	.visual	{ float: left; width: 68%; }
	.mainTxt	{ float: left; width: 32%; }
	.mainTxt strong	{ font-size: 100%; font-weight: bold; margin: 0; padding: 10px 0 5px; display: block; }
	.mainTxt p	{ font-size: 77%; line-height: 1.4em; margin: 0 0 3px; }
	.topNavi	{ display: none; }
}
@media (max-width: 992px) {
	.visual	{ float: left; width: 100%; }
	.mainTxt	{ float: left; width: 100%; }
	.mainTxt strong	{ font-size: 100%; font-weight: bold; margin: 0; padding: 5px 0 5px; display: block; }
	.mainTxt p	{ font-size: 74%; line-height: 1.3em; margin: 0 0 3px; }
	.mainTxtInner	{ margin: 0; padding: 10px 0; }
	.ss01	{ float: left; width: auto; height: 50px; }
	.ss02	{ float: none; height: 50px; clear: right; }
	.underNavi	{ margin: 20px 0 20px; padding: 20px 0 0; border-top: 1px dotted #999; }
	.underNavi .text-right	{ display: none; }
}
@media (max-width: 768px) {
	.topNavi	{ margin: 10px 0 10px; padding: 10px 0 0; border-top: 1px dotted #999; display: block; }
	.underNavi .text-right	{ display: none; }
}

@media (max-width: 500px) {
	.visual	{ float: left; width: 100%; }
	.mainTxt	{ float: left; width: 100%; }
	.mainTxt strong	{ font-size: 90%; font-weight: bold; margin: 0; padding: 5px 0 5px; display: block; }
	.mainTxt p	{ font-size: 70%; line-height: 1.3em; margin: 0 0 3px; }
	.mainTxtInner	{ margin: 0; padding: 10px 0; }
	.ss01	{ float: left; width: inherit; height: 30px; }
	.ss02	{ float: none; width: inherit; height: 30px; clear: right; }
	.topNavi	{ margin: 5px 0 5px; padding: 5px 0 0; border-top: 1px dotted #999; display: block; }
	.underNavi .text-right	{ display: none; }
}




.itemWac	{ }
.itemColumn	{ font-size: 11px; text-align: center; position: relative; margin-bottom: 10px; }
.itemColumn	{
  float: left;
  width: 99%;
  width: -moz-calc(100% / 7);
  width: -webkit-calc(100% / 7);
  width: calc(100% / 7);
}
@media (max-width: 992px) {
.itemColumn	{
  float: left;
  width: 99%;
  width: -moz-calc(100% / 4);
  width: -webkit-calc(100% / 4);
  width: calc(100% / 4);
}
}
@media (max-width: 500px) {
.itemColumn	{
  float: left;
  width: 99%;
  width: -moz-calc(100% / 3);
  width: -webkit-calc(100% / 3);
  width: calc(100% / 3);
}
}
@media (max-width: 361px) {
.itemColumn	{
  float: left;
  width: 99%;
  width: -moz-calc(100% / 2);
  width: -webkit-calc(100% / 2);
  width: calc(100% / 2);
}
}

.itemInner	{ color:#ffffff; padding: 5px 2px 2px; }
.itemInner span	{ font-size: 9px; }
.itemInner a	{ color:#ffffff; }
.itemInner a:hover	{ color:#aaaaaa; transition: 0.5s; }
.itemInner p	{ margin: 0; padding: 0 0 5px; }
.itemInner p.name	{ min-height: 3.3em; }
.itemInner p.img	{ background-color: #fff; margin: 0 0 10px; padding: 5px 15px; }
.itemInner p.color	{ padding: 5px 25px; }
@media (max-width: 420px) {
	.itemInner p.color	{ padding: 5px 10px; }
}
@media (max-width: 361px) {
	.itemInner p.color	{ padding: 5px 30px; }
}


.footArea	{ color: #fff; font-size: 10px; text-align: left; margin: 80px 0 0; padding: 25px 0 100px; background: rgba(0,0,0,0.5); }
.footArea span	{ white-space: nowrap; }
@media (max-width: 767px) {
	.footArea	{ font-size: 8px; margin: 0; padding: 25px 0 100px; }
	.footArea .text-right	{ padding-bottom: 40px; }
	.footArea .text-right a	{ display: block; text-align: center; }
	.footArea .text-right img.img-responsive	{ margin: 0 auto 0 auto; }
}


/*min-widthの指定 (数字に指定したところから) */
@media (min-width: 768px) {/*幅768px以上で適用されるスタイル*/}
@media (min-width: 992px) {/*幅992px以上で適用されるスタイル*/}
@media (min-width: 1200px) {/*幅1200px以上で適用されるスタイル*/}

/*max-widthの指定 (数字に指定したところまで)*/
@media (max-width: 1199px) {/*幅1199px以下で適用されるスタイル*/}
@media (max-width: 991px) {/*幅991px以下で適用されるスタイル*/}
@media (max-width: 767px) {/*幅767px以下で適用されるスタイル*/}


/* ------------ GO TOP ------------- */
@media (max-width: 767px) { 
	#scrollUp { font-size: 13px; font-weight: bold; bottom: 0; right: 0; padding: 10px 20px; background: #000000; color: #fff; text-decoration: none; text-align: center; width: 100%; }
}
@media (min-width: 768px)	{ 
	#scrollUp { font-size: 13px; font-weight: bold; bottom: 20px; right: 20px; padding: 5px 15px; background: #000000; color: #fff; }
}
a#scrollUp:link, 
a#scrollUp:visited, 
a#scrollUp:hover, 
a#scrollUp:active	{ text-decoration: none; }
a#scrollUp:hover, 
a#scrollUp:active	{ background: #333333; }


/* ------------ BLOCK ------------- */
@media (max-width: 767px)	{ .pconly { display: none; } }
@media (min-width: 768px)	{ .pconly { display: block; } }
@media (max-width: 767px)	{ .sponly { display: block; } }
@media (min-width: 768px)	{ .sponly { display: none; } }


/* ------------ GRID GUTTER ------------- */
.row-0 {
  margin-left: 0px;
  margin-right: 0px;
}
.row-0 > div {
  padding-right: 0px;
  padding-left: 0px;
}
.row-4 {
  margin-left: -2px;
  margin-right: -2px;
}
.row-4 > div {
  padding-right: 2px;
  padding-left: 2px;
}
.row-10 {
  margin-left: -5px;
  margin-right: -5px;
}
.row-10 > div {
  padding-right: 5px;
  padding-left: 5px;
}
.row-20 {
  margin-left: -10px;
  margin-right: -10px;
}
.row-20 > div {
  padding-right: 10px;
  padding-left: 10px;
}
.row-30 {
  margin-left: -15px;
  margin-right: -15px;
}
.row-30 > div {
  padding-right: 15px;
  padding-left: 15px;
}
.row-40 {
  margin-left: -20px;
  margin-right: -20px;
}
.row-40 > div {
  padding-right: 20px;
  padding-left: 20px;
}

@media (min-width: 768px) { 
	.no-gutter > [class*='col-'] {
	    padding-right:0;
	    padding-left:0;
	}
}
@media (min-width: 991px) { 
	.no-gutter > [class*='col-'] {
	    padding-right:0;
	    padding-left:0;
	}
}

@media (max-width: 767px) { 
.under-05, 
.under-10, 
.under-15, 
.under-20, 
.under-30, 
.under-40	{ margin-bottom: 5px; }
}
@media (min-width: 768px) { 
.under-05	{ margin-bottom: 5px; }
.under-10	{ margin-bottom: 10px; }
.under-15	{ margin-bottom: 15px; }
.under-20	{ margin-bottom: 20px; }
.under-30	{ margin-bottom: 30px; }
.under-40	{ margin-bottom: 40px; }
}
@media (min-width: 991px) { 
.under-05	{ margin-bottom: 5px; }
.under-10	{ margin-bottom: 10px; }
.under-15	{ margin-bottom: 15px; }
.under-20	{ margin-bottom: 20px; }
.under-30	{ margin-bottom: 30px; }
.under-40	{ margin-bottom: 40px; }
}

/* ------------ clearfix ------------- */
span.clearfix	{ display:block; }
.clearfix:after	{ content:"."; display:block; height:0; clear:both; visibility:hidden; font-size:0; line-height:0; }
.clearfix	{ *overflow:hidden; *zoom:1; }
.clearfix:not(:target)	{ /* overflow:hidden\9; */ /* zoom:1\9; */ }
* html .clearfix	{ height:1%; overflow:visible; }
