body {
    position      : relative;
    height        : 100%;
    font-family   : '游ゴシック体', 'Yu Gothic', 'YuGothic', 'Futura';
    letter-spacing: .05em;
    margin        : 0px;
}

body.-fix {
    height    : 100vh;
    overflow-y: hidden
}

.show-pc {
    display: block !important;
}

.show-sp {
    display: none !important;
}

@media screen and (max-width: 800px) {
    .show-pc {
        display: none !important;
    }

    .show-sp {
        display: block !important;
    }
}

.hover:hover {
    opacity: 0.8;
}


header {
    background-color: #fff;
}

header::after,
main::after,
footer::after {
    display: none
}

header *::after,
main *::after,
footer *::after {
    display: none
}

header img,
main img,
footer img {
    width : 100%;
    height: auto
}

.header {
    display           : -webkit-box;
    display           : -ms-flexbox;
    display           : flex;
    -webkit-box-pack  : justify;
    -ms-flex-pack     : justify;
    justify-content   : space-between;
    -webkit-box-align : center;
    -ms-flex-align    : center;
    align-items       : center;
    z-index           : 2147483645;
    -webkit-transition: 1s ease 0s;
    transition        : 1s ease 0s;
    padding-left      : 20px;
    height            : 90px;
}

.header-img {
    padding: 25px 0;
}

.mv {
    width : 70%;
    margin: 0 auto;
}

.mv-img {
    width : 80%;
    margin: 0 auto;
}

.mv-ul {
    display        : flex;
    justify-content: center;
    list-style     : none;
    padding        : 0;
}

.point {
    width : 70%;
    margin: 0 auto;
}

.point-img,
.type-img,
.outline-img {
    width : 80%;
    margin: 0 auto;
}

.point ul {
    display        : flex;
    justify-content: center;
    list-style     : none;
    padding        : 0;
    padding-top    : 80px;
}

.outline {
    width  : 70%;
    margin : 0 auto;
    padding: 60px;
}

.outline-text {
    background-color: #f9f9f9;
    width           : 80%;
    margin          : 0 auto;
    padding         : 30px;
    font-size       : 20px;
}

.outline-text .block {
    padding-top: 10px;
    line-height: 1.7em;
}

.outline-text .caption {
    font-weight: bold;
}

.outline-text .caption-caution {
    color       : red;
    padding-left: 10px;
}

.outline-text .block a {
    color: #000;
}

/* アコーディオン */
.acd-check {
    display: none;
}

.acd-label {
    background: #000;
    display   : block;
    position  : relative;
    cursor    : pointer;
}

.acd-label:after {
    background         : #000;
    box-sizing         : border-box;
    content            : '';
    display            : block;
    background-image   : url("../images/open.png");
    background-size    : contain;
    background-position: center;
    background-repeat  : no-repeat;
    padding            : 24px;
    position           : absolute;
    right              : 20px;
    top                : 24px;
}

.acd-content {
    display   : block;
    height    : 0;
    opacity   : 0;
    padding   : 0 10px;
    visibility: hidden;
}

.acd-check:checked+.acd-label:after {
    content         : '';
    background-image: url("../images/close.png");
    padding         : 26px;
}

.acd-check:checked+.acd-label+.acd-content {
    height    : auto;
    opacity   : 1;
    padding   : 40px 0 40px 40px;
    visibility: visible;
}

/* アコーディオン */

.flow {
    width : 70%;
    margin: 0 auto;
}

.flow .flow-caption {
    background-color: #000;
    color           : #fff;
    text-align      : center;
    font-size       : 26px;
    padding         : 1px 30px;
}

.flow .flow-text {
    background-color: #f9f9f9;
    margin-bottom   : 30px;
}

.flow .flow-text .step-info {
    display        : flex;
    justify-content: flex-start;
    padding-bottom : 30px;
}

.flow .flow-text .step {
    display        : flex;
    justify-content: flex-start;
}

.step-icon {
    width           : 150px;
    background-color: #000;
    color           : #FFF;
    font-size       : 26px;
    text-align      : center;
    line-height     : 4.4rem;
}

.step-icon p {
    margin: 0px;
}

.step-caption {
    padding-left: 4em;
    font-weight : bold;
}

.step-caption p {
    position : relative;
    font-size: 20px;
}

