.glide {
    position: relative;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.glide * {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

.glide__slides,
.glide__track {
    overflow: hidden
}

.glide__slides {
    position: relative;
    width: 100%;
    list-style: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -ms-touch-action: pan-Y;
    touch-action: pan-Y;
    padding: 0;
    white-space: nowrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    will-change: transform
}

.glide__slide,
.glide__slides--dragging {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.glide__slide {
    width: 100%;
    height: 100%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    white-space: normal;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

.glide__slide a {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -ms-user-select: none
}

.glide__arrows,
.glide__bullets {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.glide--rtl {
    direction: rtl
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: transparent;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

::-moz-selection {
    color: #000;
    background: #f3d552
}

::selection {
    color: #000;
    background: #f3d552
}

a {
    text-decoration: none;
    color: #000
}

pre {
    white-space: pre-wrap;
    margin: 0
}

html {
    -webkit-font-smoothing: antialiased
}

body {
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    color: #000;
    font-weight: 400;
    line-height: 2.5;
    letter-spacing: .08em;
    background-color: #fff
}

@media (min-width:768px) {

    .br-sp,
    .display-sp {
        display: none
    }

    body {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 15px
    }
}

@media (max-width:768px) {

    .br-pc,
    .display-pc {
        display: none
    }

    body {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw
    }
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

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

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

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

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

@media (min-width:768px) {
    footer {
        min-width: 1185px;
        position: relative;
        z-index: 2;
        background-color: #000;
        padding: 100px 0 0
    }

    footer,
    footer a {
        color: #fff
    }

    footer .footer-menu {
        width: 1185px;
        margin: 0 auto;
        padding: 0 30px
    }

    footer .footer-menu,
    footer .footer-menu .footer-menu-flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    footer .footer-menu .footer-menu-flex {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 45%
    }

    footer .footer-menu .footer-menu-flex .footer-menu-flex-block {
        width: 45%
    }

    footer .footer-menu .footer-menu-others:before {
        content: "\3000";
        display: block;
        font-size: 20px;
        line-height: 1em;
        letter-spacing: .1em;
        margin-bottom: 50px
    }

    footer .footer-menu li {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 20px;
        line-height: 1;
        letter-spacing: .1em;
        margin-bottom: 60px
    }

    footer .footer-menu li a {
        display: block;
        position: relative;
        margin-bottom: 50px
    }

    footer .footer-menu li a:hover {
        color: #747474
    }

    footer .footer-menu li a:before {
        content: "";
        position: absolute;
        bottom: -25px;
        left: 0;
        width: 40px;
        height: 2px;
        background-color: #fff;
        pointer-events: none
    }

    footer .footer-menu .sub-menu-0 li {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 15px;
        line-height: 1.5;
        letter-spacing: .1em;
        margin-bottom: 13px
    }

    footer .footer-menu .sub-menu-0 li a {
        display: block;
        padding-bottom: 0;
        margin-bottom: 0
    }

    footer .footer-menu .sub-menu-0 li a:before {
        content: none
    }

    footer .footer-menu .sub-menu-0 li .sub-menu-1 {
        margin-top: 20px
    }

    footer .footer-menu .sub-menu-0 li .sub-menu-1 li {
        text-indent: 1em
    }

    footer .footer-info {
        width: 1185px;
        margin: 0 auto;
        padding: 25px 0;
        border-top: 1px solid #fff;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 11px;
        line-height: 1;
        letter-spacing: .1em;
        text-align: center
    }
}

@media (max-width:768px) {
    footer {
        position: relative;
        z-index: 2;
        background-color: #000;
        padding-top: 5.33333vw
    }

    footer,
    footer a {
        color: #fff
    }

    footer .footer-menu {
        margin: 0 5.33333vw
    }

    footer .footer-menu .footer-menu-flex .parent:first-of-type a {
        border-top: 1px solid #ccc
    }

    footer .footer-menu .parent {
        z-index: 1;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 4.8vw;
        line-height: 1.5;
        letter-spacing: .1em;
        position: relative
    }

    footer .footer-menu .parent:first-of-type a {
        border-top: none
    }

    footer .footer-menu .parent a {
        pointer-events: none;
        display: block;
        padding: 4vw 6.66667vw 4vw 0;
        width: 100%;
        height: 100%;
        border-top: 1px solid #ccc;
        position: relative
    }

    footer .footer-menu .parent a:after,
    footer .footer-menu .parent a:before {
        content: "";
        display: block;
        position: absolute;
        background-color: #fff;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 5.33333vw;
        height: .8vw
    }

    footer .footer-menu .parent a:after {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transition: -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: transform .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1)
    }

    footer .footer-menu .parent .sub-menu-0 {
        overflow: hidden;
        height: 0
    }

    footer .footer-menu .parent .sub-menu-0 .child {
        z-index: 2;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        line-height: 1.5;
        letter-spacing: .1em;
        border-bottom: none;
        position: relative
    }

    footer .footer-menu .parent .sub-menu-0 .child a {
        pointer-events: auto;
        display: block;
        padding: 4vw 0;
        width: 100%;
        height: 100%;
        border-top: 1px solid #333;
        position: relative
    }

    footer .footer-menu .parent .sub-menu-0 .child a:after,
    footer .footer-menu .parent .sub-menu-0 .child a:before {
        content: none
    }

    footer .footer-menu .parent .sub-menu-0 .child:first-of-type a {
        border-top: 1px solid #ccc
    }

    footer .footer-menu .parent.active a:after {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    footer .footer-menu .parent.active .sub-menu-0 {
        height: 100%
    }

    footer .footer-menu .footer-menu-others {
        display: none
    }

    footer .footer-info {
        border-top: 1px solid #ccc;
        margin: 0 5.33333vw;
        padding: 5.33333vw 0 13.33333vw;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 2vw;
        line-height: 1;
        letter-spacing: .1em
    }
}

@media (min-width:768px) {
    header {
        z-index: 3;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-width: 1185px;
        margin: auto
    }

    header .header-inner {
        max-width: 1350px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0 auto;
        height: 78px
    }

    header .header-inner h1 {
        background: url(/wp-content/themes/di-system/assets/image/header_logo.svg) top/contain no-repeat scroll;
        width: 152px;
        height: 34px;
        margin-left: 30px;
        font-size: 0;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden
    }

    header .header-inner h1 a {
        display: block;
        width: 100%;
        height: 100%
    }

    header .header-inner h1:hover {
        opacity: .5
    }

    header .header-inner .menu-trigger-base,
    header .header-inner .menu-trigger-off,
    header .header-inner .menu-trigger-on {
        display: none
    }

    header .header-inner .menu-nav {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-right: 30px;
        font-size: 0;
        line-height: 0;
        letter-spacing: 0
    }

    header .header-inner .menu-nav .main-menu {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }

    header .header-inner .menu-nav .main-menu,
    header .header-inner .menu-nav .main-menu li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    header .header-inner .menu-nav .main-menu li {
        position: relative;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 13px;
        line-height: 1;
        letter-spacing: .1em;
        margin-right: 20px
    }

    header .header-inner .menu-nav .main-menu li.inquiry-menu {
        height: auto
    }

    header .header-inner .menu-nav .main-menu li.inquiry-menu a {
        border: 2px solid #000;
        padding: 10px 25px
    }

    header .header-inner .menu-nav .main-menu li.inquiry-menu a:hover {
        opacity: 1;
        background-color: #000;
        color: #fff
    }

    header .header-inner .menu-nav .main-menu li:last-of-type {
        margin-right: 0
    }

    header .header-inner .menu-nav .main-menu li a {
        position: relative;
        display: block;
        color: #000
    }

    header .header-inner .menu-nav .main-menu li a:hover {
        opacity: .5
    }
}

@media (max-width:768px) {
    header {
        z-index: 3;
        background-color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 13.33333vw;
        margin: auto
    }

    header h1 {
        z-index: 5;
        position: absolute;
        top: 4vw;
        left: 2.66667vw;
        background: url(/wp-content/themes/di-system/assets/image/header_logo.svg) top/contain no-repeat scroll;
        width: 31.2vw;
        height: 6.93333vw;
        font-size: 0;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden
    }

    header h1 a {
        display: block;
        width: 100%;
        height: 100%
    }

    header .menu-trigger-base {
        z-index: 2;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    header .menu-trigger-on {
        z-index: 4;
        position: absolute;
        top: -10vw;
        right: 4vw;
        width: 7.46667vw;
        height: 6vw;
        -webkit-transition: top .5s cubic-bezier(.19, 1, .22, 1);
        transition: top .5s cubic-bezier(.19, 1, .22, 1);
        background: url(/wp-content/themes/di-system/assets/image/menu_trigger_on.svg) top/contain no-repeat scroll
    }

    header .menu-trigger-on.active {
        top: 3.73333vw
    }

    header .menu-trigger-off {
        z-index: 3;
        position: absolute;
        top: 3.2vw;
        right: -10.93333vw;
        width: 6.93333vw;
        height: 6.93333vw;
        -webkit-transition: right .5s cubic-bezier(.19, 1, .22, 1);
        transition: right .5s cubic-bezier(.19, 1, .22, 1);
        background: url(/wp-content/themes/di-system/assets/image/menu_trigger_off.svg) top/contain no-repeat scroll
    }

    header .menu-trigger-off.active {
        right: 4vw
    }

    header .menu-nav {
        z-index: 1;
        position: absolute;
        top: -100vh;
        right: 0;
        background-color: #000;
        padding-top: 13.33333vw;
        width: 100%;
        height: 100vh;
        -webkit-transition: top .5s cubic-bezier(.19, 1, .22, 1);
        transition: top .5s cubic-bezier(.19, 1, .22, 1)
    }

    header .menu-nav.active {
        top: 0
    }

    header .menu-nav .main-menu {
        margin: 6.66667vw
    }

    header .menu-nav .main-menu li {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 4.8vw;
        line-height: 1.5;
        letter-spacing: .1em;
        position: relative
    }

    header .menu-nav .main-menu li a {
        color: #fff;
        display: block;
        padding: 4vw 6.66667vw 4vw 0;
        width: 100%;
        height: 100%;
        border-bottom: 1px solid #4c4c4c;
        position: relative
    }
}

@media (min-width:768px) {
    main {
        position: relative;
        z-index: 1
    }
}

@media (min-width:768px) {
    .archive-wrapper {
        position: relative;
        margin: 130px auto 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        max-width: 1350px;
        min-width: 1185px;
        padding: 0 30px
    }

    .archive-wrapper .getting-ready {
        width: 100%;
        text-align: center;
        padding: 15% 0;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 25px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .2em
    }

    .archive-wrapper .archive-main {
        z-index: 1;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding-left: 240px;
        position: relative
    }

    .archive-wrapper .archive-main .archive-main-head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .archive-wrapper .archive-main .archive-main-head.no-image {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        width: 100%;
        min-height: 180px;
        padding: 60px;
        color: #fff;
        background-color: #707d69
    }

    .archive-wrapper .archive-main .archive-main-head.no-image .archive-main-head-text-desc {
        margin-top: 10px;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 2;
        letter-spacing: .2em
    }

    .archive-wrapper .archive-main .archive-main-head .archive-main-head-image {
        background: grey;
        width: 425px;
        height: 425px
    }

    .archive-wrapper .archive-main .archive-main-head .archive-main-head-text {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 0 60px 0 100px
    }

    .archive-wrapper .archive-main .archive-main-head .archive-main-head-text .archive-main-head-text-desc {
        text-align: justify;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        line-height: 2.85;
        letter-spacing: .1em
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list {
        border-bottom: 1px solid #f2f2f2;
        padding: 45px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list a {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        font-size: 0;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list:hover {
        background-color: #f3d552
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list:hover .archive-main-body-list-head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list:hover .archive-main-body-list-head .archive-main-body-list-icon.system {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_system_on.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list:hover .archive-main-body-list-head .archive-main-body-list-icon.network {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_network_on.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list:hover .archive-main-body-list-head .archive-main-body-list-icon.platform {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_platform_on.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list:hover .archive-main-body-list-head .archive-main-body-list-icon.microsoft {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_microsoft_on.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list:hover .archive-main-body-list-head .archive-main-body-list-icon.security {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_security_on.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list:hover .archive-main-body-list-head .archive-main-body-list-icon.sales {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_sales_on.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list:hover .archive-main-body-list-head .archive-main-body-list-icon.education {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_education_on.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list:hover .archive-main-body-list-head .archive-main-body-list-icon.stress {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_stress_on.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon {
        display: block;
        background: url(/wp-content/themes/di-system/assets/image/news_icon_news.png) 50%/contain no-repeat scroll;
        width: 40px;
        height: 40px
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.news {
        background: url(/wp-content/themes/di-system/assets/image/news_icon_news.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.media {
        background: url(/wp-content/themes/di-system/assets/image/news_icon_media.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.training {
        background: url(/wp-content/themes/di-system/assets/image/news_icon_training.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.ir {
        background: url(/wp-content/themes/di-system/assets/image/news_icon_ir.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.system {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_system.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.network {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_network.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.platform {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_platform.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.microsoft {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_microsoft.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.security {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_security.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.sales {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_sales.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.education {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_education.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.stress {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_stress.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 386px;
        height: 90px;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 25px;
        line-height: 1.6;
        letter-spacing: .1em;
        padding: 0 30px;
        word-break: normal
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-title.no-icon {
        padding-left: 0;
        width: 424px
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-title.news {
        font-size: 15px;
        width: inherit
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-desc {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding: 0 30px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        line-height: 2;
        letter-spacing: .1em;
        border-left: 2px solid #000
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-desc.news {
        display: inline;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 20px
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-desc.pdf:after {
        content: "";
        display: inline-block;
        position: relative;
        top: 7px;
        background: url(/wp-content/themes/di-system/assets/image/news_icon_pdf.png) 50%/contain no-repeat scroll;
        width: 24px;
        height: 29px;
        margin-left: 10px
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-arrow {
        background-color: #000;
        width: 50px;
        height: 50px;
        position: relative
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-arrow:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: 3px 0 3px 12px
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-ex-link {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-left: 90px
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-ex-link a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 290px;
        height: 60px;
        border: 2px solid #f3d552;
        background-color: #f3d552;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .05em;
        text-indent: 1em;
        position: relative;
        margin: 80px 86px 0 0
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-ex-link a:hover {
        opacity: 1;
        background: none;
        border: 2px solid #f3d552
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-ex-link a:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #000;
        border-style: solid;
        border-width: 2px 0 2px 12px
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-pagenation {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-family: Times New Roman, serif;
        font-size: 14px;
        line-height: 1;
        letter-spacing: 0;
        width: 100%;
        margin-top: 100px
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-pagenation li {
        width: 42px;
        height: 42px;
        border: 1px solid #000;
        margin-right: 10px
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-pagenation li:last-of-type {
        margin-right: 0
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-pagenation li a,
    .archive-wrapper .archive-main .archive-main-body .archive-main-pagenation li span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 100%
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-pagenation li a.current,
    .archive-wrapper .archive-main .archive-main-body .archive-main-pagenation li span.current {
        color: #fff;
        background-color: #000
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-pagenation li a:hover {
        background-color: #f3d552
    }
}

@media (max-width:768px) {
    .archive-wrapper {
        position: relative
    }

    .archive-wrapper .getting-ready {
        width: 100%;
        text-align: center;
        padding: 15% 0;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 6.66667vw;
        line-height: 1.3;
        letter-spacing: .2em;
        margin-top: 13.33333vw
    }

    .archive-wrapper .archive-main {
        z-index: 1;
        position: relative
    }

    .archive-wrapper .archive-main .archive-main-head.no-image {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        color: #fff;
        background-color: #707d69;
        width: 100%;
        min-height: 56.66667vw;
        margin-top: 13.33333vw;
        padding: 6.66667vw
    }

    .archive-wrapper .archive-main .archive-main-head.no-image .archive-main-head-text-desc {
        text-align: justify;
        margin-top: 1.33333vw;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        font-weight: 700;
        line-height: 2;
        letter-spacing: .1em
    }

    .archive-wrapper .archive-main .archive-main-head .archive-main-head-image {
        width: 100%;
        height: 56.66667vw;
        margin-top: 13.33333vw
    }

    .archive-wrapper .archive-main .archive-main-head .archive-main-head-text {
        margin: 10vw 6.66667vw 0;
        text-align: center
    }

    .archive-wrapper .archive-main .archive-main-head .archive-main-head-text .archive-main-head-text-desc {
        margin: 6vw 0 0;
        text-align: justify;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        line-height: 2;
        letter-spacing: .1em
    }

    .archive-wrapper .archive-main .archive-main-body {
        margin: 13.33333vw 6.66667vw 24vw
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list {
        border-bottom: 1px solid #f2f2f2;
        padding: 0 0 13.33333vw;
        margin-bottom: 13.33333vw
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-bottom: 1px solid #000;
        padding-bottom: 4.66667vw;
        margin-bottom: 5.33333vw
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon {
        background: url(/wp-content/themes/di-system/assets/image/news_icon_news.png) 50%/contain no-repeat scroll;
        width: 7.73333vw;
        height: 9.86667vw
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.news {
        background: url(/wp-content/themes/di-system/assets/image/news_icon_news.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.media {
        background: url(/wp-content/themes/di-system/assets/image/news_icon_media.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.training {
        background: url(/wp-content/themes/di-system/assets/image/news_icon_training.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.ir {
        background: url(/wp-content/themes/di-system/assets/image/news_icon_ir.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.system {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_system.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.network {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_network.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.platform {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_platform.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.microsoft {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_microsoft.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.security {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_security.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.sales {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_sales.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.education {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_education.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-icon.stress {
        background: url(/wp-content/themes/di-system/assets/image/archive_main_list_icon_stress.png) 50%/contain no-repeat scroll
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-title {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 6.66667vw;
        line-height: 1.3;
        letter-spacing: .1em;
        padding-left: 6.66667vw
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-head .archive-main-body-list-title.no-icon {
        padding: 0
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-desc {
        text-align: justify;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        line-height: 2;
        letter-spacing: .1em
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-desc.pdf:after {
        content: "";
        display: inline-block;
        position: relative;
        top: 1.33333vw;
        background: url(/wp-content/themes/di-system/assets/image/news_icon_pdf.png) 50%/contain no-repeat scroll;
        width: 5.33333vw;
        height: 5.33333vw;
        margin-left: 1.33333vw
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list .archive-main-body-list-arrow {
        display: none
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list a {
        margin-top: 8vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #000;
        width: 60vw;
        height: 13.33333vw;
        color: #fff;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 4vw;
        line-height: 1;
        letter-spacing: .1em;
        text-indent: 1em;
        position: relative
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-lists .archive-main-body-list a:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: .53333vw 0 .53333vw 2.93333vw
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-ex-link {
        border-bottom: 1px solid #f2f2f2;
        padding: 0 0 13.33333vw;
        margin-bottom: 13.33333vw
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-ex-link a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 73.33333vw;
        height: 14.66667vw;
        background-color: #f3d552;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 4.26667vw;
        line-height: 1;
        letter-spacing: .1em;
        text-indent: 1em;
        position: relative
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-ex-link a:first-of-type {
        margin-bottom: 7.33333vw
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-body-ex-link a:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #000;
        border-style: solid;
        border-width: .53333vw 0 .53333vw 2.93333vw
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-pagenation {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-family: Times New Roman, serif;
        font-size: 5.2vw;
        line-height: 1;
        letter-spacing: 0;
        width: 100%;
        margin-bottom: 13.33333vw
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-pagenation li {
        border-right: 1px solid #000;
        padding: 0 5.33333vw
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-pagenation li:first-of-type {
        padding: 0 5.33333vw 0 0
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-pagenation li:last-of-type {
        border-right: none;
        padding: 0 0 0 5.33333vw
    }

    .archive-wrapper .archive-main .archive-main-body .archive-main-pagenation li .current {
        color: #f3d552
    }
}

@media (min-width:768px) {
    .form-wrapper {
        position: relative;
        margin: 100px auto 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        max-width: 1350px;
        min-width: 1185px
    }

    .form-wrapper .form-main {
        z-index: 1;
        position: relative;
        width: 100%
    }

    .form-wrapper .form-main .form-main-head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 180px;
        background-color: #707d69;
        color: #fff
    }

    .form-wrapper .form-main .form-main-body {
        width: 640px;
        margin: 80px auto;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        line-height: 2.5;
        letter-spacing: .1em;
        text-align: justify
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .red {
        color: red
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 50px;
        min-height: 50px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p.inline {
        display: inline-block;
        margin-bottom: 50px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p.error-message {
        display: block;
        min-height: 0;
        margin-bottom: 0;
        font-size: 15px;
        letter-spacing: .12em;
        line-height: 3;
        font-weight: 700;
        text-align: left
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p.error-message .error {
        display: block;
        color: red
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p.error-message .error:last-of-type {
        margin-bottom: 60px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p label {
        width: 190px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 50px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        word-break: break-all
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text input[type=email],
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text input[type=text],
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text select,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text textarea {
        font-size: 14px;
        line-height: 2;
        letter-spacing: .1em;
        text-indent: 1em;
        margin: 0;
        padding: 0;
        background: none;
        border: 1px solid #b2b2b2;
        border-radius: 0;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        min-height: 50px;
        width: 100%;
        display: block
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text select {
        position: relative;
        z-index: 3;
        width: 225px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .jobobjective,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .jobstatus,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .locationwrap,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .statevalue {
        display: block;
        width: 225px;
        position: relative
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .jobobjective:before,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .jobstatus:before,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .locationwrap:before,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .statevalue:before {
        z-index: 1;
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 5px;
        margin: auto;
        width: 40px;
        height: 40px;
        background-color: #f3d552
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .jobobjective:after,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .jobstatus:after,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .locationwrap:after,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .statevalue:after {
        z-index: 2;
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 17px;
        margin: auto;
        width: 14px;
        height: 24px;
        background: url(/wp-content/themes/di-system/assets/image/form_select.svg) 50%/contain no-repeat scroll
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.radio {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.radio .mwform-radio-field {
        margin-right: 40px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.radio .mwform-radio-field label {
        width: inherit
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.birth {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.birth .mwform-birth-year {
        width: 120px;
        margin-left: 10px;
        margin-right: 10px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.birth .mwform-birth-day,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.birth .mwform-birth-month {
        width: 60px;
        margin-left: 30px;
        margin-right: 10px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .college,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .school {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .college .collegename,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .college .schoolname,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .school .collegename,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .school .schoolname {
        width: 100px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .college input,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .school input {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .school {
        margin-bottom: 50px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .city,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .state,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .zip {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .city .cityname,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .city .statename,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .city .zipname,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .state .cityname,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .state .statename,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .state .zipname,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .zip .cityname,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .zip .statename,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .zip .zipname {
        width: 100px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .zip {
        margin-bottom: 50px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .zip input {
        width: 225px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .state {
        margin-bottom: 50px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .city input {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text textarea {
        height: 250px;
        padding: 1em;
        text-indent: 0
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom: 20px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-ad {
        width: 120px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career1-end-year,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career1-start-year,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career2-end-year,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career2-start-year,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career3-end-year,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career3-start-year {
        width: 120px;
        margin-right: 10px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career1-end-month,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career1-start-month,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career2-end-month,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career2-start-month,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career3-end-month,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career3-start-month {
        width: 60px;
        margin-left: 20px;
        margin-right: 10px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.amount {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.amount input {
        width: 140px;
        margin: 0 10px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.work-start {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.work-start .mwform-work-start-day,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.work-start .mwform-work-start-month {
        width: 60px;
        margin-right: 10px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.work-start .mwform-work-start-day {
        margin-left: 30px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .mwform-tel-field {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .mwform-tel-field input {
        width: inherit;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin: 0 10px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .mwform-tel-field input:first-of-type {
        margin-left: 0
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .mwform-tel-field input:last-of-type {
        margin-right: 0
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p.note {
        font-size: 14px;
        line-height: 2;
        letter-spacing: .1em;
        margin-bottom: 50px;
        text-align: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy {
        overflow-y: scroll;
        border: 1px solid #b2b2b2;
        height: 400px;
        padding: 50px;
        margin-bottom: 50px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy ol,
    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy p,
    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy ul {
        display: block;
        margin-bottom: 30px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy h1,
    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy h2 {
        font-weight: 700
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy .privacy-ol {
        list-style-type: decimal;
        padding-left: 1.5em
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy .privacy-ol .privacy-ol-sub {
        padding-left: 3.5em;
        list-style-type: decimal
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy dl a {
        text-decoration: underline
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .checkbox-field {
        min-height: 0;
        margin-bottom: 50px;
        line-height: 1
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .checkbox-field .mwform-checkbox-field,
    .form-wrapper .form-main .form-main-body .mw_wp_form form .checkbox-field .mwform-checkbox-field label {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .checkbox-field .mwform-checkbox-field label {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .submit-area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .submit-area button {
        cursor: pointer;
        display: block;
        padding: 0;
        border-radius: 0;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        color: #000;
        font-size: 15px;
        font-weight: 700;
        line-height: 56px;
        background: #f3d552;
        width: 290px;
        height: 60px;
        margin: 0;
        position: relative;
        border: 2px solid #f3d552
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .submit-area button:hover {
        opacity: 1;
        background: none;
        border: 2px solid #f3d552
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .submit-area .mwform-confirm {
        text-align: left;
        text-indent: 1em
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .submit-area .mwform-confirm:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #000;
        border-style: solid;
        border-width: 2px 0 2px 12px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .submit-area .mwform-back,
    .form-wrapper .form-main .form-main-body .mw_wp_form form .submit-area .mwform-submit {
        text-align: center;
        margin: 0 25px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form .red,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p.inline {
        display: none
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text {
        padding-top: 7px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text .jobobjective:after,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text .jobobjective:before,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text .jobstatus:after,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text .jobstatus:before,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text .locationwrap:after,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text .locationwrap:before,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text .statevalue:after,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text .statevalue:before {
        content: none
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form .checkbox-field,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form .email-conf,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form .privacy {
        display: none
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form_complete .mwform-complete {
        text-align: center;
        font-size: 15px
    }
}

@media (max-width:768px) {
    .form-wrapper {
        position: relative
    }

    .form-wrapper .form-main {
        z-index: 1;
        position: relative
    }

    .form-wrapper .form-main .form-main-head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #fff;
        background-color: #707d69;
        width: 100%;
        height: 56.66667vw;
        margin-top: 13.33333vw;
        padding: 0 6.66667vw
    }

    .form-wrapper .form-main .form-main-body {
        margin: 13.33333vw 6.66667vw 24vw;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        line-height: 2;
        letter-spacing: .1em;
        text-align: justify
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .red {
        color: red
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-bottom: 6.66667vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p.inline {
        display: inline-block;
        margin-bottom: 14.66667vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p.error-message {
        display: block;
        min-height: 0;
        margin-bottom: 0;
        font-size: 3.73333vw;
        letter-spacing: .12em;
        line-height: 3;
        font-weight: 700;
        text-align: left
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p.error-message .error {
        display: block;
        color: red
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p.error-message .error:last-of-type {
        margin-bottom: 14.66667vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p label {
        font-size: 3.73333vw;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .1em;
        margin-bottom: 2.66667vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        word-break: break-all
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text input[type=email],
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text input[type=text],
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text select,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text textarea {
        font-size: 3.73333vw;
        line-height: 2;
        letter-spacing: .1em;
        text-indent: 1em;
        margin: 0;
        padding: 0;
        background: none;
        border: 1px solid #b2b2b2;
        border-radius: 0;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        min-height: 13.33333vw;
        width: 100%;
        display: block
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text select {
        position: relative;
        z-index: 3
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .jobobjective,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .jobstatus,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .locationwrap,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .statevalue {
        display: block;
        position: relative
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .jobobjective:before,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .jobstatus:before,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .locationwrap:before,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .statevalue:before {
        z-index: 1;
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1.33333vw;
        margin: auto;
        width: 10.66667vw;
        height: 10.66667vw;
        background-color: #f3d552
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .jobobjective:after,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .jobstatus:after,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .locationwrap:after,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .statevalue:after {
        z-index: 2;
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 4.66667vw;
        margin: auto;
        width: 4vw;
        height: 6.4vw;
        background: url(/wp-content/themes/di-system/assets/image/form_select.svg) 50%/contain no-repeat scroll
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.radio {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.radio .mwform-radio-field {
        margin-right: 12vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.radio .mwform-radio-field label {
        width: inherit
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.birth {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.birth .mwform-birth-year {
        width: 26.66667vw;
        margin: 0 1.33333vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.birth .mwform-birth-day,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.birth .mwform-birth-month {
        width: 13.33333vw;
        margin: 0 1.33333vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .college,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .school {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .college .collegename,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .college .schoolname,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .school .collegename,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .school .schoolname {
        width: 18.66667vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .college input,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .school input {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .school {
        margin-bottom: 4vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .city,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .state,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .zip {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .city .cityname,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .city .statename,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .city .zipname,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .state .cityname,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .state .statename,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .state .zipname,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .zip .cityname,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .zip .statename,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .zip .zipname {
        width: 25.33333vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .zip {
        margin-bottom: 4vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .zip input {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .state {
        margin-bottom: 4vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .city input,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .state .statevalue {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text textarea {
        height: 57.33333vw;
        padding: 1em;
        text-indent: 0
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom: 4vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-ad {
        width: 28vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career1-end-year,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career1-start-year,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career2-end-year,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career2-start-year,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career3-end-year,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career3-start-year {
        width: 26.66667vw;
        margin-right: 1.33333vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career1-end-month,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career1-start-month,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career2-end-month,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career2-start-month,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career3-end-month,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .career-ad-period .career-period .mwform-career3-start-month {
        width: 13.33333vw;
        margin: 0 1.33333vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.amount {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.amount input {
        width: 44vw;
        margin: 0 2.66667vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.work-start {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.work-start .mwform-work-start-day,
    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.work-start .mwform-work-start-month {
        width: 16vw;
        margin-right: 2.66667vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text.work-start .mwform-work-start-day {
        margin-left: 8vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .mwform-tel-field {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .mwform-tel-field input {
        width: inherit;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin: 0 2.66667vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .mwform-tel-field input:first-of-type {
        margin-left: 0
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p .confirm-text .mwform-tel-field input:last-of-type {
        margin-right: 0
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form p.note {
        font-size: 3.73333vw;
        line-height: 2;
        letter-spacing: .1em;
        text-align: center;
        margin-bottom: 13.33333vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .inquiry-desc,
    .form-wrapper .form-main .form-main-body .mw_wp_form form .self-introduction {
        margin-bottom: 0
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy {
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
        border: 1px solid #b2b2b2;
        height: 57.33333vw;
        padding: 6.66667vw;
        margin: 13.33333vw 0 6.66667vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy ol,
    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy p,
    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy ul {
        display: block;
        margin-bottom: 30px
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy h1,
    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy h2 {
        font-weight: 700
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy .privacy-ol {
        list-style-type: decimal;
        padding-left: 1.5em
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy .privacy-ol .privacy-ol-sub {
        padding-left: 3.5em;
        list-style-type: decimal
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .privacy dl a {
        text-decoration: underline
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .checkbox-field {
        min-height: 0;
        margin-bottom: 13.33333vw;
        line-height: 1
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .checkbox-field .mwform-checkbox-field,
    .form-wrapper .form-main .form-main-body .mw_wp_form form .checkbox-field .mwform-checkbox-field label {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .checkbox-field .mwform-checkbox-field label {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .submit-area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .submit-area button {
        cursor: pointer;
        display: block;
        padding: 0;
        border: none;
        border-radius: 0;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        color: #000;
        font-size: 3.73333vw;
        font-weight: 700;
        line-height: 14.66667vw;
        background: #f3d552;
        width: 73.33333vw;
        height: 14.66667vw;
        margin: 0 auto;
        position: relative
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .submit-area .mwform-confirm {
        text-align: left;
        text-indent: 1em
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .submit-area .mwform-confirm:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #000;
        border-style: solid;
        border-width: .53333vw 0 .53333vw 2.93333vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .submit-area .mwform-submit {
        text-align: center;
        margin-bottom: 6.66667vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form form .submit-area .mwform-back {
        text-align: center
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form .red,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p.inline {
        display: none
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text .jobobjective:after,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text .jobobjective:before,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text .jobstatus:after,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text .jobstatus:before,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text .locationwrap:after,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text .locationwrap:before,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text .statevalue:after,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form p .confirm-text .statevalue:before {
        content: none
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form .inquiry-desc,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form .self-introduction {
        margin-bottom: 13.33333vw
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form .checkbox-field,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form .email-conf,
    .form-wrapper .form-main .form-main-body .mw_wp_form_preview form .privacy {
        display: none
    }

    .form-wrapper .form-main .form-main-body .mw_wp_form_complete .mwform-complete {
        text-align: center;
        font-size: 3.73333vw
    }
}

@media (min-width:768px) {
    .page-wrapper {
        position: relative;
        margin: 100px auto 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        max-width: 1350px;
        min-width: 1185px
    }

    .page-wrapper .page-main {
        z-index: 1;
        position: relative;
        width: 100%
    }

    .page-wrapper .page-main .page-main-head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 180px;
        color: #fff;
        background-color: #707d69
    }

    .page-wrapper .page-main .page-main-body {
        width: 640px;
        margin: 80px auto;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        line-height: 2.5;
        letter-spacing: .1em;
        text-align: justify
    }

    .page-wrapper .page-main .page-main-body.no-h3 {
        padding: 0
    }

    .page-wrapper .page-main .page-main-body h3 {
        text-align: left;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 25px;
        line-height: 2;
        letter-spacing: .2em;
        border-bottom: 1px solid #000;
        padding-bottom: 10px;
        margin-bottom: 15px
    }

    .page-wrapper .page-main .page-main-body h4 {
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        margin-bottom: 30px
    }

    .page-wrapper .page-main .page-main-body h4,
    .page-wrapper .page-main .page-main-body h6 {
        text-align: left;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 20px;
        line-height: 1.5;
        letter-spacing: .1em
    }

    .page-wrapper .page-main .page-main-body h6 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 15px
    }

    .page-wrapper .page-main .page-main-body h6 .enclose {
        margin-bottom: 0;
        margin-right: 15px
    }

    .page-wrapper .page-main .page-main-body h6 .inner {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .page-wrapper .page-main .page-main-body .no-margin {
        margin-bottom: 0
    }

    .page-wrapper .page-main .page-main-body hr {
        margin: 50px 0;
        border: none;
        height: 1px;
        background-color: #f2f2f2
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item {
        padding-left: 0;
        padding-bottom: 45px;
        border-bottom: 1px solid #f2f2f2;
        margin-bottom: 45px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-decoration: none;
        position: relative
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item:before {
        content: none
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item .partner-item-left {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 250px;
        height: 90px;
        border-right: 2px solid #000;
        padding: 0 30px 0 0;
        word-break: normal;
        margin: 0;
        position: relative
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item .partner-item-left img {
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%;
        margin: 0
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item .partner-item-right {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 0 0 0 50px;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 25px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: .1em;
        height: 90px;
        margin: 0
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item .partner-item-right span {
        display: block;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .1em;
        margin-top: 5px
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item a {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 90px;
        font-size: 0;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item a:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background-color: #000;
        width: 50px;
        height: 50px;
        border-radius: 0;
        border: none
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item a:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 19px;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: 3px 0 3px 12px
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item a:hover:before {
        background-color: #f3d552
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item a:hover:after {
        border-color: transparent transparent transparent #000
    }

    .page-wrapper .page-main .page-main-body .history .history-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-left: 0;
        padding-bottom: 45px;
        border-bottom: 1px solid #f2f2f2;
        margin-bottom: 45px
    }

    .page-wrapper .page-main .page-main-body .history .history-item:before {
        content: none
    }

    .page-wrapper .page-main .page-main-body .history .history-item .history-item-left {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 170px;
        height: 90px;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: .12em;
        border-right: 2px solid #000;
        padding: 0 30px 0 0;
        word-break: normal;
        margin: 0
    }

    .page-wrapper .page-main .page-main-body .history .history-item .history-item-right {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding: 0 0 0 50px;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 20px;
        font-weight: 700;
        line-height: 2;
        letter-spacing: .1em;
        margin: 0
    }

    .page-wrapper .page-main .page-main-body .history .history-item .history-item-right.column {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }

    .page-wrapper .page-main .page-main-body .history .history-item .history-item-right span {
        display: block;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .1em;
        margin-bottom: 15px
    }

    .page-wrapper .page-main .page-main-body .enclose {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #f3d552;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-weight: 700;
        font-size: 14px;
        line-height: 1;
        letter-spacing: .12em;
        width: 130px;
        height: 30px;
        margin-bottom: 5px
    }

    .page-wrapper .page-main .page-main-body .tagline {
        display: block;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .1em;
        margin-top: 5px
    }

    .page-wrapper .page-main .page-main-body .arrow {
        display: block;
        background: url(/wp-content/themes/di-system/assets/image/single_parts_arrow.png) 50%/contain no-repeat scroll;
        width: 31px;
        height: 43px;
        margin: 20px 40px
    }

    .page-wrapper .page-main .page-main-body iframe {
        width: 100%;
        height: 420px
    }

    .page-wrapper .page-main .page-main-body blockquote,
    .page-wrapper .page-main .page-main-body iframe,
    .page-wrapper .page-main .page-main-body img,
    .page-wrapper .page-main .page-main-body ol,
    .page-wrapper .page-main .page-main-body p,
    .page-wrapper .page-main .page-main-body table,
    .page-wrapper .page-main .page-main-body ul {
        margin-bottom: 60px
    }

    .page-wrapper .page-main .page-main-body table a,
    .page-wrapper .page-main .page-main-body table blockquote,
    .page-wrapper .page-main .page-main-body table img,
    .page-wrapper .page-main .page-main-body table ol,
    .page-wrapper .page-main .page-main-body table p,
    .page-wrapper .page-main .page-main-body table table,
    .page-wrapper .page-main .page-main-body table ul {
        margin-bottom: inherit
    }

    .page-wrapper .page-main .page-main-body table img {
        width: inherit
    }

    .page-wrapper .page-main .page-main-body h5 {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 15px;
        line-height: 1.5;
        letter-spacing: .1em;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15px;
        margin-bottom: 20px
    }

    .page-wrapper .page-main .page-main-body strong {
        font-weight: 700
    }

    .page-wrapper .page-main .page-main-body img {
        width: 100%
    }

    .page-wrapper .page-main .page-main-body ul li {
        position: relative;
        padding-left: 30px;
        padding-bottom: 15px;
        line-height: 1.5
    }

    .page-wrapper .page-main .page-main-body ul li:last-of-type {
        padding-bottom: 0
    }

    .page-wrapper .page-main .page-main-body ul li ul {
        margin-bottom: inherit
    }

    .page-wrapper .page-main .page-main-body ul li ul li {
        color: #999;
        padding-left: 1em;
        padding-top: 10px;
        padding-bottom: inherit;
        position: relative
    }

    .page-wrapper .page-main .page-main-body ul li ul li:last-of-type {
        padding-bottom: 10px
    }

    .page-wrapper .page-main .page-main-body ul li ul li:before {
        all: unset;
        content: "- ";
        position: absolute;
        top: 10px;
        left: 0
    }

    .page-wrapper .page-main .page-main-body ul li:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 3px solid #f3d552
    }

    .page-wrapper .page-main .page-main-body ol {
        counter-reset: number
    }

    .page-wrapper .page-main .page-main-body ol li {
        position: relative;
        padding-left: 30px;
        padding-bottom: 15px;
        line-height: 1.5
    }

    .page-wrapper .page-main .page-main-body ol li:last-of-type {
        padding-bottom: 0
    }

    .page-wrapper .page-main .page-main-body ol li ul {
        margin-bottom: inherit
    }

    .page-wrapper .page-main .page-main-body ol li ul li {
        color: #999;
        padding-left: 1em;
        padding-top: 10px;
        padding-bottom: inherit;
        position: relative
    }

    .page-wrapper .page-main .page-main-body ol li ul li:last-of-type {
        padding-bottom: 10px
    }

    .page-wrapper .page-main .page-main-body ol li ul li:before {
        all: unset;
        content: "- ";
        position: absolute;
        top: 10px;
        left: 0
    }

    .page-wrapper .page-main .page-main-body ol li:before {
        content: counter(number);
        counter-increment: number;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        width: 16px;
        height: 16px;
        border: 3px solid #f3d552;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center
    }

    .page-wrapper .page-main .page-main-body ol li:before,
    .page-wrapper .page-main .page-main-body table {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        letter-spacing: .1em
    }

    .page-wrapper .page-main .page-main-body table {
        border-collapse: collapse;
        border: 1px solid #ccc;
        font-size: 14px;
        line-height: 1.5;
        width: 100%
    }

    .page-wrapper .page-main .page-main-body table tbody tr:nth-child(odd) {
        background-color: #f2f2f2
    }

    .page-wrapper .page-main .page-main-body table tbody tr td,
    .page-wrapper .page-main .page-main-body table tbody tr th {
        vertical-align: middle;
        border: 1px solid #ccc;
        padding: 15px
    }

    .page-wrapper .page-main .page-main-body table tbody tr th {
        color: #fff;
        background-color: #666;
        text-align: center
    }

    .page-wrapper .page-main .page-main-body blockquote {
        border: 1px solid #ccc;
        padding: 40px
    }

    .page-wrapper .page-main .page-main-body blockquote img {
        width: inherit;
        margin-bottom: 0
    }

    .page-wrapper .page-main .page-main-body .def {
        font-size: 14px;
        line-height: 2;
        letter-spacing: .1em
    }

    .page-wrapper .page-main .page-main-body small {
        display: block;
        font-size: 12px;
        line-height: 2;
        letter-spacing: .1em
    }

    .page-wrapper .page-main .page-main-body a {
        text-decoration: underline;
        word-break: break-all
    }

    .page-wrapper .page-main .page-main-body a:hover {
        opacity: .5
    }

    .page-wrapper .page-main .page-main-body .button {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #f3d552;
        width: 290px;
        height: 60px;
        color: #000;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .1em;
        padding-left: 1em;
        position: relative;
        overflow: hidden;
        margin: 30px 0;
        text-decoration: none
    }

    .page-wrapper .page-main .page-main-body .button:hover {
        background-color: #000;
        color: #f3d552
    }

    .page-wrapper .page-main .page-main-body .button:hover:after {
        border-color: transparent transparent transparent #f3d552
    }

    .page-wrapper .page-main .page-main-body .button:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #000;
        border-style: solid;
        border-width: 2px 0 2px 12px
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-head {
        font-size: 25px;
        line-height: 1;
        letter-spacing: .2em;
        margin-bottom: 30px
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-lists {
        margin: 0;
        width: 100%
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-lists .page-main-body-inquiry-list {
        border-bottom: 1px solid #f2f2f2;
        padding: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
        width: 100%;
        height: 160px
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-lists .page-main-body-inquiry-list:last-of-type {
        border: none
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-lists .page-main-body-inquiry-list:before {
        content: none
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-lists .page-main-body-inquiry-list a {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        font-size: 0;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-lists .page-main-body-inquiry-list:hover {
        background-color: #f3d552
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-lists .page-main-body-inquiry-list .page-main-body-inquiry-list-desc {
        all: unset;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 25px;
        line-height: 1;
        letter-spacing: .12em
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-lists .page-main-body-inquiry-list .page-main-body-inquiry-list-arrow {
        background-color: #000;
        width: 50px;
        height: 50px;
        position: relative
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-lists .page-main-body-inquiry-list .page-main-body-inquiry-list-arrow:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: 3px 0 3px 12px
    }
}

@media (max-width:768px) {
    .page-wrapper {
        position: relative
    }

    .page-wrapper .page-main {
        z-index: 1;
        position: relative
    }

    .page-wrapper .page-main .page-main-head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #fff;
        background-color: #707d69;
        width: 100%;
        height: 56.66667vw;
        margin-top: 13.33333vw;
        padding: 0 6.66667vw
    }

    .page-wrapper .page-main .page-main-body {
        margin: 13.33333vw 6.66667vw 24vw;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        line-height: 2;
        letter-spacing: .1em;
        text-align: justify
    }

    .page-wrapper .page-main .page-main-body h3 {
        all: unset;
        display: block;
        font-size: 8.66667vw;
        letter-spacing: .12em;
        border-bottom: 2px solid #000;
        padding-bottom: 4vw;
        margin-bottom: 9.33333vw
    }

    .page-wrapper .page-main .page-main-body h3,
    .page-wrapper .page-main .page-main-body h4 {
        text-align: left;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        line-height: 1.5
    }

    .page-wrapper .page-main .page-main-body h4 {
        font-size: 6.66667vw;
        letter-spacing: .1em;
        border-bottom: 1px solid #000;
        padding-bottom: 4.66667vw;
        margin-bottom: 5.33333vw
    }

    .page-wrapper .page-main .page-main-body h6 {
        text-align: left;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 6.66667vw;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: .1em;
        margin-bottom: 2.66667vw
    }

    .page-wrapper .page-main .page-main-body h6 .enclose {
        margin-bottom: 0;
        margin-right: 4vw
    }

    .page-wrapper .page-main .page-main-body h6 .inner {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .page-wrapper .page-main .page-main-body .no-margin {
        margin-bottom: 0
    }

    .page-wrapper .page-main .page-main-body hr {
        margin: 6.66667vw 0;
        border: none;
        height: 1px;
        background-color: #f2f2f2
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item {
        border-bottom: 1px solid #f2f2f2;
        padding: 0 0 13.33333vw;
        margin-bottom: 13.33333vw
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item:before {
        content: none
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item .partner-item-left {
        margin: 0 0 2.66667vw;
        text-align: left
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item .partner-item-left img {
        width: inherit;
        margin: 0
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item .partner-item-right {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 6.66667vw;
        line-height: 1.7;
        letter-spacing: .1em;
        margin: 0
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item .partner-item-right span {
        display: block;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .1em
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 60vw;
        height: 13.33333vw;
        background-color: #000;
        position: relative;
        color: #fff;
        text-decoration: none;
        text-indent: 1em;
        margin-top: 8vw
    }

    .page-wrapper .page-main .page-main-body .partner .partner-item a:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: 3px 0 3px 12px
    }

    .page-wrapper .page-main .page-main-body .history .history-item {
        border-bottom: 1px solid #f2f2f2;
        padding: 0 0 13.33333vw;
        margin-bottom: 13.33333vw
    }

    .page-wrapper .page-main .page-main-body .history .history-item:before {
        content: none
    }

    .page-wrapper .page-main .page-main-body .history .history-item .history-item-left {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        line-height: 1;
        letter-spacing: .1em;
        border-bottom: 1px solid #000;
        padding-bottom: 4.66667vw;
        margin-bottom: 5.33333vw
    }

    .page-wrapper .page-main .page-main-body .history .history-item .history-item-right {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 5.33333vw;
        line-height: 1.7;
        letter-spacing: .06em;
        margin: 0
    }

    .page-wrapper .page-main .page-main-body .history .history-item .history-item-right span {
        display: block;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .1em;
        margin-bottom: 4vw
    }

    .page-wrapper .page-main .page-main-body .enclose {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #f3d552;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .06em;
        width: 38.66667vw;
        height: 6.66667vw;
        margin-bottom: 1.33333vw
    }

    .page-wrapper .page-main .page-main-body .enclose,
    .page-wrapper .page-main .page-main-body .tagline {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw
    }

    .page-wrapper .page-main .page-main-body .tagline {
        display: block;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .04em;
        margin-top: 2.66667vw
    }

    .page-wrapper .page-main .page-main-body .arrow {
        display: block;
        background: url(/wp-content/themes/di-system/assets/image/single_parts_arrow.png) 50%/contain no-repeat scroll;
        width: 7.06667vw;
        height: 9.6vw;
        margin: 4vw 5.33333vw
    }

    .page-wrapper .page-main .page-main-body iframe {
        width: 100%;
        height: 86.66667vw
    }

    .page-wrapper .page-main .page-main-body blockquote,
    .page-wrapper .page-main .page-main-body iframe,
    .page-wrapper .page-main .page-main-body img,
    .page-wrapper .page-main .page-main-body ol,
    .page-wrapper .page-main .page-main-body p,
    .page-wrapper .page-main .page-main-body table,
    .page-wrapper .page-main .page-main-body ul {
        margin-bottom: 13.33333vw
    }

    .page-wrapper .page-main .page-main-body table a,
    .page-wrapper .page-main .page-main-body table blockquote,
    .page-wrapper .page-main .page-main-body table img,
    .page-wrapper .page-main .page-main-body table ol,
    .page-wrapper .page-main .page-main-body table p,
    .page-wrapper .page-main .page-main-body table table,
    .page-wrapper .page-main .page-main-body table ul {
        margin-bottom: inherit
    }

    .page-wrapper .page-main .page-main-body table img {
        width: inherit
    }

    .page-wrapper .page-main .page-main-body h5 {
        text-align: left;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 4vw;
        line-height: 1.5;
        letter-spacing: .1em;
        border-bottom: 1px solid #ccc;
        padding-bottom: 4vw;
        margin-bottom: 5.33333vw
    }

    .page-wrapper .page-main .page-main-body strong {
        font-weight: 700
    }

    .page-wrapper .page-main .page-main-body img {
        width: 100%
    }

    .page-wrapper .page-main .page-main-body ul li {
        position: relative;
        padding-left: 8vw;
        padding-bottom: 4vw;
        line-height: 1.5
    }

    .page-wrapper .page-main .page-main-body ul li:last-of-type {
        padding-bottom: 0
    }

    .page-wrapper .page-main .page-main-body ul li ul {
        margin-bottom: inherit
    }

    .page-wrapper .page-main .page-main-body ul li ul li {
        color: #999;
        padding-left: 1em;
        padding-top: 1.33333vw;
        padding-bottom: inherit;
        position: relative
    }

    .page-wrapper .page-main .page-main-body ul li ul li:last-of-type {
        padding-bottom: 1.33333vw
    }

    .page-wrapper .page-main .page-main-body ul li ul li:before {
        all: unset;
        content: "- ";
        position: absolute;
        top: 1.33333vw;
        left: 0
    }

    .page-wrapper .page-main .page-main-body ul li:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        width: 3.73333vw;
        height: 3.73333vw;
        border-radius: 50%;
        border: .8vw solid #f3d552
    }

    .page-wrapper .page-main .page-main-body ol {
        counter-reset: number
    }

    .page-wrapper .page-main .page-main-body ol li {
        position: relative;
        padding-left: 8vw;
        padding-bottom: 4vw;
        line-height: 1.5
    }

    .page-wrapper .page-main .page-main-body ol li:last-of-type {
        padding-bottom: 0
    }

    .page-wrapper .page-main .page-main-body ol li ul {
        margin-bottom: inherit
    }

    .page-wrapper .page-main .page-main-body ol li ul li {
        color: #999;
        padding-left: 1em;
        padding-top: 1.33333vw;
        padding-bottom: inherit;
        position: relative
    }

    .page-wrapper .page-main .page-main-body ol li ul li:last-of-type {
        padding-bottom: 1.33333vw
    }

    .page-wrapper .page-main .page-main-body ol li ul li:before {
        all: unset;
        content: "- ";
        position: absolute;
        top: 1.33333vw;
        left: 0
    }

    .page-wrapper .page-main .page-main-body ol li:before {
        content: counter(number);
        counter-increment: number;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        width: 4.26667vw;
        height: 4.26667vw;
        border: .8vw solid #f3d552;
        font-size: 2.66667vw;
        font-weight: 700;
        line-height: 4.26667vw;
        text-align: center
    }

    .page-wrapper .page-main .page-main-body ol li:before,
    .page-wrapper .page-main .page-main-body table {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        letter-spacing: .1em
    }

    .page-wrapper .page-main .page-main-body table {
        border-collapse: collapse;
        border: 1px solid #ccc;
        font-size: 1.86667vw;
        line-height: 1.5;
        width: 100%
    }

    .page-wrapper .page-main .page-main-body table small {
        font-size: 1.33333vw
    }

    .page-wrapper .page-main .page-main-body table tbody tr:nth-child(odd) {
        background-color: #f2f2f2
    }

    .page-wrapper .page-main .page-main-body table tbody tr td,
    .page-wrapper .page-main .page-main-body table tbody tr th {
        vertical-align: middle;
        border: 1px solid #ccc;
        padding: 1.33333vw
    }

    .page-wrapper .page-main .page-main-body table tbody tr th {
        color: #fff;
        background-color: #666;
        text-align: center
    }

    .page-wrapper .page-main .page-main-body table tbody tr td ul {
        padding: 2.66667vw
    }

    .page-wrapper .page-main .page-main-body table tbody tr td ul li {
        position: relative;
        padding-left: 4vw;
        padding-bottom: 2.66667vw
    }

    .page-wrapper .page-main .page-main-body table tbody tr td ul li:last-of-type {
        padding-bottom: 0
    }

    .page-wrapper .page-main .page-main-body table tbody tr td ul li ul {
        padding: 0
    }

    .page-wrapper .page-main .page-main-body table tbody tr td ul li ul li {
        color: #999;
        padding-left: 1em;
        padding-top: 1.33333vw;
        padding-bottom: 0;
        position: relative
    }

    .page-wrapper .page-main .page-main-body table tbody tr td ul li ul li:last-of-type {
        padding-bottom: 1.33333vw
    }

    .page-wrapper .page-main .page-main-body table tbody tr td ul li ul li:before {
        all: unset;
        content: "- ";
        position: absolute;
        top: 1.33333vw;
        left: 0
    }

    .page-wrapper .page-main .page-main-body table tbody tr td ul li:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        width: 1.6vw;
        height: 1.6vw;
        border-radius: 50%;
        border: .53333vw solid #f3d552
    }

    .page-wrapper .page-main .page-main-body blockquote {
        border: 1px solid #ccc;
        padding: 10.66667vw
    }

    .page-wrapper .page-main .page-main-body blockquote img {
        width: inherit;
        margin-bottom: 0
    }

    .page-wrapper .page-main .page-main-body .def {
        font-size: 3.73333vw;
        line-height: 2;
        letter-spacing: .1em
    }

    .page-wrapper .page-main .page-main-body small {
        display: block;
        font-size: 3.2vw;
        line-height: 2;
        letter-spacing: .1em
    }

    .page-wrapper .page-main .page-main-body a {
        text-decoration: underline;
        word-break: break-all
    }

    .page-wrapper .page-main .page-main-body .button {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #f3d552;
        width: 73.33333vw;
        height: 14.66667vw;
        color: #000;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 4.26667vw;
        line-height: 1;
        letter-spacing: .1em;
        padding-left: 1em;
        position: relative;
        overflow: hidden;
        margin: 2.66667vw 0;
        text-decoration: none
    }

    .page-wrapper .page-main .page-main-body .button:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #000;
        border-style: solid;
        border-width: .53333vw 0 .53333vw 2.93333vw
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry {
        font-weight: 400
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-head {
        all: unset;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 8.66667vw;
        line-height: 1.7;
        letter-spacing: .12em;
        background: transparent -webkit-gradient(linear, left top, left bottom, color-stop(85%, transparent), color-stop(0, #f3d552)) repeat scroll 0 0;
        background: transparent linear-gradient(transparent 85%, #f3d552 0) repeat scroll 0 0
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-lists {
        margin: 0;
        width: 100%
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-lists .page-main-body-inquiry-list {
        border-bottom: 1px solid #f2f2f2;
        position: relative;
        width: 100%;
        padding: 13.33333vw 0
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-lists .page-main-body-inquiry-list:before {
        content: none
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-lists .page-main-body-inquiry-list a {
        margin-top: 8vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #000;
        width: 60vw;
        height: 13.33333vw;
        color: #fff;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 4vw;
        line-height: 1;
        letter-spacing: .1em;
        text-indent: 1em;
        position: relative;
        text-decoration: none
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-lists .page-main-body-inquiry-list a:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: .53333vw 0 .53333vw 2.93333vw
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-lists .page-main-body-inquiry-list .page-main-body-inquiry-list-desc {
        all: unset;
        font-size: 6.66667vw;
        line-height: 1.1;
        letter-spacing: .1em
    }

    .page-wrapper .page-main .page-main-body .page-main-body-inquiry .page-main-body-inquiry-lists .page-main-body-inquiry-list .page-main-body-inquiry-list-arrow {
        display: none
    }
}

@media (min-width:768px) {
    .private-main {
        width: 100%;
        height: 420px;
        margin-top: 90px;
        overflow: hidden;
        position: relative;
        background: url(/wp-content/themes/di-system/assets/image/private_main.jpg) 50%/cover no-repeat scroll
    }

    .private-main .private-main-title {
        background-color: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 90px;
        margin: auto;
        width: 330px;
        height: 330px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 0 45px
    }

    .private-main .private-main-title p {
        margin-top: 25px;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 13px;
        line-height: 2.5;
        letter-spacing: .2em
    }

    .private-casestudy {
        margin-top: 170px
    }

    .private-casestudy .private-case-area {
        margin-top: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .private-casestudy .private-case-area .private-case {
        width: 386px
    }

    .private-casestudy .private-case-area .private-case:last-of-type {
        margin-right: 0
    }

    .private-casestudy .private-case-area .private-case:hover .private-case-image:after {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: .8
    }

    .private-casestudy .private-case-area .private-case .private-case-image {
        width: 386px;
        height: 386px;
        position: relative;
        overflow: hidden;
        background-color: #fff
    }

    .private-casestudy .private-case-area .private-case .private-case-image:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: opacity .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), transform .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1)
    }

    .private-casestudy .private-case-area .private-case:first-of-type .private-case-image:after {
        background: url(/wp-content/themes/di-system/assets/image/private_case_yokohama.jpg) 50%/cover no-repeat scroll
    }

    .private-casestudy .private-case-area .private-case:nth-of-type(2) .private-case-image:after {
        background: url(/wp-content/themes/di-system/assets/image/private_case_sky.jpg) 50%/cover no-repeat scroll
    }

    .private-casestudy .private-case-area .private-case:nth-of-type(3) .private-case-image:after {
        background: url(/wp-content/themes/di-system/assets/image/private_case_totsuka.jpg) 50%/cover no-repeat scroll
    }

    .private-casestudy .private-case-area .private-case .private-case-title {
        margin-top: 10px;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: .09em
    }

    .private-casestudy .private-case-area .private-case .private-case-date {
        margin-top: 5px;
        color: #999;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .09em
    }

    .private-casestudy .private-case-area .private-case .private-case-link-line {
        display: block;
        height: 30px;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 15px;
        position: relative
    }

    .private-casestudy .private-case-area .private-case .private-case-link-line:after {
        content: "";
        position: absolute;
        bottom: -1px;
        right: 0;
        width: 0;
        height: 0;
        border-color: transparent transparent #272f52;
        border-style: solid;
        border-width: 0 0 10px 10px
    }

    .private-casestudy .private-casestudy-link {
        background-color: #272f52;
        width: 326px;
        height: 70px;
        margin: 50px auto 0;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .2em;
        text-indent: 1em;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative
    }

    .private-casestudy .private-casestudy-link:hover {
        color: #818493
    }

    .private-casestudy .private-casestudy-link:hover:after {
        right: .5em
    }

    .private-casestudy .private-casestudy-link:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 1em;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: 3px 0 3px 15px;
        -webkit-transition: right .5s cubic-bezier(.19, 1, .22, 1);
        transition: right .5s cubic-bezier(.19, 1, .22, 1)
    }

    .private-characteristic {
        margin-top: 140px
    }

    .private-characteristic .private-characteristic-horizontal-area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .private-characteristic .private-characteristic-horizontal-area .private-characteristic-video-thumbnail {
        display: block;
        background: url(/wp-content/themes/di-system/assets/image/private_characteristic_video_thumbnail.jpg) 50%/cover no-repeat scroll;
        width: 580px;
        height: 326px;
        position: relative
    }

    .private-characteristic .private-characteristic-horizontal-area .private-characteristic-video-thumbnail:hover:after {
        background-color: rgba(0, 0, 0, .5)
    }

    .private-characteristic .private-characteristic-horizontal-area .private-characteristic-video-thumbnail:after {
        content: "";
        background-color: transparent;
        background: url(/wp-content/themes/di-system/assets/image/common_play.svg) 50%/68px 68px no-repeat scroll;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 580px;
        height: 326px;
        -webkit-transition: background-color .5s cubic-bezier(.19, 1, .22, 1);
        transition: background-color .5s cubic-bezier(.19, 1, .22, 1)
    }

    .private-characteristic .private-characteristic-horizontal-area .private-characteristic-link-area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-left: 90px
    }

    .private-characteristic .private-characteristic-horizontal-area .private-characteristic-link-area h3 {
        all: unset;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 25px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .2em;
        padding-bottom: 30px;
        position: relative
    }

    .private-characteristic .private-characteristic-horizontal-area .private-characteristic-link-area h3:after {
        all: unset;
        content: "";
        background-color: #272f52;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 2px
    }

    .private-characteristic .private-characteristic-horizontal-area .private-characteristic-link-area p {
        margin-top: 25px;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 13px;
        line-height: 2.1;
        letter-spacing: .2em
    }

    .private-characteristic .private-characteristic-horizontal-area .private-characteristic-link-area a {
        display: block;
        width: 200px;
        height: 40px;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 15px;
        position: relative
    }

    .private-characteristic .private-characteristic-horizontal-area .private-characteristic-link-area a:after {
        content: "";
        position: absolute;
        bottom: -1px;
        right: 0;
        width: 0;
        height: 0;
        border-color: transparent transparent #272f52;
        border-style: solid;
        border-width: 0 0 10px 10px
    }

    .private-characteristic .private-characteristic-button-area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 580px;
        margin: 5px auto 0 0
    }

    .private-characteristic .private-characteristic-button-area label {
        margin-right: 5px
    }

    .private-characteristic .private-characteristic-button-area label:last-of-type {
        margin-right: 0
    }

    .private-characteristic .private-characteristic-button-area label input {
        display: none
    }

    .private-characteristic .private-characteristic-button-area label input+span {
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 218px;
        height: 45px;
        border: 1px solid #272f52;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        line-height: 1;
        letter-spacing: .2em;
        -webkit-transition: color .5s cubic-bezier(.19, 1, .22, 1), background-color .5s cubic-bezier(.19, 1, .22, 1);
        transition: color .5s cubic-bezier(.19, 1, .22, 1), background-color .5s cubic-bezier(.19, 1, .22, 1)
    }

    .private-characteristic .private-characteristic-button-area label input:checked+span {
        color: #fff;
        background-color: #272f52
    }

    .private-custom {
        margin-top: 130px;
        position: relative
    }

    .private-custom .private-custom-bg {
        background-color: #272f52;
        position: absolute;
        top: 165px;
        left: 0;
        width: 460px;
        height: 460px
    }

    .private-custom .private-custom-image {
        background: url(/wp-content/themes/di-system/assets/image/private_custom.jpg) 50%/cover no-repeat scroll;
        position: relative;
        margin-left: auto;
        width: 925px;
        height: 400px
    }

    .private-custom .private-custom-link-area {
        background-color: #fff;
        position: absolute;
        top: 30px;
        left: 50px;
        width: 330px;
        height: 330px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 0 45px
    }

    .private-custom .private-custom-link-area h3 {
        all: unset;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 25px;
        font-weight: 700;
        line-height: 2;
        letter-spacing: .2em;
        position: relative;
        padding-bottom: 20px
    }

    .private-custom .private-custom-link-area h3:after {
        all: unset;
        content: "";
        background-color: #272f52;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 2px
    }

    .private-custom .private-custom-link-area p {
        margin-top: 25px;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 13px;
        line-height: 2.5;
        letter-spacing: .2em
    }

    .private-custom .private-custom-link-area a {
        margin-top: 40px;
        font-family: Times New Roman, serif;
        font-size: 13px;
        line-height: 1;
        letter-spacing: .16em;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 15px;
        position: relative
    }

    .private-custom .private-custom-link-area a:hover {
        color: #a3a3a3
    }

    .private-custom .private-custom-link-area a:after {
        content: "";
        position: absolute;
        bottom: -1px;
        right: 0;
        width: 0;
        height: 0;
        border-color: transparent transparent #272f52;
        border-style: solid;
        border-width: 0 0 10px 10px
    }

    .private-custom .private-custom-highclass-link {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        margin-top: 20px;
        width: 925px;
        margin-left: auto;
        padding-bottom: 40px
    }

    .private-custom .private-custom-highclass-link:hover .private-custom-highclass-image:after {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: .8
    }

    .private-custom .private-custom-highclass-link .private-custom-highclass-image {
        width: 330px;
        height: 165px;
        overflow: hidden;
        position: relative;
        background-color: #fff
    }

    .private-custom .private-custom-highclass-link .private-custom-highclass-image:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(/wp-content/themes/di-system/assets/image/private_custom_highclass.jpg) 50%/cover no-repeat scroll;
        -webkit-transition: opacity .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), transform .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1)
    }

    .private-custom .private-custom-highclass-link .private-custom-highclass-meta {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        width: 330px;
        margin-left: 20px
    }

    .private-custom .private-custom-highclass-link .private-custom-highclass-meta h4 {
        margin-top: 15px;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .2em;
        padding-bottom: 20px;
        position: relative
    }

    .private-custom .private-custom-highclass-link .private-custom-highclass-meta h4:after {
        content: "";
        background-color: #272f52;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 40px;
        height: 2px
    }

    .private-custom .private-custom-highclass-link .private-custom-highclass-meta p {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-top: 15px;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 13px;
        line-height: 2.3;
        letter-spacing: .2em
    }

    .private-custom .private-custom-highclass-link .private-custom-highclass-meta .private-custom-highclass-link-line {
        display: block;
        height: 40px;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 15px;
        position: relative
    }

    .private-custom .private-custom-highclass-link .private-custom-highclass-meta .private-custom-highclass-link-line:after {
        content: "";
        position: absolute;
        bottom: -1px;
        right: 0;
        width: 0;
        height: 0;
        border-color: transparent transparent #272f52;
        border-style: solid;
        border-width: 0 0 10px 10px
    }

    .private-renovation {
        margin-top: 190px;
        position: relative
    }

    .private-renovation .private-renovation-bg {
        background-color: #272f52;
        position: absolute;
        top: 165px;
        left: 0;
        width: 460px;
        height: 460px
    }

    .private-renovation .private-renovation-image {
        background: url(/wp-content/themes/di-system/assets/image/private_renovation.jpg) 50%/cover no-repeat scroll;
        position: relative;
        margin-left: auto;
        width: 925px;
        height: 400px
    }

    .private-renovation .private-renovation-link-area {
        background-color: #fff;
        position: absolute;
        top: 30px;
        left: 50px;
        width: 330px;
        height: 330px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 0 45px
    }

    .private-renovation .private-renovation-link-area h3 {
        all: unset;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 25px;
        font-weight: 700;
        line-height: 2;
        letter-spacing: .2em;
        position: relative;
        padding-bottom: 20px
    }

    .private-renovation .private-renovation-link-area h3:after {
        all: unset;
        content: "";
        background-color: #272f52;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 2px
    }

    .private-renovation .private-renovation-link-area p {
        margin-top: 25px;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 13px;
        line-height: 2.5;
        letter-spacing: .2em
    }

    .private-renovation .private-renovation-link-area a {
        margin-top: 40px;
        font-family: Times New Roman, serif;
        font-size: 13px;
        line-height: 1;
        letter-spacing: .16em;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 15px;
        position: relative
    }

    .private-renovation .private-renovation-link-area a:hover {
        color: #a3a3a3
    }

    .private-renovation .private-renovation-link-area a:after {
        content: "";
        position: absolute;
        bottom: -1px;
        right: 0;
        width: 0;
        height: 0;
        border-color: transparent transparent #272f52;
        border-style: solid;
        border-width: 0 0 10px 10px
    }

    .private-renovation .private-renovation-highclass-link {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        margin-top: 20px;
        width: 925px;
        margin-left: auto;
        padding-bottom: 40px
    }

    .private-renovation .private-renovation-highclass-link:hover .private-renovation-highclass-image:after {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: .8
    }

    .private-renovation .private-renovation-highclass-link .private-renovation-highclass-image {
        width: 330px;
        height: 165px;
        overflow: hidden;
        position: relative;
        background-color: #fff
    }

    .private-renovation .private-renovation-highclass-link .private-renovation-highclass-image:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(/wp-content/themes/di-system/assets/image/private_renovation_highclass.jpg) 50%/cover no-repeat scroll;
        -webkit-transition: opacity .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), transform .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1)
    }

    .private-renovation .private-renovation-highclass-link .private-renovation-highclass-meta {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        width: 330px;
        margin-left: 20px
    }

    .private-renovation .private-renovation-highclass-link .private-renovation-highclass-meta h4 {
        margin-top: 15px;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .2em;
        padding-bottom: 20px;
        position: relative
    }

    .private-renovation .private-renovation-highclass-link .private-renovation-highclass-meta h4:after {
        content: "";
        background-color: #272f52;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 40px;
        height: 2px
    }

    .private-renovation .private-renovation-highclass-link .private-renovation-highclass-meta p {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-top: 15px;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 13px;
        line-height: 2.3;
        letter-spacing: .2em
    }

    .private-renovation .private-renovation-highclass-link .private-renovation-highclass-meta .private-renovation-highclass-link-line {
        display: block;
        height: 40px;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 15px;
        position: relative
    }

    .private-renovation .private-renovation-highclass-link .private-renovation-highclass-meta .private-renovation-highclass-link-line:after {
        content: "";
        position: absolute;
        bottom: -1px;
        right: 0;
        width: 0;
        height: 0;
        border-color: transparent transparent #272f52;
        border-style: solid;
        border-width: 0 0 10px 10px
    }

    .private-usersvoice {
        margin-top: 160px
    }

    .private-usersvoice .private-voice-area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-top: 40px
    }

    .private-usersvoice .private-voice-area .private-voice {
        width: 580px
    }

    .private-usersvoice .private-voice-area .private-voice:first-of-type {
        margin-bottom: 70px
    }

    .private-usersvoice .private-voice-area .private-voice .private-voice-video-thumbnail {
        display: block;
        background: url(/wp-content/themes/di-system/assets/image/private_characteristic_video_thumbnail.jpg) 50%/cover no-repeat scroll;
        width: 580px;
        height: 326px;
        position: relative
    }

    .private-usersvoice .private-voice-area .private-voice .private-voice-video-thumbnail:hover:after {
        background-color: rgba(0, 0, 0, .5)
    }

    .private-usersvoice .private-voice-area .private-voice .private-voice-video-thumbnail:after {
        content: "";
        background-color: transparent;
        background: url(/wp-content/themes/di-system/assets/image/common_play.svg) 50%/68px 68px no-repeat scroll;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 580px;
        height: 326px;
        -webkit-transition: background-color .5s cubic-bezier(.19, 1, .22, 1);
        transition: background-color .5s cubic-bezier(.19, 1, .22, 1)
    }

    .private-usersvoice .private-voice-area .private-voice p {
        text-align: center;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: .2em;
        margin: 10px 0
    }

    .private-usersvoice .private-voice-area .private-voice .private-voice-button-area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 580px;
        margin: 5px auto 0 0
    }

    .private-usersvoice .private-voice-area .private-voice .private-voice-button-area label {
        margin-right: 5px
    }

    .private-usersvoice .private-voice-area .private-voice .private-voice-button-area label:last-of-type {
        margin-right: 0
    }

    .private-usersvoice .private-voice-area .private-voice .private-voice-button-area label input {
        display: none
    }

    .private-usersvoice .private-voice-area .private-voice .private-voice-button-area label input+span {
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 218px;
        height: 45px;
        border: 1px solid #272f52;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        line-height: 1;
        letter-spacing: .2em;
        -webkit-transition: color .5s cubic-bezier(.19, 1, .22, 1), background-color .5s cubic-bezier(.19, 1, .22, 1);
        transition: color .5s cubic-bezier(.19, 1, .22, 1), background-color .5s cubic-bezier(.19, 1, .22, 1)
    }

    .private-usersvoice .private-voice-area .private-voice .private-voice-button-area label input:checked+span {
        color: #fff;
        background-color: #272f52
    }

    .private-product {
        margin-top: 180px;
        position: relative;
        padding-bottom: 35px
    }

    .private-product .private-product-bg {
        background-color: #272f52;
        position: absolute;
        top: 165px;
        left: 0;
        width: 100%;
        height: 270px
    }

    .private-product .private-product-image {
        background: url(/wp-content/themes/di-system/assets/image/private_product.jpg) 50%/cover no-repeat scroll;
        position: relative;
        width: 1012px;
        height: 400px
    }

    .private-product .private-product-link-area {
        background-color: #fff;
        position: absolute;
        top: 30px;
        right: 50px;
        width: 330px;
        height: 330px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 0 45px
    }

    .private-product .private-product-link-area h3 {
        all: unset;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 25px;
        font-weight: 700;
        line-height: 2;
        letter-spacing: .2em;
        position: relative;
        padding-bottom: 20px
    }

    .private-product .private-product-link-area h3:after {
        all: unset;
        content: "";
        background-color: #272f52;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 2px
    }

    .private-product .private-product-link-area p {
        margin-top: 25px;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 13px;
        line-height: 2.5;
        letter-spacing: .2em
    }

    .private-product .private-product-link-area a {
        margin-top: 40px;
        font-family: Times New Roman, serif;
        font-size: 13px;
        line-height: 1;
        letter-spacing: .16em;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 15px;
        position: relative
    }

    .private-product .private-product-link-area a:hover {
        color: #a3a3a3
    }

    .private-product .private-product-link-area a:after {
        content: "";
        position: absolute;
        bottom: -1px;
        right: 0;
        width: 0;
        height: 0;
        border-color: transparent transparent #272f52;
        border-style: solid;
        border-width: 0 0 10px 10px
    }

    .private-modelhouse {
        margin-top: 140px;
        position: relative
    }

    .private-modelhouse .private-modelhouse-bg {
        background-color: #272f52;
        position: absolute;
        top: 110px;
        left: 0;
        width: 100%;
        height: 290px
    }

    .private-modelhouse .private-modelhouse-image {
        background: url(/wp-content/themes/di-system/assets/image/private_modelhouse.jpg) 50%/cover no-repeat scroll;
        position: absolute;
        top: 50px;
        left: 0;
        width: 925px;
        height: 230px
    }

    .private-modelhouse .private-modelhouse-link-area {
        background-color: #fff;
        position: relative;
        margin: 0 25px 0 auto;
        width: 330px;
        height: 260px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 0 45px
    }

    .private-modelhouse .private-modelhouse-link-area h3 {
        all: unset;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 23px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: .15em;
        position: relative;
        padding-bottom: 35px
    }

    .private-modelhouse .private-modelhouse-link-area h3:after {
        all: unset;
        content: "";
        background-color: #272f52;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 2px
    }

    .private-modelhouse .private-modelhouse-link-area a {
        margin-top: 40px;
        width: 200px;
        font-family: Times New Roman, serif;
        font-size: 13px;
        line-height: 1;
        letter-spacing: .16em;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 15px;
        position: relative
    }

    .private-modelhouse .private-modelhouse-link-area a:hover {
        color: #a3a3a3
    }

    .private-modelhouse .private-modelhouse-link-area a:after {
        content: "";
        position: absolute;
        bottom: -1px;
        right: 0;
        width: 0;
        height: 0;
        border-color: transparent transparent #272f52;
        border-style: solid;
        border-width: 0 0 10px 10px
    }

    .private-modelhouse .private-modelhouse-showroom-area {
        margin-top: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .private-modelhouse .private-modelhouse-showroom-area .private-modelhouse-showroom-head {
        background-color: #fff;
        position: relative;
        width: 330px;
        height: 270px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-left: 25px;
        padding: 0 45px
    }

    .private-modelhouse .private-modelhouse-showroom-area .private-modelhouse-showroom-head p {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 23px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: .2em;
        position: relative;
        padding-bottom: 35px
    }

    .private-modelhouse .private-modelhouse-showroom-area .private-modelhouse-showroom-head p:after {
        all: unset;
        content: "";
        background-color: #272f52;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 2px
    }

    .private-modelhouse .private-modelhouse-showroom-area .private-modelhouse-showroom {
        width: 330px;
        margin-left: 25px
    }

    .private-modelhouse .private-modelhouse-showroom-area .private-modelhouse-showroom:hover .private-modelhouse-showroom-image:after {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: .5
    }

    .private-modelhouse .private-modelhouse-showroom-area .private-modelhouse-showroom .private-modelhouse-showroom-image {
        display: block;
        width: 330px;
        height: 166px;
        position: relative;
        overflow: hidden;
        background-color: #fff
    }

    .private-modelhouse .private-modelhouse-showroom-area .private-modelhouse-showroom .private-modelhouse-showroom-image:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 330px;
        height: 166px;
        -webkit-transition: opacity .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), transform .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1)
    }

    .private-modelhouse .private-modelhouse-showroom-area .private-modelhouse-showroom:first-of-type .private-modelhouse-showroom-image:after {
        background: url(/wp-content/themes/di-system/assets/image/private_modelhouse_showroom_yokohama.jpg) 50%/cover no-repeat scroll
    }

    .private-modelhouse .private-modelhouse-showroom-area .private-modelhouse-showroom:nth-of-type(2) .private-modelhouse-showroom-image:after {
        background: url(/wp-content/themes/di-system/assets/image/private_modelhouse_showroom_mitaka.jpg) 50%/cover no-repeat scroll
    }

    .private-modelhouse .private-modelhouse-showroom-area .private-modelhouse-showroom .private-modelhouse-showroom-title {
        margin: 15px 0 0;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .2em
    }

    .private-modelhouse .private-modelhouse-showroom-area .private-modelhouse-showroom .private-modelhouse-showroom-link-line {
        font-family: Times New Roman, serif;
        font-size: 13px;
        line-height: 1;
        letter-spacing: .16em;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 15px;
        position: relative
    }

    .private-modelhouse .private-modelhouse-showroom-area .private-modelhouse-showroom .private-modelhouse-showroom-link-line:hover {
        color: #a3a3a3
    }

    .private-modelhouse .private-modelhouse-showroom-area .private-modelhouse-showroom .private-modelhouse-showroom-link-line:after {
        content: "";
        position: absolute;
        bottom: -1px;
        right: 0;
        width: 0;
        height: 0;
        border-color: transparent transparent #272f52;
        border-style: solid;
        border-width: 0 0 10px 10px
    }

    .private-contact {
        margin-top: 20px
    }
}

@media (min-width:768px) {
    .single-wrapper {
        position: relative;
        margin: 130px auto 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        max-width: 1350px;
        min-width: 1185px;
        padding: 0 30px
    }

    .single-wrapper .single-main {
        z-index: 1;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding-left: 240px;
        position: relative
    }

    .single-wrapper .single-main .single-main-head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        min-height: 180px;
        padding: 60px;
        background-color: #707d69;
        color: #fff
    }

    .single-wrapper .single-main .single-main-head.news {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }

    .single-wrapper .single-main .single-main-head .single-main-head-desc {
        margin-top: 10px;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .2em
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 90px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding-left: 50px;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        line-height: 2.5;
        letter-spacing: .1em;
        text-align: justify
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body.no-h3 {
        padding: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body h3 {
        text-align: left;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 25px;
        line-height: 2;
        letter-spacing: .2em;
        border-bottom: 1px solid #000;
        padding-bottom: 10px;
        margin-bottom: 15px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body h4 {
        text-align: left;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 20px;
        line-height: 1.5;
        letter-spacing: .1em;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        margin-bottom: 30px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body h6 {
        text-align: left;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 20px;
        line-height: 1.5;
        letter-spacing: .1em;
        margin-bottom: 15px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body h6 .enclose {
        margin-bottom: 0;
        margin-right: 15px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body h6 .inner {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .no-margin {
        margin-bottom: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body hr {
        margin: 50px 0;
        border: none;
        height: 1px;
        background-color: #f2f2f2
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item {
        padding: 45px 0;
        border-bottom: 1px solid #f2f2f2;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-decoration: none;
        position: relative
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item:before {
        content: none
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item .partner-item-left {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 248px;
        min-height: 90px;
        padding: 0 30px 0 0;
        word-break: normal;
        margin: 0;
        position: relative
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item .partner-item-left img {
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%;
        margin: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item .partner-item-right {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        display: flex;
        min-height: 90px;
        border-left: 2px solid #000;
        padding: 0 0 0 50px;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 25px;
        line-height: 1.2;
        letter-spacing: .1em;
        height: 90px;
        margin: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item .partner-item-right span {
        display: block;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .1em;
        margin-top: 5px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item a {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 0;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item a:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background-color: #000;
        width: 50px;
        height: 50px;
        border-radius: 0;
        border: none
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item a:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 19px;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: 3px 0 3px 12px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item a:hover {
        opacity: 1
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item:hover {
        opacity: 1;
        background-color: #f3d552
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-left: 0;
        padding-bottom: 45px;
        border-bottom: 1px solid #f2f2f2;
        margin-bottom: 45px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item:before {
        content: none
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-left {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 170px;
        min-height: 90px;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 15px;
        line-height: 1.6;
        letter-spacing: .12em;
        padding: 0 30px 0 0;
        word-break: normal;
        margin: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-right {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        min-height: 90px;
        border-left: 2px solid #000;
        padding: 0 0 0 50px;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 20px;
        line-height: 2;
        letter-spacing: .1em;
        margin: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-right.column {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-right span {
        display: block;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .1em;
        margin-bottom: 15px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-right-table {
        border-collapse: collapse;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        min-height: 90px;
        border: none;
        border-left: 2px solid #000;
        padding: 0 0 0 50px;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 20px;
        line-height: 2;
        letter-spacing: .1em;
        margin: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-right-table tbody tr:nth-child(odd) {
        background-color: transparent
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-right-table tbody tr td,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-right-table tbody tr th {
        vertical-align: middle;
        border: none;
        padding: 0 1em 0 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-right-table tbody tr th {
        color: #000;
        background-color: transparent;
        text-align: left
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .enclose {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #f3d552;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-weight: 700;
        font-size: 14px;
        line-height: 1;
        letter-spacing: .12em;
        width: 130px;
        height: 30px;
        margin-bottom: 5px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .tagline {
        display: block;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .1em;
        margin-top: 5px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .arrow {
        display: block;
        background: url(/wp-content/themes/di-system/assets/image/single_parts_arrow.png) 50%/contain no-repeat scroll;
        width: 31px;
        height: 43px;
        margin: 20px 40px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body iframe {
        width: 100%;
        height: 420px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body blockquote,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body iframe,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body img,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body p,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ul {
        margin-bottom: 60px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table a,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table blockquote,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table img,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table ol,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table p,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table table,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table ul {
        margin-bottom: inherit
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table img {
        width: inherit
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body h5 {
        text-align: left;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 15px;
        line-height: 1.5;
        letter-spacing: .1em;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15px;
        margin-bottom: 20px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body strong {
        font-weight: 700
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body img {
        width: 100%
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ul li {
        position: relative;
        padding-left: 30px;
        padding-bottom: 15px;
        line-height: 1.5
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ul li:last-of-type {
        padding-bottom: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ul li ul {
        margin-bottom: inherit
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ul li ul li {
        color: #999;
        padding-left: 1em;
        padding-top: 10px;
        padding-bottom: inherit;
        position: relative
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ul li ul li:last-of-type {
        padding-bottom: 10px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ul li ul li:before {
        all: unset;
        content: "- ";
        position: absolute;
        top: 10px;
        left: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ul li:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 3px solid #f3d552
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol {
        counter-reset: number
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol li {
        position: relative;
        padding-left: 30px;
        padding-bottom: 15px;
        line-height: 1.5
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol li:last-of-type {
        padding-bottom: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol li ul {
        margin-bottom: inherit
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol li ul li {
        color: #999;
        padding-left: 1em;
        padding-top: 10px;
        padding-bottom: inherit;
        position: relative
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol li ul li:last-of-type {
        padding-bottom: 10px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol li ul li:before {
        all: unset;
        content: "- ";
        position: absolute;
        top: 10px;
        left: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol li:before {
        content: counter(number);
        counter-increment: number;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        width: 16px;
        height: 16px;
        border: 3px solid #f3d552;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        letter-spacing: .1em;
        text-align: center
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table {
        border-collapse: collapse;
        border: 1px solid #ccc;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: .1em;
        width: 100%
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr:nth-child(odd) {
        background-color: #f2f2f2
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr th {
        vertical-align: middle;
        border: 1px solid #ccc;
        padding: 15px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr th {
        color: #fff;
        background-color: #666;
        text-align: center
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body blockquote {
        border: 1px solid #ccc;
        padding: 40px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body blockquote img {
        width: inherit;
        margin-bottom: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body small {
        display: block;
        font-size: 12px;
        line-height: 2;
        letter-spacing: .1em
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body a {
        text-decoration: underline;
        word-break: break-all
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body a:hover {
        opacity: .5
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .button {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #f3d552;
        border: 2px solid #f3d552;
        width: 290px;
        height: 60px;
        color: #000;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .1em;
        padding-left: 1em;
        position: relative;
        overflow: hidden;
        margin: 30px 0;
        text-decoration: none
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .button:hover {
        opacity: 1;
        background: none;
        border: 2px solid #f3d552
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .button:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #000;
        border-style: solid;
        border-width: 2px 0 2px 12px
    }
}

@media (max-width:768px) {
    .single-wrapper {
        position: relative
    }

    .single-wrapper .single-main {
        z-index: 1;
        position: relative
    }

    .single-wrapper .single-main .single-main-head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        color: #fff;
        background-color: #707d69;
        width: 100%;
        min-height: 56.66667vw;
        margin-top: 13.33333vw;
        padding: 6.66667vw
    }

    .single-wrapper .single-main .single-main-head .single-main-head-desc {
        text-align: justify;
        margin-top: 1.33333vw;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        font-weight: 700;
        line-height: 2;
        letter-spacing: .1em
    }

    .single-wrapper .single-main .single-main-body {
        margin: 13.33333vw 6.66667vw 24vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        line-height: 2;
        letter-spacing: .1em;
        text-align: justify
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body h3 {
        text-align: left;
        all: unset;
        display: block;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 8.66667vw;
        line-height: 1.5;
        letter-spacing: .12em;
        border-bottom: 2px solid #000;
        padding-bottom: 4vw;
        margin-bottom: 9.33333vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body h4 {
        text-align: left;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 6.66667vw;
        line-height: 1.5;
        letter-spacing: .1em;
        border-bottom: 1px solid #000;
        padding-bottom: 4.66667vw;
        margin-bottom: 5.33333vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body h6 {
        text-align: left;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 6.66667vw;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: .1em;
        margin-bottom: 2.66667vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body h6 .enclose {
        margin-bottom: 0;
        margin-right: 4vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body h6 .inner {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .no-margin {
        margin-bottom: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body hr {
        margin: 6.66667vw 0;
        border: none;
        height: 1px;
        background-color: #f2f2f2
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item {
        border-bottom: 1px solid #f2f2f2;
        padding: 0 0 13.33333vw;
        margin-bottom: 13.33333vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item:before {
        content: none
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item .partner-item-left {
        margin: 0 0 2.66667vw;
        text-align: left
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item .partner-item-left img {
        width: inherit;
        margin: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item .partner-item-right {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 6.66667vw;
        line-height: 1.7;
        letter-spacing: .1em;
        margin: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item .partner-item-right span {
        display: block;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .1em
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 60vw;
        height: 13.33333vw;
        background-color: #000;
        position: relative;
        color: #fff;
        text-decoration: none;
        text-indent: 1em;
        margin-top: 8vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .partner .partner-item a:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: 3px 0 3px 12px
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item {
        border-bottom: 1px solid #f2f2f2;
        padding: 0 0 13.33333vw;
        margin-bottom: 13.33333vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item:before {
        content: none
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-left {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        line-height: 1;
        letter-spacing: .1em;
        border-bottom: 1px solid #000;
        padding-bottom: 4.66667vw;
        margin-bottom: 5.33333vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-right {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 5.33333vw;
        line-height: 1.7;
        letter-spacing: .06em;
        margin: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-right span {
        display: block;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .1em;
        margin-bottom: 4vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-right-table {
        border-collapse: collapse;
        border: none;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 5.33333vw;
        line-height: 1.7;
        letter-spacing: .06em;
        margin: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-right-table tbody tr:nth-child(odd) {
        background-color: transparent
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-right-table tbody tr td,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-right-table tbody tr th {
        vertical-align: middle;
        border: none;
        padding: 0 1em 0 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .history .history-item .history-item-right-table tbody tr th {
        color: #000;
        background-color: transparent;
        text-align: left
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .enclose {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #f3d552;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-weight: 700;
        font-size: 3.73333vw;
        line-height: 1;
        letter-spacing: .06em;
        width: 38.66667vw;
        height: 6.66667vw;
        margin-bottom: 1.33333vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .tagline {
        display: block;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .04em;
        margin-top: 2.66667vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .arrow {
        display: block;
        background: url(/wp-content/themes/di-system/assets/image/single_parts_arrow.png) 50%/contain no-repeat scroll;
        width: 7.06667vw;
        height: 9.6vw;
        margin: 4vw 5.33333vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body iframe {
        width: 100%;
        height: 86.66667vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body blockquote,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body iframe,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body img,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body p,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ul {
        margin-bottom: 13.33333vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table a,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table blockquote,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table img,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table ol,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table p,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table table,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table ul {
        margin-bottom: inherit
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table img {
        width: inherit
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body h5 {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 4vw;
        line-height: 1.5;
        letter-spacing: .1em;
        border-bottom: 1px solid #ccc;
        padding-bottom: 4vw;
        margin-bottom: 5.33333vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body strong {
        font-weight: 700
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body img {
        width: 100%
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ul li {
        position: relative;
        padding-left: 8vw;
        padding-bottom: 4vw;
        line-height: 1.5
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ul li:last-of-type {
        padding-bottom: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ul li ul {
        margin-bottom: inherit
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ul li ul li {
        color: #999;
        padding-left: 1em;
        padding-top: 1.33333vw;
        padding-bottom: inherit;
        position: relative
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ul li ul li:last-of-type {
        padding-bottom: 1.33333vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ul li ul li:before {
        all: unset;
        content: "- ";
        position: absolute;
        top: 1.33333vw;
        left: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ul li:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        width: 3.73333vw;
        height: 3.73333vw;
        border-radius: 50%;
        border: .8vw solid #f3d552
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol {
        counter-reset: number
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol li {
        position: relative;
        padding-left: 8vw;
        padding-bottom: 4vw;
        line-height: 1.5
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol li:last-of-type {
        padding-bottom: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol li ul {
        margin-bottom: inherit
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol li ul li {
        color: #999;
        padding-left: 1em;
        padding-top: 1.33333vw;
        padding-bottom: inherit;
        position: relative
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol li ul li:last-of-type {
        padding-bottom: 1.33333vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol li ul li:before {
        all: unset;
        content: "- ";
        position: absolute;
        top: 1.33333vw;
        left: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body ol li:before {
        content: counter(number);
        counter-increment: number;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        width: 4.26667vw;
        height: 4.26667vw;
        border: .8vw solid #f3d552;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 2.66667vw;
        font-weight: 700;
        line-height: 4.26667vw;
        letter-spacing: .1em;
        text-align: center
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table {
        border-collapse: collapse;
        border: 1px solid #ccc;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 1.86667vw;
        line-height: 1.5;
        letter-spacing: .1em;
        width: 100%
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table small {
        font-size: 1.33333vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr:nth-child(odd) {
        background-color: #f2f2f2
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td,
    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr th {
        vertical-align: middle;
        border: 1px solid #ccc;
        padding: 1.33333vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr th {
        color: #fff;
        background-color: #666;
        text-align: center
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ul {
        padding: 2.66667vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ul li {
        position: relative;
        padding-left: 4vw;
        padding-bottom: 2.66667vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ul li:last-of-type {
        padding-bottom: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ul li ul {
        padding: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ul li ul li {
        color: #999;
        padding-left: 1em;
        padding-top: 1.33333vw;
        padding-bottom: 0;
        position: relative
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ul li ul li:last-of-type {
        padding-bottom: 1.33333vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ul li ul li:before {
        all: unset;
        content: "- ";
        position: absolute;
        top: 1.33333vw;
        left: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ul li:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        width: 1.6vw;
        height: 1.6vw;
        border-radius: 50%;
        border: .53333vw solid #f3d552
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ol {
        padding: 2.66667vw;
        counter-reset: number
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ol li {
        position: relative;
        padding-left: 4vw;
        padding-bottom: 2.66667vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ol li:last-of-type {
        padding-bottom: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ol li ul {
        padding: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ol li ul li {
        color: #999;
        padding-left: 1em;
        padding-top: 1.33333vw;
        padding-bottom: inherit;
        position: relative
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ol li ul li:before {
        all: unset;
        content: "- ";
        position: absolute;
        top: 1.33333vw;
        left: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ol li ol {
        padding: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ol li ol li {
        padding-left: 4vw;
        padding-top: 1.33333vw;
        padding-bottom: inherit;
        position: relative
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ol li ol li:before {
        top: 1.33333vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body table tbody tr td ol li:before {
        content: counter(number);
        counter-increment: number;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        width: 1.86667vw;
        height: 1.86667vw;
        border: .53333vw solid #f3d552;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 1.33333vw;
        line-height: 1.86667vw;
        letter-spacing: .1em;
        text-align: center
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body blockquote {
        border: 1px solid #ccc;
        padding: 10.66667vw
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body blockquote img {
        width: inherit;
        margin-bottom: 0
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .def {
        font-size: 3.73333vw;
        line-height: 2;
        letter-spacing: .1em
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body small {
        display: block;
        font-size: 3.2vw;
        line-height: 2;
        letter-spacing: .1em
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body a {
        text-decoration: underline;
        word-break: break-all
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .button {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #f3d552;
        width: 73.33333vw;
        height: 14.66667vw;
        color: #000;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 4.26667vw;
        line-height: 1;
        letter-spacing: .1em;
        padding-left: 1em;
        position: relative;
        overflow: hidden;
        margin: 2.66667vw 0;
        text-decoration: none
    }

    .single-wrapper .single-main .single-main-body .single-main-body-block .single-main-body-block-body .button:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #000;
        border-style: solid;
        border-width: .53333vw 0 .53333vw 2.93333vw
    }
}

@media (min-width:768px) {
    .top-main {
        position: relative;
        min-width: 1185px
    }

    .top-main .top-main-image-area {
        width: 100%;
        height: 100vh;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        padding-top: 78px;
        overflow: hidden
    }

    .top-main .top-main-image-area .top-main-image {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        opacity: 0;
        -webkit-transition: opacity 2s linear;
        transition: opacity 2s linear
    }

    .top-main .top-main-image-area .top-main-image.active {
        opacity: 1
    }

    .top-main .top-main-image-area .top-main-image:first-of-type {
        background: url(/wp-content/themes/di-system/assets/image/top_main_01.jpg) 50%/cover no-repeat scroll
    }

    .top-main .top-main-image-area .top-main-image:nth-of-type(2) {
        background: url(/wp-content/themes/di-system/assets/image/top_main_02.jpg) 50%/cover no-repeat scroll
    }

    .top-main .top-main-image-area .top-main-image:nth-of-type(3) {
        background: url(/wp-content/themes/di-system/assets/image/top_main_03.jpg) 50%/cover no-repeat scroll
    }

    .top-main .top-main-copy-wrapper {
        position: relative;
        margin: -100vh auto 0;
        padding: 160px 30px;
        max-width: 1350px
    }

    .top-main .top-main-copy-wrapper .top-main-copy {
        background-color: hsla(0, 0%, 100%, .9);
        color: #000;
        width: 520px;
        font-weight: 400;
        padding: 60px 45px
    }

    .top-main .top-main-copy-wrapper .top-main-copy .top-main-copy-head {
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 40px;
        line-height: 1.5;
        letter-spacing: .1em
    }

    .top-main .top-main-copy-wrapper .top-main-copy .top-main-copy-head .feature-setting-initial {
        -webkit-font-feature-settings: initial;
        font-feature-settings: normal
    }

    .top-main .top-main-copy-wrapper .top-main-copy .top-main-copy-head .feature-setting-initial,
    .top-main .top-main-copy-wrapper .top-main-copy .top-main-copy-head .feature-setting-palt {
        background: transparent -webkit-gradient(linear, left top, left bottom, color-stop(75%, transparent), color-stop(0, #f3d552)) repeat scroll 0 0;
        background: transparent linear-gradient(transparent 75%, #f3d552 0) repeat scroll 0 0
    }

    .top-main .top-main-copy-wrapper .top-main-copy .top-main-copy-body {
        line-height: 2.6;
        letter-spacing: .08em;
        margin-top: 60px;
        word-break: keep-all
    }

    .nothing,
    .top-main .top-main-copy-wrapper .top-main-copy .top-main-copy-body {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 15px
    }

    .nothing {
        line-height: 1;
        letter-spacing: .1em;
        text-align: center
    }

    .top-news {
        margin: 100px auto 0;
        max-width: 1350px;
        min-width: 1185px
    }

    .top-news ul {
        width: 800px;
        margin: 0 auto 40px
    }

    .top-news ul li {
        border-bottom: 1px solid #bfbfbf
    }

    .top-news ul li a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 15px 0;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 15px;
        line-height: 1.7;
        letter-spacing: .1em
    }

    .top-news ul li a .news-type {
        width: 30px;
        height: 30px;
        margin: 0 30px
    }

    .top-news ul li a .news-type,
    .top-news ul li a .news-type.news {
        background: url(/wp-content/themes/di-system/assets/image/news_icon_news.png) 50%/contain no-repeat scroll
    }

    .top-news ul li a .news-type.media {
        background: url(/wp-content/themes/di-system/assets/image/news_icon_media.png) 50%/contain no-repeat scroll
    }

    .top-news ul li a .news-type.training {
        background: url(/wp-content/themes/di-system/assets/image/news_icon_training.png) 50%/contain no-repeat scroll
    }

    .top-news ul li a .news-type.ir {
        background: url(/wp-content/themes/di-system/assets/image/news_icon_ir.png) 50%/contain no-repeat scroll
    }

    .top-news ul li a .news-title {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        word-break: break-all
    }

    .top-news ul li a .news-title.pdf:after {
        content: "";
        display: inline-block;
        position: relative;
        top: 4px;
        background: url(/wp-content/themes/di-system/assets/image/news_icon_pdf.png) 50%/contain no-repeat scroll;
        width: 20px;
        height: 20px;
        margin-left: 10px
    }

    .top-news ul li a:hover {
        opacity: .5
    }

    .top-news ul li:last-of-type {
        border-bottom: none
    }

    .top-news .top-news-viewall {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 290px;
        height: 60px;
        border: 2px solid #000;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .05em;
        padding-left: 1em;
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        z-index: 1;
        -webkit-transition: color .3s cubic-bezier(.19, 1, .22, 1);
        transition: color .3s cubic-bezier(.19, 1, .22, 1)
    }

    .top-news .top-news-viewall span {
        z-index: 2;
        position: relative
    }

    .top-news .top-news-viewall:hover {
        color: #fff
    }

    .top-news .top-news-viewall:hover:before {
        left: -2px
    }

    .top-news .top-news-viewall:hover:after {
        border-color: transparent transparent transparent #fff
    }

    .top-news .top-news-viewall:before {
        content: "";
        display: block;
        position: absolute;
        top: -2px;
        left: -290px;
        width: 290px;
        height: 60px;
        background-color: #000;
        -webkit-transition: left .3s cubic-bezier(.19, 1, .22, 1);
        transition: left .3s cubic-bezier(.19, 1, .22, 1)
    }

    .top-news .top-news-viewall:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #000;
        border-style: solid;
        border-width: 2px 0 2px 12px;
        -webkit-transition: border-color .3s cubic-bezier(.19, 1, .22, 1);
        transition: border-color .3s cubic-bezier(.19, 1, .22, 1)
    }

    .top-business,
    .top-topics {
        margin: 130px auto 0;
        max-width: 1350px;
        min-width: 1185px
    }

    .top-business .top-business-education,
    .top-business .top-business-improvement,
    .top-business .top-business-security {
        height: 540px;
        margin: 0 auto;
        padding: 0 60px;
        position: relative
    }

    .top-business .top-business-education .top-business-education-image,
    .top-business .top-business-education .top-business-improvement-image,
    .top-business .top-business-education .top-business-security-image,
    .top-business .top-business-improvement .top-business-education-image,
    .top-business .top-business-improvement .top-business-improvement-image,
    .top-business .top-business-improvement .top-business-security-image,
    .top-business .top-business-security .top-business-education-image,
    .top-business .top-business-security .top-business-improvement-image,
    .top-business .top-business-security .top-business-security-image {
        width: 100%;
        height: 100%
    }

    .top-business .top-business-education .top-business-security-image,
    .top-business .top-business-improvement .top-business-security-image,
    .top-business .top-business-security .top-business-security-image {
        background: url(/wp-content/themes/di-system/assets/image/top_business_security.jpg) 50%/cover no-repeat scroll
    }

    .top-business .top-business-education .top-business-education-image,
    .top-business .top-business-improvement .top-business-education-image,
    .top-business .top-business-security .top-business-education-image {
        background: url(/wp-content/themes/di-system/assets/image/top_business_education.jpg) 50%/cover no-repeat scroll
    }

    .top-business .top-business-education .top-business-improvement-image,
    .top-business .top-business-improvement .top-business-improvement-image,
    .top-business .top-business-security .top-business-improvement-image {
        background: url(/wp-content/themes/di-system/assets/image/top_business_improvement.jpg) 50%/cover no-repeat scroll
    }

    .top-business .top-business-education .top-business-education-link,
    .top-business .top-business-education .top-business-improvement-link,
    .top-business .top-business-education .top-business-security-link,
    .top-business .top-business-improvement .top-business-education-link,
    .top-business .top-business-improvement .top-business-improvement-link,
    .top-business .top-business-improvement .top-business-security-link,
    .top-business .top-business-security .top-business-education-link,
    .top-business .top-business-security .top-business-improvement-link,
    .top-business .top-business-security .top-business-security-link {
        position: absolute;
        bottom: 50px;
        right: 110px;
        width: 360px;
        height: 360px;
        background-color: hsla(0, 0%, 100%, .9);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .top-business .top-business-education .top-business-education-link p,
    .top-business .top-business-education .top-business-improvement-link p,
    .top-business .top-business-education .top-business-security-link p,
    .top-business .top-business-improvement .top-business-education-link p,
    .top-business .top-business-improvement .top-business-improvement-link p,
    .top-business .top-business-improvement .top-business-security-link p,
    .top-business .top-business-security .top-business-education-link p,
    .top-business .top-business-security .top-business-improvement-link p,
    .top-business .top-business-security .top-business-security-link p {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 15px;
        line-height: 2;
        letter-spacing: .1em
    }

    .top-business .top-business-education .top-business-education-link a,
    .top-business .top-business-education .top-business-improvement-link a,
    .top-business .top-business-education .top-business-security-link a,
    .top-business .top-business-improvement .top-business-education-link a,
    .top-business .top-business-improvement .top-business-improvement-link a,
    .top-business .top-business-improvement .top-business-security-link a,
    .top-business .top-business-security .top-business-education-link a,
    .top-business .top-business-security .top-business-improvement-link a,
    .top-business .top-business-security .top-business-security-link a {
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #000;
        width: 232px;
        height: 48px;
        color: #fff;
        font-family: Times New Roman, serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: .05em;
        padding-left: 1em;
        position: relative;
        margin-top: 20px;
        overflow: hidden
    }

    .top-business .top-business-education .top-business-education-link a span,
    .top-business .top-business-education .top-business-improvement-link a span,
    .top-business .top-business-education .top-business-security-link a span,
    .top-business .top-business-improvement .top-business-education-link a span,
    .top-business .top-business-improvement .top-business-improvement-link a span,
    .top-business .top-business-improvement .top-business-security-link a span,
    .top-business .top-business-security .top-business-education-link a span,
    .top-business .top-business-security .top-business-improvement-link a span,
    .top-business .top-business-security .top-business-security-link a span {
        z-index: 2;
        position: relative
    }

    .top-business .top-business-education .top-business-education-link a:hover,
    .top-business .top-business-education .top-business-improvement-link a:hover,
    .top-business .top-business-education .top-business-security-link a:hover,
    .top-business .top-business-improvement .top-business-education-link a:hover,
    .top-business .top-business-improvement .top-business-improvement-link a:hover,
    .top-business .top-business-improvement .top-business-security-link a:hover,
    .top-business .top-business-security .top-business-education-link a:hover,
    .top-business .top-business-security .top-business-improvement-link a:hover,
    .top-business .top-business-security .top-business-security-link a:hover {
        color: #000
    }

    .top-business .top-business-education .top-business-education-link a:hover:before,
    .top-business .top-business-education .top-business-improvement-link a:hover:before,
    .top-business .top-business-education .top-business-security-link a:hover:before,
    .top-business .top-business-improvement .top-business-education-link a:hover:before,
    .top-business .top-business-improvement .top-business-improvement-link a:hover:before,
    .top-business .top-business-improvement .top-business-security-link a:hover:before,
    .top-business .top-business-security .top-business-education-link a:hover:before,
    .top-business .top-business-security .top-business-improvement-link a:hover:before,
    .top-business .top-business-security .top-business-security-link a:hover:before {
        left: 0
    }

    .top-business .top-business-education .top-business-education-link a:hover:after,
    .top-business .top-business-education .top-business-improvement-link a:hover:after,
    .top-business .top-business-education .top-business-security-link a:hover:after,
    .top-business .top-business-improvement .top-business-education-link a:hover:after,
    .top-business .top-business-improvement .top-business-improvement-link a:hover:after,
    .top-business .top-business-improvement .top-business-security-link a:hover:after,
    .top-business .top-business-security .top-business-education-link a:hover:after,
    .top-business .top-business-security .top-business-improvement-link a:hover:after,
    .top-business .top-business-security .top-business-security-link a:hover:after {
        border-color: transparent transparent transparent #000
    }

    .top-business .top-business-education .top-business-education-link a:before,
    .top-business .top-business-education .top-business-improvement-link a:before,
    .top-business .top-business-education .top-business-security-link a:before,
    .top-business .top-business-improvement .top-business-education-link a:before,
    .top-business .top-business-improvement .top-business-improvement-link a:before,
    .top-business .top-business-improvement .top-business-security-link a:before,
    .top-business .top-business-security .top-business-education-link a:before,
    .top-business .top-business-security .top-business-improvement-link a:before,
    .top-business .top-business-security .top-business-security-link a:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: -232px;
        width: 232px;
        height: 48px;
        background-color: #f3d552;
        -webkit-transition: left .3s cubic-bezier(.19, 1, .22, 1);
        transition: left .3s cubic-bezier(.19, 1, .22, 1)
    }

    .top-business .top-business-education .top-business-education-link a:after,
    .top-business .top-business-education .top-business-improvement-link a:after,
    .top-business .top-business-education .top-business-security-link a:after,
    .top-business .top-business-improvement .top-business-education-link a:after,
    .top-business .top-business-improvement .top-business-improvement-link a:after,
    .top-business .top-business-improvement .top-business-security-link a:after,
    .top-business .top-business-security .top-business-education-link a:after,
    .top-business .top-business-security .top-business-improvement-link a:after,
    .top-business .top-business-security .top-business-security-link a:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: 2px 0 2px 12px
    }

    .top-business .top-business-education .top-business-education-link,
    .top-business .top-business-education .top-business-security-link,
    .top-business .top-business-improvement .top-business-education-link,
    .top-business .top-business-improvement .top-business-security-link,
    .top-business .top-business-security .top-business-education-link,
    .top-business .top-business-security .top-business-security-link {
        padding-left: 60px
    }

    .top-business .top-business-education .top-business-improvement-link,
    .top-business .top-business-improvement .top-business-improvement-link,
    .top-business .top-business-security .top-business-improvement-link {
        padding-left: 40px
    }

    .top-business .top-business-education {
        margin-top: 30px
    }

    .top-business .top-business-education .top-business-education-link {
        right: inherit;
        left: 110px
    }

    .top-business .top-business-improvement {
        margin-top: 30px
    }

    .top-case {
        margin: 130px auto 0;
        max-width: 1350px;
        min-width: 1185px
    }

    .top-case .top-case-inner {
        height: 540px;
        margin: 0 auto;
        padding: 0 60px;
        position: relative
    }

    .top-case .top-case-inner .top-case-inner-image {
        background: url(/wp-content/themes/di-system/assets/image/top_case.jpg) 50%/cover no-repeat scroll;
        width: 100%;
        height: 100%
    }

    .top-case .top-case-inner .top-case-inner-link {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 110px;
        width: 360px;
        height: 360px;
        margin: auto;
        background-color: hsla(0, 0%, 100%, .9);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding-left: 60px
    }

    .top-case .top-case-inner .top-case-inner-link p {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 15px;
        line-height: 2;
        letter-spacing: .1em
    }

    .top-case .top-case-inner .top-case-inner-link a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #000;
        width: 232px;
        height: 48px;
        color: #fff;
        font-family: Times New Roman, serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: .05em;
        padding-left: 1em;
        position: relative;
        margin-top: 20px;
        overflow: hidden
    }

    .top-case .top-case-inner .top-case-inner-link a span {
        z-index: 2;
        position: relative
    }

    .top-case .top-case-inner .top-case-inner-link a:hover {
        color: #000
    }

    .top-case .top-case-inner .top-case-inner-link a:hover:before {
        left: 0
    }

    .top-case .top-case-inner .top-case-inner-link a:hover:after {
        border-color: transparent transparent transparent #000
    }

    .top-case .top-case-inner .top-case-inner-link a:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: -232px;
        width: 232px;
        height: 48px;
        background-color: #f3d552;
        -webkit-transition: left .3s cubic-bezier(.19, 1, .22, 1);
        transition: left .3s cubic-bezier(.19, 1, .22, 1)
    }

    .top-case .top-case-inner .top-case-inner-link a:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: 2px 0 2px 12px
    }

    .top-voice {
        margin: 130px auto 90px;
        max-width: 1350px;
        min-width: 1185px
    }

    .top-voice .top-voice-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0 auto;
        padding: 0 60px;
        position: relative
    }

    .top-voice .top-voice-inner .top-voice-inner-block {
        width: 50%;
        height: auto;
        position: relative;
        margin: -1px
    }

    .top-voice .top-voice-inner .top-voice-inner-block:before {
        content: "";
        display: block;
        padding-top: 60%
    }

    .top-voice .top-voice-inner .top-voice-inner-block.top-voice-inner-block-ex {
        border: 5px solid #f3d552;
        background: url(/wp-content/themes/di-system/assets/image/header_logo.svg) 50% 40%/168px auto no-repeat scroll
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-image img {
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-link {
        position: absolute;
        background-color: hsla(0, 0%, 100%, .9);
        width: 210px;
        height: 210px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 20px 30px;
        height: auto;
        min-height: 210px;
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-link .top-voice-inner-block-text {
        font-size: 12px;
        line-height: 1.6;
        letter-spacing: .08em;
        margin-bottom: 10px
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-link .top-voice-inner-block-sp {
        display: none
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-link .top-voice-inner-block-pc {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #000;
        color: #fff;
        width: 127px;
        height: 36px;
        font-family: Times New Roman, serif;
        font-size: 11px;
        line-height: 1;
        letter-spacing: .05em;
        padding-left: 1em;
        position: relative;
        overflow: hidden
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-link .top-voice-inner-block-pc span {
        z-index: 2;
        position: relative
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-link .top-voice-inner-block-pc:hover {
        color: #000
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-link .top-voice-inner-block-pc:hover:before {
        left: 0
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-link .top-voice-inner-block-pc:hover:after {
        border-color: transparent transparent transparent #000
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-link .top-voice-inner-block-pc:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: -127px;
        width: 127px;
        height: 36px;
        background-color: #f3d552;
        -webkit-transition: left .3s cubic-bezier(.19, 1, .22, 1);
        transition: left .3s cubic-bezier(.19, 1, .22, 1)
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-link .top-voice-inner-block-pc:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: 2px 0 2px 6px
    }
}

@media (max-width:768px) {
    .top-main {
        position: relative
    }

    .top-main .top-main-image-area {
        width: 100%;
        height: 100vw;
        padding-top: 13.33333vw;
        position: relative;
        overflow: hidden
    }

    .top-main .top-main-image-area .top-main-image {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        opacity: 0;
        -webkit-transition: opacity 2s linear;
        transition: opacity 2s linear
    }

    .top-main .top-main-image-area .top-main-image.active {
        opacity: 1
    }

    .top-main .top-main-image-area .top-main-image:first-of-type {
        background: url(/wp-content/themes/di-system/assets/image/top_main_01_sp.jpg) 50%/cover no-repeat scroll
    }

    .top-main .top-main-image-area .top-main-image:nth-of-type(2) {
        background: url(/wp-content/themes/di-system/assets/image/top_main_02_sp.jpg) 50%/cover no-repeat scroll
    }

    .top-main .top-main-image-area .top-main-image:nth-of-type(3) {
        background: url(/wp-content/themes/di-system/assets/image/top_main_03_sp.jpg) 50%/cover no-repeat scroll
    }

    .top-main .top-main-copy {
        position: relative;
        font-weight: 400
    }

    .top-main .top-main-copy .top-main-copy-head {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 8.66667vw;
        line-height: 1.7;
        letter-spacing: 0;
        margin: 8vw 6.66667vw 0 10.66667vw
    }

    .top-main .top-main-copy .top-main-copy-head .feature-setting-initial,
    .top-main .top-main-copy .top-main-copy-head .feature-setting-palt {
        background: transparent -webkit-gradient(linear, left top, left bottom, color-stop(75%, transparent), color-stop(0, #f3d552)) repeat scroll 0 0;
        background: transparent linear-gradient(transparent 75%, #f3d552 0) repeat scroll 0 0
    }

    .top-main .top-main-copy .top-main-copy-body {
        line-height: 2;
        letter-spacing: 0;
        margin: 6.66667vw 6.66667vw 0 10.66667vw
    }

    .nothing,
    .top-main .top-main-copy .top-main-copy-body {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw
    }

    .nothing {
        line-height: 1;
        letter-spacing: .1em;
        text-align: center
    }

    .top-news {
        margin: 13.33333vw 6.66667vw 0
    }

    .top-news ul li {
        border-bottom: 1px solid #bfbfbf;
        padding: 5.33333vw 13.33333vw 5.33333vw 0;
        position: relative
    }

    .top-news ul li:first-of-type {
        padding-top: 0
    }

    .top-news ul li:before {
        display: block;
        right: 0;
        background-color: #000;
        width: 10.66667vw;
        height: 10.66667vw
    }

    .top-news ul li:after,
    .top-news ul li:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto
    }

    .top-news ul li:after {
        right: 4.13333vw;
        width: 0;
        height: 0;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: .53333vw 0 .53333vw 2.93333vw
    }

    .top-news ul li a {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        letter-spacing: .1em
    }

    .top-news ul li a .news-time {
        display: block;
        color: #999;
        line-height: 1
    }

    .top-news ul li a .news-type {
        display: none
    }

    .top-news ul li a .news-title {
        display: block;
        line-height: 1.5;
        word-break: break-all;
        margin-top: 2.66667vw
    }

    .top-news ul li a .news-title.pdf:after {
        content: "";
        display: inline-block;
        position: relative;
        top: 1.33333vw;
        background: url(/wp-content/themes/di-system/assets/image/news_icon_pdf.png) 50%/contain no-repeat scroll;
        width: 5.33333vw;
        height: 5.33333vw;
        margin-left: 1.33333vw
    }

    .top-news .top-news-viewall {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 60vw;
        height: 13.33333vw;
        background-color: #000;
        color: #fff;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.46667vw;
        line-height: 1;
        letter-spacing: .1em;
        text-indent: 1em;
        position: relative;
        margin: 8vw auto 0
    }

    .top-news .top-news-viewall:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: .53333vw 0 .53333vw 2.93333vw
    }

    .top-topics {
        margin: 21.33333vw 13.33333vw 0
    }

    .top-business {
        margin-top: 21.33333vw
    }

    .top-business .top-business-education,
    .top-business .top-business-improvement,
    .top-business .top-business-security {
        position: relative;
        margin-bottom: 15.33333vw
    }

    .top-business .top-business-education .top-business-education-image,
    .top-business .top-business-education .top-business-improvement-image,
    .top-business .top-business-education .top-business-security-image,
    .top-business .top-business-improvement .top-business-education-image,
    .top-business .top-business-improvement .top-business-improvement-image,
    .top-business .top-business-improvement .top-business-security-image,
    .top-business .top-business-security .top-business-education-image,
    .top-business .top-business-security .top-business-improvement-image,
    .top-business .top-business-security .top-business-security-image {
        width: 100%;
        height: 56vw
    }

    .top-business .top-business-education .top-business-security-image,
    .top-business .top-business-improvement .top-business-security-image,
    .top-business .top-business-security .top-business-security-image {
        background: url(/wp-content/themes/di-system/assets/image/top_business_security_sp.jpg) 50%/cover no-repeat scroll
    }

    .top-business .top-business-education .top-business-education-image,
    .top-business .top-business-improvement .top-business-education-image,
    .top-business .top-business-security .top-business-education-image {
        background: url(/wp-content/themes/di-system/assets/image/top_business_education_sp.jpg) 50%/cover no-repeat scroll
    }

    .top-business .top-business-education .top-business-improvement-image,
    .top-business .top-business-improvement .top-business-improvement-image,
    .top-business .top-business-security .top-business-improvement-image {
        background: url(/wp-content/themes/di-system/assets/image/top_business_improvement_sp.jpg) 50%/cover no-repeat scroll
    }

    .top-business .top-business-education .top-business-education-link,
    .top-business .top-business-education .top-business-improvement-link,
    .top-business .top-business-education .top-business-security-link,
    .top-business .top-business-improvement .top-business-education-link,
    .top-business .top-business-improvement .top-business-improvement-link,
    .top-business .top-business-improvement .top-business-security-link,
    .top-business .top-business-security .top-business-education-link,
    .top-business .top-business-security .top-business-improvement-link,
    .top-business .top-business-security .top-business-security-link {
        margin-top: 4vw
    }

    .top-business .top-business-education .top-business-education-link p,
    .top-business .top-business-education .top-business-improvement-link p,
    .top-business .top-business-education .top-business-security-link p,
    .top-business .top-business-improvement .top-business-education-link p,
    .top-business .top-business-improvement .top-business-improvement-link p,
    .top-business .top-business-improvement .top-business-security-link p,
    .top-business .top-business-security .top-business-education-link p,
    .top-business .top-business-security .top-business-improvement-link p,
    .top-business .top-business-security .top-business-security-link p {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        line-height: 2;
        letter-spacing: .1em;
        text-align: center
    }

    .top-business .top-business-education .top-business-education-link a,
    .top-business .top-business-education .top-business-improvement-link a,
    .top-business .top-business-education .top-business-security-link a,
    .top-business .top-business-improvement .top-business-education-link a,
    .top-business .top-business-improvement .top-business-improvement-link a,
    .top-business .top-business-improvement .top-business-security-link a,
    .top-business .top-business-security .top-business-education-link a,
    .top-business .top-business-security .top-business-improvement-link a,
    .top-business .top-business-security .top-business-security-link a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 60vw;
        height: 13.33333vw;
        background-color: #000;
        color: #fff;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.46667vw;
        line-height: 1;
        letter-spacing: .1em;
        text-indent: 1em;
        position: relative;
        margin: 6.66667vw auto 0
    }

    .top-business .top-business-education .top-business-education-link a:after,
    .top-business .top-business-education .top-business-improvement-link a:after,
    .top-business .top-business-education .top-business-security-link a:after,
    .top-business .top-business-improvement .top-business-education-link a:after,
    .top-business .top-business-improvement .top-business-improvement-link a:after,
    .top-business .top-business-improvement .top-business-security-link a:after,
    .top-business .top-business-security .top-business-education-link a:after,
    .top-business .top-business-security .top-business-improvement-link a:after,
    .top-business .top-business-security .top-business-security-link a:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: .53333vw 0 .53333vw 2.93333vw
    }

    .top-business .top-business-improvement {
        margin-bottom: 0
    }

    .top-case {
        margin-top: 21.33333vw
    }

    .top-case .top-case-inner {
        position: relative
    }

    .top-case .top-case-inner .top-case-inner-image {
        background: url(/wp-content/themes/di-system/assets/image/top_case_sp.jpg) 50%/cover no-repeat scroll;
        width: 100%;
        height: 56vw
    }

    .top-case .top-case-inner .top-case-inner-link {
        margin-top: 4vw
    }

    .top-case .top-case-inner .top-case-inner-link p {
        font-size: 3.73333vw;
        line-height: 2;
        text-align: center
    }

    .top-case .top-case-inner .top-case-inner-link a,
    .top-case .top-case-inner .top-case-inner-link p {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        letter-spacing: .1em
    }

    .top-case .top-case-inner .top-case-inner-link a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 60vw;
        height: 13.33333vw;
        background-color: #000;
        color: #fff;
        font-size: 3.46667vw;
        line-height: 1;
        text-indent: 1em;
        position: relative;
        margin: 6.66667vw auto 0
    }

    .top-case .top-case-inner .top-case-inner-link a:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: .53333vw 0 .53333vw 2.93333vw
    }

    .top-voice {
        margin: 21.33333vw 0
    }

    .top-voice .top-voice-inner {
        margin: 0 13.33333vw
    }

    .top-voice .top-voice-inner .top-voice-inner-block {
        width: 100%;
        height: auto;
        position: relative
    }

    .top-voice .top-voice-inner .top-voice-inner-block:last-of-type .top-voice-inner-block-link {
        margin-bottom: 0
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-text {
        display: block;
        font-size: 3.2vw;
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: 0
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-image {
        width: 100%;
        height: 41.33333vw
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-image img {
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-link {
        margin: 2.66667vw 0 6.66667vw;
        padding-right: 13.33333vw;
        min-height: 10.66667vw;
        position: relative;
        top: inherit !important;
        bottom: inherit !important;
        left: inherit !important;
        right: inherit !important;
        float: inherit !important
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-link .top-voice-inner-block-pc {
        display: none
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-link:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background-color: #000;
        width: 10.66667vw;
        height: 10.66667vw
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-link:after {
        content: "";
        position: absolute;
        top: 4.8vw;
        right: 4.13333vw;
        width: 0;
        height: 0;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: .53333vw 0 .53333vw 2.93333vw
    }

    .top-voice .top-voice-inner .top-voice-inner-block .top-voice-inner-block-sp {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0
    }
}

@media (min-width:768px) {
    .voices-lists-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 90px
    }

    .voices-lists-wrapper .voices-lists {
        width: 100%;
        padding-left: 50px
    }

    .voices-lists-wrapper .voices-lists .voices-list {
        width: 100%;
        margin-bottom: 100px;
        position: relative
    }

    .voices-lists-wrapper .voices-lists .voices-list:hover .voices-list-image {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: .8
    }

    .voices-lists-wrapper .voices-lists .voices-list:hover .voices-list-link .voices-list-arrow {
        background-color: #f3d552
    }

    .voices-lists-wrapper .voices-lists .voices-list:hover .voices-list-link .voices-list-arrow:after {
        border-color: transparent transparent transparent #000
    }

    .voices-lists-wrapper .voices-lists .voices-list .voices-list-image-wrapper {
        overflow: hidden
    }

    .voices-lists-wrapper .voices-lists .voices-list .voices-list-image-wrapper .voices-list-image {
        width: 100%;
        height: auto;
        position: relative;
        -webkit-transition: opacity .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), transform .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1)
    }

    .voices-lists-wrapper .voices-lists .voices-list .voices-list-image-wrapper .voices-list-image:before {
        content: "";
        display: block;
        padding-top: 56.25%
    }

    .voices-lists-wrapper .voices-lists .voices-list .voices-list-image-wrapper .voices-list-image img {
        position: absolute;
        top: 0;
        left: 0;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .voices-lists-wrapper .voices-lists .voices-list .voices-list-link {
        position: relative;
        margin-top: 10px;
        padding-right: 80px;
        min-height: 50px
    }

    .voices-lists-wrapper .voices-lists .voices-list .voices-list-link .voices-list-title {
        padding-top: 8px;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 20px;
        line-height: 1.7;
        letter-spacing: .1em
    }

    .voices-lists-wrapper .voices-lists .voices-list .voices-list-link .voices-list-tagline {
        margin-top: 10px;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: .1em
    }

    .voices-lists-wrapper .voices-lists .voices-list .voices-list-link .voices-list-arrow {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #000;
        width: 50px;
        height: 50px
    }

    .voices-lists-wrapper .voices-lists .voices-list .voices-list-link .voices-list-arrow:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: 3px 0 3px 12px
    }

    .voices-lists-wrapper .voices-lists .voices-list a {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        font-size: 0;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden
    }

    .voices-wrapper {
        position: relative;
        margin: 130px auto 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        max-width: 1350px;
        min-width: 1185px;
        padding: 0 0 0 30px
    }

    .voices-wrapper .voices-main {
        z-index: 1;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding-left: 240px;
        position: relative
    }

    .voices-wrapper .voices-main .voices-main-head {
        width: 100%;
        position: relative
    }

    .voices-wrapper .voices-main .voices-main-head .voices-main-head-image {
        width: 100%;
        height: 450px;
        overflow: hidden
    }

    .voices-wrapper .voices-main .voices-main-head .voices-main-head-image img {
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .voices-wrapper .voices-main .voices-main-head .voices-main-head-text {
        position: absolute;
        left: 73px;
        bottom: 97px;
        width: 210px;
        height: 210px;
        background-color: hsla(0, 0%, 100%, .9);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        padding: 0 30px
    }

    .voices-wrapper .voices-main .voices-main-head .voices-main-head-text .voices-main-head-text-position {
        display: block;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .08em;
        margin-bottom: 10px
    }

    .voices-wrapper .voices-main .voices-main-head .voices-main-head-text .voices-main-head-text-h2 {
        display: block;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .08em;
        padding-bottom: 15px;
        margin-bottom: 15px;
        position: relative
    }

    .voices-wrapper .voices-main .voices-main-head .voices-main-head-text .voices-main-head-text-h2:after {
        content: "";
        background-color: #f3d552;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 35px;
        height: 2px
    }

    .voices-wrapper .voices-main .voices-main-body {
        padding-right: 30px
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 50px
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-block .voices-main-body-block-head-wrapper {
        border-right: 2px solid #7f7f7f
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-block .voices-main-body-block-head-wrapper .voices-main-body-block-head {
        width: 284px;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 25px;
        font-weight: 400;
        line-height: 2.4;
        letter-spacing: .2em
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-block .voices-main-body-block-head-dummy {
        width: 284px;
        border-right: 2px solid #7f7f7f
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-block .voices-main-body-block-body {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding-left: 50px;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        line-height: 2.5;
        letter-spacing: .1em;
        text-align: justify
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-block .voices-main-body-block-body p {
        margin-bottom: 40px
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-block .voices-main-body-block-image {
        width: 100%;
        height: 590px;
        overflow: hidden
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-block .voices-main-body-block-image img {
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other {
        margin-top: 100px;
        width: 100%
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other h3 {
        position: relative;
        font-family: Times New Roman, serif;
        font-size: 40px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: .05em;
        text-align: center;
        padding-bottom: 40px;
        margin: 0 auto 50px
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other h3:after {
        content: "";
        background-color: #f3d552;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 50px;
        height: 3px
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list {
        width: 33.3333%;
        padding: 0 10px
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list a:hover .eyecatch-wrapper .eyecatch {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: .8
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list a .eyecatch-wrapper {
        overflow: hidden
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list a .eyecatch-wrapper .eyecatch {
        width: 100%;
        height: auto;
        -webkit-transition: opacity .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), transform .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1)
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list a .eyecatch-wrapper .eyecatch:before {
        content: "";
        display: block;
        padding-top: 55%
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list a .eyecatch-wrapper .eyecatch img {
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list a .voices-main-body-other-list-link {
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        margin-top: 10px
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list a .voices-main-body-other-list-link .voices-main-body-other-list-position {
        font-size: 13px;
        line-height: 1.2;
        letter-spacing: .08em
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list a .voices-main-body-other-list-link .voices-main-body-other-list-name {
        margin-top: 5px;
        font-size: 18px;
        line-height: 1.4;
        letter-spacing: .08em;
        margin-bottom: 5px
    }
}

@media (max-width:768px) {
    .voices-lists-wrapper .voices-lists {
        width: 100%
    }

    .voices-lists-wrapper .voices-lists .voices-list {
        width: 100%;
        position: relative;
        border-bottom: 1px solid #f2f2f2;
        padding: 0 0 13.33333vw;
        margin-bottom: 13.33333vw
    }

    .voices-lists-wrapper .voices-lists .voices-list:first-of-type {
        margin-top: 0
    }

    .voices-lists-wrapper .voices-lists .voices-list .voices-list-image-wrapper .voices-list-image {
        width: 100%;
        height: auto;
        position: relative
    }

    .voices-lists-wrapper .voices-lists .voices-list .voices-list-image-wrapper .voices-list-image:before {
        content: "";
        display: block;
        padding-top: 56.25%
    }

    .voices-lists-wrapper .voices-lists .voices-list .voices-list-image-wrapper .voices-list-image img {
        position: absolute;
        top: 0;
        left: 0;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .voices-lists-wrapper .voices-lists .voices-list .voices-list-link {
        position: relative
    }

    .voices-lists-wrapper .voices-lists .voices-list .voices-list-link .voices-list-title {
        margin-top: 5.33333vw;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 6.66667vw;
        line-height: 1.6;
        letter-spacing: .12em
    }

    .voices-lists-wrapper .voices-lists .voices-list .voices-list-link .voices-list-tagline {
        margin-top: 2.66667vw;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        line-height: 1.6;
        letter-spacing: .1em
    }

    .voices-lists-wrapper .voices-lists .voices-list .voices-list-link .voices-list-arrow {
        display: none
    }

    .voices-lists-wrapper .voices-lists .voices-list a {
        margin-top: 8vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #000;
        width: 60vw;
        height: 13.33333vw;
        color: #fff;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 4vw;
        line-height: 1;
        letter-spacing: .1em;
        text-indent: 1em;
        position: relative;
        text-decoration: none
    }

    .voices-lists-wrapper .voices-lists .voices-list a:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: .53333vw 0 .53333vw 2.93333vw
    }

    .voices-wrapper {
        position: relative
    }

    .voices-wrapper .voices-main {
        z-index: 1;
        position: relative
    }

    .voices-wrapper .voices-main .voices-main-head {
        width: 100%;
        position: relative
    }

    .voices-wrapper .voices-main .voices-main-head .voices-main-head-image {
        width: 100%;
        height: 56.66667vw;
        margin-top: 13.33333vw;
        overflow: hidden
    }

    .voices-wrapper .voices-main .voices-main-head .voices-main-head-image img {
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .voices-wrapper .voices-main .voices-main-head .voices-main-head-text {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        margin: 13.33333vw 6.66667vw 0
    }

    .voices-wrapper .voices-main .voices-main-head .voices-main-head-text .voices-main-head-text-position {
        display: block;
        font-size: 3.73333vw;
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: .1em
    }

    .voices-wrapper .voices-main .voices-main-head .voices-main-head-text .voices-main-head-text-h2 {
        display: block;
        font-size: 5.33333vw;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: .1em;
        margin-bottom: 2vw
    }

    .voices-wrapper .voices-main .voices-main-body {
        margin: 4vw 6.66667vw 24vw
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-block {
        margin-top: 12vw
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-block:first-of-type {
        margin-top: 0
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-block .voices-main-body-block-head-wrapper {
        padding-bottom: 10.66667vw;
        margin-bottom: 9.33333vw;
        border-bottom: 1px solid #000
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-block .voices-main-body-block-head-wrapper .voices-main-body-block-head {
        display: inline;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 8.66667vw;
        font-weight: 400;
        line-height: 1.7;
        letter-spacing: .1em;
        background: transparent -webkit-gradient(linear, left top, left bottom, color-stop(85%, transparent), color-stop(0, #f3d552)) repeat scroll 0 0;
        background: transparent linear-gradient(transparent 85%, #f3d552 0) repeat scroll 0 0
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-block .voices-main-body-block-head-dummy {
        display: none
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-block .voices-main-body-block-body {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        line-height: 2;
        letter-spacing: .1em;
        text-align: justify
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-block .voices-main-body-block-image {
        width: 100%;
        height: 54.66667vw;
        overflow: hidden
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-block .voices-main-body-block-image img {
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other {
        margin-top: 21.33333vw
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other h3 {
        position: relative;
        font-family: Times New Roman, serif;
        font-size: 5.33333vw;
        font-weight: 400;
        line-height: 1;
        letter-spacing: .05em;
        text-align: center;
        padding-bottom: 5.33333vw;
        margin: 0 auto 11.33333vw
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other h3:after {
        content: "";
        background-color: #f3d552;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 6.66667vw;
        height: .4vw
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list {
        width: 100%;
        margin-bottom: 10.66667vw
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list:last-of-type {
        margin-bottom: 18.66667vw
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list a .eyecatch-wrapper .eyecatch {
        width: 100%;
        height: auto;
        overflow: hidden
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list a .eyecatch-wrapper .eyecatch:before {
        content: "";
        display: block;
        padding-top: 55%
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list a .eyecatch-wrapper .eyecatch img {
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list a .voices-main-body-other-list-link {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        margin-top: 2.66667vw;
        padding-right: 13.33333vw;
        min-height: 10.66667vw;
        position: relative
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list a .voices-main-body-other-list-link:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background-color: #000;
        width: 10.66667vw;
        height: 10.66667vw
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list a .voices-main-body-other-list-link:after {
        content: "";
        position: absolute;
        top: 4.8vw;
        right: 4.13333vw;
        width: 0;
        height: 0;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: .53333vw 0 .53333vw 2.93333vw
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list a .voices-main-body-other-list-link .voices-main-body-other-list-position {
        font-size: 3.73333vw;
        line-height: 1.2;
        letter-spacing: .08em
    }

    .voices-wrapper .voices-main .voices-main-body .voices-main-body-other .voices-main-body-other-lists .voices-main-body-other-list a .voices-main-body-other-list-link .voices-main-body-other-list-name {
        font-size: 4.26667vw;
        line-height: 1.4;
        letter-spacing: .08em;
        margin-bottom: 1.33333vw
    }
}

@media (min-width:768px) {

    .archive-h2,
    .page-h2-wrapper .page-h2,
    .page-h2-wrapper .single-h2,
    .single-h2-wrapper .page-h2,
    .single-h2-wrapper .single-h2 {
        all: unset;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        letter-spacing: .14em;
        position: relative
    }

    .archive-h2 {
        font-size: 45px;
        line-height: 1;
        display: block;
        margin-bottom: 40px
    }

    .page-h2-wrapper .page-h2,
    .page-h2-wrapper .single-h2,
    .single-h2-wrapper .page-h2,
    .single-h2-wrapper .single-h2 {
        font-size: 35px;
        line-height: 1.5;
        border-bottom: 2px solid #fff
    }

    .single-h3-wrapper {
        border-right: 2px solid #7f7f7f
    }

    .single-h3-wrapper .single-h3 {
        width: 245px;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 25px;
        line-height: 2;
        letter-spacing: .1em;
        padding-right: 20px
    }

    .single-h3-wrapper .single-h3 .narrow {
        letter-spacing: 0
    }

    .top-h3 {
        position: relative;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 30px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: .05em;
        text-align: center;
        padding-bottom: 20px;
        margin: 0 auto 60px
    }

    .top-h3:after {
        content: "";
        background-color: #f3d552;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 50px;
        height: 3px
    }

    .top-h3.tagline {
        font-size: 40px;
        padding-bottom: 70px
    }

    .top-h3.tagline:before {
        content: "";
        position: absolute;
        bottom: 45px;
        left: 0;
        right: 0;
        margin: 0 auto;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 17px;
        line-height: 1;
        letter-spacing: .05em
    }

    .top-h3.business:before {
        content: "\793E\5185\30B7\30B9\30C6\30E0\306E\300C\56F0\3063\305F\300D\3092\89E3\6C7A\3059\308B"
    }

    .top-h3.case:before {
        content: "\5C0E\5165\4E8B\4F8B\3067\898B\308B\3001\4F01\696D\304C  D.I.System\3092\9078\3093\3060\7406\7531"
    }

    .top-h3.voice:before {
        content: "\300C\610F\8B58\3057\306A\3044\300D\3092\3064\304F\308B"
    }

    .top-h4 {
        position: relative;
        font-family: Times New Roman, serif;
        font-size: 34px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: .05em;
        padding-bottom: 50px;
        margin-bottom: 20px
    }

    .top-h4:before {
        content: "";
        position: absolute;
        bottom: 25px;
        left: 0;
        right: 0;
        margin: 0 auto;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 15px;
        line-height: 1;
        letter-spacing: .1em
    }

    .top-h4.security:before {
        content: "\30BB\30AD\30E5\30EA\30C6\30A3\30B7\30B9\30C6\30E0\5C0E\5165"
    }

    .top-h4.education:before {
        content: "\49\54\30fb\30d3\30b8\30cd\30b9\7814\4fee"
    }

    .top-h4.improvement:before {
        content: "\30B7\30B9\30C6\30E0\5C0E\5165\306B\3088\308B\696D\52D9\6539\5584"
    }

    .top-h4.case {
        padding-bottom: 20px
    }

    .top-h4:after {
        content: "";
        background-color: #f3d552;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 4px
    }

    .top-h5 {
        position: relative;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        padding-bottom: 10px;
        margin-bottom: 10px
    }

    .top-h5 .h5-small {
        display: block;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: .04em;
        margin-bottom: 5px
    }

    .top-h5 .h5-big {
        display: block;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: .08em
    }

    .top-h5:after {
        content: "";
        background-color: #f3d552;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 35px;
        height: 2px
    }
}

@media (max-width:768px) {

    .archive-h2,
    .page-h2-wrapper .page-h2,
    .page-h2-wrapper .single-h2,
    .single-h2-wrapper .page-h2,
    .single-h2-wrapper .single-h2 {
        all: unset;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 8.66667vw;
        line-height: 1.7;
        letter-spacing: .14em
    }

    .archive-h2 {
        background: transparent -webkit-gradient(linear, left top, left bottom, color-stop(85%, transparent), color-stop(0, #f3d552)) repeat scroll 0 0;
        background: transparent linear-gradient(transparent 85%, #f3d552 0) repeat scroll 0 0
    }

    .page-h2-wrapper .page-h2,
    .page-h2-wrapper .single-h2,
    .single-h2-wrapper .page-h2,
    .single-h2-wrapper .single-h2 {
        border-bottom: .8vw solid #fff
    }

    .single-h3-wrapper {
        margin-bottom: 6vw
    }

    .single-h3-wrapper .single-h3 {
        all: unset;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 8.66667vw;
        line-height: 1.7;
        letter-spacing: .1em;
        background: transparent -webkit-gradient(linear, left top, left bottom, color-stop(85%, transparent), color-stop(0, #f3d552)) repeat scroll 0 0;
        background: transparent linear-gradient(transparent 85%, #f3d552 0) repeat scroll 0 0
    }

    .top-h3 {
        position: relative;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        font-size: 7.73333vw;
        font-weight: 400;
        line-height: 1;
        letter-spacing: .05em;
        text-align: center;
        padding-bottom: 5.33333vw;
        margin: 0 auto 6.66667vw
    }

    .top-h3:after {
        content: "";
        background-color: #f3d552;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 13.33333vw;
        height: .8vw
    }

    .top-h3.tagline {
        font-size: 7.73333vw;
        padding-bottom: 14vw
    }

    .top-h3.tagline:before {
        content: "";
        position: absolute;
        bottom: 7.33333vw;
        left: 0;
        right: 0;
        margin: 0 auto;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        line-height: 1;
        letter-spacing: .05em
    }

    .top-h3.business:before {
        content: "\793E\5185\30B7\30B9\30C6\30E0\306E\300C\56F0\3063\305F\300D\3092\89E3\6C7A\3059\308B"
    }

    .top-h3.case:before {
        content: "\5C0E\5165\4E8B\4F8B\3067\898B\308B\3001\4F01\696D\304C  D.I.System\3092\9078\3093\3060\7406\7531"
    }

    .top-h3.voice:before {
        content: "\300C\610F\8B58\3057\306A\3044\300D\3092\3064\304F\308B"
    }

    .top-h4 {
        position: relative;
        font-family: Times New Roman, serif;
        font-size: 6vw;
        font-weight: 400;
        line-height: 1;
        letter-spacing: .08em;
        padding-bottom: 12vw;
        margin-bottom: 4vw;
        text-align: center
    }

    .top-h4:before {
        content: "";
        position: absolute;
        bottom: 5.33333vw;
        left: 0;
        right: 0;
        margin: 0 auto;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 3.73333vw;
        line-height: 1;
        letter-spacing: .1em
    }

    .top-h4.security:before {
        content: "\30BB\30AD\30E5\30EA\30C6\30A3\30B7\30B9\30C6\30E0\5C0E\5165"
    }

    .top-h4.education:before {
        content: "\49\54\30fb\30d3\30b8\30cd\30b9\7814\4fee"
    }

    .top-h4.improvement:before {
        content: "\30B7\30B9\30C6\30E0\5C0E\5165\306B\3088\308B\696D\52D9\6539\5584"
    }

    .top-h4:after {
        content: "";
        background-color: #f3d552;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 10.66667vw;
        height: .53333vw
    }

    .top-h5 {
        position: relative;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif
    }

    .top-h5 .h5-small {
        font-size: 3.2vw;
        line-height: 1.2;
        letter-spacing: 0
    }

    .top-h5 .h5-big,
    .top-h5 .h5-small {
        display: block;
        font-weight: 400;
        margin-bottom: 1.33333vw
    }

    .top-h5 .h5-big {
        font-size: 4.26667vw;
        line-height: 1.4;
        letter-spacing: .08em
    }
}

@media (min-width:768px) {
    .main-without-inquiry {
        height: 150px
    }

    .main-inquiry {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border: 5px solid #f3d552;
        font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, ＭＳ Ｐ明朝, ＭＳ 明朝, serif;
        line-height: 1;
        letter-spacing: .2em;
        margin: 100px auto 150px
    }

    .main-inquiry .main-inquiry-text {
        font-size: 20px;
        margin-top: 40px
    }

    .main-inquiry .main-inquiry-tel-lists {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 25px
    }

    .main-inquiry .main-inquiry-tel-lists li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 21px;
        margin-right: 30px
    }

    .main-inquiry .main-inquiry-tel-lists li a:hover {
        text-decoration: underline
    }

    .main-inquiry .main-inquiry-tel-lists li:last-of-type {
        margin-right: 0
    }

    .main-inquiry .main-inquiry-tel-lists li span {
        font-size: 15px;
        background-color: #f3d552;
        padding: 3px 5px 3px 8px;
        margin-right: 10px
    }

    .main-inquiry .main-inquiry-note {
        font-size: 15px;
        margin-top: 15px
    }

    .main-inquiry .main-inquiry-link {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 290px;
        height: 60px;
        border: 2px solid #000;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .05em;
        padding-left: 1em;
        position: relative;
        margin: 40px auto;
        overflow: hidden;
        z-index: 1;
        -webkit-transition: color .3s cubic-bezier(.19, 1, .22, 1);
        transition: color .3s cubic-bezier(.19, 1, .22, 1)
    }

    .main-inquiry .main-inquiry-link span {
        z-index: 2;
        position: relative
    }

    .main-inquiry .main-inquiry-link:hover {
        color: #fff
    }

    .main-inquiry .main-inquiry-link:hover:before {
        left: -2px
    }

    .main-inquiry .main-inquiry-link:hover:after {
        border-color: transparent transparent transparent #fff
    }

    .main-inquiry .main-inquiry-link:before {
        content: "";
        display: block;
        position: absolute;
        top: -2px;
        left: -290px;
        width: 290px;
        height: 60px;
        background-color: #000;
        -webkit-transition: left .3s cubic-bezier(.19, 1, .22, 1);
        transition: left .3s cubic-bezier(.19, 1, .22, 1)
    }

    .main-inquiry .main-inquiry-link:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1em;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #000;
        border-style: solid;
        border-width: 2px 0 2px 12px;
        -webkit-transition: border-color .3s cubic-bezier(.19, 1, .22, 1);
        transition: border-color .3s cubic-bezier(.19, 1, .22, 1)
    }
}

@media (max-width:768px) {
    .main-inquiry {
        border: 5px solid #f3d552;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 0 6vw
    }

    .main-inquiry .main-inquiry-text {
        text-align: center;
        font-size: 6.13333vw;
        line-height: 1.3;
        letter-spacing: .1em;
        margin: 8vw auto 5.33333vw
    }

    .main-inquiry .main-inquiry-tel-lists {
        width: 100%
    }

    .main-inquiry .main-inquiry-tel-lists li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 4.66667vw;
        line-height: 1;
        letter-spacing: .1em;
        border-top: 1px solid #bfbfbf;
        position: relative;
        padding: 4.66667vw 0
    }

    .main-inquiry .main-inquiry-tel-lists li:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #000;
        border-style: solid;
        border-width: .53333vw 0 .53333vw 2.93333vw
    }

    .main-inquiry .main-inquiry-tel-lists li:last-of-type {
        border-bottom: 1px solid #bfbfbf
    }

    .main-inquiry .main-inquiry-tel-lists li span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 2.93333vw;
        line-height: 1;
        letter-spacing: .2em;
        background-color: #f3d552;
        width: 12.66667vw;
        height: 4.8vw;
        margin-right: 2vw
    }

    .main-inquiry .main-inquiry-note {
        display: none
    }

    .main-inquiry .main-inquiry-link {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 14.66667vw;
        background-color: #f3d552;
        font-size: 4.26667vw;
        font-weight: 400;
        line-height: 1;
        letter-spacing: .1em;
        text-indent: 1em;
        position: relative;
        margin: 5.33333vw auto 8vw
    }

    .main-inquiry .main-inquiry-link:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 2vw;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #000;
        border-style: solid;
        border-width: .53333vw 0 .53333vw 2.93333vw
    }
}

@media (min-width:768px) {
    .sidebar {
        z-index: 2;
        position: fixed;
        top: 130px;
        width: 180px;
        min-width: 180px
    }

    .sidebar .sidebar-lists .sidebar-list {
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 0;
        border-bottom: 1px solid #f2f2f2
    }

    .sidebar .sidebar-lists {
        display: flex;
        flex-wrap: wrap;
    }
    .sidebar .sidebar-lists .sidebar-list {
        width: 100%;
    }

    .sidebar .sidebar-lists .sidebar-list.head {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        padding: 15px 0;
        font-size: 16px;
        font-weight: 700;
        border-bottom: 1px solid #f2f2f2;
        order:1;
    }
    .sidebar .sidebar-lists .sidebar-list:has(.cat-it-business-training) {
        order:4;
    }
    .sidebar .sidebar-lists .sidebar-list:has(.cat-infrastructure-security) {
        order:3;
    }
    .sidebar .sidebar-lists .sidebar-list:has(.cat-system) {
        order:2;
    }

    .sidebar .sidebar-lists .sidebar-list strong {
        font-size: 16px;
        font-weight: 700
    }

    .sidebar .sidebar-lists .sidebar-list.current ul {
        padding: 0 0 15px
    }

    .sidebar .sidebar-lists .sidebar-list.current a {
        padding: 15px 0;
        background-color: #f3d552
    }

    .sidebar .sidebar-lists .sidebar-list a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        padding: 15px 0
    }

    .sidebar .sidebar-lists .sidebar-list a:hover {
        background-color: #f3d552
    }

    .sidebar .sidebar-lists .sidebar-list ul .sidebar-list-sub.current a {
        color: #f3d552
    }

    .sidebar .sidebar-lists .sidebar-list ul .sidebar-list-sub a {
        background-color: inherit;
        border: none;
        font-size: 12px;
        padding: 0 0 0 1em;
        margin: 15px 0 0
    }

    .sidebar .sidebar-lists .sidebar-list ul .sidebar-list-sub a:hover {
        color: #f3d552
    }
}

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

@media (min-width:768px) {
    .topics-area-sp {
        display: none
    }

    .glide {
        margin: 0 auto
    }

    .glide .glide__track {
        z-index: 3;
        position: relative
    }

    .glide .glide__arrows {
        position: absolute;
        top: 0;
        width: 100%;
        height: auto
    }

    .glide .glide__arrows:before {
        z-index: 2;
        position: relative;
        content: "";
        display: block;
        padding-top: 21.09375%
    }

    .glide .glide__arrows .glide__arrow {
        z-index: 4;
        background-color: #000;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 60px;
        height: 60px;
        margin: auto;
        -webkit-transition: opacity .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1);
        cursor: pointer
    }

    .glide .glide__arrows .glide__arrow:hover {
        background-color: #f3d552
    }

    .glide .glide__arrows .glide__arrow:hover.glide__arrow--left:after {
        border-color: transparent #000 transparent transparent
    }

    .glide .glide__arrows .glide__arrow:hover.glide__arrow--right:after {
        border-color: transparent transparent transparent #000
    }

    .glide .glide__arrows .glide__arrow.glide__arrow--left {
        left: 0
    }

    .glide .glide__arrows .glide__arrow.glide__arrow--left:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent #fff transparent transparent;
        border-style: solid;
        border-width: 3px 12px 3px 0
    }

    .glide .glide__arrows .glide__arrow.glide__arrow--right {
        right: 0
    }

    .glide .glide__arrows .glide__arrow.glide__arrow--right:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 0;
        height: 0;
        margin: auto;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: 3px 0 3px 12px
    }

    .topics-area .topics a:hover .eyecatch {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: .8
    }

    .topics-area .topics a .eyecatch-wrapper {
        overflow: hidden
    }

    .topics-area .topics a .eyecatch-wrapper .eyecatch {
        width: 100%;
        height: auto;
        background-color: #fff;
        position: relative;
        -webkit-transition: opacity .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), transform .5s cubic-bezier(.19, 1, .22, 1);
        transition: opacity .5s cubic-bezier(.19, 1, .22, 1), transform .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1)
    }

    .topics-area .topics a .eyecatch-wrapper .eyecatch:before {
        content: "";
        display: block;
        padding-top: 63.8297872340426%
    }

    .topics-area .topics a .eyecatch-wrapper .eyecatch img {
        position: absolute;
        top: 0;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .topics-area .topics a .topics-list-title {
        text-align: left;
        margin: 10px 0 0 15px;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-weight: 400;
        font-size: 15px;
        line-height: 2;
        letter-spacing: .05em
    }
}

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

    .topics-area-sp .topics:last-of-type .topics-list-title {
        margin-bottom: 0
    }

    .topics-area-sp .topics a .eyecatch-wrapper {
        overflow: hidden
    }

    .topics-area-sp .topics a .eyecatch-wrapper .eyecatch {
        width: 100%;
        height: auto;
        background-color: #fff;
        position: relative
    }

    .topics-area-sp .topics a .eyecatch-wrapper .eyecatch:before {
        content: "";
        display: block;
        padding-top: 63.8297872340426%
    }

    .topics-area-sp .topics a .eyecatch-wrapper .eyecatch img {
        position: absolute;
        top: 0;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .topics-area-sp .topics a .topics-list-title {
        text-align: left;
        font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
        font-weight: 400;
        font-size: 3.73333vw;
        line-height: 1.5;
        letter-spacing: .1em;
        word-break: break-all;
        margin: 2.66667vw 0 6.66667vw;
        padding-right: 13.33333vw;
        min-height: 10.66667vw;
        position: relative
    }

    .topics-area-sp .topics a .topics-list-title:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background-color: #000;
        width: 10.66667vw;
        height: 10.66667vw
    }

    .topics-area-sp .topics a .topics-list-title:after {
        content: "";
        position: absolute;
        top: 4.8vw;
        right: 4.13333vw;
        width: 0;
        height: 0;
        border-color: transparent transparent transparent #fff;
        border-style: solid;
        border-width: .53333vw 0 .53333vw 2.4vw
    }
}

.top-voice-inner-block.top-voice-inner-block-ex .main-voices-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #f3d552;
    color: #000;
    width: 100%;
    height: 14.66667vw;
    font-family: Times New Roman, serif;
    font-size: 4.26667vw;
    line-height: 1;
    letter-spacing: .01em;
    padding-left: 1em;
    position: relative;
    overflow: hidden;
    position: absolute;
    top: 49%;
    right: 0;
    left: 0;
}

.top-voice-inner-block.top-voice-inner-block-ex .main-voices-link::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2vw;
    width: 0;
    height: 0;
    margin: auto;
    border-color: transparent transparent transparent #000;
    border-style: solid;
    border-width: .53333vw 0 .53333vw 2.93333vw;
}

.top-voice-inner-block.top-voice-inner-block-ex {
    padding: 6.66667vw 0;
}


@media (min-width:768px) {
    .top-voice-inner-block.top-voice-inner-block-ex .main-voices-link {
    width: 167px;
    height: 36px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .05em;
    padding-left: 1em;
    position: relative;
    overflow: hidden;
    position: absolute;
    top: 49%;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.top-voice-inner-block.top-voice-inner-block-ex .main-voices-link::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -167px;
    width: 167px;
    height: 36px;
    background-color: #000;
    -webkit-transition: left .3s cubic-bezier(.19, 1, .22, 1);
    transition: left .3s cubic-bezier(.19, 1, .22, 1);
}

.top-voice-inner-block.top-voice-inner-block-ex .main-voices-link::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1em;
    width: 0;
    height: 0;
    border-width: 2px 0 2px 6px;
}

.top-voice-inner-block.top-voice-inner-block-ex .main-voices-link span {
    z-index: 2;
    position: relative
}

.top-voice-inner-block.top-voice-inner-block-ex .main-voices-link:hover {
    color: #fff
}

.top-voice-inner-block.top-voice-inner-block-ex .main-voices-link:hover:before {
    left: 0
}

.top-voice-inner-block.top-voice-inner-block-ex .main-voices-link:hover:after {
    border-color: transparent transparent transparent #fff
}

.top-voice-inner-block.top-voice-inner-block-ex {
    padding: 0;
}
}