@charset "utf-8";

/*-------------------------*/
/*  base
/*-------------------------*/
body {
    font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    position: relative;
    line-height: 1.5;
    font-size: 15px;
    color: #000;
}

/*-------------------------*/
/*  common
/*-------------------------*/
h2 {
    font-size: 40px;
    letter-spacing: 0.2em;
    font-weight: bold;
    margin-bottom: 20px;
    color: #336eaf;
}

/*-------------------------*/
/*  section
/*-------------------------*/
#top {
    text-align: center;
}

section {
    padding: 30px 0;
    margin-top: 30px;
    letter-spacing: 0.2em;
}

.inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 25px;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.btn {
    margin-top: 60px;
    margin-bottom: 60px;
}

.short .btn {
    margin-bottom: 0px;
    margin-top: 40px;
}

.main .btn {
    margin-top: 60px;
    margin-bottom: 0px;
    text-align: center;
}

.btn a {
    letter-spacing: 0.1em;
    display: inline-block;
    font-size: 22px;
    background: #db004b;
    color: #fff;
    line-height: 1;
    padding: 15px 20px;
    border-radius: 10px;
    font-weight: bold;
}

.var-mid {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    /* Safari用 */
    transform: translateY(-50%);
}

.short .col3>div {
    width: calc(33% - 10px);
    margin-right: 10px;
}

.short .col3>div:nth-child(3n) {
    margin-right: 0px;
}

#original_short {
    text-align: center;
}

.w-50 {
    max-width: 50%;
}

/*-------------------------
/*  mv
/*-------------------------*/
#mv .inner,
#mv {
    position: relative;
}

#mv {
    padding: 80px 0 0;
}

.main h1 {
    max-width: 80px;
    margin-left: 20px;
}

.main {
    width: calc(100%);
    margin: 10px 0;
    padding: 0;
    text-align: left;
}

.main .mv {
    background: url(../images/main_photo.jpg) no-repeat center;
    background-size: cover;
    height: calc(90vh - 120px);
    min-height: 600px;
    margin: 10px;
    position: relative;
}

.main h2 {
    text-align: center;
    width: calc(100% - 20px);
    position: absolute;
    left: 50%;
        top: 82%;
    margin: 0;
    -webkit-transform: translateY(-50%) translateY(-50%);
    transform: translateY(-50%) translateX(-50%);
}

.main .mv .hgroup {}

.main .mv .hgroup {}

.main {}

.main .btn {
    margin: 60px auto 0;
    padding: 10px;
}

.main .mv h2 img {
    max-width: 500px;
}

@media (max-width: 767px) {
    .main .mv h2 img {
        max-width: inherit;
        width: 100%;
    }

    .main .mv {
        margin: 10px;
    }

    .main h2 {
        position: absolute;
        width: 80%;
        left: 50%;
        top: 50%;
        margin: 0;
        -webkit-transform: translateY(-50%) translateY(-50%);
        transform: translateY(-50%) translateX(-50%);
    }

    .main .mv {
        background: url(../images/main_photo.jpg) no-repeat center;
        background-size: cover;
        height: calc(100vh - 240px);
        min-height: 510px;
        margin: 10px;
        position: relative;
    }

    .main .btn {
        text-align: center;
    }

    .main .btn {
        margin-top: 20px;
    }
}

/*-------------------------
/*  feature
/*-------------------------*/
.img_box {
    margin-bottom: 30px;
}

.colorbox {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.colorbox div {
    background: #336eaf;
    margin: 0 10px;
    font-weight: bold;
    color: #fff;
    padding: 10px 15px;
}

#flow .col2,
#feature .col2,
#feature_short .col2 {
    max-width: 1000px;
    text-align: left;
    margin: 20px auto;
}

#flow .col2>div,
#feature .col2>div,
#feature_short .col2>div {
    margin: 20px auto 0;
}

#flow .col2 h3,
#feature .col2 h3,
#feature_short .col2 h3 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
}

#flow .col2 span,
#feature_short .col2 span,
#feature .col2 span {
    display: block;
    font-size: 70px;
}

#flow .col2 span {
    color: rgba(0, 0, 0, .0);
    -webkit-text-stroke: 1px #000;
}

/*-------------------------
/*  original 
/*-------------------------*/
h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0.5em;
}

#original_short,
#original {
    background: #eff4f7;

}

