@charset "utf-8";


/*btn*/
.btn_area{
	display: flex;
	flex-wrap: wrap;
	margin: 30px -5px -5px;
	justify-content: center;
}
.el_btn_m,
.el_btn_l{
	display:inline-flex;
	align-items: center;
	position:relative;
	margin: 5px;
	min-height: 48px;
	font-weight:bold;
	border-radius: 5px;
	line-height: 1.5;
	text-align: center;
	box-shadow: 1px 1px 5px rgba(0,0,0,.3);
}
.el_btn_m{
	padding: 8px 40px 8px 15px;
}
.el_btn_l{
	font-size: 20px;
	padding: 15px 60px 15px 30px;
}
.el_btn_m::after,
.el_btn_l::after{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	margin:auto 0;
	width: 10px;
	height: 10px;
	border-top: 3px solid;
	border-right: 3px solid;
	transform:rotate(45deg);
}
.el_btn_m::after{
	right: 15px;
}
.el_btn_l::after{
	right: 30px;
}
.el_btn_m img,
.el_btn_l img{
	margin-right: .5em;
}
.el_btn_m.col_main,
.el_btn_l.col_main{
	color: #fff;
	background: #2a9056;
}
.el_btn_m.col_accent,
.el_btn_l.col_accent{
	color: #fff;
	background: #eb5d15;
}
.btn_area > [href^="#"]::after{
	transform: rotate(135deg);
}


/* contents
----------------------------------------------------------------------*/
#contents{
	padding:16px 16px 64px;
	overflow:hidden;
}
.layout{
	max-width: 1000px;
	margin: 0 auto;
}

/* mv
----------------------------------------------------------------------*/
.mv{
	margin: 10px auto 20px;
}
.mv_ttl{
	position: relative;
	padding: 20px 62px 20px 20px;
	color: #59b201;
	font-size: 28px;
	font-weight: bold;
	border: 4px solid #59b201;
}
.mv_ttl::before,
.mv_ttl::after{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-right: 32px solid transparent;
	border-left: 32px solid transparent;
	transform: rotate(45deg);
}
.mv_ttl::before{
	top: 14px;
	right: -2px;
	border-top: 32px solid #59b201;
}
.mv_ttl::after{
	top: -9px;
	right: -25px;
	border-bottom: 32px solid #fff;
}

/* list_contents
----------------------------------------------------------------------*/
.list_contents_wrap{
	margin-top: 20px;
	padding: 20px;
	background: #DFF3DF;
	border-radius: 10px;
}
.list_contents_ttl{
	padding: 10px;
	margin-bottom: 20px;
	font-size: 22px;
	font-weight: bold;
	background: #fff;
	border-radius: 10px;
}
.list_contents{
	counter-reset: list_contents;
}
.list_contents > li{
	position: relative;
	padding-left: 20px;
}
.list_contents > li::before{
	content: counter(list_contents);
	counter-increment: list_contents;
	position: absolute;
	top: 0;
	left: 0;
	font-weight: bold;
}
.list_contents li{
	margin-top: 8px;
}
.list_contents > li:first-child{
	margin-top: 0;
}

/* main
----------------------------------------------------------------------*/
.sec_ttl{
	padding: 20px 0;
	margin: 60px auto 20px;
	border-top: 2px solid #59b201;
	border-bottom: 2px solid #59b201;
	color: #59b201;
	font-size: 22px;
	font-weight: bold;
}
.sec_subttl{
	font-size: 22px;
	font-weight: bold;
}
.icon_ch{
	position:relative;
	margin-left:2em;
	margin-bottom:.5em;
	padding:0 .75em 0 .25em;
	display:inline-block;
	border-bottom:1px solid #2a9056;
}

.icon_ch:before{
	position:absolute;
	top:.15em;
	left:-2em;
	content: '';
	width: 30px;
	height: 15px;
	border-left: 4px solid #2a9056;
	border-bottom: 4px solid #2a9056;
	transform: rotate(-45deg);
}

