@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@1,600&display=swap');

/******************* 全体 ********************/


body {
    position: relative;
    font-weight: 500;
    color: #333;
    font-size: 15px;
}


a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: #6CB7C1;
    text-decoration: none;
    opacity: 0.7;
}

#contents {
    padding: 0;
    letter-spacing: 1px;
}

p {
    font-size: 15px;
}

h1 {
    margin: 0;
}

h2 {
    font-size: 20px;
    color: #333;
    font-weight: 500;
    position: relative;
}

h2::before {
    content: '';
    position: absolute;
    bottom: -10px;
    display: inline-block;
    width: 60px;
    height: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #27acd9;
    border-radius: 2px;
}

h3 {
    font-weight: 500;
    font-size: 18px;
}

body,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
dl,
dt,
dd,
form,
figure {
    margin: 0;
    padding: 0
}

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

img {
    width: 100%;
}

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.tac {
    text-align: center;
}

.fwb {
    font-weight: 600;
}

.fs30 {
    font-size: 30px;
}

.h2-fs {
    font-size: 30px;
}

@media(max-width: 768px) {
    .h2-fs {
        font-size: 25px;
    }
}

.mt30 {
    margin-top: 30px;
}

.mb30 {
    margin-bottom: 30px;
}

.underline {
    padding: 0 10px;
}

.ds-sp {
    display: block;
}

@media(min-width:1000px) {
    .ds-sp {
        display: none;
    }
}

.ds-pc {
    display: none;
}

@media(min-width:1000px) {
    .ds-pc {
        display: block;
    }
}

.br-sp {
    display: none;
}

@media(max-width: 768px) {
    .br-sp {
        display: block;
    }
}

/* header */

header {
    background-color: #FFFFFF;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    width: 100%;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
}

.sp-navigation {
    display: none;
}

@media(max-width: 768px) {
    .navigation {
        display: none;
    }

    .sp-navigation {
        display: block;
    }
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 100;
    justify-content: flex-start;
}

@media(max-width: 768px) {
    .header__inner {
        justify-content: flex-start;
    }
}

.header__logo {
    position: relative;
}

.header__logo img {
    width: 85%;
    margin-top: 3px;
    margin-left: 25px;
}

@media(max-width: 768px) {
    .header__logo logo-sp img {
        width: 100%;
        margin-left: 10px;
        margin-right: 15px;
    }
}


.navi__inner {
    padding: 0;
    display: flex;
}

.navi__btn-wrap {
    display: flex;
    margin-left: 15px;
}

.navi__btn--doc > a {
    background-color: #FCB814;
    padding: 18px 5px 18px 42px;
}

.navi__btn--mail > a {
    background-color: #0072BC;
    padding: 18px 5px 18px 42px;
}

.navi__btn--demo > a {
    background-color: #005387;
    padding: 18px 5px 18px 42px;
}

.navi__btn > a {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    display: block;
    text-align: center;
    width: 150px;
    transition: all 0.2s ease;
    position: relative;
}

.navi__btn--doc > a:before {
    content: '';
    background: url(/images/dsb_news.png) no-repeat center/contain;
    width: 22.5px;
    height: 26px;
    left: 40px;
}

.navi__btn--mail > a:before {
    content: '';
    background: url(/images/dsb_seminer.png) no-repeat center/contain;
    width: 22.5px;
    height: 26px;
    left: 40px;
}

.navi__btn--demo > a:before {
    content: '';
    background: url(/images/dsb_demo.png) no-repeat center/contain;
    width: 22.5px;
    height: 26px;
    left: 40px;
}

.navi__btn > a:before {
    display: block;
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
}

/*769px以下navimenu*/
.sp-navigation--item-list {
    display: flex;
    align-items: center;
    width: 250px;
    margin-top: 5px;
}

.sp-navigation--item-list li {
    display: flex;
    width: calc(100% / 2);
}

.sp-navigation--item-list li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    font-size: 12px;
    text-align: center;
    letter-spacing: .02em;
}

.sp-navigation--item-list li .block-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    margin-bottom: 4px;
    padding: 3px;
    border-radius: 50%;
}

.sp-navigation--item-list li .block-img img {
    width: 18px;
}

.spnavi__btn--doc {
    background-color: #FCB814;
}

.spnavi__btn--mail {
    background-color: #0072BC;
}

.spnavi__btn--demo {
    background-color: #005387;
}

/* section全般 */

section {
    margin: 0 auto;
    width: 100%;
}


/* .s_1 */
.s_1 {
    width: 100%;
    background-color: #FFFFFF;
}

.top_visual {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #FFFFFF;
}

/*
.s_1 {
    width: 100%;
background-color: #FFF9BF;
}
.top_visual {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #FFF9BF;
}
*/

.top_visual img {
    width: 100%;
}


/* .s_2 .s_8 */
.s_2,
.s_9 {
    width: 100%;
    background-color: #E8F2EC;
}

/*- ボタンエリア
-------------------*/
.btn_area__inner {
    /*            width: 100%;*/
    padding: 5rem 1rem 2rem;
    margin: 0;
}

.btn_area__sub {
    /*            display: inline-block;*/
    font-size: 1.0rem;
    font-weight: normal;
    color: #324d5c;
    padding: 1px 16px;
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.btn_area__sub::before {
    content: "＼";
    /*            font-size: 1.0rem;*/
    font-weight: bold;
    color: var(--color-accent);

}

.btn_area__sub::after {
    content: "／";
    font-size: 1.0rem;
    font-weight: bold;
    color: var(--color-accent);
}

.btn_area__inner .btn {
    position: relative;
    display: block;
    width: 30%;
    font-size: 1.25rem;
    background-color: var(--color-white);
    text-align: center;
    color: #FFFFFF;
    ;
    background: rgb(35, 183, 188);
    background: linear-gradient(90deg, rgba(35, 183, 188, 1) 0%, rgba(38, 160, 202, 1) 50%, rgba(41, 137, 216, 1) 100%);
    padding: 1.25rem;
    font-weight: 600;
    border-radius: 40px;
    transition: all 0.4s ease;
    margin: 0 auto;
}

.btn_area__inner a {
    text-decoration: none;
}

span.iconimg {
    display: inline-block;
    width: 2rem;
    padding: 2px 6px 2px 2px;
}

span.iconimg img {
    vertical-align: sub;
}

span.iconimg {
    vertical-align: middle;
}

@media(max-width: 1600px) {
    .btn_area__inner .btn {
        width: 50%;
    }
}

@media(max-width: 800px) {
    .btn_area__inner .btn {
        width: 80%;
    }
}

@media(min-width: 768px) {

    /*ボタンエリア--------------*/
    .btn_area__inner {
        padding: 3rem 0;
    }
}

.spbr {
    display: none;
}

@media(max-width: 770px) {
    .spbr {
        display: block;
    }

    .btn_area__sub {
        top: -58px;
    }
}


.cta-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;

    padding-top: 3rem;
}

