@import"https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;900&display=swap";

@font-face {
    font-display: block;
    font-family: icon;
    font-style: normal;
    font-weight: 400
}


.c_head_main_logo {
    width: 261px;
}

.c_nav_logo {
    width: 308px;
}

.c_head,
.c_foot {
    font-family: 'Noto Sans JP', sans-serif;
}

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

blockquote,
body,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
p {
    margin: 0
}

ol[role=list],
ul[role=list] {
    list-style: none
}

html:focus-within {
    scroll-behavior: smooth
}

body {
    line-height: 1.5;
    text-rendering: optimizeSpeed
}

a:not([class]) {
    text-decoration-skip-ink: auto
}

img,
picture {
    display: block;
    max-width: 100%
}

button,
input,
select,
textarea {
    font: inherit
}

@media(prefers-reduced-motion:reduce) {
    html:focus-within {
        scroll-behavior: auto
    }

    *,
    :after,
    :before {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important
    }
}

table {
    border-collapse: collapse
}

:root {
    --spacing--0: 0;
    --spacing--default: 0.5rem;
    --spacing--m: 1rem;
    --spacing--l: 1.5rem;
    --spacing--xl: 2rem;
    --font-size--s: 0.8rem;
    --font-size--m: 1rem;
    --font-size--l: 1.25rem;
    --font-size--xl: 1.5rem;
    --font-size--xxl: 2rem;
    --color--main: #23318e;
    --color--sub: #00a8b1;
    --color--black: #000;
    --color--white: #fff;
    --color--none: transparent;
    --color--btn__reset: #a3a3a3;
    --color--red: red;
    --color--orange: #ff8000;
    --color--yellow: #ff0;
    --color--green: #00a8b1;
    --color--blue: #23318e;
    --color--gray: #666;
    --color--lightgray: #ccc;
    --color--bg: #e1f4ff;
    --color--text: #111;
    --color--error: #c00;
    --color--link: #900;
    --color--hover: #111;
    --color--btn_bg: #111;
    --color--btn_txt: #fff;
    --color--border: #111;
    --color--hamburger: #111;
    --gallery-block--gutter-size: var(--spacing-default)
}

.has-s-font-size {
    font-size: var(--font-size--s) !important
}

.has-m-font-size {
    font-size: var(--font-size--m) !important
}

.has-l-font-size {
    font-size: var(--font-size--l) !important
}

.has-xl-font-size {
    font-size: var(--font-size--xl) !important
}

.has-xxl-font-size {
    font-size: var(--font-size--xxl) !important
}

.has-main {
    color: var(--color--main) !important
}

.has-sub {
    color: var(--color--sub) !important
}

.has-black {
    color: var(--color--black) !important
}

.has-white {
    color: var(--color--white) !important
}

.has-none {
    color: var(--color--none) !important
}

.has-btn__reset {
    color: var(--color--btn__reset) !important
}

.has-red {
    color: var(--color--red) !important
}

.has-orange {
    color: var(--color--orange) !important
}

.has-yellow {
    color: var(--color--yellow) !important
}

.has-green {
    color: var(--color--green) !important
}

.has-blue {
    color: var(--color--blue) !important
}

.has-gray {
    color: var(--color--gray) !important
}

.has-lightgray {
    color: var(--color--lightgray) !important
}

.has-bg {
    color: var(--color--bg) !important
}

.has-text {
    color: var(--color--text) !important
}

.has-error {
    color: var(--color--error) !important
}

.has-link {
    color: var(--color--link) !important
}

.has-hover {
    color: var(--color--hover) !important
}

.has-btn_bg {
    color: var(--color--btn_bg) !important
}

.has-btn_txt {
    color: var(--color--btn_txt) !important
}

.has-border {
    color: var(--color--border) !important
}

.has-hamburger {
    color: var(--color--hamburger) !important
}

.has-main-background-color {
    background-color: var(--color--main) !important
}

.has-sub-background-color {
    background-color: var(--color--sub) !important
}

.has-black-background-color {
    background-color: var(--color--black) !important
}

.has-white-background-color {
    background-color: var(--color--white) !important
}

.has-none-background-color {
    background-color: var(--color--none) !important
}

.has-btn__reset-background-color {
    background-color: var(--color--btn__reset) !important
}

.has-red-background-color {
    background-color: var(--color--red) !important
}

.has-orange-background-color {
    background-color: var(--color--orange) !important
}

.has-yellow-background-color {
    background-color: var(--color--yellow) !important
}

.has-green-background-color {
    background-color: var(--color--green) !important
}

.has-blue-background-color {
    background-color: var(--color--blue) !important
}

.has-gray-background-color {
    background-color: var(--color--gray) !important
}

.has-lightgray-background-color {
    background-color: var(--color--lightgray) !important
}

.has-bg-background-color {
    background-color: var(--color--bg) !important
}

.has-text-background-color {
    background-color: var(--color--text) !important
}

.has-error-background-color {
    background-color: var(--color--error) !important
}

.has-link-background-color {
    background-color: var(--color--link) !important
}

.has-hover-background-color {
    background-color: var(--color--hover) !important
}

.has-btn_bg-background-color {
    background-color: var(--color--btn_bg) !important
}

.has-btn_txt-background-color {
    background-color: var(--color--btn_txt) !important
}

.has-border-background-color {
    background-color: var(--color--border) !important
}

.has-hamburger-background-color {
    background-color: var(--color--hamburger) !important
}

.cf:after {
    content: "";
    display: block
}

.cf:after,
.clear,
.clr {
    clear: both
}

ol,
ul {
    margin-left: 0;
    padding-left: 0
}

ol>li,
ul>li {
    line-height: 1.4;
    margin-top: .8em;
    padding-left: 0;
    text-indent: 0
}

ol>li ol:last-child,
ol>li ul:last-child,
ul>li ol:last-child,
ul>li ul:last-child {
    padding-bottom: 1em
}

ol>a,
ol>span,
ul>a,
ul>span {
    text-indent: 0
}

ul {
    padding-left: 1.2em
}

ul>li {
    list-style-type: circle;
    padding-left: 0;
    text-indent: 0
}

ol {
    list-style: decimal
}

ol li {
    list-style-position: inside
}

ol li ol {
    margin-left: 1.5em
}

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

.ul-reset li {
    list-style: none;
    margin-top: 0;
    padding-left: 0;
    text-indent: 0
}

.ul-reset li::marker {
    content: none
}

table:not(.acf-table) tr {
    height: auto !important
}

table:not(.acf-table) tr td,
table:not(.acf-table) tr th {
    border: 1px solid var(--color--border);
    padding: .75em 1em
}

table:not(.acf-table) tr th {
    background: var(--color--bg)
}

table:not(.acf-table) tr td {
    background: var(--color--white)
}

img {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    display: inline-block;
    height: auto;
    max-width: 100%;
    vertical-align: top;
    width: auto
}

em,
strong {
    font-weight: 700
}

address,
li,
p,
small,
td,
th {
    line-height: 1.8
}

:focus,
a,
a:focus {
    outline: none
}

a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: opacity .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out, border .3s ease-in-out, top .3s ease-in-out, filter .3s ease-in-out, box-shadow .3s ease-in-out
}

a[target=_blank]:after {
    content: "\e405"
}

a[href$=".pdf"]:after,
a[target=_blank]:after {
    font-family: icon;
    speak: none;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    vertical-align: middle
}