.sec_ttl_bd-left {
	padding:15px 0 15px 15px;
	margin:30px auto 20px;
	border-left:5px solid #59b201;
	color:#59b201;
	font-size:22px;
	font-weight:bold;
}
.sec_item + .sec_item{
	margin-top: 50px;
}

/*categoryList*/
.categoryList_area {
	margin: 0 auto 80px auto;
	padding: 32px 16px;
	width: 100%;
	background: #DFF3DF;
	border-radius: 5px;
}
.categoryList_area > p {
	margin-bottom: 20px;
	color: #59b201;
	line-height: 1.5;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
}
.categoryList li{
	display:inline-block;
	margin: 0 8px 8px 0;
	padding: 4px 6px;
	background:#fff;
	border: 2px solid #59b201;
	border-radius: 5px;
	color:#59b201;
	word-break:keep-all;
	cursor:pointer;
}
.categoryList li.active {
	background: #59b201;
	color: #fff;
}

/*txt_area*/
.txt_area > p + p{
	margin-top: 1em;
}

/*list_disc*/
.list_disc > li{
	position: relative;
	padding-left: 12px;
}
.list_disc > li::before{
	content: "";
	position: absolute;
	top: 11px;
	left: 0;
	width: 4px;
	height: 4px;
	background: #000;
	border-radius: 50%;
}

/*media*/
.media_item + .media_item{
	margin-top: 30px;
}

