@charset "utf-8";
/* ========== basics ========== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, #nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

div {
    display: block;
}

html {
    font-size: 100%;
    line-height: 1.75;
}

body {
    color: rgb(54, 57, 72);
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    background-color: rgb(243, 229, 222);
}

::selection {
    color: rgb(243, 229, 222);
    background-color: rgb(54, 57, 72);
}

h2 {
    font-size: 3rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}

h3 {
    font-size: 2.7rem;
    font-weight: 600;
    text-align: center;
}

h4 {
    font-size: 2.4rem;
    font-weight: 600;
    text-align: center;
}

h5 {
    color: rgb(54, 57, 72);
    font-size: 1.56rem;
    font-weight: 600;
    text-align: center;
}

h5 strong {
    background: linear-gradient(transparent 60%, rgb(25, 239, 191) 60%);
}

p {
    font-size: 1.25rem;
    line-height: 1.75;
}

@media screen and (max-width: 68em) {
    h2 {
        font-size: 3.31rem;
        font-weight: 600;
    }

    h3 {
        font-size: 2.5rem;
        font-weight: 500;
    }

    h4 {
        font-size: 2rem;
        font-weight: 400;
    }

    h5 {
        font-size: 1.2rem;
        line-height: 2;
    }
}

@media screen and (max-width: 48em) {
    h2 {
        font-size: 2.1rem;
        font-weight: 500;
    }

    h3 {
        font-size: 1.8rem;
        font-weight: 400;
    }

    h4 {
        font-size: 1.5rem;
        font-weight: 400;
    }

    h5 {
        font-size: 1rem;
        line-height: 1.5;
        font-weight: 400;
        text-align: left;
    }

    p {
        font-size: 1rem;
    }
}

/* ============= figure ============= */
figure img {
    width: 100%;
}

/* ============= links ============= */
a {
    text-decoration: none;
}

a[target="_blank"], a.blink {
    color: rgb(0, 0, 0);
    font-weight: 600;
    text-decoration: underline;
}

a.button[target="_blank"] {
    font-weight: 400;
    text-decoration: none;
}

a[target="_blank"]:hover, a.blink:hover {
    text-decoration: none;
}

a[target="_blank"]::after {
    margin-left: 0.31rem;
    content: "\f08e";
    font-family: FontAwesome;
    display: inline-block;
}

/* ============= header ============= */
header {
    width: 100%;
    background-color: rgba(243, 229, 222, 0.9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
    transition: 0.8s;
}

#header {
    position: fixed;
}

#header.show {
    transition: 0.4s cubic-bezier(.1,.2,.3,1);
}

#header.hide {
    transform: translateY(-8rem);
}

.header-spacer {
    padding: 1rem;
}

@media screen and (max-width: 48em) {
    .header-spacer {
        padding: .5rem 1rem;
    }
}

/* ============= logo ============= */
header .logo img {
    width: 8.12rem;
    margin-top: 0.5rem;
}

@media screen and (max-width: 68em) {
    header .logo img {
        width: 6.25rem;
        margin-top: .5rem;
    }

}

/* ============= nav ============= */
nav {
    margin: auto 0;
    display: flex;
    align-items: center;
}

nav ul {
    display: flex;
}

nav li {
    list-style-type: none;
    padding: 0 0 0 1.25rem;
}

@media screen and (max-width: 68em) {
    nav li {
        padding: 0.93rem 0;
    }
}

/* ============= burger ============= */
.burger {
    display: none;
}

