/* 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 {padding: 0;max-width: 100%;height: auto;}* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}a[href^="tel:"] {pointer-events: none;text-decoration: none;}

/*---------------------------------------------------------------------
【 Basic 】
---------------------------------------------------------------------*/
html {font-size: 62.5%;}
body {width: 100%; font-size: 4.8vw; color: #292929; font-weight: 500; line-height: 1.7;-webkit-font-feature-settings: 'palt'1; font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif;}
.pc {display: none;}
.sp {display: block;}
main {overflow: hidden;}
/*layout*/
.clearfix:before, .clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
.flex {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
.flex + .flex {margin: 2rem 0 0;}
.middle {margin: 6vw auto;}
.bottom {margin-bottom: 6vw ;}
.top {margin-top: 6vw ;}

/*text*/
.u {text-decoration: underline;}
.b {font-weight: bold;}
.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: 120%;}
.xlarge {font-size: 140%;}
.xxlarge {font-size: 160%;}
.sans {font-family: 'Noto Sans JP', sans-serif;}
.serif {font-family: 'Noto Serif JP', "serif";}
.notice {padding-top: 1rem; font-size: 2.2vw; text-align: right;font-family: sans-serif; color: #777; letter-spacing: 1px;}
.le {letter-spacing: -2px;}

/*rubi*/
.rubi{ display: inline-block; line-height: 1;}
.rubi ruby{ vertical-align: bottom; display: block;}
.rubi rb{ display: table-footer-group;}
.rubi rt { display: table-header-group; font-size: .4em; text-align: center;font-weight:100;}

/*mail*/
.ui-autocomplete {position: absolute !important; background: #fff; list-style: none;border-radius: 1rem; overflow: hidden; z-index: 10;}
.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;}

/*---------------------【 PC 】---------------------*/
@media screen and (min-width:480px){
	/*--------Basic--------*/
	html {font-size: 62.5%;}
	body {width: 100%;font-size: 2.2rem;color: #111111;font-weight: 500;line-height: 1.7;-webkit-font-feature-settings: 'palt'1; font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif;overflow-x: hidden;background-size: cover;background-repeat: no-repeat;}
	.pc {display: block;}
	.sp {display: none;}
	/*layout*/
	.img_right {float: right;padding: 0 0 2rem 2rem;}
	.img_left {float: left;padding: 0 2rem 2rem 0;}
	.img_center {margin: -2rem auto 2rem;}
	.middle {margin: 2rem auto;}
	.bottom {margin-bottom: 2rem ;}
	.top {margin-top: 2rem ;}
	/*text*/
	.notice {padding-top: 1rem; font-size: 1.2rem; text-align: right; font-weight: 400; font-family: sans-serif; color: #777; letter-spacing: 1px;}
}

/*---------------------【 PC 】---------------------*/
@media screen and (min-width:480px){
    section {
        padding: 8rem 0;
    }

    section img {
        width: 100%;
    }

    .form {
        padding-bottom: 0;
    }

    .wrapper {
        max-width: 750px;
        margin: 0 auto;
    }

    h2 {
        font-size: 4rem;
        padding-bottom: 4rem;
    }

    h3 {
        font-size: 2.8rem;
        padding-bottom: 2rem;
    }

    h4 {
        font-size: 2.2rem;
        padding-bottom: 0;
    }

	.kv1 {
        background: url(../img/opt_head1_bg.jpg) no-repeat center top;
    }

	.kv2 {
        background: url(../img/opt_head2_bg.jpg) no-repeat center top;
    }
}



/*---------------------------------------------------------------------
【 form 】
---------------------------------------------------------------------*/

.form-area { margin: 0 auto;padding: 6vw 6vw;background: #045CB6;}
.form-box {background: #fff; padding:1.6rem 2rem; border-radius: 6px;}
.form-title {padding-bottom: 0;font-size: 4.4vw;padding: 0 0 3vw;text-align: center;font-family: 'Noto Sans JP', sans-serif; line-height: 1.4;}
.form_inner {
    margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: space-between;
}
.form-area form {width: 100%;margin: 0 auto;}
.form_left {width: 100%;position: relative;margin: 0 auto;}
.form_must {position: absolute; padding: 0.5rem;left: 0.5rem;top: 50%;transform: translateY(-50%);background: #e53935;color: #fff;font-family: 'Noto Sans JP', sans-serif;font-size: 1.2rem;line-height: 1;z-index: 1;}
.form_label {position: absolute;top: 50%;left: 12vw;color: #aaa;transform: translateY(-50%);transform-origin: 0 0;transition: all 0.2s ease;font-family: 'Noto Sans JP', sans-serif;font-size: 3.8vw;line-height: 1;}
.form_input {position: relative;width: 100%;height: 14vw;background: #fff;border: 1px solid #535353;border-radius: 5px;box-shadow: 0 0 0 0 #fff inset;transition: all 0.2s ease;padding: 5vw 0 1rem 12vw;font-family: inherit;font-size: 4.5vw;line-height: 1;}
.form_input:not(:placeholder-shown) + span {color: #5a667f;transform: translateY(-2.2rem) scale(0.7);}
.form_input:focus {outline: none;box-shadow: 0 0 0 2px #07f inset;}
.form_input:focus + span {color: #07f;transform: translateY(-2.2rem) scale(0.7);}
.form_right {width: 100%;margin: 2vw auto 0;}
.form_notice {margin: 1rem auto 0;font-size: 3vw; line-height: 1.6; color: #fff ;}
.form_notice a { color: #61b6d5;}
.form_btn {width: 100%; background: #00ad48; border: 2px solid #7dff88; border-radius: 100px; font-family: 'Noto Sans JP', sans-serif; font-size: 4.2vw; font-weight: 600; line-height: 1; color: #fff; cursor: pointer; position: relative; transition: all 0.2s ease; height: 14vw; padding: 2vw 6vw;}
.form_btn span{position:absolute;display:block;width:100%;text-align:center;top:48%;left:0;transform:translateY(-50%) ;line-height: 1.3;}
.form_btn span::after{position:relative;display:inline-block;content:"";width:.5em;height:.5em;border-top:2px solid;border-right:2px solid;transform:translateY(-.07em) rotate(45deg);margin-left:0.4em;/*filter:drop-shadow(0 1px 3px #006e12)*/}
.form_btn:hover {filter: brightness(1.3)}
.btn_copy{margin: 0.4em auto 0; text-align: center; font-size: 1.3rem; opacity: 80%;}



/*---------------------【 PC 】---------------------*/
@media screen and (min-width:480px){
	.form-area {padding:3rem 0;}
	.form-area .container{padding: 0 8rem;}
	.form-box {padding: 2rem 6rem;}
	.form_right {width: 100%;margin: 1rem auto 0;}
	.form-title {font-size: 2.2rem;padding-bottom: 1rem;}
	.form_label {font-size: 1.5rem;left: 5rem;}
	.form_must {padding: 0.5rem; left: 0.5rem; font-size: 1.2rem;}
	.form_input {height: 6rem; padding: 2rem 0 2rem 5rem; font-size: 2rem;}
	.form_btn {font-size: 2rem; height: 6rem;padding: 1rem 0 1.2rem;}
	.form_notice {font-size: 1.4rem;}
}



/*---------------------------------------------------------------------
【 scfooter】
---------------------------------------------------------------------*/
#scfooter {width: 100%;position: fixed;bottom: 0;z-index: 999;display: none;padding: 1rem 0;background: #292929;}
#scfooter form {width: 94%;max-width:100%; margin: 0 auto;}
#scfooter .form_inner {width: 100%;max-width:750px;}
#scfooter .form_left {width: 63%;position: relative;}
#scfooter .form_right {width: 35%;margin: 0 auto 0;}
#scfooter .form_input{border:none; padding: 2rem 0 1rem 8vw;}
#scfooter .form_btn {display: block;width: 100%;margin-top: 0;padding: 0;font-size: 4vw;line-height: 1.1;height: 14vw;}
#scfooter .form_btn span{text-align: center;}
#scfooter .form_btn span::after {top: -2vw;}
#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;}

/*-------- 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;}

/*---------------------【 PC 】---------------------*/
@media screen and (min-width:480px){
	#scfooter .form_label {font-size: 1.5rem;left: 5rem;}
	#scfooter .form_btn {font-size: 2.6rem;height: 6rem;}
	#scfooter form {max-width:100%;}
	#scfooter .form_btn span::after {top: 0;}
	#scfooter {width: 100%;position: fixed;bottom: 0;z-index: 999;display: none;padding: 2rem 0;background: #292929;}
	#scfooter.form {max-width:100%;}
	#scfooter form {width: 100%;max-width:750px;}
	#scfooter .form_inner {width: 100%;max-width:750px;}
	#scfooter .form_left {width: 59%;position: relative;}
	#scfooter .form_right {width: 39%;margin: 0 auto 0;}
	#scfooter .form_input{border:none; padding: 2rem 0 1rem 5rem;}
	#scfooter .form_must {width: 34px; padding: 0.5rem;}
}



/*---------------------------------------------------------------------
【 footer 】
---------------------------------------------------------------------*/
footer {width: 100%;padding: 8vw 0 15vw;;background: #ddd;}
#footer_inner {width: 96%; max-width:750px;margin: 0 auto;font-size: 1rem;}
#footer_inner ul {display: flex;justify-content: center;}
#footer_inner li {padding: 0 2vw; 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;color: #989898;}
/*---------------------【 PC 】---------------------*/
@media screen and (min-width:480px){
	footer {padding: 3rem 0;}
	#footer_inner {width: 100%;}
	#footer_inner li {padding: 0 2rem;}
}

/*---------------------------------------------------------------------
【 prihead 】
---------------------------------------------------------------------*/
#prihead img{margin:0 auto;}
/*--------prihead--------*/
#prihead {z-index: 20;position: fixed;width: 100%;font-size: 5vw;font-weight: bold;text-align: center;background:#F16D00;color: #fff;}
#prihead #CDT {width: 100%; padding: 1vw 0; margin: 0 auto;line-height: 1;font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif, monospace;}
#prihead2{background: #151B35;}
#prihead2 img{margin: 0 auto; padding: 0 2vw;}
/*---------------------【 PC 】---------------------*/
@media screen and (min-width:480px){
	#prihead {font-size: 2.2rem;}
	#prihead #CDT {max-width: 960px;padding: 1rem 0;}
}

/*---------------------------------------------------------------------
【 video 】
---------------------------------------------------------------------*/
video {
	width: 100%;
}