a[href$=".pdf"]:after {
    content: "\e404"
}

a[href$=".xls"]:after,
a[href$=".xlsx"]:after {
    content: "\e401"
}

a[href$=".doc"]:after,
a[href$=".docx"]:after,
a[href$=".xls"]:after,
a[href$=".xlsx"]:after {
    font-family: icon;
    speak: none;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    vertical-align: middle
}

a[href$=".doc"]:after,
a[href$=".docx"]:after {
    content: "\e402"
}

a[href$=".zip"]:after {
    content: "\e403";
    font-family: icon;
    speak: none;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    vertical-align: middle
}

button,
input[type=button],
input[type=reset],
input[type=submit] {
    transition: opacity .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out, border .3s ease-in-out, top .3s ease-in-out, filter .3s ease-in-out
}

form button,
form input[type=button],
form input[type=submit] {
    align-items: center;
    background: var(--color--main);
    border: 2px solid var(--color--main);
    border-radius: 4px;
    color: var(--color--white);
    cursor: pointer;
    display: inline-flex;
    gap: .5em;
    justify-content: center;
    line-height: 1.3;
    margin-block: .25em;
    padding: 1em 1.9em 1em 1.5em;
    text-align: center;
    text-decoration: none;
    width: auto
}

@media(hover:hover) {

    form button:hover,
    form input[type=button]:hover,
    form input[type=submit]:hover {
        background-color: var(--color--white);
        border-color: var(--color--main);
        color: var(--color--main)
    }
}

form button:before,
form input[type=button]:before,
form input[type=submit]:before {
    content: "\e004";
    font-family: icon;
    speak: none;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    vertical-align: middle
}

form input[type=reset] {
    align-items: center;
    background: var(--color--main);
    background: var(--color--btn__reset);
    border: 2px solid var(--color--main);
    border-color: var(--color--btn__reset);
    border-radius: 4px;
    color: var(--color--white);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    gap: .5em;
    justify-content: center;
    line-height: 1.3;
    margin-block: .25em;
    padding: 1em 1.9em 1em 1.5em;
    text-align: center;
    text-decoration: none;
    width: auto
}

@media(hover:hover) {
    form input[type=reset]:hover {
        background-color: var(--color--white);
        border-color: var(--color--main);
        color: var(--color--main)
    }
}

form input[type=reset]:before {
    content: "\e004";
    font-family: icon;
    speak: none;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    vertical-align: middle
}

@media(hover:hover) {
    form input[type=reset]:hover {
        background: var(--color--white);
        border-color: hsla(0, 0%, 64%, .4);
        color: var(--color--btn__reset)
    }
}

form input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=reset]):not([type=submit]),
form select,
form textarea {
    appearance: none;
    background-color: #fff;
    border: 1px solid var(--color--lightgray);
    border-radius: 0;
    cursor: pointer;
    font-family: Zen Kaku Gothic New, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    outline: none;
    padding-block: 1em;
    padding-inline: 1.4em;
    transition: border .3s
}

form input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=reset]):not([type=submit]):focus,
form select:focus,
form textarea:focus {
    border-color: #000
}

form input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=reset]):not([type=submit]):invalid,
form select:invalid,
form textarea:invalid {
    background-color: #fcefef
}

form input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=reset]):not([type=submit]):valid,
form select:valid,
form textarea:valid {
    background-color: #e6eeee
}

form input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=reset]):not([type=submit]):placeholder-shown,
form select:placeholder-shown,
form textarea:placeholder-shown {
    background-color: #f8f8f8
}

form ::placeholder {
    font-family: Zen Kaku Gothic New, sans-serif
}

form input:-webkit-autofill {
    box-shadow: inset 0 0 0 1000px #e6eeee
}

form input[type=checkbox],
form input[type=radio] {
    border: none
}

form input[type=radio] {
    appearance: radio;
    border-radius: 100%
}

form input[type=email],
form input[type=tel],
form input[type=text],
form input[type=url] {
    width: 100%
}

form input[type=date] {
    width: 50%
}

form input[type=number] {
    width: 8em
}

form textarea {
    height: 200px;
    width: 100%
}

form .select-wrap {
    display: inline-block;
    position: relative
}

form .select-wrap:after {
    color: var(--color--gray);
    content: "\e102";
    font-family: icon;
    height: 100%;
    pointer-events: none;
    position: absolute;
    right: .8em;
    speak: none;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    align-items: center;
    display: inline-block;
    display: inline-flex;
    justify-content: center;
    vertical-align: middle
}

form select {
    appearance: none;
    background-color: #fff !important;
    padding-right: 3em
}

form .select-wrap:before {
    border-color: #e8f0fe transparent transparent;
    border-style: solid;
    border-width: 6px 6px 0;
    bottom: 0;
    content: "";
    height: 0;
    left: auto;
    margin-top: -3px;
    position: absolute;
    right: 1em;
    top: 50%;
    width: 0
}

form .select-wrap.changed:before {
    border-color: var(--color--main) transparent transparent transparent;
    border-style: solid;
    border-width: 15px 15px 0 0;
    content: "";
    height: 0;
    left: 0;
    margin-top: 0;
    position: absolute;
    top: 0;
    width: 0
}

form .select-wrap.changed select {
    background-color: #e6eeee !important
}

form .select-wrap .wpcf7-form-control-wrap {
    position: relative
}

form .select-wrap .wpcf7-form-control-wrap:after {
    border-color: #ccc transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0;
    content: "";
    height: 0;
    margin-top: -3px;
    pointer-events: none;
    position: absolute;
    right: .5em;
    top: 50%;
    width: 0
}

form .wpcf7-spinner {
    display: none !important
}

form label {
    cursor: pointer;
    display: inline-block;
    margin-left: 1em
}

form label:first-child {
    margin-left: 0
}

form .btn-area {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
    margin-block: 1.5em;
    width: 100%
}

.error {
    color: var(--color--error);
    display: block;
    font-size: .75rem;
    margin-top: .5em !important;
    width: 100%
}

.icon {
    align-items: center;
    display: flex
}

.icon:before {
    font-family: icon;
    speak: none;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    vertical-align: middle
}

.icon-c_arrow-t:before {
    content: "\e001"
}

.icon-c_arrow-b:before {
    content: "\e002"
}

.icon-c_arrow-l:before {
    content: "\e003"
}

.icon-c_arrow-r:before {
    content: "\e004"
}

.icon-arrow-t:before {
    content: "\e101"
}

.icon-arrow-b:before {
    content: "\e102"
}

.icon-arrow-l:before {
    content: "\e103"
}

.icon-arrow-r:before {
    content: "\e104"
}

.icon-up:before {
    content: "\e301"
}

.icon-down:before {
    content: "\e302"
}

.icon-prev:before {
    content: "\e303"
}

.icon-next:before {
    content: "\e304"
}

.icon-first:before {
    content: "\e305"
}

.icon-end:before {
    content: "\e306"
}

.icon-excel:before {
    content: "\e401"
}

.icon-word:before {
    content: "\e402"
}

.icon-zip:before {
    content: "\e403"
}

.icon-pdf:before {
    content: "\e404"
}

.icon-blank:before {
    content: "\e405"
}

.icon-twitter:before {
    content: "\e501"
}