/*card*/
.card_wrap > .card + .card{
	margin-top: 30px;
}
.card{
	position: relative;
	padding: 20px;
	margin: 0 auto;
	background: #fff;
	border-radius: 5px;
	color: #252525;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .3);
	overflow: hidden;
}
.col3 > .card_img{
	max-width: 313px;
	margin: 0 auto;
}
.card_img a{
	display: block;
	padding: 15px;
	margin: -20px;
	text-decoration: none!important;
}
.card_img .img_box{
	margin: -15px -15px 0;
}
.card_ttl{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
	vertical-align: middle;
}
.card_ttl a{
	text-decoration: none!important;
}
.card_img .card_ttl{
	margin: 15px 0;
}
.card_link{
	display: inline-block;
}
.card_link::before{
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.card_ttl img{
	margin-right: 8px;
	vertical-align: middle;
}

/*problem*/
.problem_item.card{
	padding: 0;
	background: #fff2cf;
}
.problem_item_before,
.problem_item_after{
	padding: 20px;
}
.problem_item_before{
	position: relative;
	padding-bottom: 30px;
	border-radius: 5px 5px 0 0;
	background: #eee;
}
.problem_item_label{
	padding: 2px 8px;
	margin-bottom: 20px;
	border-radius: 5px;
	color: #fff;
	font-size: 22px;
	text-align: center;
}
.problem_item_before .problem_item_label{
	background: #0E4291;
}
.problem_item_before::after{
	content: "";
	position: absolute;
	bottom: -12px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 0;
	height: 0;
	border: 24px solid transparent;
	border-bottom: 0;
	border-top: 24px solid #333;
	
}
.problem_item_after{
	padding-top: 30px;
}

.problem_item_after .problem_item_label{
	background: #D21B37;
}
.problem_item_after .txt_area{
	margin-top: 20px;
}

/*flow*/
.flow_wrap {
	counter-reset:number;
	list-style-type: none!important;
}
.flow_wrap .flow {
	padding: 5px 10px 30px 40px;
	line-height: 1.5em;
	position: relative;
}
.flow_wrap .flow:before{
	position: absolute;
	counter-increment: number;
	content: counter(number);
	display:inline-block;
	width:30px;
	height:30px;
	background:rgba(35,101,133,.6);
	border-radius: 50%;
	color:#fff;
	font-size:18px;
	font-weight:bold;
	line-height:32px;
	text-align: center;
	left: 0;
	top:2px;
}
/* el_label*/
.tag_area{
	display: inline-flex;
	flex-wrap: wrap;
	margin: -5px;
}
.el_label{
	font-size: 14px;
	padding: 6px;
	margin: 5px;
	border-radius: 5px;
	line-height: 1;
}
.el_label.col_main{
	color: #fff;
	background: #59b201;
}

/*table*/
table{
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
}
th, td, tr{
	display: block;
}
th, td{
	padding:20px 15px;
	text-align: left;
}
thead{
	display: none;
}
tbody{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: -15px;
}
tbody tr{
	margin-top: 15px;
}
tbody .table_hl{
	order: 4;
}
tbody th, tbody td{
	border:.20px solid #ccc;
	margin-bottom: -2px;
}
tbody .table_hl th,
tbody .table_hl td{
	background:#DEF7E0;
}
tbody th{
	font-weight: bold;
	vertical-align: middle;
	background: #eee;
	text-align: center;
}
tbody .table_hl th{
	color: #fff;
	background: #80E289;
}
tbody .table_hl td > span{
	font-size: 20px;
}
tbody th img{
	max-height: 30px;
}
table td[data-label]::before{
	content: attr(data-label) "：";
	display: block;
	font-weight: bold;
}
.table_wrap table th:not([data-label]) + [data-label]:nth-child(2):last-child::before{
	content: attr(data-label);
	display: block;
	background: #14E828;
	border-bottom: 1px solid #ccc;
	margin: -4px -8px 4px;
	padding: 4px 8px;
}
.table_price_wrap{
	padding-top: 30px;
}
.table_price{
	position: relative;
}
.table_price::before{
	content: "（税込）";
	position: absolute;
	top: -30px;
	right: 0;
}


/*flex_txt_area*/
.flex_txt_area{
	display:block;
}
.flex_txt_area .f_column,
.flex_txt_area .img_column{
	padding-top:16px;
	margin-right:.75em;
}
.flex_txt_area .f_column img{
	max-width:100%;
}
.flex_txt_area .f_column,
.flex_txt_area .s_column,
.flex_txt_area .img_column,
.flex_txt_area .txt_column{
	width:100%;
}


/*column_dl dl dd dt*/

.column_dl{

	border:2px solid #2a9056;
	border-radius: 10px;
	padding:0px 18px 18px;

}

.column_dl dl{

	margin-top:18px;


}

.column_dl dl dt{
	margin-right: 21px;
	font-size: 20px;
	font-weight:bold;
	color: #2a9056;
}
.column_dl dl dd{
	line-height:1.5em;
	margin-bottom:12px;
}
/* Footer
----------------------------------------------------------------------*/
#footer{
	position:relative;
	line-height:1.2;
	background:#333;
}
#footer a{
	color:#fff;
	text-decoration:none;
}
#f_wrap{
	padding-top:24px;
	overflow:hidden;
}
.f_link_box{
	margin-bottom:24px;
	overflow:hidden;
}
.f_link_head{
	margin-left:16px;
	font-size:14px;
}
.f_link_head .marker_triangle_circle:before{
	top:6px;
}
.f_link_head .marker_triangle_circle:after{
	top:4px;
}
.f_link{
	font-size:12px;
}
.f_link li{
	float:left;
	margin:16px 0 0 16px;
}

.f_mark{
	float:right;
	margin:0 16px 16px 0;
}
.f_mark li{
	display:inline-block;
	vertical-align:bottom;
}
.f_mark li:not(:first-child){
	margin-left:4px;
}
.f_mark li a{
	display:block;
	height:50px;
	padding:2px;
	background:#fff;
	border-radius:5px;
}
.isms img{
	width:65px;
}
.privacymark a{
	width:50px;
}

#copyright{
	clear:both;
	height:50px;
	line-height:50px;
	text-align:center;
	background:#347798;
	color:#fff;
	font-size:12px;
}

/* btnTop
----------------------------------------------------------------------*/
#btnTop{
	position:fixed;
	right:10px;
	bottom:10px;
	z-index:9999;
}
#btnTop a{
	display:block;
	position:relative;
	width:50px;
	height:50px;
	background:rgba(0,0,0,.7);
	border-radius:50%;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
#btnTop a:after{
    display:block;
    position:absolute;
    top:8px;
    right:0;
	bottom:0;
	left:0;
    width:18px;
    height:18px;
	margin:auto;
    border-top:solid 2px #fff;
    border-right:solid 2px #fff;
	-webkit-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
			transform:rotate(-45deg);
    content:"";
}

