@charset "utf-8";

/*reset 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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style:normal;
	font-weight: normal;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
	overflow-y: scroll;
	font-size:62.5%;
}

body {
	font-size:1.5rem;
	line-height:1.5;
	color:#333333;
	overflow:hidden;
	-webkit-text-size-adjust: 100%;
}

h1,h2,h3,h4,h5,h6 {
	font-style: normal;
	font-weight: normal;
	font-size: 1.0rem;
}

blockquote, q {
	quotes: none;
}

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

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input, textarea{
	margin: 0;
	padding: 0;
}

ol, ul{
	list-style:none;
}

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

caption, th{
    text-align: left;
}

a {
	color:#979797;
	text-decoration:none;
}
a:hover {
color:#805700;
}
a:focus {
	outline:none;
}

a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}

.clearfix:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
}

.clear {clear:both; margin:0;padding:0}


.img-filter a:hover img {
	opacity: 0.7;
 filter: alpha(opacity=80);
 -moz-opacity: 0.7;
}

img{
	margin: 0;
	padding: 0;
	vertical-align: bottom;
	border:0;
}

p {
	margin:0;
	padding:0;
}
.mt20{
	margin-top: 20px;
}
.mb20{
	margin-bottom: 20px;
}
.red {
	color:#FF0004;
}

.underbar {
	border-bottom:1px solid #333333;
}

.arrow{
	position: relative;
}

.arrow::after{
	content:"";
	display: block;
	width:10px;
	height:10px;
	border-top:4px solid #333;
	border-right:4px solid #333;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	right:10px;
	top:10%;
	margin-top:-7px;
}


.noto100 {font-weight:100;}
.noto300 {font-weight:300;}
.noto400 {font-weight:400;}
.noto500 {font-weight:500;}
.noto700 {font-weight:700;}
.noto900 {font-weight:900;}

.center{
	text-align: center;
}


/*------flexbox------------------------------------------------*/

.flexbox {
	display:-webkit-box;/*--- Androidブラウザ用 ---*/
	display:-ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex; /* Safari */
	display: flex;
}

/* 左から右へ水平方向*/
.fb_row {
	-webkit-box-direction:row;/*--- Androidブラウザ用 ---*/	
	-ms-flex-direction: row;/*--- IE10用 ---*/
	-webkit-flex-direction: row; /* Safari */
	flex-direction:row;
}

/* 右から左へ水平方向*/
.fb_row-reverse {
	-webkit-box-direction:reverse;/*--- Androidブラウザ用 ---*/	
	-ms-flex-direction: reverse;/*--- IE10用 ---*/	
	-webkit-flex-direction: row-reverse; /* Safari */
	flex-direction:row-reverse;
}

/* 上から垂直方向 */
.fb_column {
	-webkit-box-direction:column;/*--- Androidブラウザ用 ---*/
	-ms-flex-direction: column;/*--- IE10用 ---*/	
	-webkit-flex-direction: column; /* Safari */
	flex-direction:column;
}

/* 横一行に配置(幅に収まるように縮小) */
.fb_nowrap {
	-ms-flex-wrap:nowrap;/*--- IE10用 ---*/	
	-webkit-flex-wrap: nowrap; /* Safari */
	flex-wrap:nowrap;
}
/* 横複数行に配置(折り返し) */
.fb_wrap {
	-ms-flex-wrap:wrap;/*--- IE10用 ---*/	
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:wrap;
}


/*------flexアイテムの横方向の位置揃えを指定------*/

/* flexコンテナの左側に配置 */
.fb_start {
	-webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/
	-ms-flex-pack:justify;/*--- IE10 ---*/		
	-webkit-justify-content: flex-start; /* Safari */
	justify-content:flex-start;
}

/* flexコンテナの右側に配置 */
.fb_end {
	-webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/
	-ms-flex-pack:justify;/*--- IE10 ---*/		
	-webkit-justify-content: flex-end; /* Safari */
	justify-content:flex-end;
}

/* flexコンテナの中央に配置 */
.fb_center {
	-webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/
	-ms-flex-pack:justify;/*--- IE10 ---*/		
	-webkit-justify-content: center; /* Safari */
	justify-content:center;
}

/*最初と最後のアイテムは端に、残りは等間隔 */

.fb_between {
	-webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/
	-ms-flex-pack:justify;/*--- IE10 ---*/	
	-webkit-justify-content: space-between; /* Safari */
	justify-content:space-between;
}

/*等間隔に配置 */

.fb_around {
	-webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/
	-ms-flex-pack:justify;/*--- IE10 ---*/		
	-webkit-justify-content: space-around; /* Safari */
	justify-content:space-around;
}

/*flexコンテナの高さ（または幅）いっぱいに配置*/

.fb_items_stretch {
	-webkit-box-align:stretch;/*--- Androidブラウザ用 ---*/
	-ms-flex-align:stretch;/*--- IE10 ---*/	
	-webkit-align-items: stretch; /* Safari */
	align-items:stretch;
}

/*flexコンテナのクロス軸の始点に配置*/

.fb_items_start {
	-webkit-align-items: flex-start; /* Safari */
	align-items:flex-start;
}

/*flexコンテナのクロス軸の終点に配置*/

.fb_items_end {
	-webkit-align-items: flex-end; /* Safari */
	align-items:flex-end;
}

/*flexコンテナのクロス軸の中央に配置*/

.fb_items_center {
	-webkit-align-items: center; /* Safari */
	align-items:center;
}

/*ベースラインに沿って配置*/

.fb_items_baseline {
	-webkit-align-items: baseline; /* Safari */
	align-items: baseline;
}

/*均等に分配されたスペースが全てのflexアイテムのあとについて配置*/

.fb_content_stretch {
  -webkit-align-content: stretch; /* Safari */
  align-content:stretch;
}

/*flexコンテナのクロス軸の始点に向かって積み重なる*/

.fb_content_start {
	-webkit-align-content: flex-start; /* Safari */
	align-content:flex-start;
}

/*flexコンテナのクロス軸の終点に向かって積み重なる*/

.fb_content_end {
	-webkit-align-content: flex-end; /* Safari */
	align-content:flex-end;
}

/*flexコンテナのクロス軸の終点に向かって積み重なる*/

.fb_content_center {
	-webkit-align-content: center; /* Safari */
	align-content:center;
}

/*------flexアイテムの順番を指定------*/

.fb-order-1{
	order:1;
}
.fb-order-2{
	order:2;
}
.fb-order-3{
	order:3;
}
.fb-order-4{
	order:4;
}
.fb-order-5{
	order:5;
}

.spNone{
	display: block;
}
.pcNone{
	display: none;
}	
@media only screen and (max-width: 480px) {
.pcNone{
	display: block;
}
.spNone{
	display: none;
}
}