@charset "utf-8";

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,
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-style: normal;
    font-weight: normal;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

html,
body {
    overflow-x: hidden;
}

html {
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

img {
    border: none;
    vertical-align: bottom;
}

ul,
ol {
    list-style-type: none;
}

input,
textarea {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a:focus {
    outline: none;
}

sup {
    font-size: 65%;
}

/*var*/
:root {
    --white: #ffffff;
    --red: #ff2727;
    --blue: #16adff;
    --yellow: #ffe614;
    --yellow2: #fffadf;
    --orange: #ffaa14;
    --green: #28c83c;
    --gray: #282828;
    --lightgray: #f6f6f6;
    --bg-pc: #f7f7f7;
    --bg-sp: #f5f5f5;
}

html {
    font-size: 62.5%;
}

body {
    background-color: var(--bg-sp);
    color: var(--gray);
    font-size: 1.6rem;
    letter-spacing: 0.03rem;
    line-height: 1;
}

@media (min-width: 1200px) {
    body {
        background-color: var(--bg-pc);
        font-size: 1.7rem;
        letter-spacing: 0.06rem;
    }

    body.home-bg {
        background: url(/material/img/common/bg-mark.svg) repeat-y center top var(--bg-pc);
        background-size: contain;
    }
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--blue);
    font-weight: bold;
}

a:hover {
    color: var(--red);
    font-weight: bold;
}

@media (min-width: 1200px) {
    a {
        font-weight: normal;
    }

    a:hover {
        font-weight: normal;
    }
}

p {
    line-height: 1.9;
    margin-bottom: 2rem;
}

@media (min-width: 1200px) {
    p {
        line-height: 2.4;
        margin-bottom: 3.5rem;
    }
}

.contents>p {
    text-align: justify;
    letter-spacing: 0.03rem;
    margin-right: 3.5rem;
    margin-left: 3.5rem;
}

@media (min-width: 1200px) {
    .contents>p {
        letter-spacing: 0.06rem;
        margin-right: 10rem;
        margin-left: 10rem;
    }
}

.subpage-contents>p {
    text-align: justify;
    letter-spacing: 0.03rem;
    margin-right: 1.5rem;
    margin-left: 1.5rem;
}

@media (min-width: 1200px) {
    .subpage-contents>p {
        letter-spacing: 0.06rem;
        margin-right: 4rem;
        margin-left: 4rem;
    }
}

/*---------------------------------------------------------------------------
    icon font
---------------------------------------------------------------------------*/
@font-face {
    font-family: "icomoon";
    src: url("/material/fonts/icomoon.eot?ktczox");
    src: url("/material/fonts/icomoon.eot?ktczox#iefix") format("embedded-opentype"),
        url("/material/fonts/icomoon.ttf?ktczox") format("truetype"), url("/material/fonts/icomoon.woff?ktczox") format("woff"),
        url("/material/fonts/icomoon.svg?ktczox#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "icomoon" !important;
    /*speak: never;*/
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-calendar:before {
    content: "\e92f";
}

.icon-building:before {
    content: "\e92a";
}

.icon-line:before {
    content: "\e928";
}

.icon-arrow-left:before {
    content: "\e929";
}

.icon-arrow-top:before {
    content: "\e92b";
}

.icon-cross:before {
    content: "\e92c";
}

.icon-phone-2:before {
    content: "\e924";
}

.icon-phone-3:before {
    content: "\e925";
}

.icon-phone-4:before {
    content: "\e926";
}

.icon-sound:before {
    content: "\e927";
}

.icon-plus:before {
    content: "\e922";
}

.icon-minus:before {
    content: "\e923";
}

.icon-arrow-right-1:before {
    content: "\e900";
}

.icon-arrow-right-2:before {
    content: "\e901";
}

.icon-arrow-right-3:before {
    content: "\e902";
}

.icon-arrow-right-4:before {
    content: "\e903";
}

.icon-arrow-right-5:before {
    content: "\e904";
}

.icon-card:before {
    content: "\e905";
}

.icon-caution:before {
    content: "\e906";
}

.icon-check:before {
    content: "\e907";
}

.icon-denki:before {
    content: "\e908";
}

.icon-fee:before {
    content: "\e909";
}

.icon-flow:before {
    content: "\e90a";
}

.icon-fukidashi:before {
    content: "\e90b";
}

.icon-gift:before {
    content: "\e90c";
}

.icon-good:before {
    content: "\e90d";
}

.icon-hatena:before {
    content: "\e90e";
}

.icon-heart:before {
    content: "\e90f";
}

.icon-home:before {
    content: "\e910";
}

.icon-life:before {
    content: "\e911";
}

.icon-link:before {
    content: "\e912";
}

.icon-memo:before {
    content: "\e913";
}

.icon-mobile:before {
    content: "\e914";
}

.icon-money:before {
    content: "\e915";
}

.icon-pc:before {
    content: "\e916";
}

.icon-pen:before {
    content: "\e917";
}

.icon-phone:before {
    content: "\e918";
}

.icon-security:before {
    content: "\e919";
}

.icon-strage:before {
    content: "\e91a";
}

.icon-thunder:before {
    content: "\e91b";
}

.icon-tool:before {
    content: "\e91c";
}

.icon-trophy:before {
    content: "\e91d";
}

.icon-tv:before {
    content: "\e91e";
}

.icon-user:before {
    content: "\e91f";
}

.icon-users:before {
    content: "\e920";
}

.icon-wifi:before {
    content: "\e921";
}

/*---------------------------------------------------------------------------
    base box
---------------------------------------------------------------------------*/
.outer {
    box-sizing: border-box;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    width: auto;
    height: auto;
}

@media (min-width: 1200px) {
    .outer {
        width: 100%;
    }
}

.inner {
    text-align: left;
    width: auto;
    height: auto;
    margin: 0 auto;
}

@media (min-width: 1200px) {
    .inner {
        width: 1200px;
    }
}

/*---------------------------------------------------------------------------
    header
---------------------------------------------------------------------------*/
header {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    height: auto;
}

@media (min-width: 1200px) {
    header {
        width: 1200px;
    }
}


/*---------------------------------------------------------------------------
    pagetop
---------------------------------------------------------------------------*/
.page-top {
    visibility: hidden;
}

@media (min-width: 1200px) {
    .page-top {
        visibility: visible;
        position: fixed;
        bottom: 30px;
        right: 30px;
        font-size: 15px;
        font-family: Arial, Helvetica, "sans-serif";
    }

    .page-top a {
        text-align: center;
        display: block;
        width: 60px;
        height: 60px;
        line-height: 60px;
        box-sizing: border-box;
        color: var(--gray);
        background-color: var(--yellow);
        text-decoration: none;
        letter-spacing: 1px;
        border-radius: 30px;
        font-weight: bold;
        cursor: pointer;
        z-index: 1000;
    }

    .page-top a:hover {
        transition: all 0.4s;
        text-decoration: none;
        color: var(--white);
        background-color: var(--green);
    }
}

/*---------------------------------------------------------------------------
    contents
---------------------------------------------------------------------------*/
.contents {
    box-sizing: border-box;
    width: auto;
    height: auto;
    padding: 50px 0 35px;
    /* background: var(--orange);
    margin-bottom: 1px; */
}

@media (min-width: 1200px) {
    .contents {
        width: 1200px;
        padding: 120px 0 80px;
    }
}

.subpage-contents {
    box-sizing: border-box;
    width: auto;
    height: auto;
    padding: 15px 25px 35px;
    background: var(--white);
    /* border-radius: 15px; */
    margin: 4px 0;
}

@media (min-width: 1200px) {
    .subpage-contents {
        width: 1200px;
        padding: 100px 90px;
        border-radius: 90px;
        margin: 60px auto;
    }
}

/*---------------------------------------------------------------------------
    色
---------------------------------------------------------------------------*/
.red {
    color: var(--red);
}

.blue {
    color: var(--blue);
}

.yellow {
    color: var(--yellow);
}

.orange {
    color: var(--orange);
}

.green {
    color: var(--green);
}

.gray {
    color: var(--gray);
}

.white {
    color: var(--white);
}

.bg-pc {
    color: var(--bg-pc);
}

.bg-sp {
    color: var(--bg-sp);
}

.bg-gray {
    background: var(--gray);
}

.ptn-green {
    /* background: url(/material/img/common/ptn-line.png), var(--green); */
    background: url(/material/img/common/ptn-line.png), linear-gradient(150deg, #6cda23 0%, #6cda23 15%, #28c83c 45%, #28c83c 100%);
}

/*---------------------------------------------------------------------------
    揃え
---------------------------------------------------------------------------*/
.right {
    text-align: right;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.justify {
    text-align: justify;
}

/*---------------------------------------------------------------------------
    other
---------------------------------------------------------------------------*/
.bold {
    font-weight: bold;
}

.line {
    text-decoration: underline;
}

.line-through {
    text-decoration: line-through;
}

.roman {
    font-family: "Times New Roman", Times, "serif";
}

.marker {
    background: linear-gradient(transparent 60%, #ffe282 60%);
    padding: 0 5px 0;
    font-weight: bold;
}

@media (min-width: 1200px) {
    .marker {
        padding: 0 5px 2px;
    }
}

/*---------------------------------------------------------------------------
    font-size
---------------------------------------------------------------------------*/
.fs-s {
    font-size: 1.1rem;
}

.fs-m {
    font-size: 1.2rem;
}

.fs-l {
    font-size: 1.6rem;
}

.fs-2l {
    font-size: 2rem;
}

.fs-3l {
    font-size: 2.4rem;
}

.fs-4l {
    font-size: 3.0rem;
}

.fs-5l {
    font-size: 4.2rem;
}

@media (min-width: 1200px) {
    .fs-s {
        font-size: 1.4rem;
    }

    .fs-m {
        font-size: 1.6rem;
    }

    .fs-l {
        font-size: 1.8rem;
    }

    .fs-2l {
        font-size: 2.4rem;
    }

    .fs-3l {
        font-size: 3rem;
    }

    .fs-4l {
        font-size: 4rem;
    }

    .fs-5l {
        font-size: 5.2rem;
    }
}

/*---------------------------------------------------------------------------
    マージン
---------------------------------------------------------------------------*/
.mb-none {
    margin-bottom: 0;
}

.mb-s {
    margin-bottom: 0.75rem;
}

.mb-m {
    margin-bottom: 1.5rem;
}

.mb-l {
    margin-bottom: 2rem;
}

.mb-2l {
    margin-bottom: 3rem;
}

.mb-3l {
    margin-bottom: 4rem;
}

.mb-4l {
    margin-bottom: 5rem;
}

.mb-5l {
    margin-bottom: 6rem;
}

@media (min-width: 1200px) {
    .mb-s {
        margin-bottom: 1rem;
    }

    .mb-m {
        margin-bottom: 2rem;
    }

    .mb-l {
        margin-bottom: 4rem;
    }

    .mb-2l {
        margin-bottom: 6rem;
    }

    .mb-3l {
        margin-bottom: 8rem;
    }

    .mb-4l {
        margin-bottom: 10rem;
    }

    .mb-5l {
        margin-bottom: 12rem;
    }
}

/*---------------------------------------------------------------------------
    list
---------------------------------------------------------------------------*/
.items {
    list-style-type: disc;
}

.items li {
    text-align: justify;
    line-height: 1.7;
    margin-bottom: 2.2rem;
}

@media (min-width: 1200px) {
    .items li {
        line-height: 2;
        margin-bottom: 2.8rem;
    }
}

.items li:last-child {
    margin-bottom: 0;
}

.ordered {
    list-style-type: decimal;
}

.list-none {
    list-style-type: none;
}

.items-margin {
    margin-left: 3rem;
    margin-right: 1.5rem;
}

.items-margin2 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

@media (min-width: 1080px) {
    .items-margin {
        margin-left: 5rem;
        margin-right: 3rem;
    }

    .items-margin2 {
        margin-left: 3rem;
        margin-right: 3rem;
    }
}

.table .items {
    margin: 0.75rem 2rem;
}

@media (min-width: 1200px) {
    .table .items {
        margin: 1.5rem 2rem;
    }
}

.table .items li {
    line-height: 1.4;
    margin-bottom: 1rem;
}

@media (min-width: 1200px) {
    .table .items li {
        line-height: 1.6;
    }
}

dl.items {
    margin-left: .5rem;
}

@media (min-width: 1200px) {
    dl.items {
        margin-left: 1.5rem;
    }
}

.items dt {
    font-size: 1.45rem;
    font-weight: bold;
    line-height: 1.8;
    margin-bottom: 1rem;
}

@media (min-width: 1200px) {
    .items dt {
        font-size: 1.7rem;
        line-height: 2;
        margin-bottom: 1.5rem;
    }
}

.items dd {
    text-align: justify;
    line-height: 1.8;
    margin-bottom: 3rem;
    margin-left: 1rem;
    margin-right: 1.5rem;
    border-left: 5px solid #e5e5e5;
    padding-left: 1.75rem;
    padding-bottom: .25rem;
}

.items dd:last-child {
    margin-bottom: 0;
}

@media (min-width: 1200px) {
    .items dd {
        border-left: 6px solid #e5e5e5;
        line-height: 2;
        margin-bottom: 6rem;
        padding-left: 2.5rem;
        padding-right: 2rem;
        padding-bottom: .5rem;
    }
}

/*---------------------------------------------------------------------------
    scroll table
---------------------------------------------------------------------------*/
.scroll {
    box-sizing: border-box;
    width: 100%;
    overflow-x: auto;
}

.scroll:before {
    content: "※スワイプで表全体を確認できます";
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.5px;
    color: var(--green);
    padding-left: .5rem;
}

.scroll table {
    overflow: auto;
    margin-top: 10px;
}

@media (min-width: 1200px) {
    .scroll {
        display: none;
    }
}

/*---------------------------------------------------------------------------
    table
---------------------------------------------------------------------------*/
.table {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    border-top: 2px solid #e5e5e5;
    border-left: 2px solid #e5e5e5;
    background-color: #fff;
    font-size: 1.5rem;
    letter-spacing: 0.05rem;
    white-space: nowrap;
}

.table th {
    vertical-align: middle;
    font-weight: bold;
    border-bottom: 2px solid #e5e5e5;
    border-right: 2px solid #e5e5e5;
    padding: 10px 25px;
    background: var(--lightgray);
}

.table td {
    vertical-align: middle;
    border-bottom: 2px solid #e5e5e5;
    border-right: 2px solid #e5e5e5;
    padding: 15px 25px;
}

.table td.dotline-right {
    border-right: 2px dotted #e2e2e2;
}

.table p:last-child {
    margin-bottom: 0;
}

.table p {
    line-height: 1.8;
    margin-right: auto;
    margin-left: auto;
}

.table th p {
    font-weight: bold;
}

@media (min-width: 1200px) {
    .table {
        font-size: 1.6rem;
        white-space: inherit;
    }

    .table th {
        padding: 12px 30px;
    }

    .table td {
        padding: 27px 30px;
    }
}

span.roman {
    line-height: 1.4;
}

/*---------------------------------------------------------------------------
    table flexible
---------------------------------------------------------------------------*/
.flexible,
.flexible tbody,
.flexible tr,
.flexible th,
.flexible td {
    white-space: inherit;
}

@media (max-width: 640px) {

    .flexible,
    .flexible tbody,
    .flexible tr,
    .flexible th,
    .flexible td {
        display: block;
        word-break: break-all;
    }

    .flexible th {
        width: auto;
        height: auto;
    }

    .flexible td {
        width: auto;
        height: auto;
    }
}

/*---------------------------------------------------------------------------
    table cell size
---------------------------------------------------------------------------*/
.cell-60 {
    width: 60%;
}

.cell-55 {
    width: 55%;
}

.cell-50 {
    width: 50%;
}

.cell-45 {
    width: 45%;
}

.cell-40 {
    width: 40%;
}

.cell-35 {
    width: 35%;
}

.cell-30 {
    width: 30%;
}

.cell-25 {
    width: 25%;
}

.cell-20 {
    width: 20%;
}

.cell-15 {
    width: 15%;
}

.cell-10 {
    width: 10%;
}

/*---------------------------------------------------------------------------
    TAX
---------------------------------------------------------------------------*/
.tax {
    display: block;
    box-sizing: border-box;
    text-align: center;
    font-size: 1.0rem;
    line-height: 1.5;
    font-weight: bold;
    letter-spacing: 0.03rem;
    margin: 6rem auto 0;
    padding: 6px 0;
    border-top: 2px solid var(--gray);
    border-bottom: 2px solid var(--gray);
}

@media (min-width: 1200px) {
    .tax {
        font-size: 1.2rem;
        letter-spacing: 0.03rem;
        margin: 12rem auto 0;
    }
}

/*---------------------------------------------------------------------------
 fix-menu sp only
---------------------------------------------------------------------------*/
.fix-menu {
    position: fixed;
    z-index: 1001;
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--green);
}

.fix-menu ul {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    color: var(--white);
    border-top: 2px solid var(--white);
}

.fix-menu li {
    box-sizing: border-box;
    text-align: center;
    height: 70px;
    border-right: 2px solid var(--white);
    font-size: 1.3rem;
    letter-spacing: 0.1rem;
}

.fix-menu li:nth-child(1) {
    position: relative;
    width: 75%;
    background: linear-gradient(135deg,
            var(--green) 0%,
            var(--green) 95%,
            var(--yellow) 95%,
            var(--yellow) 100%);
}

.fix-menu li:nth-child(1) img {
    /* position: absolute;
    top: -19px;
    left: -5px; */
    margin-top: -3rem;
    margin-left: -2.5rem;
    text-align: center;
}

.fix-menu li:nth-child(2) {
    width: 25%;
    background: linear-gradient(135deg,
            var(--green) 0%,
            var(--green) 90%,
            var(--yellow) 90%,
            var(--yellow) 100%);
}


.fix-menu li:last-child {
    border-right: none;
}

.fix-menu li a {
    display: block;
    height: 100%;
    width: 100%;
    padding-top: 12px;
    text-decoration: none;
    font-weight: bold;
    color: var(--white);
}

.fix-menu li a:hover {
    text-decoration: none;
}

.fix-menu li i {
    display: block;
    font-size: 2rem;
    margin-bottom: 10px;
}

@media (min-width: 751px) {
    .fix-menu {
        display: none;
    }
}

/*---------------------------------------------------------------------------
ギミック
---------------------------------------------------------------------------*/
@keyframes yure {
    0% {
        transform: translateY(0);
    }

    5% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-8px);
    }

    25% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-6px);
    }

    50% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}

.opacity {
    opacity: 1;
}

.opacity:hover {
    opacity: 0.75;
    animation: yure 2.5s ease infinite;
}

/*---------------------------------------------------------------------------
    common
---------------------------------------------------------------------------*/
.logo {
    width: 170px;
    height: auto;
    margin: 14px auto 16px;
    font-size: 0;
}

@media (min-width: 1200px) {
    .logo {
        width: 211px;
        margin: -7px 0 0 0;
    }
}

.copyright {
    padding: 10px 0 32px;
}

@media (min-width: 1200px) {
    .copyright {
        display: flex;
        padding: 20px 0;
    }
}

.copyright p:nth-child(1) {
    display: none;
}

@media (min-width: 1200px) {
    .copyright p:nth-child(1) {
        display: block;
    }
}

.copyright p:nth-child(2) {
    text-align: center;
}

@media (min-width: 1200px) {
    .copyright p:nth-child(2) {
        text-align: right;
        margin-left: auto;
    }
}

.copyright p {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
}

@media (min-width: 1200px) {
    .copyright p {
        font-size: 1.3rem;
        font-weight: normal;
    }
}

.copyright p a {
    color: var(--gray);
    text-decoration: none;
}

.copyright p a:hover {
    color: var(--red);
    text-decoration: underline;
}

.bg-green {
    background: var(--green);
}

/*---------------------------------------------------------------------------
    HOME
---------------------------------------------------------------------------*/
.bg-white {
    background: var(--white);
}

@media (min-width: 1200px) {
    .bg-white {
        height: 118px;
    }
}

header,
footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

@media (min-width: 1200px) {

    header,
    footer {
        height: 118px;
    }
}


@media (max-width: 1199px) {
    header div {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 1199px) {
    footer div {
        width: 100%;
        text-align: center;
    }
}

header div:first-child,
footer div:first-child {
    margin-right: auto;
}

header div:nth-child(2),
footer div:nth-child(2) {
    margin-right: 40px;
    margin-top: -5px;
}

@media (min-width: 1200px) {

    header div:last-child,
    footer div:last-child {
        width: 211px;
    }
}

.form-btn {
    display: none;
}

@media (min-width: 1200px) {
    .form-btn {
        display: block;
        box-sizing: border-box;
        text-align: center;
        width: 210px;
        height: 44px;
        line-height: 44px;
        border-radius: 22px;
        background-color: var(--yellow);
        box-shadow: 0px 3px #e9d100;
        font-size: 1.3rem;
        letter-spacing: 0.07rem;
        margin-top: -5px;
    }
}

.form-btn:hover {
    transition: all 0.4s;
    background-color: var(--green);
    box-shadow: 0px 3px #4eb35b;
}

.form-btn a {
    display: block;
    width: 100%;
    height: 100%;
    font-weight: bold;
}

.form-btn a {
    color: var(--gray);
    text-decoration: none;
}

.form-btn a:hover {
    color: #fff;
    text-decoration: none;
}

@media (min-width: 1200px) {
    .form-btn i {
        font-size: 1.5rem;
        margin-right: 5px;
        vertical-align: text-bottom;
    }
}

.gnav {
    display: none;
}

@media (min-width: 1200px) {
    .gnav {
        display: block;
        text-align: right;
    }
}

.gnav li {
    display: inline;
    font-size: 1.4rem;
    padding-left: 20px;
    letter-spacing: .06rem;
}

.gnav a {
    color: #282828;
    text-decoration: none;
    font-weight: bold;
}

.gnav a:hover {
    color: #323232;
    text-decoration: underline;
}

.menu-button {
    position: fixed;
    top: 12px;
    right: 12px;
    border: none;
    cursor: pointer;
    display: none;
    z-index: 1000;
    margin: 0;
    padding: 0;
    border: 2px solid var(--white);
    border-radius: 4px;
}

.menu-button img {
    width: 30px;
    height: 30px;
}

.drawer {
    z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background: white;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    padding-top: 50px;
}

.drawer.open {
    transform: translateX(0);
}

.overlay {
    z-index: 100;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
}

.overlay.show {
    display: block;
}

.drawer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.drawer ul li {
    font-size: 1.4rem;
    border-bottom: 1px solid #ddd;
}

.drawer ul li a {
    box-sizing: border-box;
    text-decoration: none;
    color: black;
    display: block;
    width: 100%;
    height: 100%;
    padding: 16px;
    font-weight: bold;
}

.drawer i {
    margin-right: 5px;
}

@media (max-width: 1200px) {
    .menu-button {
        display: block;
    }
}

.bg-form {
    background: var(--yellow);
}

.title {
    font-size: 2.3rem;
    line-height: 1.2;
    letter-spacing: .03rem;
    font-weight: bold;
    margin-bottom: 25px;
}

@media (min-width: 1200px) {
    .title {
        font-size: 3.2rem;
        line-height: 1;
        letter-spacing: .1rem;
        margin-bottom: 75px;
    }
}

.subtitle {
    font-size: 1.9rem;
    line-height: 1.2;
    letter-spacing: .06rem;
    font-weight: bold;
    margin-top: 75px;
    margin-bottom: 25px;
}

@media (min-width: 1200px) {
    .subtitle {
        font-size: 2.6rem;
        line-height: 1;
        letter-spacing: .1rem;
        margin-top: 150px;
        margin-bottom: 50px;
    }
}

.arial {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.5rem;
}

.arial2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.2rem;
}

@media (min-width: 1200px) {

    .arial,
    .arial2 {
        font-size: 3.4rem;
    }
}

.text-padding {
    padding: 0 3px;
}

.text-padding2 {
    padding: 0 4px;
}

.text-padding3 {
    padding: 0 3px;
}

@media (min-width: 1200px) {
    .text-padding3 {
        padding: 0 8px;
    }
}

.img-padding {
    padding: 0 30px;
}

@media (min-width: 1200px) {
    .img-padding {
        padding: 0;
    }
}

.img-padding2 {
    padding: 0 60px;
}

@media (min-width: 1200px) {
    .img-padding2 {
        padding: 0;
    }
}

.img-padding3 {
    padding: 0 15px;
}

@media (min-width: 1200px) {
    .img-padding3 {
        padding: 0;
    }
}

.notfound-box {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
}

@media (min-width: 1200px) {
    .notfound-box {
        margin-right: 3rem;
        margin-left: 3rem;
    }
}

.notfound {
    width: 200px;
    height: auto;
}

@media (min-width: 1200px) {
    .notfound {
        width: 320px;
    }
}

/*---------------------------------------------------------------------------
    サブページ　タイトル
---------------------------------------------------------------------------*/
.title-1 {
    box-sizing: border-box;
    font-size: 2.0rem;
    line-height: 1.5;
    letter-spacing: .03rem;
    font-weight: bold;
    margin: 25px auto 30px;
    display: table;
    border-bottom: 3px solid var(--gray);
    padding: 0 3px 2px;
}

@media (min-width: 1200px) {
    .title-1 {
        font-size: 3.2rem;
        line-height: 1.5;
        letter-spacing: .1rem;
        margin: 0 auto 65px;
        border-bottom: none;
        padding: 0;
    }
}

.faq .title-1,
.guide .title-1 {
    display: inline-block;
    text-align: justify;
    box-sizing: border-box;
    font-size: 1.8rem;
    line-height: 1.7;
    letter-spacing: .02rem;
    font-weight: bold;
    margin: 25px auto 30px;
    border-bottom: none;
    padding: 0 3px 2px;
}

@media (min-width: 1200px) {

    .faq .title-1,
    .guide .title-1 {
        font-size: 3.0rem;
        line-height: 1.6;
        letter-spacing: .1rem;
        margin: 0 auto 65px;
        border-bottom: none;
        padding: 0;
    }
}

.title-2 {
    position: relative;
    text-align: justify;
    padding: 1.3rem 1.7rem 1.2rem;
    letter-spacing: .1rem;
    border-left: 8px solid var(--green);
    color: var(--gray);
    background-color: var(--lightgray);
    margin-top: 4.5rem;
    margin-bottom: 3rem;
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: .1rem;
    font-weight: bold;
    border-radius: 0 6px 6px 0;
}

.title-2:after {
    position: absolute;
    left: 15px;
    bottom: -15px;
    width: 25px;
    height: 15px;
    background-color: var(--lightgray);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.title-2:first-of-type {
    margin-top: 4rem;
}

@media (min-width: 1200px) {
    .title-2 {
        padding: 2.1rem 2.5rem 2rem;
        letter-spacing: .1rem;
        border-left: 9px solid var(--green);
        margin-top: 12rem;
        margin-bottom: 5.5rem;
        font-size: 2.3rem;
        line-height: 1.5;
        letter-spacing: .175rem;
        font-weight: normal;
    }

    .title-2:after {
        position: absolute;
        left: 30px;
        bottom: -20px;
        width: 30px;
        height: 20px;
        background-color: var(--lightgray);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        content: '';
    }

    .title-2:first-of-type {
        margin-top: 8rem;
    }
}


.title-3 {
    display: flex;
    align-items: center;
    padding: 1rem 1.6rem;
    background-color: var(--lightgray);
    font-size: 1.6rem;
    line-height: 1.7;
    letter-spacing: .15rem;
    font-weight: bold;
    margin-top: 3.5rem;
    margin-bottom: 2rem;
    border-radius: 6px;
}

@media (min-width: 1200px) {
    .title-3 {
        padding: 1.5rem 2.4rem;
        font-size: 2.1rem;
        letter-spacing: .15rem;
        font-weight: normal;
        margin-top: 7rem;
        margin-bottom: 4rem;
    }
}

.title-3:before {
    display: inline-block;
    width: 7px;
    height: 2.4rem;
    margin-right: 1.3rem;
    background-color: var(--gray);
    content: '';
}

@media (min-width: 1200px) {
    .title-3:before {
        width: 8px;
        height: 3rem;
        margin-right: 1.4rem;
    }
}



/*---------------------------------------------------------------------------
    アコーディオンコンテンツ
---------------------------------------------------------------------------*/
.faq-list {
    padding: 0 20px;
}

@media (min-width: 1200px) {
    .faq-list {
        padding: 0;
    }
}

.faq-list-item {
    margin-bottom: 22px;
}

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

@media (min-width: 1200px) {
    .faq-list-item {
        margin-bottom: 35px;
    }
}

.faq-q {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--gray);
    background-color: var(--white);
    padding: 1.25rem 1.5rem 1.25rem 2.25rem;
    margin-bottom: 0;
    border-radius: 25px;
    text-align: justify;
    font-weight: bold;
}

@media (min-width: 1200px) {
    .faq-q {
        font-size: 1.9rem;
        border-radius: 50px;
        padding: 1.75rem 3.5rem;
        font-weight: normal;
    }
}

.faq-q:hover {
    color: var(--orange);
}

.faq-q:hover::after {
    color: var(--orange);
}

.faq-q.active {
    box-sizing: border-box;
    background: var(--yellow2);
    color: var(--gray);
    margin-bottom: 0;
    border-radius: 25px 25px 0 0;
}

@media (min-width: 1200px) {
    .faq-q.active {
        border-radius: 50px 50px 0 0;
    }
}

.faq-q::after {
    font-family: "icomoon";
    content: "\e922";
    font-size: 2.4rem;
    color: #e0e0e0;
    margin-left: auto;
    padding-left: 1.75rem;
}

@media (min-width: 1200px) {
    .faq-q::after {
        font-size: 3.2rem;
    }
}

.faq-q.active::after {
    font-family: "icomoon";
    content: "\e923";
    color: var(--orange);
}

.faq-q::before {
    box-sizing: border-box;
    text-align: center;
    content: "Q";
    background: var(--orange);
    color: var(--white);
    font-family: Arial, Helvetica, "sans-serif";
    margin-right: 1.4rem;
    padding: 5px 10px;
    border-radius: 16px;
}

@media (min-width: 1200px) {
    .faq-q::before {
        margin-right: 2.4rem;
        padding: 5px 12px;
        border-radius: 20px;
    }
}

.faq-a {
    max-height: 0;
    transition: max-height 0.3s ease;
    opacity: 1;
    padding: 0 3.5rem 0;
    overflow: hidden;
    clear: both;
    font-size: 1.4rem;
    line-height: 1.5;
    background: var(--white);
    border-radius: 0 0 25px 25px;
}

@media (min-width: 1200px) {
    .faq-a {
        font-size: 1.7rem;
        border-radius: 0 0 50px 50px;
    }
}

.faq-a p {
    text-align: justify;
    font-size: 1.3rem;
    line-height: 1.7;
}

.faq-a p:last-child {
    margin-bottom: 0;
}

@media (min-width: 1200px) {
    .faq-a p {
        font-size: inherit;
        line-height: 1.9;
    }
}

.faq-a.active {
    opacity: 1;
    max-height: 100%;
    background: var(--white);
    transition: max-height 0.3s ease, opacity 0.3s ease;
    padding: 1.25rem 3rem 1.5rem;
}

@media (min-width: 1200px) {
    .faq-a.active {
        padding: 2.5rem 6rem 3rem;
    }
}

#flow>p {
    text-align: justify;
}

