@charset "UTF-8";

@font-face {
    font-family: 'azuki';
    src: url(../font/azuki.ttf);
}

/* ====================

  *common
  *header
  *main
  *footer

==================== */

/* ==============================================
  Reset CSS
============================================== */

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,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    font-weight: normal;
    /*font-size: 100%;*/
    vertical-align: baseline;
}

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

html {
    overflow-y: scroll;
    font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: none;
}

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

input::-webkit-input-placeholder,
input:-moz-placeholder,
textarea::-webkit-input-placeholder,
textarea:-moz-placeholder {
    color: #888;
}

input[type="button"],
input[type="submit"],
input[type="search"],
input[type="reset"] {
    -webkit-appearance: none;
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

caption,
th {
    text-align: left;
}

a:focus {
    outline: none;
}

.clearfix:after {
    content: "";
    clear: both;
    display: block;
}

.jq-hide {
    display: none !important;
}

/* ==============================================
  common
============================================== */

/* カラー */
:root {
    --main-cl: #ffb001;
    --sub-cl: #140035;
    --red-cl: #ff0000;
    --blue-cl: #0161ff;
    --green-cl: #439b3e;
    --bg1-cl: #fff8e4;
    --txt-bk: #333;
}

/* タブレットでもpcデザイン表示 */
html,
body {
    min-width: 1100px;
}

html {
    font-family: 'Noto Sans JP',
        "ヒラギノ角ゴ ProN W3",
        "Hiragino Kaku Gothic ProN",
        "游ゴシック",
        YuGothic,
        "メイリオ",
        Meiryo,
        sans-serif;
    color: var(--sub-cl);
    letter-spacing: 2px;
    font-weight: 500;
}

body {
    font-size: 18px;
    line-height: 1.7;
}

img {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}

a {
    transition: .3s;
    text-decoration: none;
}

a:hover {
    opacity: .6;
}

a[href^="tel:"] {
    cursor: default;
    opacity: 1;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: inherit;
}

.font-b,
.font-b * {
    font-weight: bold;
}

.font-s {
    font-weight: inherit;
    font-size: 80%;
}

strong {
    font-weight: bold;
}

.inner {
    width: 1000px;
    margin: 0 auto;
    padding: 5% 0;
}

.logo-svg {
    fill: #c40b00;
}

h2,
h3,
.ttl {
    letter-spacing: 4px;
    text-align: center;
}

.cmn-ttl {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 4%;
}

.cmn-ttl span {
    font-weight: bold;
}

.disc-list {
    list-style-type: disc;
    text-align: left;
    padding-left: 2em;
}

.sp {
    display: none;
}

/* SP */
@media screen and (max-width: 736px) {

    body,
    html {
        min-width: inherit;
        letter-spacing: 1px;
    }

    body {
        font-size: 3.8vw;
        line-height: 1.6;
    }

    .sp {
        display: inline;
    }

    .pc {
        display: none;
    }

    .inner {
        width: 94%;
        padding: 10vw 0;
    }

    h2,
    h3,
    .ttl {
        letter-spacing: 2px;
        line-height: 1.4;
    }

    .cmn-ttl {
        font-size: 6vw;
        margin-bottom: 8%;
    }
}


/* ==============================================
  header
============================================== */

header {
    background: #fff;
    width: 100%;
}

#hdr-wrap {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5% 0;
}

#hdr-wrap .logo-svg {
    width: 230px;
}

#hdr-wrap .comp-name {
    font-weight: bold;
    font-size: 20px;
    color: #010101;
}

/* SP */
@media screen and (max-width: 736px) {

    #hdr-wrap {
        width: 94%;
        padding: 3% 0;
    }

    #hdr-wrap .logo-svg {
        width: 33.5vw;
    }

    #hdr-wrap .comp-name {
        font-size: 10px;
        letter-spacing: 1px;
        vertical-align: baseline;
    }
}

/* ==============================================
  main
============================================== */

/* ---------------- mv ---------------- */

#mv {
    background: var(--main-cl) url(../img/mv-bg.png) no-repeat 70% 64%/630px;
    padding: 1.5% 0 3.5%;
}

.mv-inner {
    width: 1000px;
    margin: 0 auto;
    position: relative;
}

.mv-ttl {
    text-align: center;
    font-size: 52px;
    position: relative;
    margin-bottom: 2.5%;
}

.mv-ttl,
.mv-ttl * {
    font-weight: bold;
}

.mv-ttl .ttl-top {
    display: block;
    position: relative;
    left: 5%;
    margin-bottom: 1.8%;
}

.mv-ttl strong {
    font-size: 60px;
}

.mv-ttl .txt-w {
    background: #fff;
    font-size: 72px;
    padding: 1px 8px 8px 8px;
    letter-spacing: 4px;
    display: inline-block;
    margin: 0 5px;
    line-height: 1;
}

.mv-ttl .txt01 {
    position: absolute;
    top: 10%;
    left: 14%;
}

#mv .circle-list {
    display: flex;
}

#mv .circle-list li {
    margin: 1%;
}

#mv .circle-list.btm {
    padding-left: 28.8%;
}

#mv .senchaku {
    position: absolute;
    top: 60%;
    left: 6%;
}

#mv .btn-wrap {
    margin-top: 7%;
}

/* SP */
@media screen and (max-width: 736px) {

    #mv {
        background-image: url(../img/mv-bg.png);
        background-position: 28vw 57vw;
        background-size: 77vw;
    }

    .mv-inner {
        width: 90%;
        padding: 3% 0 5%;
    }

    .mv-ttl {
        font-size: 6vw;
    }

    .mv-ttl .ttl-top {
        left: 0;
        text-align: right;
    }

    .mv-ttl strong {
        font-size: 8vw;
    }

    .mv-ttl .txt-w {
        font-size: 8vw;
        letter-spacing: 2px;
        padding: 2px 4px 5px 5px;
    }

    .mv-ttl .txt01 {
        top: 0;
        left: -2%;
        width: 15vw;
    }

    .mv-ttl .txt02 {
        width: 100%;
        margin: 1.8vw 0;
    }

    #mv .circle-list.btm {
        padding-left: 37vw;
    }

    #mv .circle-list img {
        width: 16.5vw;
    }

    #mv .senchaku {
        top: 80vw;
        left: 0vw;
        width: 23vw;
    }

    #mv .btn-wrap {
        margin-top: 10vw;
    }
}

