/* ========== 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;
}

html {
    font-size: 100px;
    line-height: 1.7;
}

body {
    color: rgb(54, 57, 72);
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 0.16rem;
    background-color: rgb(245, 245, 245);
}

::selection {
    color: rgb(255, 255, 255);
    background: rgb(49, 106, 165);
}

.container {
    margin: 0 auto;
    padding: 1.5rem 0.4rem;
}

.container strong {
    font-weight: 600;
}

h2 {
    color: rgb(49, 106, 165);
    font-size: 0.4rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

h3 {
    color: rgb(49, 106, 165);
    font-size: 0.28rem;
    font-weight: 600;
    margin: 1.0rem 0 0.2rem 0;
    line-height: 1.3;
}

h3 span {
    color: rgba(54, 54, 54, 0.5);
    font-size: 0.23rem;
    font-weight: 500;
}

h4 {
    font-size: 0.25rem;
    font-weight: 600;
    padding-bottom: 0.2rem;
}

h5 {
    color: rgba(255, 255, 255);
    font-size: 0.4rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

h5 span {
    color: rgba(54, 54, 54, 0.5);
    font-size: 0.35rem;
    font-weight: 500;
}

p, dl.company-profile {
    font-size: 0.16rem;
    text-align: left;
}

p.accent {
    font-size: 0.20rem;
    text-align: center;
}

@media screen and (max-width: 1280px) {
    html { 
        font-size: 50px;
    }
    
    body {
        font-size : calc((0.16rem * 100 / 50) * 0.9);
    }

    h2, h5 {
        font-size : calc((0.35rem  * 100 / 50) * 0.66);
    }

    h3 {
        font-size : calc((0.31rem  * 100 / 50) * 0.66);
    }

    h4 {
        font-size : calc((0.29rem  * 100 / 50) * 0.66);
    }

    p, p.accent, dl.company-profile {
        font-size : calc((0.28rem  * 100 / 50) * 0.66);
    }

    p.accent {
        text-align: left;
    }
}

figure img {
    width: 100%;
}

/* ========== ul ========== */
.text li {
    margin: 0.1rem 0 1.1em 0.2rem;
    word-wrap: break-word;
}

@media screen and (max-width: 1280px) {
    .text li {
        margin: 0.1rem 0 1.1em 0.4rem;
    }
}

/* ============= header ============= */
header {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    transition: 0.8s;
}

@media screen and (max-width: 1280px) {
    header {
        height: 60px;
    }
}

/* ============= logo ============= */
.logo {
    width: 240px;
    height: auto;
}

header .logo {
    position: fixed;
    top: 0.17rem;
    left: 0.4rem;
}

.light {
    fill: rgba(255, 255, 255);;
}

.dark {
    fill: rgb(51, 180, 140);
}

@media screen and (max-width: 1280px) {
    header .logo {
        width: 200px;
        margin-top: 0.15rem;
    }
}

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

nav ul {
    display: flex;
}

nav li {
    list-style-type: none;
    padding: 0.2rem 0.15rem;
}

nav li .button {
    position: relative;
    top: -0.05rem;
    right: 0.4rem;
    margin-left: 0.5rem;
}

nav li a {
    font-weight: 600;
}

@media screen and (max-width: 896px) {
    nav li .button {
        right: 0;
        margin-left: 0;
    }
}

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

.links {
    margin: 0.5rem 0;
}

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

.links a:hover {
    color: rgb(51, 180, 140);
}

.links a::after {
    position: absolute;
    bottom: -0.05rem;
    left: 50%;
    content: '';
    width: 0;
    border-bottom: solid 2px rgb(51, 180, 140);
    transition: 0.3s;
    transform: translateX(-50%);
}

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

#about .container a, #sub.purpose a, #sub.law .company-profile dd a , #company .company-profile dd a, #overview span a, #overview .history .links a {
    color: rgb(51, 180, 140);
}

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

@media screen and (max-width: 1280px) {
    .burger {
        display: block;
        position: absolute;
        right: 0.4rem;
        top: 0.45rem;
        z-index: 10;
        cursor: pointer;
        transform: rotateY(0);
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .burger-line {
        width: 28px;
        height: 2px;
        margin: 0 0 4px 0;
        background-color: rgb(255, 255, 255);
        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(4px, 4px);
    }

    .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(5px, -4px);
    }
}

