﻿/* RESET CSS */
article, aside, details, figcaption, figure, footer, header, hgroup, img, menu, nav, section {display: block;}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {margin: 0;padding: 0;border: 0;font: inherit;vertical-align: baseline;}
body {line-height: 1;}
ol, ul {list-style: none;}
table {border-collapse: collapse;border-spacing: 0;}
table + p {margin-top: 2rem;}
img {margin: 0 auto;padding: 0;max-width: 100%;}
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
a[href^="tel:"] {pointer-events: none;text-decoration: none;color: #666;}
/*--------Basic--------*/
html {font-size: 62.5%;}
body {
	width: 100%;
	font-size: 2.2rem;
	color: #3f3f3f;
	font-weight: 500;
	line-height: 1.7;
	-webkit-font-feature-settings: 'palt'1;
	font-feature-settings: 'palt'1;
	font-family: -apple-system-body, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", "游ゴシック  Medium", "Yu Gothic Medium", "メイリオ", meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fff3dd+0,fff3dd+53,ffd899+100 */
	background: #eee;
}
.body_wrap {width: 960px;margin: 0 auto;background: #fff;}
.pc {display: block;}
.sp {display: none;}
.clearfix:before, .clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
.img_right {float: right;padding: 0 0 2rem 2rem;}
.img_left {float: left;padding: 0 2rem 2rem 0;}
.flex {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
.flex + .flex {margin: 2rem 0 0;}
.caption {
	width: 100%;
	padding: 1rem;
	margin: 0 !important;
	border-left: 2px solid #110604;
	color: #110604;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.4;
}
/* Font */
h1 {
	font-weight: normal !important;
	font-feature-settings: "palt"1;
	width: 960px;
	margin: 0 auto;
	position: relative;
}
.u {text-decoration: underline;}
.b {font-weight: bold;}
.r {color: #d11019;}
.y {color: #f4f745;}
.wht {color: #fff !important;}
.gradation_g {
	color: #f9db7f;
	background: -webkit-linear-gradient(0deg, #f9db7f, #fff8c8, #f9db7f);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: 'Gothic MB101 Heavy', sans-serif;
}
.mark {background: linear-gradient(transparent 50%, #ffff84 50%);}
.txt_c {text-align: center;}
.txt_r {text-align: right;}
.txt_l {text-align: left;}
.xxsmall {font-size: 30%;}
.xsmall {font-size: 60%;}
.small {font-size: 80%;}
.large {font-size: 110%;}
.xlarge {font-size: 140%;}
.xxlarge {font-size: 160%;}
.serif {font-family: 游明朝, "Yu serif", Yuserif, "Hiragino serif ProN", "Hiragino serif Pro", HGS明朝E, メイリオ, Meiryo, serif;}
.videotime {font-family: Arial, Helvetica, "sans-serif";font-weight: 900;font-size: 115%;}
img.form_copy{margin: 0 auto 1.5rem;width: 60%;}
.middle {margin: 2rem 0;}
.bottom {margin-top: 2rem;}
.top {margin-bottom: 2rem;}
/*--------Header--------*/
header { width: 100%;margin: 0 auto;text-align: center;}
#header_img { 
	width: 100%;
	margin: 0 auto;
	text-align: center;
	background: url("../img/kh_settle_head_bg.jpg") no-repeat center top;background-size: cover;}
#header_img h1{width: 960px;margin: 0 auto; position: relative;/*padding-bottom: 2rem;*/}
header h1 img {/*padding: 1rem 0 0 0;*/margin: 0 auto;}
/*↓セトルメントページのヘッド画像の上に「再登録ページ」の文言を重ねる*/
/*↑セトルメントページのヘッド画像の上に「再登録ページ」の文言を重ねる*/
header p {color: #3f3a17;font-size: 60%;/*padding: 1rem 0;*/}
.arrow_img{position: absolute;top: -3rem;left: 50%;transform: translateX(-50%);}
.header_arrow {position: absolute; right: 2rem;bottom: -8rem; z-index: 2;}
.header_arrow img { width: 40px;}
.header_flex { 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 645px;
}
/*--------Section / sub_head / sec_inner--------*/
/* 共通 */
.sub_head {
	color: #222;
	font-size: 6rem;
	font-weight: 900;
	line-height: 1.3;
	text-align: center;
	/* letter-spacing: -2px; */
	font-family: "Gothic MB101 Heavy", "A-OTF ゴシックMB101 Pr6N";
	-webkit-font-feature-settings: 'palt'1;
	font-feature-settings: 'palt'1;
	margin: 0 auto;
	width: 960px;
	padding: 4rem 0 3rem;
}
.sec_inner { padding: 3rem 5rem;margin: 0 auto;}
/*--------　list / box --------*/
ul {list-style: none;}
/* form
------------------------------------------------------ */
.form {
	/*background: rgb(216,222,221);
	background: linear-gradient(90deg, rgba(216,222,221,1) 0%, rgba(239,245,245,1) 50%, rgba(216,222,221,1) 100%);*/
	background:#2a2b2c;
	padding: 2rem 0;
}
.form.form_b { background: #222; border-top: 2px solid #fff; border-bottom: 2px solid #fff; padding: 2rem 0; }
.form form { width: 960px; margin: 0 auto; }
.form_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.form_sub {
    width: 100%;
    margin: 0 auto 2rem
}

.form_sub p {
    font-family: Noto Sans JP,sans-serif;
    font-size: 3rem;
    text-align: center;
    color: #fff;
    line-height: 1;
    font-weight: 700
}

.form_left {
    width: 60%;
    position: relative
}

.form_must {
    left: .5rem;
    background: #e53935;
    font-size: 1.2rem;
    color: #fff;
    padding: .5rem;
    z-index: 1
}

.form_label,.form_must {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: Noto Sans JP,sans-serif;
    font-weight: 500;
    line-height: 1
}

.form_label {
    left: 5rem;
    font-size: 1.8rem;
    color: #aaa;
    transform-origin: 0 0;
    transition: all .2s ease
}

.form_input {
    position: relative;
    background: #fff;
    border: 0;
    border-radius: 5px;
    padding: 2rem 0 2rem 5rem;
    width: 100%;
    font-family: inherit;
    font-size: 2rem;
    line-height: 1;
    box-shadow: 0 0 0 0 #fff inset;
    transition: all .2s ease
}

.form_input:not(:placeholder-shown)+span {
    color: #5a667f;
    transform: translateY(-2.2rem) scale(0.7)
}

.form_input:focus {
    outline: 0;
    box-shadow: 0 0 0 2px #07f inset
}

.form_input:focus+span {
    color: #07f;
    transform: translateY(-2.2rem) scale(0.7)
}

.form_right {
    width: 38%
}

.form_btn {
    background: #00ad48;
    border-radius: 10rem
}

.form_btn,.form_btn2 {
    width: 100%;
    border: 2px solid #7dff88;
    font-family: Noto Sans JP,sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    position: relative;
    transition: all .2s ease
}

.form_btn2 { 
	width: 100%;
	background: #00a946;
	border: 2px solid #7dff88;
	border-radius: 100px;
	/*font-family: Gothic MB101 DemiBold, sans-serif; */
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	font-size: 3rem;
	line-height: 1;
	color: #fff;
	text-shadow: 0 1px 5px #006e12;
	cursor: pointer;
	position: relative;
	transition: all 0.2s ease;
	height: 6.4rem;
	outline: none;
	padding: 1rem 0 1.5rem;
}

.form_btn2 i,.form_btn i {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    font-size: 80%;
    line-height: 1
}

.form_btn:hover {
    background: #fff;
    border: 2px solid #00ad48;
    color: #00ad48
}

.form_btn2:hover {
    filter: brightness(1.3)
}

.form_attention {
    position: relative
}

.form_caution {
    display: none
}

.form_btn2:hover+.form_caution,.form_btn:hover+.form_caution {
    display: block;
    position: absolute;
    right: 0;
    margin-top: 1rem;
    padding: 1rem;
    background: #ff7;
    font-size: 1.3rem;
    line-height: 1.5;
    z-index: 2;
    text-align: left
}

.form_btn2:hover+.form_caution:before,.form_btn:hover+.form_caution:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 2rem solid #ff7;
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
    border-top: 0
}

.form_notice {
    width: 100%;
    margin: 0 0 0 60rem
}

.form_notice p {
    font-size: 1.4rem;
    color: #fff;
    text-align: center
}

.icon_btn {
    position: absolute;
    right: .7em;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: .7em;
    height: .7em;
    border-top: 3px solid;
    border-right: 3px solid;
    filter: drop-shadow(0 1px 3px #006e12)
}

.ui-autocomplete {
    position: absolute!important;
    background: #fff;
    list-style: none;
    border-radius: 1rem;
    overflow: hidden;
    z-index: 3
}

.ui-autocomplete li {
    border-bottom: 1px solid #ccc;
    padding: 1rem;
    font-family: inherit!important;
    text-align: left
}

.ui-state-focus {
    background: #ff7
}

.ui-helper-hidden-accessible {
    display: none!important
}
/* scfooter
------------------------------------------------------ */
/*#scfooter { width: 100%; position: fixed; bottom: 0; z-index: 5; display: none;}
#scfooter .form_btn:hover + .form_caution { bottom: 7rem; }
#scfooter .form_btn:hover + .form_caution:before { border-top: 2rem solid #ff7; border-bottom: none; bottom: -2rem; top: auto; }
#scfooter .form_btn2:hover + .form_caution { bottom: 7rem; }
#scfooter .form_btn2:hover + .form_caution:before { border-top: 2rem solid #ff7; border-bottom: none; bottom: -2rem; top: auto; }*/
/*-------- button:hover --------*/
@-webkit-keyframes hvr-wobble-vertical {
	16.65% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px)
	}
	33.3% {
		-webkit-transform: translateY(-6px);
		transform: translateY(-6px)
	}
	49.95% {
		-webkit-transform: translateY(4px);
		transform: translateY(4px)
	}
	66.6% {
		-webkit-transform: translateY(-2px);
		transform: translateY(-2px)
	}
	83.25% {
		-webkit-transform: translateY(1px);
		transform: translateY(1px)
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}
@keyframes hvr-wobble-vertical {
	16.65% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px)
	}
	33.3% {
		-webkit-transform: translateY(-6px);
		transform: translateY(-6px)
	}
	49.95% {
		-webkit-transform: translateY(4px);
		transform: translateY(4px)
	}
	66.6% {
		-webkit-transform: translateY(-2px);
		transform: translateY(-2px)
	}
	83.25% {
		-webkit-transform: translateY(1px);
		transform: translateY(1px)
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}
.hvr-wobble-vertical {
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
}
.hvr-wobble-vertical:active, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:hover {
	-webkit-animation-name: hvr-wobble-vertical;
	animation-name: hvr-wobble-vertical;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}
/*--------footer_attention--------*/
p + ul {margin-top: 2rem;}
.service_list2 li {font-size: 1.4rem;}
.attention_box {margin: 2rem auto;background: #e9fbfa;border: solid 2px #cce4e3;}
.attention_box p {width: 95%;margin: 0 auto 15px;padding-top: 1.5rem;line-height: 1.2;font-size: 1.4rem;}
.attention_box h3 {width: 95%;margin: 20px auto 0;font-weight: bold;}
/*--------footer--------*/
footer {width: 100%;padding: 3rem 0;background: #ddd;}
#footer_inner {width: 960px;margin: 0 auto;font-size: 1rem;}
#footer_inner .logo {width: 25%;margin: -1rem auto 3rem;}
#footer_inner ul {display: flex;justify-content: center;}
#footer_inner li {padding: 0 2rem;border-left: 1px solid #ccc;}
#footer_inner li:first-child {padding-left: 0;border: none;}
#footer_inner p {padding-top: .5rem;text-align: center;}
#footer_inner a {text-decoration: none;}
#footer_inner a:link, #footer_inner a:visited, #footer_inner a:hover, #footer_inner a:active {color: #989898;}
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
【 SP 】
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media screen and (max-width:480px) {
	/*--------Basic--------*/
	body {width: 100%;font-size: 4.5vw;}
	a[href^="tel:"] {pointer-events: auto;text-decoration: underline;color: #00e;}
	.body_wrap {width: 100%;padding: 3vw 0;}
	/* Float */
	.img_right, .img_left {float: none;width: 80%;padding: 0 0 2rem;margin: 0 auto;}
	.pc {display: none;}
	.sp {display: block;}
	.xxsmall {font-size: 60%;}
	.xsmall {font-size: 70%;}
	.small {font-size: 80%;}
	.sp_small {font-size: 70%;}
	.large {font-size: 110%;}
	.xlarge {font-size: 130%;}
	.xxlarge {font-size: 150%;}
	.flex p {margin: 0 auto;}
	.middle {margin: 3vw 0;}
	.bottom {margin-top: 3vw;}
	.top {margin-bottom: 3vw;}
	.s_img {width: 80%;}
	/*--------Section / sub_head / sec_inner--------*/
	section {padding:0;}
	.sub_head {width: 94%;font-size: 7vw;padding: 3vw 0 3vw;}
	.sec_inner {width: 95%;	padding: 0;}
	/*--------Header--------*/
	header {background:url( "../img/kh_settle_head_bg_sp.jpg") no-repeat top/cover;}
	header h1 img { width: 100%; height: auto; }
	#header_img {padding: 0;background: none;}
	#header_img h1 {width: auto;padding-bottom: 0vw;}
	header h1 img {margin: 0;padding: 0;}
	/*↓セトルメントページのヘッド画像の上に「再登録ページ」の文言を重ねる*/
	/*↑セトルメントページのヘッド画像の上に「再登録ページ」の文言を重ねる*/
	.header_arrow {bottom: -6vw;right: 1vw;}
	.header_arrow img {width: 7vw;filter: drop-shadow(1px 1px 2px #aaa);}
	h1 {width: 100%;}
	header h1 img {	margin: 0 auto;}
	header p {font-size: 2vw;padding: 0;color:#3f3a17;}
	/* form
	------------------------------------------------------ */
	.form {padding: 2vw 0 1vw;}
	.form form { width: 94%; }
	.form_sub {width: 100%;margin: 0 ;}
	.form_sub p { font-size: 5.5vw; line-height: 1.3; }
	.form_left { width: 100%; }
	.form_must { font-size: 3vw; }
	.form_label { font-size: 4.7vw; left: 12vw; }
	.form_input { font-size: 4.5vw; padding: 5vw 0 1rem 12vw; }
	.form_input:focus + span, .form_input:not(:placeholder-shown) + span { transform: translateY(-2.2rem) scale(0.7); }
	.form_right { width: 100%; }
	.form_btn { display: table; width: auto; margin: 1rem auto 0; padding: 2vw 5vw 3vw; font-size: 6vw;}
	.form_btn2 {display: table;	margin: 1rem auto 0;padding: 2vw 5vw 3vw;font-size: 6vw;height: 5rem;}
	.form_notice p { font-size: 3.5vw; }
	.form_notice  { margin: .5rem 0 0 0;}
	.icon_btn,.form_btn2:hover .icon_btn{background-size: 2.6vw;}
	/* scfooter
	------------------------------------------------------ */
	/*#scfooter.form { padding: 1rem 0; z-index: 3}
	#scfooter .form_left { width: 63%; }
	#scfooter .form_must {  width: 1.5em; text-orientation: upright; text-align: center; padding: 0.5em 0; }
	#scfooter .form_label { left: 8vw; font-size: 3.3vw; }
	#scfooter .form_input { padding: 2rem 0 1rem 8vw; }
	#scfooter .form_right { width: 35%; }
	#scfooter .form_btn { display: block; width: 100%; margin-top: 0; padding: 0; font-size: 4vw; line-height: 1.1; }
	#scfooter .form_btn i { right: 1rem; }
	#scfooter .form_btn:hover + .form_caution { width: 90vw; bottom: 17vw; }
	#scfooter .form_btn:hover + .form_caution:before { right: 12%; left: auto; }
	#scfooter .form_btn2 { display: block; width: 100%; margin-top: 0; padding: 0; font-size: 4vw; line-height: 1.1; }
	#scfooter .form_btn2 i { right: 1rem; }
	#scfooter .form_btn2:hover + .form_caution { width: 90vw; bottom: 17vw; }
	#scfooter .form_btn2:hover + .form_caution:before { right: 12%; left: auto; }*/
	/*--------footer_attention--------*/
	.service_list2 {text-indent: -1em;padding-left: 1em;}
	/*--------footer-------*/
	footer {padding: 4vw 0;}
	#footer_inner {width: 90%;}
	#footer_inner p {text-align: center;}
}