/* ---------------- problem ---------------- */

#problem {
    background: url(../img/dots-bg.png) repeat;
    padding-bottom: 5%;
}

.problem-block {
    border-radius: 20px;
    border: 2px solid var(--sub-cl);
    background: #fff;
}

.problem-block .ttl {
    background: var(--sub-cl);
    padding: 2%;
    border-radius: 17px 17px 0 0;
    color: #fff;
    font-weight: 600;
    font-size: 28px;
    text-align: center;
}

.problem-block .ttl>img {
    display: block;
    position: relative;
    left: 19%;
    width: 112px;
}

.problem-list {
    padding: 3% 14% 4%;
}

.problem-list li {
    margin-bottom: 1em;
    font-weight: 500;
    font-size: 22px;
}

.problem-list li:last-child {
    margin: 0;
}

.problem-list li::before {
    content: '';
    display: inline-block;
    width: 26px;
    height: 26px;
    background: url(../img/problem-check.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    position: relative;
    top: -3px;
    margin-right: 1.5%;
}

.problem-list li strong {
    color: var(--red-cl);
}

/* SP */
@media screen and (max-width: 736px) {

    #problem {
        padding-bottom: 12vw;
    }

    .problem-block .ttl {
        font-size: 4vw;
        padding: 4.5% 0;
    }

    .problem-block .ttl>img {
        left: 5vw;
        width: 23vw;
        margin-bottom: 1px;
    }

    .problem-list {
        padding: 6% 4% 6% 6%;
    }

    .problem-list li {
        font-size: 4vw;
        text-indent: -1.2em;
        padding-left: 1em;
        margin-bottom: 0.7em;
    }

    .problem-list li::before {
        width: 14px;
        height: 14px;
        top: -1px;
    }
}

/* ---------------- solution ---------------- */

#solution {
    position: relative;
    text-align: center;
}

#solution .ttl {
    margin-bottom: 2.5%;
}

#solution .ttl .txt01 {
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
}

#solution .ttl .arrow::after {
    content: '';
    display: block;
    width: 40px;
    height: 50px;
    background: url(../img/solution-arrow.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    top: -3%;
    left: 50%;
    transform: translateX(-50%);
}

#solution .ttl .txt02 {
    font-weight: bold;
    font-size: 30px;
}

#solution .ttl strong {
    font-size: 177%;
    font-weight: bold;
    line-height: 1.4;
}

.bg-txt {
    background: var(--main-cl);
    color: var(--sub-cl);
    padding: 2px 2px 3px 6px;
    text-align: center;
    display: inline-block;
    font-weight: bold;
    font-size: 24px;
}

.ttl-line {
    display: flex;
    align-items: center;
    margin: 6% 0 4%;
}

.ttl-line:before,
.ttl-line:after {
    content: "";
    height: 3px;
    flex-grow: 1;
    background: var(--sub-cl);
}

.ttl-line:before {
    margin-right: 1rem;
}

.ttl-line:after {
    margin-left: 1rem;
}

.solution-list {
    width: 90%;
    margin: 0 auto;
}

.solution-list li {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.solution-list li:last-child {
    margin: 0;
}

.solution-list p {
    padding-left: 5%;
    text-align: left;
    font-size: 22px;
}

.solution-list p strong {
    color: var(--red-cl);
}

/* SP */
@media screen and (max-width: 736px) {

    #solution .ttl .txt01 {
        width: 64%;
        top: -16vw;
    }

    #solution .ttl .arrow::after {
        width: 20px;
        height: 30px;
        top: -1%;
    }

    #solution .ttl .txt02 {
        font-size: 4.4vw;
    }

    #solution .ttl strong {
        font-size: 126%;
    }

    .bg-txt {
        font-size: 2.8vw;
        display: block;
        padding: 2px 0 3px 0;
    }

    #solution .ttl-line img {
        width: 28vw;
    }

    .ttl-line {
        margin: 7% 0 6%;
    }

    .ttl-line:before {
        margin-right: 0.6rem;
    }

    .ttl-line:after {
        margin-left: 0.6rem;
    }

    .ttl-line:before,
    .ttl-line:after {
        height: 2px;
    }

    .solution-list {
        width: 100%;
    }

    .solution-list li {
        margin-bottom: 20px;
    }

    .solution-list p {
        font-size: 3.5vw;
        padding-left: 4%;
    }

    .solution-list .num img {
        width: 23vw;
    }
}

/* ---------------- cta ---------------- */

.cta {
    padding: 3% 2% 5%;
    background: var(--main-cl);
}

.btn-wrap {
    width: 550px;
    margin: 0 auto;
    text-align: center;
}

.btn-wrap>img {
    position: relative;
    left: 7px;
}

.cta-btn {
    display: block;
    background-color: var(--red-cl);
    border: 3px solid #fff;
    padding: 24px;
    border-radius: 60px;
}

.cta-btn>span {
    padding-left: 24px;
    color: #fff;
    font-weight: bold;
    font-size: 30px;
    letter-spacing: 3px;
}

.cta-btn::after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 22px;
    background: url(../img/btn-arrow.svg) no-repeat;
    background-size: contain;
    vertical-align: middle;
    position: relative;
    left: 8%;
    top: -6px;
}

.cta-btn:hover {
    opacity: 1;
    transform: scale(1.06, 1.06);
}

.cta .inner {
    padding: 2% 0 0;
    width: 800px;
}

.cta .chat-block {
    margin-bottom: 4%;
}

.cta .chat-block li+li {
    text-align: right;
    margin-top: -12px;
}

.cta .chat-block li.txt {
    text-align: left;
    padding: 3% 5%;
    background: #fff;
    border-radius: 20px;
    font-size: 22px;
    margin: 1.5% 0;
}

/* SP */
@media screen and (max-width: 736px) {

    .cta {
        padding: 6% 2% 9%;
    }

    .cta .inner {
        padding: 2% 0 0;
        width: 94%;
    }

    .btn-wrap {
        width: 88%;
    }

    .btn-wrap>img {
        width: 75vw;
        left: 4px;
    }

    .cta .chat-block {
        margin: 2% 0 5%;
    }

    .cta .chat-block li img {
        width: 68vw;
    }

    .cta .chat-block li+li {
        margin-top: -6px;
    }

    .cta .chat-block li.txt {
        padding: 4% 5%;
        border-radius: 10px;
        font-size: 3.4vw;
        margin: 2% 0;
    }

    .cta-btn {
        padding: 12px 4px 16px;
    }

    .cta-btn>span {
        padding-left: 5vw;
        font-size: 4.5vw;
        letter-spacing: 2px;
    }

    .cta-btn::after {
        width: 5vw;
        height: 3.8vw;
        left: 5%;
        top: -2px;
    }
}

