 @charset "utf-8";

/* reset
============================================================*/

html,

.clear{
	clear: both;
} 

.clearfix {
  zoom: 1;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

h1, h2, h3, h4, h5, h6, th, td, address, small, i {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: 500;
  font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
  line-height:1.5;
}

ol, ul, dl, dt, dd {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-weight: 500;
  font-style: normal;
}

img, object, embed {
  border: 0;
  vertical-align: bottom;
}

img {
	max-width: 100%;
	height: auto;
}
.img100{
	width:100%;
}

.full {
	width: auto;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

.gray_line{
	border-bottom:1px solid #e5e6e6;
	height:1px;
}

/* --- 全体のリンクテキスト --- */
	a:link { color: #0066cc; text-decoration: none; }
	a:visited { color: #0066cc; text-decoration: none; }
	a:hover { color: #0066cc; text-decoration: underline; }
	a:active { color: #0066cc; text-decoration: none; }

.borderimg{
	border:1px solid #d2d2d5;
}

/* --- 文字色 --- */
.red{
	color: #F90017;
}
.pink{
	color: #FA0082;
}
.white{
	color: #ffffff;
}
.ebicha{
	color: #7c3f4d;
}
.green{
	color:#00A67B;
}
.b-none{
 font-weight:bold;
}
.b120{
 font-size:120%;
 font-weight:bold;
}
/* --- 文字サイズ --- */
.fs75{
	font-size:75%;
}
.fs85{
	font-size: 85%;
}
.fs90{
	font-size: 90%;
}
.fontsize150{
	font-size:150%;
}
.fontsize125{
	font-size:125%;
}
.fontsize110{
	font-size:110%;
}
/*フォントの種類*/
.marugo{
	font-family: "ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO",Meiryo,sans-serif;
}
.fw-normal{
                                font-weight:normal;
}


/* --- フォームのデザイン --- */
input {
    vertical-align : middle;
}
input, textarea{
	overflow: hidden;
	margin: 8px 0;
	text-align: left;
	font-size:90%;
	padding:2px;
	box-sizing:border-box;
                                -moz-box-sizing:border-box; /* Firefox */
                                -webkit-box-sizing:border-box; /* Chrome, Safari */
}
input:focus{
	box-shadow: 0px 0px 5px 2px #ccccee;
}
select{
	font-size:90%;
	padding:3px 5px 3px 3px;
	border: 1px solid #999;
	background: #eee;
	background-size: 20px, 100%;
}
input.btn { 
	padding: 2px 10px;
	margin:0 3px;
	border:1px solid #348b7e;
	font-size:90%;
}

/*水平線のデザイン*/
.hr-pgray{
	height: 4px;
	background-color: #DBE0D7;
	border: none;
	color: #DBE0D7;
}
.hr-gray{
	height: 1px;
	background-color: #d3d6d1;
	border: none;
	color: #DBE0D7;
}


/*ボックスデザイン*/
.box_line{
	border:1px solid #666666;
	padding:10px;
	margin-bottom:15px;
                                overflow:hidden;
}
.box_line2{
	border:1px solid #c0c6c9;
	padding:10px;
	margin-bottom:15px;
                                overflow:hidden;
}
.box_line_r{
	border:1px solid #666666;
	padding:10px;
                                border-radius:7px;
                                overflow:hidden;
}


/* --- 空きとかレイアウト --- */
.float-left{
	float: left;
}
.float-right{
	float: right;
}
.font-left{
	text-align: left;
}
.font-right{
	text-align: right;
}

.img_right{
	float: right;
	margin-left: 15px;
}
.img_left{
	float: left;
	margin-right: 15px;
}
.center{
	text-align:center;
}
.top{
	vertical-align:top;
}
.middle{
	vertical-align : middle;
}
.inlineleft{
	display: inline-block;
}

.rightbox{
	text-align:right;
	padding:20px 0 5px;
}

.mar_center{
	margin:5px auto 5px;
}

.mar_t20{
	margin-top:20px;
}
.mar_tb15{
                                margin-top:15px;
	margin-bottom:15px;
}
.mar_t10{
	margin-top:10px;
}
.mar_l10{
	margin-left:10px;
}
.mar_l20{
	margin-left:20px;
}
.mar_r10{
	margin-right:10px;
}
.mar_r20{
	margin-right:20px;
}
.mar_tb3{
	margin-top:3px;
	margin-bottom:3px;
}
.mar_b10{
	margin-bottom:10px;
}
.mar_b20{
	margin-bottom:20px;
}
.mar_b30{
	margin-bottom:20px;
}
.col3{
	width:33%;
	display:inline-block;
}


/* --- アイコンデザイン --- */
.i_pink{
	padding: 5px 10px;
	background:#fa0082;
	color: #fff;
	font-size:80%;
	border-radius: 0.2em;
	max-width:150px;
}
.i_pink a{
	color: #fff;
}
.i_blue{
	padding: 5px 10px;
	background:#4791c4;
	color: #fff;
	font-size:80%;
	border-radius: 0.2em;
}
.i_blue2{
	padding: 3px 8px;
	margin:0 0.2em;
	background:#4791c4;
	color: #fff;
	font-size:72%;
	border-radius: 0.1em;
}
.i_green{
	padding: 5px 10px;
	background:#45a828;
	color: #ffffff;
	font-size:80%;
	border-radius: 0.2em;
}
.i_green2{
	padding: 5px 15px;
	background:#187a02;
	color: #fff;
	font-size:90%;
	border-radius: 0.2em;
}
.i_green a,
.i_green2 a{
	color: #ffffff;
}
.i_gray{
	padding: 5px;
	background:#666;
	color: #fff;
	font-size:80%;
	border-radius: 0.2em;
}
.i_gray a{
	color: #fff;
}
.i_azuki{
	padding: 5px 10px;
	background:#9d6f79;
	color: #fff;
	font-size:80%;
	border-radius: 0.2em;
}
.i_azuki{
	padding: 5px 10px;
	background:#9d6f79;
	color: #fff;
	font-size:80%;
	border-radius: 0.2em;
}
.i_beni{
	padding: 5px 10px;
	background:#fb7558;
	color: #fff;
	font-size:80%;
	border-radius: 0.2em;
}
.i_orange{
	padding: 5px 10px;
	background:#f79f24;
	color: #fff;
	font-size:80%;
	border-radius: 0.2em;
}


/* --- 横並びの配置 --- */
.col2{
	width:49%;
}

.display-sp,
.display-sp-inline {
  display: none;
}

.display-pc {
  display: block;
}

.display-pc-inline {
  display: inline;
}

/*改行*/
.br-sp {
    display:none;
  }

article, aside, figure, footer, header, hgroup, nav, section {
  display: block;
}

/*表*/
.nowrap {
                                white-space:nowrap;
}

table.list{
	border-top:1px solid #717e79;
	border-left:1px solid #717e79;
	border-collapse:collapse;
	border-spacing:0;
	background-color:#ffffff;
	empty-cells:show;
}
.list th{
	border-right:1px solid #717e79;
	border-bottom:1px solid #717e79;
	font-size:15px;
	background-color:#feec99;
	background-position:left top;
	padding:0.3em 1em;
                                font-weight: bold;
}
.list th .nowrap{
	white-space:nowrap;
}
.list th.bg-gray {
	background: #666;
	color:#fff;
  }
.list th.left{
	text-align:left;
}
.list td{
	border-right:1px solid #717e79;
	border-bottom:1px solid #717e79;
	padding:0.3em 1em;
	text-align:left;
}

.list td.center{
	border-right:1px solid #717e79;
	border-bottom:1px solid #717e79;
	padding:0.3em 1em;
	text-align:center;
}


/*  フォームのデザイン   */
input, textarea{
	overflow: hidden;
	margin: 8px 0;
	text-align: left;
	font-size:100%;
	padding:2px 4px;
	box-sizing:border-box;
                                -moz-box-sizing:border-box; /* Firefox */
                                -webkit-box-sizing:border-box; /* Chrome, Safari */
}

input:focus{
	box-shadow: 0px 0px 5px 2px #ccccee;
}

select{
	font-size:90%;
	padding:3px 23px 3px 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
	background: #eee;
	background: url(../img/icon/down.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#dcdcdc 100%);
	background: url(../img/icon/down.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%,#dcdcdc 100%);
	background-size: 20px, 100%;
}

/*  フォームボタン類のデザイン   */

input.btn_bluegreen,
input.btn_bluegreen_s{
                                margin:0.5rem 2px 0;
	background: #009fa8;
	color: #fff;
                                border: #009fa8;
                                border-radius:0px;
                                cursor: pointer;
                                text-align:center;
}
input.btn_bluegreen:hover{
	background: #1cafaf;
	border:1px solid #1cafaf;
}
input.btn_bluegreen{
                                min-width:245px;
	padding: 0.5rem 1rem;
                                font-size:120%;
}
input.btn_bluegreen_s{
	padding: 0.3rem 1rem;
                                font-size:90%;
}
input.btn_white,
input.btn_white_s{
	padding: 7px 15px;
	background: linear-gradient(#ffffff, #aed8d8);
	border:1px solid #9fbcbb;
	color: #4d4d4d;
                                border-radius:4px;
                                cursor: pointer;
}
input.btn_white_s{
                                width:fit-content;
                                margin:0 auto;
}
input.btn_white:hover{
	background: linear-gradient(#ffffff, #cbe6e6);
	border:1px solid #c3d9d9;
}
input.btn_ebicha{
	padding: 2px 10px;
	background: #7c3f4d;
	border:1px solid #753644;
	color: #fff;
                                border-radius:5px;
                                cursor: pointer;
}
input.btn_ebicha:hover{
	background: #944b5c;
	border:1px solid #7c3f4d;
}
input.btn_orange{
	padding: 5px 15px 5px 35px;
	background:  #f78e1e url(../img/icon/arrow-maru.png) left center no-repeat;
	color: #fff;
	border:1px solid #f78e1e;
}
input.btn_orange:hover{
	padding: 5px 15px 5px 35px;
	background: #ff9d45 url(../img/icon/arrow-maru.png) left center no-repeat;
	color: #fff;
	border:1px solid #ff9d45;
}

input.btn_gray{
	padding: 2px 10px;
	background: linear-gradient(#E0E0E0, #C6CCCC);
	color: #333;
	border:1px solid #BABFBF;
}
input.btn_gray:hover{
	padding: 2px 10px;
	background: linear-gradient(#F2F2F2, #DDDDDD);
	color: #333;
	border:1px solid #E0E0E0;
}
input.btn_waku{
	padding: 7px 15px;
                                margin:2px;
	background: #fff;
	color: #0066cc;;
                                font-size:110%;
                                border:solid #dfecf0 4px;
                                border-radius:4px;
                                cursor: pointer;
}
input.btn_waku:hover{
	background: #dfecf0;
	color: #4a8798;
}

/*  アイコン・ボタンのデザイン  */
.i_white{
	border:solid 1px #BFC4BC;
	padding:5px 10px;
	background:#fff;
}
.i_white a{
	display:block;
	text-decoration:none;
}
.i_yellow{
	padding: 5px;
	background:#e6b422;
	color: #fff;
	font-size:80%;
	border-radius: 0.2em;
}
.i_yellow a{
	color: #fff;
}
.i_red{
	padding: 5px;
	background:#eb6238;
	color: #fff;
	font-size:80%;
	border-radius: 0.2em;
}
.i_red a{
	color: #fff;
}

/* リストのデザイン */
ul.list-pdf li{
                                padding-left:27px;
                                line-height:2.0;
                                background:url(../img/icon/s_pdf.png)0 5px no-repeat;
                                border-bottom:#dcdcdc 1px solid;
                                text-align:left;
}



/* ページTOPに戻る */
.pagetop a{
    position: fixed;
    right:20px;
    bottom:15px;
    transition: 1s;
    font-size: 0;
    width: 60px;
    height: 60px;
    text-align: center;
    background: #888;
    border-radius: 50%;
    line-height: 60px;
    opacity: 0.75;
}
.pagetop a i{
    font-size: 18px;
    color:#fff;
    line-height: 60px;
}
.pagetop a :hover{ 
    opacity: 0.50;
}

@media screen and (min-width: 569px) and (max-width: 980px)  {
.display-pc {
    display:none;
  }
 
.display-sp {
    display:block;
  }

.br-sp {
    display:block;
  }

.br-pc {
    display:none;
  }

table.list {
    width: 99%;
  }
.list .thead {
	display: none;
  }
.list tr {
	width: 100%;
  }
.list th {
	display: block;
  }
.list td {
	display: block;
	text-align: left;
  }
.list td .alignleft {
	text-align: left;
  }
.list td:first-child {
	background: #666;
	color:#fff;
	text-align: center;
}
.list td:before {
	content: attr(data-label1);
	float: left;
	max-width:40%;
	font-weight: bold;
	margin-right: 10px;
  }

}

@media screen and (max-width: 568px) {
.display-pc,
  .display-pc-inline {
    display: none;
  }

.display-pc {
    display:none;
  }
 
.display-sp {
    display:block;
  }

.br-sp {
    display:block;
  }

.br-pc {
    display:none;
  }

/* --- 横並びの配置 --- */
.sp-col1{
	width:98%;
}
/* --- テーブル --- */
table.list {
    width: 99%;
  }
.list .thead {
	display: none;
  }
.list tr {
	width: 99%;
  }
.list th {
	display: block;
  }
.list td {
	display: block;
	text-align: left;
  }
.list td .alignleft {
	text-align: left;
  }
.list td:first-child {
	background: #666;
	color:#fff;
	text-align: center;
}
.list td:before {
	content: attr(data-label1);
	float: left;
	max-width:40%;
	font-weight: bold;
	margin-right: 10px;
  }

}