@charset "utf-8";

/* common
-------------------------------------------------------*/

#wrapper {
    overflow: hidden;
}

.sp {
    display: none;
}

.area {
    padding: 70px 20px;
    box-sizing: border-box;
}

.sans {
    font-family: 'Noto Sans JP', sans-serif;
}

.inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
}

.ttl01 {
    text-align: center;
    margin: 0 0 40px;
    line-height: 1.3;
    color: #083b6d;
    font-weight: 700;
    font-size: 250%;
}

.contact {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.blue {
    color: #083b6d;
}

.orange {
    color: #ff9900;
}

@media screen and (max-width:768px) {
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    .area {
        padding: 30px 20px;
    }
    .inner {
        max-width: 100%;
    }
    .ttl01 {
        margin: 0 0 30px;
        font-size: 130%;
    }
    .contact {
        flex-flow: column;
    }
    .contact li {
        width: 100%;
        height: 100%;
    }
}


/* header
-------------------------------------------------------*/

#header {
    box-sizing: border-box;
    padding: 20px;
}

#header .inner {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}

#header .txt {
    font-size: 75%;
    line-height: 1.3;
    margin: 0 0 10px;
}

#header .logo img {
    max-width: 450px;
}

#header .contact {
    flex-flow: row nowrap;
    justify-content: flex-end;
}

#header .contact li {
    padding-left: 20px;
}

#header .contact .tel img {
    max-width: 264px;
}

#header .contact .mail img {
    max-width: 252px;
}

@media screen and (max-width:768px) {
    #header {
        text-align: center;
        padding: 10px;
    }
    #header .wrap {
        width: 100%;
    }
    #header .logo img {
        max-width: 250px;
    }
    #header .contact {
        justify-content: center;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 9;
        background: rgba(255, 255, 255, 0.9);
        padding: 10px 5px;
        width: 100%;
        box-sizing: border-box;
    }
    #header .contact li {
        padding: 0 5px!important;
        width: auto;
    }
}


/* visual
-------------------------------------------------------*/

#visual {
    padding: 0;
    box-sizing: border-box;
    background: url(../img/visual_bg.png)no-repeat center/cover;
}

#visual .inner {
    max-width: 1400px;
}

@media screen and (max-width:768px) {}


/* footer
-------------------------------------------------------*/

#footer {
    text-align: center;
    border-top: 2px solid #0474bc;
}

#footer.area {}

#footer .logo {
    margin: 0 0 30px;
}

#footer .logo img {
    max-width: 130px;
}

#footer .txt {
    font-size: 90%;
    text-align: center;
    margin: 0 0 20px;
    line-height: 1.4;
}

#footer .copy {
    font-size: 75%;
}

@media screen and (max-width:768px) {
    #footer.area {
        padding: 30px 20px 100px;
    }
    #footer .logo img {
        max-width: 100px
    }
}


/* banner
-------------------------------------------------------*/

.banner.area {
    padding: 0;
}

.banner .ttl {
    text-align: center;
    font-size: 170%;
    color: #fff;
    font-weight: 700;
    background: #083b6d;
    padding: 20px;
}

.banner .box {
    background: #0474bc;
}

.banner .contact {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    justify-content: center;
}

.banner .contact li {
    margin: 0 25px;
}

.banner .contact .tel img {
    max-width: 405px;
}

.banner .contact .mail img {
    max-width: 385px;
}

@media screen and (max-width:768px) {
    .banner .ttl {
        font-size: 150%;
        line-height: 1.4;
        padding: 10px;
    }
    .banner .contact {
        padding: 30px 20px;
    }
    .banner .contact li {
        margin: 0;
        text-align: center;
    }
    .banner .contact li.tel {
        margin: 0 0 20px;
    }
    .banner .contact .tel img {
        max-width: 405px;
    }
    .banner .contact .mail img {
        max-width: 385px;
    }
}


/* video
-------------------------------------------------------*/

#video.area {
    padding: 20px;
}

@media screen and (max-width:768px) {
    #video iframe {
        height: 250px;
    }
}


/* problem
-------------------------------------------------------*/

#problem {
    background: url("../img/bg01.png")no-repeat center/cover;
}

#problem .ttl01 {
    padding: 0 0 50px;
    margin: 0 0 50px;
    border-bottom: 3px solid #083b6d;
}

#problem ul li {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: flex-start;
}

#problem ul li:not(:last-child) {
    margin: 0 0 20px;
}

#problem ul li .icon {
    margin: 0 10px 0 0;
}