/* ---------------- marketing ---------------- */

#marketing {
    background: url(../img/dots-bg.png) repeat;
    padding-bottom: 2%;
    text-align: center;
}

#marketing .txt01 {
    background: var(--main-cl);
    color: #fff;
    font-size: 38px;
    border-radius: 20px;
    padding: 3%;
}

#marketing .txt01,
#marketing .txt01 * {
    font-weight: bold;
}

#marketing .txt01 strong {
    font-size: 120%;
}

#marketing .arrow {
    position: relative;
}

#marketing .arrow::after {
    content: '';
    display: block;
    width: 30px;
    height: 40px;
    background: url(../img/solution-arrow.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

#marketing .txt-block {
    display: flex;
    margin-top: 8%;
    position: relative;
    -webkit-clip-path: inset(0 0 0 0 round 20px);
    clip-path: inset(0 0 0 0 round 20px);
}

#marketing .txt-block .multiplied::after {
    content: '';
    display: block;
    width: 57px;
    height: 54px;
    background: url(../img/marketing-multiplied.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

#marketing .txt-block>div {
    width: 50%;
}

#marketing .txt-block .balloon {
    color: #fff;
    padding: 6% 3%;
    position: relative;
}

#marketing .txt-block .balloon::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22px 25px 0 25px;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

#marketing .txt-block .accesses .balloon {
    background: var(--blue-cl);
}

#marketing .txt-block .accesses .balloon::after {
    border-color: var(--blue-cl) transparent transparent transparent;
}

#marketing .txt-block .conversion .balloon::after {
    border-color: var(--green-cl) transparent transparent transparent;
}

#marketing .txt-block .conversion .balloon {
    background: var(--green-cl);
}

#marketing .txt-block h3 {
    font-size: 50px;
    font-weight: bold;
    line-height: 1.3;
}

#marketing .txt-block h3>span {
    font-size: 46%;
    font-weight: bold;
    display: block;
}

#marketing .txt-block .disc-list {
    width: 250px;
    margin: 5% auto 0;
}

#marketing .txt-block .disc-list li {
    font-size: 22px;
    margin-bottom: 4px;
}

#marketing .txt-block .accesses .btm-block {
    background: #d4eaff;
    color: #0056a7;
    padding: 11% 2%;
}

#marketing .txt-block .conversion .btm-block {
    background: #bae3b7;
    color: #006f44;
}

#marketing .txt-block .btm-block {
    padding: 8% 2% 6%;
    font-size: 30px;
    line-height: 1.5;
    min-height: 240px;
}

#marketing .txt-block .btm-block p {
    font-weight: 500;
    font-size: 70%;
}

#marketing .txt-block .btm-block,
#marketing .txt-block .btm-block * {
    font-weight: bold;
}

/* SP */
@media screen and (max-width: 736px) {

    #marketing .txt01 {
        font-size: 6vw;
        padding: 3% 1% 4%;
        border-radius: 10px;
    }

    #marketing .txt-block {
        margin-top: 10%;
        -webkit-clip-path: inset(0 0 0 0 round 10px);
        clip-path: inset(0 0 0 0 round 10px);
    }

    #marketing .arrow::after {
        width: 14px;
        height: 18px;
        top: 2.2vw;
    }

    #marketing .txt-block h3 {
        font-size: 6vw;
        letter-spacing: 1px;
    }

    #marketing .txt-block h3>span {
        font-size: 50%;
    }

    #marketing .txt-block .disc-list li {
        font-size: 3.4vw;
        margin-bottom: 2px;
    }

    #marketing .txt-block .multiplied::after {
        width: 30px;
        height: 32px;
        top: 8vw;
    }

    #marketing .txt-block .balloon {
        padding: 10% 3%;
    }

    #marketing .txt-block .disc-list {
        width: 100%;
        margin: 10% 0 3% 4%;
    }

    #marketing .txt-block .balloon::after {
        border-width: 14px 14px 0 14px;
        bottom: -13px;
    }

    #marketing .txt-block .btm-block p {
        font-size: 60%;
    }

    #marketing .txt-block .btm-block {
        padding: 11% 0%;
        font-size: 4.5vw;
        min-height: 35vw;
    }

    #marketing .txt-block .accesses .btm-block {
        padding: 18% 0 0;
    }
}


/* ---------------- example ---------------- */

#example .inner {
    padding: 5% 0 4%;
}

.example-block-wrap {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.example-block {
    width: 49%;
}

.example-block>div {
    display: flex;
    align-items: inherit;
}

.example-block h3 {
    margin-right: 2%;
    display: flex;
    align-items: center;
    width: 60px;
}

.example-block h3 img {
    display: block;
    margin: 0 auto;
}

.example-block .item-wrap {
    width: 100%;
}

.example-block .block01 h3 {
    background-color: var(--blue-cl);
}

.example-block .block02 h3 {
    background-color: var(--green-cl);
}

.example-block .block03 h3 {
    background-color: var(--main-cl);
}

.example-block .block02 {
    margin-top: 10px;
}

.example-block .item {
    margin-bottom: 10px;
}

.example-block .block01 .item {
    border: 3px solid #01a8ff;
}

.example-block .block02 .item {
    border: 3px solid #00cc7d;
}

.example-block .block03 .item {
    border: 3px solid #f1b500;
}

.example-block .item:last-child {
    margin-bottom: 0;
}

.example-block .item h4 {
    font-size: 26px;
    font-weight: bold;
    padding: 2% 2% 2% 8%;
}

.example-block .block01 .item h4 {
    background: #d4eaff;
    color: #0056a7;
}

.example-block .block02 .item h4 {
    background: #bae3b7;
    color: #006e43;
}

.example-block .block03 .item h4 {
    background: #ffe9a8;
    color: #ff8401;
}

.example-block .item .cont {
    padding: 4% 4% 4% 2%;
    display: flex;
    align-items: center;
    font-size: 96%;
    justify-content: space-between;
}

.example-block .item .cont .disc-list {
    margin-right: 2%;
}

#example .standard {
    text-align: center;
    margin: 5% 0;
}

