body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background: #16314F;
    color: #fff;
    position: relative;
}

.mincho {
    font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", Meiryo, serif;
}

img {
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}

img.auto {
    image-rendering: auto;
}

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

.wrap {
    width: 880px;
    margin: 0 auto;
}

a {
    display: inline-block;
    color: #222;
    outline: none;
}

a.block {
    display: block;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

h2 {
    font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", Meiryo, serif;
    padding: .5em 0;
    margin: 0;
    position: relative;
    text-align: center;
    font-size: 50px;
    font-weight: 900;
    margin-bottom: 1.2em;
}

.relative {
    position: relative;
}

.pc_block {
    display: block;
}

.sp_only {
    display: none;
}

.sp_span {
    display: none;
}

.mb1em {
    margin-bottom: 1em;
}

.mb2em {
    margin-bottom: 2em;
}

.pad3em_0 {
    padding: 3em 0;
}

.tab_none {
    display: block;
}

header {
    position: relative;
    background: #16314F;
}


/*step*/

.step_sec {
    padding: 4em 0;
}

.step_area {
    padding: 1em;
}

.step_box {
    display: block;
    padding-bottom: 1em;
}

.step_title_area {
    display: flex;
    align-items: flex-start;
}

.step_icon {
    color: #fff;
    background: #000;
    position: relative;
    width: 160px;
    padding: .3em .5em;
    line-height: 1;
    font-size: 2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Kanit;
    z-index: 3;
}

.step_icon::after {
    content: '';
    display: block;
    left: 100%;
    top: 0;
    border-style: solid;
    border-width: .5em;
    border-color: transparent transparent transparent #000;
    position: absolute;
    z-index: 2;
}

.step_icon small {
    padding-top: 3px;
}

.step_icon b {
    font-size: 1.2em;
    display: inline-block;
    vertical-align: middle;
}

.step_title {
    width: calc(100% - 150px);
    padding: .5em;
    padding-left: 100px;
    font-weight: bold;
    color: #000;
    //background: #feb100;
    font-size: 1.1em;
    position: relative;
    z-index: 2;
}

.step_title::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #feb100;
    transition: all .5s linear;
    z-index: -1;
}

.step_body {
    font-size: 1.1em;
    padding: 1.5em 1em;
}


/*form*/

.sec_form_area {
    background: #dc9;
    background: #a85;
}

.form_area {
    padding: 2em;
    //border-radius: 4px;
    //background: #dc9;
}

.form_area h3 {
    padding: 0;
    margin: 0;
    text-align: center;
    margin-bottom: 1em;
}

.form_area .inps {
    padding: 10px 0;
}

.inps label {
    display: inline-block;
    width: 16em;
}

.form_area input[type=text],
.form_area input[type=tel],
.form_area input[type=email] {
    padding: 5px;
    font-size: 16px;
    width: calc(100% - 17em);
}

.form_area select {
    padding: 5px;
    font-size: 16px;
}

.form_area textarea {
    padding: 5px;
    font-size: 16px;
    width: 100%;
    height: 7em;
}

.form_area .confirm_area {
    text-align: center;
    padding: 5px 0;
}

.form_area .confirm_area>div {
    padding: 5px 0;
}

.form_area button {
    font-size: 18px;
    padding: 1em 6em;
    border-radius: 4px;
    border: 1px solid #fff;
    background: #A38B77;
    color: #fff;
}

.form_area button[disabled] {
    opacity: .3;
}

.form_area a {
    color: rgb(60, 255, 0);
}

#mail_mess {
    color: rgb(60, 255, 0);
}


/*foot*/

footer {
    font-size: 14px;
}

.foot_nav_area {
    background: #dc9;
    padding: 3px 0;
}

.foot_nav {
    display: flex;
    justify-content: space-around;
}

.copy {
    background: #025;
    color: #fff;
    text-align: center;
    padding: 3px 0;
}


/*mail*/

#mail_loading {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .3);
    display: none;
}

#mail_loading.active {
    display: flex;
}

#mail_loading img {
    width: 100px;
}


/*efe*/

.has_effect {
    position: relative;
}

.over_none {
    overflow: hidden;
}


/*p5*/

