@charset "UTF-8";

/*********************************
preset variables
*********************************/
:root {
    --fontSize: 18px;
    --linkColor: #3562a0;
    --textColor: #333;
    /* color preset */
    --swc-color: #025f7f;
    --swc-bg-color: #f2f7f8;
    --swt-color: #11771c;
    --swt-bg-color: #e6f0ef;
    --swo-color: #a40000;
    --swo-bg-color: #faf2f2;
    --blue-color: #0068b7;
    --green-color: #009944;
    /* width preset */
    --gutter: 1.3rem;
    --gap: 3rem;
    --spacing: 1rem;
    --contentWidth: 1200px;
}

/* OVERWRITE RADIX */

body {
    min-width: var(--contentWidth)
}

/* OVERWRITE end */
/*************************************
* START main
*************************************/
.eyecatch.centering {
    max-width: calc(var(--contentWidth) + 200px);
}

nav {
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding: 0 1rem;
}

nav ul {
    padding-left: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

nav ul li a {
    color: var(--textColor);
    font-size: 1rem;
    font-weight: bold;
}

section {
    margin: 0;
    padding: 60px 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    --h2-bg-color: #424242;
}

section+section {
    border-top: none;
}

.eyecatch+section {
    border-top: none;
}

section#swc h2,
section#swt h2,
section#swo h2 {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    font-size: 1.1rem;
    font-weight: bold;
    background-color: var(--h2-bg-color);
}

section#swc h2 div,
section#swt h2 div,
section#swo h2 div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 7rem;
    width: 7rem;
}

section#swc h2 div:first-child,
section#swt h2 div:first-child,
section#swo h2 div:first-child {
    background-color: var(--h2-bg-color);
    color: #ffffff;
    letter-spacing: .6rem;
    text-indent: .6rem;
}

section#swc h2 div:last-child,
section#swt h2 div:last-child,
section#swo h2 div:last-child {
    background-color: #ffffff;
    color: var(--h2-bg-color);
    border: .25rem solid var(--h2-bg-color);
    letter-spacing: .15rem;
    text-indent: .15rem;
}

.headline {
    position: relative;
    font-size: 1.9rem;
    font-weight: 700;
    width: fit-content;
    margin: 40px auto 2rem auto;
}

.headline::after {
    position: absolute;
    bottom: -1rem;
    left: -1rem;
    display: block;
    content: '';
    height: 5px;
    width: calc(100% + 2rem);
    padding: 0 1rem;
    background: url(../img/wave.png) repeat-x bottom left / auto 5px;
}

table.urls {
    margin: 40px auto 0;
}

table.urls th {
    font-weight: 500;
    padding-right: 3rem;
}

table.urls td+td {
    padding-left: 1.5rem;
}

section#swc {
    background-color: var(--swc-bg-color);
    --h2-bg-color: var(--swc-color);
}

section#swt {
    background-color: var(--swt-bg-color);
    --h2-bg-color: var(--swt-color);
}

section#swo {
    background-color: var(--swo-bg-color);
    --h2-bg-color: var(--swo-color);
}

section h2.simple {
    position: relative;
    margin: 0 auto;
    margin-bottom: 4rem;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
}

section h2.simple::after {
    position: absolute;
    bottom: -.5rem;
    left: calc(50% - 12px);
    display: block;
    content: '';
    width: 24px;
    height: 3px;
    background-color: var(--textColor);
}

section h2.solid {
    max-width: 600px;
    margin: 0 auto 3rem;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    padding: 1.25rem 0;
    border: 5px solid #f8d872;
    border-radius: 15px;
}

section#fee h3 {
    width: 1000px;
    padding: .3rem;
    margin: 0 auto;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    color: #fff;
}

section#fee h3.swc {
    background-color: var(--swc-color);
}

section#fee h3.swt {
    background-color: var(--swt-color);
    margin-top: 60px;
}

section#fee h3.swo {
    background-color: var(--swo-color);
    margin-top: 60px;
}

section#contact {
    margin: 0 auto;
}

section#contact .centering {
    max-width: 600px;
}

section#contact h3 {
    font-size: 1.4rem;
    font-weight: 500;
    text-align: center;
    padding: 1.5rem 0;
    border: 3px solid #000;
}

section#contact h3 a {
    color: inherit;
}

section#contact h3.blue {
    color: var(--blue-color);
}

section#contact h3.green {
    color: var(--green-color);
}

section#contact h3.small-solid {
    max-width: 300px;
    margin: 3rem auto 0;
    padding: 1rem 0;
    border-radius: 10px;
}

section#contact p {
    padding: 0 1rem;
}

section .headline-2 {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--green-color);
}

section#estimate .centering {
    max-width: 600px;
}

section#estimate p,
section#estimate table {
    margin: 1rem;
}

section#estimate table td {
    padding-right: 1rem;
}

section#estimate table td:nth-child(2) {
    padding-right: 3rem;
}

/*************************************
* END main START footer
*************************************/
footer {
    padding: 1.5rem 0;
}

footer .pagetop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--swc-color);
    color: #fff;
    padding-bottom: .6rem;
    margin-right: calc((100vw - var(--contentWidth)) / 2);
    margin-left: auto;
}

footer .pagetop:hover {
    text-decoration: none;
}

footer .pagetop>i {
    font-size: .9rem;
}

footer .pagetop>div {
    font-size: .8rem;
    font-weight: bold;
    letter-spacing: .06rem;
}

/*************************************
* END footer START only for sp
*************************************/
@media only screen and (max-width: 700px) {
    .sp-hide {
        visibility: hidden;
        opacity: 0
    }

    .sp-visible {
        visibility: visible;
        opacity: 1
    }

    .sp-none {
        display: none !important
    }

    .rdx-btn {
        display: block
    }

}

/*************************************
* END only for sp START only for pc
*************************************/
@media print,
screen and (min-width: 700px) {
    .pc-hide {
        visibility: hidden;
        opacity: 0
    }

    .pc-visible {
        visibility: visible;
        opacity: 1
    }

    .pc-none {
        display: none !important
    }

}