@media screen and (max-width: 68em) {
    .burger {
        display: block;
        z-index: 10;
        cursor: pointer;
        transform: rotateY(0);
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .burger-line {
        width: 1.75rem;
        height: 0.12rem;
        margin: 0 0 0.25rem 0;
        background-color: rgb(54, 57, 72);
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .burger-line:last-child {
        margin-bottom: 0;
    }

    .burger-close {
        transform: rotate(180deg);
    }

    .burger-close .burger-line:nth-child(1) {
        background-color: rgb(255, 255, 255);
        transform: rotate(45deg) translate(0.25rem, 0.25rem);
    }

    .burger-close .burger-line:nth-child(2) {
        opacity: 0;
    }

    .burger-close .burger-line:nth-child(3) {
        background-color: rgb(255, 255, 255);
        transform: rotate(-45deg) translate(0.31rem, -0.25rem);
    }
}

/* ============= menu ============= */
.menu a {
    color: rgb(54, 57, 72);
    font-size: 0.93rem;
    position: relative;
    display: inline-block;
    transition: 0.3s;
}

.menu a:hover {
    color: rgb(236, 100, 24);
}

.menu a::after {
    position: absolute;
    bottom: -0.31rem;
    left: 50%;
    content: '';
    width: 0;
    border-bottom: solid 2px rgb(236, 100, 24);
    transition: 0.3s;
    transform: translateX(-50%);
}

.menu a.button {
    margin-top: 0.18rem;
}

.menu a.button::after {
    border-bottom: none;
}

.menu a:hover::after {
    width: 100%;
}

.menu-copyright {
    display: none;
}

@media screen and (max-width: 68em) {
    .menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        visibility: hidden;
        z-index: 1;
    }

    .menu-active {
        visibility: visible;
    }

    .menu a {
        color: rgb(255, 255, 255);
        font-size: 1rem;
        margin: 0.31rem 0;
    }

    .menu a:hover {
        color: rgb(255, 255, 255);
    }

    .menu a::after {
        border-bottom: solid 0.12rem rgb(255, 255, 255);
    }

    .menu-list {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background: rgb(54, 57, 72);
        list-style-type: none;
        transform: translate3d(0, -100%, 0);
        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .menu-list-active {
        transform: translate3d(0, 0, 0);
    }

    .menu-list ul {
        flex-flow: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100vh;
    }

    .menu-item {
        transform: translate3d(31.25rem, 0, 0);
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .menu-item-active {
        transform: translate3d(0, 0, 0);
    }

    .menu-link:hover:before {
        width: 100%;
    }

    .menu .menu-item:nth-child(1) {
        display: block;
        transition-delay: 0.05s;
    }

    .menu .menu-item:nth-child(2) {
        transition-delay: 0.12s;
    }

    .menu .menu-item:nth-child(3) {
        transition-delay: 0.19s;
    }

    .menu .menu-item:nth-child(4) {
        transition-delay: 0.26s;
    }

    .menu .menu-item:nth-child(5) {
        transition-delay: 0.33s;
    }

    .menu .menu-item:nth-child(6) {
        transition-delay: 0.4s;
    }

    .menu .menu-item:nth-child(7) {
        transition-delay: 0.47s;
    }

    .menu-copyright {
        display: block;
        width: 100%;
        margin-bottom: 3.12rem;
    }

    .menu-copyright p {
        text-align: center;
        color: rgba(255, 255, 255, 0.7);
        font-size: .8rem;
        transition: opacity .4s ease-out;
        transition-delay: .4s;
    }

    .menu-copyright p a {
        font-size: 1rem;
    }
}

/* ============= button ============= */
a.button {
    color: rgb(255, 255, 255);
    transition: all .25s cubic-bezier(0.390, 0.500, 0.150, 1.360);
    border-radius: 6.25rem;
    padding: 0.43rem 1.25rem;
    background-color: rgb(236, 100, 24);
    box-shadow: rgb(236, 100, 24) 0 0 0 0.4rem inset;
}

a.button:hover {
    color: rgb(236, 100, 24);
    background-color: rgb(255, 255, 255);
    box-shadow: rgb(236, 100, 24) 0 0 0 2px inset;
}

.menu-list-active a.button {
    color: rgb(236, 100, 24);
    background-color: rgb(255, 255, 255);
    box-shadow: rgb(255, 255, 255) 0 0 0 2px inset;
}

.menu-list-active a.button:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(236, 100, 24);
    box-shadow: rgb(255, 255, 255) 0 0 0 2px inset;
}
.button-box-inner {
    display: flex;
    justify-content: space-between;
}

.button-box p {
    text-align: center;
}

.button-box a.button {
    padding: 1.25rem 3.12rem;
}

.link-grid, .link-block {
    margin-top: 3.12rem;
    text-align: center;
}

@media screen and (max-width: 68em) {
    .button-box a.button {
        font-size: 0.93rem;
        padding: 0.93rem 1.87rem;
    }

    .link-grid, .link-block {
        margin-top: 2.81rem;
    }
}

@media screen and (max-width: 48em) {
    .button-box {
        text-align: center;
    }

    .button-box-inner {
        flex-direction: column;
    }

    .button-box p {
        text-align: left;
    }

    .button-box .link-box p {
        text-align: center;
    }
}


/* ========== banner ========== */
#banner {
    display: block;
    background-image: url(../img/visual-img.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto auto;
    min-height: 40rem;
}

.banner-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}

.banner-content h1 {
    color: rgb(255, 255, 255);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.25;
}

.banner-content p {
    color: rgb(255, 255, 255);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 3;
}

.banner-spacer {
    padding: 16rem 0 0;
}

@media screen and (min-width: 120em) {
    #banner {
        background-size: 100% auto;
    }
}

