@charset 'UTF-8';

/*** common ***/

.font_family_yugo {
	font-family : '游ゴシック', YuGothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ＭＳ ゴシック', sans-serif;
}

.color_red {
	color: #e60012;
}

@media screen and (min-width:569px) {
	.pc_none {
		display : none !important;
	}
	a:hover {
		opacity : 0.7;
	}
}

@media screen and (max-width:568px) {
	.sp_none {
		display : none !important;
	}
}

sup {
	margin-left : 0.1em;
	font-size : 1em;
	vertical-align : super;
}

sub {
	font-size : 0.7em;
}


/*** totop ***/

#totop {
	position : absolute;
	right : 10px;
	bottom : 142px;
	z-index : 5;
}

#totop.fix {
	position : fixed;
	bottom : 0;
}

a.mod_button_top {
	display : block;
	position : relative;
	min-height : 38px;
	padding-right : 48px;
	color : #034d73;
	font-size : 0.92em;
	font-weight : bold;
	line-height : 38px;
	text-decoration : none;
}

div.area_contents a.mod_button_top::after {
	border-radius : 100%;
	background-color : #ffffff;
}

.mod_button_top::after {
	display : block;
	position : absolute;
	top : 0;
	right : 5px;
	width : 38px;
	height : 38px;
	min-height : 38px;
	overflow-x : hidden;
	overflow-y : hidden;
	background-image : url('/common/imgs/parts-s60a8ca576d.png');
	background-repeat : no-repeat;
	background-position-x : 0;
	background-position-y : -162px;
	background-size : 115px 687px;
	text-indent : 110%;
	white-space : nowrap;
	content : '';
}

@media screen and (min-width:569px) {
	#totop {
		bottom : 130px;
	}
}


/*** area_footer ***/

@media screen and (min-width:569px) {
	.area_footer {
		background-color : #f0f0f0;
	}
	.footer_nav_wrap {
		border-top : 1px solid #204c70;
		border-bottom : 1px solid #204c70;
	}
	.footer_nav_item_list {
		max-width : 980px;
		margin : 0 auto;
		padding : 0 15px;
		text-align : center;
	}
	.footer_nav_item_list li {
		display : inline-block;
		padding : 24px 0 21px;
	}
	.footer_nav_item_list li + li {
		margin-left : 45px;
	}
	.footer_nav_item_list li a {
		display : block;
		height : 100%;
		color : #13587b;
		font-size : 16px;
		font-weight : bold;
		line-height : 1.23;
		letter-spacing : 0.02em;
		text-decoration : none;
		text-align : center;
	}
}

@media screen and (max-width:568px) {
	.area_footer {
		background-color : #f0f0f0;
	}
	.footer_nav_item_list {
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		border-top : 1px solid #204c70;
		-ms-flex-wrap : wrap;
		    flex-wrap : wrap;
	}
	.footer_nav_item_list li {
		width : 50%;
		border-bottom : 1px solid #204c70;
		-webkit-box-sizing : border-box;
		        box-sizing : border-box;
	}
	.footer_nav_item_list li:nth-child(odd) {
		border-right : 1px solid #204c70;
	}
	.footer_nav_item_list li a {
		display : block;
		height : 100%;
		padding : 16px 0 14px;
		color : #13587b;
		font-size : 0.75em;
		font-weight : bold;
		line-height : 1.23;
		text-decoration : none;
		text-align : center;
	}
}


/*** area_global_container ***/

.area_global_container {
	position : relative;
}


/*** area_content ***/

.area_content {
	margin : 0 auto 25px;
	padding : 0 10px;
}

.area_content img {
	display : block;
	width : 100%;
}

.area_content > section + section {
	margin-top : 50px;
}

@media screen and (min-width:569px) {
	.area_contents {
		padding : 0;
		overflow : hidden;
	}
	.area_content {
		max-width : 980px;
		margin : 0 auto 80px;
	}
	.area_content > section + section {
		margin-top : 80px;
	}
}

@media screen and (max-width:568px) {
	.area_contents {
		padding-bottom : 50px;
	}
}

@media screen and (min-width:569px) {
	.area_visual {
		position : relative;
		width : 100%;
		height : auto;
		margin-bottom : 10px;
		padding-top : 227px;
		-webkit-box-sizing : border-box;
		        box-sizing : border-box;
		background-color : #2ac311;
	}
	.area_visual .visual_cover {
		width : 100%;
		padding-top : 306px;
		border-radius : 55px 55px 0 0;
		-webkit-box-shadow : -0.14px -3.998px 7px 0 rgba(8, 60, 0, 0.2);
		        box-shadow : -0.14px -3.998px 7px 0 rgba(8, 60, 0, 0.2);
		background-color : #ffffff;
	}
	.area_visual .visual_cover::before {
		display : block;
		position : absolute;
		bottom : -10px;
		left : 0;
		width : 100%;
		padding-top : 10px;
		background-color : #ffffff;
		content : '';
	}
}