.step-caption .icon1::before,
.step-caption .icon2::before,
.step-caption .icon3::before {
    content            : "";
    display            : block;
    width              : 30px;
    height             : 30px;
    position           : absolute;
    left               : -40px;
    background-size    : contain;
    background-position: center;
    background-repeat  : no-repeat;
}

/* アイコン */
.step-caption .icon1::before {
    background-image: url("../images/step_icon1.png");
}

.step-caption .icon2::before {
    background-image: url("../images/step_icon2.png");
}

.step-caption .icon3::before {
    background-image: url("../images/step_icon3.png");
}

/* アイコン */

.step-arrow {
    padding-left: 32px;
}

.step-text {
    color      : #000000;
    width      : 85%;
    margin     : 0 auto;
    padding-top: 30px;
    line-height: 2em;
    font-size  : 20px;
}

.step-text-caution {
    color: red;
}

.step-text a {
    color: #000;
}

.download,
.download-sp {
    padding-top: 2em;
}

.download a {
    border         : solid 1px #333;
    padding        : 16px 72px;
    text-decoration: none;
    color          : #000;
}

.download a:hover {
    opacity: 0.5;
}

.sp-app {
    display        : flex;
    justify-content: flex-start;
}

.iphone {
    padding-right: 8%;
}


/* 矢印 */
.dli-arrow-down1,
.dli-arrow-down2,
.dli-arrow-down3,
.dli-arrow-down4,
.dli-arrow-down5,
.dli-arrow-down6 {
    display       : inline-block;
    vertical-align: middle;
    color         : #000;
    line-height   : 1;
    position      : relative;
    width         : 0.2em;
    background    : currentColor;
}

.dli-arrow-down1::before,
.dli-arrow-down2::before,
.dli-arrow-down4::before,
.dli-arrow-down5::before {
    position   : absolute;
    content    : "";
    transform  : rotate(90deg);
    bottom     : -15px;
    left       : -8px;
    margin     : auto;
    box-sizing : border-box;
    border     : 0.65em solid transparent;
    border-left: 0.65em solid #000;
}

.dli-arrow-down3::before,
.dli-arrow-down6::before {
    position        : absolute;
    content         : "";
    width           : 12px;
    height          : 12px;
    background-color: #000;
    border-radius   : 50%;
    transform       : rotate(90deg);
    bottom          : -8px;
    left            : -4px;
    margin          : auto;
    box-sizing      : border-box;
}

.dli-arrow-down1 {
    height: 14em;
}

.dli-arrow-down2 {
    height: 16em;
}

.dli-arrow-down3 {
    height: 22em;
}

.dli-arrow-down4 {
    height: 52em;
}

.dli-arrow-down5 {
    height: 20em;
}

.dli-arrow-down6 {
    height: 31em;
}

/* 矢印 */

.offer {
    padding-top: 100px;
    width      : 70%;
    margin     : 0 auto;
}

.offer-img {
    width : 80%;
    margin: 0 auto;
}

.info {
    width  : 70%;
    margin : 0 auto;
    padding: 70px 0;
}

.info-title {
    width      : 60%;
    padding    : 20px 0;
    margin     : 0 auto;
    font-size  : 24px;
    font-weight: bold;
    text-align : center;
}

.info-text {
    overflow        : auto;
    height          : 500px;
    padding         : 10px;
    color           : #000;
    background-color: #fff;
    line-height     : 1.8em;
    border          : 1px solid #000;
}

.info-text a {
    color: #000;
}

.underline {
    text-decoration: underline;
}

.footer-line {
    padding: 40px 0;
    width  : 70%;
    margin : 0 auto;
}

.footer-text {
    width         : 60%;
    margin        : 0 auto;
    padding-bottom: 60px;
}

.footer-text a {
    color: #000;
}

.footer-logo {
    background-color: #000;
}

.footer-img {
    width  : 20%;
    margin : 0 auto;
    padding: 30px 0 60px 0;
}

.pt-40 {
    padding-top: 40px;
}

.pt-80 {
    padding-top: 80px;
}

.pt-100 {
    padding-top: 100px;
}

#pagetop {
    position           : fixed;
    bottom             : 10px;
    right              : 10px;
    height             : 50px;
    opacity            : 0;
    transition-duration: 0.5s;
}