#problem ul li .icon img {
    max-width: 29px;
    min-width: 29px;
}

#problem ul li .txt {
    font-size: 120%;
    font-weight: 700;
    line-height: 1.3;
}

@media screen and (max-width:768px) {
    #problem {
        background: url("../img/bg01_sp.png")no-repeat center/cover;
    }
    #problem .ttl01 {
        padding: 0 0 20px;
        margin: 0 0 30px;
        border-bottom: 2px solid #083b6d;
    }
    #problem ul li {
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        justify-content: flex-start;
    }
    #problem ul li:not(:last-child) {
        margin: 0 0 10px;
    }
    #problem ul li .icon {
        margin: 0 10px 0 0;
    }
    #problem ul li .icon img {
        max-width: 20px;
        min-width: 20px;
    }
    #problem ul li .txt {
        font-size: 100%;
    }
}


/* answer
-------------------------------------------------------*/

#answer {
    position: relative;
    background: url("../img/bg02.png")no-repeat left center/cover;
}

#answer.area {
    padding: 170px 20px;
}

#answer::before {
    position: absolute;
    display: block;
    content: "";
    background: url("../img/arrow01.png")no-repeat center/591px 160px;
    width: 591px;
    height: 160px;
    right: 50%;
    transform: translate(50%, 0);
    top: -80px;
}

#answer .box {
    width: 65%;
    margin: 0 0 0 auto;
}

#answer .box .ttl01 {
    border-bottom: 1px solid #083b6d;
    padding: 0 0 20px;
    margin: 0 0 40px;
    text-align: left;
    font-size: 310%;
}

#answer .box .txt {
    font-size: 150%;
    font-weight: 700;
    line-height: 1.5;
}

@media screen and (max-width:768px) {
    #answer {
        background: url("../img/bg02_sp.png")no-repeat left center/cover;
    }
    #answer.area {
        padding: 70px 20px;
    }
    #answer::before {
        background: url("../img/arrow01.png")no-repeat center/295px 80px;
        width: 295px;
        height: 80px;
        top: -30px;
    }
    #answer .box {
        width: 100%;
        margin: 0;
    }
    #answer .box .ttl01 {
        padding: 0 0 20px;
        margin: 0 0 20px;
        font-size: 180%;
    }
    #answer .box .txt {
        font-size: 110%;
    }
}


/* strengths
-------------------------------------------------------*/

#strengths.area {
    padding: 0 0 70px;
}

#strengths .ttl01 {
    background: #083b6d;
    color: #fff;
    padding: 20px;
}

#strengths ul {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: space-between;
}

#strengths ul li {
    width: 32%;
}

#strengths ul li .txt_box {
    background: #f0f0f0;
    padding: 20px;
}

#strengths ul li .ttl {
    font-size: 110%;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
    margin: 0 0 20px;
}

#strengths ul li .txt {
    font-size: 90%;
    line-height: 1.6;
}

@media screen and (max-width:768px) {
    #strengths.area {
        padding: 0 0 30px;
    }
    #strengths .ttl01 {
        padding: 10px;
    }
    #strengths ul {
        flex-flow: column;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
    }
    #strengths ul li {
        width: 100%;
    }
    #strengths ul li:not(:last-child) {
        margin: 0 0 20px;
    }
}


/* characteristics
-------------------------------------------------------*/

#characteristics .inner {
    max-width: 1200px;
}

#characteristics ul {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: space-between;
}

#characteristics ul li {
    width: 24%;
}

#characteristics ul li .img_box {
    position: relative;
}

#characteristics ul li .ttl {
    position: absolute;
    display: block;
    content: "";
    color: #fff;
    font-size: 140%;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    right: 50%;
    ;
    top: 50%;
    transform: translate(50%, -50%);
}

#characteristics ul li .txt {
    background: #f0f0f0;
    padding: 20px;
    line-height: 1.6;
    font-size: 90%;
}

@media screen and (max-width:768px) {
    #characteristics ul {
        flex-flow: column;
        align-items: center;
        justify-content: center;
    }
    #characteristics ul li {
        width: 100%;
    }
    #characteristics ul li:not(:last-child) {
        margin: 0 0 20px;
    }
}


/* qa
-------------------------------------------------------*/

#qa {
    background: url("../img/bg03.png")no-repeat center/cover;
}

#qa .ttl01 {
    color: #fff;
}

#qa ul {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 0 50px;
}

#qa ul li {
    width: 30%;
}