@media screen and (max-width:859px) and (min-width:569px) {
	.area_visual {
		padding-top : 27.328%;
	}
	.area_visual .visual_cover {
		padding-top : 34.752%;
	}
}


/*** mainVisual ***/

@media screen and (min-width:569px) {
	.mainVisual {
		position : absolute;
		top : 0;
		left : 50%;
		-webkit-transform : translateX(-50%);
		        transform : translateX(-50%);
		width : 100%;
		max-width : 860px;
		margin : 0 auto;
	}
}

.mainVisual img {
	width : 100%;
	max-width : 100%;
	height : auto;
	vertical-align : bottom;
}

@media screen and (min-width:860px) {
	.mainVisual img {
		width : auto;
		max-width : none;
	}
}

@media screen and (max-width:859px) and (min-width:569px) {
	.mainVisual img {
		width : 100%;
		max-width : 100%;
	}
}

.txt_bold {
	font-weight : bold;
}

.txt_type01 {
	color : #2ac311;
}

.txt_note {
	margin-top : 5px;
	padding-left : 1em;
	font-size : 12px;
	text-indent : -1em;
}

@media screen and (min-width:569px) {
	.txt_note {
		margin-top : 10px;
	}
}

@media screen and (min-width:569px) {
	.txt_note {
		font-size : 18px;
	}
}


/*** lead_area ***/

.lead_area {
	position : relative;
	margin-bottom : 35px;
	padding : 30px 10px;
	background-color : #2ac311;
	color : #ffffff;
	font-size : 14px;
	line-height : 1.5;
}

@media screen and (min-width:569px) {
	.lead_area {
		width : 100%;
		padding : 30px 20px;
		max-width : 980px;
		margin : 0 auto 40px;
		-webkit-box-sizing : border-box;
		        box-sizing : border-box;
		font-size : 20px;
		line-height : 1.6;
		text-align : center;
	}
}

.lead_area::after {
	display : block;
	position : absolute;
	bottom : -30px;
	left : 50%;
	-webkit-transform : translateY(-50%) translateX(-50%);
	        transform : translateY(-50%) translateX(-50%);
	width : 0;
	height : 0;
	border-width : 25px 20px 0 20px;
	border-style : solid;
	border-color : #2ac311 transparent transparent transparent;
	content : '';
}

.lead_area .ttlh2 {
	font-size : 16px;
	font-weight: bold;
	text-align : center;
}

@media screen and (min-width:569px) {
	.lead_area .ttlh2 {
		font-size : 28px;
		font-weight: normal;
	}
}

.lead_area .ttlh2 span {
	font-size : 14px;
}

@media screen and (min-width:569px) {
	.lead_area .ttlh2 span {
		font-size : 26px;
	}
}

.lead_area .ttlh2::after {
	display : block;
	width : 220px;
	margin : 0 auto 10px;
	padding-bottom : 5px;
	border-bottom : 1px solid #ffffff;
	content : '';
}

@media screen and (min-width:569px) {
	.lead_area p {
		text-align: left;
	}
}

.section_inner {
	padding : 0 10px;
}

@media screen and (min-width:569px) {
	.section_inner {
		padding : 0;
	}
}


/*** customer_merit ***/

.customer_merit {
	margin-bottom : 40px;
}

@media screen and (min-width:569px) {
	.customer_merit .section_inner {
		width : 100%;
		max-width : 980px;
		margin : 0 auto;
	}
}

.customer_merit .ttlh3 {
	padding : 10px;
	background-color : #2ac311;
	color : #ffffff;
	font-size : 16px;
	font-weight: bold;
	text-align : center;
}

@media screen and (min-width:569px) {
	.customer_merit .ttlh3 {
		padding : 20px 10px;
		font-size : 28px;
		font-weight: normal;
	}
}

.merit_list {
	padding : 0 10px;
}

@media screen and (min-width:569px) {
	.merit_list {
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		padding : 30px 10px;
		-webkit-box-orient : horizontal;
		-webkit-box-direction : normal;
		    -ms-flex-flow : row nowrap;
		        flex-flow : row nowrap;
	}
}

.merit_list li {
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	padding : 20px 0;
	border-bottom : 1px dashed #d3d4c8;
	font-size : 20px;
	line-height : 1.4;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	    -ms-flex-flow : row nowrap;
	        flex-flow : row nowrap;
	-webkit-box-align : center;
	    -ms-flex-align : center;
	        align-items : center;
}

