@charset "Shift_JIS";

/**
 * Common
 */

body.renew_page #contents #contents_wrapper.tasuke_wrap {
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
	width: 100%;
}

body.renew_page #contents .tasuke_wrap h2 {
	border: none;
	padding: 0;
	letter-spacing: normal;
	line-height: 1.5;
}

body.renew_page #contents .tasuke_wrap h3,
body.renew_page #contents .tasuke_wrap h4 {
	color: #333;
	letter-spacing: normal;
}

body.renew_page #contents .tasuke_wrap p,
.tasuke_wrap ol,
.tasuke_wrap ul,
.tasuke_wrap dl,
.tasuke_wrap li {
	line-height: 1.75;
}

.tasuke_wrap picture {
	display: block;
}

.tasuke_wrap picture,
.tasuke_wrap img {
	height: auto;
	max-width: 100%;
}

ul.note_list {
	padding: 0 0 0 1em;
}

ul.note_list > li {
	position: relative;
}

ul.note_list > li::before {
	content: "\0203b";
	display: block;
	left: -1em;
	position: absolute;
	top: 0;
	width: 1em;
}

ul.def_list {
	padding: 0 0 0 1.5em;
	list-style-type: disc;
}

/**
 * Media query�imin-width: 641px�j
 */

@media screen and (min-width: 641px), print {
	/* Hero */
	.tasuke_hero {
		background: #ff8c5a url(../images/bg_hero_pc.png) no-repeat center/1240px;
		height: 800px;
		position: relative;
	}

	.tasuke_hero_content {
		left: 0;
		margin: 0 auto;
		position: absolute;
		right: 0;
		width: 1170px;
		z-index: 5;
	}

	/* Content */
	.tasuke_sec_content {
		margin: 0 auto;
		width: 1130px;
	}

	.campaign_obo {
		background-color: #fff5e1;
		padding: 50px 0 60px;
	}

	body.renew_page #contents .obo_title {
		font-size: 40px;
		font-weight: bolder;
		height: 100px;
		margin: 0;
		text-align: center;
	}

	.obo_title span {
		border-bottom: 4px solid #80c9c1;
		display: inline-block;
		padding: 20px 0 0;
		position: relative;
	}

	.obo_title span::before {
		content: "";
		background: url(../images/img_obo_title.png) no-repeat center/contain;
		height: 100px;
		left: -130px;
		position: absolute;
		top: 0;
		width: 116px;
	}

	body.renew_page #contents .obo_step {
		margin-top: 44px !important;
	}

	.obo_step ol {
		display: flex;
		justify-content: space-between;
	}

	.obo_step .step_block {
		width: 354px;
	}

	.step_head {
		background-color: #fff;
		border: 2px solid #333;
		border-radius: 8px;
		height: 48px;
		position: relative;
	}

	.step_head img {
		bottom: 0;
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		top: 0;
	}

	.step_body {
		margin: 24px 0 0;
	}

	body.renew_page #contents .step_body h3 {
		border-bottom: 2px solid #80c9c1;
		font-size: 22px;
		font-weight: bolder;
		line-height: 1.5;
		margin: 15px 0 0;
		padding: 0 0 4px;
		text-align: center;
	}

	body.renew_page #contents .step_body .note_list {
		color: #009383;
		margin: 0;
	}

	body.renew_page #contents .obo_note {
		margin: 40px 0 0;
	}

	.obo_note {
		background-color: #fff;
		border: 2px solid #009383;
		border-radius: 8px;
		display: flex;
	}

	.obo_note dt {
		align-items: center;
		background-color: #009383;
		color: #fff;
		display: flex;
		font-size: 22px;
		font-weight: bolder;
		justify-content: center;
		width: 160px;
	}

	.obo_note dd {
		flex: 1;
		padding: 12px 16px;
	}

	.obo_note dd em {
		color: #009383;
		font-weight: bolder;
	}

	.campaign_gaiyo {
		margin: 40px 0 0;
	}

	body.renew_page #contents .tasuke_wrap .gaiyo_title {
		font-size: 20px;
		font-weight: bolder;
		margin: 0;
		padding: 0 0 0 1.1em;
		position: relative;
	}

	.gaiyo_title::before {
		color: #009383;
		content: "�œ";
		left: 0;
		position: absolute;
		top: 0;
		width: 1em;
	}

	body.renew_page #contents .campaign_gaiyo table {
		margin-top: 8px !important;
	}

	.campaign_gaiyo table {
		border: 1px solid #333;
		width: 100%;
	}

	.campaign_gaiyo td,
	.campaign_gaiyo th {
		border: 1px solid #333;
		line-height: 1.75;
		padding: 10px 16px;
	}

	.campaign_gaiyo td {
		background-color: #fff;
	}

	.campaign_gaiyo th {
		background-color: #cce9e6;
		text-align: center;
		width: 128px;
	}

	.campaign_gaiyo em {
		color: #009383;
		font-weight: bolder;
	}

	body.renew_page #contents .campaign_gaiyo table .note_list {
		margin: 0;
	}

	.obo_form {
		margin: 56px 0 0;
	}

	.obo_form p {
		margin: 0 auto;
		width: 742px;
	}

	body.renew_page #contents .obo_form a {
		color: #fff;
	}

	.obo_form a {
		background-color: #ff8c5a;
		background-image: url(../images/img_obo_form.png), url(../images/ico_arrow_white.svg);
		background-position: top 16px left 40px, center right 40px;
		background-repeat: no-repeat, no-repeat;
		background-size: 156px, 40px;
		border-radius: 8px;
		display: block;
		font-size: 36px;
		font-weight: bolder;
		line-height: 1;
		padding: 54px 0 58px 215px;
	}

	body.renew_page #contents .obo_form a {
		transition: background-color .3s ease-out;
	}

	body.renew_page #contents .obo_form a:hover {
		background-color: #eb5f43;
		opacity: 1;
	}

	/* Notice */
	.campaign_notice {
		padding: 80px 0;
	}

	.notice_content:not(:first-child) {
		margin: 60px 0 0;
	}

	.notice_head {
		background-color: #e7e1eb;
		display: flex;
		justify-content: center;
		padding: 12px 12px 14px;
	}

	body.renew_page #contents .campaign_notice h2 {
		font-size: 22px;
		font-weight: bolder;
		line-height: 1.3;
		margin: 0;
	}

	.notice_body {
		margin-top: 30px;
	}

	.notice_body .def_list li {
		margin-top: .5em;
	}

	body.renew_page #contents .notice_body .def_list + .note_list {
		margin-top: 1.5em;
	}

	.notice_body a.exlink::after {
		background: url(../images/ico_exlink.svg) no-repeat center/contain;
		content: "";
		display: inline-block;
		height: 1em;
		margin-left: 4px;
		width: 1em;
	}

	/* Link */
	.tasuke_link {
		border-top: 1px solid #ddd;
		padding: 60px 0 0;
	}

	.link_head {
		display: flex;
		justify-content: center;
	}

	body.renew_page #contents .link_head h2 {
		background: url(../images/ico_search.svg) no-repeat center left/32px;
		font-size: 24px;
		font-weight: bolder;
		line-height: 32px;
		margin: 0;
		padding: 0 0 0 36px;
	}

	.tasuke_link_list {
		margin: 40px 0 0;
	}

	.tasuke_link_list ul {
		display: flex;
		justify-content: space-between;
	}

	.link_block {
		border: 1px solid #ddd;
		box-sizing: border-box;
		position: relative;
		width: 545px;
	}

	.link_block a {
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 3;
	}

	.link_fig {
		overflow: hidden;
		position: relative;
	}

	.link_fig img {
		transition: opacity .3s ease-out,  transform .3s ease-out;
	}

	.link_block:hover .link_fig img {
		opacity: .7;
		transform: scale(1.1);
	}

	.link_body {
		background: url(../images/ico_arrow_gray.svg) no-repeat center right 24px/30px;
		padding: 16px 88px 16px 20px;
	}

	body.renew_page #contents .tasuke_wrap .link_body h3 {
		font-size: 20px;
		line-height: 1.5;
		margin: 0;
		transition: color .3s ease-out;
	}

	body.renew_page #contents .tasuke_wrap .link_block:hover .link_body h3 {
		color: #0070cb;
	}

	body.renew_page #contents .tasuke_wrap .link_body p {
		line-height: 1.5;
		margin: 4px 0 0;
	}
}