#example .standard p {
    font-weight: bold;
    font-size: 30px;
}

#example .standard .font-s {
    margin: 3% 0 2%;
    font-size: 24px;
}

#example .standard strong {
    color: var(--red-cl);
}

.standard .arrow {
    position: relative;
}

.standard .arrow::after {
    content: '';
    display: block;
    width: 40px;
    height: 50px;
    background: url(../img/example-arrow.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.standard-plan {
    margin-top: 9%;
    background: var(--main-cl);
    border-radius: 20px;
    padding: 4%;
}

.standard-plan .fee {
    display: block;
    margin: 2.5% auto;
}

#example .standard-plan p {
    font-size: 24px;
}

#example .standard-plan p>b {
    letter-spacing: 3px;
    font-weight: bold;
    text-shadow: #fff 2px 0px 0px,
        #fff -2px 0px 0px,
        #fff 0px -2px 0px,
        #fff 0px 2px 0px,
        #fff 2px 2px 0px,
        #fff -2px 2px 0px,
        #fff 2px -2px 0px,
        #fff -2px -2px 0px,
        #fff 1px 2px 0px,
        #fff -1px 2px 0px,
        #fff 1px -2px 0px,
        #fff -1px -2px 0px,
        #fff 2px 1px 0px,
        #fff -2px 1px 0px,
        #fff 2px -1px 0px,
        #fff -2px -1px 0px,
        #fff 1px 1px 0px,
        #fff -1px 1px 0px,
        #fff 1px -1px 0px,
        #fff -1px -1px 0px;
}


/* SP */
@media screen and (max-width: 736px) {

    #example .inner {
        padding: 10vw 0 6vw;
    }

    .example-block h3 {
        width: 10vw;
        margin-right: 1.5%;
    }

    .example-block-wrap {
        flex-direction: column;
    }

    .example-block {
        width: 100%;
    }

    .example-block .item {
        margin-bottom: 1.6%;
    }

    .example-block .item h4 {
        font-size: 4.5vw;
        padding: 2% 2% 2% 5%;
    }

    .example-block h3 img {
        width: 5vw;
    }

    .example-block .item .cont .disc-list {
        margin-right: 0;
        font-size: 94%;
    }

    .example-block .item .cont img {
        width: 22vw;
    }

    .example-block .item .cont {
        padding: 4% 4% 4% 1.5%;
        font-size: 90%;
    }

    .example-block .block02,
    .example-block>div {
        margin-top: 1.6%;
    }

    #example .standard p {
        font-size: 4.5vw;
    }

    #example .standard .font-s {
        margin: 5% 0 3%;
        font-size: 4vw;
    }

    .standard-plan {
        margin-top: 14%;
        border-radius: 16px;
        padding: 6% 4% 5%;
    }

    .standard .arrow::after {
        width: 20px;
        height: 30px;
    }

    .standard-plan h3 img {
        width: 70%;
    }

    .standard-plan .fee {
        width: 80%;
        margin: 4% auto;
    }

    #example .standard-plan p {
        font-size: 4vw;
    }

    #example .standard-plan p>b {
        letter-spacing: 2px;
        text-shadow: #fff 1px 0px 0px,
            #fff -1px 0px 0px,
            #fff 0px -1px 0px,
            #fff 0px 1px 0px,
            #fff 1px 1px 0px,
            #fff -1px 1px 0px,
            #fff 1px -1px 0px,
            #fff -1px -1px 0px,
            #fff 1px 1px 0px,
            #fff -1px 1px 0px,
            #fff 1px -1px 0px,
            #fff -1px -1px 0px,
            #fff 1px 1px 0px,
            #fff -1px 1px 0px,
            #fff 1px -1px 0px,
            #fff -1px -1px 0px,
            #fff 1px 1px 0px,
            #fff -1px 1px 0px,
            #fff 1px -1px 0px,
            #fff -1px -1px 0px;
    }

}


/* ---------------- comparison ---------------- */

#comparison .inner {
    padding: 0 0 5%;
}

.comparison-tbl {
    border-collapse: separate;
    border-spacing: 8px;
}

.comparison-tbl th,
.comparison-tbl td {
    vertical-align: middle;
    padding: 2%;
    font-weight: bold;
}

.comparison-tbl thead th {
    color: #0056a7;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding: 0;
}

.comparison-tbl thead th .logo-svg {
    width: 160px;
}

.comparison-tbl td {
    width: 23.6%;
}