.icon-facebook:before {
    content: "\e502"
}

.icon-instagram:before {
    content: "\e503"
}

.icon-youtube:before {
    content: "\e504"
}

.icon-search:before {
    content: "\e601"
}

.icon-tag:before {
    content: "\e602"
}

.icon-access:before {
    content: "\e603"
}

.icon-check:before {
    content: "\e604"
}

.icon-filter:before {
    content: "\e605"
}

.icon-mail:before {
    content: "\e701"
}

.icon-phone:before {
    content: "\e702"
}

.icon-mobile:before {
    content: "\e703"
}

.icon-pc:before {
    content: "\e704"
}

.icon-calendar:before {
    content: "\e801"
}

.icon-warning:before {
    content: "\e802"
}

@media print {
    body {
        margin-top: 0 !important;
        min-width: 1000px;
        padding-top: 0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact
    }

    #go-top {
        display: none
    }
}

.pc-view {
    display: inherit !important
}

.sp-view {
    display: none !important
}

@media only screen and (max-width:640px) {
    .pc-view {
        display: none !important
    }

    .sp-view {
        display: inherit !important
    }
}

.link-arw a,
a.link-arw {
    color: var(--color--link);
    display: inline-block;
    gap: 6px;
    line-height: 1.4;
    margin-block: .25em;
    padding-left: 1.2em;
    text-decoration: none;
    text-indent: -.6em
}

.link-arw a:before,
a.link-arw:before {
    content: "\e004";
    font-family: icon;
    speak: none;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    margin-bottom: .13em;
    margin-right: .2em;
    vertical-align: middle
}

.link-arw a:after,
a.link-arw:after {
    text-indent: 0
}

@media(hover:hover) {

    .link-arw a:hover,
    a.link-arw:hover {
        color: var(--color--hover);
        opacity: 1
    }
}

.btn__basic,
.btn__basic a,
.btn__basic button,
.is-style-btn__basic a,
.is-style-btn__basic button,
.wp-block-button__link,
a.btn__basic,
a.is-style-btn__basic,
button.btn__basic,
button.is-style-btn__basic {
    align-items: center;
    background: var(--color--main);
    border: 2px solid var(--color--main);
    border-radius: 4px;
    color: var(--color--white);
    cursor: pointer;
    display: inline-flex;
    gap: .5em;
    justify-content: center;
    line-height: 1.3;
    margin-block: .25em;
    padding: 1em 1.9em 1em 1.5em;
    text-align: center;
    text-decoration: none;
    width: auto
}

@media(hover:hover) {

    .btn__basic a:hover,
    .btn__basic button:hover,
    .btn__basic:hover,
    .is-style-btn__basic a:hover,
    .is-style-btn__basic button:hover,
    .wp-block-button__link:hover,
    a.btn__basic:hover,
    a.is-style-btn__basic:hover,
    button.btn__basic:hover,
    button.is-style-btn__basic:hover {
        background-color: var(--color--white);
        border-color: var(--color--main);
        color: var(--color--main)
    }
}

.btn__basic a:before,
.btn__basic button:before,
.btn__basic:before,
.is-style-btn__basic a:before,
.is-style-btn__basic button:before,
.wp-block-button__link:before,
a.btn__basic:before,
a.is-style-btn__basic:before,
button.btn__basic:before,
button.is-style-btn__basic:before {
    content: "\e004";
    font-family: icon;
    speak: none;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    vertical-align: middle
}

.btn__outline,
.btn__outline a,
.btn__outline button,
.is-style-btn__outline a,
.is-style-btn__outline button,
a.btn__outline,
a.is-style-btn__outline,
button.btn__outline,
button.is-style-btn__outline {
    align-items: center;
    background: var(--color--main);
    background: #fff;
    border: 2px solid var(--color--main);
    border-radius: 4px;
    color: var(--color--white);
    color: var(--color--main);
    cursor: pointer;
    display: inline-flex;
    gap: .5em;
    justify-content: center;
    line-height: 1.3;
    margin-block: .25em;
    padding: 1em 1.9em 1em 1.5em;
    text-align: center;
    text-decoration: none;
    width: auto
}

@media(hover:hover) {

    .btn__outline a:hover,
    .btn__outline button:hover,
    .btn__outline:hover,
    .is-style-btn__outline a:hover,
    .is-style-btn__outline button:hover,
    a.btn__outline:hover,
    a.is-style-btn__outline:hover,
    button.btn__outline:hover,
    button.is-style-btn__outline:hover {
        background-color: var(--color--white);
        border-color: var(--color--main);
        color: var(--color--main)
    }
}

.btn__outline a:before,
.btn__outline button:before,
.btn__outline:before,
.is-style-btn__outline a:before,
.is-style-btn__outline button:before,
a.btn__outline:before,
a.is-style-btn__outline:before,
button.btn__outline:before,
button.is-style-btn__outline:before {
    content: "\e004";
    font-family: icon;
    speak: none;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    vertical-align: middle
}

@media(hover:hover) {

    .btn__outline a:hover,
    .btn__outline button:hover,
    .btn__outline:hover,
    .is-style-btn__outline a:hover,
    .is-style-btn__outline button:hover,
    a.btn__outline:hover,
    a.is-style-btn__outline:hover,
    button.btn__outline:hover,
    button.is-style-btn__outline:hover {
        background: var(--color--main);
        color: var(--color--white)
    }
}

.btn__reset,
.btn__reset a,
.btn__reset button,
.is-style-btn__reset a,
.is-style-btn__reset button,
a.btn__reset,
a.is-style-btn__reset,
button.btn__reset,
button.is-style-btn__reset {
    align-items: center;
    background: var(--color--main);
    background: var(--color--btn__reset);
    border: 2px solid var(--color--main);
    border-color: var(--color--btn__reset);
    border-radius: 4px;
    color: var(--color--white);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    gap: .5em;
    justify-content: center;
    line-height: 1.3;
    margin-block: .25em;
    padding: 1em 1.9em 1em 1.5em;
    text-align: center;
    text-decoration: none;
    width: auto
}

@media(hover:hover) {

    .btn__reset a:hover,
    .btn__reset button:hover,
    .btn__reset:hover,
    .is-style-btn__reset a:hover,
    .is-style-btn__reset button:hover,
    a.btn__reset:hover,
    a.is-style-btn__reset:hover,
    button.btn__reset:hover,
    button.is-style-btn__reset:hover {
        background-color: var(--color--white);
        border-color: var(--color--main);
        color: var(--color--main)
    }
}

.btn__reset a:before,
.btn__reset button:before,
.btn__reset:before,
.is-style-btn__reset a:before,
.is-style-btn__reset button:before,
a.btn__reset:before,
a.is-style-btn__reset:before,
button.btn__reset:before,
button.is-style-btn__reset:before {
    content: "\e004";
    font-family: icon;
    speak: none;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    vertical-align: middle
}

@media(hover:hover) {

    .btn__reset a:hover,
    .btn__reset button:hover,
    .btn__reset:hover,
    .is-style-btn__reset a:hover,
    .is-style-btn__reset button:hover,
    a.btn__reset:hover,
    a.is-style-btn__reset:hover,
    button.btn__reset:hover,
    button.is-style-btn__reset:hover {
        background: var(--color--white);
        border-color: hsla(0, 0%, 64%, .4);
        color: var(--color--btn__reset)
    }
}