/**
 * Media query�imax-width: 640px�j
 */

@media screen and (max-width: 640px) {
	/* Hero */
	.tasuke_hero {
		background-color: #ff8c5a;
	}

	.tasuke_hero_content {
		width: 100%;
	}

	/* Content */
	.tasuke_sec_content {
		margin: 0 5.5%;
		width: auto;
	}

	.campaign_obo {
		background-color: #fff5e1;
		padding: 20px 0 40px;
	}

	body.renew_page #contents .tasuke_wrap .obo_title {
		background: url(../images/img_obo_title.png) no-repeat top center/100px;
		font-size: 28px;
		font-weight: bolder;
		margin: 0;
		padding: 96px 0 0;
		text-align: center;
	}

	.obo_title span {
		border-bottom: 4px solid #80c9c1;
	}

	body.renew_page #contents .obo_step {
		margin-top: 44px !important;
	}

	.step_head {
		background-color: #fff;
		border: 2px solid #333;
		border-radius: 8px;
		height: 48px;
		position: relative;
	}

	.step_block:not(:first-child) {
		margin: 40px 0 0;
	}

	.step_head img {
		bottom: 0;
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		top: 0;
	}

	body.renew_page #contents .step_head img {
		width: 138px;
	}

	.step_body {
		margin: 24px 0 0;
	}

	.step_fig img {
		display: block;
		margin: 0 auto;
		max-width: 354px;
	}

	body.renew_page #contents .step_body h3 {
		border-bottom: 2px solid #80c9c1;
		font-size: 22px;
		font-weight: bolder;
		line-height: 1.5;
		margin: 15px 0 0;
		padding: 0 0 4px;
		text-align: center;
	}

	body.renew_page #contents .step_body .note_list {
		color: #009383;
		margin: 0;
	}

	body.renew_page #contents .obo_note {
		margin: 40px 0 0;
	}

	.obo_note {
		background-color: #fff;
		border: 2px solid #009383;
		border-radius: 8px;
	}

	.obo_note dt {
		align-items: center;
		background-color: #009383;
		color: #fff;
		font-size: 22px;
		font-weight: bolder;
		padding: 0 0 4px;
		text-align: center;
	}

	.obo_note dd {
		padding: 12px 16px;
	}

	.obo_note dd em {
		color: #009383;
		font-style: normal;
		font-weight: bolder;
	}

	.campaign_gaiyo {
		margin: 40px 0 0;
	}

	body.renew_page #contents .tasuke_wrap .gaiyo_title {
		font-size: 20px;
		font-weight: bolder;
		margin: 0;
		padding: 0 0 0 1.1em;
		position: relative;
	}

	.gaiyo_title::before {
		color: #009383;
		content: "�œ";
		left: 0;
		position: absolute;
		top: 0;
		width: 1em;
	}

	body.renew_page #contents .campaign_gaiyo table {
		margin-top: 8px !important;
	}

	.campaign_gaiyo table {
		border: 1px solid #333;
		width: 100%;
	}

	.campaign_gaiyo td,
	.campaign_gaiyo th {
		display: block;
	}

	.campaign_gaiyo td {
		background-color: #fff;
		line-height: 1.75;
		padding: 10px 16px;
	}

	.campaign_gaiyo th {
		background-color: #cce9e6;
		line-height: 1.5;
		padding: 8px 16px;
	}

	.campaign_gaiyo em {
		color: #009383;
		font-style: normal;
		font-weight: bolder;
	}

	body.renew_page #contents .campaign_gaiyo table .note_list {
		margin: 0;
	}

	.obo_form {
		margin: 32px 0 0;
	}

	body.renew_page #contents .obo_form a {
		color: #fff;
	}

	.obo_form a {
		background: #ff8c5a url(../images/ico_arrow_white.svg) no-repeat center right 12px/24px;
		border-radius: 8px;
		display: block;
		font-feature-settings: "palt";
		font-size: 22px;
		font-weight: bolder;
		letter-spacing: 1px;
		line-height: 1;
		padding: 35px 16px 39px;
	}

	body.renew_page #contents .obo_form a {
		transition: background-color .3s ease-out;
	}

	body.renew_page #contents .obo_form a:hover {
		background-color: #eb5f43;
		opacity: 1;
	}

	/* Notice */
	.campaign_notice {
		padding: 60px 0;
	}

	.notice_content:not(:first-child) {
		margin: 40px 0 0;
	}

	.notice_head {
		background-color: #e7e1eb;
		display: flex;
		justify-content: center;
		padding: 10px 10px 11px;
	}

	body.renew_page #contents .campaign_notice h2 {
		font-size: 18px;
		font-weight: bolder;
		line-height: 1.3;
		margin: 0;
	}

	.notice_body {
		font-size: 14px;
		margin-top: 24px;
		overflow-wrap: break-word;
	}

	.notice_body .def_list li {
		margin-top: .5em;
	}

	body.renew_page #contents .notice_body .def_list + .note_list {
		margin-top: 1.5em;
	}

	.notice_body a.exlink::after {
		background: url(../images/ico_exlink.svg) no-repeat center/contain;
		content: "";
		display: inline-block;
		height: 1em;
		margin-left: 4px;
		width: 1em;
	}

	/* Link */
	.tasuke_link {
		border-top: 1px solid #ddd;
		padding: 48px 0 0;
	}

	.link_head {
		display: flex;
		justify-content: center;
	}

	body.renew_page #contents .link_head h2 {
		background: url(../images/ico_search.svg) no-repeat center left/30px;
		font-size: 22px;
		font-weight: bolder;
		line-height: 30px;
		margin: 0;
		padding: 0 0 0 34px;
	}

	.tasuke_link_list {
		margin: 32px 0 0;
	}

	.link_block {
		border: 1px solid #ddd;
		box-sizing: border-box;
		position: relative;
	}

	.link_block:not(:first-child) {
		margin: 32px 0 0;
	}

	.link_block a {
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 3;
	}

	.link_fig {
		overflow: hidden;
		position: relative;
	}

	.link_fig img {
		transition: opacity .3s ease-out,  transform .3s ease-out;
	}

	.link_block:hover .link_fig img {
		opacity: .7;
		transform: scale(1.1);
	}

	.link_body {
		padding: 10px 12px;
	}

	body.renew_page #contents .tasuke_wrap .link_body h3 {
		font-size: 18px;
		line-height: 1.5;
		margin: 0;
		transition: color .3s ease-out;
	}

	body.renew_page #contents .tasuke_wrap .link_block:hover .link_body h3 {
		color: #0070cb;
	}

	body.renew_page #contents .tasuke_wrap .link_body p {
		font-size: 14px;
		line-height: 1.5;
		margin: 4px 0 0;
	}
}

/**
 * In view settings
 */

.fadein {
	opacity: .01;
	transition: opacity 1.2s ease-out .1s;
}

.fadein.inview {
	opacity: 1;
}

.fadein.moveup {
	transform: translateY(40px);
	transition: opacity 1.2s ease-out .1s, transform 1.2s ease-out .1s;
}

.fadein.moveup.inview {
	transform: translateY(0);
}