.p5_sec {
    padding: 1em 0;
}

.carousel {}

.carousel-cell {
    width: 66%;
    height: 600px;
    margin-right: 10px;
    //background: #8C8;
    border-radius: 5px;
    background-position: center center;
    background-size: cover;
}

.carousel img {
    display: block;
    height: 400px;
    margin-right: 10px;
    border-radius: 8px;
}


/*p1*/

.p1_sec {
    padding: 2em 0;
}

.p1_wrap {
    width: 540px;
    margin: 0 auto;
}


/*p2*/

.p2_sec {
    background: #D196C2;
    margin-top: 1em;
    padding: 3em 0;
}

.p2_h {
    padding-top: 4em;
}

.p2_h2 {
    padding: 2em;
    text-align: center;
}

.p2_h2 b {
    display: inline-block;
    padding: .5em 2em;
    border-radius: 4px;
    border: 1px solid #fff;
    background: #E72E3E;
    color: #fff;
    font-size: 2em;
}

.p2_tx {
    text-align: center;
    font-size: 1.7em;
    color: #fff;
}


/*p3*/

.p3_sec {
    padding: 4em 0;
}

.p3_tx {
    text-align: center;
    font-size: 1.7em;
    color: #000;
}

.p3_tx span {
    display: inline;
    position: relative;
    z-index: +1;
}

.p3_tx span::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    height: .3em;
    z-index: -1;
    background: rgba(255, 255, 100, .5);
    border-radius: 172px 400px 177px 400px;
    width: 0%;
    transition: all .2s linear;
}

.p3_tx.active span::after {
    transition: all 1.2s linear;
    width: 100%;
}

.p3_tx span:nth-of-type(1)::after {
    transition-delay: 0s;
}

.p3_tx span:nth-of-type(2)::after {
    transition-delay: .5s;
}

.p3_tx span:nth-of-type(3)::after {
    transition-delay: 1s;
}

.p3_tx span:nth-of-type(4)::after {
    transition-delay: 1.5s;
}


/*p4*/