#qa ul li .txt {
    background: #fff;
    padding: 20px;
    line-height: 1.6;
    font-size: 90%;
}

#qa .btm {
    color: #fff;
    line-height: 2;
}

@media screen and (max-width:768px) {
    #qa ul {
        flex-flow: column;
        align-items: enter;
        justify-content: center;
        margin: 0 0 30px;
    }
    #qa ul li {
        width: 100%;
    }
    #qa ul li:not(:last-child) {
        margin: 0 0 20px;
    }
}


/* voice
-------------------------------------------------------*/

#voice .ttl01 {
    padding: 0 0 50px;
    margin: 0 0 50px;
    border-bottom: 3px solid #083b6d;
}

#voice ul li {
    background: #f0f0f0;
    padding: 30px 20px 20px;
    position: relative;
}

#voice ul li:not(:last-child) {
    margin: 0 0 70px;
}

#voice ul li .num_icon {
    position: absolute;
    left: 20px;
    top: -20px;
}

#voice ul li .num_icon img {
    max-width: 164px;
}

#voice ul li .ttl {
    font-size: 160%;
    font-weight: 700;
    line-height: 1.6;
    border-bottom: 2px solid #083b6d;
    padding: 0 0 20px;
    margin: 0 0 20px;
}

#voice ul li .txt {
    margin: 0 0 40px;
    line-height: 2;
}

#voice ul li .box {
    background: #fff;
    padding: 20px;
}

#voice ul li .box .name_box {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 10px;
}

#voice ul li .box .name_box .icon {
    margin: 0 5px 0 0;
}

#voice ul li .box .name_box .icon img {
    max-width: 27px;
}

#voice ul li .box .name_box .name {
    font-size: 105%;
    font-weight: 700;
}

#voice ul li .box .txt_in {
    line-height: 2;
}

@media screen and (max-width:768px) {
    #voice .ttl01 {
        padding: 0 0 20px;
        margin: 0 0 40px;
        border-bottom: 2px solid #083b6d;
    }
    #voice ul li {
        padding: 20px;
    }
    #voice ul li:not(:last-child) {
        margin: 0 0 40px;
    }
    #voice ul li .num_icon {
        left: 10px;
        top: -15px;
    }
    #voice ul li .num_icon img {
        max-width: 120px;
    }
    #voice ul li .ttl {
        font-size: 110%;
        padding: 0 0 15px;
        margin: 0 0 15px;
    }
    #voice ul li .txt {
        margin: 0 0 20px;
        line-height: 1.6;
    }
    #voice ul li .box .name_box .icon img {
        max-width: 20px;
    }
    #voice ul li .box .name_box .name {
        font-size: 100%;
    }
    #voice ul li .box .txt_in {
        line-height: 1.6;
    }
}


/* step
-------------------------------------------------------*/

#step .ttl01 {
    padding: 0 0 50px;
    margin: 0 0 50px;
    border-bottom: 3px solid #083b6d;
}

#step ul li {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 0 30px;
    border-bottom: 1px solid #cac8c8;
    position: relative;
}

#step ul li:not(:last-child) {
    margin: 0 0 30px;
}

#step ul li:not(:last-child)::after {
    position: absolute;
    display: block;
    content: "";
    background: url("../img/arrow02.png")no-repeat center/37px 21px;
    width: 37px;
    height: 21px;
    right: 50%;
    transform: translate(50%, 0);
    bottom: -22px;
}

#step ul li .img {
    width: 20%;
}

#step ul li .img img {
    max-width: 157px;
}

#step ul li .txt_box {
    width: 80%;
}

#step ul li .txt_box .ttl_box {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 0 20px;
}

#step ul li .txt_box .ttl_box .icon {
    margin: 0 10px 0 0;
}

#step ul li .txt_box .ttl_box .icon img {
    max-width: 124px;
    min-width: 124px;
}

#step ul li .txt_box .ttl_box .ttl {
    font-weight: 700;
    font-size: 150%;
    line-height: 1.6;
}

#step ul li .txt_box .txt {
    font-size: 90%;
    line-height: 1.8;
}

@media screen and (max-width:768px) {
    #step .ttl01 {
        padding: 0 0 20px;
        margin: 0 0 30px;
        border-bottom: 2px solid #083b6d;
    }
    #step ul li {
        flex-flow: column;
        align-items: center;
        justify-content: center;
        padding: 0 0 20px;
    }
    #step ul li:not(:last-child) {
        margin: 0 0 30px;
    }
    #step ul li .img {
        width: 40%;
        margin: 0 0 10px;
    }
    #step ul li .txt_box {
        width: 100%;
    }
    #step ul li .txt_box .ttl_box {
        margin: 0 0 10px;
    }
    #step ul li .txt_box .ttl_box .icon img {
        max-width: 80px;
        min-width: 80px;
    }
    #step ul li .txt_box .ttl_box .ttl {
        font-size: 120%;
    }
}