.comparison-tbl thead th img {
    width: 150px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.comparison-tbl tbody th {
    text-align: center;
    padding: 1%;
}

.comparison-tbl tbody th img {
    width: 20px;
}

.comparison-tbl .cl01 {
    background: var(--blue-cl);
}

.comparison-tbl .cl01-2 {
    background: #d4eaff;
    color: #0056a7;
}

.comparison-tbl .cl02 {
    background: var(--green-cl);
}

.comparison-tbl .cl02-2 {
    background: #e4fff5;
    color: #009b5f;
}

.comparison-tbl .cl03 {
    background: var(--main-cl);
}

.comparison-tbl .cl03-2 {
    background: #ffe9a8;
    color: #ff8401;
}

.comparison-tbl .type01,
.comparison-tbl .type02,
.comparison-tbl .type03 {
    text-align: center;
}

.comparison-tbl .type01,
.comparison-tbl .type02 {
    vertical-align: top;
    padding-top: 5%;
}

.comparison-tbl td img {
    display: block;
    margin: 4% auto;
}

.comparison-tbl .icon {
    min-height: 128px;
}

.comparison-tbl .icon p {
    margin: 6% 0;
}

.comparison-tbl .icon+img {
    margin: 0% auto 8%;
}

.comparison-tbl .type01 {
    background: #e8f4ff;
}

.comparison-tbl .type02 {
    background: #f2fffa;
}

.comparison-tbl .type03 {
    background: #ffe6e6;
}

.comparison-tbl .type03 img {
    margin: 10% auto;
}

.comparison-tbl td .txt {
    font-size: 110%;
    font-weight: bold;
}

.comparison-tbl td .txt .cl {
    color: #0056a7;
    font-size: 90%;
    font-weight: bold;
}

.comparison-tbl td .fee {
    line-height: 1.3;
}

.comparison-tbl td .fee strong {
    font-size: 170%;
    color: var(--red-cl);
}

.comparison-txt {
    font-weight: bold;
    font-size: 22px;
    margin: 2% 0;
}

.comparison-txt strong {
    color: var(--red-cl);
    margin-top: 2%;
}

/* SP */
@media screen and (max-width: 736px) {

    .comparison-tbl {
        border-spacing: 4px;
        margin-top: -3%;
    }

    .comparison-tbl thead th {
        font-size: 3.6vw;
    }

    .comparison-tbl thead th .logo-svg {
        width: 19vw;
    }

    .comparison-tbl tbody th img {
        width: 3vw;
    }

    .comparison-tbl td img {
        width: 12vw;
    }

    .comparison-tbl th,
    .comparison-tbl td {
        padding: 1%;
        font-size: 2.6vw;
        letter-spacing: 0;
    }

    .comparison-tbl tbody th {
        padding: 3% 1%;
    }

    .comparison-tbl .icon+img {
        margin: 0% auto 20%;
        width: 3vw;
    }

    .comparison-tbl .icon {
        min-height: 18vw;
    }

    .comparison-tbl .icon p {
        margin: 10% 0 0;
        font-size: 10px;
        line-height: 1.2;
    }

    .comparison-tbl td .txt {
        font-size: 100%;
        margin-bottom: 2em;
    }

    .comparison-tbl td .txt .font-s {
        display: block;
    }

    .comparison-tbl td .fee strong {
        font-size: 140%;
    }

    .comparison-txt {
        font-size: 3.5vw;
        margin: 4% 0 6%;
    }
}


/* ---------------- implementation ---------------- */

#implementation {
    background: var(--bg1-cl);
    text-align: center;
    padding-bottom: 2%;
}

#implementation .cmn-ttl {
    line-height: 1.5;
}

#implementation .cmn-ttl .font-s {
    font-size: 70%;
    color: #0184ff;
}

#implementation .lead {
    background: #d4eaff;
    border-radius: 25px;
    text-align: center;
    padding: 3%;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 6%;
}

#implementation .case-hdr,
#implementation .case-flow {
    display: flex;
    justify-content: center;
}

#implementation .case-hdr>div {
    border: 4px solid #00334d;
}

#implementation .case-hdr .txt {
    margin-left: -4px;
    background: #00334d;
    text-align: center;
    width: 100%;
    line-height: 1.5;
}

#implementation .case-hdr .top {
    position: relative;
}

#implementation .case-hdr .top::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 44px;
    background: url(../img/case-line.svg) no-repeat;
    background-size: contain;
    position: absolute;
    top: 18px;
    left: 12%;
}

#implementation .case-hdr .top::after {
    content: '';
    display: inline-block;
    width: 28px;
    height: 44px;
    background: url(../img/case-line.svg) no-repeat;
    background-size: contain;
    position: absolute;
    top: 18px;
    right: 12%;
    transform: rotate(60deg);
}

#implementation .case-hdr .top p {
    background: #fff;
    font-size: 22px;
    font-weight: bold;
    padding: 6px;
}

#implementation .case-hdr h3 {
    color: #fff;
    font-size: 26px;
    font-weight: bold;
    padding: 10px;
}

.case-flow {
    align-items: center;
    margin: 3% 0 6%;
}

.case-flow .flow-item {
    position: relative;
    width: 20%;
    height: 0;
    background-size: contain;
    background-repeat: no-repeat;
}

.case-flow .flow-item.item-s {
    background-image: url(../img/case-flow-bg-s.png);
    padding-top: 15.57%;
}

.case-flow .flow-item.item-l {
    background-image: url(../img/case-flow-bg-l.png);
    padding-top: 21.15%;
}

.case-flow .flow-item ul {
    width: 100%;
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 10px;
    font-size: 20px;
}

.case-flow .arrow,
.case-flow .refresh {
    position: relative;
    width: 8%;
}

.case-flow .refresh {
    margin: 0 6px 0 -18px;
}

.case-flow .arrow::after {
    content: '';
    display: block;
    width: 30px;
    height: 25px;
    background: url(../img/case-arrow.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.case-flow .refresh::after {
    content: '';
    display: block;
    width: 70px;
    height: 54px;
    background: url(../img/implementation-refresh.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.case-flow>p {
    text-align: center;
    font-size: 24px;
}

#implementation .case-hdr .mgn-t {
    margin-top: 2%;
}

#implementation .bg-txt {
    display: block;
}

/* SP */
@media screen and (max-width: 736px) {

    #implementation .cmn-ttl .font-s {
        font-size: 80%;
    }

    #implementation .lead {
        border-radius: 12px;
        padding: 4% 0;
        font-size: 3.6vw;
        margin-bottom: 10%;
    }

    #implementation .case-hdr>div {
        border: 2px solid #00334d;
    }

    #implementation .case-hdr img {
        width: 100%;
    }

    #implementation .case-hdr .top p {
        font-size: 3.2vw;
        padding: 1vw;
        letter-spacing: 0;
    }

    #implementation .case-hdr h3 {
        font-size: 3.8vw;
        padding: 2.5vw 0;
    }

    #implementation .case-hdr .img {
        width: 28%;
    }

    #implementation .case-hdr .top::before {
        width: 14px;
        height: 24px;
        top: 2.6vw;
        left: 3vw;
    }

    #implementation .case-hdr .top::after {
        width: 14px;
        height: 24px;
        top: 2.6vw;
        right: 3vw;
    }

    .case-flow>p {
        font-size: 3.2vw;
    }

    #implementation .case-flow {
        justify-content: space-between;
        margin: 4% 0 8%;
    }

    .case-flow .flow-item.item-l {
        width: 25vw;
        padding-top: 29.25%;
    }

    .case-flow .flow-item.item-s {
        width: 25vw;
        padding-top: 21.47%;
    }

    .case-flow .flow-item ul {
        font-size: 2.8vw;
        margin: 2px 0 2px 4px;
    }

    .case-flow .arrow,
    .case-flow .refresh {
        width: 4%;
    }

    .case-flow .refresh {
        margin: 0 6px 0 -8px;
    }

    .case-flow .arrow::after {
        width: 16px;
        height: 14px;
    }

    .case-flow .refresh::after {
        width: 36px;
        height: 30px;
    }

    #implementation .case-hdr .mgn-t {
        margin-top: 4%;
    }

    #implementation .bg-txt {
        font-size: 3.8vw;
    }

}