.p4_sec {
    padding: 4em 0;
    background-image: url(images/bg_p4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

.p4_h {
    padding: 3em 15em;
}

.p4_tx {
    text-align: left;
    font-size: 1.7em;
    color: #123471;
    padding: 3em;
    padding-top: 1em;
}

.p4_tx b {
    font-weight: 900;
}


/*p6*/

.p6_sec {
    padding: 5em 0;
    background-image: url(images/bg_p4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

.p6_tx {
    text-align: center;
    font-size: 1.7em;
    color: #123471;
}

.h2_div {
    position: relative;
    color: #000;
    padding: 3em 0;
    text-align: center;
    font-weight: bold;
}

.h2_div.top_bar {
    margin-top: 10px;
}

.h2_div.top_bar.top_black {
    border-top: 1em solid #000;
}

.h2_div .title {
    font-size: 1.8em;
    font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", Meiryo, serif;
    line-height: 1.4;
    margin-bottom: .4em;
    color: #c93;
}

.h2_div .desc {
    color: #fb5;
    font-size: 1em;
    padding: 2px 0;
    line-height: 1.3;
}

.flex_3 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 1em;
    padding-bottom: 3em;
}

.flex_3 .box3 {
    width: calc((100% - 60px) / 3);
}

.flex_3 .box3 b {
    display: block;
    padding: 8px 0;
    text-align: center;
    font-size: 1.3em;
    line-height: 1.2;
    min-height: 70px;
}

.flex_3 .box3 b.big {
    font-size: 2em;
}

.flex_3 .box3 p {
    padding: 0em 0;
    font-size: .9em;
    margin: 0;
    line-height: 1.4;
}

.flex_3 .box3 .img3 {
    overflow: hidden;
}

.flex_3 .box3 .img3 img {
    transition: all .3s ease;
    transform: scale(1);
}

.flex_3 .box3.active .img3 img {
    transition: all 1.3s ease;
    transform: scale(1.2);
}

.flex_3 .box3:nth-child(0) .img3 img {
    transition-delay: 0s;
}

.flex_3 .box3:nth-child(1) .img3 img {
    transition-delay: .1s;
}

.flex_3: .box3nth-child(2) .img3 img {
    transition-delay: .2s;
}

.flex_3 .box3:nth-child(3) .img3 img {
    transition-delay: .3s;
}

.flex_3 .box3:nth-child(4) .img3 img {
    transition-delay: .4s;
}

.flex_3 .box3:nth-child(5) .img3 img {
    transition-delay: .5s;
}

.flex_2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 3em;
}

.flex_2 .box2 {
    width: calc((100% - 60px) / 2);
    padding: 0 2em;
}

.flex_2 .box2 b {
    display: block;
    padding: 8px 0;
    text-align: center;
    font-size: 1.3em;
    line-height: 1.2;
    min-height: 70px;
}

.flex_2 .box2 b.big {
    font-size: 2em;
    padding-top: 15px;
}

.flex_2 .box2 p {
    padding: 0em 0;
    font-size: .9em;
    margin: 0;
    line-height: 1.4;
}


/*sep_bar*/

.sep_bar {
    position: relative;
    color: #000;
    height: 15px;
    text-align: center;
    z-index: 2;
    background: #fff;
}

.sep_bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px;
    border-top: 5px solid #f00;
    border-bottom: 5px solid #cb8;
}

.sep_bar.bottom {
    background: transparent;
}

.sep_bar.bottom::before {
    border-bottom: 5px solid #f00;
    border-top: 5px solid #cb8;
}

.sep_bar .mark {
    position: absolute;
    left: 1%;
    top: -40px;
    width: 90px;
}

.sep_bar.head .mark {
    position: absolute;
    left: -10%;
    top: -130px;
    width: 300px;
}

.sep_bar.bottom .mark {
    position: absolute;
    right: 1%;
    right: -140px;
    left: auto;
    top: -150px;
    width: 290px;
}


/*qa*/

.qa_sec {
    padding: 3em 0;
    padding-bottom: 1.5em;
}

.qa_h {
    padding: 3em 13em;
}

.qa_tx {
    text-align: center;
    font-size: 2em;
    padding-bottom: 2em;
}

.qa_ul {
    padding: 0 1em;
    margin-bottom: 3em;
}

.qa_ul li {
    position: relative;
    padding: .3em 1em;
    padding-left: 2em;
    border-radius: 6px;
    background: #EeC12B;
    font-size: 1.7em;
    color: #fff;
    margin-bottom: 1em;
    line-height: 1.4;
}

.qa_ul li:before {
    content: "Q.";
    display: inline-block;
    padding-right: 1em;
    position: absolute;
    left: .5em;
    top: .2em;
}

.qa_bottom {
    position: relative;
}

.qa_1 {
    padding: 10px 2em;
}

.qa_2 {
    text-align: right;
}

.qa_2 img {
    max-width: 100%;
}

.qa_cont {
    position: relative;
}

.qa_cont a {
    display: block;
}

.qa_yes {
    position: absolute;
    left: 7%;
    bottom: 90%;
    width: 30%;
    transform: translateY(-200%);
    opacity: 0;
    transition: all .7s linear;
}

.active .qa_yes {
    transform: translateY(0);
    opacity: 1;
    transition: all .7s linear;
}

.qa_3 {
    padding: 3em;
}


/*p7*/

.p7_sec {}

.p7_bg {
    background-image: url(images/bg_p7.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding-bottom: 2em;
}


/*p8*/

.p8_sec {
    padding-bottom: 2em;
}


/*p9*/

.p92 {
    padding: 2em;
    padding-bottom: 0;
}

.flex_2.center {
    justify-content: center;
    align-items: center;
}

.p92a,
.p92b {
    width: 50%;
    padding: 1em;
}

.p92a {
    font-size: 1.4em;
    text-align: left;
    width: 65%;
}

.p92b {
    width: 35%;
}


/*p10*/

.p10_sec {
    background: #16314F;
    padding: 1em 0;
}

.sec_com {
    padding: 2em;
    text-align: center;
    color: #999;
}

.sec_com b {
    display: block;
    text-align: center;
    font-size: 1.5em;
}

.sec_com small {
    display: block;
    text-align: center;
    line-height: 1.2;
    font-size: .7em;
}

.hana {
    width: 80px;
    height: 80px;
    position: absolute;
    opacity: 0;
    transition: all 1s linear;
    transform: translateY(-50%);
}

.active .hana {
    opacity: 1;
    transform: translateY(0);
    transition: all 1s linear;
}

.to_top {
    position: fixed;
    right: 30px;
    bottom: 11vh;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    background: rgba(230, 230, 230, .4);
    z-index: 5;
}

.to_top a {
    display: block;
    font-size: 3em;
    line-height: .9;
    opacity: .3;
}

@media(min-width:640px) {
    .step_area.active .step_title::after {
        width: 100%;
        transition: all .7s linear;
    }
}

@media(max-width:920px) {
    .wrap {
        width: 100%;
    }
}

@media(max-width:768px) {
    .tab_none {
        display: none;
    }
}

@media(max-width:640px) {
    .wrap,
    .p2_area,
    .p1_wrap {
        width: 100%;
    }
    .hana {
        width: 50px;
        height: 50px;
    }
    .pc_block {
        display: inline;
    }
    .pc_only {
        display: none;
    }
    .sp_only {
        display: block;
    }
    .sp_block {
        display: block;
    }
    .sp_span {
        display: inline-block;
    }
    .sp_none {
        display: none;
    }
    .sep_bar.head .mark {
        left: -6%;
        top: -63px;
        width: 150px;
    }
    .sep_bar.bottom .mark {
        right: 1%;
        top: -56px;
        width: 150px;
    }
    .p2_sec {
        padding-top: 0;
    }
    .p2_h2 {
        padding: 2em 1em;
    }
    .p2_h2 b {
        padding: .5em 1em;
        font-size: 1em;
    }
    .p2_tx {
        font-size: 1.2em;
        padding: 0 1em;
        text-align: left;
    }
    .p3_tx {
        font-size: 1.3em;
    }
    .p4_sec {
        padding-top: 1em;
    }
    .p4_h {
        padding: 3em 2em;
    }
    .p4_tx {
        font-size: 1.3em;
        padding: 1em;
    }
    .p5_sec {
        padding: .5em 0;
    }
    .carousel img {
        height: 250px;
    }
    .p6_tx {
        font-size: 1.3em;
    }
    .qa_sec {
        padding: 2em 0;
    }
    .qa_h {
        padding: 2em 1em;
    }
    .qa_tx {
        font-size: 1.2em;
        font-weight: bold;
    }
    .qa_ul li {
        font-size: 1.3em;
    }
    .qa_1 {
        padding: 10px 1em;
    }
    .qa_2 {
        text-align: center;
    }
    .qa_cont {
        margin-top: 3em;
    }
    .qa_3 {
        padding: 2em;
    }
    .h2_div .desc {
        padding: 1em 2em;
        text-align: left;
    }
    .h2_div .mark {
        position: absolute;
        left: 3%;
        top: 1.6em;
        width: 65px;
    }
    .flex_3,
    .flex_2 {
        padding: 1em 0;
    }
    .flex_3 .box3,
    .flex_2 .box2 {
        width: 100%;
        padding: 1em;
    }
    .flex_3 .box3 p,
    .flex_2 .box2 p {
        font-size: 1.2em;
    }
    .p92 {
        padding: 1em;
    }
    .p92a,
    .p92b {
        width: 100%;
        padding: 1em 0em;
    }
    .step_sec {
        padding: 2em 0;
    }
    h2 {
        font-size: 40px;
    }
    .step_title_area {
        flex-wrap: wrap;
    }
    .step_icon,
    .step_title {
        width: 100%;
    }
    .step_icon::after {
        left: calc(50% - .5em);
        top: 100%;
        border-color: #000 transparent transparent transparent;
    }
    .step_title {
        padding: 1em .5em;
    }
    .step_box.active .step_title::after {
        width: 100%;
        transition: all .7s linear;
    }
    .sec_com {
        padding: 2em 0em;
    }
    .sec_com b {
        font-size: 1.3em;
    }
    .sec_com small {
        font-size: .6em;
    }
    .inps label {
        display: block;
        width: 100%;
    }
    .form_area input[type=text],
    .form_area input[type=tel],
    .form_area input[type=email] {
        width: 100%;
    }
    footer {}
}