form button,
form button.btn__basic,
form button.btn__outline,
form button.btn__reset,
form input[type=button],
form input[type=submit] {
    min-width: 8em
}

form button.btn__basic:before,
form button.btn__outline:before,
form button.btn__reset:before,
form button:before,
form input[type=button]:before,
form input[type=submit]:before {
    content: none !important
}

.has-text-align-center {
    text-align: center
}

.has-text-align-left {
    text-align: left
}

.has-text-align-right {
    text-align: right
}

.alignleft,
.alignright,
img.alignleft,
img.alignright {
    clear: both;
    height: auto;
    max-width: 48% !important;
    width: 48% !important
}

@media screen and (max-width:480px) {

    .alignleft,
    .alignright,
    img.alignleft,
    img.alignright {
        max-width: 100% !important;
        width: 100% !important
    }
}

:has(.alignright, .alignleft):after {
    clear: both;
    content: "";
    display: block
}

.aligncenter,
.alignfull,
.alignleft,
.alignright,
.alignwide {
    display: flex;
    flex-wrap: wrap
}

.aligncenter img,
.alignfull img,
.alignleft img,
.alignright img,
.alignwide img {
    display: block;
    height: auto;
    line-height: 0;
    width: auto
}

.alignleft .wp-caption-text,
.alignright .wp-caption-text {
    display: block;
    width: 100%
}

.alignright {
    justify-content: flex-end
}

.alignright .wp-caption-text {
    text-align: right
}

.alignleft {
    justify-content: flex-start
}

.alignleft .wp-caption-text {
    text-align: left
}

.aligncenter,
.alignfull,
.alignwide {
    justify-content: center
}

.alignfull img,
.alignwide img {
    width: 100%
}

.alignnone {
    display: block;
    height: auto;
    margin: 1.5em 0;
    width: auto
}

.alignwide {
    margin: 1.5em 0;
    width: 100%
}

.alignwide img {
    width: 100%
}

.alignfull {
    left: 50%;
    margin: 1.5em 0 1.5em -50vw;
    max-width: 100vw;
    position: relative;
    width: 100vw
}

a.alignleft+div a.alignleft+p,
a.alignleft+div a.alignright+p,
a.alignleft+div img.alignleft+p,
a.alignleft+div img.alignright+p,
a.alignleft+h2,
a.alignleft+h3,
a.alignleft+h4,
a.alignleft+h5,
a.alignleft+h6,
a.alignright+div a.alignleft+p,
a.alignright+div a.alignright+p,
a.alignright+div img.alignleft+p,
a.alignright+div img.alignright+p,
a.alignright+h2,
a.alignright+h3,
a.alignright+h4,
a.alignright+h5,
a.alignright+h6,
img.alignleft+div a.alignleft+p,
img.alignleft+div a.alignright+p,
img.alignleft+div img.alignleft+p,
img.alignleft+div img.alignright+p,
img.alignleft+h2,
img.alignleft+h3,
img.alignleft+h4,
img.alignleft+h5,
img.alignleft+h6,
img.alignright+div a.alignleft+p,
img.alignright+div a.alignright+p,
img.alignright+div img.alignleft+p,
img.alignright+div img.alignright+p,
img.alignright+h2,
img.alignright+h3,
img.alignright+h4,
img.alignright+h5,
img.alignright+h6 {
    display: inline-block
}

.alignright,
img.alignright {
    float: right;
    margin: 0 0 2.5em 2.5em;
    margin-top: 0 !important
}

.alignright+*,
img.alignright+* {
    margin-top: 0
}

@media only screen and (max-width:960px) {

    .alignright,
    img.alignright {
        margin: 0 0 2.6em 2.8em
    }
}

@media only screen and (max-width:640px) {

    .alignright,
    img.alignright {
        margin: 0 0 1.6em 2em
    }
}

.alignleft,
img.alignleft {
    float: left;
    margin: 0 2.5em 2.5em 0;
    margin-top: 0 !important
}

@media only screen and (max-width:960px) {

    .alignleft,
    img.alignleft {
        margin: 0 2.8em 2.6em 0
    }
}

@media only screen and (max-width:640px) {

    .alignleft,
    img.alignleft {
        margin: 0 2em 1.6em 0
    }
}

img.aligncenter {
    margin-inline: auto;
    max-width: 48%
}

img.alignwide {
    margin-inline: auto;
    width: 100%
}

figcaption {
    color: var(--color--gray);
    font-size: .75rem;
    margin-bottom: 0 !important;
    margin-top: .5em !important;
    position: relative
}

@media only screen and (max-width:640px) {
    figcaption {
        margin-top: .25em !important;
        padding: 0 .25em
    }
}

.image-arrange-section {
    position: relative
}

.image-arrange-section .image-arrange-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    position: relative
}

.image-arrange-section .image-arrange-img {
    background: no-repeat 50%/cover;
    height: 100%;
    position: absolute;
    top: 0;
    width: 70%
}

@media only screen and (max-width:640px) {
    .image-arrange-section .image-arrange-img {
        border-radius: 0;
        padding-top: 70%;
        position: static;
        width: 100%
    }
}

.image-arrange-section .image-arrange-content {
    position: relative;
    width: 40%
}

@media only screen and (max-width:640px) {
    .image-arrange-section .image-arrange-content {
        width: 100%
    }
}

.image-arrange-section .image-arrange-content:before {
    background: hsla(0, 0%, 100%, .8);
    content: "";
    height: 100%;
    position: absolute;
    width: 100vw
}

.image-arrange-section .image-arrange-content .image-arrange-text {
    font-size: 1rem;
    padding: 2.5em;
    position: relative;
    width: 100%
}

.img_common,
.img_l,
.img_r {
    left: 0;
    opacity: 1
}

.img_l .image-arrange-img {
    left: 0
}

.img_l .image-arrange-content {
    left: calc(60% + 2.5em)
}

@media only screen and (max-width:640px) {
    .img_l .image-arrange-content {
        left: 0
    }
}

.img_l .image-arrange-content:before {
    left: 0
}

.img_r .image-arrange-img {
    right: 0
}

.img_r .image-arrange-content {
    left: -2.5em
}

@media only screen and (max-width:640px) {
    .img_r .image-arrange-content {
        left: 0
    }
}

.img_r .image-arrange-content:before {
    right: 0
}

.ib {
    display: inline-block
}

.is-style-notes,
.notes,
.notes-mark,
ul.notes,
ul.notes-mark {
    display: block;
    font-size: .875rem;
    line-height: 1.4 !important;
    margin-block: .5em
}

.is-style-notes,
.notes {
    font-size: .875rem
}

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

ul.notes li {
    list-style: none;
    margin-top: 0;
    padding-left: 0
}

ul.notes li::marker {
    content: none
}

ul.notes li {
    padding-left: 0 !important;
    text-indent: 0
}

ul.notes li:first-child {
    margin-top: 0
}

ul.notes li::marker {
    content: none !important
}

.notes-mark {
    padding-left: 1em;
    text-indent: -1em
}

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

ul.notes-mark li {
    list-style: none;
    margin-top: 0;
    padding-left: 0;
    text-indent: 0
}

ul.notes-mark li::marker {
    content: none
}

ul.notes-mark li {
    padding-left: 1em;
    text-indent: -1em
}

ul.notes-mark li:first-child {
    margin-top: 0
}