#original_short .col2,
#original .col2 {
    margin: 0 auto;
    max-width: 720px;
}

.regist_box {
    width: 100%;
    max-width: 930px;
    padding: 30px;
    box-sizing: border-box;
    background: #336eaf;
    color: #fff;
    margin: 0 auto 0;
}

.regist_box span {
    font-size: 40px;
    letter-spacing: 0.2em;
    font-weight: bold;
    margin-bottom: 60px;
}

.mb-30 {
    margin-bottom: 30px;
}

/*-------------------------
/*  release
/*-------------------------*/
#feature_short,
#release_short,
#feature,
#release {
    background: url(../images/bg_01.png) no-repeat center right;
}

#flow {
    background: url(../images/bg_02.png) no-repeat center right;
}

section#feature_short,
section#release_short,
section#original_short,
section#flow_short {
    background: #eff9ff;
}

section.short .inner {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
}

#release_short .col2,
#release .col2 {
    max-width: 800px;
    margin: 0 auto;
}

#original_short .regist_box,
#original .regist_box {
    margin-top: 30px;
}

#release_short h3,
#release h3 {
    font-size: 24px;
}

#release_short .price,
#release .price {
    font-size: 18px;
    font-weight: bold;
    margin: 30px 0;
    letter-spacing: 0.3em;
}

#release_short .price span,
#release .price span {
    font-size: 40px;
    font-weight: bold;
    color: #0f88d5;
}

.exam {
    margin-top: 120px;
}

.exam .col2 div {
    margin-bottom: 30px;
}

/*-------------------------
/*  faq
/*-------------------------*/
#faq {
    background: #f5fbff;
}

#faq .col2 {
    text-align: left;
}

#faq .col2>div {
    padding: 0 50px 20px;
    box-sizing: border-box;
}

#faq .col2>div>p {
    text-indent: -16px;
}

#faq span {
    display: inline-block;
    font-size: 28px;
    font-weight: bold;
    margin-right: 5px;
    position: relative;
    top: 2px;
}

.faq_q {
    font-weight: bold;
}

.faq_q span {
    color: #c0c2c3;
}

.faq_a span {
    color: #336eaf;
}

/*-------------------------
/*  CONTACT
/*-------------------------*/
#contact {
    margin-bottom: 60px;
}

/*-------------------------
/*  footer
/*-------------------------*/
.elementor-widget-container {
    margin: 120px auto 0;
}

#company a {
    text-decoration: underline;
}

footer {
    position: relative;
    text-align: left;
    padding: 30px 0;
}

footer .inner {}

footer .cw {}

/*-------------------------*/
/*  page_top
/*-------------------------*/
#page_top {
    width: 80px;
    height: 80px;
    position: fixed;
    right: -100px;
    bottom: 60px;
    background: #35749d;
    opacity: 0.6;
    z-index: 9999;
}

#page_top a {
    position: relative;
    display: block;
    width: 80px;
    height: 80px;
    text-decoration: none;
    line-height: 1;

}

#page_top a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f0d8';
    font-size: 53px;
    color: #fff;
    position: absolute;
    width: 40px;
    height: 40px;
    top: -10px;
    bottom: 0;
    right: 0;
    left: 2px;
    margin: auto;
    text-align: center;
}

/*-------------------------
/*  flow
/*-------------------------*/
#flow_short .step {
    width: 55px;
    height: 55px;
    padding: 14px 8px;
    box-sizing: border-box;
    background: #336eaf;
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 1;
    border-radius: 50%;
    letter-spacing: 0;
    margin: -40px auto 0;
}

#flow_short .step span {
    display: block;
    font-size: 18px;
    font-weight: bold;
}

#flow_short .col5 {
    justify-content: center;
    margin-top: 60px;
}

#flow_short .col5>div {
    padding: 12px;
    font-size: 12px;
    max-width: 201px;
    border-radius: 20px;
    border: 1px solid #eee;
    box-sizing: border-box;
    letter-spacing: 0;
}

#flow_short h3 {
    font-size: 16px;
    font-weight: bold;
    margin: 20px auto;
}

#flow_short .col5 p.text {
    margin: 0 auto 20px;
}

#flow_short .excuse {
    margin-top: 20px;
}

.subt {
    font-weight: bold;
    margin-top: 20px;

}