@media (min-width: 1200px) {
    #flow>p {
        text-align: center;
    }
}

#faq>p {
    text-align: justify;
    color: var(--white);
    margin: 0 3.5rem 30px;
    font-weight: bold;
    font-size: 1.3rem;
}

@media (min-width: 1200px) {
    #faq>p {
        text-align: center;
        margin: 0 0 50px;
        font-weight: normal;
        font-size: 1.6rem;
    }
}

@media (min-width: 1200px) {
    .worry-box {
        display: flex;
        flex-wrap: wrap;
    }
}

.worry-box div {
    box-sizing: border-box;
    width: auto;
    height: auto;
    border-radius: 30px;
    box-shadow: 5px 5px #f2f2f2;
    margin: 0 25px 24px;
}

.worry-box div:nth-child(4) {
    margin-bottom: 0;
}

@media (min-width: 1200px) {
    .worry-box div {
        width: 585px;
        box-shadow: 5px 5px #f4f4f4;
        margin: 0;
    }
}

.worry-box p {
    text-align: justify;
    font-size: 1.2rem;
    line-height: 1.7;
    padding: 17px 25px 19px 122px;
    margin: 0;
    font-weight: bold;
}

@media (min-width: 1200px) {
    .worry-box p {
        font-size: 1.5rem;
        line-height: 1.9;
        padding: 18px 30px 22px 130px;
        font-weight: normal;
    }
}

