@charset "UTF-8";
/*--------------------------------------------------
**************************************************
  PC用
**************************************************
--------------------------------------------------*/
@media screen and (min-width: 768px) {
	
	#page_title{
		background: url(../images/homeplan/support_h1_bg.jpg) no-repeat center;
		background-size: cover;
	}

/* ----------------------------------------
	my_home_plan
---------------------------------------- */

	section h2 {
		font-size: 18px;
		padding: 12px 15px 10px 30px;
		position: relative;
		color: white;
		background-color: #e71e29;
		border-bottom: 3px solid #c00;
	}
	section h2::after {
		 position: absolute;
		 top: 50%;
		 left:0;
		 transform:translateY(-50%);
		 content: '';
		 width: 18px;
		 height:4px;
		 background-color:white;
	}
	.point_area .point {
		width: 24%;
		text-align: center;
		padding: 15px;
		box-sizing: border-box;
		background: #efefef;
		border-radius: 10px;
	}
	.point_area .point .number {
		font-weight: bold;
		font-size: 13px;
		letter-spacing: 0.1em;
		position: relative;
		
	}
	.point_area .point .number span {
		font-size: 20px;
		margin-left: 3px;
	}
	.point_area .point .number:after {
		position: absolute;
		content: "";
		bottom:0;
		left:0;
		right:0;
		margin:auto;
		width: 30px;
		height: 2px;
		background: #e71e29;
	}
	.point_area .point .text {
		margin-top: 10px;
		font-size: 13px;
	}
	.p_red {
		color: #e71e29;
		font-weight: bold;
	}
	.p_big {
		color: #e71e29;
		font-size: 20px;
		margin: 0 2px;
	}
	.notes {font-size: 12px;}
	
	.repayment_box {
		text-align:center;
		position: relative;
    	padding: 20px;
    	border-top: solid 2px black;
    	border-bottom: solid 2px black;
	}
	.repayment_box .title {
		font-weight: bold;
	}
	.repayment_box .btn a {
		display:inline-block;
		padding: 15px 50px;
		background:#77c920;
		color: #FFF;
		font-weight: bold;
		letter-spacing: 0.15em;
		border-radius: 6px 6px 0 0;
		box-shadow: 0 5px #5b981a;
	}
	.repayment_box .btn a:hover {
		-ms-transform: translateY(5px);
		-webkit-transform: translateY(5px);
		transform: translateY(5px);
		border-bottom: none;
		box-shadow: none;
	}
	.hp_contents table {
		width: 100%;
	}
	.hp_contents table th {
		width: 25%;
		padding: 15px;
		background: #f6dcd2;
		border: 1px solid #681e2a;
	}
	.hp_contents table td {
		padding: 15px;
		background:#fffaf8;
		border: 1px solid #9a4452;
	}
	.hp_contents table td span {
		display: block;
		margin: 5px 0;
	}
	.terms_link {
		text-align: center;
	}
	.terms_link a {
		display: inline-block;
		padding: 15px 50px;
		background: #f0f0f0;
		border-radius: 10px
	}
	.terms_link a:hover {
		background: #e71e29;
		color: #FFF;
	}
	
	.service_link .link_box {
		width: 32%;
		padding: 10px;
		border: 2px solid #e83928;
		box-sizing: border-box;
		position: relative;
		border-radius: 5px;
		align-items: center;
	}
	.service_link .link_box a {
		position: absolute;
		text-indent: -99999px;
		width:100%;
		height: 100%;
		top:0;
		left:0;
	}
	.service_link .link_box img {
		width:40%;
		height: auto;
		display: block;
		border-radius: 8px
	}
	.service_link .link_box p {
		width:58%;
		font-size: 14px;
		font-weight: bold;
	}
	.service_link .link_box a:hover {
		background:rgba(255,255,255,.25);
	}
	


/* ----------------------------------------
	internet_service
---------------------------------------- */
	.is_contents .service_list li {
		position: relative;
		padding: 10px 20px;
		border-bottom: 1px dotted #c0c0c0;
		font-size: 14px;
	}
	.is_contents .service_list li span {
		display: block;
		font-size: 12px;
		color: #666;
	}
	.is_contents .service_list li:before {
		position: absolute;
		content: '';
		display: block;
		top: 18px;
		left: 0;
		width: 5px;
		height: 5px;
		border-right: 3px solid #e71e29;
		border-bottom: 3px solid #e71e29;
		transform: rotate(-45deg);
	}
	.is_contents .flow_title {
		font-weight: bold;
		padding-bottom: 5px;
		border-bottom: 2px solid #e71e29;
	}
	.is_contents .flow_list li {
		position: relative;
		padding: 15px 30px;
		background:#ffcdd4;
		margin-bottom: 30px;
		border-radius: 50px;
		letter-spacing: .15em;
	}
	.is_contents .flow_list li:after {
		content: "";
		position: absolute;
		bottom: -20px;
		left: 50px;
		width: 0px;
		height: 0px;
		margin: auto;
		border-style: solid;
		border-color: #ffcdd4 transparent transparent transparent;
		border-width: 10px 10px 0 10px;
	}
	.is_contents .flow_list li:last-child:after {
		display: none;
	}
	.is_contents .flow_list li span {
		display: block;
		color: #c00;
		font-size: 13px;
	}
	
	.entry_btn {
		text-align: center;
		width:60%;
		margin: 40px auto;
	}
	.entry_btn a {
		background: #8ec31f;
		padding: 20px;
		display: block;
		color: #FFF;
		font-size: 20px;
		font-weight: bold;
		letter-spacing: 0.1em;
		position: relative;
		border-radius: 10px;
	}
	.entry_btn a:after {
		position: absolute;
		content:"";
		width: 80px;
		height: 2px;
		background: #FFF;
		right: 0;
		top: calc(50% - 1px);
	}
	.entry_btn a:hover {
		text-decoration: none;
		background:#76a612;
	}
	.entry_btn a:hover:after {
		right: -30px;
		transition: .5s;
	}
	
	