/* ============= menu ============= */
.menu a {
    color: rgb(255, 255, 255);
    position: relative;
    display: inline-block;
    transition: 0.3s;
}

.menu a:hover {
    color: rgb(51, 180, 140);
}

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

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

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

@media screen and (max-width: 1280px) {
    .menu {
        position: fixed;
        top: 0;
        width: 100%;
        visibility: hidden;
    }

    .menu-active {
        visibility: visible;
    }

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

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

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

    .menu-list {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background: rgb(51, 180, 140);
        list-style-type: none;
        transform: translate3d(0, -100%, 0);
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }

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

    .menu-item {
        transform: translate3d(500px, 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.1s;
    }

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

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

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

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

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

/* ============= button ============= */
.button-inner .button {
    margin: 0 0.2rem;
}

a.button {
    color: rgb(255, 255, 255);
    transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
    border-radius: 0.05rem;
    padding: 0.05rem 0.2rem;
    background-color: rgb(51, 180, 140);
    box-shadow: rgb(51, 180, 140) 0 0 0 0.4rem inset;
}

a.button:hover {
    color: rgb(51, 180, 140);
    background-color: rgb(255, 255, 255);
    box-shadow: rgb(51, 180, 140) 0 0 0 0.02rem inset;
}

@media screen and (max-width: 1024px) {
    .button-inner a.button, .details .button {
        display: block;
        margin: 0.5rem 0;
    }
}

/* ========== animation ========== */
@keyframes fade-in-up {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

.animated01 {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.animated-fade-in-up {
    opacity: 0;
}

.fade-in-up {
    opacity: 0;
    animation-name: fade-in-up;
}

/* ============= inner ============= */
.inner {
    max-width: 1200px;
    width: auto;
    margin: 0 auto;
    text-align: center;
}

/* ============= banner ============= */
#banner {
    background-color: rgba(63, 114, 166);
    background-image: url("../img/visual-bg.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
    background-size: auto;
    height: auto;
}

#banner .inner {
    padding: 1.6rem 0.4rem 0.2rem;
} 

#banner h1 {
    font-size: 0.4rem;
    font-weight: 600;
    color: rgb(255, 255, 255);
    line-height: 1.5;
    margin-bottom: 0.6rem;
}

#banner a.button {
    font-size: 0.2rem;
    border-radius: 0.05rem;
    padding: 0.15rem 0.8rem;
}

#banner a.button:hover {
    box-shadow: rgb(51, 180, 140) 0 0 0 0.03rem inset;
}

#banner p {
    font-size: 0.25rem;
    font-weight: 500;
    text-align: center;
    color: rgb(255, 255, 255);
    margin-top: 0.15rem;
}

#banner .next-icon {
    text-align: center;
}

#banner .next-icon svg {
    width: 0.3rem;
    margin-top: 1.2rem; 
}

@media screen and (max-width: 1280px) {
    #banner h1 {
        font-size : calc((0.4rem * 100 / 50) * 0.9);
    }

    #banner .inner {
        padding: 1.9rem 0.4rem 0.1rem;
    } 

    #banner .contents {
        margin-top: 1.3rem;
    }

    #banner .next-icon svg {
        width: 0.4rem;
        margin-top: 2.8rem;
    }

    #banner a.button {
        font-size: 0.4rem;
        padding: 0.25rem 1.2rem;
    }

    #banner p {
        font-size: 0.4rem;
    }
}

@media screen and (max-width: 1024px) {
    #banner h1 {
        font-size : calc((0.3rem * 100 / 50) * 0.9);
    }
}

/* ========== contact bar ========== */
.contact-bar {
    width: 100%;
    background-color: rgb(54, 57, 72);
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-bar .inner {
    margin: 0.3rem 0 0.35rem;
}

.contact-bar .inner p {
    font-size: 0.3rem;
    color: rgb(255, 255, 255);
    text-align: center;
}

.contact-bar a.button {
    font-size: 0.25rem;
    color: rgb(255, 255, 255);
    margin: 0.2rem 0.3rem;
    padding: 0.15rem 1rem;
    background-color: rgb(51, 180, 140);
    box-shadow: rgb(51, 180, 140) 0 0 0 0.4rem inset;
}

.contact-bar a.button:hover {
    color: rgb(51, 180, 140);
    background-color: rgb(255, 255, 255);
    box-shadow: rgb(51, 180, 140) 0 0 0 0.03rem inset;
}

@media screen and (max-width: 1280px) {
    .contact-bar .inner p {
        font-size : calc((0.4rem  * 100 / 50) * 0.66);
    }

    .contact-bar a.button {
        font-size: 0.4rem;
        padding: 0.25rem 1.5rem;
    }
}

@media screen and (max-width: 1024px) {
    .contact-bar {
        flex-direction: column;
    }

    .contact-bar .inner p {
        font-size: 0.4rem;
    }

    .contact-bar a.button {
        display: block;
    }
}

/* ========== overview ==========  */
#overview .contents {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

#overview .contents.inverse {
    flex-direction: row-reverse;
}

