@charset "UTF-8";

html {
    font-size: 62.5%;
}

body {
    font-family: source-han-sans-japanese, 'Noto Sans JP', 'ヒラギノ角ゴ Pro W6', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'Osaka', 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
    font-style: normal;
    font-weight: 400;
/*    font-weight: 300;*/
    font-size: 16px;
    line-height: 1.8;
    color: #000;
    color: #222;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #fff;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.spview_only {
    display: none;
}

.hide {
    display: none !important;
}

.font_key {
    font-family: 'Big Shoulders Display', cursive;
    font-weight: 700;
}

.pagetop a {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.pagetop {
    -webkit-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

.icon {
    vertical-align: middle;
    display: inline-block;
    position: relative;
    z-index: 1;
}

.icon::before {
    display: block;
}

img {
    border: none;
    max-width: 100%;
}

a {
    color: inherit;
    transition-property: opacity;
    transition-duration: .3s;
}

a:hover {
    text-decoration: none;
}

a[href^="tel:"] {
    cursor: default;
    text-decoration: none;
    color: inherit;
}

textarea,
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="text"] {
    font-size: 16px;
    padding: 10px 5px;
    border: 1px solid #777;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 1px 0;
    width: 100%;
    background: #f8f8f8;
    transition-duration: .3s;
    transition-property: background-color, color, text-indent;
}

textarea:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
    text-indent: 1em;
    background: #fff;
}

label input[type="checkbox"],
label input[type="radio"] {
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
}

label {
    display: inline-block;
    vertical-align: middle;
    margin: 0 1em 0 0;
}

body.js_mouseover a:hover,
body.js_mouseover button:hover,
body.js_mouseover button:focus,
body.js_mouseover input[type="reset"]:hover,
body.js_mouseover input[type="reset"]:focus {
    opacity: 0.7;
}

table {
    border-collapse: collapse;
    empty-cells: show;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    margin-top: 40px;
}

tr>* {
    padding: 20px 20px;
    border-left: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
}

th {
    background-color: #f4f4f4;
    font-weight: normal;
}

tr>.no_bd {
    border-right: none;
}


.dl {
    display: flex;
    width: 100%;
    align-items: center;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.dl:first-child {
    border-top: 1px dashed #ccc;
    padding-top: 20px;
}

.dt {
    width: 150px;
}

.dd {
    width: calc(100% - 150px);
}

ul.ul>li {
    list-style: none;
    position: relative;
    padding-left: 1em;
    text-indent: -1em;
}

ul.ul>li:before {
    content: "・";
}

/* ------------------------------------------------------------------------------------------------------------ */

/* layout ↓ */

/* ------------------------------------------------------------------------------------------------------------ */

#main,
.block {
    width: 100%;
    display: block;
}

#main,
.mainvis,
.block,
.container,
.cont {}

#main {
    overflow-x: hidden;
}

.block {
    padding-top: 60px;
    padding-bottom: 60px;
    padding-bottom: 40px;
    background: transparent;
}
section#lead {
    border-radius: 0 120px 0 0;
    padding-bottom: 100px;
}

.container {
    width: 100%;
    /*padding-bottom: 40px;*/
/*    margin-bottom: 40px;*/
    line-height: 2.2;
}

.cont {
    margin-left: auto;
    margin-right: auto;
/*    padding-bottom: 40px;*/
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0px 3px 1px rgb(256 256 256 / 30%);
}

.area_round,
.inner {
    max-width: 1222px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.area_round {
    max-width: 980px;
}

.inner {
/*    padding-left: 100px;*/
/*    padding-right: 100px;*/
    padding-left: 16px;
}

.inner2 {
    max-width: 940px;
}

.toggle,
.nav_tel {
    display: none;
}

.footer {
    letter-spacing: 0px;
    line-height: 2;
    font-size: 14px;
    font-weight: 400;
    border-top: 16px solid #EAAE4A;
}
.footer_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 30px;
    padding-bottom: 30px;
}
.footer_copyright {
    font-size: 12px;
}

body.nav_show {
    overflow: hidden;
    height: 100vh;
}

body.nav_show #main {
    opacity: 0;
}

body.js_mouseover .pagetop a:hover {
    opacity: .9;
    height: 84px;
    width: 84px;
}

div#navi {
    margin-bottom: 0;
    padding: 15px 0;
    /*    width: 100%;*/
    /*    position: fixed;*/
    /*    left: 0;*/
    /*    top: 0;*/
}

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