@media (max-width: 868px) {
    .cta-demo {
        flex-direction: column;
    }
}

.cta-demo div:first-child {
    padding: 0 2rem;
}

.cta-demo div p {
    font-size: 20px;
    color: #fff;
    font-weight: 600;
}

@media (max-width: 868px) {
    .cta-demo div p {
        font-size: 18px;
        padding-bottom: 10px;
    }
}

a.cta-demo_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin: 0 auto;
    padding: 1em 2em;
    overflow: hidden;
    border: none;
    border-radius: 50px;
    background-color: #FCB814;
    color: #FFF;
    font-weight: 600;
    font-size: 22px;
}

a.cta-demo_btn::before {
    display: block;
    position: absolute;
    top: -50%;
    left: -30%;
    transform: rotate(30deg);
    width: 70px;
    height: 100px;
    content: '';
    background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    animation: animation-button-10 2s infinite linear;
}

@keyframes animation-button-10 {
    17% {
        left: 120%;
    }

    100% {
        left: 120%;
    }
}

a.cta-demo_btn:hover {
    background-color: #FDC43B;
}

.btn_area {
    display: flex;
    width: 100%;
    margin: 0 auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media(max-width: 868px) {
    .btn_area {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

.btn_area li {
    padding: 2rem 1rem;
}

@media(max-width: 868px) {
    .btn_area li {
        width: 350px;
        padding: 1.5rem;
    }
}

.cvArea__btn {
    background-color: #fff;
    display: block;
    text-align: center;
    color: #333333 !important;
    padding: 30px 30px 30px 75px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 7px;
    text-decoration: none;
    position: relative;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    transition: all 0.2s ease !important;
}

@media(max-width: 868px) {
    .cvArea__btn {
        padding: 20px 30px 20px 75px;
    }
}

.cvArea__btn--present:before {
    content: '';
    width: 65px;
    height: 54px;
    background: url(/images/dsb_img01.png) no-repeat center/contain;
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
}

.cvArea__btn--mail:before {
    content: '';
    width: 70px;
    height: 55px;
    background: url(/images/dsb_img02.png) no-repeat center/contain;
    position: absolute;
    top: 52%;
    left: 5px;
    transform: translateY(-50%);
}

.cvArea__btn--demo:before {
    content: '';
    width: 68px;
    height: 41px;
    background: url(/images/dsb_img03.png) no-repeat center/contain;
    position: absolute;
    top: 50%;
    left: 7px;
    transform: translateY(-50%);
}

.cvArea__btn:after {
    content: '';
    width: 8px;
    height: 8px;
    border: 0;
    border-top: solid 3px #333;
    border-right: solid 3px #333;
    position: absolute;
    top: 48%;
    right: 15px;
    margin-top: -4px;
    transform: rotate(45deg);
}

/* .s_3 */
.s_3 {
    position: relative;
}

.s_3 .wrapper {
    max-width: 100%;

}

.s_3 h2 {
    text-align: center;
    padding-top: 60px;
    margin-bottom: 50px;
    font-weight: 600;
}

.overview {
    background: linear-gradient(#fff 0%, #fff 120px, #E8F2EC 120px, #E8F2EC 100%);
}

.p-point {
    max-width: 1200px;
    margin: 0 auto;

}

.p-point::before {
    position: absolute;
    content: "";
    background-image: url(/images/bg_semicircle-header.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    width: 100%;
    padding-bottom: 23%;
    top: 300px;
    left: 0;
}

.p-point-item {
    display: flex;
    justify-content: space-around;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    margin: 1rem auto;
}

@media(min-width: 769px) {
    .p-point-item {
        flex-direction: row;
    }
}

.p-point-item li {
    position: relative;
    width: 90%;
    margin-bottom: 30px;
}

@media(min-width: 769px) {
    .p-point-item li {
        width: calc((100% - 70px) / 3);
    }
}

.p-point__img {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding-bottom: 60%;
    border-radius: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.07);
}

@media(min-width: 769px) {
    .p-point__img {
        padding-bottom: 100%;
    }
}

.overview-image01 {
    background-image: url(/images/collection01.png);
    width: 60%;
    margin: 0 auto;
}

.overview-image02 {
    background-image: url(/images/collection02.png);
    width: 60%;
    margin: 0 auto;
}

.overview-image03 {
    background-image: url(/images/collection03.png);
    width: 60%;
    margin: 0 auto;
}

@media(min-width: 769px) {

    .overview-image01,
    .overview-image02,
    .overview-image03 {
        width: 100%;
    }
}

.overview-image01::before,
.overview-image02::before,
.overview-image03::before {
    content: "Point 01";
    color: #FFF;
    background: #0080CC;
    padding: .5rem 2rem;
    font-weight: 600;
    font-size: 18px;
    font-family: "Lexend Mega", sans-serif;
    position: absolute;
    left: 50%;
    top: 3%;
    transform: translateY(-50%) translateX(-50%);
}

.overview-image02::before {
    content: "Point 02";
}

.overview-image03::before {
    content: "Point 03";
}

.p-point__txt p {
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    line-height: 1.625;
    margin-top: 30px;
    margin-bottom: 10px;
}

/* .s_4 */
.s_4 {
    width: 100%;
    padding-bottom: 5rem;
    background: #FFF;
}

.s_4 h2 {
    text-align: center;
    padding-top: 60px;
    margin-bottom: 60px;
    font-weight: 600;
}

@media(max-width: 768px) {
    .s_4 h2 {
        padding-top: 30px;
        margin-bottom: 30px;
    }
}

@media(min-width: 1960px) {
    .s_4 h2 {
        padding-top: 100px;
    }
}

@media(min-width: 2200px) {
    .s_4 h2 {
        padding-top: 210px;
    }
}

.flow h2 {
    position: relative;
}

.flow-flexbox {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 1rem auto;
}

.flow-flexitem {
    width: 30%;
    border-radius: 24px;
    margin: 0 1rem;
    padding: 36px 30px 60px;
    background: #FFF;
}

@media(max-width: 768px) {
    .flow-flexitem {
        margin: 0 .3rem;
        padding: 16px 10px 60px;
        background: #FFF;
    }
}

.box-shoadow {
    box-shadow: 0px 0px 26px -9px #00426E;
}

.flow-flexitem h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.11em;
    padding-bottom: 10px;
    margin-bottom: 35px;
    position: relative;
}

.flow-flexitem:nth-child(1) h3::before {
    background-color: #1099EE;
}

.flow-flexitem:nth-child(2) h3::before {
    background-color: #0072BC;
}

.flow-flexitem:nth-child(3) h3::before {
    background-color: #005387;
}

.flow-flexitem h3::before {
    content: "";
    display: inline-block;
    position: absolute;
    height: 4.5px;
    width: 100%;
    bottom: 0;
}

.flow-flexitem:nth-child(1) h3 span {
    color: #1099EE;
    margin-right: 22px;
}

.flow-flexitem:nth-child(2) h3 span {
    color: #0072BC;
    margin-right: 22px;
}

.flow-flexitem:nth-child(3) h3 span {
    color: #005387;
    margin-right: 22px;
}

.flow-flexitem h3 span {
    font-size: 25px;
}

@media(max-width: 768px) {
    .flow-flexitem h3 span {
        font-size: 16px;
    }
}

.flow-flexitem:nth-child(1) .flow__step {
    background: linear-gradient(135deg, #87ccf6, #1099EE);
}

.flow-flexitem:nth-child(2) .flow__step {
    background: linear-gradient(135deg, #7fb8dd, #0072BC);
}

.flow-flexitem:nth-child(3) .flow__step {
    background: linear-gradient(135deg, #7fa9c3, #005387);
}

.flow-flexitem .flow__step.item01 {
    margin-bottom: 38px;
    opacity: 0;
    visibility: inherit;
    position: relative;
}

.flow-flexitem .flow__step.item04 {
    margin-top: 95px;
    margin-bottom: 38px;
    opacity: 0;
    visibility: inherit;
    position: relative;
}

.flow-flexitem .flow__step.item05 {
    margin-top: 250px;
    margin-bottom: 0;
    opacity: 0;
    visibility: inherit;
    position: relative;
}

.flow-flexitem .flow__step.item06 {
    margin-top: 598px;
    margin-bottom: 0;
    opacity: 0;
    visibility: inherit;
    position: relative;
}

.flow-flexitem .flow__step {
    padding: 30px 10px 16px 10px;
    border-radius: 10px;
    min-height: 120px;
    display: flex;
    justify-content: center;
    position: relative;
}

@media(max-width: 768px) {
    .flow-flexitem .flow__step {
        flex-direction: column;
        align-items: center;
    }
}

.flow-flexitem .flow__step img {
    width: 40%;
}

@media(max-width: 768px) {
    .flow-flexitem .flow__step img {
        width: 100%;
    }
}

.flow-flexitem .flow__step.item01::before {
    content: "1";
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: italic;
    font-size: 60px;
    color: #1D2B53;
    position: absolute;
    top: -45px;
    left: 15px;
}

.flow-flexitem .flow__step.item02::before {
    content: "2";
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: italic;
    font-size: 60px;
    color: #1D2B53;
    position: absolute;
    top: -45px;
    left: 15px;
}

.flow-flexitem .flow__step.item03::before {
    content: "2";
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: italic;
    font-size: 60px;
    color: #1D2B53;
    position: absolute;
    top: -45px;
    left: 15px;
}

.flow-flexitem .flow__step.item04::before {
    content: "3";
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: italic;
    font-size: 60px;
    color: #1D2B53;
    position: absolute;
    top: -45px;
    left: 15px;
}

.flow-flexitem .flow__step.item05::before {
    content: "5";
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: italic;
    font-size: 60px;
    color: #1D2B53;
    position: absolute;
    top: -45px;
    left: 15px;
}

.flow-flexitem .flow__step.item06::before {
    content: "6";
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: italic;
    font-size: 60px;
    color: #1D2B53;
    position: absolute;
    top: -45px;
    left: 15px;
}

.flow-flexitem .flow__step::before {
    content: "";
    display: inline-block;
    position: absolute;
    background: no-repeat center / contain;
    height: 61.2px;
    width: 35px;
    top: -28px;
    left: 24px;
}

.flow-flexitem .flow__step.item01 p {
    position: relative;
}

.flow-flexitem .flow__step p {
    padding: 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
}

@media(max-width: 768px) {
    .flow-flexitem .flow__step p {
        font-size: 14px;
        padding: 5px 0;
    }
}

.flow-flexitem .flow__step.item01 p::before {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(/images/dsb_shop.png) no-repeat center / contain;
    width: 190px;
    height: 120px;
    top: -150px;
    right: -25px;
}

.flow-flexitem .flow__step.item02 p::before {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(/images/dsb_teacher.png) no-repeat center / contain;
    width: 190px;
    height: 120px;
    top: -120px;
    right: -15px;
}

.flow-flexitem .flow__step.item03 p::before {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(/images/dsb_guardian.png) no-repeat center / contain;
    width: 190px;
    height: 120px;
    top: -120px;
    right: -37px;
}


.flow-flexitem .flow__step.item01::after,
.flow-flexitem .flow__step.item02::after {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(/images/collection08.svg) no-repeat center / contain;
    width: 387px;
    height: 30px;
    right: -386px;
}

.flow-flexitem .flow__step.item03::after {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(/images/collection07.png) no-repeat center / contain;
    width: 410px;
    height: 317px;
    bottom: -240px;
    left: -400px;
}

.flow-flexitem .flow__step.item05::after {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(/images/dsb_delivery.png) no-repeat center / contain;
    width: 95px;
    height: 105px;
    right: -94px;
}

.itemDemo {
    position: relative;
}

.itemDemo a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 120px;
    height: 120px;
    border: solid 3px #1D2B53;
    background: #2DACC9;
    color: #FFF;
    font-weight: 600;
    border-radius: 50%;
    box-shadow: 0px 0px 36px -9px #859bc7;
    padding: 1rem;
    position: absolute;
    right: -15px;
    top: -35px;
    transition-duration: .4s;
}

.itemDemo a img {
    width: 70px;
    margin-bottom: 5px;
}

.itemDemo a:hover {
    background: #1CB5B7;
    opacity: 1;
    transform: scale(1.1);
}

.s_4 .flow .ds-sp {
    position: relative;
}

.s_4 .flow .ds-sp .itemDemo {
    position: absolute;
    top: 32%;
    ;
    right: 5%;
}

.s_4 .flow .ds-sp .itemDemo a {
    width: 80px;
    height: 80px;
    font-size: 10px;
}

.s_4 .flow .ds-sp .itemDemo a img {
    width: 40px;
}

.fadeInAnime500ms {
    animation-name: fadeIn500ms;
}

.fadeIn500ms {
    animation-delay: 500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(-50px);
    opacity: 0;
}

@keyframes fadeIn500ms {
    0% {}

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.fadeInAnime1s {
    animation-name: fadeIn1s;
}

.fadeIn1s {
    animation-delay: 1s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(-50px);
    opacity: 0;
}

@keyframes fadeIn1s {
    0% {}

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.fadeInAnime1500ms {
    animation-name: fadeIn1500ms;
}

.fadeIn1500ms {
    animation-delay: 1500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(50px);
    opacity: 0;
}

@keyframes fadeIn1500ms {
    0% {}

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.fadeInAnime2s {
    animation-name: fadeIn2s;
}

.fadeIn2s {
    animation-delay: 2s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(-50px);
    opacity: 0;
}

@keyframes fadeIn2s {
    0% {}

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

.fadeInAnime2500ms {
    animation-name: fadeIn2500ms;
}

.fadeIn2500ms {
    animation-delay: 2500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(-50px);
    opacity: 0;
}

@keyframes fadeIn2500ms {
    0% {}

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.fadeInAnime3s {
    animation-name: fadeIn3s;
}

.fadeIn3s {
    animation-delay: 3s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(50px);
    opacity: 0;
}

@keyframes fadeIn3s {
    0% {}

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



/* .s_5 */
.s_5 {
    width: 100%;
    padding-bottom: 5rem;
    background: #E8F2EC;
}

.s_5 h2 {
    text-align: center;
    padding-top: 60px;
    margin-bottom: 60px;
    font-weight: 600;
}

@media(max-width: 768px) {
    .s_5 h2 {
        padding-top: 30px;
        margin-bottom: 30px;
    }
}

.worries_box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

@media(max-width: 1080px) {
    .worries_box {
        justify-content: center;
    }
}

.worries_box .worries-case-box {
    width: 48%;
    background: #ffffff;
    border-radius: 20px;
    margin: 1rem .5rem 5rem;
    margin-bottom: 3rem;
    box-shadow: 0px 0px 19px 1px #cdcdcd;
    display: flex;
    flex-wrap: wrap;
}

@media(max-width: 1199px) {
    .worries_box .worries-case-box {
        width: 45%;
        margin-bottom: 1.5rem;
    }
}

@media(max-width: 769px) {
    .worries_box .worries-case-box {
        width: 95%;
    }
}

.worries_ttl {
    padding: 0 2rem;
    box-sizing: border-box;
    width: 100%;
}

p.case-ttl {
    background: #27acd9;
    color: #fff;
    display: table;
    border-radius: 50px;
    padding: 0.5rem 2.4rem;
    position: relative;
    top: -15px;
    font-weight: bold;
    font-size: 1.0rem;
    letter-spacing: 0.10rem;
    line-height: 1;
    margin: 0 auto;
}

.worries_ttl h3 {
    color: #27acd9;
    margin: 1rem auto;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    text-align: center;
}

.ttl_br {
    display: none;
}

@media(max-width: 1080px) {
    .worries_ttl h3 {
        margin: .5rem auto 1rem;
        min-height: 60px;
        text-align: center;
        font-size: 18px;
    }
}

@media(max-width: 769px) {
    .ttl_br {
        display: block;
    }
}

.worries_voice {
    padding: 0 1rem 1rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
}

@media(max-width: 1080px) {
    .worries_voice {
        justify-content: space-around;
    }
}

.worries_voice .col-txt {
    width: 60%;
    text-align: left;
    position: relative;
    background: #FFFFFF;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #0072BC;
    color: #666666;
    font-size: 13px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    margin-right: 2%;
}

.worries_voice .col-txt:after,
.worries_voice .col-txt:before {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    left: 100%;
    top: 50%;
}

.worries_voice .col-txt:before {
    border-color: rgba(0, 196, 115, 0);
    border-top-width: 8px;
    border-bottom-width: 8px;
    border-left-width: 8px;
    border-right-width: 8px;
    margin-top: -8px;
    margin-left: 0px;
    border-left-color: #0072BC;
}

.worries_voice .col-txt:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 7px;
    border-right-width: 7px;
    margin-top: -7px;
    border-left-color: #FFFFFF;
}

.worries_voice .col-img img {
    width: 75%;
}

.worries_voice .col-img {
    width: 35%;
    text-align: center;
}

@media(max-width: 1080px) {
    .worries_voice .col-img {
        width: 45%;
    }
}

@media(max-width: 769px) {
    .worries_voice .col-img {
        width: 33%;
    }
}

.worries_voice:after {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    border-color: rgba(255, 255, 255, 0);
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 10px;
    border-right-width: 10px;
    margin-left: -10px;
    border-top-color: #FFFFFF;
    top: 100%;
    left: 50%;
}

.solution {
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
    background: #76BCC5;
    color: #ffffff;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    min-height: 150px;
}

.solution h3 {
    font-weight: 600;
    border-bottom: 1px dotted;
    padding-bottom: .2rem;
    text-align: center;
}

.solution p {
    font-weight: 600;
    line-height: 1.7;
    text-align: left;
    padding-top: .2rem;
}


/*　.s_6 */
.s_6 {
    background: #FFF;
    padding-bottom: 5rem;
}

.s_6 h2 {
    padding-top: 60px;
    text-align: center;
    font-weight: 600;
}

.p-time {
    display: flex;
    justify-content: space-evenly;
    margin-top: 5rem;
}

@media(max-width:1000px) {
    .p-time {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

.p-time div {
    background: #E8F2EC;
    padding: 2rem;
    border-radius: 20px;
    width: 400px;
    max-width: 100%;
    text-align: center;
    box-shadow: 15px 15px 1px -7px #B7D6C4;
    position: relative;
    z-index: 1;
}

@media(max-width:1000px) {
    .p-time div {
        margin-bottom: 5rem;
    }
}

@media(max-width:869px) {
    .p-time div {
        width: 350px;
        padding: 1rem;
    }
}

.p-time div:first-child::after {
    position: absolute;
    bottom: -85px;
    left: -62px;
    content: url(/images/collection04.png);
    display: block;
    z-index: 100;
}

@media(max-width:869px) {
    .p-time div:first-child::after {
        content: none;
    }
}

.p-time div:nth-child(2)::after {
    position: absolute;
    bottom: -65px;
    right: -89px;
    content: url(/images/collection05.png);
    display: block;
    z-index: 100;
}

@media(max-width:869px) {
    .p-time div:nth-child(2)::after {
        content: none;
    }
}

.p-time__ex {
    margin-bottom: 1.5rem;
    padding-bottom: 8px;
    font-weight: 600;
    font-size: 24px;
    border-bottom: dotted 2px #269AC2;
    text-align: center;
}

@media(max-width:869px) {
    .p-time__ex {
        font-size: 20px;
    }
}

.p-time__ex span {
    background: #269AC2;
    margin-left: 3px;
    margin-right: 3px;
    padding: 4px 5px;
    border-radius: 5px;
    color: #FFF;
}

.p-time div ul {
    text-align: left;
    display: inline-block;
}

.p-time div ul li {
    margin-bottom: 15px;
    position: relative;
    padding-left: 2em;
    font-size: 18px;
}

@media(max-width:869px) {
    .p-time div ul li {
        font-size: 16px;
    }
}

.p-time div ul li::before {
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    position: absolute;
    font-size: 18px;
    left: 0;
    top: -1px;
    color: #F6CF6A;
    font-weight: 900;
    background: #FFF;
    border: solid 2px #B7D6C4;
    border-radius: 50%;
}


.p-time li img {
    width: 100%;
}


.p-time__bold {
    font-weight: 600;
    font-size: 18px;
}

.p-time__catch {
    margin-top: 8rem;
    padding: 1rem;
}

.underline2 {
    background: linear-gradient(transparent 60%, #F6CF6A 60%);
    padding: 0 15px;
}

@media(max-width:869px) {
    .p-time__catch {
        margin-top: 2rem;
    }
}

.p-time__catch p {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
}

@media(max-width:869px) {
    .p-time__catch p {
        font-size: 20px;
    }
}

/*　.s_7 */
.s_7 {
    width: 100%;
    padding-bottom: 5rem;
    background: #E8F2EC;
}

.s_7 h2 {
    text-align: center;
    padding-top: 60px;
    margin-bottom: 60px;
    font-weight: 600;
}

.p-casestudy {
    display: flex;
    justify-content: center;
}

@media(max-width:869px) {
    .p-casestudy {
        flex-direction: column;
        align-items: center;
    }
}

.p-casestudy li {
    width: 35%;
    margin: 2rem;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

@media(max-width:869px) {
    .p-casestudy li {
        width: 90%;
        margin: 1rem;
    }
}

.p-casestudy li img {
    width: 289px;
    margin: 1rem auto 0;
    display: block;
}

@media(max-width:869px) {
    .p-casestudy li img {
        margin: 0 auto;
    }
}

.p-casestudy__item_txt {
    padding: 1rem 1.5rem;
}

.p-casestudy__item_txt p:first-child {
    text-align: center;
    padding-bottom: 1rem;
    font-weight: 600;
    font-size: 18px;
}

@media(max-width:869px) {
    .p-casestudy__item {
        display: flex;
        align-items: center;
    }

    .p-casestudy__item_img {
        width: 30%;
    }

    .p-casestudy li img {
        width: 150px;
    }
}

.p-select {
    display: flex;
    justify-content: space-between;
    margin-top: 8rem;
}

@media(max-width:1199px) {
    .p-select {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 0;
    }
}

.p-select li {
    width: 24%;
    background-color: #F7FCFF;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

@media(max-width:1199px) {
    .p-select li {
        width: 40%;
        margin: 8rem 1.5rem 0;
    }
}

@media(max-width:500px) {
    .p-select li {
        width: 90%;
    }
}

.p-select__point {
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    color: #269AC2;
    text-align: center;
    z-index: 2;
}

@media(max-width:869px) {
    .p-select__point {
        font-size: 15px;
    }
}

.p-select__img {
    width: 28%;
    margin: -5rem auto 1rem;
    padding: 2rem;
    background: #269AC2;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;

}

@media(max-width:1199px) {
    .p-select__img {
        width: 24%;
    }
}

@media(max-width:869px) {
    .p-select__img {
        width: 18%;
    }
}

@media(max-width:500px) {
    .p-select__img {
        width: 15%;
    }
}

.p-select__txt p {
    margin-top: 1rem;
    padding: 0 1rem 1.2rem;
    font-size: 15px;
}


/*　.s_8 */
.s_8 {
    width: 100%;
    padding-bottom: 5rem;
}

@media(max-width:869px) {
    .s_8 {
        padding-bottom: 3rem;
    }
}

.s_8 h2 {
    text-align: center;
    padding-top: 60px;
    margin-bottom: 60px;
    font-weight: 600;
}

@media(max-width:869px) {
    .s_8 h2 {
        padding-top: 30px;
        margin-bottom: 30px;
    }
}

.Box04 {
    width: 96%;
    margin: 2rem auto 0;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    background: #fff;
}

.Box05-1 {
    border-left: 5px solid #5F698D;
    border-right: 5px solid #5F698D;
    border-top: 5px solid #5F698D;
    background: #6791A7;
    color: #fff;
}

.Box05-2 {
    border-left: 5px solid #5F698D;
    border-right: 5px solid #5F698D;
    background: #6791A7;
    color: #fff;
}

.Box05-3 {
    border-left: 5px solid #5F698D;
    border-right: 5px solid #5F698D;
    border-bottom: 5px solid #5F698D;
    background: #6791A7;
    color: #fff;
}

.tal {
    text-align: left;
}

.fcw {
    color: #fff;
}

.s_15 {
    width: 100%;
    padding-bottom: 5rem;
    background: #E8F2EC;
}

@media(max-width:869px) {
    .s_15 {
        padding-bottom: 3rem;
    }
}

.s_15 h2 {
    text-align: center;
    margin-top: 30px;
    font-weight: 600;
}

.pctable {
    width: 1000px;
    border-collapse: collapse;
    border: 2px solid #000;
    font-size: 15px;
    margin: 10px auto;
    background: #fff;
}

.pctable td {
    display: table-cell;
    padding: 3px;
    line-height: 2;
    border: 1px solid #000;
    font-size: 1.2rem;
}

.sptable {
    display: none;
}

@media(max-width:1200px) {

    .pctable,
    .Box04 {
        width: 98%;
    }

    .Box04 {
        margin-top: 30px;
    }
}

@media(max-width: 800px) {
    .Box04 {
        width: 89%;
    }

    .Box04 p {
        line-height: 1.5;
        font-size: 15px;
    }

    .pctable {
        display: none;
    }

    .table_box {
        display: block;
        overflow-x: auto;
        margin: 0 1rem;
    }

    .table_box::-webkit-scrollbar {
        width: 10px;
        height: 6px;
    }

    .table_box::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 5px;
    }

    .table_box::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 5px;
    }

    .table_box::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    .sptable {
        display: block;
        width: 1000px;
        border-collapse: collapse;
        border: 2px solid #000;
        font-size: 15px;
        margin: 10px auto;
        background: #fff;
    }

    .sptable td {
        display: table-cell;
        padding: 3px;
        line-height: 2;
        border: 1px solid #000;
        font-size: 1.2rem;
    }

    .sptable th {
        white-space: nowrap;
    }

}


/*　.s_9 */
.s_9 p {
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    text-align: center;
    padding-top: 2rem;
}

@media(max-width:500px) {
    .s_9 p {
        font-size: 23px;
    }
}

/*　.s_10 */
.s_10 {
    width: 100%;
    background-color: #23B8BC;
}

.tel-inner {
    margin: 0 auto;
    padding: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media(max-width:869px) {
    .tel-inner {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

.tel-inner li {
    font-size: 16px;
    margin: 0 15px;
    color: #fff;
}

@media(max-width:869px) {
    .tel-inner li:nth-child(2) {
        margin-top: 30px;
    }
}

.tel-tit {
    position: relative;
    padding: 20px 20px 20px 70px;
    border-radius: 7px;
    border: 1px solid #FFF;
    font-weight: 600;
    max-width: 380px;
}

.tel-tit:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -27px;
    margin-top: -10px;
    border: 10px solid transparent;
    border-left: 18px solid #23B8BC;
    z-index: 2;
}

@media(max-width:869px) {
    .tel-tit:before {
        top: 110%;
        right: 50%;
        border: 10px solid transparent;
        border-top: 20px solid #23B8BC;
    }
}

.tel-tit p {
    text-align: center;
}

.tel-tit p:before {
    content: '';
    width: 42px;
    height: 42px;
    display: block;
    background: url(/images/dsb_tel.png) no-repeat center/contain;
    background-size: 70%;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 15px;
}

.tel-tit:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    margin-top: -10px;
    border: 10px solid transparent;
    border-left: 20px solid #FFF;
    z-index: 1;
}

@media(max-width:869px) {
    .tel-tit:after {
        top: 112%;
        right: 50%;
        border: 10px solid transparent;
        border-top: 20px solid #FFF;
    }
}

.tel-tit span {
    font-weight: 100;
    font-size: 13px;
}

.tel-charge {
    font-size: 15px;
    margin-bottom: 10px;
}

@media(max-width:869px) {
    .tel-charge {
        text-align: center;
    }
}

.tel-num {
    font-size: 46px;
    line-height: 0.8;
    font-weight: 600;
}

@media(max-width:869px) {
    .tel-num {
        font-size: 36px;
        text-align: center;
    }
}

@media(max-width:509px) {
    .tel-num {
        font-size: 26px;
        text-align: center;
    }
}

/*　.s_11,newspage */
.s_11,
.dsb_news {
    width: 100%;
    background-color: #F5F5F5;
    padding-bottom: 3rem;
}

.dsb_news {
    background-color: #F1F2F6;
}

.s_11 h2,
.dsb_news h2 {
    text-align: center;
    padding-top: 60px;
    margin-bottom: 60px;
    font-weight: 600;
    font-size: 30px;
}

@media(max-width:869px) {

    .s_11 h2,
    .dsb_news h2 {
        padding-top: 30px;
        margin-bottom: 30px;
    }
}

.s_11 ul,
.dsb_news ul {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 2rem;
}

.s_11 .entry,
.dsb_news .entry {
    position: relative;
    margin-bottom: 12px;
}

.s_11 .entry .news-category,
.dsb_news .entry .news-category {
    position: absolute;
    top: 18px;
    left: 16px;
    z-index: 1;
}

.news-category a {
    display: block;
    width: 144px;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    text-align: center;
    line-height: 32px;
}

.news-category.information a {
    background: #0072BC;
}

.news-category.update a {
    background: #fcaf3c;
}

.s_11 .entry > a,
.dsb_news .entry > a {
    display: flex;
    position: relative;
    padding: 20px 32px 20px 184px;
    background: #fff;
    border-radius: 8px;
    -webkit-box-shadow: 6px 10px 12px 0px rgba(40, 47, 60, .05);
    box-shadow: 6px 10px 12px 0px rgba(40, 47, 60, .05);
    color: #282f3c;
}

@media(max-width:869px) {

    .s_11 .entry > a,
    .dsb_news .entry > a {
        flex-direction: column;
    }
}

.s_11 .entry .date,
.dsb_news .entry .date {
    margin-right: 54px;
    color: #868d9d;
    white-space: nowrap;
}

.s_11 .entry .new,
.dsb_news .entry .new {
    margin-right: 15px;
    color: #ff4147;
    font-weight: 700;
}

.s_11 .entry > a::after,
.dsb_news .entry > a::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #324D5C;
    border-right: 2px solid #324D5C;
    -webkit-transform: translate(0, -50%) rotate(45deg);
    transform: translate(0, -50%) rotate(45deg);
    -webkit-transition: .2s ease;
    transition: .2s ease;
}

.s_11 .newsBtn a {
    background: #324D5C;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 200px;
    padding: 13px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}

.s_11 .newsBtn a:hover {
    background: #313131;
    color: #FFF;
}

.s_11 .newsBtn a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}

.s_11 .newsBtn a:hover:after {
    border-color: #FFF;
}

/* s_12 */
.s_12 {
    width: 100%;
    padding-bottom: 5rem;
}

@media(max-width:869px) {
    .s_12 {
        padding-bottom: 3rem;
    }
}

.s_12 h2 {
    text-align: center;
    padding-top: 60px;
    margin-bottom: 60px;
    font-weight: 600;
}

@media(max-width:869px) {
    .s_12 h2 {
        padding-top: 30px;
        margin-bottom: 30px;
    }
}

.grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 300px);
    justify-content: center;
}

.plan_free::before {
    content: "e-shopsPay 専用プラン";
    position: absolute;
    top: -25px;
    left: 41px;
    background: #fff;
    border: solid 3px #0D78BE;
    border-radius: 20px;
    color: #0D78BE;
    font-size: 14px;
    padding: 5px 15px;
}

@media(max-width:1300px) {
    .grid {
        grid-template-columns: repeat(2, 350px);
    }

    .plan_free::before {
        top: -25px;
        left: 70px;
    }
}

@media(max-width:1100px) {
    .grid {
        grid-template-columns: repeat(2, 300px);
    }

    .plan_free::before {
        top: -25px;
        left: 44px;
    }
}

@media(max-width:650px) {
    .grid {
        grid-template-columns: repeat(1, 350px);
    }

    .plan_free::before {
        top: -27px;
        left: 63px;
        font-size: 14px;
        padding: 7px 20px;
    }
}

.grid li {
    list-style: none;
    text-align: center;
    padding: 1rem;
}

.free {
    background: #6292C2;
    border-radius: 8px;
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
    padding: 5px
}

.price-table_free {
    background: #fff;
    border-radius: 8px;
}

.plan_free {
    background: #6292C2;
    color: #fff;
    font-weight: 600;
    position: relative;
}

.standard {
    background: #E5387F;
    border-radius: 8px;
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
    padding: 5px
}

.price-table_standard {
    background: #fff;
    border-radius: 8px;
}

.plan_standard {
    background: #E5387F;
    color: #fff;
    font-weight: 600;
}

.business {
    background: #88C780;
    border-radius: 8px;
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
    padding: 5px
}

.price-table_business {
    background: #fff;
    border-radius: 8px;
}

.plan_business {
    background: #88C780;
    color: #fff;
    font-weight: 600;
}

.expert {
    background: #EFA92A;
    border-radius: 8px;
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
    padding: 5px
}

.price-table_expert {
    background: #fff;
    border-radius: 8px;
}

.plan_expert {
    background: #EFA92A;
    color: #fff;
    font-weight: 600;
}

.plan_title {
    font-size: 1rem;
    font-weight: bold;
    color: #0a2b4a;
}

.box-number {
    color: #0a2b4a;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 45px;
}

.item li:nth-child(2n) {
    background-color: #f8f8f8;
}

/* デザイン集 */
.dsb_design {
    width: 100%;
    margin: 3rem auto 5rem;
}

.dsb_design .wrapper div {
    padding: 1rem;
}

.dsb_design h1 {
    font-weight: 600;
    font-size: 30px;
    text-align: center;
    position: relative;
    margin-bottom: 4rem;
}

.dsb_design h1:before {
    content: '';
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 60px;
    height: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #F9BE00;
    border-radius: 3px;
}

.dsb_design h2 {
    font-weight: bold;
    margin: .2em;
    padding: 0.5em 1.8em;
    border: 3px solid #F9BE00;
    overflow: hidden;
    position: relative;
}

.dsb_design h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    border-width: 25px 25px 0 0;
    border-style: solid;
    border-color: #F9BE00 #fff #F9BE00;
}

.dsb_design h3 {
    font-weight: bold;
    border-bottom: 3px solid #e3e3e3;
    padding: 0.3em;
    margin-bottom: 0.3em;
    position: relative;
}

.dsb_design h3::after {
    content: '';
    background-color: #ffaf58;
    width: 4em;
    height: 3px;
    position: absolute;
    bottom: -3px;
    left: 0;
    z-index: 1;
}

.dsb_design h4 {
    margin-top: 1em;
    margin-bottom: .8em;
    padding: 0.5em;
    color: #494949;
    background: #fffaf4;
    border-left: solid 5px #ffaf58;
}

.mokuji {
    border-radius: 3px;
    background-color: #f2f2f2;
    width: 50%;
    margin: 0 auto 30px;
}

@media(max-width: 768px) {
    .mokuji {
        width: 80%;
    }
}

.mokuji div {
    background-color: #FFE2A5;
}

.mokuji div p {
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    color: #324D5C;
}

.mokuji .fa-list {
    margin-right: 3px;
    font-size: 1.1em;
}

.mokuji ol {
    list-style-type: decimal;
    margin: 0;
    overflow: hidden;
}

.mokuji > ol {
    padding: 1em 1em 1em 3em;
}

.mokuji ol ol {
    margin-top: 5px;
    padding-left: 1.1em;
}

.mokuji li {
    padding: 5px 0;
    font-weight: 600;
}

.mokuji ol ol li {
    font-weight: 500;
    font-size: .9em;
}

.howto-box {
    margin: 2em;
}

@media(max-width: 768px) {
    .howto-box {
        margin: .3em 10px;
        padding: 0 !important;
    }
}

.dsb_design .code-area {
    list-style: none;
    width: 100%;
    margin: 0 auto;
}

.dsb_design .code-area li {
    margin: 1rem 0;
    list-style: none;
}

.dsb_design .code-area section {
    border: 1px solid #999999;
    border-radius: 10px;
    width: 100%;
    margin: 0;
}

.dsb_design .code_title {
    cursor: pointer;
    position: relative;
    font-size: 1.1em !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 1% 1% 1% 50px;
    transition: all .5s ease;
    color: #333;
}

.dsb_design .code_title span {
    display: inline-block;
    width: 90%;
    position: relative;
}

@media screen and (min-width : 769px) {
    .dsb_design .code_title span {
        width: 95%;
    }
}

.dsb_design .code_title::before,
.dsb_design .code_title::after {
    position: absolute;
    content: '';
    width: 15px;
    height: 2px;
    background-color: #333;

}

.dsb_design .code_title::before {
    top: 48%;
    right: 20px;
    transform: rotate(0deg);

}

.dsb_design .code_title::after {
    top: 48%;
    right: 20px;
    transform: rotate(90deg);
}

.dsb_design .code_title.close::before {
    transform: rotate(45deg);
}

.dsb_design .code_title.close::after {
    transform: rotate(-45deg);
}

.dsb_design .code_box {
    display: none;
    padding: 3% !important;
    ;
}

.dsb_design .code_box div {
    position: relative;
}

.dsb_design .code_box div {
    padding: 0 !important;
}

.dsb_design .code_box .prehtml code,
.dsb_design .code_box .csspre code {
    display: block;
    padding: 20px;
    word-wrap: normal;
    font-family: Menlo, Monaco, Consolas, "CourierNew", monospace;
}

.where {
    user-select: none;
    -ms-user-select: none;
    font-size: 12px;
    position: absolute;
    background: #4C9AC0;
    color: #fff;
    line-height: 1em;
    padding: 2px 5px;
    z-index: 99999;
    font-family: Arial, sans-serif;
}

.precss .wherecss {
    background: #f89174;
}

.prehtml code {
    font-size: 15px;
    color: #555555;
    background: #dcf6ff;
}

.precss .csspre code {
    background: #f7f7f7;
    white-space: pre-line;
}

.code_box code {
    font-size: 15px;
    color: #555555;
    background: #dcf6ff;

}

.design-pattern {
    width: 70%;
    margin: 0 auto;
}

@media(max-width: 768px) {
    .design-pattern {
        width: 95%;
    }
}

.boxdefault {
    width: 300px;
}

.boxdefault p {
    margin: 0;
    padding: 0;
}

.comment {
    color: #C1C1C1;
}

.textbox {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #e6ddeb;
}

.imgbox {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #e6ddeb;
}

.imgbox img {
    display: block;
    margin: 0 auto;
    width: 200px;
}

.box1 {
    display: flex;
    justify-content: center;
    width: 500px;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #e6ddeb;
}

.box2 {
    width: 400px;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #e6ddeb;
}

.box2 img {
    width: 200px;
}

.box3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #e6ddeb;
}

.box3 img {
    width: 200px;
}

#otherdesign #no6 .textbox p {
    font-weight: bold;
    color: #D60050;
}

#otherdesign #no7 .textbox p {
    font-size: 20px;
}

#otherdesign #no8 .textbox a {
    color: #5892E8 !important;
}

#otherdesign #no9 .textbox {
    border-radius: 10px;
}

#otherdesign #no10 .textbox {
    border: solid 2px #333;
}



/*　footer */

.footerinfo {
    background: #fff;
    padding: 50px;
}

.footerinfo p {
    font-size: 13px;
    line-height: 1.3;
}

.footerinfo p a {
    text-decoration: none;
}

.logoGroup {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dsb_logo {
    width: 250px;
    margin: 1rem;
}

.carts_logo {
    width: 182px;
    margin: 1rem;
}

.vertical_line {
    margin-left: 1rem;
    margin-right: 1rem;
    width: 1px;
    background-color: #ccc;
}

.copyright {
    padding-top: 20px;
    text-align: center;
    color: #C1C1C1;
}

/*　横スクロール時の矢印 */
.arrow {
    margin: 1rem;
}

.arrow p {
    margin: 0;
    padding-left: 5px;
    font-weight: bold;
}

.arrow span {
    display: block;
    width: 100px;
    height: 2px;
    background-color: #0072BC;
    ;
    position: relative;
    transform: scale(0, 1);
    transform-origin: top left;
    animation: arrow01 5s ease-in-out infinite forwards;
}

@keyframes arrow01 {
    0% {
        transform: scale(0, 1);
    }

    30% {
        transform: scale(0, 1);
    }

    40% {
        transform: scale(1, 1);
    }

    85% {
        transform: scale(1, 1);
        opacity: 1;
    }

    90% {
        transform: scale(1, 1);
        opacity: 0;
    }

    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
}

.arrow span::after {
    content: "";
    display: block;
    width: 8px;
    height: 15px;
    border-right: 2px solid #0072BC;
    ;
    transform: rotate(-45deg) scale(1, 0);
    transform-origin: right bottom;
    position: absolute;
    bottom: 2px;
    right: 1px;
    animation: arrow02 5s ease-in-out infinite forwards;
}

@keyframes arrow02 {
    0% {
        transform: rotate(-45deg) scale(1, 0);
    }

    45% {
        transform: rotate(-45deg) scale(1, 0);
    }

    55% {
        transform: rotate(-45deg) scale(1, 1);
    }

    85% {
        transform: rotate(-45deg) scale(1, 1);
        opacity: 1;
    }

    90% {
        transform: rotate(-45deg) scale(1, 1);
        opacity: 0;
    }

    100% {
        transform: rotate(-45deg) scale(1, 1);
        opacity: 0;
    }
}



/* ページトップへの戻り */

.totop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}

.totop a {
    display: block;
    text-decoration: none;
}

.totop img {
    background: #324D5C;
}

.totop img:hover {
    background: #324D5C;
}

/*パンくず*/
.breadcrumb {
    display: flex;
    gap: 0 15px;
    list-style: none;
    padding: 15px 0 0 15px;
    font-size: 1em;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:first-child::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    content: '';
}

.breadcrumb li:not(:last-child)::after {
    display: inline-block;
    transform: rotate(45deg);
    width: .3em;
    height: .3em;
    margin-left: 10px;
    border-top: 1px solid #333333;
    border-right: 1px solid #333333;
    content: '';
}

.breadcrumb a {
    color: #333333;
    text-decoration: none;
}