@charset "utf-8";


.c-header-box h2 {
	font-size: 28px;
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.5;
}
.c-header-box p {
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1;
}

.topicpath {
	margin-bottom: 32px;
	font-size: 12px;
	font-size: 1.2rem;
}
.topicpath a {margin-right: 8px;}
.topicpath a:after {
	display: inline-block;
	content: "\003e";
	margin-left: 8px;
}

.cm-heading {
	position: relative;
	margin-bottom: 40px;
	padding-bottom: 16px;
	text-align: center;
}
.cm-heading:after {
	position: absolute;
	content: "";
	width: 64px;
	height: 4px;
	bottom: 0;
	left: 50%;
	margin-left: -32px;
	background: #e6d625;
}
.cm-heading h3 {
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1;
	color: #222;
}
.cm-heading p {
	margin-top: 8px;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
	color: #6ed07c;
	line-height: 1;
}

/*table.cm-TB {
	width: 100%;
	margin: 1.5em 0;
	background: #FFF;
	border: 1px solid #e3e0bc;
	border-collapse: collapse;
}
table.cm-TB th,
table.cm-TB td {padding: 0.75em 1.25em;}
table.cm-TB th {
	background: #FFFCE8;
	white-space: nowrap;
	font-weight: bold;
	text-align: right;
}*/

.cm-list {margin: 1.5em 0;}
.cm-list li {
	position: relative;
	margin: 0 0 .25em 0;
}
.cm-list li:before {
	display: inline-block;
	content: "\0025cf";
	color: #00a569;
}

p {
	padding-bottom:20px;
}