@media screen and (max-width: 80em) {
    #banner {
        min-height: 30rem;
    }

    .banner-content {
        align-items: flex-start;
    }

    .banner-content-copy {
        margin-top: 9rem;
    }

    .banner-spacer {
        padding: 4.37rem 2rem 0;
    }

    .banner-content-graphic figure img {
        width: 100%;
    }
}

@media screen and (max-width: 68em) {
    .banner-content-copy {
        margin-top: 7rem;
    }

    .banner-spacer {
        padding: 4.5rem 1rem 0;
    }
    
    .banner-content h1 {
        font-size: 2.5rem;
    }
    
    .banner-content p {
        font-size: 1.25rem;
        line-height: 2.5;
    }
}

@media screen and (max-width: 48em) {
    #banner {
        background-image: url(../img/visual-img.jpg);
        background-position: center 16rem;
        background-size: auto 24rem;
        min-height: 40rem;
    }

    .banner-content-copy {
        margin: 2rem 0;
        text-align: center;
    }

    .banner-spacer {
        padding: 3.6rem 1rem 0;
    }

    .banner-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .banner-content h1 {
        font-size: 2rem;
        color: rgb(54, 57, 72);
    }
    
    .banner-content p {
        font-size: 1rem;
        line-height: 2.5;
        color: rgb(54, 57, 72);
    }
}

/* ========== spacer ========== */
.tl-spacer {
    padding-top: 12.5rem;
}

.ts-spacer {
    padding-top: 6.25rem;
}

.bl-spacer {
    margin-bottom: 12.5rem;
}

.bs-spacer {
    margin-bottom: 6.25rem;
}

.center-spacer {
    padding: 0 10rem;
}

@media screen and (min-width: 120em) {
    .center-spacer {
        padding: 0 20rem;
    }
}

@media screen and (max-width: 80em) {
    .center-spacer {
        padding: 0 2rem;
    }
}

@media screen and (max-width: 68em) {
    .center-spacer {
        padding: 0 1rem;
    }
}

@media screen and (max-width: 48em) {
    .tl-spacer {
        padding-top: 6.25rem;
    }
    
    .ts-spacer {
        padding-top: 3.12rem;
    }
    
    .bl-spacer {
        margin-bottom: 6.25rem;
    }
    
    .bs-spacer {
        margin-bottom: 3.12rem;
    }

    .center-spacer {
        padding: 0 1rem;
    }
}

/* ========== about intro ========== */
.about-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.about-content-graphic {
    flex-basis: 45%;
}

.about-content-copy {
    flex-basis: 45%;
}

.about-content-copy p {
    margin-bottom: 3.12rem;
}

#about h3, #howtouse h3, #planimg h3{
    position: relative;
    padding: 0 4.06rem;
    text-align: center;
}

#about h3:before, #howtouse h3:before, #planimg h3:before {
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 100%;
    height: 2px;
    content: '';
    background: rgb(76, 73, 72);
}