#overview .container-inner h3 {
    margin-bottom: 0.5rem;
}

#overview .col {
    flex-basis: 65%;
}

#overview .col h4 {
    text-align: left;
}

#overview .col:last-child {
    flex-basis: 35%;
}

#overview .inner .container p {
    margin-bottom: 0.5rem;
}

#overview .col figure {
    margin: 0 0.5rem 0.5rem 0;
}

#overview .col figure img {
    border-radius: 0.15rem;
}

#overview .contents.inverse .col figure {
    margin: 0 0 0.5rem 0.5rem;
}

@media screen and (max-width: 896px) {
    #overview .col h4 {
        text-align: center;
    }

    #overview .contents, #overview .contents.inverse {
        flex-direction: column;
    }

    #overview .inner .container p {
        margin-bottom: 1rem;
    }

    #profile .inner .container p:last-child {
        margin-bottom: 0;
    }

    #overview .col figure, #overview .contents.inverse .col figure {
        margin: 0.25rem 0;
    }
}

/* ========== flow ==========  */
#flow {
    width: 100%;
    background-color: rgba(49, 106, 165, 0.9);
}

#flow h2, #flow h3 {
    color: rgba(255, 255, 255);
}

#flow p.accent {
    color: rgba(255, 255, 255, 0.8);
}

#flow .contents .contents-inner {
    display: flex;
    align-items: center; 
}

#flow .col {
    flex-basis: 50%;
    margin-top: 0.5rem;
}

#flow .col.first {
    padding-right: 0.5rem;
}

@media screen and (max-width: 1024px) {
    #flow .contents .contents-inner {
        flex-direction: column;
    }

    #flow .col.first {
        padding-right: 0;
    }
}

/* ========== merit ==========  */
#merit .container .list-inner {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

#merit .col {
    flex-basis: 48%;
    background-color: rgba(63, 114, 166, 0.1);
    border-radius: 0.1rem;
    background-repeat: no-repeat;
    background-position: 0.2rem 0.2rem;
    background-size: 0.8rem;
    height: auto;
}

#merit .col.first {
    background-image: url("../img/icon-comment.svg");
}

#merit .col.second{
    background-image: url("../img/icon-devices.svg");
}

#merit .col.third {
    background-image: url("../img/icon-savings.svg");
}

#merit .col.forth{
    background-image: url("../img/icon-japan.svg");
}

#merit .col h4 {
    color: rgba(63, 114, 166);
    text-align: left;
    margin: 0.18rem 0.2rem 0.05rem 1.15rem;
    padding: 0;
}

#merit .col p {
    margin: 0 0.2rem 0.2rem 1.15rem;
}

#merit .contents p {
    text-align: center;
    margin-bottom: 0.5rem;
}

#merit .contents .list-inner {
    background-color: rgba(63, 114, 166, 0.1);
    border-radius: 0.1rem;
}

#merit .contents .list-inner .cols {
    margin: 0.3rem;
}

#merit .contents .list-inner .cols p {
    font-weight: 600;
    margin: 0.1rem 0.1rem 0 0.1rem;
}

@media screen and (max-width: 1024px) {
    #merit .list-inner {
        flex-direction: column;
    }

    #merit .col {
        background-position: 0.5rem 0.3rem;
        background-size: 1.5rem;
    }

    #merit .col.first, #merit .col.third {
        margin-bottom: 0.5rem;
    }

    #merit .col h4 {
        margin: 2rem 0.5rem 0.05rem 0.5rem;
    }
    
    #merit .col p {
        margin: 0 0.5rem 0.5rem 0.5rem;
    }

    #merit .contents .list-inner {
        padding-top: 0.5rem;
    }
    
    #merit .contents .list-inner .cols img {
        max-width: 80%;
    }

    #merit .contents .list-inner .cols p {
        margin: 0.1rem 0.1rem 0.5rem 0.1rem;
        text-align: center;
    }
}