a.head_logo {
    display: inline-flex;
    align-items: center;
    max-width: 200px;
}

ul.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 15px;
}

ul.nav>* {
    list-style: none;
    margin: 0 20px;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
}

ul.nav>li:nth-of-type(1),
ul.nav>li:nth-of-type(4) {
    white-space: nowrap;
}

.sns {
    display: flex;
}

.sns>* {
    display: inline-flex;
    align-items: center;
    width: 35px;
    margin: 0 10px;
}

.sns>* img {
    width: 100%;
}

.js_mouseover ul.nav>li>a:hover {
    text-decoration: underline;
    opacity: .6;
}

ul.nav>li>a>span {
    display: inline-block;
}




/* ------------------------------------------------------------------------------------------------------------ */

/* parts */

/* ------------------------------------------------------------------------------------------------------------ */


.txtSS {
    font-size: 12px;
}

.txtS {
    font-size: 14px;
}

.txtN {
    font-size: 16px;
}

.txtM {
    font-size: 18px;
}

.txt20 {
    font-size: 20px;
/*    line-height: 1.3;*/
}

.txt25 {
    font-size: 25px;
/*    line-height: 1.3;*/
}

.txt30 {
    font-size: 30px;
/*    line-height: 1.2;*/
}

.txt35 {
    font-size: 35px;
/*    line-height: 1.2;*/
}

.txt40 {
    font-size: 40px;
/*    line-height: 1.2;*/
}

.txt45 {
    font-size: 45px;
/*    line-height: 1.1;*/
}

.txt50 {
    font-size: 50px;
/*    line-height: 1.1;*/
}

.txt55 {
    font-size: 55px;
/*    line-height: 1.1;*/
}

.tit01 {
    font-size: 44px;
    line-height: 1.1;
    color: #231815;
    margin: 60px auto 40px;
    display: block;
    text-align: center;
}

.btn {
    /* background: #FFBA00; */
    color: #fff;
    display: inline-block;
    margin: auto;
    max-width: 100%;
    padding: 1.1em 60px 1.1em 60px;
    text-decoration: none;
    font-size: 32px;
    position: relative;
    border-radius: 80px;
    box-shadow: 0 5px 15px 3px rgba(0, 0, 0, 0.33);
    box-shadow: 4px 4px 0px 4px #F2F2F2;
    font-weight: bold;
    width: 960px;
    max-width: 100%;
}

.btn>span {
    position: relative;
}

.btn:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 19px;
    height: 32px;
    background: url(../img/icon_arrow.svg) no-repeat center;
    background-size: 0.5em auto;
    background-size: 100% auto;
    right: 5.5%;
    top: 0;
    bottom: 0;
    margin: auto;
    -webkit-transition: right 0.5s ease;
    transition: right 0.5s ease;
}
body.js_mouseover .btn:hover {
    opacity: .77;
}
body.js_mouseover .btn:hover:before {
    right: 4.4%;
}
.btn .bg_white {
    color: rgba(255, 255, 255, 0.7);
    color: #EBAB5D;
    display: inline-block;
    margin-right: 14px;
    line-height: 1.2;
    border-radius: 8px;
    padding: 3px 12px 6px;
}


.bg_white {
    background-color: #fff;
}

.bg_offwhite {
    background-color: #f8f8f8;
}

.bg_grey {
    background-color: #3E3E3E;
    color: #fff;
}

.bg_key {
    background-color: #F2FAFC;
}

.bg_grad {
    background-image: linear-gradient(
/*      135deg,*/
      90deg,
      hsl(37deg 78% 60%) 0%,
      hsl(33deg 83% 64%) 11%,
      hsl(29deg 88% 67%) 22%,
      hsl(24deg 92% 70%) 33%,
      hsl(21deg 94% 72%) 44%,
      hsl(17deg 95% 75%) 56%,
      hsl(13deg 93% 77%) 67%,
      hsl(9deg 90% 78%) 78%,
      hsl(4deg 83% 79%) 89%,
      hsl(0deg 75% 80%) 100%
    );
}

@-webkit-keyframes AnimationName {
    0% {
        background-position: 93% 0%
    }

    50% {
        background-position: 0% 100%
    }

    100% {
        background-position: 93% 0%
    }
}

@-moz-keyframes AnimationName {
    0% {
        background-position: 93% 0%
    }

    50% {
        background-position: 0% 100%
    }

    100% {
        background-position: 93% 0%
    }
}