/* ---------------- howto ---------------- */

#howto .ttl-line {
    font-size: 40px;
    font-weight: bold;
    margin-top: 2%;
}

.howto-list li {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.howto-list li .txt {
    text-align: left;
    font-size: 20px;
    padding-left: 4%;
}

.howto-list li h3 {
    text-align: left;
    font-size: 140%;
    font-weight: bold;
    margin-bottom: 4px;
}

.howto-list li strong {
    font-weight: bold;
}

.howto-list .arrow,
.howto-list .refresh {
    position: relative;
}

.howto-list .arrow::after {
    content: '';
    display: block;
    width: 24px;
    height: 30px;
    background: url(../img/solution-arrow.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    bottom: -22%;
    left: 7%;
}

.howto-list .refresh::after {
    content: '';
    display: block;
    width: 70px;
    height: 60px;
    background: url(../img/flow-refresh.png) no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -32%;
    left: 4.5%;
    z-index: 2;
}

.howto-list .refresh+li img {
    position: relative;
    top: -32px
}

.report {
    background: url(../img/dots-bg.png) repeat;
    padding-bottom: 2%;
    text-align: center;
}

.report-item {
    position: relative;
    padding: 3%;
    background: #fff;
    box-shadow: 2px 6px 8px 0px rgba(104, 104, 104, 0.4);
}

.report-item .icon {
    position: absolute;
    top: -14px;
    left: -4px;
}

.report-item table,
.report-item th,
.report-item td {
    border: 1px solid var(--txt-bk);
    border-collapse: collapse;
    vertical-align: middle;
}

.report-item th,
.report-item td {
    padding: 1% 1.5%;
    color: var(--txt-bk);
    font-size: 90%;
}

.report-item th {
    background: #e6e6e6;
}

.report-item thead th {
    text-align: center;
}

.report-item tbody th {
    width: 15%;
}

.report-item .disc-s-list {
    padding-left: 0.5vw;
}

.report-item .disc-s-list li {
    text-indent: -0.4vw;
    padding-left: 1vw;
    text-align: left;
}

.report-item .disc-s-list li::before {
    content: '';
    position: relative;
    top: -2px;
    left: -10px;
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background: var(--txt-bk);

}

/* SP */
@media screen and (max-width: 736px) {

    #howto .ttl-line {
        font-size: 6vw;
    }

    .howto-list li {
        margin-bottom: 8vw;
    }

    .howto-list li img {
        width: 22vw;
    }

    .howto-list li .txt {
        text-align: left;
        font-size: 3.4vw;
        padding-left: 3.5%;
    }

    .howto-list li h3 {
        font-size: 130%;
        margin-bottom: 2px;
    }

    .howto-list .arrow::after {
        width: 18px;
        height: 24px;
        bottom: -7.5vw;
        left: 8.6vw;
    }

    .howto-list .refresh::after {
        width: 45px;
        height: 35px;
        bottom: -8.2vw;
        left: 5vw;
    }

    .howto-list .refresh+li img {
        top: -15vw;
    }

    .howto-list li:last-child {
        margin-bottom: 2vw;
    }

    .report-item .icon {
        top: -1.5vw;
        left: 0vw;
        width: 17vw;
    }

    .report-item th,
    .report-item td {
        padding: 1.5%;
        font-size: 2.5vw;
        letter-spacing: 0;
    }

    .report-item td {
        width: 20%;
    }

    .report-item .disc-s-list li::before {
        left: -2px;
        width: 3px;
        height: 3px;
    }

    .report-item .disc-s-list li {
        text-indent: -1vw;
    }

}


/* ---------------- company ---------------- */

#company {
    text-align: center;
}

#company h3 {
    color: #c50a02;
    font-weight: bold;
    font-size: 22px;
    margin-top: -2%;
}

#company h3 .logo-svg {
    width: 320px;
    display: block;
    margin: 0 auto 6px;
}

#company .lead {
    margin: 3% 0 5%;
    font-size: 140%;
}

#company .lead strong {
    font-weight: bold;
    color: #c50a02;
    font-size: 120%;
    letter-spacing: 3px;
}

#company .lead b {
    font-size: 120%;
}

#company .member h4 {
    font-size: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

#company .member h4:before,
#company .member h4:after {
    content: "";
    flex-grow: 1;
    border-top: 5px dotted var(--sub-cl);
    display: block;
}

#company .member h4:before {
    margin-right: .5em;
}

#company .member h4:after {
    margin-left: .5em;
}

#company .member ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 6% 0 -1%;
    text-align: left;
}

#company .member li {
    background: var(--bg1-cl);
    border-radius: 24px;
    padding: 4% 5%;
    width: 48.5%;
    margin-bottom: 3%;
    color: var(--txt-bk);
}

#company .mb-hdr {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 5px dotted var(--sub-cl);
    padding-bottom: 20px;
}

#company .mb-hdr dl {
    width: 13em;
    padding-left: 1%;
}

#company .mb-hdr dt {
    font-size: 120%;
    font-weight: bold;
    margin-bottom: 4px;
}

#company .mb-hdr dd {
    font-size: 90%;
}

#company .member p {
    margin-top: 20px;
}

#company .think {
    background: #cc2822;
}

#company .think .ttl {
    margin: 2% auto 5%;
}

#company .think .txt-wrap {
    background: #fff;
    border-radius: 20px;
    padding: 5% 6%;
    text-align: left;
}

#company .think .txt-wrap p {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 2;
}

.company-tbl {
    color: var(--txt-bk);
    font-size: 20px;
}

.company-tbl th,
.company-tbl td {
    padding: 2% 1%;
    text-align: left;
}

.company-tbl th {
    font-weight: bold;
    width: 28%;
}

.company-tbl tr {
    border-bottom: 2px solid #777777;
}