/* ----------------------------------------
	sample
---------------------------------------- */
	.hp_contents .sample_t {
		width: 100%;
		table-layout: fixed;
		text-align: center;
	}
	.hp_contents .sample_t th {
		vertical-align: middle;
		font-size: 13px;
		padding: 15px 2px;
	}
	.hp_contents .sample_t th.normal_th {
		width:11.5%;
	}
	.hp_contents .sample_t th.number {
		width:7%;
	}
	.hp_contents .sample_t th.bonus_th {
		width:10%;
	}
	.hp_contents .sample_t td {
		font-size: 12px;
		vertical-align: middle;
		white-space:nowrap;
		padding: 15px 0;
	}
	.notes_box {
		padding: 20px;
		background: #f0f0f0;
	}
	.dl_box {
		padding: 20px;
		border: 4px double #999;
		text-align: center;
	}	
	.dl_box .flow_text{
		color: #c00;
	}
	.dl_box .dl a{
		padding: 10px;
		width: 50%;
		display: inline-block;
		font-size: 14px;
		letter-spacing: 0.02em;
		background: #ffffff; /* Old browsers */
		background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
		border: 1px solid #c0c0c0;
		border-radius: 10px
	}
	.dl_box .dl a span {
		background: url(../images/document/pdf.png) no-repeat left center;
		background-size: 20px auto;
		padding: 10px 30px;
	}
	
}/* End PC */



/*--------------------------------------------------
**************************************************
  SP用
**************************************************
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	
	#page_title{
		background: url(../images/homeplan/support_h1_bg.jpg) no-repeat right 70%;
		background-size: cover;
	}	

/* ----------------------------------------
	my_home_plan
---------------------------------------- */

	section h2 {
		font-size: 3vw;
		padding: 2vw 3vw 1.5vw 5vw;
		position: relative;
		color: white;
		background-color: #e71e29;
		border-bottom: 3px solid #c00;
	}
	section h2::after {
		 position: absolute;
		 top: 50%;
		 left:0;
		 transform:translateY(-50%);
		 content: '';
		 width: 3vw;
		 height:4px;
		 background-color:white;
	}
	.point_area .point {
		width: 49%;
		text-align: center;
		margin-right: 2%;
		margin-bottom: 10px;
		padding: 15px;
		box-sizing: border-box;
		background: #efefef;
		border-radius: 10px;
	}
	.point_area .point:nth-child(2n) {
		margin-right: 0;
	}
	.point_area .point .number {
		font-weight: bold;
		font-size: 2.8vw;
		letter-spacing: 0.1em;
		position: relative;
		
	}
	.point_area .point .number span {
		font-size: 4.5vw;
		margin-left: 3px;
	}
	.point_area .point .number:after {
		position: absolute;
		content: "";
		bottom:0;
		left:0;
		right:0;
		margin:auto;
		width: 30px;
		height: 2px;
		background: #e71e29;
	}
	.point_area .point .text {
		margin-top: 10px;
		font-size: 2.8vw;
	}
	.p_red {
		color: #e71e29;
		font-weight: bold;
	}
	.p_big {
		color: #e71e29;
		font-size: 4.5vw;
		margin: 0 2px;
	}
	.notes {font-size: 2.6vw;}
	
	.repayment_box {
		text-align:center;
		position: relative;
    	padding: 20px;
    	border-top: solid 2px black;
    	border-bottom: solid 2px black;
	}
	.repayment_box .title {
		font-weight: bold;
	}
	.repayment_box .btn {
		width: 80%;
		margin: 0 auto;
	}
	.repayment_box .btn a {
		display:block;
		padding: 15px 0;
		background:#77c920;
		color: #FFF;
		font-size: 3.5vw;
		font-weight: bold;
		letter-spacing: 0.15em;
		border-radius: 6px 6px 0 0;
		box-shadow: 0 5px #5b981a;
	}
	.repayment_box .btn a:hover {
		-ms-transform: translateY(5px);
		-webkit-transform: translateY(5px);
		transform: translateY(5px);
		border-bottom: none;
		box-shadow: none;
	}
	.hp_contents table {
		width: 100%;
	}
	.hp_contents table th {
		width: 25%;
		padding: 15px;
		background: #f6dcd2;
		border: 1px solid #681e2a;
	}
	.hp_contents table td {
		padding: 15px;
		background:#fffaf8;
		border: 1px solid #9a4452;
	}
	.hp_contents table td span {
		display: block;
		margin: 5px 0;
	}
	.terms_link {
		text-align: center;
	}
	.terms_link a {
		display: inline-block;
		padding: 15px 50px;
		background: #f0f0f0;
		border-radius: 10px
	}
	.terms_link a:hover {
		background: #e71e29;
		color: #FFF;
	}
	
	.service_link .link_box {
		width: 100%;
		padding: 10px;
		border: 2px solid #e83928;
		box-sizing: border-box;
		position: relative;
		border-radius: 5px;
		align-items: center;
		margin-bottom: 10px;
	}
	.service_link .link_box a {
		position: absolute;
		text-indent: -99999px;
		width:100%;
		height: 100%;
		top:0;
		left:0;
	}
	.service_link .link_box img {
		width:40%;
		height: auto;
		display: block;
		border-radius: 8px
	}
	.service_link .link_box p {
		width:58%;
		font-size: 3.5vw;
		font-weight: bold;
	}
	