@media screen and (max-width:767px) {
	.c-header-box h2 {
		font-size: 24px;
		font-size: 2.4rem;
	}
	.topicpath {display: none;}
	
	table.cm-TB th,
	table.cm-TB td {
		width: 100%;
		display: block;
		padding: 12px 16px;
	}
	table.cm-TB th {
		text-align: center;
		border-bottom: 1px solid #e3e0bc;
	}
	table.cm-TB tr:not(:last-child) td {border-bottom: 1px solid #e3e0bc;}
}

@media screen and (min-width:768px) {
	table.cm-TB th,
	table.cm-TB td {border: 1px solid #e3e0bc;}
}




.first-mv {position: relative;}
.first-mv-box {font-weight: bold;}

.first-mv h2 {
	margin-bottom: 16px;
	font-size: 32px;
	font-size: 3.2rem;
	font-weight: bold; 
	color: #00a569;
	line-height: 1;
}
.first-mv p {
	position: relative;
	display: inline-block;
	padding-top: 16px;
	font-size: 15px;
	font-size: 1.5rem;
}
.first-mv p:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	left: 0;
	top: 0;
	background: #00a569 ;
}

.first-heading {
	position: relative;
	margin-bottom: 40px;
	padding-bottom: 16px;
}
.first-heading:after {
	/*position: absolute;
	content: "";
	width: 100px;
	height: 4px;
	bottom: 0;
	left: 50%;
	margin-left: -32px;
	background: #8b008b;*/
}
.first-heading h3 {
	/*font-size: 32px;
	font-size: 3.2rem;*/
	font-weight: bold;
/*	line-height: 1.3;
	color: #222;
*/}
.first-heading h3 em {color: #00a569;}
.first-heading h3 i {
	font-size: 56px;
	font-size: 5.6rem;
}
.first-heading p {
	margin-top: 4px;
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	color: #6ed07c;
	line-height: 1;
}



.first-point-item {position: relative;}
.first-point-item:first-child:after {background-image: url(../img/first-point01.png);}
.first-point-item:nth-child(2):after {background-image: url(../img/first-point02.png);}
.first-point-item:nth-child(3):after {background-image: url(../img/first-point03.png);}
.first-point-item:after {
	position: absolute;
	content: "";
	width: 64px;
	height: 64px;
	top: -12px;
	left: 8px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 64px;
}
.first-point-item .thumb {text-align: center;}

.first-point-item p {
	font-size: 14px;
	font-size: 1.4rem;
}

.first-details {
/*	background: url(../img/bg-first-sec02.jpg) no-repeat center;
*/	background-size: cover;
}
.first-details-box {background: rgba(255,255,255,.85);}
.first-details-list {text-align: center;}
.first-details-list li {
	padding: 24px 12px;
	background: #FFF;
	border: 2px solid #80c269;
}

.first-details-list li p {
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.5;
}

.first-howto {background: #fffded;}
.first-howto-step_item {
	padding: 16px 24px 24px;
	background: #FFF;
}


.first-howto-step_item .thumb {
	margin: 16px 0 8px;
	text-align: center;
}
.first-howto-step_item .thumb img {
	width: auto;
	height: 144px;
}
.first-howto-step_item p {
	font-size: 13px;
	font-size: 1.3rem;
}
.first-howto-flow {
	padding: 32px 40px;
	border: 1px solid #e3e0bc;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	background: #FFF;
	text-align: center;
}
.first-howto-flow p + p {margin-top: 16px;}
.first-howto table,
.first-comparison table {
	width: 100%;
	background: #FFF;
	border: 1px solid #e3e0bc;
	border-collapse: collapse;
}
.first-howto table th {
	background: #FAF7DE;
	font-weight: bold;
	text-align: center;
}
.first-howto table td span {
	display: block;
	margin-top: 16px;
	font-size: 13px;
	font-size: 1.3rem;
}

.first-comparison table {
	font-size: 15px;
	font-size: 1.5rem;
}
.first-comparison table th,
.first-comparison table td {
	padding: 16px;
	border: 1px solid #e3e0bc;
	vertical-align: middle;
	text-align:center;
}
.first-comparison table th {
	background:#e3e0bc;
}
.first-comparison table th,
.first-comparison table td em {font-weight: bold;}
.first-comparison table td {text-align: center;}
.first-comparison table tr.name th {
	text-align: center;
	color: #FFF;
}
.first-comparison table tr.name th:nth-of-type(2) {background: #00a569;}
.first-comparison table tr.name th:nth-of-type(3),
.first-comparison table tr.name th:nth-of-type(4) {background: #999;}
.first-comparison table tr.cm th {
	background: #FAF7DE;
	text-align: right;
}
.first-comparison table tr.cm td:nth-child(2) {background: #FFFDED;}
.first-comparison table td em:before {
	content: "\003007";
	margin-right: 4px;
	color: #FF0000;
}
.first-comparison table td span {
	font-size: 12px;
	font-size: 1.2rem;
	color: #666;
}
/* smart phone */
@media screen and (max-width:767px) {
	.first-wrapper {padding: 48px 0 0;}
	
	.first-mv {
    background: url(../images/cp_top_sp.png) no-repeat center top;
    height: 400px;
    background-size: contain;	}
	.first-mv-box {

	}
	.first-mv-box_inn {
		display: inline-block;
		width: 240px;
		padding: 24px;
		background: rgba(255,255,255,.85)
	}
	.first-mv h2 {
		font-size: 24px;
		font-size: 2.4rem;
		text-align: center;
	}
	.first-mv p {
		font-size: 12px;
		font-size: 1.2rem;
		text-align: left;
	}
	
	.first-heading h3 {
    font-size: 26px;
    font-size: 2.6rem;
	}
	.first-heading h3 i {
    font-size: 48px;
    font-size: 4.8rem;
	}
	
	.first-point {margin-bottom: 64px;}
	.first-point-item:not(:last-of-type) {margin-bottom: 40px;}
	
	.first-details {padding: 0;}
	.first-details-box {padding: 0 10px 20px;}
	.first-details-list li:not(:last-child) {margin-bottom: 16px;}
	
	.first-howto,
	.first-comparison {padding: 64px 0;}
	.first-howto-step_item:not(:last-of-type) {margin-bottom: 32px;}
	
	.first-howto-flow {
		margin: 48px 0;
		padding: 16px;
		font-size: 15px;
		font-size: 1.5rem;
	}
	.first-howto table th,
	.first-howto table td {
		width: 100%;
		display: block;
		padding: 12px 16px;
	}
	.first-howto table th {border-bottom: 1px solid #e3e0bc;}
	.first-howto table tr:not(:last-child) td {border-bottom: 1px solid #e3e0bc;}
	
	.first-comparison table {
		font-size: 14px;
		font-size: 1.4rem;
	}
	.tb-wrap {
		overflow: auto;
		
	}
	.tbl-r04 {
    width: 80%;
  } 
  .tbl-r04 .thead {
    display: none;
  }
  .tbl-r04 tr,
  .tbl-r04 td{
    display: block;
    width: 100%;
    position: relative;
  }
  .tbl-r04 td:first-child:before {
    background: #e9727e;
    box-sizing: border-box;
    color: #fff;
    font-weight: bold;
    height: 40px;
    padding: 10px;
    position: absolute;
    top: -41px;
    left: -0.2%;
    display: block;
    width: 100.5%;
  }
  .tbl-r04 tr {
    margin-bottom: 40px;
  }

}

@media screen and (min-width:768px) {
	.first-wrapper {padding: 64px 0 0;}
	
	.first-mv {
		height: 680px;
		background: url(../images/cp_top.png) no-repeat center top;
	}
	.first-mv-box {
	}
	.first-mv-box_inn {
		position: relative;
		display: block;
		top: 50%;
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
		padding-left: 360px;
	}
	
	.first-point {margin-bottom: 96px;}
	.first-point-item,
	.item_left {
		float: left;
		width:28%;
	}
	.item_right {
		float: left;
		width: 65%;
	}
}

@media screen and (min-width:768px) and (max-width:979px) {
	.first-details-list li:nth-child(even) {margin-left: 2%;}
}

@media screen and (min-width:980px) {
	.first-details-list li {width: 32%;}
	.first-details-list li:first-child,
	.first-details-list li:nth-child(2),
	.first-details-list li:nth-child(4) {margin-right: 2%;}
	
	.first-comparison table th,
	.first-comparison table td {padding: 10px 16px;}
}


.page-navi {
	margin-top: 48px;
	font-size: 12px;
	font-size: 1.2rem;
	text-align: center;	
}
.page-navi a,
.page-navi span {
	margin: 2px;
	padding: 10px 16px;
	text-decoration: none;
	border: 1px solid #70bf78;
	border-radius: 4px;
	color: #00a569;
	line-height: 1;
}
.page-navi .current,
.page-navi a:hover {
	background: #70bf78;
	color: #FFF;
}

@media screen and (max-width:767px) {
	.page-navi a,
	.page-navi span {
	margin: 1px;
	padding: 6px 8px;
	}
}




.counselor-detail-header {margin-bottom: 32px;}
.counselor-detail-header-thumb {text-align: center;}
.counselor-detail-header-thumb img {border: 1px solid #e7dec7;}

.counselor-detail-header h3 {
	position: relative;
	padding-left: 32px;
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
}
.counselor-detail.f .counselor-detail-header h3:before {background-image: url(../img/ico-female.png);}
.counselor-detail.m .counselor-detail-header h3:before {background-image: url(../img/ico-male.png);}
.counselor-detail-header h3:before {
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	left: 0;
	top: 50%;
	margin-top: -10px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 20px;
}
.counselor-detail-header h3 span {
	margin-left: 16px;
	font-size: 14px;
	font-size: 1.4rem;
}
.counselor-detail-header .catch {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dotted #e9e3dd;
	font-size: 15px;
	font-size: 1.5rem;
}
.counselor-detail-header .total {
	margin-top: 20px;
	padding: 0.5em 1em;
	background: #fff2cf;
	font-size: 15px;
	font-size: 1.5rem;
}
.counselor-detail-header .total em {font-weight: bold;}
.counselor-detail-header .tag {margin-top: 20px;}
.counselor-detail-header .tag-list li a {
	height: 32px;
	line-height: 32px;
	border-radius: 16px;
	font-size: 14px;
	font-size: 1.4rem;
}

.counselor-detail .btn-status a {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	line-height: 56px;
	font-size: 24px;
	font-size: 2.4rem;
}
.counselor-detail .btn-status a span {
	padding-left: 30px;
	background-size: 22px;
}

.counselor-detail-section {margin-top: 64px;}
.cds-tit {
	margin-bottom: 24px;
	padding: 8px 16px;
	background: #e5f1ed;
	border-left: 8px solid #00a569;
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
}
.counselor-detail-section p {
	font-size: 15px;
	font-size: 1.5rem;
}
.counselor-detail-section p + p {margin-top: 1em;}

@media screen and (max-width:767px) {
	.counselor-detail-header-thumb {margin-bottom: 24px;}
	.counselor-detail-header-thumb img {
		width: 240px;
		height: auto;
	}
}

@media screen and (min-width:768px) {
	.counselor-detail-header-thumb {
		float: left;
		width: 200px;
	}
	.counselor-detail-header-desc {
		float: right;
		width: 100%;
		margin: 0 0 0 -200px;
	}
	.counselor-detail-header-desc_inn {margin: 0 0 0 240px;}
}

@media screen and (min-width:768px) {
	.counselor-detail-header-thumb {width: 280px;}
	.counselor-detail-header-desc {margin: 0 0 0 -280px;}
	.counselor-detail-header-desc_inn {margin: 0 0 0 320px;}
}




.cm-sec {margin: 64px 0;}
.cm-subtit {
	margin-bottom: 16px;
	padding-left: 8px;
	border-left: 4px solid #00a569;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.3;
}
.cm-sec .notes {
	margin: 1.5em 0;
	padding: 16px 24px;
	background: #f0f0f0;
	border: 1px solid #e9e3dd;
}
.cm-sec > p + p {margin-top: 1em;}

@media screen and (max-width:767px) {
	.cm-sec {margin: 48px 0;}
	.cm-sec .notes {padding: 16px;}
}



.tex-bold {font-weight: bold;}
.tex-center {text-align: center;}
.tex-right {text-align: right;}
.tex-grn {color: #00a569}
.tex-pink {color: #e8687c;}
.tex-yel {color: #f3b203;}
.tex-red {color: #FF0000;}

strong {
	font-size: 1.5em;
	font-weight:bold;
}

img {
  display: block;
}

.class1 {
margin: auto;
width: 90%;  
}

.blueBox {
    margin: 2em 0;
    background: linen;
	overflow: auto;
	width: auto;
}

.blueBox .box-title {
    font-size: 1.2em;
    background: white;
    padding: 4px;
    text-align: left;
    color: navy;
    font-weight: bold;
    letter-spacing: 0.05em;
	width: auto;
}

.blueBox p {
    padding: 15px 20px;
    margin: 0;
}

.blueBox h3 {
	color:#fff;
	background:linen;
}

h3 {
  position: relative;
  padding-left: 25px;
  background: #ff8eff;
  font-size: 20px;
  color: black;
  line-height: 1.3;
}

h3:before {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 15px transparent;
  border-bottom: solid 15px rgb(119, 195, 223);
}

h3:after {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 10px;
  width: 100%;
  border-bottom: solid 3px rgb(119, 195, 223);
}

h2 {
  position: relative;
  padding-left: 25px;
  background: midnightblue;
  font-size: 20px;
  color: white;
  line-height: 1.3;
}


h4 {
  padding: 5px 5px 5px 10px;
  background: #DFBA21;
  font-size: 20px;
  color: white;
  line-height: 1.3;
}

.stepbtn {
	border-top: #F60 3px solid;
	border-bottom: #F60 3px solid;
    color: #333;
    padding: 5px;

}

a.btn-flat-border {
	display: block;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #fff;
    border: solid 1px #BE751B;
    border-radius: 3px;
    transition: .4s;
    width: 30%;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    margin: 10px auto;
    background: #ff8eff;
}


.blueBox dl {
padding: 15px 20px;
}

.goldBox {
    margin: 2em 0;
    background: #fafad2;
	overflow: auto;
	width: auto;
}

.goldBox .box-title {
    font-size: 1.2em;
    background: white;
    padding: 4px;
    text-align: left;
    color: navy;
    font-weight: bold;
    letter-spacing: 0.05em;
	width: auto;
}

.goldBox p {
    padding: 15px 20px;
    margin: 0;
}

.goldBox dl {
padding: 15px 20px;
}

.parent {
        display: flex;
      }

      .child {
        width: 403px;
      }
	  
      @media screen and (max-width: 800px) {
        .parent {
          flex-wrap: wrap;
        }
      }

      @media screen and (max-width: 400px) {
        .parent {
          display: block;
          margin: auto;
        }
      }
	  

/* dl dt */
@media screen and (max-width:767px) {

.blueBox dt {
padding-bottom: 5px;
padding-bottom: 5px;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    background: #C49F1B;
}
.blueBox dd {
	margin-left: 1%;
	margin-bottom: 1%;
	margin-top: 5%;
}

a.btn-flat-border {
	width:80%
}

.goldBox dt {
padding-bottom: 5px;
padding-bottom: 5px;
    text-align: center;
    color: black;
    font-weight: bold;
    font-size: 1.2em;
    background: #e3e548;
}
.goldBox dd {
	margin-left: 1%;
	margin-bottom: 1%;
	margin-top: 5%;
}

a.btn-flat-border {
	width:80%
}


}

@media screen and (min-width: 768px) {
.blueBox dt {
	clear: left;
	float: left;
	width: 10%;
    background: #C49F1B;
    text-align: center;
    font-weight: bold;
    padding-top: 5px;
    color: white;
    border-radius: 10px;
}
.blueBox dd {
	margin-left: 11%;
	margin-bottom: 1%;
}

.goldBox dt {
	clear: left;
	float: left;
	width: 10%;
    background: #e3e548;
    text-align: center;
    font-weight: bold;
    padding-top: 5px;
    color: black;
    border-radius: 10px;
}
.goldBox dd {
	margin-left: 11%;
	margin-bottom: 1%;
}

}