/* fee
-------------------------------------------------------*/

#fee.area {
    padding: 0;
}

#fee .ttl01 {
    background: #083b6d;
    color: #fff;
    padding: 20px;
    margin: 0;
}

#fee .top_txt {
    font-size: 140%;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 40px;
    text-align: center;
}

#fee .box {
    background: #f0f0f0;
    padding: 50px 20px 70px;
}

#fee table {
    width: 100%;
    line-height: 1.6;
}

#fee table th {
    background: #0474bc;
    border: 1px solid #ffffff;
    color: #fff;
    font-size: 110%;
    font-weight: 700;
    padding: 20px;
}

#fee table th:first-child {
    width: 80%;
}

#fee table td {
    background: #fff;
    border: 1px solid #c0bfbf;
    padding: 20px;
}

#fee table td.price {
    text-align: center;
    vertical-align: middle;
    font-weight: 700;
    font-size: 110%;
}

#fee table td.visa_price span {
    font-weight: 700;
}

#fee table tr:last-child td {
    text-align: center;
}

#fee table tr:last-child td .bold {
    display: block;
    font-weight: 700;
    font-size: 110%;
}

@media screen and (max-width:768px) {
    #fee .top_txt {
        font-size: 100%;
        margin: 0 0 20px;
    }
    #fee .box {
        padding: 30px 20px;
    }
    #fee table {
        width: 100%;
        line-height: 1.6;
    }
    #fee table th {
        font-size: 90%;
        padding: 10px;
        vertical-align: middle;
    }
    #fee table td {
        padding: 10px;
        font-size: 90%;
    }
    #fee table td.price {
        font-size: 90%;
    }
    #fee table tr:last-child td .bold {
        font-size: 100%;
    }
}


/* message
-------------------------------------------------------*/

#message {
    background: url("../img/bg04.png")no-repeat center/cover;
}

#message.area {
    padding: 80px 20px;
}

#message .inner {
    background: rgba(255, 255, 255, 0.7);
    padding: 50px 30px;
}

#message .inner .txt {
    line-height: 1.6;
}

@media screen and (max-width:768px) {
    #message {
        background: url("../img/bg04.png")no-repeat left 10% center/cover;
    }
    #message.area {
        padding: 40px 20px;
    }
    #message .inner {
        padding: 30px 20px;
    }
    #message .inner .txt {
        font-size: 90%;
    }
}


/* contact
-------------------------------------------------------*/

#contact .ttl01 {
    padding: 0 0 40px;
    margin: 0 0 50px;
    border-bottom: 3px solid #083b6d;
}

#contact .table_temp {
    width: 100%;
}

#contact.contact_after .inner {
    padding: 0;
}

#contact tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#contact tr>* {
    display: table-cell;
    vertical-align: middle;
    padding: 20px 10px;
    box-sizing: border-box;
    line-height: 1;
}

#contact tr th {
    width: 320px;
    text-align: left;
}

#contact tr th.top {
    vertical-align: top;
    padding: 30px 10px 20px;
}

#contact tr th b {
    display: block;
    position: relative;
    font-weight: normal;
}

#contact tr.hissu th b::after {
    color: #fff;
    font-weight: 500;
    font-size: 75%;
    width: 80px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
}

#contact tr.hissu th b::after {
    content: "Required";
    background: #f00;
}

#contact.contact_after tr {
    border-bottom: 1px solid #ccc;
}

#contact.contact_after tr:first-child {
    border-top: 1px solid #ccc;
    margin: 30px 0 0;
}

#contact.contact_after tr th {
    color: #aaa;
}

#contact.contact_after tr td {
    font-weight: 500;
}

.txt_form .red,
.error_messe b {
    color: #f00;
    font-weight: normal;
}

.error_messe {
    margin: 20px 0 0;
    text-align: center;
    line-height: 1.3;
}

.error_messe>* {
    display: inline-block;
}

#contact input[type="text"],
#contact select,
#contact textarea {
    width: 100%;
}

#contact input[type="text"],
#contact select {
    height: 40px;
}

#contact textarea {
    min-height: 500px;
    resize: vertical;
    line-height: 1.6;
    white-space: pre-wrap;
}