@media screen and (min-width:569px) {
	.merit_list li {
		display : block;
		width : 33%;
		padding : 0;
		border-right : 1px dashed #d3d4c8;
		border-bottom : none;
		font-size : 14px;
		text-align : center;
	}
	.merit_list li:nth-child(2) {
		width : 34%;
	}
}

.merit_list li:last-child {
	border : none;
}

.merit_list .img_area , .merit_list .txt_area {
	display : block;
}

.merit_list .img_area {
	width : 30%;
	margin-right : 5%;
}

@media screen and (min-width:375px) {
	.merit_list .img_area {
		width : 35%;
		margin-right : 10%;
	}
}

@media screen and (min-width:569px) {
	.merit_list .img_area {
		width : 100%;
	}
	.merit_list .img_area .icon_accumulate , .merit_list .img_area .icon_use , .merit_list .img_area .icon_house {
		height : auto;
		margin : 0 auto;
	}
	.merit_list .img_area .icon_accumulate {
		width : 129px;
	}
	.merit_list .img_area .icon_use {
		width : 104px;
	}
	.merit_list .img_area .icon_house {
		width : 130px;
		padding-top : 10px;
	}
}

.merit_list .img_area img {
	width : 100%;
	max-width : 100%;
}

.merit_list .txt_area {
	width : 65%;
}

@media screen and (min-width:375px) {
	.merit_list .txt_area {
		width : 55%;
	}
}

@media screen and (min-width:569px) {
	.merit_list .txt_area {
		font-size: 22px;
		width : 100%;
		margin-top : 20px;
		padding : 0 5px;
		-webkit-box-sizing : border-box;
		        box-sizing : border-box;
	}
}


/*** howtouse ***/

.howtouse {
	margin-bottom : 30px;
	font-size : 12px;
	line-height : 1.5;
}

@media screen and (min-width:569px) {
	.howtouse .section_inner {
		width : 100%;
		max-width : 980px;
		margin : 0 auto;
	}
}

.howtouse .txth3 {
	margin-bottom : 30px;
	font-size : 16px;
	text-align : center;
}

@media screen and (min-width:569px) {
	.howtouse .txth3 {
		font-size : 28px;
	}
}

.howtouse .txth3 span {
	display : inline-block;
	padding-bottom : 5px;
	border-bottom : 1px solid #2ac311;
}

@media screen and (min-width:569px) {
	.howtouse .txth3 span {
		border-bottom : 2px solid #2ac311;
	}
}

.howtouse .howtouseBox {
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	    -ms-flex-flow : row wrap;
	        flex-flow : row wrap;
	-webkit-box-align : center;
	    -ms-flex-align : center;
	        align-items : center;
	-ms-flex-line-pack : center;
	    align-content : center;
}

.howtouse .howtouseBox li {
	text-align: center;
	width: 47%;
}

.howtouse .howtouseBox li:nth-child(5),
.howtouse .howtouseBox li:nth-child(7) {
	margin-bottom: 10px;
}

.howtouse .note_txt {
    margin-bottom: 30px;
    font-size: 12px;
}

@media screen and (min-width:569px) {
	.howtouse .note_txt {
		font-size: 15px;
	}
}

@media screen and (min-width:569px) {
	.howtouse .howtouseBox li {
		width: 22.75%;
		margin-bottom: 30px;
	}

	.howtouse .howtouseBox li:nth-child(8),
	.howtouse .howtouseBox li:nth-child(10),
	.howtouse .howtouseBox li:nth-child(12) {
		margin-bottom: 0;
	}
}

.howtouse .howtouseBox li.img_arrow {
	width: 6%;
}

@media screen and (min-width:569px) {
	.howtouse .howtouseBox li.img_arrow {
		width: 3%;
		margin-bottom: 60px;
	}
}

.howtouse .howtouseBox li img {
	display: block;
	max-width: 100%;
	width: 100%;
}

.howtouse .txth4 {
	margin-bottom : 10px;
	font-size : 12px;
}

@media screen and (min-width:569px) {
	.howtouse .txth4 {
		font-size : 16px;
	}
}

.howtouse .note_box01 {
	padding : 15px;
	background-color : #e8e8e8;
}

@media screen and (min-width:569px) {
	.howtouse .note_box01 {
		font-size: 14px;
	}
}

.howtouse .txth5 {
	margin-bottom : 10px;
	font-size : 14px;
	font-weight : bold;
}

@media screen and (min-width:569px) {
	.howtouse .txth5 {
		font-size : 16px;
	}
}

.howtouse .extension {
	display : inline-block;
	position : relative;
	width : 20px;
	height : 20px;
	margin : 2px 2px 0 0;
	border : 2px solid #d40202;
	border-radius : 50%;
	-webkit-box-sizing : border-box;
	        box-sizing : border-box;
	color : #d40202;
	font-size : 12px;
	vertical-align : top;
}