/*-------------------------*/
/*  cnt
/*-------------------------*/
.wp_form {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

.wp_form>p {
    margin-bottom: 30px;
}

.wp_form label {
    color: #35749d;
    font-weight: bold;
    margin-bottom: 0.3em;
}

.wp_form textarea,
.wp_form select,
.wp_form input {
    padding: 1em;
    box-sizing: border-box;
}

.wp_form textarea,
.wp_form select,
.wp_form label,
.wp_form input {
    display: block;
    width: 100%;
}

form p {
    margin-bottom: 30px;
}

#check-1 {
    display: inline;
    width: auto;
    margin-bottom: 0px;
}

.mwform-checkbox-field.horizontal-item {
    margin-bottom: 30px;
}

button {
    letter-spacing: 0.1em;
    display: inline-block;
    font-size: 15px;
    background: #d7615d;
    color: #fff;
    line-height: 1;
    padding: 15px 20px;
    border-radius: 10px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    display: block;
    margin: 30px auto;
}

.elementor-field-group {
    margin-bottom: 1.5em;
}

span.elementor-field-label:after {
    content: "必須";
    display: inline-block;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 5px;
    margin-bottom: 5px;
    background: #35749d;
}

.elementor-field-type-html h2 {
    font-size: 20px;
    letter-spacing: 0.2em;
    font-weight: bold;
    margin: 20px 0 10px;
    color: #000;
}

.elementor-field-subgroup {
    cursor: pointer;
    text-align: center;
}

.elementor-field-type-acceptance input {
    display: inline;
    width: auto;
}

.elementor-field-type-acceptance label {
    display: inline;
}

.elementor-field-group button {
    cursor: pointer;
    letter-spacing: 0.1em;
    display: inline-block;
    font-size: 18px;
    background: #d7615d;
    color: #fff;
    line-height: 1;
    padding: 15px 100px;
    border-radius: 10px;
    font-weight: bold;
    border: none;
}

.e-form__buttons {
    text-align: center;
}

/*-------------------------*/
/*  cnt
/*-------------------------*/
#cnt .main {
    padding: 0;
    font-size: 70px;
    font-weight: bold;
    text-align: center;
}

#cnt .main p {
    display: inline-block;
    line-height: 1;
    padding: 5px 20px;
}

.main {
    padding: 0;
    min-height: 250px;
}

#cnt .main .mv {
    background: url(../images/cnt_mv.jpg) no-repeat center;
    background-size: cover;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: calc(100vh - 120px);
    margin-bottom: 60px;
    position: relative;
}

#cnt #business p {
    margin-bottom: 120px;
}

#cnt #company td {
    padding: 10px 0;
}

.helf div:first-child {
    width: calc(30% - 15px);
}

.helf div:last-child {
    margin-left: 20px;
    line-height: 1.8;
    width: calc(70% - 35px);
}

.telbox {
    display: none;
}

/*-------------------------/*-------------------------*/
/*  _short
/*-------------------------/*-------------------------*/
#feature_short .col3 img {
    max-height: 250px;
    object-fit: cover;
}

#release_short .col2,
#feature_short .col3,
#original_short .col3 {
    margin-top: 20px;
}

#release_short img {
    max-height: 220px;
    object-fit: cover;
}