#about h3 span, #howtouse h3 span, #planimg h3 span {
    position: relative;
    padding: 0 1rem;
    background: rgb(243, 229, 222);
}

#howtouse .howtouse-abtest h3 span {
    background: rgb(243, 229, 222);
}

#about h4 {
    color: rgb(236, 100, 24);
}

@media screen and (max-width: 68em) {
    #about {
        background-position: left 55rem;
    }
}

@media screen and (max-width: 48em) {
    #about {
        background-image: none;
    }

    .about-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .about-content-copy p {
        margin-top: 3.12rem;
    }

    #about h3, #howtouse h3, #planimg h3 {
        padding: 0;
    }

    #about h3:before, #howtouse h3:before, #planimg h3:before {
        background: none;
    }
    
    #about h3 span, #howtouse h3 span, #planimg h3 span {
        background: none;
        padding: 0;
    }
}

/* ========== approach until now ========== */
.approach-untilnow figure {
    margin-bottom: 6.25rem;
}

.approach-untilnow figure img {
    margin-bottom: 1.87rem;
}

@media screen and (max-width: 48em) {
    .approach-untilnow figure {
        margin-bottom: 3.12rem;
    }

    .approach-untilnow figure {
        margin-bottom: 3.12rem;
    }
}

/* ========== approach in code ========== */
.incode-content p {
    font-weight: 600;
}

.incode-content-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.incode-content-top p {
    margin: .93rem 0 1.87rem;
    text-align: center;
}

.incode-content-bottom {
    margin: .93rem 0 6.25rem;
}

@media screen and (max-width: 48em) {
    .incode-content p {
        font-size: .8rem;
        font-weight: 400;
        line-height: 1.5;
    }

    .incode-content-top {
        text-align: center;
        flex-direction: column;
    }

    .incode-content-top img {
        width: 33%;
    }

    .incode-content-bottom {
        margin: .93rem 0 3.12rem;
    }
}

/* ========== how to use ========== */
#howtouse h4 {
    font-size: 1.56rem;
}

.howtouse-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.howtouse-content-left {
    flex-basis: 45%;
}

.howtouse-content-right {
    flex-basis: 45%;
}

.howtouse-content figure {
    margin: .93rem 0;
}

.howtouse-content figure img {
    border-radius: .62rem;
}

@media screen and (max-width: 48em) {
    #howtouse{
        background-image: none;
    }

    .howtouse-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .howtouse-content-left {
        margin-bottom: 3.12rem;
    }
}

/* ========== purchase ========== */
.purchase-content, .abtest-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.purchase-content-left, .abtest-content-left {
    flex-basis: 30%;
}

.purchase-content-center, .abtest-content-center {
    flex-basis: 30%;
}

.purchase-content-right, .abtest-content-right {
    flex-basis: 30%;
}

.purchase-content-arrow, .abtest-content-arrow {
    flex-basis: 3%;
    align-self: center;
}

.purchase-content figure, .abtest-content figure {
    margin: .93rem 0;
}

.purchase-content p, .abtest-content p {
    text-align: center;
}

@media screen and (max-width: 48em) {
    .purchase-content, .abtest-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .purchase-content-arrow img, .abtest-content-arrow img {
        width: 3rem;
        transform: rotate(90deg);
        margin: 1rem 0;
    }

    .purchase-content p, .abtest-content p {
        text-align: left;
    }
}

/* ========== plan image ========== */
.planimg-content-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}

.planimg-content-left, .planimg-content-right {
    flex-basis: 45%;
    background-color: rgb(255, 255, 255);
    border-radius: .62rem;
    padding: 1.56rem 3.12rem;
}

.planimg-content-arrow {
    flex-basis: 5%;
    align-self: center;
}

.planimg-content-top h4 {
    font-size: 1.56rem;
}

.planimg-content-top h4 span {
    font-size: 1.25rem;
}

.basic-top, .basic-bottom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.basic-top figure, .basic-bottom figure {
    margin: .93rem .93rem 0 0;
    flex-basis: 40%;
    text-align: center;
}