#contact .radio_area label,
#contact .check_area label {
    display: inline-block;
    margin: 5px 5px 5px 0;
    line-height: 1.3;
}

#contact .txt_form {
    text-align: center;
    line-height: 1.3;
}

#contact .txt_form span {
    display: block;
}

::placeholder {
    color: #ccc;
}

#contact .form_btn {
    display: flex;
    flex-flow: row-reverse nowrap;
    align-items: center;
    justify-content: space-evenly;
}

#contact .form_btn01,
#contact .form_btn02 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    max-width: 280px;
    height: 65px;
    border: none;
    border-radius: 5px;
    padding: 10px;
    margin: 30px auto 0;
    box-sizing: border-box;
    font-size: 120%;
    color: #fff;
    line-height: 1;
    text-align: center;
}

#contact .form_btn01 {
    background: #ff9805;
}

#contact .form_btn02 {
    background: #333;
}

#contact .add {
    font-size: 80%;
    margin: 10px 0 0;
    line-height: 1.4;
}


/* table_temp end */

@media screen and (max-width:768px) {
    #contact .ttl01 {
        padding: 0 0 20px;
        margin: 0 0 20px;
        border-bottom: 2px solid #083b6d;
    }
    #contact.contact_after tr:first-child {
        margin: 20px 0 0;
    }
    #contact tr>* {
        display: block;
        padding: 15px 0;
        line-height: 1.3;
    }
    #contact tr th {
        width: 100%;
        font-size: 100%;
    }
    #contact tr td {
        padding-top: 0;
    }
    #contact tr.hissu th b::after,
    #contact tr.nini th b::after {
        top: 0!important;
        right: 0!important;
        bottom: 0!important;
    }
    #contact .radio_area label,
    #contact .check_area label {
        display: flex;
        align-items: center;
    }
    #contact .form_btn {
        flex-flow: column;
    }
    #contact .form_btn01,
    #contact .form_btn02 {
        margin: 20px 0 0;
        font-size: 100%;
        height: 50px;
    }
    #contact tr th.top {
        padding: 15px 0;
    }
    #contact textarea {
        min-height: 300px;
    }
}

.price_bottom {
    line-height: 1.5;
    margin-top: 20px;
}

.price_bottom b {
    font-weight: bolder;
    font-size: 110%;
}

.privacy {
    height: 250px;
    border: 1px solid #d6d6d6;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: scroll;
    line-height: 1.5;
    font-size: 90%;
}

.pp_ttl {
    font-size: 140%;
    font-weight: bolder;
    text-align: center;
    margin-bottom: 20px;
}

.pp_ttl_sub {
    font-weight: bolder;
    margin-bottom: 10px;
    font-size: 110%;
}

.privacy .txt {
    margin-bottom: 30px;
}

.privacy b {
    font-weight: bolder;
}

p.red {
    color: #f00;
    font-weight: normal;
    line-height: 1.5;
}


/*  */

#voice_sec .ttl01 {
    background: #083b6d;
    color: #fff;
    padding: 40px 20px;
}

#voice_sec.area {
    padding: 0 0 30px;
}

.voice-wrap {
    max-width: 900px;
    margin: auto;
    padding: 0 20px;
}

.voice_slide img {
    width: 100%;
    height: auto;
}

.voice_slide .slick-prev:before,
.voice_slide .slick-next:before {
    font-family: 'slick';
    font-size: 35px;
    line-height: 1;
    opacity: .75;
    color: #0c2655;
}

.voice_slide .slick-next {
    right: -35px;
}

.voice_slide .slick-prev {
    left: -50px;
    z-index: 1;
}

.voice_slide .slick-prev:before,
.voice_slide .slick-next:before {
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
}

.voice_slide .slick-next:before {
    background-image: url(../img/voice/next.png);
    background-size: contain;
    content: "";
}

.voice_slide .slick-prev:before {
    background-image: url(../img/voice/prev.png);
    background-size: contain;
    content: "";
}

@media screen and (max-width:767px) {
    .voice_slide .slick-prev:before,
    .voice_slide .slick-next:before {
        font-size: 22px;
    }
    .voice_slide .slick-next {
        right: -5px;
    }
    .voice_slide .slick-prev {
        left: -8px;
    }
    .voice_slide .slick-prev:before,
    .voice_slide .slick-next:before {
        width: 25px;
        height: 25px;
    }
    #voice_sec .ttl01 {
        padding: 20px 20px;
    }
}