@charset "utf-8";

/* COMMON STYLE
----------------------------------------- */
@font-face {
    font-family: "Yu Gothic";
    font-weight: normal;
    src:
        local("Yu Gothic-Medium"), local("Yu Gothic Medium"),
        local("YuGothic-Regular");
}

@font-face {
    font-family: "Yu Gothic";
    font-weight: bold;
    src: local("Yu Gothic-Bold"), local("Yu Gothic");
}

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

[class^="mn-"],
[class*=" mn-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: fonticon !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    line-height: 1;
    text-transform: none;
    speak: none;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mn-blank::before {
    content: "\e900";
}

.mn-bread::before {
    content: "\e901";
}

.mn-cabbage::before {
    content: "\e902";
}

.mn-car::before {
    content: "\e903";
}

.mn-carrot::before {
    content: "\e904";
}

.mn-cart::before {
    content: "\e905";
}

.mn-crab::before {
    content: "\e906";
}

.mn-fish::before {
    content: "\e907";
}

.mn-fruits::before {
    content: "\e908";
}

.mn-list::before {
    content: "\e909";
}

.mn-mailmagazine::before {
    content: "\e90a";
}

.mn-maintenance::before {
    content: "\e90b";
}

.mn-meat::before {
    content: "\e90c";
}

.mn-meatbone::before {
    content: "\e90d";
}

.mn-media::before {
    content: "\e90e";
}

.mn-noimage::before {
    content: "\e90f";
}

.mn-plane::before {
    content: "\e910";
}

.mn-pumpkin::before {
    content: "\e911";
}

.mn-rollcake::before {
    content: "\e912";
}

.mn-search::before {
    content: "\e913";
}

.mn-steak::before {
    content: "\e914";
}

.mn-train::before {
    content: "\e915";
}

.mn-tv::before {
    content: "\e916";
}

.mn-works::before {
    content: "\e917";
}

.mn-chevron-thin-down::before {
    content: "\e91d";
}

.mn-chevron-thin-left::before {
    content: "\e91e";
}

.mn-chevron-thin-right::before {
    content: "\e91f";
}

.mn-chevron-thin-up::before {
    content: "\e920";
}

/* reset ------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video,
input,
select,
textarea {
    padding: 0;
    margin: 0;
    font-size: 100%;
    font-style: normal;
    font-weight: normal;
    vertical-align: bottom;
    outline: 0;
    background: transparent;
    border: 0;
}

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

ul,
ol {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

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

img {
    max-width: 100%;
    height: auto;
    line-height: 0;
    vertical-align: top;
}

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

input,
select,
textarea {
    font-family: inherit;
}

input[type="submit"] {
    cursor: pointer;
}

a,
form,
input,
iframe,
textarea,
button {
    outline: 0 none black !important;
}

a:link,
a:hover,
a:visited {
    color: #000;
    text-decoration: none !important;
}

/* For modern browsers */
.cf::before,
.cf::after {
    display: table;
    content: "";
}

.cf::after {
    clear: both;
}

* {
    box-sizing: border-box;
    outline: none !important;
}

html {
    box-sizing: border-box;
    overflow-y: scroll;
    font-size: 62.5%;
    text-size-adjust: 100%;

    /* overflow-x: hidden; */
}

body {
    overflow-x: hidden;
    font-family:
        "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
        "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif, sans-serif;
    font-size: 1.6rem;
    line-height: 1.7;
    color: #000;
}

/* page effect */
body::after {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    pointer-events: none;
    content: "";
    background-color: #fff;
    opacity: 0;
    transition: opacity 0.8s ease;
    transition: opacity 0.8s ease;
}

body.fadeout::after {
    opacity: 1;
}

/* body.fadeout main{
  -webkit-transform:scale(0.8);
  transform:scale(0.8);
} */

main {
    font-size: 1.6rem;
    line-height: 1.75;
    letter-spacing: 0.075em;
}

/* font family -------------------------------------- */
.f-yumin {
    font-family:
        "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
        "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif, sans-serif;
}

.f-yug {
    font-family:
        "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体",
        "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.f-EBg {
    font-family: "EB Garamond", serif;
    font-weight: normal;
}

.f-gb {
    font-family: "Gentium Basic", serif;
    font-weight: normal;
}

.f-crm {
    font-family: "Crimson Text", serif;
}

.f-mei {
    font-family:
        "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
        "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ",
        "MS PGothic", "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif;
}

/* font weight -------------------------------------- */
.f-bold {
    font-weight: bold;
}
.f-normal {
    font-weight: normal;
}
.f-w100 {
    font-weight: 100;
}
.f-w200 {
    font-weight: 200;
}
.f-w300 {
    font-weight: 300;
}
.f-w400 {
    font-weight: normal;
}
.f-w500 {
    font-weight: 500;
}
.f-w600 {
    font-weight: 600;
}
.f-w700 {
    font-weight: bold;
}
.f-w900 {
    font-weight: 900;
}

/* font size -------------------------------------- */
.f-sz10 {
    font-size: 1rem;
}
.f-sz11 {
    font-size: 1.1rem;
}
.f-sz12 {
    font-size: 1.2rem;
}
.f-sz13 {
    font-size: 1.3rem;
}
.f-sz14 {
    font-size: 1.4rem;
}
.f-sz15 {
    font-size: 1.5rem;
}
.f-sz16 {
    font-size: 1.6rem;
}
.f-sz17 {
    font-size: 1.7rem;
}
.f-sz18 {
    font-size: 1.8rem;
}
.f-sz19 {
    font-size: 1.9rem;
}
.f-sz20 {
    font-size: 2rem;
}
.f-sz20 {
    font-size: 2.1rem;
}
.f-sz22 {
    font-size: 2.2rem;
    line-height: 1.3;
}
.f-sz23 {
    font-size: 2.3rem;
    line-height: 1.3;
}
.f-sz24 {
    font-size: 2.4rem;
    line-height: 1.3;
}
.f-sz25 {
    font-size: 2.5rem;
    line-height: 1.3;
}
.f-sz26 {
    font-size: 2.6rem;
    line-height: 1.3;
}
.f-sz27 {
    font-size: 2.7rem;
    line-height: 1.3;
}
.f-sz28 {
    font-size: 2.8rem;
    line-height: 1.3;
}
.f-sz30 {
    font-size: 3rem;
    line-height: 1.3;
}

.f-sz32 {
    font-size: 3.2rem;
    line-height: 1.3;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz33 {
    font-size: 3.3rem;

    /* 33px */
    line-height: 1.3;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz34 {
    font-size: 3.4rem;
    line-height: 1.3;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz35 {
    font-size: 3.5rem;
    line-height: 1.2;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz36 {
    font-size: 3.6rem;

    /* 36px */
    line-height: 1.3;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz38 {
    font-size: 3.8rem;
    line-height: 1.3;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz40 {
    font-size: 4rem;
    line-height: 1.3;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz41 {
    font-size: 4.1rem;
    line-height: 1.3;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz43 {
    font-size: 4.3rem;
    line-height: 1.2;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz47 {
    font-size: 4.7rem;
    line-height: 1.2;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz48 {
    font-size: 4.8rem;
    line-height: 1.2;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz50 {
    font-size: 5rem;
    line-height: 1.2;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz55 {
    font-size: 5.5rem;
    line-height: 1;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz60 {
    font-size: 6rem;
    line-height: 1;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz65 {
    font-size: 6.5rem;
    line-height: 1;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz68 {
    font-size: 6.8rem;
    line-height: 1;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz70 {
    font-size: 7rem;
    line-height: 1;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz75 {
    font-size: 7.5rem;
    line-height: 1;
}

.f-sz105 {
    font-size: 10.5rem;
    line-height: 1;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz120 {
    font-size: 12rem;
    line-height: 1;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz140 {
    font-size: 14rem;
    line-height: 1;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

.f-sz170 {
    font-size: 17rem;
    line-height: 1;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
    transition: all 0.28s ease;
}

/* letter-spacing */
.fls-l {
    letter-spacing: 0.25em;
}
.fls-m {
    letter-spacing: 0.15em;
}

@media (width <= 991px) {
    .f-sz170 {
        font-size: 11rem;
    }
    .f-sz140 {
        font-size: 9rem;
    }
    .f-sz120 {
        font-size: 8rem;
    }
    .f-sz105 {
        font-size: 7rem;
    }
    .f-sz75 {
        font-size: 6.8rem;
    }
    .f-sz70 {
        font-size: 6.7rem;
    }
    .f-sz65 {
        font-size: 6rem;
    }
    .f-sz60 {
        font-size: 5.5rem;
    }
    .f-sz55 {
        font-size: 5rem;
    }
    .f-sz50 {
        font-size: 4.5rem;
    }
    .f-sz48 {
        font-size: 3.8rem;
    }
    .f-sz43 {
        font-size: 3.55rem;
    }
    .f-sz41 {
        font-size: 3.5rem;
    }
    .f-sz40 {
        font-size: 3.45rem;
    }
    .f-sz38 {
        font-size: 3.3rem;
    }
    .f-sz37 {
        font-size: 3.2rem;
    }
    .f-sz36 {
        font-size: 3.1rem;
    }
    .f-sz35 {
        font-size: 3.05rem;
    }
    .f-sz34 {
        font-size: 3rem;
    }
    .f-sz32 {
        font-size: 2.95rem;
    }
    .f-sz27 {
        font-size: 2.5rem;
    }
    .fls-l {
        letter-spacing: 0.2em;
    }
}

@media (width <= 768px) {
    .f-sz170 {
        font-size: 9rem;
    }
    .f-sz140 {
        font-size: 8rem;
    }
    .f-sz120 {
        font-size: 6rem;
    }
    .f-sz105 {
        font-size: 6rem;
    }
    .f-sz75 {
        font-size: 6rem;
    }
    .f-sz70 {
        font-size: 6rem;
    }
    .f-sz68 {
        font-size: 5.5rem;
    }
    .f-sz65 {
        font-size: 5.5rem;
    }
    .f-sz60 {
        font-size: 5rem;
    }
    .f-sz55 {
        font-size: 4.5rem;
    }
    .f-sz50 {
        font-size: 4rem;
    }
    .f-sz48 {
        font-size: 3.8rem;
    }
    .f-sz47 {
        font-size: 3.8rem;
    }
    .f-sz43 {
        font-size: 3.5rem;
    }
    .f-sz41 {
        font-size: 3.25rem;
    }
    .f-sz40 {
        font-size: 3.2rem;
    }
    .f-sz38 {
        font-size: 3.1rem;
    }
    .f-sz37 {
        font-size: 3.05rem;
    }
    .f-sz36 {
        font-size: 3rem;
    }
    .f-sz35 {
        font-size: 2.95rem;
    }
    .f-sz34 {
        font-size: 2.9rem;
    }
    .f-sz33 {
        font-size: 2.8rem;
    }
    .f-sz32 {
        font-size: 2.75rem;
    }
    .f-sz30 {
        font-size: 2.65rem;
    }
    .f-sz28 {
        font-size: 2.5rem;
        line-height: 1.3;
    }
    .f-sz27 {
        font-size: 2.45rem;
        line-height: 1.3;
    }
    .f-sz26 {
        font-size: 2.4rem;
        line-height: 1.3;
    }

    .fls-l {
        letter-spacing: 0.15em;
    }
    .fls-m {
        letter-spacing: 0.07em;
    }
}

@media (width <= 480px) {
    .f-sz170 {
        font-size: 7rem;
    }
    .f-sz140 {
        font-size: 5rem;
    }
    .f-sz120 {
        font-size: 4rem;
    }
    .f-sz105 {
        font-size: 4rem;
    }
    .f-sz75 {
        font-size: 4rem;
    }
    .f-sz70 {
        font-size: 4rem;
    }
    .f-sz68 {
        font-size: 3.7rem;
        line-height: 1.2;
    }
    .f-sz65 {
        font-size: 3.9rem;
    }
    .f-sz60 {
        font-size: 3.6rem;
    }
    .f-sz55 {
        font-size: 3.5rem;
        line-height: 1.2;
    }
    .f-sz50 {
        font-size: 3.4rem;
    }
    .f-sz48 {
        font-size: 3.3rem;
    }
    .f-sz47 {
        font-size: 3.3rem;
    }
    .f-sz43 {
        font-size: 3.2rem;
    }
    .f-sz41 {
        font-size: 3rem;
    }
    .f-sz40 {
        font-size: 2.9rem;
    }
    .f-sz38 {
        font-size: 2.75rem;
        line-height: 1.4;
    }
    .f-sz37 {
        font-size: 2.7rem;
        line-height: 1.4;
    }
    .f-sz36 {
        font-size: 2.6rem;
        line-height: 1.4;
    }
    .f-sz35 {
        font-size: 2.55rem;
    }
    .f-sz34 {
        font-size: 2.45rem;
    }
    .f-sz33 {
        font-size: 2.4rem;
    }
    .f-sz32 {
        font-size: 2.35rem;
    }
    .f-sz30 {
        font-size: 2.2rem;
    }
    .f-sz28 {
        font-size: 2.2rem;
    }
    .f-sz26 {
        font-size: 2.1rem;
    }
    .f-sz25 {
        font-size: 2rem;
    }
    .f-sz24 {
        font-size: 2rem;
    }
    .f-sz23 {
        font-size: 1.95rem;
    }
    .f-sz22 {
        font-size: 1.7rem;
    }
    .f-sz21 {
        font-size: 1.68rem;
    }
    .f-sz20 {
        font-size: 1.65rem;
        line-height: 1.6;
    }
    .f-sz19 {
        font-size: 1.65rem;
        line-height: 1.6;
    }
    .f-sz18 {
        font-size: 1.6rem;
        line-height: 1.6;
    }
    .f-sz16,
    .f-sz15,
    .f-sz14,
    .f-sz13,
    .f-sz12 {
        line-height: 1.6;
    }
}

@media (width <= 370px) {
    .f-sz170 {
        font-size: 5rem;
    }
}

/* margin/padding ---------------------------- */
.pt130 {
    padding-top: 130px;
}
.pt110 {
    padding-top: 110px;
}
.pt100 {
    padding-top: 100px;
}
.pt90 {
    padding-top: 90px;
}
.pt85 {
    padding-top: 85px;
}
.pt80 {
    padding-top: 80px;
}
.pt70 {
    padding-top: 70px;
}
.pt60 {
    padding-top: 60px;
}
.pt50 {
    padding-top: 50px;
}
.pt40 {
    padding-top: 40px;
}
.pt30 {
    padding-top: 30px;
}
.pt20 {
    padding-top: 20px;
}
.pt10 {
    padding-top: 10px;
}

.pb120 {
    padding-bottom: 120px;
}
.pb100 {
    padding-bottom: 100px;
}
.pb90 {
    padding-bottom: 90px;
}
.pb80 {
    padding-bottom: 80px;
}
.pb70 {
    padding-bottom: 70px;
}
.pb60 {
    padding-bottom: 60px;
}
.pb50 {
    padding-bottom: 50px;
}
.pb40 {
    padding-bottom: 40px;
}
.pb30 {
    padding-bottom: 30px;
}
.pb20 {
    padding-bottom: 20px;
}

.mt80 {
    margin-top: 80px;
}
.mt40 {
    margin-top: 40px;
}

.mb80 {
    margin-bottom: 80px;
}
.mb70 {
    margin-bottom: 70px;
}
.mb50 {
    margin-bottom: 50px;
}
.mb40 {
    margin-bottom: 40px;
}
.mb30 {
    margin-bottom: 30px;
}
.mb25 {
    margin-bottom: 25px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb15 {
    margin-bottom: 15px;
}
.mb10 {
    margin-bottom: 10px;
}
.mb5 {
    margin-bottom: 5px;
}

@media (width <= 768px) {
    .pt130 {
        padding-top: 100px;
    }
    .pt110 {
        padding-top: 85px;
    }
    .pt100 {
        padding-top: 80px;
    }
    .pt90 {
        padding-top: 65px;
    }
    .pt85 {
        padding-top: 60px;
    }
    .pt80 {
        padding-top: 55px;
    }
    .pt70 {
        padding-top: 50px;
    }
    .pt60 {
        padding-top: 45px;
    }
    .pt50 {
        padding-top: 40px;
    }
    .pt40 {
        padding-top: 30px;
    }
    .pt30 {
        padding-top: 25px;
    }
    .pt20 {
        padding-top: 15px;
    }

    .pb120 {
        padding-bottom: 90px;
    }
    .pb100 {
        padding-bottom: 80px;
    }
    .pb90 {
        padding-bottom: 65px;
    }
    .pb80 {
        padding-bottom: 55px;
    }
    .pb70 {
        padding-bottom: 50px;
    }
    .pb60 {
        padding-bottom: 45px;
    }
    .pb50 {
        padding-bottom: 40px;
    }
    .pb40 {
        padding-bottom: 30px;
    }
    .pb30 {
        padding-bottom: 25px;
    }
    .pb20 {
        padding-bottom: 20px;
    }

    .mt80 {
        margin-top: 60px;
    }
    .mt40 {
        margin-top: 30px;
    }

    .mb30 {
        margin-bottom: 25px;
    }
    .mb40 {
        margin-bottom: 30px;
    }
    .mb50 {
        margin-bottom: 40px;
    }
    .mb70 {
        margin-bottom: 50px;
    }
    .mb80 {
        margin-bottom: 60px;
    }
}

@media (width <= 480px) {
    .pt130 {
        padding-top: 80px;
    }
    .pt110 {
        padding-top: 60px;
    }
    .pt100 {
        padding-top: 55px;
    }
    .pt90 {
        padding-top: 50px;
    }
    .pt85 {
        padding-top: 45px;
    }
    .pt80 {
        padding-top: 40px;
    }
    .pt70 {
        padding-top: 40px;
    }
    .pt60 {
        padding-top: 35px;
    }
    .pt50 {
        padding-top: 30px;
    }
    .pt40 {
        padding-top: 25px;
    }
    .pt30 {
        padding-top: 20px;
    }
    .pt20 {
        padding-top: 15px;
    }

    .pb120 {
        padding-bottom: 70px;
    }
    .pb100 {
        padding-bottom: 55px;
    }
    .pb90 {
        padding-bottom: 50px;
    }
    .pb80 {
        padding-bottom: 40px;
    }
    .pb70 {
        padding-bottom: 40px;
    }
    .pb60 {
        padding-bottom: 35px;
    }
    .pb50 {
        padding-bottom: 30px;
    }
    .pb40 {
        padding-bottom: 25px;
    }
    .pb30 {
        padding-bottom: 20px;
    }
    .pb20 {
        padding-bottom: 15px;
    }

    .mt80 {
        margin-top: 55px;
    }
    .mt40 {
        margin-top: 25px;
    }

    .mb80 {
        margin-bottom: 55px;
    }
    .mb70 {
        margin-bottom: 50px;
    }
    .mb50 {
        margin-bottom: 30px;
    }
    .mb40 {
        margin-bottom: 25px;
    }
    .mb30 {
        margin-bottom: 20px;
    }
    .mb25 {
        margin-bottom: 18px;
    }
    .mb20 {
        margin-bottom: 15px;
    }
}

/* line-height --------------------------- */
.lh1 {
    line-height: 1;
}

/* letter-spacing --------------------------- */
.ls75 {
    letter-spacing: 0.075em;
}

/* text,show-pc etc --------------------------- */
.txt-center,
.stxt-center {
    text-align: center;
}

.block {
    display: block;
}

.pc-only {
    display: block;
}
.pc-only-l {
    display: block;
}
.pc-only-m {
    display: block;
}
.sp-only {
    display: none;
}
.sp-only-m {
    display: none;
}
.sp-only-l {
    display: none;
}
.sp-only-ll {
    display: none;
}

@media (width <= 1199px) {
    .sp-only-ll {
        display: block;
    }
}

@media (width <= 991px) {
    .pc-only-l {
        display: none;
    }
    .sp-only-l {
        display: block;
    }
    .container {
        max-width: 90%;
    }
}

@media (width <= 768px) {
    .pc-only {
        display: none;
    }
    .sp-only {
        display: block;
    }
    .stxt-center {
        text-align: left;
    }
}

@media (width <= 480px) {
    .pc-only-m {
        display: none;
    }
    .sp-only-m {
        display: block;
    }
}

/* Common layout ---------------------------- */

/* bg-cloudanm */
#bg-cloudanm {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: url("../img/common/bg-cloud-l.png") no-repeat fixed;
    background-position: -900px -90px;
}

#pagecontents {
    z-index: 1;
}

#bg-cloudanm #cvs {
    width: 2000px;
    height: 2500px;
    background-color: rgb(255 255 255 / 50%);
}

@media (width >= 1200px) {
    .container {
        /* max-width: 1200px; */
    }
}

@media (width >= 1400px) {
    .container {
        max-width: 1300px;
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: wrap;
}

/* header ---------------------------- */
.site-header::before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9990;
    display: block;
    width: 100%;
    height: 92px;
    content: "";
    background: rgb(255 255 255 / 90%);
    transform: translateY(-100%);
    transition: all 0.28s ease;
}

.site-header.fixed-header::before {
    transform: translateY(0);
    transition-delay: 0.3s;
}

.site-header.open::before {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 92px;
    content: "";
    background: rgb(255 255 255 / 90%);
    transform: translateY(0);
}

@media (width >= 1141px) {
    .site-header::before {
        height: 55px;
    }

    .site-header.fixed-header .header-navbar {
        position: fixed;
        top: 0;
        transform: translateY(-20px);
        transition: all 0.28s ease;
        transition-delay: 0.3s;
    }

    .site-header.fixed-header .navbar-menu > li > a {
        padding: 35px 0 20px;
    }
}

.header-inner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9990;
    width: 100%;
}

.header-logo {
    position: absolute;
    top: 30px;
    left: 35px;
    width: 95px;
}

.header-logo a {
    display: block;
}

.header-navbar {
    position: absolute;
    top: 0;
    right: 20px;
}

.language {
    position: absolute;
    top: 165px;
    left: 0;
    z-index: 990;
}

.language li {
    margin-bottom: 7px;
}

.language a {
    position: relative;
    display: block;
    padding-left: 35px;
    color: #000;
    text-transform: uppercase;
    opacity: 0.6;
    transition: all 0.28s ease;
}

.language a:hover,
.language a.current {
    opacity: 1;
}

.language a.current {
    color: #000 !important;
}

.language a .pc-only {
    display: block;
}

.language a .sp-only {
    display: none;
}

@media (width <= 1140px) {
    .language a .pc-only {
        display: none;
    }

    .language a .sp-only {
        display: block;
    }
}

@media screen and (width >= 1141px) {
    #home .language a.current {
        color: #fff !important;
    }

    .language a:hover::before {
        opacity: 0.6;
    }

    .site-header .sns a:hover::before {
        opacity: 0.3;
    }

    .language a::before,
    .language a::after,
    .site-header .sns a::before,
    .site-header .sns a::after {
        position: absolute;
        top: 50%;
        left: 0;
        height: 1px;
        margin-top: -1px;
        content: "";
        background: #000;
        transition: all 0.4s ease;
    }

    .language a::after {
        visibility: hidden;
        width: 0;
        opacity: 0;
        transform: translateX(-101%);
    }

    .language a:hover::after {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }

    .language a:hover::after {
        width: 22px;
    }

    .site-header .sns a:hover::after {
        width: 18px;
    }

    .language a::before,
    .language a::after {
        width: 22px;
    }
}

.site-header .sns {
    position: absolute;
    top: 110px;
    right: 0;
    z-index: 999;
    overflow: hidden;
    color: #000;
}

#home .language a,
#home .site-header .sns,
#home .site-header .sns a {
    color: #fff;
}

#home .language a::before,
#home .language a::after,
#home .site-header .sns a::before,
#home .site-header .sns a::after {
    background: #fff;
    transition: all 0.28s ease;
}

.site-header .sns .sns-title {
    display: none;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.site-header .sns li {
    margin-bottom: 20px;
}

.site-header .sns a {
    position: relative;
    display: block;
    padding-right: 27px;
    text-align: center;
}

.site-header .sns a .fa {
    font-size: 2.1rem;
    vertical-align: middle;
}

.site-header .sns a .twitter,
.site-header .sns a .youtube {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 27px;
}

.site-header .sns a .twitter img {
    width: 18px;
}

.site-header .sns a .youtube img {
    width: 20px;
}

.site-header .sns a::before,
.site-header .sns a::after {
    right: 0;
    left: auto;
    width: 18px;
    opacity: 0.3;
    transition: all 0.4s ease;
}

.site-header .sns a::after {
    visibility: hidden;
    width: 0;
    opacity: 0;
    transform: translateX(101%);
}

.site-header .sns a:hover::after {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

/* gnav ---------------------------- */
.navbar-menu > li {
    position: relative;
    display: inline-block;
    margin: 0 15px;
    vertical-align: top;
}

.navbar-menu > li > a {
    padding: 30px 0;
    font-weight: bold;
}

.navbar-menu > li > a::before,
.navbar-menu > li > a::after {
    position: absolute;
    visibility: hidden;
    content: "";
    opacity: 0;
}

.navbar-menu > li > a::before {
    top: 0;
    left: 50%;
    visibility: hidden;
    width: 1px;
    height: 0;
    background: rgb(0 0 0 / 15%);
    opacity: 0;
    transform: translateY(-101%);
    transition: 0.28s all ease;
}

.navbar-menu > li.active > a::before {
    background: #000;
    transition: 0.5s all ease;
}

.is-loaded .navbar-menu > li.active > a::before {
    visibility: visible;
    height: 20px;
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 0.8s;
}

.navbar-menu > li:hover > a::before {
    visibility: visible;
    height: 20px;
    opacity: 1;
    transform: translateY(0%);
}

.navbar-menu > li.has-sub > a::after {
    bottom: 0;
    left: 50%;
    visibility: hidden;
    margin-left: -10px;
    border-right: 10px solid transparent;
    border-bottom: 15px dashed rgb(0 0 0 / 75%);
    border-left: 10px solid transparent;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.15s ease-in;
}

.navbar-menu > li.has-sub:hover > a::after {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    animation-delay: 0.2s;
}

.navbar-menu > li:hover > a,
.navbar-menu > li.active > a {
    opacity: 1 !important;
}

.navbar-menu > li:hover > a::before,
.navbar-menu > li.has-sub:hover > a::after {
    visibility: visible;
    opacity: 1;
}

.navbar-menu > li.active > a::before {
    visibility: visible;
    opacity: 1;
}

.navbar-menu li a {
    position: relative;
    display: block;
    font-size: 1em;
    color: #000;
    text-align: center;
    letter-spacing: 0.1em;
}

.navbar-menu .submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    display: none;
    padding: 35px 35px 20px;
    background: rgb(0 0 0 / 75%);

    /* -webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%); */
}

.navbar-menu .submenu ul {
    display: flex;
}

.navbar-menu .submenu figcaption {
    display: block;
    margin-top: 10px;
    line-height: 1.3;
    color: #fff;
    letter-spacing: 0.075em;
    white-space: nowrap;
}

.navbar-menu .submenu ul li {
    margin-right: 20px;
}

.navbar-menu .submenu ul .colspan-2 {
    width: 220px;
    overflow: hidden;
}

.navbar-menu .submenu ul .colspan-2 a {
    float: left;
    margin-bottom: 10px;
}

.navbar-menu
    .submenu
    ul
    .colspan-2
    a
    .navbar-menu
    .submenu
    ul
    .colspan-2
    .txt-center {
    float: none;
    clear: left;
    display: block;
    width: 100%;
    margin: 0;
    color: #fff;
}

.navbar-menu .submenu ul .colspan-2 .txt-center {
    color: #fff;
}

.navbar-menu .submenu ul .colspan-2 a:nth-child(2) .abs {
    color: #000;
}

.navbar-menu .submenu ul li a {
    width: 110px;
}

.navbar-menu .submenu ul li:last-child {
    margin-right: 0;
}

.navbar-menu li:last-child .submenu {
    right: 0;
    left: auto;

    /* -webkit-transform: none;
	-ms-transform: none;
	transform: none; */
}

@media screen and (width >= 1141px) {
    .header-logo .visible-sm {
        display: none !important;
    }

    .navbar-menu > li {
        opacity: 1 !important;
        transform: none !important;
    }

    .navbar-menu li .submenu {
        visibility: hidden;
        opacity: 0;
    }

    .navbar-menu li:hover .submenu {
        display: block !important;
        visibility: visible;
        opacity: 1;
        animation: moverecbtn 0.2s ease;
        animation-delay: 0.1s;
        animation-fill-mode: both;
    }

    .navbar-menu li:last-child:hover .submenu {
        display: block !important;
        visibility: visible;
        opacity: 1;
        animation: moverecbtnlast 0.2s ease;
        animation-delay: 0.1s;
        animation-fill-mode: both;
    }

    #home .site-header .navbar-menu li a {
        color: #fff;
    }

    #home .site-header.fixed-header .navbar-menu li a {
        color: #000;
    }

    #home .navbar-menu > li > a::before {
        background: #fff;
    }

    #home .navbar-menu > li > a {
        opacity: 0.7;
    }

    .header-navbar .sns,
    .header-navbar .f-tel {
        display: none;
    }

    .navbar-menu .submenu a .thumb-scale img {
        transition: all 0.28s ease;
    }

    .navbar-menu .submenu a:hover .thumb-scale img {
        /* -webkit-filter: none;
    -ms-filter: none;
    filter: none; */
        opacity: 0.8;
    }
}

@media screen and (width <= 1280px) {
    .navbar-menu > li {
        margin: 0 10px;
    }

    .navbar-menu > li:nth-child(5) a {
        letter-spacing: 0;
    }
}

.navbar-menu .submenu figcaption.abs {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.navbar-menu .submenu .thumb-scale {
    display: block;
    background-color: #000;
}

.navbar-menu .submenu .thumb-scale img {
    filter: saturate(0%);
    filter: saturate(0%);
    filter: saturate(0%);
}

#home .site-header .sns {
    top: 280px;
}

#home .site-header .sns .sns-title {
    display: block;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #home .site-header .sns {
        height: 239px;
    }

    #home .site-header .sns .sns-title {
        height: 79px;
    }
}

@media screen and (width <= 1180px) and (width >= 1081px) {
    .header-navbar {
        right: 20px;
    }

    .navbar-menu > li {
        margin-right: 10px;
        margin-left: 10px;
    }

    .header-logo {
        left: 20px;
    }
}

@keyframes moverecbtn {
    0% {
        visibility: hidden;
        transform: translate(-50%, 5%);
        transform: translate(-50%, 5%);
    }

    100% {
        visibility: visible;
        transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }
}

@keyframes moverecbtnlast {
    0% {
        visibility: hidden;
        transform: translate(0, 5%);
        transform: translate(0, 5%);
    }

    100% {
        visibility: visible;
        transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

.btn-hamburger {
    position: fixed;
    top: 16px;
    right: 0;
    z-index: 9999;
    display: none;
    width: 60px;
    height: 60px;
    padding: 15px;
    margin: 0;
    overflow: visible;
    color: inherit;
    text-transform: none;
    cursor: pointer;
    background: #000;
    background-color: transparent;
    border: 0;
    transition-timing-function: linear;
    transition-duration: 0.15s;
    transition-property: opacity, filter;
}

.hamburger-box {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 24px;
}

.btn-hamburger .hamburger-inner {
    top: 3px;
    display: block;
}

.hamburger-inner::before {
    top: 10px;
    transition-timing-function: ease;
    transition-duration: 0.15s;
    transition-property: transform, opacity;
}

.hamburger-inner::after {
    top: 20px;
}

.hamburger-inner,
.hamburger-inner::after,
.hamburger-inner::before {
    position: absolute;
    display: block;
    width: 30px;
    height: 1px;
    content: "";
    background-color: #fff;
    transition-timing-function: ease;
    transition-duration: 0.15s;
    transition-property: transform;
}

.is-open .hamburger-inner {
    background-color: transparent !important;
}

.is-open .hamburger-inner::before {
    transform: rotate(-45deg);
    transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.is-open .hamburger-inner::after {
    top: 10px;
    transform: rotate(-135deg);
    transform: rotate(-135deg);
    transform: rotate(-135deg);
}

@media screen and (width <= 1140px) {
    .btn-hamburger {
        top: 15px;
        display: inline-block;
    }

    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 100%;

        /* background: rgba(255,255,255,.9); */
    }

    .header-inner {
        position: relative;
        padding: 10px;
    }

    .header-logo {
        position: static;
        width: 65px;
        margin-left: 5px;
    }

    .header-logo .h-logo a img {
        height: 72px;
    }

    .header-logo .hidden-sm {
        display: none !important;
    }

    .navbar-nav {
        display: block;
        margin-top: 15px;
    }

    .header-navbar {
        position: absolute;
        top: -100vh;
        right: 0;
        visibility: hidden;
        width: 100%;
        height: calc(100vh - 75px);
        overflow-y: scroll;
        background: rgb(0 0 0 / 85%);
    }

    .header-navbar {
        transition: top 0.5s cubic-bezier(0.77, 0, 0.175, 1) !important;
        transition: top 0.5s cubic-bezier(0.77, 0, 0.175, 1) !important;
    }

    #main,
    .site-footer {
        transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) !important;
        transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) !important;
    }

    .header-navbar.open {
        top: 100%;
        visibility: visible;
    }

    .navbar-menu > li {
        display: block;
        padding: 10px 0;
        margin: 0 25px;
        border-top: 1px solid rgb(255 255 255 / 15%);
    }

    .navbar-menu > li:last-child {
        border-bottom: 1px solid rgb(255 255 255 / 15%);
    }

    .navbar-menu > li > a {
        padding: 10px 0;
        color: #fff;
        text-align: left;
        opacity: 1;
    }

    .navbar-menu > li:first-child {
        border-top: none;
    }

    .navbar-menu > li > a::before,
    .navbar-menu > li > a::after {
        display: none;
    }

    .navbar-menu .submenu {
        position: static;
        display: none;
        padding: 10px 0 0;
        background: none;
        transform: none;
    }

    .navbar-menu .submenu ul {
        flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .navbar-menu .submenu ul li {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .navbar-menu .submenu ul li a,
    .navbar-menu .submenu ul .colspan-2 a {
        width: 150px;
    }

    .navbar-menu .submenu figcaption {
        color: #fff;
    }

    .navbar-menu .submenu .thumb-scale:hover img {
        transform: scale(1);
    }

    .language {
        position: fixed;
        top: 10px;
        left: 110px;
        z-index: 9999;
    }

    .language li {
        position: relative;
        display: inline-block;
        margin-bottom: 0;
    }

    .language ul li:not(:first-child) {
        margin-left: 1px;
    }

    .language ul li:not(:first-child)::after {
        position: absolute;
        top: 50%;
        left: -1px;
        display: block;
        width: 1px;
        height: 20px;
        margin-top: -10px;
        content: "";
        background-color: rgb(0 0 0 / 15%);
    }

    .language a {
        padding: 20px;
        color: #000 !important;
    }

    .language a.current {
        color: #000 !important;
    }

    .language a::before {
        display: none;
    }

    .site-header .sns {
        display: none;
    }

    .header-navbar .sns {
        position: static;
        display: block;
        margin-top: 30px;
        text-align: center;
    }

    .header-navbar .sns li {
        display: inline-block;
        vertical-align: middle;
    }

    .header-navbar .sp-tel {
        display: inline-block;
        font-size: 24px;
    }

    .header-navbar .f-tel {
        padding-bottom: 70px;
        color: #fff;
    }

    .header-navbar .f-tel .sp-tel {
        color: #fff;
    }

    .header-navbar .sp-tel .fa {
        vertical-align: middle;
    }

    .site-header .header-navbar .sns {
        margin-bottom: 20px;
    }

    .site-header .header-navbar .sns li {
        margin: 0 5px;
    }

    .site-header .header-navbar .sns a {
        width: 55px;
        padding: 15px 0;
        background-color: #000;
    }

    .site-header .header-navbar .sns a::before {
        display: none;
    }

    .site-header .header-navbar .sns a .fa {
        color: #fff;
    }

    .site-header .header-navbar .sns a .twitter img {
        width: 35%;
    }

    .site-header .header-navbar .sns a .youtube img {
        width: 50%;
    }

    .navbar-menu .submenu ul .colspan-2 {
        width: auto;
    }
}

@media screen and (width <= 768px) {
    .header-inner {
        box-sizing: border-box;
        height: 80px;
        padding: 5px 10px;
    }

    .site-header::before {
        height: 80px;
    }

    .navbar-menu .submenu figcaption {
        /* font-size: 14px; */
    }

    .navbar-menu .submenu .colspan-2 figcaption {
        font-size: 20px;
    }

    .btn-hamburger {
        top: 10px;
    }

    .language {
        top: 10px;
        left: 90px;
    }

    .language ul li {
        position: relative;
    }

    .language a {
        padding: 15px 12px;
    }

    .navbar-menu .submenu ul {
        flex-flow: row nowrap;
    }

    .navbar-menu .submenu ul li {
        width: 25%;
    }

    .navbar-menu .submenu ul li a {
        width: auto;
    }

    .navbar-menu .submenu ul .colspan-2 {
        width: 50%;
    }

    .navbar-menu .submenu ul .colspan-2 a {
        width: 50%;
    }

    .navbar-menu .submenu .thumb-scale:hover img {
        /* transform: translateY(-50%); */
    }

    .site-header .header-navbar .sns {
        margin-bottom: 0;
    }

    .header-navbar .sp-tel {
        display: block;
        padding: 20px;
    }
}

@media screen and (width <= 480px) {
    .header-logo {
        width: 55px;
        margin-top: 5px;
        margin-left: 0;
    }

    .header-logo .h-logo a img {
        height: 61px;
    }

    .navbar-menu > li {
        margin: 0 25px;
    }

    .navbar-menu .submenu ul {
        flex-direction: column;
    }

    .navbar-menu .submenu ul li {
        margin-right: 0;
    }

    .navbar-menu .submenu ul li a {
        width: 100%;
    }

    .navbar-menu .submenu figure {
        position: relative;
        height: 85px;
        overflow: hidden;
    }

    .navbar-menu .submenu .colspan-2 figcaption {
        font-size: 16px;
    }

    .navbar-menu .submenu ul li {
        width: 100%;
        overflow: hidden;
    }

    .navbar-menu .submenu .thumb-scale {
        /* position: relative; */
        overflow: hidden;
    }

    .navbar-menu .submenu .thumb-scale::after {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        content: "";
        background: rgb(0 0 0 / 50%);
    }

    .navbar-menu .submenu .thumb-scale img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        transform: translateY(-50%);
    }

    .navbar-menu .submenu .thumb-scale:hover img {
        transform: translateY(-50%);
    }

    .navbar-menu .submenu .colspan-2 .thumb-scale img {
        transform: translateY(0);
    }

    .navbar-menu .submenu .colspan-2 span.txt-center {
        display: none;
    }

    .navbar-menu .submenu figcaption {
        position: absolute;
        top: 50%;
        display: block;
        width: 100%;
        margin-top: 0;
        font-size: 16px;
        text-align: center;
        transform: translateY(-50%);
    }

    .navbar-menu .submenu ul li.colspan-2 {
        width: 100%;
    }

    .navbar-menu .submenu ul li.colspan-2 a {
        float: left;
        width: 50%;
        height: auto;
        margin-bottom: 0;
    }

    .navbar-menu .submenu ul li.colspan-2 a:nth-child(2) .abs {
        color: #fff;
    }

    .navbar-menu .submenu ul .colspan-2 a.txt-center {
        display: none;
    }

    .language {
        top: 13px;
        left: 75px;
    }
}

@media screen and (width <= 375px) {
    .navbar-menu .submenu ul li a {
        display: block;
        overflow: hidden;
    }

    .navbar-menu .submenu ul li a img {
        display: block;
        width: 100%;
    }

    /* .navbar-menu .submenu figcaption.abs {
    position: relative;
    top: auto;
    left: auto;
    margin-top: 10px;
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
  } */
}

/* footer ---------------------------- */
.footer-top {
    padding-bottom: 30px;
}

.f-address {
    letter-spacing: 0.08em;
}

.f-address .f-fax {
    position: relative;
    padding-left: 20px;
}

.f-address .f-fax::before {
    position: absolute;
    top: -2px;
    left: 2px;
    font-size: 1.5rem;
    content: "／";
}

.f-address h3 {
    margin-bottom: 5px;
}

.f-menu li,
.nav-links li {
    display: inline-block;
    vertical-align: top;

    /* width: 150px; */
}

.f-menu li {
    margin: 0 10px 20px;
}

.nav-links li {
    margin: 0 12px 10px;
}

.footer-top .nav-links li {
    width: 150px;
}

.nav-links a {
    position: relative;
    display: block;
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.nav-links a > img {
    transition: all 0.3s;
    transition: all 0.3s;
}

.nav-links a:hover > img {
    transform: scale(1.2);
    transform: scale(1.2);
    transform: scale(1.2);
}

.nav-links .txt {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
}

.nav-links .txt i {
    position: relative;
    font-size: 5.2rem;
}

.nav-links .txt .mn-cart {
    top: 8px;
    font-size: 4.2rem;
}

.nav-links .txt .mn-mailmagazine {
    top: 15px;
    font-size: 5.5rem;
}

.nav-links .txt .mn-maintenance {
    top: 15px;
    font-size: 5.2rem;
}

.nav-links .txt .mn-works {
    top: 13px;
    font-size: 5.2rem;
}

.nav-links .txt .mn-tv {
    font-size: 4.2rem;
}

.nav-links .txt small {
    display: block;
    margin-top: 10px;
    font-size: 1.5rem;
}

.footer-bot {
    padding: 24px 0;
    margin: 0;
    border-top: 1px solid rgb(0 0 0 / 10%);
}

.f-sns > * {
    display: inline-block;
    vertical-align: middle;
}

.f-sns li {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}

.f-sns a {
    display: block;
    width: 45px;
    height: 45px;
    font-size: 2.1rem;
    color: #fff;
    text-align: center;
    background: #000;
}

.f-sns a::before {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    content: "";
}

.f-sns .twitter a,
.f-sns .youtube a {
    position: relative;
}

.f-sns .twitter a img,
.f-sns .youtube a img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.f-sns .twitter a img {
    width: 42%;
}

.f-sns .youtube a img {
    width: 60%;
}

.f-sns .fa {
    vertical-align: middle;
}

/* txtlink */
.txtlink a span {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding-left: 10px;
    transition: color 0.6s cubic-bezier(0.8, 0.03, 0.25, 1);
    transition: color 0.6s cubic-bezier(0.8, 0.03, 0.25, 1);
}

.txtlink a span::before {
    position: absolute;
    top: 50%;
    left: -1px;
    display: inline-block;
    margin-top: -10px;
    font: normal normal normal 16px/1 FontAwesome;
    color: #444;
    content: "\f105";
}

.txtlink a span::after {
    position: absolute;
    right: -0.4em;
    bottom: 0;
    left: -0.4em;
    z-index: -1;
    height: 0.8em;
    content: "";
    opacity: 0.4;
    transform: scaleX(0);
    transform: scaleX(0);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transform-origin: 0 50%;
    transform-origin: 0 50%;
    transition: -webkit-transform 0.6s cubic-bezier(0.8, 0.03, 0.25, 1);
    transition:
        transform 0.6s cubic-bezier(0.8, 0.03, 0.25, 1),
        -webkit-transform 0.6s cubic-bezier(0.8, 0.03, 0.25, 1);
}

.txtlink a:hover span::after {
    background-color: #ddd;
    transform: none;
    transform: none;
    transform: none;
}

@keyframes hover-shadow {
    0% {
        opacity: 0.4;
        transform: translateY(6px);
    }

    50% {
        opacity: 1;
        transform: translateY(3px);
    }

    100% {
        opacity: 0.4;
        transform: translateY(6px);
    }
}

.hover-shadow {
    position: relative;
    display: inline-block;
    box-shadow: 0 0 1px rgb(0 0 0 / 0%);
    transform: translateZ(0);
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
}

.hover-shadow::before {
    position: absolute;
    top: 100%;
    left: 5%;
    z-index: -1;
    width: 90%;
    height: 10px;
    pointer-events: none;
    content: "";
    background: radial-gradient(
        ellipse at center,
        rgb(0 0 0 / 35%) 0%,
        rgb(0 0 0 / 0%) 80%
    );
    opacity: 0;

    /* W3C */
    transition-duration: 0.3s;
    transition-property: transform opacity;
}

.hover-shadow:hover {
    transform: translateY(-6px);
    animation-name: hover;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-delay: 0.3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.hover-shadow:hover::before {
    opacity: 0.4;
    transform: translateY(6px);
    animation-name: hover-shadow;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-delay: 0.3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* #toTop */
#toTop {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 9990;
    display: none;
    width: 60px;
    height: 60px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background: #000;
}

.arrowtop {
    position: absolute;
    top: 27px;
    bottom: 0;
    left: 24px;
    box-sizing: border-box;
    display: block;
    width: 15px;
    height: 15px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(-45deg);
}

@media screen and (width <= 991px) {
    .nav-links li {
        margin: 0 0 5px;
    }
}

@media screen and (width <= 910px) {
    .footer-top .nav-links {
        margin-bottom: 25px;
        font-size: 0;
    }

    .footer-top .nav-links li {
        box-sizing: border-box;
        width: 33.33333%;
        padding: 0 3px;
        margin: 0 0 6px;
        font-size: inherit;
    }

    .footer-top .nav-links a {
        height: 90px;
    }
}

@media screen and (width <= 768px) {
    /* .site-footer .container {
		max-width: none;
	} */
    .f-menu {
        display: flex;
        flex-wrap: wrap;
        flex-wrap: wrap;
        overflow: hidden;

        /* bborder-bottom: 1px solid #dfdfdf; */
    }

    .f-menu li {
        display: table;
        width: 50%;
        height: 55px;
        margin: 0;
        text-align: center;

        /* border-bottom: 1px solid #dfdfdf;
	    margin-bottom: -2px; */
    }

    .f-menu li:nth-child(1),
    .f-menu li:nth-child(2) {
        border-top: none;
    }

    .f-menu li a {
        display: table-cell;
        vertical-align: middle;
    }

    .footer-top {
        padding-bottom: 0;
        border-bottom: none;
    }

    .f-address .f-fax {
        display: block;
        padding-left: 0;
    }

    .f-address .f-fax::before {
        content: none;
    }

    .footer-top .f-tel a.sp-tel {
        padding: 5px;
        font-size: 2.4rem;
    }

    .footer-top .nav-links a > img {
        width: 100%;
    }

    .footer-bot {
        display: block;
    }

    .copyright {
        margin-bottom: 15px;
        text-align: center;
    }

    .f-sns p {
        display: none;
    }

    .f-sns ul {
        display: block;
        text-align: center;
    }
}

@media screen and (width <= 640px) {
    .footer-top .nav-links li {
        width: 50%;
    }
}

@media screen and (width <= 480px) {
    .footer-top .f-logo img {
        width: 85px;
        height: auto;
    }

    .footer-top .nav-links {
        margin-bottom: 15px;
    }

    .footer-top .nav-links li {
        margin-bottom: 6px;
    }

    .footer-top .nav-links li:nth-child(2n-1) {
        padding-left: 0;
    }

    .footer-top .nav-links li:nth-child(2n) {
        padding-right: 0;
    }

    .footer-top .nav-links li:last-child {
        padding: 0;
    }

    #footer .container {
        max-width: 100%;
    }
}

@media screen and (width <= 375px) {
    .f-menu li {
        height: 50px;
    }

    .f-menu li a {
        padding: 0 5px;
        letter-spacing: -0.1em;
    }
}

@media (width <= 350px) {
    .f-sns ul {
        text-align: left;
    }
}

/* Main ------------------------------ */
.trans {
    opacity: 1;
    transition: opacity 0.26s ease;
    transition: opacity 0.26s ease;
}

@media screen and (width >= 768px) {
    .trans:hover {
        opacity: 0.8;
    }
}

.ul-itembox > li .thumb-scale {
    margin-bottom: 15px;
    overflow: hidden;
    border: 1px solid #dedede;
}

.ul-itembox > li .thumb-scale img {
    width: 100%;
    background-position: center 50%;
    background-size: cover;
    transition: transform 0.3s;
    transition: transform 0.3s;
}

.ul-itembox > li > a:hover .thumb-scale img {
    transform: scale(1.2);
    transform: scale(1.2);
    transform: scale(1.2);
}

.txt-date {
    color: #9e9e9e;
}

.ul-itembox > li .txt-date {
    position: relative;
    top: -3px;
    font-size: 1.5rem;
}

/* box-nolink */
.ul-itembox > li .thumb-scale.box-nolink:hover img {
    transform: scale(1);
    transform: scale(1);
    transform: scale(1);
}

/* box-noimage */
.ul-itembox > li .thumb-scale.box-noimage {
    position: relative;
    background: #f3f3f3;
    border: none;
}

.ul-itembox > li .thumb-scale.box-noimage img {
    border: none;
}

.thumb-scale.box-noimage img {
    top: 0;
    left: 0;
    border: none;
}

.thumb-scale.box-noimage::after {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: fonticon !important;
    font-size: 14.5rem;
    line-height: 1;
    color: rgb(0 0 0 / 15%);
    text-align: center;
    content: "\e90f";
    transform: translate(-50%, -50%);
}

@media screen and (width >= 768px) {
    .thumb-scale.box-noimage::after {
        font-size: 12rem;
    }
}

/* Button ------------------------------ */
.cm-btn {
    position: relative;
    display: inline-block;
    width: 250px;
    font-size: 1.6rem;
    line-height: 1.444;
    text-align: center;
    letter-spacing: 0.075em;
    text-decoration: none;
    border-radius: 0;
}

.cm-btn .btn-wrap {
    position: relative;
    display: block;
    padding: 16px 14px;
    overflow: hidden;
}

.cm-btn .btn-wrap::before {
    position: absolute;
    top: 0;
    right: -7%;
    width: 0;
    height: 102%;
    content: "";
    background: #444;
    transform: skewX(-30deg);
    transform: skewX(-30deg);
    transform: skewX(-30deg);
    transition: all 0.4s;
    transition: all 0.4s;
}

.cm-btn.btn-default {
    /* border: 2px solid #000; */
    color: #fff;
    background: #000;
}

.cm-btn .btn-wrap::after {
    content: "";
}

.cm-btn .txt {
    position: relative;
    z-index: 10;
}

.cm-btn::before,
.cm-btn::after {
    position: absolute;
    top: 50%;
    height: 1px;
    margin-top: -1px;
    content: "";
    transition: all 0.3s;
    transition: all 0.3s;
}

.cm-btn::before {
    right: 100%;
    width: 65px;
    background: #000;
}

.cm-btn::after {
    right: 100%;
    width: 30px;
    margin-right: -30px;
    background: #fff;
}

.cm-btn .icon {
    position: absolute;
    top: 50%;
    right: 20px;
    z-index: 990;
    width: 13px;
    height: 13px;
    margin-top: -6px;
}

.cm-btn .icon.fa {
    width: auto;
    height: auto;
    margin: 0;
    font-size: 2.2rem;
    transform: translateY(-50%);
    transform: translateY(-50%);
    transform: translateY(-50%);
}

.cm-btn .ico-plus-arrow::after,
.cm-btn .ico-plus-arrow::before {
    position: absolute;
    content: "";
    background: #fff;
    transition: all 0.3s;
    transition: all 0.3s;
}

.cm-btn .ico-plus-arrow::before {
    top: 0;
    left: 6px;
    width: 1px;
    height: 100%;
}

.cm-btn .ico-plus-arrow::after {
    top: 6px;
    left: 0;
    width: 100%;
    height: 1px;
}

.cm-btn-small {
    /* width: 234px; */
}

.cm-btn-small1 {
    width: 145px;
    text-align: left;
}

.cm-btn-small1::before,
.cm-btn-small1::after {
    display: none;
}

.cm-btn-small1 .icon {
    right: 13px;
}

.cm-btn-small1 .btn-wrap {
    padding: 9px 14px 10px;
}

.cm-btn .mn-cart {
    position: absolute;
    top: 50%;
    left: 10px;
    z-index: 1;
    width: 21px;
    height: 25px;
    margin-top: -16px;
    font-size: 3.2rem;
}

.cm-btn-blank::before {
    display: none;
}

.cm-btn-blank .mn-blank {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 15px;
    height: 12px;
    margin-top: -8px;
    font-size: 1.5rem;
    font-weight: 300;
}

.cm-btn .fa {
    color: #fff;
}

@media (width >= 768px) {
    .cm-btn.btn-default:hover {
        /* color: #000; */
    }

    .cm-btn:hover .btn-wrap::before {
        width: 114%;
    }

    .cm-btn:hover::before {
        width: 0;
    }

    .cm-btn:hover::after {
        /* right: 19px; */
        right: 20px;
        width: 20px;
        margin-right: 0;
    }

    .cm-btn:hover .ico-plus-arrow::after,
    .cm-btn:hover .ico-plus-arrow::before {
        /* background: #000; */
        transform: rotate(-45deg);
        transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .cm-btn:hover .icon {
        width: 9px;
        height: 9px;
    }

    .cm-btn:hover .icon.fa-instagram {
        width: auto;
        height: auto;
    }

    .cm-btn:hover .ico-plus-arrow::before {
        top: -2px;
        left: 5px;
    }

    .cm-btn:hover .ico-plus-arrow::after {
        top: 8px;
        left: 1px;
    }

    .cm-btn-small:hover::after {
        right: 20px;
        width: 15px;
    }

    .cm-btn-blank {
        width: 280px;
    }

    .cm-btn-blank:hover .icn-blank {
        background-image: url("../img/common/icn_blank1.png");
    }

    .cm-btn-blank:hover::after {
        /* width: 200px; */
        right: 0;
    }
}

@media (width <= 480px) {
    .cm-btn {
        width: 100%;
    }

    .cm-btn::before {
        width: 0;
    }

    .cm-btn .btn-wrap {
        padding-right: 10px;
        padding-left: 10px;
    }

    .cm-btn-blank {
        width: 100%;
    }
}

/* Title ------------------------------ */
.sec-title {
    position: relative;
    display: table;
    width: 100%;
    height: 390px;
    text-align: center;
}

.sec-title > span {
    display: block;
}

.sec-title .title {
    /* font-size: 9vw;
	position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%); */
    display: table-cell;
    width: 100%;
    height: 100%;
    font-size: 8.5vw;
    vertical-align: middle;

    /* -webkit-transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  transition: all 0.28s ease;
  line-height: 0.9166666666666667; */

    /* line-height: 390px;
  /*color: #000714; */

    /* filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10); */
    opacity: 0;
    transition: all 7s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.sec-title .pttl,
.sec-title .pttl2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    line-height: 1.2;
    color: #000;
    letter-spacing: 0.25em;
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.sec-title .pttl2 > span {
    display: block;
}

.sec-title1 {
    line-height: 1;
    color: #000714;
    opacity: 0.1;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
}

.tb-rl {
    display: inline-block;
    white-space: nowrap;
    writing-mode: tb-rl;
    writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.ls-flex {
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    flex-wrap: wrap;
    flex-wrap: wrap;
    flex-wrap: wrap;
}

.ls-center {
    justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.sec-title .pttl,
.sec-title .pttl2 {
    visibility: hidden;
    opacity: 0;

    /* text-transform: uppercase; */
}

.is-loaded .sec-title .pttl,
.is-loaded .sec-title .pttl2 {
    visibility: visible;
    opacity: 1;
}

.sec-title .pttl span,
.sec-title .pttl2 span span {
    display: inline-block;
    line-height: 1em;
}

.sec-title .pttl span,
.sec-title .pttl2 span span {
    visibility: hidden;
    opacity: 0;
    transform: translate(-50px, 0);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.is-loaded .sec-title .pttl span,
.is-loaded .sec-title .pttl2 span span {
    visibility: visible;
    opacity: 1;
    transform: translate(0, 0);
}

.is-loaded .sec-title .title {
    opacity: 0.1;
    animation-delay: 0.7s;
}

.is-loaded .sec-title .pttl span:nth-of-type(1),
.is-loaded .sec-title .pttl2 span span:nth-of-type(1) {
    transition-delay: 0.1s;
}

.is-loaded .sec-title .pttl span:nth-of-type(2),
.is-loaded .sec-title .pttl2 span span:nth-of-type(2) {
    transition-delay: 0.2s;
}

.is-loaded .sec-title .pttl span:nth-of-type(3),
.is-loaded .sec-title .pttl2 span span:nth-of-type(3) {
    transition-delay: 0.3s;
}

.is-loaded .sec-title .pttl span:nth-of-type(4),
.is-loaded .sec-title .pttl2 span span:nth-of-type(4) {
    transition-delay: 0.4s;
}

.is-loaded .sec-title .pttl span:nth-of-type(5),
.is-loaded .sec-title .pttl2 span span:nth-of-type(5) {
    transition-delay: 0.5s;
}

.is-loaded .sec-title .pttl span:nth-of-type(6),
.is-loaded .sec-title .pttl2 span span:nth-of-type(6) {
    transition-delay: 0.55s;
}

.is-loaded .sec-title .pttl span:nth-of-type(7),
.is-loaded .sec-title .pttl2 span span:nth-of-type(7) {
    transition-delay: 0.6s;
}

.is-loaded .sec-title .pttl span:nth-of-type(8),
.is-loaded .sec-title .pttl2 span span:nth-of-type(8) {
    transition-delay: 0.65s;
}

.is-loaded .sec-title .pttl span:nth-of-type(9),
.is-loaded .sec-title .pttl2 span span:nth-of-type(9) {
    transition-delay: 0.7s;
}

.is-loaded .sec-title .pttl span:nth-of-type(10),
.is-loaded .sec-title .pttl2 span span:nth-of-type(10) {
    transition-delay: 0.75s;
}

.is-loaded .sec-title .pttl span:nth-of-type(11),
.is-loaded .sec-title .pttl2 span span:nth-of-type(11) {
    transition-delay: 0.8s;
}

.is-loaded .sec-title .pttl span:nth-of-type(12),
.is-loaded .sec-title .pttl2 span span:nth-of-type(12) {
    transition-delay: 0.85s;
}

.is-loaded .sec-title .pttl span:nth-of-type(13),
.is-loaded .sec-title .pttl2 span span:nth-of-type(13) {
    transition-delay: 0.9s;
}

.is-loaded .sec-title .pttl span:nth-of-type(14),
.is-loaded .sec-title .pttl2 span span:nth-of-type(14) {
    transition-delay: 0.95s;
}

.is-loaded .sec-title .pttl span:nth-of-type(15),
.is-loaded .sec-title .pttl2 span span:nth-of-type(15) {
    transition-delay: 1s;
}

.is-loaded .sec-title .pttl span:nth-of-type(16),
.is-loaded .sec-title .pttl2 span span:nth-of-type(16) {
    transition-delay: 1.05s;
}

.is-loaded .sec-title .pttl span:nth-of-type(17),
.is-loaded .sec-title .pttl2 span span:nth-of-type(17) {
    transition-delay: 1.1s;
}

.is-loaded .sec-title .pttl span:nth-of-type(18),
.is-loaded .sec-title .pttl2 span span:nth-of-type(18) {
    transition-delay: 1.15s;
}

.is-loaded .sec-title .pttl span:nth-of-type(19),
.is-loaded .sec-title .pttl2 span span:nth-of-type(19) {
    transition-delay: 1.2s;
}

.is-loaded .sec-title .pttl span:nth-of-type(20),
.is-loaded .sec-title .pttl2 span span:nth-of-type(20) {
    transition-delay: 1.25s;
}

/* fade in ---------------------------------------- */
.fadein {
    opacity: 0;
    transform: translate(0, 50px);
    transition: 800ms;
}

.fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0);
}

.img-animation {
    position: relative;
    overflow: hidden;
}

.img-animation::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    content: " ";
    background: #fff;
    transform: translateX(0);
    transform: translateX(0);
    transform: translateX(0);
    transform: translateX(0);
    transform: translateX(0);
    transform: translateX(0);
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.img-animation.scrollin::before {
    transform: translateX(100%);
    transform: translateX(100%);
    transform: translateX(100%);
    transform: translateX(100%);
    transform: translateX(100%);
    transform: translateX(100%);
}

.sec-title2 {
    margin: 70px 0 40px;
    text-align: center;
    letter-spacing: 0.1em;
}

.sec-title2 > span {
    position: relative;
    display: inline-block;
    padding: 16px 0 18px;
}

.sec-title2 > span::after,
.sec-title2 > span::before {
    position: absolute;
    left: 50%;
    width: 1px;
    content: "";
    background: #000;
}

.sec-title2 > span::before {
    top: -70px;
    height: 70px;
}

.sec-title2 > span::after {
    bottom: -40px;
    height: 40px;
}

@media (width <= 767px) {
    .sec-title {
        height: 200px;
        margin-top: 80px;
    }

    .sec-title .title {
        /* top: 50%;
    	left: 50%;
    	position: absolute;
		transform: translate(-50%,-50%);
		font-size: 8rem; */
        font-size: 7.5rem;
        line-height: 0.9;
    }

    .sec-title .pttl {
        white-space: nowrap;
    }
}

/*
@media (max-width: 600px) {
  .sec-title .pttl {
  }
} */
@media (width <= 480px) {
    .sec-title .pttl {
        letter-spacing: 0;
    }

    .sec-title {
        height: 150px;
    }

    .sec-title .title {
        /* font-size: 5.5rem; */
        font-size: 13vw;
    }
}

.btn-list-bl {
    left: 0;
    box-sizing: border-box;
    height: 92px;
    padding: 20px 0 20px 65px;
    line-height: 52px;
    white-space: nowrap;
    transition: all ease 0.3s;
}

.btn-list-bl.pc-only {
    position: fixed;
    z-index: 3000;
    box-sizing: border-box;
    display: block;
    padding: 20px 0 20px 65px;
    margin-top: -115px;
}

.btn-list-bl.pc-only.fixed-btnlist {
    position: fixed;
}

.btn-list-bl:hover {
    display: block;
    width: 100% !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.btn-list-bl .fa {
    position: absolute;
    left: 0;
    width: 52px;
    height: 52px;
    font-size: 52px;
    color: #fff;
    background: #000;
}

.btn-list-bl span {
    transition: all ease 0.3s;
}

.btn-list-bl.pc-only.fixed-btnlist {
    position: fixed;
    left: 0;
    width: 52px;
    padding: 20px 0;
}

.btn-list-bl.pc-only.fixed-btnlist:hover span {
    transform: translateX(0);
}

.btn-list-bl.pc-only.fixed-btnlist span {
    transform: translateX(-101%);
}

.column-main {
    position: relative;
}

@media (width >= 769px) {
    .btn-list-bl::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 0;
        height: 92px;
        content: "";
        transform: translateX(-100%);
        transition: all ease 0.3s;
    }

    .btn-list-bl:hover::before {
        width: 100%;
        height: 92px;
        background: rgb(0 0 0 / 5%);
        transform: translateX(0);
    }

    .btn-list-bl:hover {
        padding-left: 65px !important;
    }
}

@media (width <= 768px) {
    .btn-list-bl.pc-only {
        display: none;
    }

    .btn-list-bl.sp-only {
        left: 0;
        padding-left: 35px;
        margin-bottom: 30px;
    }

    .customerdetail .btn-list-bl.sp-only,
    .works-detail .btn-list-bl.sp-only,
    .products-detail .btn-list-bl.sp-only {
        padding-left: 65px;
    }

    .section-product-detail.pb100 {
        padding-bottom: 0;
    }
}

@media (width <= 480px) {
    .btn-list-bl.sp-only {
        padding-left: 45px;
    }
}

.pagination {
    margin-top: 20px;
    padding-top: 30px;
    border-top: 1px solid rgb(0 0 0 / 10%);
}

.pagination-inner {
    width: 100%;
    max-width: 490px;
    min-height: 52px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.pagination .total {
    display: block;
    width: 100%;
    line-height: 52px;
    font-size: 2.5rem;
}

.pagination .arrows {
    position: absolute;
    top: 0;
    width: 52px;
    height: 52px;
    overflow: hidden;
    color: #fff;
    background: #000;
}

.pagination .btn-prev {
    left: 0;
}

.pagination .nolink {
    opacity: 0.2;
}

.arrowprev {
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 23px;
    box-sizing: border-box;
    display: block;
    width: 13px;
    height: 13px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(-135deg);
    transition: 0.2s all ease;
}

a.arrows:hover .arrowprev,
a.arrows:hover .arrownext {
    left: 20px;
}

a.arrows.btn-prev::before,
a.arrows.btn-next::before {
    position: absolute;
    top: 50%;
    left: 20px;
    display: block;
    visibility: hidden;
    width: 15px;
    height: 1px;
    content: "";
    background: #fff;
    opacity: 0;
    transition: 0.2s all ease;
}

a.arrows.btn-prev::before {
    transform: translateX(101%);
}

a.arrows.btn-next::before {
    transform: translateX(-101%);
}

a:hover.btn-prev.arrows::before,
a:hover.btn-next.arrows::before {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

.arrownext {
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 17px;
    box-sizing: border-box;
    display: block;
    width: 13px;
    height: 13px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
    transition: 0.2s all ease;
}

.pagination .btn-next {
    right: 0;
}

@media (width <= 768px) {
    .pagination-inner {
        max-width: 70%;
    }
}

@media (width <= 480px) {
    .pagination-inner {
        max-width: 100%;
    }
}

.thumbnail-bl {
    display: block;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

a.clor:link,
a.clor:visited,
a.clor:hover {
    color: #636000 !important;
}

.blank {
    position: relative;
    display: inline;
    padding-right: 20px;
    color: #636000 !important;
}

.blank::before {
    position: absolute;
    right: 0;
    bottom: 7px;
    display: block;
    width: 12px;
    height: 10px;
    margin-top: -7px;
    content: "";
    border-top: 1px solid #636000;
    border-right: 1px solid #636000;
}

.blank::after {
    position: absolute;
    right: 3px;
    bottom: 5px;
    display: inline-block;
    width: 12px;
    height: 9px;
    margin-top: -4px;
    content: "";
    border: 1px solid #636000;
}

.detailcontainer > .row {
    margin-right: 0;
    margin-left: 0;
}

.main-content-bl {
}

.main-content-bl .column-main {
    /* width: 65.38461538461538%;
  float: left; */
    padding: 0 50px 0 0;
}

.main-content-bl .sidebar {
    /* width: 28.46153846153846%;
  float: right; */
    padding: 5px 0 0 40px;
}

.main-content-bl .sidebar .ul-cate > li {
    border-bottom: 1px solid rgb(0 0 0 / 7%);
}

.main-content-bl .sidebar .ul-cate > li a {
    position: relative;
    display: block;
    padding: 10px 20px;
    overflow: hidden;
}

.main-content-bl .sidebar .ul-cate > li a::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgb(0 0 0 / 5%);
    transform: translateX(-101%);
    transition: all 0.3s ease;
}

.main-content-bl .sidebar .ul-cate > li a:hover::before {
    transform: translateX(0);
}

.main-content-bl .sidebar .ul-cate.bnone > li {
    border-bottom: none;
}

.main-content-bl .sidebar .s-row {
    position: relative;
    margin-bottom: 69px;
}

.main-content-bl .sidebar .s-row1,
.main-content-bl .sidebar .s-row2,
.main-content-bl .sidebar .s-row3 {
    position: relative;
}

.main-content-bl .sidebar .s-row1 .ul-cate > li:first-child {
    border-top: 1px solid rgb(0 0 0 / 7%);
}

.main-content-bl .sidebar .s-row1 .pttl1::after {
    height: 147px;
}

.main-content-bl .sidebar .s-row3 .ul-cate {
    padding: 3px 0 1px;
}

.main-content-bl .sidebar .pttl1 {
    position: absolute;
    top: 0;
    left: -45px;

    /* padding-bottom: 16px; */
    height: 100%;
    color: #000;
    letter-spacing: 0.025em;
}

.main-content-bl .sidebar .pttl1::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    margin-left: -1px;
    content: "";
    background: #000;
}

.main-content-bl .sidebar .rbox-category .pttl1::after {
    height: calc(100% - 115px);
}

.main-content-bl .sidebar .rbox-archive .pttl1::after {
    height: calc(100% - 100px);
}

.main-content-bl .sidebar .rbox-latest .pttl1::after {
    height: calc(100% - 135px);
}

.main-content-bl .sidebar .accordion {
    display: none;
}

.main-content-bl .sidebar .ul-accordion > li {
    margin-bottom: 1px;
}

.main-content-bl .sidebar .ul-accordion .dropdown {
    position: relative;
    display: block;
    padding: 10px 20px;
    background: rgb(0 0 0 / 8%);
    transition: 0.3s;
    transition: 0.3s;
    transition: 0.3s;
    transition: 0.3s;
    transition: 0.3s;
    transition: 0.3s;
}

.main-content-bl .sidebar .ul-accordion .dropdown::before,
.main-content-bl .sidebar .ul-accordion .dropdown::after {
    position: absolute;
    top: 50%;
    margin-top: -1px;
    content: "";
    background: #1f1f1f;
    transition: 0.3s;
    transition: 0.3s;
    transition: 0.3s;
    transition: 0.3s;
    transition: 0.3s;
    transition: 0.3s;
}

.main-content-bl .sidebar .ul-accordion .dropdown::before {
    right: 20px;
    width: 1px;
    height: 11px;
    margin-top: -6px;
}

.main-content-bl .sidebar .ul-accordion .dropdown::after {
    right: 15px;
    width: 11px;
    height: 1px;
}

.main-content-bl .sidebar .ul-accordion .dropdown.active {
    color: #fff;
    background: #4c4c4c;
}

.main-content-bl .sidebar .ul-accordion .dropdown.active::before {
    display: none;
}

.main-content-bl .sidebar .ul-accordion .dropdown.active::after {
    background: #fff;
}

@media (width <= 1250px) {
    .detailcontainer > .row {
        margin-right: 15px;
        margin-left: 15px;
    }
}

@media (width <= 991px) {
    .main-content-bl .column-main {
        padding: 0 20px;
        margin-bottom: 60px;
    }

    .main-content-bl .sidebar {
        padding: 0 20px;
    }

    .main-content-bl .sidebar .pttl1 {
        position: relative;
        left: 0;
        margin-bottom: 5px;
    }

    .main-content-bl .sidebar .pttl1.tb-rl {
        writing-mode: lr-tb;
        writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
    }

    .main-content-bl .sidebar .pttl1::after {
        position: absolute;
        top: 12px;
        right: 0;
        left: 0;
        height: 1px;
        margin-left: 0;
        content: "";
    }

    .main-content-bl .sidebar .rbox-category .pttl1::after {
        width: calc(100% - 115px);
        height: 1px;
        margin-left: 115px;
    }

    .main-content-bl .sidebar .rbox-archive .pttl1::after {
        width: calc(100% - 100px);
        height: 1px;
        margin-left: 100px;
    }

    .main-content-bl .sidebar .rbox-latest .pttl1::after {
        width: calc(100% - 145px);
        height: 1px;
        margin-left: 145px;
    }

    .main-content-bl .sidebar .ul-cate > li a {
        padding: 13px 20px;
    }

    .main-content-bl .sidebar .s-row {
        margin-bottom: 50px;
    }

    .main-content-bl .sidebar .ul-cate a {
        display: block;
    }
}

@media (width <= 768px) {
    .main-content-bl .column-main {
        padding: 0;
        margin-bottom: 20px;
    }

    .main-content-bl .sidebar {
        padding: 0;
    }
}

@media (width <= 768px) {
    .detailcontainer > .row {
        margin-right: -10px;
        margin-left: -10px;
    }
}

@media (width <=480px) {
    .main-content-bl .column-main {
        margin-bottom: 0;
    }
}

/* slick */

.slick-slider {
    position: relative;
    box-sizing: border-box;
    display: block;
    touch-action: pan-y;
    touch-action: pan-y;
    user-select: none;
    user-select: none;
    user-select: none;
    user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.slick-list:focus {
    outline: none;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}

.slick-track::before,
.slick-track::after {
    display: table;
    content: "";
}

.slick-track::after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    float: left;
    display: none;
    height: 100%;
    min-height: 1px;
}

[dir="rtl"] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

.slick-arrow,
.slick-dots button {
    display: block;
    padding: 0;
    overflow: hidden;
    text-indent: -1000px;
    cursor: pointer;
    outline: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 0;
    border: none;
}

/* list-container ---------------------- */
.container.list-container {
    position: relative;
    padding-right: 0;
    padding-left: 0;
}

.container.list-container .ul-itembox.ls-flex {
    margin: 0 -65px;
}

.container.list-container .ul-itembox > li {
    position: relative;
    width: 33.33333333333333%;
    padding: 0 25px;
    margin-bottom: 65px;
}

.container.list-container .ul-itembox > li a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.container.list-container .ul-itembox > li .stxtbox {
    position: relative;
    flex: 1;
}

.container.list-container .ul-itembox > li .stxtbox .text {
    position: absolute;
    right: 0;
    bottom: -62px;
}

.container.list-container .ul-itembox.ul-news > li {
    margin-bottom: 80px;
}

.container.list-container .ul-itembox.ul-news > li .stxtbox .text {
    bottom: -35px;
}

.container.list-container .ul-itembox > li .cm-btn {
    margin-top: 30px;

    /* margin-top: auto; */
}

.container.list-container .ul-itembox > li .cm-btn {
    border: none;
}

.container.list-container .row .catbox {
    box-sizing: border-box;
    max-width: calc(100% - 400px);
}

.catbox .ul-tab > li:last-child {
    border-right: none;
}

/* @media (max-width: 1500px) {
	.container.list-container .ul-itembox.ls-flex {
		margin: 0 -30px;
	}
} */
@media (width <= 1350px) {
    .container.list-container .ul-itembox.ls-flex {
        margin: 0;
    }

    .container.list-container .ul-itembox > li {
        padding: 0 12px;
    }
}

@media (width <= 1199px) {
    .container.list-container .row .catbox {
        width: 100%;
        max-width: 100%;
        padding-right: 20px;
        padding-left: 20px;
        margin-left: 0;
    }

    .section-award .container.list-container .row .catbox,
    .section-media .container.list-container .row .catbox {
        max-width: calc(100% - 400px);
    }
}

@media (width <= 900px) {
    .section-award .container.list-container .row .catbox,
    .section-media .container.list-container .row .catbox {
        width: 100%;
        max-width: 100%;
        padding-right: 20px;
        padding-left: 20px;
        margin-left: 0;
    }

    .container.list-container .ul-itembox > li {
        width: 50%;
    }

    .container.list-container .ul-itembox > li {
        padding-bottom: 0;
    }
}

@media (width <= 768px) {
    .container.list-container .ul-itembox.ls-flex {
        margin: 0 -15px;
    }

    .container.list-container .ul-itembox > li {
        padding-bottom: 0;
    }

    .container.list-container .ul-itembox > li .stxtbox .text {
        bottom: -22px;
    }

    .container.list-container .ul-itembox > li .cm-btn {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
    }
}

@media (width <= 480px) {
    .container.list-container .ul-itembox.ls-flex {
        margin: 0;
    }

    .container.list-container .ul-itembox > li,
    .container.list-container .ul-itembox.ul-news > li {
        width: 100%;
        padding: 0;
        margin-bottom: 55px;
    }

    .section-award .container.list-container .row .catbox,
    .section-media .container.list-container .row .catbox,
    .container.list-container .row .catbox {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* ul-tab ----------------------- */
.ul-tab {
    display: table;
    width: 100%;
    line-height: 1.125;
    letter-spacing: 0.05em;
    table-layout: auto;
}

.ul-tab > li {
    box-sizing: border-box;
    display: table-cell;
    padding: 0 25px;
    vertical-align: middle;
    text-align: center;
    border-right: 1px solid rgb(0 0 0 / 20%);
}

.ul-tab a,
.ul-tab li > span {
    position: relative;
    display: block;
    font-family:
        "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体",
        "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.ul-tab li > span {
    cursor: pointer;
}

.ul-tab a::after,
.ul-tab li > span::after {
    position: absolute;
    bottom: -7px;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: 3px;
    content: "";
    background: #000;
    opacity: 0;
    transition: 0.3s;
}

.ul-tab a:hover::after,
.ul-tab li > span:hover::after {
    bottom: -10px;
    visibility: visible;
    opacity: 1;
}

.ul-tab a.current::before,
.ul-tab li > span.current::before {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 3px;
    content: "";
    background: #000;
}

.ul-tab a.current:hover::after,
.ul-tab li > span.current:hover::after {
    visibility: hidden;
    opacity: 0;
}

.ul-tab.category1 li a.current::before,
.ul-tab.category2 li a.current::before,
.ul-tab.category3 li a.current::before,
.ul-tab.category4 li a.current::before,
.ul-tab.category5 li a.current::before,
.ul-tab.category6 li a.current::before {
    content: none;
}

.ul-tab.category1 li.cat1 a::before,
.ul-tab.category2 li.cat2 a::before,
.ul-tab.category3 li.cat3 a::before,
.ul-tab.category4 li.cat4 a::before,
.ul-tab.category5 li.cat5 a::before,
.ul-tab.category6 li.cat6 a::before {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 3px;
    content: "";
    background: #000;
}

.ul-tab.category1 li.cat1 a:hover::after,
.ul-tab.category2 li.cat2 a:hover::after,
.ul-tab.category3 li.cat3 a:hover::after,
.ul-tab.category4 li.cat4 a:hover::after,
.ul-tab.category5 li.cat5 a:hover::after,
.ul-tab.category6 li.cat6 a:hover::after {
    visibility: hidden;
    opacity: 0;
}

.ul-tab.category1 li a.current:hover::after,
.ul-tab.category2 li a.current:hover::after,
.ul-tab.category3 li a.current:hover::after,
.ul-tab.category4 li a.current:hover::after,
.ul-tab.category5 li a.current:hover::after,
.ul-tab.category6 li a.current:hover::after {
    bottom: -10px;
    visibility: visible;
    opacity: 1;
}

@media (width <= 991px) {
    .ul-tab > li {
        padding: 0 15px;
    }

    .ul-tab > li:last-child {
        border-right: none;
    }
}

@media (width <= 768px) {
    /* ul-tab */
    .ul-tab {
        display: block;
        font-size: 0;
    }

    .ul-tab > li {
        display: inline-block;
        margin-bottom: 5px;
        font-size: 1.6rem;
    }

    .ul-tab > li a {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .section-news .ul-tab > li {
        width: 33.33333%;
        margin-bottom: 25px;
    }

    .section-news .ul-tab > li:nth-child(3n-1) {
        border-right: 1px solid rgb(0 0 0 / 20%);
    }

    .section-news .ul-tab > li:nth-child(3n) {
        border-right: none;
    }
}

@media (width <= 480px) {
    .ul-tab > li,
    .section-news .ul-tab > li {
        width: calc(50% - 1px);
        padding: 0 10px;
        margin-bottom: 25px;
    }

    .section-news .ul-tab > li:nth-child(3n-1),
    .section-news .ul-tab > li:nth-child(3n),
    .ul-tab > li:nth-child(2n-1),
    .section-news .ul-tab > li:nth-child(2n-1) {
        border-right: 1px solid rgb(0 0 0 / 20%);
    }

    .ul-tab > li:nth-child(2n),
    .section-news .ul-tab > li:nth-child(2n) {
        border-right: none;
    }
}

/* listpage-archive -------------------- */
.listpage-archive {
    position: absolute;
    right: -37px;
    box-sizing: border-box;
    width: 350px;
    padding-left: 110px;
    margin-top: -5px;
}

.listpage-archive::before {
    position: absolute;
    left: 15px;
    font-family: "EB Garamond", serif;
    font-weight: normal;
    color: #000;
    content: "ARCHIVE";
}

.listpage-archive #r-archive,
.listpage-archive .r-archive {
    position: relative;
    top: -10px;
    box-sizing: border-box;

    /* overflow: hidden; */
    width: 240px;
    height: 45px;
    background: #fff;
    border: 3px solid #c9c9c9;
}

.listpage-archive #r-archive .list-archive dt,
.listpage-archive #r-archive .list-archive dd,
.listpage-archive .r-archive .list-archive dt,
.listpage-archive .r-archive .list-archive dd {
    box-sizing: border-box;
    line-height: 39px;
}

.listpage-archive #r-archive .list-archive dt a,
.listpage-archive #r-archive .list-archive dd a,
.listpage-archive .r-archive .list-archive dt a,
.listpage-archive .r-archive .list-archive dd a {
    box-sizing: border-box;
    display: block;
    padding-right: 20px;
    padding-left: 20px;
}

@media (width <= 1350px) {
    .listpage-archive {
        right: 13px;
    }
}

@media (width <= 1199px) {
    .section-news .listpage-archive {
        position: relative;
        right: 28px;
        margin-top: 15px;
        margin-bottom: 20px;

        /* left: 50%; */
        margin-left: auto;
    }

    .section-news
        .container.list-container
        .row
        .catbox
        .ul-tab
        > li:last-child {
        border-right: none;
    }
}

@media (width <= 991px) {
    .listpage-archive {
        position: relative;
        right: 28px;
        margin-top: 15px;
        margin-bottom: 20px;

        /* left: 50%; */
        margin-left: auto;
    }
}

@media (width <= 768px) {
    .listpage-archive,
    .section-news .listpage-archive {
        right: 0;
        left: 50%;
        margin-left: -175px;
    }
}

@media (width <= 480px) {
    .listpage-archive,
    .section-news .listpage-archive {
        right: 0;
        left: 0;
        display: block;
        width: 100%;
        padding: 0 15px;
        margin-right: auto;
        margin-left: auto;
    }

    .listpage-archive::before,
    .section-news .listpage-archive::before {
        top: -30px;
        right: 0;
        left: 0;
        display: block;
        width: 100%;
        text-align: center;
    }

    .listpage-archive #r-archive,
    .listpage-archive .r-archive {
        top: 0;
        width: 100%;
    }
}

/* section-award ul-tab */
@media (width <= 768px) {
    .section-award .ul-tab {
        display: table;
        width: 100%;
    }

    .section-award .ul-tab > li {
        display: table-cell;
    }
}

@media (width <= 480px) {
    .section-award .ul-tab {
        display: block;
    }

    .section-award .ul-tab > li {
        display: inline-block;
    }
}

/* box-free */
.box-free {
    box-sizing: border-box;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
}

.box-free a:link,
.box-free a:visited,
.box-free a:hover {
    color: #636000 !important;
}

.box-free a:hover {
    text-decoration: underline !important;
}

.box-free p {
    margin-bottom: 22px;
}

.box-free img {
    box-sizing: border-box;
    box-sizing: border-box;
    box-sizing: border-box;
    box-sizing: border-box;
    box-sizing: border-box;
    max-width: 100%;
    height: auto;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.box-free strong,
.box-free b {
    display: block;
    font-weight: bold !important;
}

/* txt-privacy --------------------- */
.txt-privacy p {
    margin-bottom: 30px;
    letter-spacing: 0.08em;
}

.txt-privacy p .f-bold {
    padding-bottom: 5px;
    font-size: 1.7rem;
    color: #000;
}

.txt-privacy p .f-bold em,
.text-privacy p .f-bold em {
    position: relative;
    top: 4px;
    font-family: "Gentium Basic", serif;
    font-size: 2.1rem;
    font-weight: normal;
}

@media (width <= 480px) {
    .section-privacy .sec-title .pttl.f-sz40 {
        font-size: 2.7rem;
        letter-spacing: -0.08em;
    }

    .txt-privacy p {
        margin-bottom: 25px;
    }
}

/* box-table ------------- */
.box-table > dl {
    display: table;
    width: 100%;
    padding: 23px 0;
    table-layout: auto;
    border-bottom: 1px solid rgb(0 0 0 / 7%);
}

.box-table > dl:first-child {
    border-top: 1px solid rgb(0 0 0 / 7%);
}

.box-table > dl dt {
    display: table-cell;
    padding: 0 50px 0 0;
    vertical-align: middle;
    text-align: right;
    border-right: 3px solid #000;
}

.box-table > dl dd {
    display: table-cell;
    padding: 0 20px 0 50px;
    vertical-align: middle;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
}

@media (width <= 768px) {
    .box-table > dl,
    .box-table > dl dt,
    .box-table > dl dd {
        position: relative;
        box-sizing: border-box;
        display: block;
    }

    .box-table > dl {
        padding: 20px;
    }

    .box-table > dl dt {
        width: 100%;
        margin-bottom: 5px;
        text-align: left;
        border: none;
    }

    .box-table > dl dt::before {
        position: absolute;
        top: 50%;
        left: -20px;
        width: 11px;
        height: 3px;
        margin-top: -2px;
        content: "";
        background: #000;
    }

    .box-table > dl dd {
        padding: 0;
    }
}

@media (width <= 480px) {
    .box-table > dl {
        padding: 20px 10px 20px 20px;
    }
}

/* new-shop-open */
.new-shop-open {
    position: relative;
    box-sizing: border-box;
    height: 520px;
    padding: 40px 0 50px;
    background: transparent url("../img/home/bg_shop.jpg") center top no-repeat;
    background-size: cover;
}

#home .new-shop-open {
    height: auto;
}

.new-shop-open .mask-book {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 0;
    width: 100%;
    max-width: 410px;
    height: 100%;
    margin: 0 auto;
    margin-left: -205px;
    background: rgb(0 0 0 / 40%);
}

.new-shop-open .mask-book::before {
    position: absolute;
    top: 0;
    right: 10px;
    left: 10px;
    height: 100%;
    content: "";
    border-right: 2px solid #1b1b1b;
    border-left: 2px solid #1b1b1b;
}

.new-shop-open .box-title,
.new-shop-open .b-logo {
    position: relative;
    z-index: 10;
}

.new-shop-open .box-title {
    min-height: 352px;
    padding: 90px 0 30px;
    color: #fff;
    background: transparent url("../img/home/mask_shop_open.png") center top
        no-repeat;
    background-size: auto 100%;
}

.new-shop-open .box-title .f-fz30,
.new-shop-open .box-title .f-sz50 {
    line-height: 1;
}

.new-shop-open .box-title .f-sz50 {
    line-height: 0.7em;
}

.new-shop-open .box-title .mb10 {
    margin-bottom: 17px;
}

.new-shop-open .box-title .company-name {
    letter-spacing: 0.35em;
}

.new-shop-open .box-title .company-time,
.new-shop-open .box-title .schedule {
    letter-spacing: 0.05em;
}

.new-shop-open .box-title .company-time {
    color: #b5b5b5;
}

.new-shop-open .box-title .schedule {
    line-height: 1.8;
}

.new-shop-open .cm-btn {
    overflow: hidden;
}

@media screen and (width <= 991px) {
    .new-shop-open,
    #home .new-shop-open {
        height: 500px;
    }

    #home .new-shop-open .box-title {
        min-height: 240px;
        padding-top: 45px;
        background-size: 550px auto;
    }
}

@media screen and (width <= 768px) {
    .new-shop-open,
    #home .new-shop-open {
        height: auto;
        padding: 30px 0 25px;
    }

    .new-shop-open .box-title,
    #home .new-shop-open .box-title {
        min-height: 0;
        padding: 30px 5px;
        margin-bottom: 20px;
        background-color: #000;
    }

    .new-shop-open .box-title .company-name {
        letter-spacing: 0.2em;
    }
}

@media screen and (width <= 640px) {
    .new-shop-open .mask-book {
        width: 300px;
        max-width: none;
        margin-left: -150px;
    }

    .new-shop-open .box-title .company-name {
        font-size: 1.7rem;
    }
}

@media screen and (width <= 480px) {
    .new-shop-open {
        padding: 25px 0 10px;
    }

    .new-shop-open .b-logo {
        margin-bottom: 10px;
    }

    .new-shop-open .b-logo img {
        width: 50px !important;
    }

    .new-shop-open .box-title,
    #home .new-shop-open .box-title {
        padding: 18px 5px;
        margin-bottom: 10px;
    }

    .new-shop-open .container {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .new-shop-open .mask-book {
        width: 250px;
        margin-left: -125px;
    }

    .new-shop-open .box-title .company-name {
        letter-spacing: 0.1em;
    }
}

@media screen and (width <= 410px) {
    .new-shop-open .box-title .f-sz50 {
        font-size: 3rem;
    }

    .new-shop-open .box-title .schedule {
        font-size: 1.4rem;
    }

    .new-shop-open .box-title,
    #home .new-shop-open .box-title {
        margin-right: -15px;
        margin-left: -15px;
    }

    .new-shop-open .box-title .company-name {
        font-size: 1.45rem;
    }
}

/* 2020.04.20 追加 */

/* .section-overseas {
	padding-top: 90px;
}
@media (max-width: 768px) {
	.section-overseas {
		padding-top: 65px;
	}
}
@media (max-width: 480px) {
	.section-overseas {
		padding-top: 50px;
	}
} */
.section-overseas .ovs-store .info {
    width: 100%;
}

.section-overseas .ul-data {
    padding-top: 10px;
    line-height: 1.75;
    letter-spacing: 0.025em;
}

.section-overseas .ul-data > li {
    display: block;
    width: 100%;
    padding: 20px 0 15px;
    border-bottom: 1px solid rgb(0 0 0 / 7%);
}

.section-overseas .ul-data .th {
    display: block;
    padding-bottom: 8px;
}

.section-overseas .ul-data .td {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 24px;
}

.section-overseas .ul-data .th {
    width: 250px;
}

.section-overseas .ul-data .th .line {
    position: relative;
    display: block;
    padding-left: 24px;
    font-size: 1.9rem;
}

.section-overseas .ul-data .th .line::before {
    position: absolute;
    top: 14px;
    left: 0;
    width: 11px;
    height: 3px;
    content: "";
    background: #000;
}

.section-overseas .ul-data .clor {
    color: #636000;
}

.section-overseas .ul-data .row-btn .cm-btn {
    float: right;
}

@media screen and (width <= 885px) {
    .section-overseas .ovs-store .info {
        float: none;
        width: auto;
        margin-bottom: 25px;
    }
}

@media screen and (width <= 768px) {
    .section-overseas .ovs-store {
        padding-top: 10px;
    }

    .section-overseas .ul-data > li {
        display: block;
    }

    .section-overseas .ul-data .th .line::before {
        height: 2px;
    }

    .section-overseas .ul-data .td {
        padding-left: 24px;
    }
}

@media screen and (width <= 480px) {
    .section-overseas .container {
        padding-right: 5px;
        padding-left: 5px;
    }
}

.section-overseas .ul-data .td dl {
    padding-bottom: 10px;
}

.section-overseas .ul-data .td dl {
    display: block;
    width: calc(100% / 3);
    letter-spacing: 0.02em;
}

.section-overseas .ul-data .td dl:nth-child(2) {
    display: block;
    width: calc(100% - 40%);
}

.section-overseas .ul-data .td dl dt {
    width: 120px;
    line-height: 1.5em;
}

.section-overseas .ul-data .td dl dt span {
    display: block;
    font-size: 1.3rem;
    line-height: 1.5em;
}

.section-overseas .ul-data .td dl dd {
    display: block;
    width: 100%;
    padding-left: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.45rem;
    line-height: 1.4em;
    overflow-wrap: break-word;
}

.section-overseas .ul-data .td dl dd a {
    color: #636000 !important;
}

@media screen and (width <= 768px) {
    .section-overseas .ul-data .td dl {
        width: 50%;
    }

    .section-overseas .ul-data .td dl:nth-child(2) {
        width: 50%;
    }

    .section-overseas .ul-data .td dl dt {
        width: 100%;
        padding-bottom: 5px;
    }

    .section-overseas .ul-data .td dl dd {
        padding-left: 5px;
    }
}

@media screen and (width <= 640px) {
    .section-overseas .ul-data .td dl {
        width: 100%;
    }

    .section-overseas .ul-data .td dl:nth-child(2) {
        width: 100%;
    }

    .section-overseas .ul-data .td dl {
        padding-bottom: 13px;
    }
}

.date.f-sz17.f-gb,
.rbox-latest .f-gb {
    font-size: 1.6rem;
}

/* ----------------------------------------------- */

/* c-products  */

/* ----------------------------------------------- */

/* title */
.c-products .title-box {
    position: relative;
}

.c-products .title-box::before {
    display: block;
    width: 1px;
    height: 70px;
    margin: 0 auto;
    content: "";
    background-color: #000;
}

.c-products .title-box .title {
    padding-top: 20px;
    padding-bottom: 15px;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
}

.c-products .title-box .text {
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
}

.c-products .title-box .text .iblock {
    display: inline-block;
}

/* slider */

.c-products .slider-container {
    max-width: 1400px;
    margin: 0 auto;
}

.c-products .slider-list .slider-item {
    margin: 0 20px;
}

.c-products .slider-list a {
    display: block;
    height: 100%;
}

.c-products .slider-list .img {
    position: relative;
    z-index: 0;
    width: 100%;
    aspect-ratio: 310 / 388;
}

.c-products .slider-list .img::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background-color: #000;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.c-products .slider-list .img .icon-box {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    aspect-ratio: 1 / 1;
    background-color: #000;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.28s ease;
}

.c-products .slider-list .img .fa {
    font-size: 40px;
    color: #fff;
}

.c-products .slider-list .img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-products .slider-list .info {
    padding-top: 20px;
}

.c-products .slider-list .name {
    font-feature-settings: "palt";
    line-height: 1.66;
    letter-spacing: 0.1em;
}

@media (width <= 1280px) {
    .c-products .slider-list .slider-item {
        margin: 0 15px;
    }
}

@media (width >= 769px) {
    .c-products .slider-list a:hover .img::before {
        opacity: 0.4;
    }

    .c-products .slider-list a:hover .img .icon-box {
        opacity: 1;
    }
}

@media (width <= 768px) {
    .c-products .title-box::before {
        height: 55px;
    }
}

@media (width <= 480px) {
    .c-products .title-box::before {
        height: 40px;
    }
}

/* slick ---------- */

/* スライド高さ揃える */
.c-products .slider-list .slick-track {
    display: flex;
}

.c-products .slider-list .slick-slide {
    height: auto !important;
}

/* slick-arrow ------------------------------------ */
.c-products .slider-list .slick-arrow {
    position: absolute;
    top: 50%;
    z-index: 2500;
    width: 52px;
    height: 52px;
    margin-top: -12px;
    background-repeat: no-repeat;
    background-position: center center;
}

.c-products .slider-list .slick-prev,
.c-products .slider-list .slick-next {
    box-sizing: border-box;
    display: block;
    width: 24px;
    height: 24px;
    transition: 0.2s all ease;
}

.c-products .slider-list .slick-prev {
    bottom: 0;
    left: 23px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(-135deg);
}

.c-products .slider-list .slick-next {
    right: 23px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
}

/* slick-dots ----------------------------- */
.c-products .slider-list .slick-dots {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    text-align: center;
}

.c-products .slider-list .slick-dots > li {
    display: inline-block;
    margin: 0 5px;
    line-height: 10px;
}

.c-products .slider-list .slick-dots > li button {
    width: 10px;
    height: 10px;
    background-color: #c7c8c9;
}

.c-products .slider-list .slick-dots > li.slick-active button {
    background: #000;
}