/* ----------------------------------------
	internet_service
---------------------------------------- */
	.is_contents .service_list li {
		position: relative;
		padding: 10px 5vw;
		border-bottom: 1px dotted #c0c0c0;
		font-size: 3.2vw;
	}
	.is_contents .service_list li span {
		display: block;
		font-size: 2.8vw;
		color: #666;
	}
	.is_contents .service_list li:before {
		position: absolute;
		content: '';
		display: block;
		top: 18px;
		left: 0;
		width: 5px;
		height: 5px;
		border-right: 3px solid #e71e29;
		border-bottom: 3px solid #e71e29;
		transform: rotate(-45deg);
	}
	.is_contents .flow_title {
		font-weight: bold;
		padding-bottom: 5px;
		font-size:3.6vw;
		border-bottom: 2px solid #e71e29;
	}
	.is_contents .flow_list li {
		position: relative;
		padding: 15px 5vw;
		background:#ffcdd4;
		margin-bottom: 30px;
		border-radius: 10px;
		letter-spacing: .15em;
		font-size:3.5vw;
	}
	.is_contents .flow_list li:after {
		content: "";
		position: absolute;
		bottom: -20px;
		left: calc(50% - 10px);
		width: 0px;
		height: 0px;
		margin: auto;
		border-style: solid;
		border-color: #ffcdd4 transparent transparent transparent;
		border-width: 10px 10px 0 10px;
	}
	.is_contents .flow_list li:last-child:after {
		display: none;
	}
	.is_contents .flow_list li span {
		display: block;
		color: #c00;
		font-size: 3vw;
	}
	
	.entry_btn {
		text-align: center;
		width:100%;
		margin: 40px auto;
	}
	.entry_btn a {
		background: #8ec31f;
		padding: 20px;
		display: block;
		color: #FFF;
		font-size: 4vw;
		font-weight: bold;
		letter-spacing: 0.1em;
		position: relative;
		border-radius: 10px;
	}
	.entry_btn a:after {
		position: absolute;
		content:"";
		width: 10vw;
		height: 2px;
		background: #FFF;
		right: 0;
		top: calc(50% - 1px);
	}
	.entry_btn a:hover {
		text-decoration: none;
		background:#76a612;
	}
	

/* ----------------------------------------
	sample
---------------------------------------- */
	.hp_contents {
		overflow: auto;
	}
	.scroll {
		overflow: auto;
	}
	.hp_contents .sample_t {
		width: 200% !important;
		text-align: center;
		table-layout: fixed;
	}
	.hp_contents .sample_t th {
		vertical-align: middle;
		font-size: 2.8vw;
		padding: 10px 2px;
	}
	.hp_contents .sample_t th.normal_th {
		width:23% !important;
	}
	.hp_contents .sample_t th.number {
		width:14% !important;
	}
	.hp_contents .sample_t th.bonus_th {
		width:20%;
	}
	.hp_contents .sample_t td {
		font-size: 2.6vw;
		vertical-align: middle;
		padding: 10px 2px;
	}
	.notes_box {
		padding: 20px 5vw;
		background: #f0f0f0;
	}
	.dl_box {
		padding: 20px 5vw;
		border: 4px double #999;
		text-align: center;
		font-size: 3.3vw;
	}	
	.dl_box .flow_text{
		color: #c00;
	}
	.dl_box .dl a{
		padding: 10px;
		display: block;
		letter-spacing: 0.02em;
		background: #ffffff; /* Old browsers */
		background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
		border: 1px solid #c0c0c0;
		border-radius: 10px
	}
	.dl_box .dl a span {
		background: url(../images/document/pdf.png) no-repeat left center;
		background-size: 20px auto;
		padding: 10px 30px;
	}



}/* End SP */