.box-area {
    background: var(--color--bg);
    margin-block: 1.5em;
    padding: 1.5em 2em
}

.box-area strong {
    font-size: 1.125rem;
    font-weight: 700
}

.box-area strong+p {
    margin-top: .5em
}

.box-area p {
    line-height: 1.6;
    margin-top: .8em
}

.box-area>:first-child {
    margin-top: 0 !important
}

.box-area>:last-child {
    margin-bottom: 0 !important
}

.scroll-table {
    overflow-x: auto;
    position: relative;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch
}

.swipe-img {
    background: url(/img/work/com/sw_mov.gif) no-repeat 50%/contain;
    display: none;
    height: 30px;
    left: 5px;
    position: relative;
    top: -35px;
    width: 30px
}

@media only screen and (max-width:960px) {
    .swipe-img {
        display: block
    }
}

.movie-container {
    padding-top: 56.25%;
    position: relative;
    width: 100%
}

.movie-container iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.gmap iframe {
    height: 400px;
    width: 100%
}

@media only screen and (max-width:640px) {
    .gmap iframe {
        height: 300px
    }
}

.pagination {
    margin-bottom: 20px;
    margin-top: 20px
}

.pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    text-indent: 0
}

.pagination ul li {
    list-style: none;
    margin-top: 0;
    padding-left: 0;
    text-indent: 0
}

.pagination ul li::marker {
    content: none
}

.pagination ul li {
    padding-left: 0 !important
}

.pagination ul li:before {
    content: none !important
}

.pagination ul li a,
.pagination ul li span {
    display: block;
    margin: 0 .25em;
    padding: 0 .5em;
    position: relative;
    text-decoration: none
}

.pagination ul li a:after,
.pagination ul li span:after {
    background: transparent;
    bottom: 0;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: calc(100% - .5em)
}

.pagination ul li span:after {
    background: var(--color--main)
}

@media(hover:hover) {
    .pagination ul li a:hover {
        color: var(--color--sub)
    }

    .pagination ul li a:hover:after {
        background: var(--color--sub)
    }
}

html {
    border: 0;
    box-sizing: border-box;
    font: inherit;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    word-wrap: break-word;
    line-height: 1;
    scroll-behavior: auto !important;
    scrollbar-gutter: stable
}

html.fixed {
    height: 100%;
    overflow-y: scroll;
    width: 100%
}

body {
    color: var(--color--text);
    font-family: Zen Kaku Gothic New, sans-serif !important;
    font-size: 16px;
    font-size: .8333333333vw;
    line-height: 1;
    position: relative;
    width: 100%;
    word-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden
}

@media screen and (max-width:1920px) {
    body {
        font-size: 16px
    }
}

@media only screen and (max-width:960px) {
    body.active {
        height: 100%;
        overflow-y: scroll;
        position: fixed
    }
}

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

footer ol,
footer ul,
header ol,
header ul,
nav ol,
nav ul {
    list-style: none
}

footer table,
header table,
nav table {
    border-collapse: collapse;
    border-spacing: 0
}

footer caption,
footer td,
footer th,
header caption,
header td,
header th,
nav caption,
nav td,
nav th {
    font-weight: 400;
    text-align: left;
    vertical-align: middle
}

footer blockquote,
footer q,
header blockquote,
header q,
nav blockquote,
nav q {
    quotes: none
}

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

footer a img,
header a img,
nav a img {
    border: none
}

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

footer,
footer *,
header,
header *,
nav,
nav * {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-wrap: break-word
}

footer :after,
footer :before,
footer:after,
footer:before,
header :after,
header :before,
header:after,
header:before,
nav :after,
nav :before,
nav:after,
nav:before {
    box-sizing: border-box
}

footer ul,
header ul,
nav ul {
    list-style: none;
    margin: 0;
    padding: 0
}

footer ul li,
header ul li,
nav ul li {
    list-style: none;
    margin-top: 0;
    padding-left: 0;
    text-indent: 0
}

footer ul li::marker,
header ul li::marker,
nav ul li::marker {
    content: none
}

#noscript {
    background: #c00;
    color: #fff;
    line-height: 1.2;
    padding: 10px 20px;
    text-align: center;
    width: 100%;
    z-index: 100
}

#loader {
    background: #fff;
    z-index: 15000
}

#loader,
#loader>div {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%
}

#loader>div {
    background: url(/img/work/com/loader.svg) no-repeat 50% #fff;
    content: "";
    opacity: 0
}

.loader-fix {
    overflow-y: scroll;
    position: fixed
}

.common-inner {
    margin-left: auto;
    margin-right: auto;
    max-width: 120em;
    padding-left: 200px;
    padding-right: 200px
}

@media only screen and (max-width:1280px) {
    .common-inner {
        padding-left: 100px;
        padding-right: 100px
    }
}

@media only screen and (max-width:960px) {
    .common-inner {
        padding-left: 50px;
        padding-right: 50px
    }
}

@media only screen and (max-width:640px) {
    .common-inner {
        padding-left: 20px;
        padding-right: 20px
    }
}

@media only screen and (max-width:960px) {
    .sp-full {
        margin-left: -50px;
        margin-right: -50px;
        padding-left: 100px;
        padding-right: 100px
    }
}

@media only screen and (max-width:640px) {
    .sp-full {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 40px;
        padding-right: 40px
    }
}

main {
    display: block
}

footer {
    padding-bottom: 5em
}

.contents-body h3 {
    font-weight: 700
}

.movie-container iframe {
    border: none
}

.contents-body .common-inner>:first-child,
.contents-body>:first-child {
    margin-top: 0 !important
}

.contents-body h2 {
    margin-bottom: 2.5em;
    margin-top: 3em
}

@media only screen and (max-width:640px) {
    .contents-body h2 {
        margin-bottom: 1.5em
    }
}

.contents-body h3 {
    margin-bottom: 2.5em;
    margin-top: 3em
}

@media only screen and (max-width:640px) {
    .contents-body h3 {
        margin-bottom: 1.5em
    }
}

.contents-body h4 {
    margin-bottom: 2em;
    margin-top: 3em
}

.contents-body img,
.contents-body ol,
.contents-body p,
.contents-body table,
.contents-body ul {
    margin-top: 1.5em
}

.contents-body figure>img {
    margin-bottom: 0;
    margin-top: 0
}