.howtouse .extension span {
	position : absolute;
	top : 50%;
	left : 50%;
	-webkit-transform : translateY(-50%) translateX(-50%);
	        transform : translateY(-50%) translateX(-50%);
}

.howtouse .note_list {
	padding-left : 1em;
	text-indent : -1em;
}

.howtouse .note_list li {
	margin-bottom : 15px;
}

.howtouse .note_list li:last-child {
	margin-bottom : 0;
}

.linepay_start .ttlh2 {
	position : relative;
	margin-bottom : 30px;
	padding : 20px 10px;
	background-color : #2ac311;
	color : #ffffff;
	font-size : 16px;
	font-weight: bold;
	line-height : 1.5;
	text-align : center;
}

@media screen and (min-width:569px) {
	.linepay_start .ttlh2 {
		width : 100%;
		max-width : 980px;
		margin : 0 auto 30px;
		-webkit-box-sizing : border-box;
		        box-sizing : border-box;
		font-size : 24px;
		font-weight: normal;
	}
}

@media screen and (min-width:569px) {
	.linepay_start .section_inner {
		width : 100%;
		max-width : 980px;
		margin : 0 auto;
	}
}

.linepay_start .ttlh2::after {
	display : block;
	position : absolute;
	bottom : -25px;
	left : 50%;
	-webkit-transform : translateY(-50%) translateX(-50%);
	        transform : translateY(-50%) translateX(-50%);
	width : 0;
	height : 0;
	border-width : 25px 20px 0 20px;
	border-style : solid;
	border-color : #2ac311 transparent transparent transparent;
	content : '';
}

.bnr_area01 {
	margin-bottom : 20px;
}

@media screen and (min-width:569px) {
	.bnr_area01 {
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-orient : horizontal;
		-webkit-box-direction : normal;
		    -ms-flex-flow : row nowrap;
		        flex-flow : row nowrap;
		-ms-flex-pack : distribute;
		    justify-content : space-around;
	}
}

.bnr_area01 li {
	margin-bottom : 10px;
}

@media screen and (min-width:569px) {
	.bnr_area01 li {
		width : 30%;
	}
}

.bnr_area01 li:last-child {
	margin-bottom : 0;
}

.bnr_area01 li img.pc_none {
	width : 100%;
	max-width : 100%;
	vertical-align : bottom;
}

.bnr_area01 li img.sp_none {
	width : 100%;
	max-width : 100%;
	vertical-align : bottom;
}


/*** friend_recruiting ***/

.friend_recruiting {
	text-align : center;
}

	.friend_recruiting .section_inner {
		margin-bottom: 30px;
	}

@media screen and (min-width:569px) {
	.friend_recruiting .section_inner {
		width : 100%;
		max-width : 980px;
		margin : 0 auto 60px;
	}
}

.friend_recruiting .ttlh2 {
	padding : 20px 10px;
	background-color : #2ac311;
	color : #ffffff;
	font-size : 16px;
	font-weight: bold;
}

@media screen and (min-width:569px) {
	.friend_recruiting .ttlh2 {
		font-size : 24px;
		font-weight: normal;
	}
}

.friend_recruiting .friend_add {
	padding : 20px 10px;
	border : 2px solid #2ac311;
}

@media screen and (min-width:569px) {
	.friend_recruiting .friend_add {
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		padding : 30px 60px;
		border : 4px solid #2ac311;
		-webkit-box-orient : horizontal;
		-webkit-box-direction : normal;
		    -ms-flex-flow : row nowrap;
		        flex-flow : row nowrap;
		-webkit-box-pack : justify;
		    -ms-flex-pack : justify;
		        justify-content : space-between;
		-webkit-box-align : center;
		    -ms-flex-align : center;
		        align-items : center;
	}
}

.friend_recruiting .friend_add .left_area , .friend_recruiting .friend_add .right_area p {
	margin-bottom : 20px;
	font-size : 14px;
	line-height : 1.5;
}

@media screen and (min-width:569px) {
	.friend_recruiting .friend_add .left_area {
		width : 50%;
		margin-bottom : 0;
	}
	.friend_recruiting .friend_add .right_area {
		width : 50%;
	}
	.friend_recruiting .friend_add .right_area p {
		font-size : 22px;
	}
}

.friend_recruiting .friend_add p:last-child {
	margin-bottom : 0;
}

.friend_recruiting .imgFriendadd {
	width : 62.681%;
}

.friend_recruiting .btnFriendadd {
	display: inline-block;
	width : 40%;
}

@media screen and (min-width:569px) {
	.friend_recruiting .imgFriendadd {
		width : 85%;
		margin : 0 auto;
	}
	.friend_recruiting .btnFriendadd {
		width : 45%;
	}
}

.friend_recruiting .btnFriendadd img {
	max-width: 100%;
	width : 100%;
}