@-o-keyframes AnimationName {
    0% {
        background-position: 93% 0%
    }

    50% {
        background-position: 0% 100%
    }

    100% {
        background-position: 93% 0%
    }
}

@keyframes AnimationName {
    0% {
        background-position: 93% 0%
    }

    50% {
        background-position: 0% 100%
    }

    100% {
        background-position: 93% 0%
    }
}


i[class*=clr_],
i[class*=txt] {
    font-style: normal;
}

.clr_key {
    color: #28ABAA;
}

.clr_black, .clr_normal {
    color: #222;
}

.clr_white {
    color: #fff;
}

.clr_yellow {
    color: #FFBA00;
}

.clr_red {
    color: #EB2727;
}

.clr_pink {
    color: #DD8BA1;
}

.clr_salmon {
    color: #E295AB;
}

.clr_blue {
    color: #0E326F;
}

.clr_green {
    color: #35A16F;
}

.break {
    word-break: break-all;
}

.btn_area {
    text-align: center;
    margin: 50px auto 1px;
    margin: 30px auto 1px;
}

iframe {
    max-width: 100%;
}

.scrollPointer {
    position: relative;
}

.scrollPointer>span {
    position: absolute;
    width: 1px;
    height: 60px;
    bottom: 20px;
    background: #222728;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
}

.scrollPointer>span:before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .8);
    background-color: #00A0B4;
    background-color: #48cfe0;
    position: absolute;
    top: 0;
    left: 0;
    animation: scroll 2s infinite normal;
}

@keyframes scroll {
    0% {
        height: 10px;
        top: -10px;
    }

    100% {
        height: 60px;
        top: 60px;
    }
}

/*.scrollPointer > span {
    display: inline-block;
    vertical-align: middle;
    color: #000;
    line-height: 1;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    -ms-transform: rotate( 180deg);
    -webkit-transform: rotate( 180deg);
    transform: rotate( 180deg);
    bottom: 25px;
    width: 1px;
    height: 10px;
    background: currentColor;
    transition: all 300ms 0s ease;
    animation: extend 1.5s linear 0.0s infinite normal none running;
}
@keyframes extend{
    0%{
        height: 10px;
    }
    100%{
        height: 70px;
    }
}*/
/* menu basic ------------------------------------------ */
.toggle {
    position: absolute;
    right: 0px;
    top: 0;
    width: 60px;
    height: 60px;
    /*    box-sizing: content-box;*/
    padding: 14px;
    margin: 0 0 0;
    z-index: 999;
    /*    background: none;*/
    display: none;
}

.toggle:after {
    /*content: "";*/
    display: block;
    width: 80px;
    height: 88px;
    position: absolute;
    top: -15px;
    right: 0;
    background: black;
    opacity: 0.2;
    z-index: -1;
}

.menu_label {
    display: block;
    display: none;
    color: #fff;
    text-align: center;
    font-size: 10px;
    margin: -13px auto 0;
    margin: -23px auto 0;
    letter-spacing: -1px;
    font-weight: bold;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
}

.toggle>a,
.toggle>a span {
    display: inline-block;
    cursor: default;
    transition: all .4s;
    box-sizing: border-box;
}

.toggle>a {
    position: relative;
    width: 100%;
    height: 100%;
    /*transform: scale(0.5);*/
}

.toggle>a span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
}

.toggle>a span:nth-of-type(1) {
    top: 9px;
}

.toggle>a span:nth-of-type(2) {
    top: 0;
    bottom: 0;
    margin: auto;
    opacity: 0;
}

.toggle>a span:nth-of-type(3) {
    bottom: 9px;
}

/* menu option ------------------------------------------ */
.toggle>a.active span:nth-of-type(1) {
    -webkit-transform: translateY(6px) rotate(-330deg);
    transform: translateY(6px) rotate(-330deg);
}

.toggle>a.active span:nth-of-type(2) {
    opacity: 0;
}

.toggle>a.active span:nth-of-type(3) {
    -webkit-transform: translateY(-6px) rotate(330deg);
    transform: translateY(-6px) rotate(330deg);
}

/*.menu_sec {
    position: fixed;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    background: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 999;
}*/



/* ------------------------------------------------------------------------------------------------------------ */

/* content */

/* ------------------------------------------------------------------------------------------------------------ */

.has_triangle_top {
    padding-top: 160px;
}
.has_triangle_top:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 280px;
    height: 60px;
    background: url(../img/triangle.svg) no-repeat center;
    background-size: 0.5em auto;
    background-size: 100% auto;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    -webkit-transition: right 0.5s ease;
    transition: right 0.5s ease;
}