.contents-body article>.alignleft:first-child+div,
.contents-body article>.alignleft:first-child+h1,
.contents-body article>.alignleft:first-child+h2,
.contents-body article>.alignleft:first-child+h3,
.contents-body article>.alignleft:first-child+h4,
.contents-body article>.alignleft:first-child+h5,
.contents-body article>.alignleft:first-child+h6,
.contents-body article>.alignleft:first-child+p,
.contents-body article>.alignlight:first-child+div,
.contents-body article>.alignlight:first-child+h1,
.contents-body article>.alignlight:first-child+h2,
.contents-body article>.alignlight:first-child+h3,
.contents-body article>.alignlight:first-child+h4,
.contents-body article>.alignlight:first-child+h5,
.contents-body article>.alignlight:first-child+h6,
.contents-body article>.alignlight:first-child+p,
.contents-body div>.alignleft:first-child+div,
.contents-body div>.alignleft:first-child+h1,
.contents-body div>.alignleft:first-child+h2,
.contents-body div>.alignleft:first-child+h3,
.contents-body div>.alignleft:first-child+h4,
.contents-body div>.alignleft:first-child+h5,
.contents-body div>.alignleft:first-child+h6,
.contents-body div>.alignleft:first-child+p,
.contents-body div>.alignlight:first-child+div,
.contents-body div>.alignlight:first-child+h1,
.contents-body div>.alignlight:first-child+h2,
.contents-body div>.alignlight:first-child+h3,
.contents-body div>.alignlight:first-child+h4,
.contents-body div>.alignlight:first-child+h5,
.contents-body div>.alignlight:first-child+h6,
.contents-body div>.alignlight:first-child+p,
.contents-body p img:first-child,
.contents-body section>.alignleft:first-child+div,
.contents-body section>.alignleft:first-child+h1,
.contents-body section>.alignleft:first-child+h2,
.contents-body section>.alignleft:first-child+h3,
.contents-body section>.alignleft:first-child+h4,
.contents-body section>.alignleft:first-child+h5,
.contents-body section>.alignleft:first-child+h6,
.contents-body section>.alignleft:first-child+p,
.contents-body section>.alignlight:first-child+div,
.contents-body section>.alignlight:first-child+h1,
.contents-body section>.alignlight:first-child+h2,
.contents-body section>.alignlight:first-child+h3,
.contents-body section>.alignlight:first-child+h4,
.contents-body section>.alignlight:first-child+h5,
.contents-body section>.alignlight:first-child+h6,
.contents-body section>.alignlight:first-child+p,
.contents-body>.alignleft:first-child+div,
.contents-body>.alignleft:first-child+h1,
.contents-body>.alignleft:first-child+h2,
.contents-body>.alignleft:first-child+h3,
.contents-body>.alignleft:first-child+h4,
.contents-body>.alignleft:first-child+h5,
.contents-body>.alignleft:first-child+h6,
.contents-body>.alignleft:first-child+p,
.contents-body>.alignlight:first-child+div,
.contents-body>.alignlight:first-child+h1,
.contents-body>.alignlight:first-child+h2,
.contents-body>.alignlight:first-child+h3,
.contents-body>.alignlight:first-child+h4,
.contents-body>.alignlight:first-child+h5,
.contents-body>.alignlight:first-child+h6,
.contents-body>.alignlight:first-child+p {
    margin-top: 0
}

.contents-body h2 {
    font-size: 1.6666666667vw
}

@media screen and (max-width:1920px) {
    .contents-body h2 {
        font-size: 32px
    }
}

.contents-body h3 {
    font-size: 1.25vw
}

@media screen and (max-width:1920px) {
    .contents-body h3 {
        font-size: 24px
    }
}

.contents-body h4 {
    font-size: 1.0416666667vw
}

@media screen and (max-width:1920px) {
    .contents-body h4 {
        font-size: 20px
    }
}

.contents-body div,
.contents-body ol,
.contents-body p,
.contents-body ul {
    line-height: 1.8
}

@media only screen and (max-width:960px) {

    .contents-body div,
    .contents-body ol,
    .contents-body p,
    .contents-body ul {
        line-height: 1.5
    }
}

@media only screen and (max-width:640px) {

    .contents-body div,
    .contents-body ol,
    .contents-body p,
    .contents-body ul {
        line-height: 1.4
    }
}

.contents-body div.has-background,
.contents-body ol.has-background,
.contents-body p.has-background,
.contents-body ul.has-background {
    padding: .5em 1em
}

.contents-body ol ol,
.contents-body ol ul,
.contents-body ul ol,
.contents-body ul ul {
    margin-block: 0
}

.contents-body table tr {
    height: auto !important
}

.contents-body table tr th {
    width: 25%
}

.contents-body table.w100 {
    width: 100%
}

@media only screen and (max-width:640px) {

    .contents-body table.w100 td,
    .contents-body table.w100 th,
    .contents-body table.w100 tr {
        border: none;
        display: block;
        float: none;
        width: 100%
    }

    .contents-body table.w100 td,
    .contents-body table.w100 th {
        padding-bottom: .25em;
        padding-top: .25em
    }

    .contents-body table.w100 th {
        border-bottom: 1px solid var(--color--border);
        font-weight: 700
    }

    .contents-body table.w100 td {
        padding-bottom: 1.5em
    }
}

.contents-body figure {
    position: relative
}

.contents-body hr {
    border: 0;
    border-top: 1px solid var(--color--gray);
    height: 0;
    margin: 1.5em 0;
    padding: 0
}

.contents-body hr+* {
    margin-top: 0
}

.contents-body .mainimg {
    background: url(/img/work/page/wave_01.svg) no-repeat bottom left var(--color--sub);
    height: 100%;
    padding: 3.125em;
    position: relative;
    width: 100%
}

@media only screen and (max-width:640px) {
    .contents-body .mainimg {
        padding: 1.25em
    }
}

.contents-body .mainimg .mainimg-inner {
    margin-inline: auto;
    position: relative;
    width: 100%
}

.contents-body .mainimg img {
    line-height: 0;
    margin: 0
}

.contents-body .mainimg h1 {
    height: 100%;
    overflow: hidden;
    width: 100%
}

.contents-body .mainimg h1 img,
.contents-body .mainimg h1 picture {
    height: auto;
    width: 100%
}

.contents-body .mainimg div,
.contents-body .mainimg h2 {
    line-height: 0;
    position: absolute;
    width: 100%;
    z-index: 2
}

.contents-body .mainimg h2 {
    background: linear-gradient(transparent, rgba(0, 0, 0, .8));
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding-top: 2em
}

.contents-body .mainimg h2 img,
.contents-body .mainimg h2 picture {
    width: 100%
}

.contents-body .mainimg p {
    left: 3%;
    margin-top: 0;
    position: absolute;
    top: 12%;
    z-index: 2
}

@media only screen and (max-width:640px) {
    .contents-body .mainimg p {
        left: 10px;
        top: 10px
    }
}

.contents-body .mainimg p img,
.contents-body .mainimg p picture {
    margin-top: 0;
    width: 340px
}

@media screen and (max-width:1350px) {

    .contents-body .mainimg p img,
    .contents-body .mainimg p picture {
        width: 18vw
    }
}

@media only screen and (max-width:640px) {

    .contents-body .mainimg p img,
    .contents-body .mainimg p picture {
        width: 38vw
    }
}

.contents-body .mainimg .toyama-logo {
    right: 1.5625em;
    top: 1.5625em;
    width: 9.0625em
}

@media only screen and (max-width:640px) {
    .contents-body .mainimg .toyama-logo {
        right: 10px;
        top: 10px;
        width: 120px
    }
}

.contents-body .mainimg .toyama-logo a {
    display: block
}

.contents-body .mainimg .toyama-logo a:after {
    display: none
}

.contents-body h3 {
    font-size: 2.5em;
    line-height: 1.2;
    margin-bottom: 1.4em;
    padding-bottom: .1em
}

@media only screen and (max-width:960px) {
    .contents-body h3 {
        font-size: 2.375em
    }
}

@media only screen and (max-width:640px) {
    .contents-body h3 {
        font-size: 1.375em
    }
}

.contents-body h3 span {
    display: inline-block
}

.contents-body .message {
    background: url(/img/work/page/wave_02.svg) no-repeat;
    background-position: left 30%;
    color: #fff;
    padding-top: 9em;
    position: relative;
    text-align: center
}