@media (min-width: 1200px) {
    .worry-box div:nth-child(odd) {
        margin-right: 30px;
    }
}

@media (min-width: 1200px) {

    .worry-box div:nth-child(1),
    .worry-box div:nth-child(2) {
        margin-bottom: 30px;
    }
}

.worry-icon-1 {
    background: url(/material/img/home/worry-icon-1.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .worry-icon-1 {
        background: url(/material/img/home/worry-icon-1.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.worry-icon-2 {
    background: url(/material/img/home/worry-icon-2.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .worry-icon-2 {
        background: url(/material/img/home/worry-icon-2.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.worry-icon-3 {
    background: url(/material/img/home/worry-icon-3.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .worry-icon-3 {
        background: url(/material/img/home/worry-icon-3.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.worry-icon-4 {
    background: url(/material/img/home/worry-icon-4.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .worry-icon-4 {
        background: url(/material/img/home/worry-icon-4.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.feature-box {
    position: relative;
    margin-bottom: 30px;
}

@media (min-width: 1200px) {
    .feature-box {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 60px;
    }
}


.feature-box div {
    box-sizing: border-box;
    width: auto;
    height: auto;
    background: var(--white);
    padding: 30px 30px 38px;
    margin: 0 25px 0;
    /* clip-path: polygon(0% 5%, 5% 0,
            95% 0%, 100% 5%,
            100% 95%, 95% 100%,
            5% 100%, 0% 95%); */
    clip-path: polygon(0% 4%,
            100% 0%,
            100% 96%,
            0% 100%);
}

@media (min-width: 1200px) {
    .feature-box div {
        width: 388px;
        padding: 40px 30px 45px;
        margin: 0 15px 0 0;
        clip-path: polygon(0% 4%,
                96% 0%, 100% 4%,
                100% 96%,
                4% 100%, 0% 96%);
        border-radius: none;
    }

    .feature-box div:nth-child(3n) {
        margin-right: 0;
    }
}

.feature-box figure {
    text-align: center;
    margin-bottom: 10px;
}

@media (min-width: 1200px) {
    .feature-box figure {
        margin-bottom: 15px;
    }
}

.feature-pict-title {
    text-align: center;
    font-size: 2.0rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .15rem;
    margin-bottom: 25px;
}

@media (min-width: 1200px) {
    .feature-pict-title {
        font-size: 1.9rem;
    }
}

.feature-pict-title span {
    font-weight: bold;
    display: block;
}

.feature-pict-title span.lb {
    font-weight: bold;
    display: inline;
}

@media (min-width: 1200px) {
    .feature-pict-title span.lb {
        display: block;
    }
}

.feature-pict-body {
    text-align: justify;
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: 0;
    color: #777;
    margin: 0;
    font-weight: bold;
}

@media (min-width: 1200px) {
    .feature-pict-body {
        font-size: 1.4rem;
        line-height: 1.9;
        font-weight: normal;
        margin: 0 10px 0;
    }
}

.fee-box {
    margin-bottom: 35px;
}

@media (min-width: 1200px) {
    .fee-box {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 50px;
    }
}

.fee-box2 {
    margin: 0 25px 35px;
}

@media (min-width: 1200px) {
    .fee-box2 {
        margin: 0 0 60px;
    }
}

.ip-denwa1 {
    box-sizing: border-box;
    background: url(/material/img/home/phone1.jpg) no-repeat center top 10px var(--white);
    background-size: 200px auto;
    border-radius: 30px;
    /* box-shadow: 5px 5px #f2f2f2; */
}

@media (min-width: 1200px) {
    .ip-denwa1 {
        box-sizing: border-box;
        background: url(/material/img/home/phone1.jpg) no-repeat center left 100px var(--white);
        background-size: 260px auto;
        border-radius: 60px;
    }

}

.ip-denwa1>div {
    width: auto;
    height: auto;
    padding: 205px 30px 10px 30px;
}

@media (min-width: 1200px) {
    .ip-denwa1>div {
        width: 600px;
        padding: 60px 100px 30px 500px;
    }
}

.ip-denwa2 {
    box-sizing: border-box;
    background: url(/material/img/home/phone2.jpg) no-repeat center top 30px var(--white);
    background-size: 200px auto;
    border-radius: 30px;
    /* box-shadow: 5px 5px #f2f2f2; */
}

@media (min-width: 1200px) {
    .ip-denwa2 {
        box-sizing: border-box;
        background: url(/material/img/home/phone2.jpg) no-repeat center right 100px var(--white);
        background-size: 260px auto;
        border-radius: 60px;
    }
}

.ip-denwa2>div {
    width: auto;
    height: auto;
    padding: 215px 30px 10px 30px;
}

@media (min-width: 1200px) {
    .ip-denwa2>div {
        width: 600px;
        height: auto;
        padding: 60px 500px 30px 100px;
    }
}

.option-fee-title {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 1.25rem;
}

@media (min-width: 1200px) {
    .option-fee-title {
        font-size: 2.0rem;
        margin-bottom: 1.5rem;
    }
}

.option-fee-body {
    text-align: justify;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 1200px) {
    .option-fee-body {
        font-size: inherit;
        margin-bottom: 2.5rem;
    }
}

.option-fee {
    text-align: center;
    line-height: 1;
}

@media (min-width: 1200px) {
    .option-fee {
        text-align: right;
        line-height: 1;
    }
}


.fee,
.fee2 {
    box-sizing: border-box;
    width: auto;
    height: auto;
    border-radius: 30px;
    box-shadow: 5px 5px #f2f2f2;
    margin: 0 25px 24px;
    padding: 20px 16px 22px;
    background: #fff;
}

@media (min-width: 1200px) {

    .fee,
    .fee2 {
        width: 585px;
        box-shadow: 5px 5px #f4f4f4;
        margin: 0 0 30px 0;
        padding: 20px 25px 22px;
    }
}

@media (min-width: 1200px) {

    .fee:nth-child(odd),
    .fee2:nth-child(odd) {
        margin-right: 30px;
    }
}

.fee>div {
    display: flex;
    background: url(/material/img/home/line.png) no-repeat left 39% center;
    background-size: 1px 56px;
    align-items: center;
}

@media (min-width: 1200px) {
    .fee>div {
        display: flex;
        background: url(/material/img/home/line.png) no-repeat left 45% center;
        background-size: 1px 56px;
        align-items: center;
    }
}

.fee2>div {
    display: flex;
    align-items: center;
}

@media (min-width: 1200px) {
    .fee2>div {
        display: flex;
        background: url(/material/img/home/line.png) no-repeat center center;
        background-size: 1px 56px;
        align-items: center;
    }
}

.fee>div div:nth-child(odd) {
    text-align: center;
    width: 35%;
    height: auto;
}

.fee>div div:nth-child(even) {
    text-align: center;
    width: 65%;
    height: auto;
}

.fee2>div div {
    text-align: center;
    width: 50%;
    height: auto;
}

@media (min-width: 1200px) {
    .fee>div div:nth-child(odd) {
        width: 240px;
    }

    .fee>div div:nth-child(even) {
        width: 295px;
    }
}

@media (min-width: 1200px) {
    .fee2>div div {
        width: 267px;
    }
}

.fee>div div p,
.fee2>div div p {
    margin: 0;
    letter-spacing: 0;
    line-height: 1.7;
}

.fee>div div:nth-child(odd) p {
    font-weight: bold;
    font-size: 1.3rem;
}

.fee>div div:nth-child(even) p {
    margin-right: -20px;
}

.fee2>div div:nth-child(odd) p {
    margin-left: -3px;
}

.fee2>div div:nth-child(even) p {
    margin-right: -3px;
}

@media (min-width: 1200px) {

    .fee>div div p,
    .fee2>div div p {
        letter-spacing: .1rem;
    }
}

@media (min-width: 1200px) {
    .fee>div div:nth-child(odd) p {
        font-weight: normal;
        font-size: inherit;
    }

    .fee>div div:nth-child(even) p {
        margin-right: 0;
    }
}

.fee-notes {
    line-height: 1.9;
    margin-bottom: 30px;
}

@media (min-width: 1200px) {
    .fee-notes {
        margin-bottom: 60px;
    }
}


.flow {
    position: relative;
    box-sizing: border-box;
    width: auto;
    height: auto;
    border-radius: 50px 30px 30px 30px;
    box-shadow: 5px 5px #f2f2f2;
    margin: 0 25px 30px;
    padding: 130px 28px 22px;
}

@media (min-width: 1200px) {
    .flow {
        display: flex;
        align-items: center;
        width: 1200px;
        min-height: 110px;
        border-radius: 50px 30px 30px 30px;
        box-shadow: 5px 5px #f4f4f4;
        margin: 0 0 50px 0;
        padding: 25px 25px 27px;
    }
}

.flow-notes {
    text-align: justify;
}

.flow-icon-1 {
    background: url(/material/img/home/flow-icon-1.png) no-repeat center top 30px var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .flow-icon-1 {
        background: url(/material/img/home/flow-icon-1.png) no-repeat left 60px center var(--white);
        background-size: 80px 80px;
    }
}

.flow-icon-2 {
    background: url(/material/img/home/flow-icon-2.png) no-repeat center top 30px var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .flow-icon-2 {
        background: url(/material/img/home/flow-icon-2.png) no-repeat left 60px center var(--white);
        background-size: 80px 80px;
    }
}

.flow div {
    box-sizing: border-box;
    width: auto;
    height: auto;
}

.flow div:nth-child(odd) {
    text-align: center;
    width: auto;
    padding: 0 0 1.5rem;
}

.flow div:nth-child(even) {
    text-align: justify;
    width: auto;
    padding: 0;
}

@media (min-width: 1200px) {
    .flow div:nth-child(odd) {
        text-align: center;
        width: 35%;
        padding: 0 3rem 0 14rem;
    }

    .flow div:nth-child(even) {
        width: 65%;
        padding: 0 3rem;
        background: url(/material/img/home/line.png) no-repeat left center;
        background-size: 1px 56px;
    }
}

.flow p {
    margin: 0;
    letter-spacing: 0;
    line-height: 1.7;
}

@media (min-width: 1200px) {
    .flow p {
        letter-spacing: .1rem;
    }
}

.flow div:nth-child(odd) p {
    font-weight: bold;
    font-size: 1.3rem;
}

@media (min-width: 1200px) {
    .flow div:nth-child(odd) p {
        font-weight: normal;
        font-size: 1.6rem;
    }
}

.flow div:nth-child(even) p {
    font-size: 1.4rem;
    line-height: 1.8;
}

@media (min-width: 1200px) {
    .flow div:nth-child(even) p {
        font-size: 1.6rem;
        line-height: 1.9;
    }
}

.flow-label-wrap {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 90px;
    height: 91px;
    overflow: hidden;
}

.flow-label {
    display: inline-block;
    position: absolute;
    padding: 3px 0 2px;
    right: -10px;
    top: 16px;
    width: 140px;
    text-align: center;
    font-size: 14px;
    background: var(--yellow);
    color: #484848;
    font-weight: bold;
    transform: rotate(-45deg);
}

.flow-label:before,
.flow-label:after {
    position: absolute;
    content: "";
    border-top: 4px solid #ddc914;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    bottom: -4px;
}

.flow-label:before {
    left: 13px;
}

.flow-label:after {
    right: 13px;
}

.body-text {
    font-weight: bold;
    text-align: justify;
}

@media (min-width: 1200px) {
    .body-text {
        text-align: center;
    }
}

.body-text span {
    font-weight: bold;
}

@media (min-width: 1200px) {
    .body-text span {
        display: block;
    }
}

.detail-btn {
    display: block;
    box-sizing: border-box;
    text-align: center;
    width: auto;
    height: 36px;
    line-height: 36px;
    border-radius: 18px;
    background-color: var(--yellow);
    box-shadow: 0px 3px #e9d100;
    font-size: 1.4rem;
    letter-spacing: .05rem;
    padding: 0 10px;
    margin: 0 50px;
    font-size: 1.3rem;
}

@media (min-width: 1200px) {
    .detail-btn {
        width: 26%;
        height: 38px;
        line-height: 38px;
        border-radius: 19px;
        font-size: 1.6rem;
        letter-spacing: 0.1rem;
        padding: 0 15px;
        margin: 0 auto;
        font-size: 1.4rem;
    }
}

.detail-btn:hover {
    transition: all 0.4s;
    color: var(--white);
    background-color: var(--green);
    box-shadow: 0px 3px #4eb35b;
}

.detail-btn a {
    display: block;
    width: 100%;
    height: 100%;
    font-weight: bold;
}

.detail-btn a {
    color: var(--gray);
    text-decoration: none;
}

.detail-btn a:hover {
    color: var(--white);
    text-decoration: none;
}

.detail-btn i {
    font-size: 1.4rem;
    margin-right: 3px;
    vertical-align: text-bottom;
}

@media (min-width: 1200px) {
    .detail-btn i {
        font-size: 1.5rem;
        margin-right: 6px;
    }
}


.detail-btn2 {
    display: block;
    box-sizing: border-box;
    text-align: center;
    width: auto;
    height: 36px;
    line-height: 36px;
    border-radius: 18px;
    background-color: var(--yellow);
    box-shadow: 0px 3px #e9d100;
    font-size: 1.4rem;
    letter-spacing: .05rem;
    padding: 0 10px;
    margin: 0 50px;
    font-size: 1.3rem;
}

@media (min-width: 1200px) {
    .detail-btn2 {
        width: 26%;
        height: 38px;
        line-height: 38px;
        border-radius: 19px;
        font-size: 1.6rem;
        letter-spacing: 0.1rem;
        padding: 0 15px;
        margin: 0 auto;
        font-size: 1.4rem;
    }
}

.detail-btn2:hover {
    transition: all 0.4s;
    color: var(--white);
    background-color: var(--gray);
    box-shadow: 0px 3px #686868;
}

.detail-btn2 a {
    display: block;
    width: 100%;
    height: 100%;
    font-weight: bold;
}

.detail-btn2 a {
    color: var(--gray);
    text-decoration: none;
}

.detail-btn2 a:hover {
    color: var(--white);
    text-decoration: none;
}

.detail-btn2 i {
    font-size: 1.4rem;
    margin-right: 3px;
    vertical-align: text-bottom;
}

@media (min-width: 1200px) {
    .detail-btn2 i {
        font-size: 1.5rem;
        margin-right: 6px;
    }
}


#telenear>p {
    text-align: justify;
}

@media (min-width: 1200px) {
    #telenear>p {
        text-align: center;
    }
}

/* .telenear-box {
    margin-bottom: 30px;
} */

@media (min-width: 1200px) {
    .telenear-box {
        display: flex;
        flex-wrap: wrap;
        /* margin-bottom: 60px; */
    }
}

.telenear-box div {
    box-sizing: border-box;
    width: auto;
    height: auto;
    border-radius: 30px;
    box-shadow: 5px 5px #f2f2f2;
    margin: 0 25px 24px;
}

@media (min-width: 1200px) {
    .telenear-box div {
        /* width: 585px; */
        width: 380px;
        box-shadow: 5px 5px #f4f4f4;
        /* margin: 0 0 30px 0; */
        margin: 0 30px 30px 0;
    }
}



.telenear-pict-title {
    text-align: left;
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 1.7;
    padding: 17px 25px 3px 122px;
    margin: 0;
}

@media (min-width: 1200px) {
    .telenear-pict-title {
        font-size: 1.7rem;
        line-height: 1.7;
        padding: 18px 30px 4px 130px;
    }
}

.telenear-box p {
    text-align: justify;
    font-size: 1.4rem;
    line-height: 1.6;
    padding: 0 25px 19px 122px;
    margin: 0;
}

@media (min-width: 1200px) {
    .telenear-box p {
        font-size: 1.5rem;
        line-height: 1.6;
        padding: 0 30px 22px 130px;
    }
}

@media (min-width: 1200px) {

    /* .telenear-box div:nth-child(odd) {
        margin-right: 30px;
    } */
    .telenear-box div:nth-child(3n) {
        margin-right: 0;
    }
}

.function-icon-1 {
    background: url(/material/img/home/function-pict-1.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .finction-icon-1 {
        background: url(/material/img/home/function-pict-1.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.function-icon-2 {
    background: url(/material/img/home/function-pict-2.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .finction-icon-2 {
        background: url(/material/img/home/function-pict-2.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.function-icon-3 {
    background: url(/material/img/home/function-pict-3.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .finction-icon-3 {
        background: url(/material/img/home/function-pict-3.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.function-icon-4 {
    background: url(/material/img/home/function-pict-4.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .finction-icon-4 {
        background: url(/material/img/home/function-pict-4.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.function-icon-5 {
    background: url(/material/img/home/function-pict-5.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .finction-icon-5 {
        background: url(/material/img/home/function-pict-5.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.function-icon-6 {
    background: url(/material/img/home/function-pict-6.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .finction-icon-6 {
        background: url(/material/img/home/function-pict-6.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.function-icon-7 {
    background: url(/material/img/home/function-pict-7.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .finction-icon-7 {
        background: url(/material/img/home/function-pict-7.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.function-icon-8 {
    background: url(/material/img/home/function-pict-8.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .finction-icon-8 {
        background: url(/material/img/home/function-pict-8.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.function-icon-9 {
    background: url(/material/img/home/function-pict-9.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .finction-icon-9 {
        background: url(/material/img/home/function-pict-9.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

@media (min-width: 1200px) {
    .sitemap-list {
        display: flex;
        flex-wrap: wrap;
    }
}

.sitemap-list li {
    box-sizing: border-box;
    width: auto;
    height: auto;
    border-radius: 30px;
    box-shadow: 5px 5px #f2f2f2;
    margin: 0;
}

.sitemap-list li:hover {
    box-sizing: border-box;
    outline: 3px solid #fff495;
    outline-offset: -3px;
}

@media (min-width: 1200px) {
    .sitemap-list li {
        width: 585px;
        box-shadow: 5px 5px #f4f4f4;
        margin: 0;
    }
}

.sitemap-list li {
    margin-bottom: 24px;
}

@media (min-width: 1200px) {
    .sitemap-list li {
        margin-bottom: 35px;
    }
}

@media (min-width: 1200px) {
    .sitemap-list li:nth-child(odd) {
        margin-right: 30px;
    }
}


.sitemap-list li a {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--gray);
    text-decoration: none;
}

.sitemap-list-title {
    text-align: left;
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 1.4;
    padding: 17px 25px 6px 122px;
    margin: 0;
}

@media (min-width: 1200px) {
    .sitemap-list-title {
        font-size: 1.7rem;
        line-height: 1.9;
        padding: 20px 30px 6px 130px;
    }
}

.sitemap-list p {
    text-align: justify;
    font-size: 1.1rem;
    line-height: 1.7;
    padding: 0 25px 19px 122px;
    margin: 0 0 5px 0;
    color: #656565;
    font-weight: bold;
}

@media (min-width: 1200px) {
    .sitemap-list p {
        font-size: 1.4rem;
        line-height: 1.8;
        padding: 0 30px 22px 130px;
        font-weight: normal;
    }
}

/*ユーザーサポート個別ページ用*/
@media (min-width: 1200px) {
    .sitemap-list2 {
        display: flex;
        flex-wrap: wrap;
    }
}

.sitemap-list2 li {
    box-sizing: border-box;
    width: auto;
    height: auto;
    border-radius: 30px;
    box-shadow: 5px 5px #f2f2f2;
    margin: 0;
}

.sitemap-list2 li:hover {
    box-sizing: border-box;
    outline: 3px solid #fff495;
    outline-offset: -3px;
}

@media (min-width: 1200px) {
    .sitemap-list2 li {
        width: 585px;
        box-shadow: 5px 5px #f4f4f4;
        margin: 0;
    }
}

.sitemap-list2 li {
    margin-bottom: 24px;
}

@media (min-width: 1200px) {
    .sitemap-list2 li {
        margin-bottom: 35px;
    }
}

@media (min-width: 1200px) {
    .sitemap-list2 li:nth-child(odd) {
        margin-right: 30px;
    }
}

.sitemap-list2 li a {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--gray);
    text-decoration: none;
}

.sitemap-list-title2 {
    text-align: justify;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1.7;
    padding: 130px 30px 25px;
    margin: 0;
}

@media (min-width: 1200px) {
    .sitemap-list-title2 {
        font-size: 1.7rem;
        line-height: 1.9;
        padding: 135px 50px 30px;
    }
}

.sitemap-list2 p {
    text-align: justify;
    font-size: 1.1rem;
    line-height: 1.7;
    padding: 100px 25px 19px 0;
    margin: 0 0 5px 0;
    color: #656565;
}

@media (min-width: 1200px) {
    .sitemap-list2 p {
        font-size: 1.4rem;
        line-height: 1.9;
        padding: 100px 30px 22px 0;
    }
}

.pagepict-support-guide2 {
    background: url(/material/img/common/pagepict/pagepict-support-guide.png) no-repeat center top 30px var(--white);
    background-size: 80px 80px;
}

.pagepict-support-faq2 {
    background: url(/material/img/common/pagepict/pagepict-support-faq.png) no-repeat center top 30px var(--white);
    background-size: 80px 80px;
}

/*ここまで*/

.pagepict-feature {
    background: url(/material/img/common/pagepict/pagepict-feature.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-feature {
        background: url(/material/img/common/pagepict/pagepict-feature.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-telenear {
    background: url(/material/img/common/pagepict/pagepict-telenear.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-telenear {
        background: url(/material/img/common/pagepict/pagepict-telenear.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-scene {
    background: url(/material/img/common/pagepict/pagepict-scene.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-scene {
        background: url(/material/img/common/pagepict/pagepict-scene.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-fee {
    background: url(/material/img/common/pagepict/pagepict-fee.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-fee {
        background: url(/material/img/common/pagepict/pagepict-fee.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-flow {
    background: url(/material/img/common/pagepict/pagepict-flow.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-flow {
        background: url(/material/img/common/pagepict/pagepict-flow.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-migration {
    background: url(/material/img/common/pagepict/pagepict-migration.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-migration {
        background: url(/material/img/common/pagepict/pagepict-migration.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-system-environment {
    background: url(/material/img/common/pagepict/pagepict-system-environment.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-system-environment {
        background: url(/material/img/common/pagepict/pagepict-system-environment.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-service-faq {
    background: url(/material/img/common/pagepict/pagepict-service-faq.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-service-faq {
        background: url(/material/img/common/pagepict/pagepict-service-faq.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-form {
    background: url(/material/img/common/pagepict/pagepict-form.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-form {
        background: url(/material/img/common/pagepict/pagepict-form.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-news {
    background: url(/material/img/common/pagepict/pagepict-news.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-news {
        background: url(/material/img/common/pagepict/pagepict-news.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-service-updates {
    background: url(/material/img/common/pagepict/pagepict-service-updates.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-service-updates {
        background: url(/material/img/common/pagepict/pagepict-service-updates.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-system-status {
    background: url(/material/img/common/pagepict/pagepict-system-status.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-system-status {
        background: url(/material/img/common/pagepict/pagepict-system-status.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-overview {
    background: url(/material/img/common/pagepict/pagepict-overview.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-overview {
        background: url(/material/img/common/pagepict/pagepict-overview.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-disclaimer {
    background: url(/material/img/common/pagepict/pagepict-disclaimer.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-disclaimer {
        background: url(/material/img/common/pagepict/pagepict-disclaimer.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-terms-and-conditions {
    background: url(/material/img/common/pagepict/pagepict-terms-and-conditions.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-terms-and-conditions {
        background: url(/material/img/common/pagepict/pagepict-terms-and-conditions.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-legal-notice {
    background: url(/material/img/common/pagepict/pagepict-legal-notice.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-legal-notice {
        background: url(/material/img/common/pagepict/pagepict-legal-notice.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-privacypolicy {
    background: url(/material/img/common/pagepict/pagepict-privacypolicy.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-privacypolicy {
        background: url(/material/img/common/pagepict/pagepict-privacypolicy.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-support-guide {
    background: url(/material/img/common/pagepict/pagepict-support-guide.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-support-guide {
        background: url(/material/img/common/pagepict/pagepict-support-guide.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-support-faq {
    background: url(/material/img/common/pagepict/pagepict-support-faq.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-support-faq {
        background: url(/material/img/common/pagepict/pagepict-support-faq.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-campaign {
    background: url(/material/img/common/pagepict/pagepict-campaign.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-campaign {
        background: url(/material/img/common/pagepict/pagepict-campaign.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

.pagepict-yealink-ipdenwa {
    background: url(/material/img/common/pagepict/pagepict-ipdenwa.png) no-repeat left 20px center var(--white);
    background-size: 80px 80px;
}

@media (min-width: 1200px) {
    .pagepict-yealink-ipdenwa {
        background: url(/material/img/common/pagepict/pagepict-ipdenwa.png) no-repeat left 27px center var(--white);
        background-size: 80px 80px;
    }
}

/* お知らせ用 */
.announcements-list section {
    margin-bottom: 7rem;
}

.announcements-list section:last-of-type {
    margin-bottom: 9rem;
}

.announcements-list h2 span {
    display: table;
    padding: 3px 6px 3px 7px;
    background: var(--gray);
    color: var(--white);
    font-size: 1.5rem;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    margin: 9px 0 3px;
    border-radius: 3px;
    vertical-align: middle;
    line-height: 1;
}

@media (min-width: 1200px) {
    .announcements-list h2 span {
        padding: 3px 6px 3px 7px;
        margin: 13px 0 4px;
    }
}

.announcements-list p {
    text-align: justify;
    letter-spacing: 0.03rem;
    margin-right: 2rem;
    margin-left: 2rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 1200px) {
    .announcements-list p {
        margin-right: 4rem;
        margin-left: 4rem;
    }
}

.announcements-list ul {
    list-style-type: disc;
    margin: 4rem 3rem 4rem 6rem;
}

.announcements-list li {
    margin-bottom: 1.5rem;
}

.category-top .subpage-contents {
    box-sizing: border-box;
    width: auto;
    height: auto;
    padding: 10px 25px 25px;
    background: none;
    margin: 0 auto;
}

@media (min-width: 1200px) {
    .category-top .subpage-contents {
        width: 1200px;
        padding: 90px 0;
        border-radius: 45px;
    }
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    color: var(--gray);
    margin: 6rem .5rem 0;
}

@media (min-width: 1200px) {
    .breadcrumb {
        margin: 12rem 1rem 0;
    }
}

.breadcrumb li {
    font-size: 1.1rem;
    line-height: 1.7;
    font-weight: bold;
}

@media (min-width: 1200px) {
    .breadcrumb li {
        font-size: 1.4rem;
        line-height: 1.7;
    }
}

.breadcrumb li:not(:last-of-type)::after {
    content: "-";
    margin: 0 .3rem;
}

.breadcrumb a {
    color: var(--gray);
    text-decoration: none;
    font-weight: bold;
}

.breadcrumb a:hover {
    color: var(--red);
    text-decoration: underline;
    font-weight: bold;
}


.subpage-contents .page-description {
    text-align: justify;
    margin-bottom: 4rem;
}

@media (min-width: 1200px) {
    .subpage-contents .page-description {
        text-align: center;
        margin-bottom: 8rem;
    }
}

.fukidashi-wrap {
    position: relative;
    margin: 25px 5px 30px;
    padding-bottom: 107px;
}

@media (min-width: 1080px) {
    .fukidashi-wrap {
        margin: 0 40px 40px;
        padding-bottom: 0;
    }
}

.fukidashi-wrap:last-of-type {
    margin-bottom: 50px;
}

@media (min-width: 1080px) {
    .fukidashi-wrap:last-of-type {
        margin-bottom: 100px;
    }
}

.fukidashi-icon {
    background: url(/material/img/common/fukidashi-icon.png) no-repeat bottom left 35%;
    background-size: 90px 90px;
}

@media (min-width: 1080px) {
    .fukidashi-icon {
        background: url(/material/img/common/fukidashi-icon.png) no-repeat left center;
        background-size: 90px 90px;
    }
}

.fukidashi {
    position: relative;
    background: var(--lightgray);
    border-radius: 25px;
    padding: 21px 26px;
    min-height: 50px;
}

@media (min-width: 1200px) {
    .fukidashi {
        padding: 26px 34px;
        margin-left: 120px;
    }
}

.fukidashi:before {
    position: absolute;
    left: 50%;
    bottom: -15px;
    width: 20px;
    height: 15px;
    background-color: var(--lightgray);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    margin-left: -10px;
    content: '';
}

@media (min-width: 1200px) {
    .fukidashi:before {
        position: absolute;
        top: 50%;
        left: -7px;
        width: 30px;
        height: 30px;
        background-color: var(--lightgray);
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
        margin-top: -15px;
        content: '';
    }
}

.fukidashi p {
    text-align: justify;
    font-size: 1.4rem;
    letter-spacing: .05rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-weight: bold;
}

@media (min-width: 1200px) {
    .fukidashi p {
        font-size: 1.7rem;
        letter-spacing: .05rem;
        line-height: 1.9;
        margin-bottom: 1.2rem;
        font-weight: normal;
    }
}

.fukidashi p:last-child {
    margin-bottom: 0;
}

.step {
    display: table;
    padding: 4px 8px 5px 10px;
    background: var(--gray);
    color: var(--white);
    font-size: 1.4rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin: 0 0 .6rem 0;
    border-radius: 3px;
    vertical-align: middle;
    line-height: 1;
}

@media (min-width: 1200px) {
    .step {
        display: inline-block;
        font-size: 1.7rem;
        padding: 6px 12px 6px 14px;
        margin: -.6rem 1.5rem 0 0;
    }
}

.detail-link i {
    margin-right: 4px;
}

/*レイアウトA*/
.layout-a {
    box-sizing: border-box;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

@media (min-width: 1200px) {
    .layout-a {
        flex-direction: row;
        width: 960px;
        margin: 0 30px 60px;
    }
}

.layout-a div {
    box-sizing: border-box;
    margin-bottom: 10px;
}

.layout-a div:first-child {
    margin-top: 5px;
    margin-bottom: 30px;
}

.layout-a div:last-child {
    margin-bottom: 20px;
}

@media (min-width: 1200px) {
    .layout-a div {
        margin-bottom: 0;
    }

    .layout-a div:first-child {
        width: 490px;
        height: auto;
        margin-right: 60px;
    }

    .layout-a div:last-child {
        width: 410px;
        height: auto;
        margin-bottom: 0;
    }
}

/*レイアウトB*/
.layout-b {
    box-sizing: border-box;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

@media (min-width: 1200px) {
    .layout-b {
        flex-direction: row-reverse;
        width: 960px;
        margin: 0 30px 60px;
    }
}

.layout-b div {
    box-sizing: border-box;
    margin-bottom: 10px;
}

.layout-b div:first-child {
    margin-bottom: 20px;
}

@media (min-width: 1200px) {
    .layout-b div {
        margin-bottom: 0;
    }

    .layout-b div:first-child {
        width: 490px;
        height: auto;
        margin-left: 60px;
    }

    .layout-b div:last-child {
        width: 410px;
        height: auto;
    }
}

/*レイアウト共通*/
.layout-a figcaption,
.layout-b figcaption {
    text-align: center;
    margin-top: 16px;
    font-size: 1.4rem;
    letter-spacing: .06rem;
}

@media (min-width: 1200px) {

    .layout-a figcaption,
    .layout-b figcaption {
        font-size: 1.5rem;
        letter-spacing: .075rem;
    }
}

.layout-a p,
.layout-b p {
    text-align: justify;
    margin-right: 1.5rem;
    margin-left: 1.5rem;
}

@media (min-width: 1200px) {

    .layout-a p,
    .layout-b p {
        margin-right: 0;
        margin-left: 0;
    }
}

.layout-a p:last-child,
.layout-b p:last-child {
    margin-bottom: 0 !important;
}

.summary-text {
    text-align: justify;
    font-size: 1.4rem;
}

@media (min-width: 1200px) {
    .summary-text {
        text-align: justify;
        font-size: 1.5rem;
        color: #484848;
    }
}

.telenear-fee .table thead th {
    background-color: var(--gray);
    color: var(--lightgray);
}

.telenear-fee .table thead th p {
    font-weight: bold;
    line-height: 1;
}

@media (min-width: 1200px) {
    .telenear-fee .table thead th p {
        font-weight: normal;
    }
}

.telenear-fee .table td:first-child p {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 0.1rem;
}

@media (min-width: 1200px) {
    .telenear-fee .table td:first-child p {
        font-size: inherit;
    }
}

.telenear-fee .table td:first-child {
    background-color: var(--lightgray);
}

.pbx-summary-box {
    box-sizing: border-box;
    margin-left: 3.25rem;
    margin-right: 3.25rem;
    background: url(/material/img/home/pbx-bg.png) no-repeat top center;
    background-size: 180px auto;
    margin-bottom: 0;
    padding-top: 184px;
}

@media (min-width: 1200px) {
    .pbx-summary-box {
        box-sizing: border-box;
        margin-left: 10rem;
        margin-right: 10rem;
        background: url(/material/img/home/pbx-bg.png) no-repeat top left;
        background-size: 227px 206px;
        min-height: 210px;
        padding-left: 280px;
        padding-top: 0;
    }

    .pbx-summary-box p {
        margin-top: -5px;
    }
}

.feature-summary-box {
    box-sizing: border-box;
    margin-left: 3.25rem;
    margin-right: 3.25rem;
    background: url(/material/img/home/feature-bg.png) no-repeat top center;
    background-size: 310px auto;
    margin-bottom: 35px;
    padding-top: 185px;
}

@media (min-width: 1200px) {
    .feature-summary-box {
        box-sizing: border-box;
        margin-left: 6rem;
        margin-right: 6rem;
        background: url(/material/img/home/feature-bg.png) no-repeat top right;
        background-size: 450px 238px;
        min-height: 238px;
        margin-bottom: 80px;
        padding-right: 510px;
        padding-top: 0;
    }

    .feature-summary-box p {
        padding-top: 30px;
    }
}

.fee-summary-box {
    box-sizing: border-box;
    margin-left: 3.25rem;
    margin-right: 3.25rem;
    background: url(/material/img/home/fee-bg.png) no-repeat top center;
    background-size: 300px auto;
    margin-bottom: 35px;
    padding-top: 170px;
}

@media (min-width: 1200px) {
    .fee-summary-box {
        box-sizing: border-box;
        margin-left: 10rem;
        margin-right: 10rem;
        background: url(/material/img/home/fee-bg.png) no-repeat top left;
        background-size: 416px 205px;
        min-height: 210px;
        padding-left: 480px;
        padding-top: 0;
        margin-bottom: 80px;
    }

    .fee-summary-box p {
        padding-top: 7px;
    }
}

#faq>p.faq-list-page {
    text-align: center;
    margin: 0 auto;
}

.faq-list-page a {
    color: var(--white);
    text-decoration: none;
}

.faq-list-page a:hover {
    color: var(--white);
    text-decoration: underline;
}

.notice-board {
    box-sizing: border-box;
    text-align: center;
    background-color: var(--white);
    border-radius: 20px;
    margin: 20px;
    padding-bottom: 15px;
    border: 3px solid var(--yellow);
}

@media (min-width: 1200px) {
    .notice-board {
        border-radius: 40px;
        margin: 30px auto;
        padding-bottom: 20px;
    }
}

.notice-board h2 {
    margin: 0 0 15px 0;
    padding: 4px 0 5px;
    line-height: 1.5;
    background-color: var(--yellow);
    color: var(--gray);
    font-weight: bold;
    border-radius: 16px 16px 0 0;
    font-size: 1.3rem;
    letter-spacing: 0.1rem;
}

@media (min-width: 1200px) {
    .notice-board h2 {
        margin: 0 0 15px 0;
        padding: 5px 0 5px;
        border-radius: 34px 34px 0 0;
        font-size: 1.5rem;
        letter-spacing: 0.2rem;
    }
}

.notice-board p {
    text-align: justify;
    margin: 0 2rem .75rem 2rem;
    font-size: 1.2rem;
    line-height: 1.5;
    font-weight: bold;
}

@media (min-width: 1200px) {
    .notice-board p {
        text-align: center;
        margin: 0 3rem .75rem 3rem;
        font-size: 1.4rem;
        line-height: 1.25;
        letter-spacing: .15rem;
        font-weight: normal;
    }
}

.notice-board span {
    color: var(--red);
    font-weight: bold;
}

.notice-board p:last-child {
    margin-bottom: 0;
}

.screenshot {
    text-align: center;
}

.screenshot figcaption {
    font-size: 1.3rem;
    line-height: 1.5;
    font-weight: bold;
    margin-top: 2.5rem;
    margin-bottom: 5rem;
}

@media (min-width: 1200px) {
    .screenshot figcaption {
        font-size: 1.5rem;
        font-weight: normal;
    }
}