.area_round {
    border-radius: 40px;
    padding: 60px 90px;
    margin-top: 80px;
    margin-top: 10px;
    margin-top: 0px;
    margin-bottom: 40px;
    margin-left: 80px;
    margin-left: 15.5vw;
    margin-left: calc(100vw / 2 - 580px);
    margin-left: calc(100vw / 2 - 550px);
    margin-left: auto;
/*    margin-left: calc(100vw / 2 - 560px);*/
    box-shadow: 70px 40px 0 #DDE7F8;
    box-shadow: 16px 18px 0 #DDE7F8;
}

.tit_A {
    font-size: 24px;
    line-height: 1.7;
    font-weight: 600;
    width: 100%;
    margin: 1px auto 40px;
}
.tit_A, .tit_Q {
    display: flex;
    align-items: center;
}
.tit_A_qa {
    padding-right: 40px;
    font-size: 50px;
    padding-bottom: 6px;
    line-height: 1;
}
.tit_Q {
    background: #fff;
    border-radius: 16px;
    font-size: 29px;
    font-weight: bold;
    padding: 12px 20px 14px;
    margin-bottom: 40px;
    margin-top: 1px;
    margin-left: -23px;
    max-width: 963px;
}

.fig_area {
    display: flex;
    justify-content: space-between;
    margin: 40px auto 10px;
}

.tit_catch {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto 60px;
    font-size: 48px;
    font-weight: bold;
}

.tit_catch img {
    height: 70px;
    width: auto;
    display: inline-block;
    line-height: 1;
    margin: 0 16px;
}

.tit_worry {
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px auto 40px;
    margin: 40px auto 1px;
}

.tit_worry > .line_bottom {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #F5AB2D;
}

.tit_worry img {
    height: 56px;
    width: auto;
    margin-left: 8px;
    padding: 6px 12px;
}

.line {
    border-bottom: 2px solid #F5AB2D;
}
.line_txt,
.line_txt[class*="txt"] {
/*    line-height: 2;*/
}

.tit_point {
    margin: 40px auto;
    margin: 60px auto 30px;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
}
.tit_point > span {
    display: inline-block;
    position: relative;
}
.tit_point > span:before,
.tit_point > span:after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 30px;
    height: 2px;
    background: #28ABAA;
    top: 0;
    bottom: 0;
    margin: auto;
}
.tit_point > span:before {
    left: -50px;
}
.tit_point > span:after {
    right: -50px;
}

.catch_col {
/*    display: flex;*/
    align-items: center;
    margin: 20px auto 40px;
    margin: 40px auto 60px;
    font-size: 28px;
}

.catch_col_txt {
    font-weight: bold;
    line-height: 1.6;
    margin-left: 40px;
}

.catch_col_txt .clr_key {
    display: block;
    font-size: 40px;
}

.frame_area {
    border: 4px solid #28ABAA;
    border-radius: 30px;
    padding: 60px 40px 80px;
    margin-bottom: 70px;
}

.review {
    margin: 40px auto 100px;
    border: 4px solid #F5AB2D;
    background: #fff;
    padding: 60px 60px 44px;
    border-radius: 30px;
    box-shadow: 20px 10px 0 #F2FAFC;
    position: relative;
}

.review_pic {
    position: absolute;
    left: -60px;
    bottom: -30px;
    bottom: 25%;
}

.review_tit {
    font-size: 28px;
    line-height: 1.7;
    font-weight: bold;
}

.review_col {
    display: flex;
    margin: 20px auto 1px;
    margin: 20px 0 -100px -130px;
    margin: 20px 0 0 -130px;
    margin: 20px 0 -100px -130px;
    margin: 15px auto 0;
}

.review_col_pic {
    width: 400px;
    margin-right: 50px;
/*    margin-left: -130px;*/
}

.review_col_txt {
    width: calc(100% - 400px - 50px + 130px);
    /*    padding-bottom: 60px;*/
    width: 100%;
    padding-left: 340px;
}

/*.review.reverse .review_col {
    flex-flow: row-reverse;
    margin: 20px -130px -100px 0;
}
.review.reverse .review_col_pic {
    margin-left: 50px;
    margin-right: 0;
}*/

.review.review2 .review_pic {
    left: auto;
    right: -60px;
    bottom: 30px;
    bottom: 25%;
}

.review.review2 .review_col_txt {
    padding-left: 0;
    padding-right: 340px;
}