@media only screen and (max-width:1280px) {
    .contents-body .message {
        padding-top: 5em
    }
}

@media only screen and (max-width:960px) {
    .contents-body .message {
        background-position: left 35%;
        padding-top: 4em
    }
}

@media only screen and (max-width:640px) {
    .contents-body .message {
        background-position: left 36%;
        padding-top: 1.5em
    }
}

.contents-body .message:after,
.contents-body .message:before {
    content: "";
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1
}

.contents-body .message:before {
    background-color: var(--color--main);
    height: 30%;
    top: 0
}

@media only screen and (max-width:960px) {
    .contents-body .message:before {
        height: 35%
    }
}

@media only screen and (max-width:640px) {
    .contents-body .message:before {
        height: 36%
    }
}

.contents-body .message:after {
    background-color: var(--color--sub);
    bottom: 0;
    height: 70%
}

@media only screen and (max-width:960px) {
    .contents-body .message:after {
        height: 65%
    }
}

@media only screen and (max-width:640px) {
    .contents-body .message:after {
        height: 64%
    }
}

.contents-body .message .message-txt p {
    font-feature-settings: "palt";
    font-size: 1.875em;
    letter-spacing: -.8px;
    line-height: 1.8
}

@media only screen and (max-width:1280px) {
    .contents-body .message .message-txt p {
        font-size: 26px
    }
}

@media only screen and (max-width:960px) {
    .contents-body .message .message-txt p {
        font-size: 24px
    }
}

@media only screen and (max-width:640px) {
    .contents-body .message .message-txt p {
        font-size: 18px
    }
}

@media screen and (max-width:420px) {
    .contents-body .message .message-txt p {
        font-size: 16px
    }
}

.contents-body .message .message-txt p:has(strong) {
    font-size: 3.25em;
    line-height: 1.4;
    transform: translateX(15px)
}

@media only screen and (max-width:960px) {
    .contents-body .message .message-txt p:has(strong) {
        font-size: 38px
    }
}

@media only screen and (max-width:640px) {
    .contents-body .message .message-txt p:has(strong) {
        font-size: 28px;
        transform: translateX(8px)
    }
}

.contents-body .message .message-txt strong {
    color: var(--color--main);
    font-weight: 700;
    position: relative
}

.contents-body .message .message-txt strong span {
    display: inline;
    position: relative
}

@media screen and (max-width:1445px) {
    .contents-body .message .message-txt strong span {
        display: inline-block
    }
}

.contents-body .message .message-txt strong span:after {
    background-color: var(--color--main);
    bottom: 0;
    content: "";
    height: 4px;
    position: absolute;
    right: 15px;
    width: 100%
}

@media only screen and (max-width:640px) {
    .contents-body .message .message-txt strong span:after {
        height: 2px;
        right: 8px
    }
}

.contents-body .message .message-txt strong i {
    border-bottom: 2px solid var(--color--main)
}

.contents-body .message .message-txt span {
    display: inline-block
}

.contents-body .message .movie-container {
    margin-top: 6em
}

@media only screen and (max-width:960px) {
    .contents-body .message .movie-container {
        margin-top: 4em
    }
}

@media only screen and (max-width:640px) {
    .contents-body .message .movie-container {
        margin-top: 2em
    }
}

.contents-body .movie-area {
    background: url(/img/work/page/wave_03.svg) no-repeat top left var(--color--main);
    margin-top: -3em;
    padding-bottom: 2em;
    padding-top: 16em
}

@media only screen and (max-width:960px) {
    .contents-body .movie-area {
        margin-top: -2em;
        padding-top: 10em
    }
}

@media only screen and (max-width:640px) {
    .contents-body .movie-area {
        margin-top: 0;
        padding-top: 6em
    }
}

.contents-body .grid-col__3 {
    display: grid;
    gap: 3em;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 3em
}

@media only screen and (max-width:960px) {
    .contents-body .grid-col__3 {
        gap: 2em;
        grid-template-columns: repeat(2, 1fr);
        margin-top: 2em
    }
}

@media only screen and (max-width:640px) {
    .contents-body .grid-col__3 {
        gap: 1em;
        margin-top: 1em
    }
}

.contents-body .point {
    background: url(/img/work/page/wave_04.svg) no-repeat top left var(--color--sub);
    padding-block: 18em 6em;
    text-align: center
}

@media only screen and (max-width:960px) {
    .contents-body .point {
        padding-block: 15em 5em
    }
}

@media only screen and (max-width:640px) {
    .contents-body .point {
        padding-block: 7em 4em
    }
}

.contents-body .point h3 {
    border-bottom: 2px solid #fff;
    color: #fff;
    margin-bottom: .3em
}

@media only screen and (max-width:640px) {
    .contents-body .point h3 {
        margin-bottom: .5em
    }
}

.contents-body .point h3 em {
    bottom: -.05em;
    color: var(--color--main);
    font-family: Arial;
    font-size: 1.875em;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    position: relative
}

.contents-body .point h3 em:after,
.contents-body .point h3 em:before {
    background-color: #fff;
    border-radius: 3px;
    content: "";
    height: .2em;
    position: absolute;
    top: .05em;
    width: 4px
}

@media only screen and (max-width:640px) {

    .contents-body .point h3 em:after,
    .contents-body .point h3 em:before {
        width: 3px
    }
}

.contents-body .point h3 em:before {
    left: -.14em;
    transform: rotate(-55deg)
}

.contents-body .point h3 em:after {
    right: -.16em;
    transform: rotate(55deg)
}

.contents-body .point h3 em span:after,
.contents-body .point h3 em span:before {
    background-color: var(--color--main);
    border-radius: 3px;
    content: "";
    height: .28em;
    position: absolute;
    width: 4px
}

@media only screen and (max-width:640px) {

    .contents-body .point h3 em span:after,
    .contents-body .point h3 em span:before {
        width: 3px
    }
}

.contents-body .point h3 em span:before {
    transform: rotate(-35deg)
}

.contents-body .point h3 em span:after {
    transform: rotate(35deg)
}

.contents-body .point .notes {
    color: #fff;
    font-size: 1.13em;
    margin: 0 0 2em
}

@media only screen and (max-width:640px) {
    .contents-body .point .notes {
        font-size: .8em
    }
}

.contents-body .point ol {
    display: grid;
    gap: 2.5em;
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
    margin: 0;
    padding: 0
}

.contents-body .point ol li {
    list-style: none;
    margin-top: 0;
    padding-left: 0;
    text-indent: 0
}

.contents-body .point ol li::marker {
    content: none
}

@media only screen and (max-width:960px) {
    .contents-body .point ol {
        gap: 1.5em
    }
}

@media only screen and (max-width:640px) {
    .contents-body .point ol {
        grid-template-columns: repeat(1, 1fr)
    }
}

.contents-body .point img {
    margin-top: 0;
    width: 100%
}

@media only screen and (max-width:640px) {
    .contents-body .point img {
        max-width: 420px
    }
}

.contents-body .check-link {
    padding-block: 4em;
    text-align: center
}

.contents-body .check-link h3 {
    border-bottom: 2px solid var(--color--sub);
    color: var(--color--sub)
}

.contents-body .check-link h3 span {
    display: inline-block
}