.basic-top p, .basic-bottom p {
    flex-basis: 60%;
}

.basic-top figure img, .basic-bottom figure img {
    max-width: 7rem;
}

#planimg .schedule-baic h4 {
    color: rgb(236, 100, 24);
}

.schedule-baic p {
    text-align: center;
    margin: .93rem 0 0;
}

.planimg-schedule {
    margin-top: 10rem;
}

@media screen and (max-width: 68em) {
    #planimg {
        background-position: left 75rem;
    }
}

@media screen and (max-width: 48em) {
    #planimg {
        background-image: none;
    }

    .planimg-content-top {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .planimg-content-arrow img {
        width: 3rem;
        transform: rotate(90deg);
        margin: 3.12rem 0;
    }

    .planimg-content-left, .planimg-content-right {
        width: 100%;
        background-color: rgb(255, 255, 255);
        border-radius: .62rem;
        padding: 1.56rem;
    }

    .basic-top figure, .basic-bottom figure {
        margin: .5rem .1rem 0 0;
    }

    .basic-top figure img, .basic-bottom figure img {
        max-width: 5rem;
    }

    .schedule-baic p {
        text-align: left;
        font-size: .9rem;
        line-height: 1.5;
    }
}

/* ========== report img ========== */
.reportimg-intro p {
    font-weight: 600;
}

.reportimg-intro .button-box p {
    font-weight: 400;
}

/* ========== appendix ========== */
#appendix p {
    text-align: center;
}

#appendix figure {
    background-color: rgb(255, 255, 255);
    border-radius: .62rem;
    padding: 3rem 2rem;
    margin: 3.12rem 0 6.25rem;
}

#appendix .button-box p {
    margin: 0 0 3.12rem;
}

@media screen and (max-width: 48em) {
    #appendix p {
        text-align: left;
    }

    #appendix figure {
        padding: 1rem .5rem;
        margin: 2rem 0 3.12rem;
    }

    #appendix .button-box .link-block p {
        text-align: center;
    }
}

/* ========== request bar ========== */
.request-bar {
    background-color: rgb(54, 57, 72);
    border-radius: 0.62rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5rem 0;
    margin: 5rem 0;
}

.request-bar a.button {
    font-size: 1.25rem;
    margin: 0.2rem 0 0.2rem 4rem;
    padding: 0.8rem 4rem;
}

.request-bar p {
    color: rgb(255, 255, 255);
    font-size: 2rem;
    margin: 0 0.4rem;
    padding: 0;
}

@media screen and (max-width: 48em) {
    .request-bar {
        flex-direction: column;
        padding: 2rem 0;
    }

    .request-bar p {
        font-size: 1rem;
        margin: 0.3rem 0.4rem 0;
    }

    .request-bar a.button {
        font-size: 1rem;
        margin: 0.2rem 0.4rem 0.5rem;
        padding: 0.5rem 2.5rem;
    }
}

/* ========== footer ========== */
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgb(255, 255, 255);
    background-color: rgb(54, 57, 72);
    text-align: center;
    margin-top: 10rem;
}

footer .inner {
    margin: 5rem 0;
}

footer .logo {
    margin: 0 auto;
}

footer .links {
    margin: 0.5rem 0 2rem;
}

footer .links a {
    color: rgb(255, 255, 255);
    margin: 1rem 1.5rem 0;
    position: relative;
    display: inline-block;
    transition: 0.3s;
}

footer .links a:hover {
    color: rgb(243, 229, 222);
}

footer .links a::after {
    position: absolute;
    bottom: -0.1rem;
    left: 50%;
    content: '';
    width: 0;
    border-bottom: solid 2px rgb(243, 229, 222);
    transition: 0.3s;
    transform: translateX(-50%);
}

footer .links a:hover::after {
    width: 100%;
}

footer img {
    width: 10rem;
}

footer .copyright p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 1rem 0 0 0;
}

@media screen and (max-width: 48em) {
    footer .copyright p {
        line-height: 1.2;
        margin: 3.12rem 0;
    }
}