.review.review3 .review_pic {
    bottom: auto;
    top: -25px;
}

.review.review3 .review_col {
    margin-bottom: 30px;
}

.feature {
    margin: 10px auto 1px;
    justify-content: space-between;
    position: relative;
}

.feature_itm {
    width: calc(100% / 2 - 40px);
    width: calc(100% / 2 - 15px);
    position: relative;
    margin: 20px auto 10px;
    margin: 20px 0 10px;
    border: 1px solid #DDE7F8;
    border-radius: 20px;
    padding: 30px 20px 20px;
}

.feature_itm_tit {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 14px;
    padding-left: 50px;
    margin-bottom: 16px;
}

.feature_itm img {
    position: absolute;
    left: -60px;
    top: -60px;
    z-index: 1;
    top: 26px;
    left: 20px;
}

.feature_itm > * {
    position: relative;
    z-index: 9;
}

.feature_itm_txt {
    padding: 0 60px 60px 0;
    padding: 0 0px 0;
}
.feature.mode_sp {
    height: 300px;
    height: 880px;
    overflow-y: hidden;
    padding-bottom: 100px;
    padding-bottom: 85px;
}
.feature.showmore_on {
    height: auto;
}
.feature_showmore {
    border: 2px solid;
    padding: 10px 20px;
    border-radius: 40px;
    font-size: 20px;
    font-weight: bold;
    width: 300px;
    max-width: 100%;
    text-align: center;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    background: #fff;
    margin: 20px auto 1px;
    box-shadow: 0px -10px 30px 4px #eee;
}
.feature.showmore_on .feature_showmore:before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.for_hide {
    display: none;
}
body.js_mouseover .feature_showmore:hover {
    opacity: 0.77;
    cursor: pointer;
}
.feature_showmore:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 20px;
    height: 20px;
    background: url(../img/icon_arrow_g.svg) no-repeat center;
    background-size: 100% auto;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
}
.worry_about {
    width: 100%;
    margin: 40px auto 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.worry_about_list {
    list-style: none;
    width: calc(100% - 460px);
    margin-top: 40px;
}

.worry_about_list > li {
    margin: 1px auto 40px;
}

.worry_about_list > li a {
    text-decoration: none;
    position: relative;
    background: #fff;
    padding: 30px 20px 30px 50px;
    display: flex;
    align-items: center;
    border-radius: 16px;
    font-weight: 600;
    line-height: 1.5;
    font-size: 24px;
    font-size: 23px;
}
.worry_about_list > li a:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 36px;
    height: 30px;
    background: url(../img/icon_balloon.svg) no-repeat center;
    background-size: 100% auto;
    top: 0;
    bottom: 0;
    right: -34px;
    margin: auto;
}
.worry_about_list > li a:after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 20px;
    height: 12px;
    background: url(../img/icon_arrow_g.svg) no-repeat center;
    background-size: 100% auto;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
    -webkit-transition: right 0.5s ease;
    transition: right 0.5s ease;
}
.worry_about_list > li a:hover {
    text-decoration: underline;
}
.worry_about_list > li a img {
    position: absolute;
    top: -20px;
    left: 10px;
}

.mainvis {
/*    height: 100vh;*/
    min-height: 100vh;
/*    min-height: min(100vh, 100dvh);*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #F2FAFC;
}
.colA {
    position: relative;
    min-height: 100vh;
    display: flex;
    width :calc(38%);
    border-radius: 0 13% 13% 0;
    overflow: hidden;
    background: url(../img/mainvis.png) no-repeat center;
    background-size: 100% auto;
}
.colA img {
    opacity: 0;
}
.colB {
    width :calc(100% - 38%);
    padding: 50px 50px;
    padding: 50px 50px 50px 2%;
    padding: 10px 30px 8% 2%;
    padding: 1px 30px 8% 2%;
    text-align: center;
}
.mainvis_itm {
/*    position: absolute;*/
}
#h1 {
/*    background: #28ABAA;*/
    color: #fff;
    text-align: center;
    border-radius: 16px;
    max-width: 940px;
    max-width: 830px;
    margin: auto;
    margin-top: 20px;
    margin-top: 1px;
    position: relative;
    z-index: 9;
}
.mainvis_feature_itms {
    display: block;
    margin: -40px auto -20px;
    margin: -10px auto 10px;
}
.mainvis_feature_itm {
    display: flex;
    justify-content: space-between;
    max-width: 850px;
    padding: 40px 0 40px 4%;
    margin: auto;
}