.contents-body .check-link .link-area {
    display: flex;
    gap: 6em;
    position: relative
}

@media only screen and (max-width:960px) {
    .contents-body .check-link .link-area {
        flex-direction: column;
        gap: 2em
    }
}

@media only screen and (min-width:961px) {
    .contents-body .check-link .link-area:before {
        background-color: var(--color--sub);
        content: "";
        height: 100%;
        left: 50%;
        position: absolute;
        top: 0;
        width: 2px
    }
}

.contents-body .check-link .link-area div {
    width: 100%
}

@media only screen and (max-width:960px) {
    .contents-body .check-link .link-area div {
        margin-inline: auto;
        max-width: 460px
    }

    .contents-body .check-link .link-area div:first-child {
        border-bottom: 1px solid var(--color--sub);
        padding-bottom: 2em
    }
}

.contents-body .check-link .link-area strong {
    font-size: 1.25em;
    line-height: 1.3;
    margin-bottom: 1em
}

@media screen and (max-width:1400px) {
    .contents-body .check-link .link-area strong {
        font-size: calc(50% + .7vw)
    }
}

@media only screen and (max-width:960px) {
    .contents-body .check-link .link-area strong {
        font-size: 1.25em
    }
}

.contents-body .check-link .link-area a {
    color: var(--color--txt);
    display: block;
    text-decoration: none
}

.contents-body .check-link .link-area a:after {
    display: none
}

.contents-body .check-link .link-area img {
    height: 5.25em
}

.contents-body .check-link .link-area p {
    font-size: .875em;
    line-height: 1.3
}

.contents-body .check-link .link-area p span {
    display: inline-block
}

.footer-bnr-link {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(4, 1fr)
}

@media only screen and (max-width:1280px) {
    .footer-bnr-link {
        gap: .5em;
        grid-template-columns: repeat(3, 1fr)
    }
}

@media only screen and (max-width:960px) {
    .footer-bnr-link {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media only screen and (max-width:640px) {
    .footer-bnr-link {
        grid-template-columns: repeat(1, 1fr)
    }
}

.footer-bnr-link a {
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    display: block;
    padding: .3em
}

@media only screen and (max-width:640px) {
    .footer-bnr-link a {
        margin-inline: auto;
        max-width: 420px
    }
}

.footer-bnr-link a:after {
    display: none
}

.sticky-area {
    margin-bottom: -100vh;
    position: relative;
    top: -100vh
}

@media only screen and (max-width:640px) {
    .sticky-area {
        margin-bottom: 0;
        position: static;
        top: 0
    }
}

.fix-txt {
    align-items: center;
    color: #fff;
    display: flex;
    height: 100vh;
    justify-content: space-between;
    pointer-events: none;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 5
}

@media only screen and (max-width:640px) {
    .fix-txt {
        display: none
    }
}

.fix-txt span {
    display: inline-block;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1;
    position: relative
}

.fix-txt .fix-l {
    left: -4.1em;
    transform: rotate(-90deg)
}

.fix-txt .fix-r {
    right: -4.1em;
    transform: rotate(90deg)
}

#go-top {
    bottom: 1.25em;
    position: fixed;
    right: .9375em
}

#go-top a {
    color: var(--color--lightgray);
    display: block;
    text-decoration: none
}

#go-top a span {
    font-size: 1.875em
}

.phantom {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s, transform 1s
}

.phantom.phantom-animation {
    opacity: 1;
    transform: translateY(0)
}

.typewriter span i {
    display: inline-block;
    font-style: normal;
    opacity: 0;
    transform: translateY(10px)
}

.mainimg-inner h1,
.mainimg-inner h2 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease
}

.fix-txt {
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease, margin 1s ease
}

.fix-txt span {
    transition: margin 1s ease
}

.fix-txt .fix-l {
    margin-left: -1em
}

.fix-txt .fix-r {
    margin-right: -1em
}

.mainimg-inner p {
    opacity: 0;
    transition: opacity 1s ease
}

body:not(.loader-fix) .mainimg-inner h1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s
}

body:not(.loader-fix) .mainimg-inner h2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .3s
}

body:not(.loader-fix) .fix-txt {
    opacity: 1;
    transition-delay: .15s
}

body:not(.loader-fix) .fix-txt .fix-l {
    margin-left: 0
}

body:not(.loader-fix) .fix-txt .fix-r {
    margin-right: 0
}

body:not(.loader-fix) .mainimg-inner p {
    opacity: 1;
    transition-delay: .5s
}

form .form-inner {
    width: 100%
}

form .form-inner dl {
    border-left: 1px solid var(--color--lightgray);
    border-top: 1px solid var(--color--lightgray);
    display: flex;
    flex-wrap: wrap;
    line-height: 0
}

form .form-inner dd,
form .form-inner dt {
    border-bottom: 1px solid var(--color--lightgray);
    border-right: 1px solid var(--color--lightgray);
    padding: 2em
}

form .form-inner dt {
    align-items: center;
    background-color: rgba(50, 148, 223, .1);
    display: flex;
    font-weight: 700;
    line-height: 1.2;
    width: 17em
}

form .form-inner dd {
    line-height: 1.2;
    width: calc(100% - 17em)
}

form .required {
    background-color: var(--color--red);
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: .625rem;
    margin-left: auto;
    padding: .3em .4em
}

form .form-message {
    margin-bottom: 35px;
    margin-top: 35px
}

@media only screen and (max-width:960px) {
    form .form-message {
        margin-bottom: 20px;
        margin-top: 20px
    }
}

@media only screen and (max-width:640px) {
    form .form-message {
        margin-bottom: 15px;
        margin-top: 15px
    }
}

form .form-message:first-child {
    margin-top: 0
}

@media only screen and (max-width:640px) {
    form .form-message {
        font-size: .7291666667vw;
        padding-left: 1em;
        text-align: left;
        text-indent: -1em
    }
}

@media only screen and (max-width:640px)and (max-width:1920px) {
    form .form-message {
        font-size: 14px
    }
}

.add-swiper-bullet {
    padding-bottom: 40px
}

.swiper-slide {
    text-align: center
}

.swiper-slide img {
    margin: auto
}

.swiper-slide p {
    line-height: 1.8
}

.swiper-pagination {
    bottom: 0
}

.swiper-pagination-bullet {
    border-radius: 0;
    margin: 0 8px
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 8px
}

.swiper-pagination-bullet-active {
    background: #000
}

.featherlight .featherlight-content {
    background: transparent;
    border-bottom: none;
    margin: 0;
    max-height: 100%;
    padding: 30px
}

.featherlight .featherlight-image {
    max-height: 100%;
    max-width: 100%
}

.featherlight .featherlight-close-icon {
    background: transparent;
    border-radius: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    height: 30px;
    line-height: 30px;
    right: 30px;
    text-align: center;
    top: 0;
    width: 30px
}

@keyframes fade {
    0% {
        opacity: 0;
        z-index: -1
    }

    to {
        opacity: 1;
        z-index: 1
    }
}

@keyframes slideLtoR {
    0% {
        left: -100%
    }

    to {
        left: 0
    }
}

@keyframes slideRtoL {
    0% {
        right: -100%
    }

    to {
        right: 0
    }
}

@keyframes resizeWidth {
    0% {
        transform: scaleX(0)
    }

    to {
        transform: scale(1)
    }
}