/* SP */
@media screen and (max-width: 736px) {

    #company h3 {
        font-size: 3vw;
        margin-top: -5%;
    }

    #company h3 .logo-svg {
        width: 44vw;
    }

    #company .lead {
        margin: 5% 0 6%;
        font-size: 100%;
    }

    #company .member h4 {
        font-size: 5vw;
    }

    #company .member h4:before,
    #company .member h4:after {
        border-top: 4px dotted var(--sub-cl);
    }

    #company .mb-hdr {
        align-items: flex-end;
        padding-bottom: 8%;
        border-bottom: 4px dotted var(--sub-cl);
    }

    #company .mb-hdr img {
        width: 15vw;
    }

    #company .member li {
        border-radius: 14px;
        padding: 4% 3%;
        width: 49%;
        margin-bottom: 2.5%;
        color: var(--txt-bk);
    }

    #company .mb-hdr dl {
        padding-left: 4%;
        font-size: 2.8vw;
    }

    #company .mb-hdr dt {
        font-size: 126%;
        margin-bottom: 2px;
    }

    #company .mb-hdr dd {
        letter-spacing: 0;
    }

    #company .member p {
        font-size: 3.2vw;
        margin-top: 2vw;
    }

    #company .mb-hdr .pdb {
        padding-bottom: 4.5vw;
    }

    #company .think .ttl img {
        width: 52vw;
    }

    #company .think .ttl {
        margin: 2% auto 7%;
    }

    #company .think .txt-wrap p {
        margin-bottom: 0.8em;
        font-size: 3.6vw;
    }

    .company-tbl {
        font-size: 3.6vw;
        margin: -3% 0 3%;
    }

}

/* ---------------- plan ---------------- */

#plan {
    background: var(--bg1-cl);
    text-align: center;
}

#plan .lead {
    font-weight: bold;
    font-size: 26px;
}

#plan .lead strong {
    color: var(--red-cl);
}

#plan .plan-list {
    display: flex;
    margin: 6% 0 3%;
}

#plan .plan-list li {
    width: 26%;
    background: #fff;
}

#plan .plan-list h3 {
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1.3;
    padding-top: 10%;
    min-height: 86px;
}

#plan .beginner {
    border: 3px solid var(--blue-cl);
}

#plan .beginner h3 {
    background: var(--blue-cl);
}

#plan .standard {
    border: 3px solid var(--main-cl);
    transform: scale(1.04, 1.04);
}

#plan .standard h3 {
    background: var(--main-cl);
    padding: 4%;
    font-size: 134%;
}

#plan .standard h3 img {
    display: block;
    margin: 0 auto 4px;
    width: 120px;
    height: auto;
}

#plan .professional {
    border: 3px solid var(--green-cl);
}

#plan .professional h3 {
    background: var(--green-cl);
    padding: 6%;
}

#plan .custom {
    border: 3px solid #3e509b;
    margin-left: -3px;
}

#plan .custom h3 {
    background: #3e509b;
}

#plan .plan-list .box01,
#plan .plan-list .box02 {
    padding: 8% 2%;
    color: var(--txt-bk);
}

#plan .beginner .box01 {
    font-size: 22px;
    border-bottom: 4px dotted var(--blue-cl);
}

#plan .standard .box01 {
    font-size: 22px;
    border-bottom: 4px dotted var(--main-cl);
}

#plan .professional .box01 {
    font-size: 22px;
    border-bottom: 4px dotted var(--green-cl);
}

#plan .plan-list .box01 strong {
    font-size: 150%;
}

#plan .box02 h4 {
    font-size: 110%;
    font-weight: bold;
    line-height: 1.5;
}

#plan .beginner .box02 h4 {
    color: var(--blue-cl);
}

#plan .standard .box02 h4 {
    color: var(--main-cl);
}

#plan .professional .box02 h4 {
    color: var(--green-cl);
}

#plan .box02 p {
    line-height: 1.5;
    margin-top: 6%;
}

#plan .custom .box02 p {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-align: left;
    line-height: 2;
    display: flex;
    align-items: center;
    width: 100%;
}

#plan .note {
    color: var(--txt-bk);
    text-align: left;
}

/* SP */
@media screen and (max-width: 736px) {

    #plan .lead {
        font-size: 4vw;
        margin: -3% 0 6%;
    }

    #plan .plan-list {
        flex-direction: column;
    }

    #plan .plan-list li {
        width: 98%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }

    #plan .plan-list h3 {
        font-size: 3.2vw;
        min-height: auto;
        width: 32vw;
        display: flex;
        align-items: center;
        padding: 0;
        justify-content: center;
        flex-direction: column;
        letter-spacing: 1px;
    }

    #plan .beginner {
        border: 2px solid var(--blue-cl);
    }

    #plan .standard {
        border: 2px solid var(--main-cl);
    }

    #plan .professional {
        border: 2px solid var(--green-cl);
    }

    #plan .plan-list .custom {
        border: 2px solid #3e509b;
        margin-top: -2px;
    }

    #plan .beginner .box01 {
        border-bottom: 0;
        border-right: 2px dotted var(--blue-cl);
    }

    #plan .standard .box01 {
        border-bottom: 0;
        border-right: 2px dotted var(--main-cl);
    }

    #plan .professional .box01 {
        border-bottom: 0;
        border-right: 2px dotted var(--green-cl);
    }

    #plan .plan-list .box01,
    #plan .plan-list .box02 {
        padding: 4% 1%;
    }

    #plan .plan-list .box01 {
        font-size: 3vw;
        display: flex;
        align-items: center;
        padding: 0;
        justify-content: center;
        width: 28%
    }

    #plan .plan-list .box02 {
        font-size: 2.6vw;
        width: 34%
    }

    #plan .box02 p {
        line-height: 1.3;
    }

    #plan .standard h3 img {
        width: 18vw;
        margin-bottom: 4%;
    }

    #plan .custom .box02 {
        width: 64%;
    }

    #plan .custom .box02 p {
        -ms-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
        text-align: center;
        display: block;
        margin: 0;
        line-height: 1.6;
    }

    #plan .note {
        font-size: 2.6vw;
    }
}

/* ---------------- recommend ---------------- */

#recommend .cmn-ttl::before {
    content: '';
    display: inline-block;
    width: 29px;
    height: 38px;
    background: url(../img/recommend-line.svg) no-repeat;
    background-size: contain;
    margin-right: 2%;
    vertical-align: middle;
}

#recommend .cmn-ttl::after {
    content: '';
    display: inline-block;
    width: 29px;
    height: 38px;
    background: url(../img/recommend-line.svg) no-repeat;
    background-size: contain;
    margin-left: 2%;
    vertical-align: middle;
    transform: rotate(65deg);
}