/* ========== realization ==========  */
#realization .contents {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

#realization .contents .col {
    flex-basis: 46%;
    margin-top: 0.5rem;
}

#realization .contents .col.arrow {
    flex-basis: 4%; 
}

#realization .material-symbols-rounded {
    font-size: 0.5rem;
    color: rgba(63, 114, 166, 0.7);
}

#realization .contents .col figure img {
    border-radius: 0.1rem;
}

@media screen and (max-width: 1024px) {
    #realization .contents {
        flex-direction: column;
    }

    #realization .contents .col {
        flex-basis: 46%;
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
    }

    #realization .contents .col.arrow img {
        transform: rotate(90deg);
    }
}

/* ========== price ==========  */
#price {
    width: 100%;
    background-color: rgb(49, 106, 165, 0.9);
}

#price h2, #price h3, #price span.info {
    color: rgba(255, 255, 255);
}

#price .accent {
    color: rgba(255, 255, 255, 0.8);
}

#price.contents .contents-inner {
    display: flex;
    align-items: center; 
}

#price .material-symbols-rounded {
    color: rgba(255, 255, 255);
    font-size: 0.5rem;
}

.price-table {
    background-color: rgb(193, 232, 220);
    border-collapse: collapse;
    margin: 0.3rem 0;
    font-size: 0.2rem;
    min-width: 100%;
    border-radius: 0.1rem;
    overflow: hidden;
    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.15);
    border: 0.05rem solid rgba(193, 232, 220, 0);
    
}
.price-table thead tr {
    background-color: rgb(193, 232, 220);
    color: rgba(255, 255, 255, 0.8);
}

.price-table th,
.price-table td {
    padding: 0.1rem 0.2rem;
}

.price-table tbody tr {
    background-color: rgba(255, 255, 255, 1.0);
    border-bottom: 0.02rem solid rgb(193, 232, 220);
    color: rgba(63, 114, 166, 1.0);
    font-weight: 600;
}

.price-table tbody tr:nth-of-type(even) {
    background-color: rgba(255, 255, 255, 1.0);
}

.price-table tbody tr:last-of-type {
    border-bottom: 0.02rem solid rgb(193, 232, 220);
}

.price-table tbody tr.active-row {
    font-weight: 600;
    color: rgb(49, 106, 165);
}

.price-table thead tr th {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
}

.price-table td {
    border-right: 0.02rem solid rgb(193, 232, 220);
}

.price-table tr.half td {
    width: 50%;
}

.price-table tr.three　td {
    width: 33%;
}

.price-table td p {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0.1rem 0;
    margin: 0.2rem 0;
    border-radius: 0.05rem;
}

.price-table td span {
    color: rgb(51, 180, 140);
}

.price-table td span.gray {
    font-size: 0.17rem;
    color: rgba(0, 0, 0, 0.5);
}

.price-table td span.gray-s {
    font-size: 0.15rem;
    color: rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 1024px) {
    .price-table {
        font-size: 0.4rem;
    }

    .price-table td p {
        font-size: 0.2rem;
    }
}

/* ========== faq ==========  */
#faq .faq-list li {
    list-style-type: none;
    text-align: left;
    margin-bottom: 0.5rem;
}

#faq .faq-list li h4 {
    color:rgba(49, 106, 165, 1.0);
}

#faq .faq-list li p {
    margin-bottom: 0.25rem;
}

#faq .faq-list li figure {
    text-align: center;
    margin-bottom: 0.2rem;
}

#faq .faq-list li img {
    border-radius: 0.1rem;
}

#faq .faq-list li:last-child {
    margin-bottom: 0;
}

/* ========== footer ========== */
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(78, 78, 78);
}

footer .inner {
    margin: 0.5rem 0 1.0rem 0;
}

footer .logo {
    margin: 0 auto;
}

footer .links a {
    color: rgba(255, 255, 255);
    margin: auto 0.15rem;
}

footer .copyright p {
    color: rgba(255, 255, 255, 0.3);
    font-size: 90%;
    text-align: center;
}