@charset "utf-8";

/******************************************
汎用classの定義
- Title Style
- Section Style
- List Style
- Button Style
- Table Style
- Form Style
- Text Style
- Stopgap Class
- Clearfix
*******************************************/


/* ----------------------------------------

テーマカラー

---------------------------------------- */

.title01 > span,
.title01:before,
.title03,
.deflist01 > li:before,
.newsList li .date {
	color: #51b07a; 
}
.title04:before{
	background-color: #51b07a; 
}
.title02:after,
.tag01 dt {
    background-color: #61bd89;
}
.tbl01 th,
.bg01 {
	background-color: #eaf7f2;
}
.tag02 dt{
	background-color: #ababab;
}
.title01:before{
	border: solid 2px #61bd89;
}
.deflist01 > li:before {
    border: solid 3px #61bd89;
}

/* ----------------------------------------

- Title Style

---------------------------------------- */

/* title
------------------------------- */
.title01 {
	font-size: 213.333%;
	font-weight: bold;
	position: relative;
	text-align: center;
	margin-bottom: 30px;
	padding-top: 90px;
}
.title01 > span {
	font-size: 62.5%;
	display: block;
	font-family: "Quicksand";
	line-height: 1;
}
.title01:before{
	content: "";
	font-family: "Font Awesome 5 Free";
	width: 80px;
	height: 80px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin:auto;
	border-radius: 50%;
    display: inline-block;
    text-align: center;
    font-size: 36px;
    line-height: 80px;
}
#section01 .title01:before{
	content: "\f0f8";
}
#section02 .title01:before{
	content: "\f0f1";
}
#section03 .title01:before{
	content: "\f129";
}
#section04 .title01:before{
	content: "\f3c5";
}
.title02{
	font-size: 146.7%;
	font-weight: bold;
	position:relative;
	margin-bottom: 30px;
	padding-bottom: 10px;
}
.title02:after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    position: absolute;
    right: 0;
    left: 0;
	bottom: 0;
}
.title03{
	font-size: 146.7%;
	font-weight: bold;
	position:relative;
	margin-bottom: 15px;
}
.title04{
	font-size: 120%;
	font-weight: bold;
	position:relative;
	margin-bottom: 15px;
	padding-left: 15px;
	line-height: 1;
}
.title04:before{
	content: "";
	width: 4px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

@media screen and (max-width:767px){
/*スマホ指定*/
	.title01 {
		font-size: 24px;
		margin-bottom: 30px;
		padding-top: 60px;
	}
	.title01 > span {
		font-size: 16px;
	}
	.title01:before{
		width: 50px;
		height: 50px;
	    line-height: 50px;
	    font-size: 25px;
	}
	.title02{
		font-size: 20px;
		margin-bottom: 20px;
	}
	.title03{
		font-size: 17px;
		margin-bottom: 10px;
	}
	.title04{
		font-size: 120%;
		font-weight: bold;
		position:relative;
		margin-bottom: 15px;
		padding-left: 15px;
		line-height: 1;
	}
	.title04:before{
		content: "";
		width: 4px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

}
/* ----------------------------------------

- Section Style

---------------------------------------- */

.pcNone {
	display: none !important;
}
@media screen and (max-width:767px){
	.spNone {
		display: none !important;
	}
	.pcNone {
		display: inline-block !important;
		vertical-align: bottom;
	}
}



/* secInner
------------------------------- */
.secInner{
	padding-bottom: 80px;
}
@media screen and (max-width:767px){
	.secInner{
		padding-bottom: 50px;
	}
}
/* sec_subInner
------------------------------- */
.sec_subInner{
	margin-bottom: 30px;
}
@media screen and (max-width:767px){
	.sec_subInner{
		margin-bottom: 30px !important;
	}
}

/* lead
------------------------------- */
.lead{
	font-size: 106.7%;
	text-align: center;
	line-height: 2;
}




/* tag
------------------------------- */
.tag01,
.tag02 {
	margin-bottom: 7px;
	height: 25px;
	line-height: 25px;
}	
.tag01 dt,
.tag02 dt{
	color: #fff;
	display: block;
	font-weight: bold;
	font-size: 93.4%;
	text-align: center;
	width: 65px;
	height: 25px;
	position: relative;
	float: left;
	line-height: 25px;
}
@media all and (-ms-high-contrast: none) {
 	.tag01 dt,
	.tag02 dt{
	padding-top: 2px;
}
}
.tag01 dd,
.tag02 dd{
	display: block;
	font-weight: bold;
	font-size: 106.7%;
	padding-left: 12px;
	vertical-align: middle;
	position: relative;
	padding-left: 75px;
	line-height: 25px;
}


/* cap01
------------------------------- */
.cap01{
	text-align: center;
	line-height: 1.67;
}
.cap01 li:last-child{
	font-weight: bold;
	font-size: 133.4%;
}
@media screen and (max-width:767px){
	.cap01{
		margin-bottom: 20px;
	}
}










/* imgSec
------------------------------- */
.imgSec01 {
	margin-bottom: 15px;
}
.imgSec01 .imgL {
	float: left;
	margin: 3px 25px 10px 0;
}
.imgSec01 .imgR {
	float: right;
	margin: 3px 0 10px 25px;
}
.imgSec01 .inTxt {
	overflow: hidden;
}
@media screen and (max-width:767px) {
	.imgSec01 .spFlClear {
		float: none;
		margin: 0 0 10px;
		text-align: center;
	}
}


/* defList
------------------------------- */
.deflist01 {
	margin-bottom: 20px;
}
.deflist01 > li {
	position: relative;
	padding-left: 15px;
	margin-bottom: 10px;
}
.deflist01 > li:last-child{
	margin-bottom: 0;
}
.deflist01 > li:before {
	display: block;
	content: "";
   	border-radius: 50%;
    font-size: 15px;
    position: absolute;
    left: 0;
    top:10px;
}
@media screen and (max-width:767px) {
	.deflist01 > li:before {
	    top:7px;
	}
}


/* ----------------------------------------

- newsList

---------------------------------------- */

.newsList {
	background-color: #fff;
    overflow-y: scroll;
    max-height: 380px;
}
.newsList li {
	border-bottom: 1px solid #cecece;
}
.newsList li{
	padding: 20px 30px;
	position: relative;
	display: table;
	width: 100%;
}
.newsList li .date{
	width: 106px;
	text-align: left;
	display: table-cell;
}
.newsList li .title{
	display: table-cell;
}

@media screen and (max-width:767px){
	.newsList li{
		display: block;
	}
	.newsList li .date{
		display: block;
		margin-bottom: 10px;
	}
	.newsList li .title{
		display: block;
	}


}




/* ----------------------------------------

- bg01 Style

---------------------------------------- */

.bg01{
	padding: 60px 0 75px;
}
@media screen and (max-width:767px){
	.bg01{
		padding: 30px 0 45px;
	}

}

/* ----------------------------------------

- Table Style

---------------------------------------- */

/* tbl
------------------------------- */
.tbl01 {
	width: 100%;
	margin-bottom: 20px;
}
.tbl01 th,
.tbl01 td {
	padding: 13px 15px;
	border: 1px solid #ccc;
	vertical-align: top;
	text-align: center;
}
.tbl01 th {
	font-weight: 700;
}
@media screen and (max-width:767px){
	.tbl01 th {
		padding-top: 11px;
		padding-bottom: 10px;
	}
	.tbl01 th,
	.tbl01 td {
		padding: 13px 5px;
	}
}


/* table common
------------------------------- */
table.vaM th,table.vaM td {
	vertical-align: middle;
}
table.alnC th,table.alnC td {
	text-align: center;
}

/* noborder */
.tblNoBdr{ border: none !important;}
.tblNoBdr th,
.tblNoBdr td {
	border: none !important;
	vertical-align: top;
	background: #fff;
}
.tblNoBdr th { padding: 4px 15px 4px 0;}
.tblNoBdr td { padding: 4px 0;}
table .tblNoBdr th { padding-top: 6px;}
@media screen and (max-width:767px){
	.tblNoBdr td { padding-top: 2px;}
	table .tblNoBdr th { padding-top: 5px;}
}

@media screen and (max-width:767px){
	.sp_tblcol_clear > tbody,
	.sp_tblcol_clear > tbody > tr,
	.sp_tblcol_clear > tbody > tr > th,
	.sp_tblcol_clear > tbody > tr > td {
		display: block;
		padding: 0;
	}
	.sp_tblcol_clear > tbody > tr {
		padding-top: 5px;
	}
	.sp_tblcol_clear > tbody > tr:first-child {
		padding-top: 0;
	}
}


/* ----------------------------------------

- Form Style
(input要素の幅は適宜調整する)

---------------------------------------- */
input.txt,
textarea.txt,
select.txt {
	padding: 5px;
	border: 1px solid #ddd;
	border-radius: 3px;
	max-width: 100%;
}
input.txt:focus,
textarea.txt:focus {
	background: #fff5d6;
}
textarea.txt {
	width: 100%;
}
input.check {
	position: relative;
	top: 2px;
	margin-right: 3px;
}

/* error */
input.err,
textarea.err,
select.err {
	border-color: #ff6060;
	background: #fff0f0;
}
input.err:focus,
textarea.err:focus {
	border-color: #ee5959;
}
.errorTxt {
	margin-top: 10px;
	color: #ff0000;
	line-height:1.1;
}

/*  option and required  */
td.required,
td.option {
	font-weight: 400;
	color: #fff;
	vertical-align: middle;
}
td.required p,
td.option p {
	width: 3.5em;
	margin: 0 auto;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	text-align: center;
}
td.option			{ background: #f5f5f5;}
td.option p		{ background: #a6a6a6;}
td.required		{ background: #fff0f0;}
td.required p	{ background: #ff6060;}

@media screen and (max-width:767px){
	select.txt {
		border-color: #ccc;
		background: #fff;
	}
}

/* ----------------------------------------

- Text Style

---------------------------------------- */
/*.iconPdf {
	background: url(../../img/common/icon_pdf.png) no-repeat 0 .1em;
	padding-left: 20px;
}*/

.note01 {
	color: #715e5e;
}
table .note01 {
	margin-top: 5px;
}
.fw400 { font-weight: 400 !important;}
.fw700 { font-weight: 700 !important;}

.txt_indent {
	padding-left: 1.15em;
	text-indent: -1.15em;
}
.txt_indent_mark {
	margin-right: .15em;
}

/* ----------------------------------------

- Width

---------------------------------------- */
.w50     { width: 50px !important;}
.w150    { width: 150px !important;}
.w100    { width: 100px !important;}
.w200    { width: 200px !important;}
.w250    { width: 250px !important;}
.w300    { width: 300px !important;}
.w350    { width: 350px !important;}
.w5per  { width: 5% !important;}
.w8per  { width: 8% !important;}
.w10per  { width: 10% !important;}
.w12_5per  { width: 12.5% !important;}
.w15per  { width: 15% !important;}
.w20per  { width: 20% !important;}
.w25per  { width: 25% !important;}
.w30per  { width: 30% !important;}
.w35per  { width: 35% !important;}
.w40per  { width: 40% !important;}
.w45per  { width: 45% !important;}
.w50per  { width: 50% !important;}
.w60per  { width: 60% !important;}
.w70per  { width: 70% !important;}
.w80per  { width: 80% !important;}
.w90per  { width: 90% !important;}
.w100per { width: 100% !important;}
.w5em    {  width: 5em !important;}
.w10em   {  width: 10em !important;}
.w15em   {  width: 15em !important;}
.w20em   {  width: 20em !important;}
@media screen and (max-width:767px){
  .spwAuto    { width: auto !important;}
	.sp_w50     { width: 50px !important;}
	.sp_w150    { width: 150px !important;}
	.sp_w100    { width: 100px !important;}
	.sp_w200    { width: 200px !important;}
	.sp_w250    { width: 250px !important;}
	.sp_w300    { width: 300px !important;}
	.sp_w350    { width: 350px !important;}
	.sp_w5per   { width: 5% !important;}
	.sp_w8per   { width: 8% !important;}
	.sp_w10per  { width: 10% !important;}
	.sp_w15per  { width: 15% !important;}
	.sp_w20per  { width: 20% !important;}
	.sp_w25per  { width: 25% !important;}
	.sp_w30per  { width: 30% !important;}
	.sp_w35per  { width: 35% !important;}
	.sp_w40per  { width: 40% !important;}
	.sp_w45per  { width: 45% !important;}
	.sp_w50per  { width: 50% !important;}
	.sp_w60per  { width: 60% !important;}
	.sp_w70per  { width: 70% !important;}
	.sp_w80per  { width: 80% !important;}
	.sp_w90per  { width: 90% !important;}
	.sp_w100per { width: 100% !important;}
	.sp_w5em    { width: 5em !important;}
	.sp_w10em   { width: 10em !important;}
	.sp_w15em   { width: 15em !important;}
	.sp_w20em   { width: 20em !important;}
}

/* ----------------------------------------

- Stopgap Class
(以下は暫定的、又はイレギュラーな場合のみ使用。通常は使用しない)

---------------------------------------- */
.clear {
	clear: both;
}
.hidden {
	height: 0;
	width: 0;
	overflow: hidden;
}
.mgt0 { margin-top: 0 !important;}
.mgt3 {	margin-top: 3px !important;}
.mgt5 {	margin-top: 5px !important;}
.mgt10 {	margin-top: 10px !important;}
.mgt13 {	margin-top: 13px !important;}
.mgt15 {	margin-top: 15px !important;}
.mgt20 {	margin-top: 20px !important;}
.mgt30 {	margin-top: 30px !important;}
.mgt40 {	margin-top: 40px !important;}
.mgb0 { margin-bottom: 0 !important;}
.mgb3 {	margin-bottom: 3px !important;}
.mgb5 {	margin-bottom: 5px !important;}
.mgb10 {	margin-bottom: 10px !important;}
.mgb13 {	margin-bottom: 13px !important;}
.mgb15 {	margin-bottom: 15px !important;}
.mgb20 {	margin-bottom: 20px !important;}
.mgb30 {	margin-bottom: 30px !important;}
.mgb40 {	margin-bottom: 40px !important;}
.alnC { text-align: center !important;}
.alnR { text-align: right !important;}
.alnL{ text-align: left !important;}
.nowrap { white-space: nowrap;}
.breakWord { word-wrap: break-word;}

@media screen and (max-width:767px){
	.sp_mgt0 { margin-top: 0 !important;}
	.sp_mgt5 {	margin-top: 5px !important;}
	.sp_mgt10 {	margin-top: 10px !important;}
	.sp_mgt15 {	margin-top: 15px !important;}
	.sp_mgt20 {	margin-top: 20px !important;}
	.sp_mgt30 {	margin-top: 30px !important;}
	.sp_mgt40 {	margin-top: 40px !important;}
	.sp_mgb0 { margin-bottom: 0 !important;}
	.sp_mgb5 {	margin-bottom: 5px !important;}
	.sp_mgb10 {	margin-bottom: 10px !important;}
	.sp_mgb15 {	margin-bottom: 15px !important;}
	.sp_mgb20 {	margin-bottom: 20px !important;}
	.sp_mgb30 {	margin-bottom: 30px !important;}
	.sp_mgb40 {	margin-bottom: 40px !important;}

	.spNone { display: none !important; }
}

/* ----------------------------------------

clearfix

---------------------------------------- */

/* Modern Browsers
------------------------------- */
.clearfix:after,
.imgSec01:after {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: ".";
	line-height: 0;
}

/* Legacy IE
------------------------------- */
.clearfix,
.imgSec01 {
	*zoom: 1;
}