.recommend-list {
    margin-top: 6%;
}

.recommend-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5%;
}

.recommend-list .balloon {
    position: relative;
    background: #ebf5ff;
    padding: 2% 4%;
    border-radius: 30px;
    width: 80%;
}

.recommend-list .balloon::after {
    content: '';
    display: inline-block;
    width: 83px;
    height: 59px;
    background: url(../img/recommend-arrow.png) no-repeat;
    background-size: contain;
    position: absolute;
    right: -9%;
    bottom: 16%;
}

.recommend-list .balloon p {
    margin: 0.8em 0;
    font-family: 'azuki';
    font-weight: bold;
    transform: rotate(0.03deg);
}

.recommend-list .img {
    margin-left: 3%;
}

.recommend-list li:nth-child(2) {
    flex-direction: row-reverse;
}

.recommend-list li:nth-child(2) .img {
    margin: 0 3% 0 0;
}

.recommend-list li:nth-child(2) .balloon::after {
    left: -9%;
    transform: scale(-1, 1);
}


/* SP */
@media screen and (max-width: 736px) {

    #recommend .cmn-ttl::before {
        width: 18px;
        height: 26px;
        margin-right: 3%;
    }

    #recommend .cmn-ttl::after {
        width: 18px;
        height: 26px;
        margin-left: 3%;
    }

    .recommend-list .img {
        margin-left: 4%;
    }

    .recommend-list .img>img {
        width: 26vw;
    }

    .recommend-list .balloon {
        padding: 2% 3.5%;
        border-radius: 18px;
        font-size: 3vw;
        letter-spacing: 0;
    }

    .recommend-list .balloon::after {
        width: 48px;
        height: 38px;
        right: -9vw;
        bottom: 10vw;
    }

    .recommend-list li:nth-child(2) .balloon::after {
        left: -9vw;
    }
}

/* ---------------- question ---------------- */

#question {
    background: url(../img/dots-bg.png) repeat;
    padding-bottom: 2%;
    text-align: center;
}

#question .acd-ttl img {
    vertical-align: middle;
    padding-right: 10px;
}

/* accordion */

.acd-wrap {
    position: relative;
    width: 100%;
    border-top: none;
    outline: 0;
    cursor: pointer;
    margin-bottom: 2%;
}

.acd-wrap .acd-ttl {
    display: block;
    position: relative;
    text-indent: -1.3em;
    padding: 1.8% 2% 2% 5%;
    color: #fff;
    background: var(--sub-cl);
    cursor: pointer;
    position: relative;
    border-radius: 20px;
    text-align: left;
}

.acd-wrap .acd-ttl:hover,
.acd-wrap .acd-ttl:active {
    background: #2b1057;
}

.acd-ttl:after {
    content: "";
    position: absolute;
    right: 25px;
    top: 38%;
    transition: all 0.2s ease-in-out;
    display: block;
    width: 12px;
    height: 12px;
    border-top: solid 2px var(--main-cl);
    border-right: solid 2px var(--main-cl);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.acd-ttl.open:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 45%;
}

.acd-cont {
    display: none;
    background: #fff;
    padding: 6% 4.5% 2.5%;
    text-align: left;
    border-radius: 20px;
    color: var(--txt-bk);
    margin-top: -40px;
}

/* SP */
@media screen and (max-width: 736px) {

    .acd-wrap {
        margin-bottom: 3.5%;
    }

    .acd-wrap .acd-ttl {
        text-indent: -1.6em;
        letter-spacing: 1px;
        border-radius: 10px;
        font-size: 3vw;
        padding: 1.2em 2em 1.2em 2.4em;
    }

    #question .acd-ttl img {
        vertical-align: middle;
        padding-right: 4px;
        width: 5vw;
    }

    .acd-ttl:after {
        right: 14px;
        top: 38%;
        width: 8px;
        height: 8px;
    }

    .acd-cont {
        padding: 7vw 5vw 3vw;
        font-size: 2.8vw;
        border-radius: 10px;
        margin-top: -5vw;
    }
}

/* ---------------- inquiry ---------------- */

#inquiry {
    background: #eee;
}

.inquiry-form {
    width: 80%;
    margin: -1% auto 0;
}

.inquiry-form * {
    word-break: break-all;
}

label,
input {
    display: block;
    font-size: 110%;
}

.inquiry-form input,
.inquiry-form textarea {
    border: 0;
    padding: 1.5%;
    width: 100%;
    border-radius: 0;
}

.inquiry-form label {
    font-weight: bold;
    font-size: 22px;
    margin: 20px 0 6px;
}

.inquiry-form label .font-s {
    font-weight: 500;
}

.inquiry-form label .required,
.inquiry-form input + .error,
.inquiry-form textarea + .error {
    color: var(--red-cl);
}

.inquiry-form input[type="submit"] {
    background: var(--sub-cl);
    padding: 2.5% 1%;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    width: 36%;
    border-radius: 100px;
    margin: 5% auto 2%;
    font-family: inherit;
    line-height: 1.2;
    transition: .3s;
}

.inquiry-form input[type="submit"]:hover {
    background: #3b1974;
}

.inquiry-form .back {
    background: #fff;
    border-radius: 32px;
    color: var(--sub-cl);
    display: block;
    font-family: inherit;
    font-weight: bold;
    line-height: 1.2;
    margin: 5% auto 2%;
    padding: 2.5% 1%;
    text-align: center;
    width: 24%;
}

.inquiry-form .complete {
    text-align: center;
}

/* SP */
@media screen and (max-width: 736px) {

    #inquiry .inner {
        padding: 8vw 0 9vw;
    }

    .inquiry-form label {
        font-size: 4vw;
        margin: 1em 0 0.2em;
    }

    .inquiry-form {
        width: 100%;
        margin: -2% auto 0;
    }

    .inquiry-form input[type="submit"] {
        padding: 3% 1% 3.5%;
        font-size: 5vw;
        width: 40%;
        margin: 6% auto 3%;
    }
}


/* ==============================================
  footer
============================================== */

#ftr-wrap {
    background: #140035;
    padding: 2% 1%;
    text-align: center;
}

.copyright {
    font-size: 70%;
    color: #fff;
    letter-spacing: 2px;
    font-family: 'Arial';
}

/* SP */
@media screen and (max-width: 736px) {

    .copyright {
        letter-spacing: 0.4px;
    }
}