/*-------------------------/*-------------------------*/
/*  sp
/*-------------------------/*-------------------------*/
@media (max-width: 767px) {
    body {
        padding-bottom: 60px;
        line-height: 1.3;
    }

    .inner {
        max-width: 100%;
    }

    #release .price {
        font-size: 18px;
        font-weight: bold;
        margin: 10px 0 30px;
        letter-spacing: 0.3em;
    }

    h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    section {
        padding: 30px 0 10px;
        margin-bottom: 10px;
    }

    #flow .col2>div,
    #feature .col2>div {
        margin: 10px auto 0;
    }

    #flow .col2>div,
    #feature .col2>div {}

    .col2>div,
    .col2>li {}

    .col4,
    .col3,
    .col2 {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        justify-content: flex-start;
    }

    .colorbox {
        display: block;
        margin-bottom: 0px;
    }

    #flow .col2,
    #feature .col2 {
        margin: 0px auto;
    }

    #feature .col2 {
        margin: 20px auto 0;
    }

    .btn {
        text-align: center;
        margin-top: 30px;
        margin-bottom: 20px;
    }

    #faq .col2 {
        display: block;
        text-align: left;
    }

    .col2>div,
    .col2>li {
        width: calc(100%);
        margin-right: 0px;
    }

    #faq .col2>div {
        padding: 0 0px 20px 20px;
    }

    .regist_box {
        padding: 20px;
    }

    .regist_box span {
        font-size: 36px;
    }

    .img_box {
        margin-bottom: 10px;
    }

    #original .var-mid {
        text-align: center;
        margin-bottom: 30px;
    }

    #original .col2 {
        margin-bottom: 30px;
    }

    .col2.helf {}

    .helf div:first-child {
        width: calc(100%);
        margin-bottom: 40px;
        text-align: center;
    }

    .helf div:first-child img {
        width: calc(60%);
    }


    .helf div:last-child {
        margin-left: 0px;
        width: calc(100%);
    }

    .telbox.helf {
        display: flex;
        position: fixed;
        bottom: -60px;
        top: auto;
        left: 0;
        width: 100%;
        height: 60px;
        z-index: 99999;
        font-size: 16px;
        font-weight: bold;
    }

    .telbox.helf a {
        display: block;
        margin: 0 auto;
        padding: 10px 10px 10px 50px;
        border-radius: 5px;
        background: url(../images/icon_mails.png) 8px center no-repeat #db004b;
        width: auto;
        background-size: contain;
        min-width: 43px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        max-width: 200px;
        line-height: 0.5;
        font-weight: bold;
    }

    .telbox.helf a {
        width: 50%;
        max-width: 100%;
        height: 100%;
        box-sizing: border-box;
        line-height: 0.6;
        padding: 23px 10px 10px;
        max-width: auto;
        margin: 0;
        border-radius: 0;
    }

    .telbox.helf a {}

    .telbox.helf a.yel {
        color: #333;
        background: #f5ff60;
    }

    .telbox.helf a span {
        font-weight: bold;
        font-size: 16px;

    }

    #cnt .var-mid {
        position: relative;
        top: 0%;
        margin-top: 75px;
        transform: none;
        margin-top: 40vh;
    }

    .var-mid img {
        width: 100px;
    }

    #cnt .main .mv {
        background: url(../images/cnt_mv.jpg) no-repeat center;
        background-size: cover;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        height: calc(100vh - 120px);
        margin-bottom: 60px;
        position: relative;
    }

    .btn a {
        font-size: 20px;
    }

    form p {
        padding: 0 10px;
    }

    #flow_short .col5>div {
        width: calc(50% - 10px);
        padding: 12px;
        font-size: 12px;
        max-width: 201px;
        border-radius: 20px;
        border: 1px solid #eee;
        box-sizing: border-box;
        letter-spacing: 0;
        margin-bottom: 35px;
    }

    section.short h3 {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 0.5em;
    }

    section.short {
        padding: 20px 0;
        margin-bottom: 10px;
    }

    section.short .img_box {
        display: none;
    }

    #feature_short .col3 {
        display: block;
    }

    #feature_short .col3>div {
        text-align: left;
        width: 100%;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        justify-content: flex-start;
        margin-bottom: 10px;
    }

    #feature_short .col3>div img {
        width: 40%;
    }

    #feature_short .col3>div h3 {
        width: 60%;
    }

    #release_short .col2>div {
        text-align: left;
        width: 100%;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        justify-content: flex-start;
        margin-bottom: 10px;
    }

    #release_short .col2>div img {
        width: 30%;
    }

    #release_short .col2>div h3 {
        width: 70%;
        font-size: 18px;
        position: relative;
        top: 18px;
        padding: 20px;
        box-sizing: border-box;
    }

    #feature_short .col3 span {
        display: block;
    }

    #release_short .col2,
    #feature_short .col3,
    #original_short .col3 {
        margin-top: 20px;
    }

    #flow_short .col5 {
        margin-bottom: -20px;
    }
}


/*-------- plan --------*/
#plan .col3 {
    text-align: center;
    justify-content: center;
    margin-right: 0;
}

#plan .col3>div {
    width: 31%;
    max-width: 320px;
    border-radius: 10px;
    border: 3px solid #336eaf;
    color: #336eaf;
    font-weight: bold;
}

#plan .text,
#plan .price {
    font-weight: bold;
    letter-spacing: 0;
}

#plan .price {
    margin-top: 20px;
    border-top: 3px solid #336eaf;
    padding-top: 20px;
}

#plan .price span {
    font-size: 62px;
    font-weight: bold;
    line-height: 1;
}

