@charset "utf-8";

/***********************************************/
/* 公開側・管理画面で共通で使用するスタイルを記述する
/***********************************************/
/* リンク色設定 */
a { color: #9D7300; }

/* カラー設定 */
.black { color: #212121; }
.white { color: #ffffff; }
.pink  { color: #F27858; }
.gray  { color: #7F7F7F; }
.light-gray  { color: #999;}
.red   { color: #E91A33; }
.blue  { color: #0F70D1; }
.light-blue{color: #53C6E9}

/* テキスト位置 */
.left   { text-align: left;  }
.center { text-align:center; }
.right  { text-align:right;  }

/* 背景色 */
.bg-white { background-color:#FFF; }
.bg-gray  { background-color:#F7F7F7; }
.bg-yellow  { background-color:#faf5e5; }
.bg-light-pink {background-color:#FDEBE6;}
/* 要素配置 */
.f_left{ float: left; }
.f_right{ float: right; }
.mrl_auto {margin-left: auto; margin-right: auto;}
.m_auto{ margin:0 auto; }


/* ベースラインの設定 */
.top{ vertical-align: top; }
.middle{ vertical-align:middle; }
.sub{ vertical-align:sub; }
.bottom{ vertical-align:bottom; }


/* 改行禁止 */
.nowrap{ white-space:nowrap; }


/* フォント系 */
.b{ font-weight:bold; }
.nomal{ font-weight:normal;}
.light{ font-weight: lighter; }

.f10{ font-size: 10px; }
.f11{ font-size: 11px; }
.f12{ font-size: 12px; }
.f13{ font-size: 13px; }
.f14{ font-size: 14px; }
.f15{ font-size: 15px; }
.f16{ font-size: 16px; }
.f17{ font-size: 17px; }
.f18{ font-size: 18px; }
.f19{ font-size: 19px; }
.f20{ font-size: 20px; }
.f21{ font-size: 21px; }
.f22{ font-size: 22px; }
.f23{ font-size: 23px; }
.f24{ font-size: 24px; }
.f25{ font-size: 25px; }
.f28{ font-size: 28px; }
.f30{ font-size: 30px; }
.f34{ font-size: 34px; }
.f36{ font-size: 36px; }
.f42{ font-size: 42px; }

.ls1{ letter-spacing: -1px;}
.ls2{ letter-spacing: -2px;}

.lh15 { line-height: 15px;}
.lh20 { line-height: 20px;}
.lh25 { line-height: 25px;}
.lh30 { line-height: 30px;}
.lh35 { line-height: 35px;}


/* 余白設定 */
.p3 { padding: 3px; }
.p5 { padding: 5px; }
.p10 { padding: 10px; }
.p15 { padding: 15px; }
.p20 { padding: 20px; }
.p25 { padding: 25px; }
.p30 { padding: 30px; }
.p35 { padding: 35px; }
.p40 { padding: 40px; }
.p45 { padding: 45px; }
.p50 { padding: 50px; }
.p55 { padding: 55px; }
.p60 { padding: 60px; }
.p65 { padding: 65px; }
.p70 { padding: 70px; }

.t3{ padding-top: 3px; }
.t5{ padding-top: 5px; }
.t7{ padding-top: 7px; }
.t10{ padding-top: 10px; }
.t15{ padding-top: 15px; }
.t20{ padding-top: 20px; }
.t25{ padding-top: 25px; }
.t30{ padding-top: 30px; }
.t50{ padding-top: 50px; }
.t60{ padding-top: 60px; }
.t75{ padding-top: 75px; }

.r3{ padding-right: 3px; }
.r5{ padding-right: 5px; }
.r7{ padding-right: 7px; }
.r10{ padding-right: 10px; }
.r15{ padding-right: 15px; }
.r20{ padding-right: 20px; }
.r25{ padding-right: 25px; }
.r30{ padding-right: 30px; }

.b3{ padding-bottom: 3px; }
.b5{ padding-bottom: 5px; }
.b7{ padding-bottom: 7px; }
.b10{ padding-bottom: 10px; }
.b15{ padding-bottom: 15px; }
.b20{ padding-bottom: 20px; }
.b25{ padding-bottom: 25px; }
.b30{ padding-bottom: 30px; }
.b40{ padding-bottom: 40px; }

.l3{ padding-left: 3px; }
.l5{ padding-left: 5px; }
.l7{ padding-left: 7px; }
.l10{ padding-left: 10px; }
.l15{ padding-left: 15px; }
.l20{ padding-left: 20px; }
.l25{ padding-left: 25px; }
.l30{ padding-left: 30px; }

.tb3{ padding-top: 3px; padding-bottom: 3px; }
.tb5{ padding-top: 5px; padding-bottom: 5px; }
.tb7{ padding-top: 7px; padding-bottom: 7px; }
.tb10{ padding-top: 10px; padding-bottom: 10px; }
.tb15{ padding-top: 15px; padding-bottom: 15px; }
.tb20{ padding-top: 20px; padding-bottom: 20px; }
.tb25{ padding-top: 25px; padding-bottom: 25px; }
.tb30{ padding-top: 30px; padding-bottom: 30px; }
.tb150{ padding-top:150px; padding-bottom:150px; }

.lr3{ padding-left: 3px; padding-right: 3px; }
.lr5{ padding-left: 5px; padding-right: 5px; }
.lr7{ padding-left: 7px; padding-right: 7px; }
.lr10{ padding-left: 10px; padding-right: 10px; }
.lr15{ padding-left: 15px; padding-right: 15px; }
.lr20{ padding-left: 20px; padding-right: 20px; }
.lr25{ padding-left: 25px; padding-right: 25px; }
.lr30{ padding-left: 30px; padding-right: 30px; }

.mt3{ margin-top: 3px; }
.mt5{ margin-top: 5px; }
.mt7{ margin-top: 7px; }
.mt10{ margin-top: 10px; }
.mt15{ margin-top: 15px; }
.mt20{ margin-top: 20px; }
.mt25{ margin-top: 25px; }
.mt30{ margin-top: 30px; }
.mt40{ margin-top: 40px; }
.mt50{ margin-top: 50px; }
.mt60{ margin-top: 60px; }
.mt80{ margin-top: 80px; }
.mt100{ margin-top: 100px; }

.mt-10{ margin-top: -10px; }
.mt-20{ margin-top: -20px; }
.mt-30{ margin-top: -30px; }
.mt-40{ margin-top: -40px; }
.mt-50{ margin-top: -50px; }

.mr0{ margin-right: 0px; }
.mr3{ margin-right: 3px; }
.mr5{ margin-right: 5px; }
.mr10{ margin-right: 10px; }
.mr15{ margin-right: 15px; }
.mr20 { margin-right: 20px;}

.mb3{ margin-bottom: 3px; }
.mb5{ margin-bottom: 5px; }
.mb7{ margin-bottom: 7px; }
.mb10{ margin-bottom: 10px; }
.mb15{ margin-bottom: 15px; }
.mb20{ margin-bottom: 20px; }
.mb25{ margin-bottom: 25px; }
.mb30{ margin-bottom: 30px; }
.mb40{ margin-bottom: 40px; }
.mb50{ margin-bottom: 50px; }
.mb80{ margin-bottom: 80px; }
.mb150{ margin-bottom: 100px; }

.ml10{ margin-left: 10px; }
.ml15{ margin-left: 15px; }
.ml20{ margin-left: 20px; }
.ml40{ margin-left: 40px; }
.ml50{ margin-left: 50px; }

/* 横幅設定 */
.w10p{ width: 10%; }
.w15p{ width: 15%; }
.w20p{ width: 20%; }
.w25p{ width: 25%; }
.w30p{ width: 30%; }
.w40p{ width: 40%; }
.w50p{ width: 50%; }
.w80p{ width: 80%; }
.w90p{ width: 90%; }
.w95p{ width: 95%; }
.w98p{ width: 98%; }
.w100p{ width: 100%; }

.w30{ width:30px; }
.w50{ width:50px; }
.w60{ width:60px; }
.w70{ width:70px; }
.w80{ width:80px; }
.w90{ width:90px; }
.w100{ width:100px; }
.w110{ width: 110px; }
.w220{ width: 220px; }
.w416{ width: 416px; }
.w473{ width: 473px; }
.w100{ width: 100px; }
.w150{ width: 150px; }
.w200{ width: 200px; }
.w250{ width: 250px; }
.w300{ width: 300px; }
.w350{ width: 350px; }
.w400{ width: 400px; }
.w450{ width: 450px; }
.w500{ width: 500px; }
.w550{ width: 550px; }
.w600{ width: 600px; }
.w650{ width: 650px; }
.w700{ width: 700px; }
.w734{ width: 734px; }
.w750{ width: 750px; }
.w800{ width: 800px; }
.w850{ width: 850px; }
.w900{ width: 900px; }
.w950{ width: 950px; }
.w1000{ width: 1000px; }
.w1050{ width: 1050px; }
.w1100{ width: 1100px; }
.w1200{ width: 1200px; }


/* 高さ設定 */
.h40{ height:40px; }
.h50{ height:50px; }
.h100{ height:100px; }
.h150{ height:150px; }
.max-height{height:100vh;}

/* 回り込み解除 */
.clear{	clear: both; }

/* clearfix 2016年版 */
.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}


/* はみ出した内容の表示方法 */
.overflow_hidden{ overflow:hidden; }
.overflow_scroll{ overflow:scroll; }

/* box-sizing */
.bs_bb {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

/* 要素の表示形式 */
.none {display: none; }
.block {display: block; }

.sp-none {
    display: none;
}
.pc-none {
    display: block;
}
@media (min-width: 992px) {
.sp-none {
    display: block;
}
.pc-none {
    display: none;
}
}

/* カーソルの表示 */
.pointer { cursor: pointer; }

.pointer_btn { cursor: pointer; }
.pointer_btn:hover { opacity: 0.8; }

/* hover時opacity */
.hover_op08:hover { opacity: 0.8; }

/* 角丸 */
.radius3 {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
}
.radius5 {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}
.radius10 {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}


/* エラー内容表示 */
.error_area {
	padding: 10px;
	background:#FFE6E6;
	color:#D90000;
	border: solid 1px #D90000;
	text-align: center;
	max-width: 750px;
	margin: 10px auto;
}

.sp_error_area {
	padding: 10px;
	background:#FFE6E6;
	color:#D90000;
	border: solid 1px #D90000;
	text-align: center;
	width: 100%;
	margin: 10px auto;
}

/* 更新内容表示 */
.update_area {
	padding: 10px;
	background:#F4F9F1;
	color: #279D39;
	border: solid 1px #279D39;
	text-align: center;
	max-width: 750px;
	margin: 10px auto;
}


/* 必須マーク */
.require:after {
	content: " *";
	color: red;
}

/* 必須マークをJSで消すとき用 */
.require-none:after {
    content: "";
}

/* 必須ではないマーク */
.not_require:after {
	color: red;
}

/* 入力項目などの補足説明 */
.input_remark {
	font-size: 12px;
	line-height: 18px;
	color: #808080;
}

/* コンテンツサイズ */
.box_w100 {
	width: 100px;
	margin-right: auto;
	margin-left: auto;
}
.box_w150 {
	width: 150px;
	margin-right: auto;
	margin-left: auto;
}
.box_w200 {
	width: 200px;
	margin-right: auto;
	margin-left: auto;
}
.box_w250 {
	width: 250px;
	margin-right: auto;
	margin-left: auto;
}
.box_w300 {
	width: 300px;
	margin-right: auto;
	margin-left: auto;
}
.box_w350 {
	width: 350px;
	margin-right: auto;
	margin-left: auto;
}
.box_w400 {
	width: 400px;
	margin-right: auto;
	margin-left: auto;
}
.box_w450 {
	width: 450px;
	margin-right: auto;
	margin-left: auto;
}
.box_w500 {
	width: 500px;
	margin-right: auto;
	margin-left: auto;
}
.box_w550 {
	width: 550px;
	margin-right: auto;
	margin-left: auto;
}
.box_w600 {
	width: 600px;
	margin-right: auto;
	margin-left: auto;
}
.box_w650 {
	width: 650px;
	margin-right: auto;
	margin-left: auto;
}
.box_w700 {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
}
.box_w750 {
	width: 750px;
	margin-right: auto;
	margin-left: auto;
}
.box_w800 {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
}
.box_w850 {
	width: 850px;
	margin-right: auto;
	margin-left: auto;
}
.box_w900 {
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}
.box_w950 {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
}
.box_w1000 {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
.box_w1050 {
	width: 1050px;
	margin-right: auto;
	margin-left: auto;
}
.box_w1100 {
	width: 1100px;
	margin-right: auto;
	margin-left: auto;
}