/* Utility
***********************************************************************/
.u-ta-c{
    text-align:center !important;
}
.u-ta-r{
    text-align:right;
}
.u-ta-l{
    text-align:left;
}
.u-fw-b{
    font-weight:bold;
}
.u-fs-1_5em{
	font-size: 1.5em;
	line-height: 1.5;
}
.u-fs-1_75em{
	font-size: 1.75em;
	line-height: 1.5;
}
.u-fs-0_75em{
	font-size: .75em;
	line-height: 1.5;
}
.u-fs-0_5em{
	font-size: .5em;
	line-height: 1.5;
}
.u-txt_markbl {
	background:#aeedf4;
	background:-webkit-linear-gradient(top, transparent 50%, #aeedf4 50%);
	background-image:linear-gradient(to bottom, transparent 50%, #aeedf4 50%) ;
}
.u-txt_bg {
	display:inline-block;
	margin:0.5em;
	padding:0.5em;
	border-radius:10px;
}
.u-txt_bg.gray {
	background:#ddd;
}
.u-txt_bg.blue {
	background:rgba(223,239,243,.6);
}
.u-txt_bg.pink {
	background:#F7D5DB;
}
.u-border-gray {
	border:1px solid #ddd;
}
.u-mt-8{
	margin-top:8px;
}

.u-mt-32{
	margin-top:32px;
}
.u-mt-64{
	margin-top:64px;
}
.u-mb-32{
	margin-bottom:32px;
}
.sp-none{
	display:none;
}
.inlineBlock {
	display: inline-block;
}
/* jQuery
***********************************************************************/
.js-fixed{
	position:fixed;
	width:100%;
	height:100%;
}

/*=====================================================================
   PC start
======================================================================*/
@media screen and ( min-width:769px ){
/* Foundation
***********************************************************************/
body{
	min-width:1030px;
}
a:hover{
	text-decoration:none;
}

/* Object
***********************************************************************/
/* input
----------------------------------------------------------------------*/
input[type="submit"],
input[type="button"],
input[type="search"],
select{
	-moz-appearance:none;
	-webkit-appearance:none;
}
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="search"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="number"],
textarea{
	-moz-appearance:none;
	-webkit-appearance:none;
	max-width:100%;
	height:31px;
	margin:4px 0;
	padding:0 8px;
	background:#fff;
	border:1px solid #ccc;
	border-radius:3px;
	box-sizing:border-box;
}
textarea{
	line-height:1.3;
	height:auto;
	padding:4px 8px;
}
/* marker
----------------------------------------------------------------------*/
.marker_triangle,
.marker_triangle_circle{
	position:relative;
	z-index:0;
	padding-left:17px;
}
.marker_triangle:before,
.marker_triangle_circle:before,
.marker_triangle_circle:after{
    position:absolute;
    content:"";
}
.marker_triangle:before,
.marker_triangle_circle:before{
    left:4px;
    border:solid transparent;
	border-top-width:3px;
	border-right-width:4px;
	border-bottom-width:3px;
	border-left-width:4px;
}
.marker_triangle:before{
    top:5px;
    border-left-color:#fff;
}
.marker_triangle_circle:before{
	top:7px;
	z-index:1;
    border-left-color:#333;
}
.marker_triangle_circle:after{
	top:5px;
    left:0;
	z-index:0;
	width:11px;
	height:11px;
	background:#fff;
	border-radius:100%;
}

.marker_disc{
	padding-left:21px;
}
.marker_disc:before{
	position:absolute;
	top:6px;
	left:3px;
	height:8px;
	width:8px;
	background:#5ab303;
	border-radius:50%;
	content:"";
}

/* notes
----------------------------------------------------------------------*/
.notes{
	padding-left:22px;
	text-indent:-22px;
}
.notes_num{
	padding-left:26px;
	text-indent:-26px;
}
.notes_txt{
	padding-left:33px;
	text-indent:-33px;
}
span.notes,
span.notes_num,
span.notes_txt{
	display:inline-block;
}

.app_banner_area .notes_txt{
	max-width:280px;
	margin:auto;
	margin-top:12px;
	padding:0 0 0 2px;
	font-size:12px;
	font-weight:normal;
	color:#666;
	text-indent:-10px;
}


/* breadcrumb
----------------------------------------------------------------------*/
.breadcrumb_wrap{
	padding-top:8px;
}

/* main
----------------------------------------------------------------------*/
/*categoryList*/
.categoryList_area {
	padding: 32px;
	max-width: 800px;
}
.categoryList li{
	transition:  background .3s, color .3s;
}
.categoryList li:hover{
	background:#59b201;
	color:#fff;
}

/*media*/
.media,
.media_rev{
	display: flex;
}
.media_rev{
	flex-direction: row-reverse;
}
.media_item:not(.img_box){
	flex: 1;
}
.media_item + .media_item{
	margin-top: 0;
}
.media > .media_item + .media_item,
.media_rev > .media_item:first-child{
	margin-left: 30px;
}

/*card*/
.card_wrap{
	display: flex;
	flex-wrap: wrap;
	margin: -15px;
}
.card_wrap.col3 > .card{
	width: calc(33.3% - 30px);
}
.card_wrap > .card,
.card_wrap > .card + .card{
	margin: 15px;
}
.card_wrap > .card{
	display: flex;
	flex-direction: column;
}
.card_wrap.col2 > .card{
	width: calc(50% - 15px);
}
.card_wrap .card.media{
	flex-direction: row;
}
.card > .txt_area{
	margin-bottom: auto;
}
.card .btn_area:last-child{
	margin-top: auto;
	padding-top: 10px;
}

/*problem*/
.problem{
	padding-top: 45px;
}
.problem_item_after .img_box{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 120px;
}

/*table*/
table{
	display: table;
	max-width: 100%;
}
th, td{
	display: table-cell;
	text-align: center;
}
tr{
	display: table-row;
}
thead{
	display: table-header-group;
}
thead th{
	padding: 8px 15px;
	font-size: 20px;
	border-top:2px solid #ccc;
	border-left:2px solid #ccc;
	border-right:2px solid #ccc;
}
thead th:nth-of-type(2n){
	background: #BAE6BE;
}
thead th:nth-of-type(3n){
	background: #A2E8A9;
}
tbody{
	display: table-row-group;
}
tbody th{
	min-width: 120px;
}
tbody .table_hl td > span{
	font-size: 24px;
}
tbody :not(.table_hl) td > span{
	font-size: 19px;
}
table td[data-label]::before{
	content: "";
}

td[data-label]{
	background: #fff;
}
.table_wrap table [data-label]::before,
.table_wrap table th:not([data-label]) + [data-label]:nth-child(2):last-child::before{
	content: none;
}


/*flex_txt_area*/
.flex_txt_area{
	display:flex;
	align-items:flex-start;
	justify-content:space-between
}
.flex_txt_area .f_column{
	width:25%;
}
.flex_txt_area .s_column{
	width:75%;
}
.flex_txt_area .img_column{
	width:40%;
}
.flex_txt_area .txt_column{
	width:60%;
}
/* Footer
----------------------------------------------------------------------*/
.hover #footer a:hover{
	opacity:.7;
}
#f_wrap{
	width:1000px;
	margin:auto;
	padding:32px 0 16px;
}
.f_link_box{
	float:left;
	width:200px;
}
.f_link_head{
	font-size:16px;
}
.f_link_head .marker_triangle_circle:before{
	top:7px;
}
.f_link_head .marker_triangle_circle:after{
	top:5px;
}
.f_link li{
	float:none;
}

.f_link_box.single,
.f_link_box.single .f_link{
	width:100%;
	overflow:hidden;
}
.f_link_box.single .f_link li{
	float:left;
}

.f_mark{
	position:absolute;
	right:0;
	bottom:74px;
}
.f_mark li a,
.isms img,
.privacymark a{
	width:auto;
	height:auto;
}

/* Utility
***********************************************************************/
.sp-none{
	display:block;
}
.pc-none{
	display:none;
}
.pc_u-ta-r{
	text-align:right;
}

/*=====================================================================
   PC end
======================================================================*/
}