#plan .col3 .pinner {
    padding: 0 20px;
}

#plan h3 {
    padding: 20px;
    background: #336eaf;
}

#plan h3 img {
    width: auto;
}

#plan .icon {
    height: 166px;
    padding-bottom: 40px;
    position: relative;
}

#plan .icon img {
    max-width: 136px;
    position: absolute;
    left: 50%;
    bottom: 40px;
    margin: 0;
    -webkit-transform: translateY(0%) translateX(-50%);
    transform: translateY(0%) translateX(-50%);
}

#plan #plan_03 .icon img {
    max-width: 97px;
}

#plan #plan_02 .icon img {
    max-width: 85px;
}

#plan .col3 .orange {
    border: 3px solid #ff5614;
}

#plan .orange h3 {
    background: #ff5614;
}

#plan .orange .price {
}

#plan #plan_03 {
    position: relative;
    z-index: 999;
}

#plan #plan_02 {
    position: relative;
    left: -3px;
    margin-top: 10px;
    z-index: 0;
}

#plan #plan_01 {
    position: relative;
    right: -3px;
    margin-top: 10px;
    z-index: 0;
}

    #plan #plan_03 h3 {
        padding: 30px 20px;
    }

    #plan #plan_03 .pinner {
        padding: 0 20px 20px;
    }

    #plan h2.plan_10 {
        margin-top: 60px;
    }
    #plan h2.plan_10 img {
        width: auto;
    }
    #plan .col3.plan_10 .price {
        border: none;
        margin-top: 0;
    }
    #plan .excuse p {
        font-size: 12px;
        text-align: right;
        margin-top: 20px;
    }
    #plan .excuse  {
        max-width: 1000px;
        text-align: left;
        margin: 20px auto;
    }
@media (max-width: 767px) {
    .main h2 {
        top: 82%;
    }
        .inner {
        padding: 0 10px;
    }

    #plan .price span {
        display: block;
    }
    #plan .col3>div {
        width: 31%;
    }

    #plan .col3 .pinner {
        padding: 0px 5px;
    }

    #plan #plan_03 .pinner {
        padding: 0px 5px 20px;
    }

    #plan .icon img {
        max-width: 80px;
    }

    #plan #plan_03 .icon img {
        max-width: 70px;
    }

    #plan #plan_02 .icon img {
        max-width: 60px;
    }
    #plan .icon {
        height: 89px;
    }
        #plan .icon img {
        bottom: 20px;
    }
    #plan .price span {
        font-size: 26px;
        font-weight: bold;
    }
    #plan h3 {
        padding: 10px;
        background: #336eaf;
    }
    #plan #plan_03 h3 {
        padding: 16px 5px;
    }
    #plan #plan_03 {
        width: 33%;
    }
}


/*------------------------------*/
/*  
/*------------------------------*/
.color_hard #plan .col3>div {
    border: 3px solid #3f5974;
    color: #3f5974;
}
/*濃い青*/
.color_hard .regist_box,
.color_hard .colorbox div,
.color_hard #cnt.blogs .main, #cnt.flow .main, #cnt.faq .main,
.color_hard #cnt .cnt_wrap h2::after,
.color_hard #plan h3,
.color_hard #cnt  .cnt_wrap h2,
.color_hard #flow .step {
    background: #3f5974;
}
.color_hard h2,
.color_hard #cnt .cnt_wrap .price span,
.color_hard #feature h3 span,
.color_hard #lineup .col2>div .plan,
.color_hard #feature h3 span,
.color_hard .subt {
    color: #3f5974;
}
.color_hard #cnt .cnt_wrap,
.color_hard #cnt .#plan .price {
    border: 3px solid #3f5974;
}
.color_hard #plan .price {
    border-top: 3px solid #3f5974;
}
.color_hard .btn_w a {
    border: 1px solid #3f5974;
}
.color_hard .faq_wrap .inner {
    border-top: 5px solid #3f5974;
}
/*濃い赤*/
.color_hard #plan .orange h3 {
    background: #f3514b;
}
.color_hard #plan .col3 .orange {
    border: 3px solid #f3514b;
}
.color_hard .btn a {
    background: #f3514b;
}
.color_hard #release_short .price span, .color_hard #release .price span{
    color: #f3514b;
}
/*薄い青*/
.color_hard .onbg {
    background: #eff4f7;
}