.mainvis_feature_itm > * {
    margin-left: -5%;
    position: relative;
    background: #fff;
    padding: 50px 2%;
    border-radius: 100%;
    overflow: visible;
/*    box-shadow: 0 0px 10px 0px #eee inset, 0 0px 40px 0px rgba(40, 171, 170, 0.1);*/
/*    box-shadow: 0 0px 20px 1px #eee inset, 0 0px 80px 0px rgba(40, 171, 170, 0.3);*/
    box-shadow: 0 0px 20px 1px #eee inset;
    box-shadow: 0 0px 15px 1px #F2FAFC inset;
    width: 300px;
    z-index: 9;
}
.mainvis_feature_itm > *:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    box-shadow: 0px 10px 80px 0px rgba(40, 171, 170, 0.3);
    box-shadow: 0px 50px 60px -20px rgba(40, 171, 170, 0.2);
    top: 0;
    left: 0px;
    margin: auto;
    z-index: 1;
}

img#pic {
    object-fit: cover;
}

div#rank {
    display: flex;
    justify-content: center;
    margin: 40px auto 80px;
    margin: 7% auto 7%;
}

div#rank > * {
    margin: 0 20px;
    min-width: 18vw;
}
img#tit {
    width: 90%;
    width: 80%;
    width: 540px;
    max-width: 940px;
    max-width: 660px;
    max-width: 70%;
}
.flow_area {
    list-style: none;
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin: 60px auto 20px;
}

.flow_area > li {
    background: #fff;
    border-radius: 20px;
    padding: 10px 4px 120px;
    position: relative;
    line-height: 1.7;
    width: calc(100% / 4 - 54px);
    width: calc(100% / 4 - 44px);
    font-weight: bold;
}
.flow_area > li:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 38px;
    height: 38px;
    background: url(../img/icon_arrow2.svg) no-repeat center;
    background-size: 100% auto;
    top: 0;
    bottom: 0;
    right: -54px;
    right: -50px;
    margin: auto;
}
.flow_area > li:last-of-type:before {
    opacity: 0;
}
.flow_no {
    background: #0E326F;
    padding: 5px 12px 7px;
    color: #fff;
    display: block;
    font-size: 28px;
    line-height: 1;
    border-radius: 14px;
    margin: -30px auto 20px;
    width: 40px;
    font-weight: bold;
}

.flow_area > li img {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: auto;
}

.flow_area > li p {
    height: 4em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video_area {
    display: flex;
    justify-content: center;
}

.txt_point_left {
    position: relative;
    vertical-align: middle;
}
.txt_point_left:before {
    content: "";
    display: inline-flex;
    display: inline-block;
    align-items: center;
    width: 26px;
    height: 1px;
    background: #222;
    top: 0;
    bottom: 0;
    margin: auto 6px 1px auto ;
    vertical-align: middle;
}

.footer_links {
    display: flex;
    justify-content: end;
    margin: 40px auto 1px;
}

.footer_links > li {
    list-style: none;
}

.footer_links > li ~ li {
    margin-left: 40px;
}

.footer_logo {
    margin-top: -70px;
    width: 300px;
    display: inline-block;
}

a.header_logo {
    display: inline-block;
    width: 216px;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 99;
    background: rgba(255, 255 ,255, 0.93);
    padding: 11px 14px 12px 11px;
    border-radius: 4px;
    opacity: 1;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/*.colB {
    height: 100vh;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.colB > * {
    width: 100%;
}*/

.fixed_btnArea {
    position: fixed;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 18px 20px;
    background: #28ABAA;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    z-index: 99;
    z-index: 9;
}
.fixed_btnArea.footPosition {
    bottom: -100px;
}
.fixed_btnArea_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1084px;
}

.fixed_btnArea .btn {
    padding: 11px 20px;
    padding: 20px;
    max-width: 580px;
    font-size: 20px;
    text-align: center;
    box-shadow: none;
}
.fixed_btnArea .btn:before {
/*    background-size: 80% auto;*/
}
.fixed_btnArea p.pcview_only span {
    border-bottom: 1px solid;
}

.mainvis ~ * {
    position: relative;
    z-index: 9;
}

.pagetop {
    position: fixed;
    text-align: right;
    bottom: 7px;
    right: 10px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 0;
}
.pagetop.isFixed {
    opacity: 1;
}
.pagetop.footPosition {
    opacity: 0;
}
.tit_frame_area {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 10px;
}