/*
    カスタムCSS
    オリジナル要素は1390行〜1450行近辺にある『WEBサイト 固有カスタム』以下に記載。
*/

/*------------------------------------*\
    Google Font
\*------------------------------------*/

.mont {
    font-family: 'Montserrat', sans-serif;
}

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

.notoserif {
    font-family: 'Noto serif JP', sans-serif;
}

.handlee {
    font-family: 'Handlee', cursive;
    font-weight: bold;
    letter-spacing: 0.05em;
}


/*------------------------------------*\
    MAIN
\*------------------------------------*/

body {
    font-family: 'Noto Sans JP', sans-serif;
}

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

section .contents p a {
    text-decoration: underline;
}

section .contents p a:hover {
    text-decoration: none;
}

a:hover {
    filter: alpha(opacity=70);
    /* 以下、ゆっくりフェードインさせる設定 */
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

a.post-edit-link {
    max-width: 100%;
    display: block;
    padding: 1.0em;
    line-height: 1.5;
    font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "MS Pgothic", knowledge-reg, helvetica, arial, sans-serif;
    margin: 0em auto;
    text-align: center;
    background: #eeeeee;
    color: #222222;
}

a.post-edit-link:hover {
    background: #444444;
    color: #eee;
    filter: alpha(opacity=70);
    /* 以下、ゆっくりフェードインさせる設定 */
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

a.post-edit-link:before {
    font-weight: 600;
    content: " \f0da";
    padding-left: 2px;
    padding-right: 5px;
    font-family: "Font Awesome 5 Free";
}

a.post-edit-link:after {
    font-weight: 300;
    content: " （ログイン中のユーザーのみに表示されます。）";
    padding-left: 2px;
    padding-right: 5px;
}

p.sec_border {
    position: relative;
    border-bottom: 3px solid black;
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1.5em;
}

p.sec_border:after {
    content: " ";
    border-bottom: 1px solid black;
    margin: 0 auto;
    width: 100%;
    position: absolute;
    left: 0px;
}

.sp { display: none !important; }
@media screen and (max-width: 599px) {
    .sp { display: block !important; }
}

/*------------------------------------*\
    パンくずリスト
\*------------------------------------*/

.bread-box {
    background: transparent;
    color: #e50012;
    font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "MS Pgothic", knowledge-reg, helvetica, arial, sans-serif;
}

.cf {
    padding: 0px 15px 5px;
    margin: 0px auto;
    color: #333333;
    width: 1000px;
    text-align: center;
}

.cf span {
    font-size: 1.1rem;
    color: #333333;
}

@media only screen and (max-width: 999px) {
    .cf {
        width: 100%;
    }
}


/*
------------------------------------------------------------------------------------------------
ローディング
------------------------------------------------------------------------------------------------
*/

#loading {
    /* CSSの変数を--vhとし、高さを指定 */
    height: 100vh;
    /* 変数をサポートしていないブラウザのフォールバック */
    height: calc(var(--vh, 1vh) * 100);
    align-items: center;
    justify-content: center;
}

#loading {
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.logoitem {
    position: relative;
    width: 150px;
    height: 150px;
}

.logoitem img.logo {
    display: block;
    width: 150px;
    height: auto;
    margin: 0 auto;
}

img.loadericon {
    position: absolute;
    top: 93;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 90px;
    height: 11px;
}

#loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #FFF;
    z-index: 999;
}


.logoitem {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}






/*
------------------------------------------------------------------------------------------------
レイアウト
------------------------------------------------------------------------------------------------
*/

.aleft {
    text-align: left;
}

.aright {
    text-align: right;
}

.center {
    text-align: center;
}

.w100 {
    width: 100%;
}

main.index {}

section {
    display: block;
}

.pager {
    font-size: 1.5rem;
    justify-content: space-around;
    align-items: center;
}

.pagination {
    margin-bottom: 3.0em;
}

.pagination span {
    padding: 0.5em;
    background: #ccc;
    border: 1px solid #ccc;
    border-radius: 3px;
    /* CSS3草案 */
    -webkit-border-radius: 3px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 3px;
    /* Firefox用 */
}

.pagination a {
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 3px;
    /* CSS3草案 */
    -webkit-border-radius: 3px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 3px;
    /* Firefox用 */
}

.swrap {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.swrap .item1 {
    width: 50%;
}

.swrap .item2 {
    width: 50%;
}

.swrap-single {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


@media screen and (max-width: 599px) {
    .w100sp {
        width: 100%;
    }
}

@media (max-width: 999px) {
    .swrap {
        flex-direction: column;
    }

    .swrap .item1 {
        width: 100%;
    }

    .swrap .item2 {
        width: 100%;
    }

    .pager {
        font-size: 1.3rem;
        justify-content: space-around;
        align-items: center;
    }
}


/*
------------------------------------------------------------------------------------------------
配色
------------------------------------------------------------------------------------------------
*/

.red {
    color: #dd0000 !important;
}

a.blue {
    color: #0000ff !important;
    text-decoration: underline;
}

a.blue:hover {
    text-decoration: none;
}

.white {
    color: #ffffff !important;
}

.white:before {
    background-color: #ffffff !important;
}

/*
------------------------------------------------------------------------------------------------
見出し
------------------------------------------------------------------------------------------------
*/

h2.title {
    font-size: 4.0rem;
    position: relative;
    display: inline-block;
    margin-bottom: 1em;
}

h2.title:before {
    content: '';
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 100px;
    height: 1px;
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #232323;
    border-radius: 2px;
}

h2.title span {
    font-size: 1.2rem;
    display: block;
    margin-bottom: 0em;
}


h2.subtitle {
    font-size: 2.5rem;
    position: relative;
    display: inline-block;
    margin-bottom: 2em;
}

h2.subtitle:before {
    content: '';
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 100px;
    height: 1px;
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #232323;
    border-radius: 2px;
}

.singletitle {
    position: relative;
    padding: 0.6em;
    background: #232323;
}

.singletitle:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #232323;
    width: 0;
    height: 0;
}

.singletitle h1 {
    font-size: 2.0rem;
    color: #fff;
}

.singletitle span.date {
    display: block;
    font-size: 1.3rem;
    color: #fff;
}


h2.subtitle02 {
    width: 100%;
    background: #232323 !important;
    color: #ffffff;
    padding: 5px 15px;
    border-radius: 8px;
    /* CSS3草案 */
    -webkit-border-radius: 8px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 8px;
    /* Firefox用 */
    font-size: 2.0rem;
    position: relative;
    display: inline-block;
    margin-top: 1em;
    margin-bottom: 0.1em;

}

/*
------------------------------------------------------------------------------------------------
アイコンとボタン
------------------------------------------------------------------------------------------------
*/

.round_btn {
    min-width: 280px;
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding: 0.7em 2.5em 0.5em;
    text-decoration: none;
    color: #232323;
    background: #ffffff;
    transition: .4s;
    border: 1px solid #232323;
    border-radius: 100px;
    /* CSS3草案 */
    -webkit-border-radius: 100px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 100px;
    /* Firefox用 */
}

.round_btn:hover {
    background: #232323;
    color: white;
}

.round_btn_red {
    min-width: 280px;
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-size: 2.2rem;
    padding: 0.7em 2.5em 0.5em;
    text-decoration: none;
    color: #ffffff;
    background: #dd0000;
    transition: .4s;
    border: 0px solid #232323;
    border-radius: 100px;
    /* CSS3草案 */
    -webkit-border-radius: 100px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 100px;
    /* Firefox用 */
}

.round_btn_red:hover {
    background: #ffffff;
    color: #dd0000;
}

.phonebtn {
    font-size: 2.5rem;
}


.round_btn_pink {
    min-width: 280px;
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-size: 1.8rem;
    padding: 0.5em 2.5em 0.3em;
    text-decoration: none;
    color: #ffffff;
    background: #ca006d;
    transition: .4s;
    border: 0px solid #232323;
    border-radius: 100px;
    /* CSS3草案 */
    -webkit-border-radius: 100px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 100px;
    /* Firefox用 */
}

.round_btn_pink:hover {
    background: #ffffff;
    color: #ca006d;
}


.round_btn_line {
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-size: 3.0rem;
    padding: 0.7em 2.5em 0.5em 3.5em;
    text-decoration: none;
    color: #ffffff;
    background: #4ab652;
    transition: .4s;
    border: 0px solid #232323;
    border-radius: 8px;
    /* CSS3草案 */
    -webkit-border-radius: 8px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 8px;
    /* Firefox用 */
}

.round_btn_line:before {
    position: absolute;
    left: 1.5em;
    content: "";
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background: url(../images/icon-line.png) no-repeat;
    background-size: contain;
    background-position: 0px;
}

.round_btn_line:hover {
    background: #ffffff;
    color: #4ab652;
}


.round_btn_mail {
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-size: 3.0rem;
    padding: 0.7em 2.5em 0.5em 3.5em;
    text-decoration: none;
    color: #ffffff;
    background: #8b9292;
    transition: .4s;
    border: 0px solid #232323;
    border-radius: 8px;
    /* CSS3草案 */
    -webkit-border-radius: 8px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 8px;
    /* Firefox用 */
}

.round_btn_mail:before {
    position: absolute;
    left: 1.5em;
    content: "";
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background: url(../images/icon-mail.png) no-repeat;
    background-size: contain;
    background-position: 0px;
}

.round_btn_mail:hover {
    background: #ffffff;
    color: #8b9292;
}


.round_btn_order {
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-size: 3.0rem;
    padding: 0.7em 2.5em 0.5em 3.5em;
    text-decoration: none;
    color: #E1E0DB;
    background: #ca006d;
    transition: .4s;
    border: 0px solid #232323;
    border-radius: 8px;
    /* CSS3草案 */
    -webkit-border-radius: 8px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 8px;
    /* Firefox用 */
}

.round_btn_order:before {
    position: absolute;
    left: 1.5em;
    content: "";
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background: url() no-repeat;
    background-size: contain;
    background-position: 0px;
}

.round_btn_order:hover {
    background: #ffffff;
    color: #ca006d;
}

.recruit_bnr {
    display: block;
    text-align: center;
    margin: 3rem 0;
}


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

    .round_btn_line {
        font-size: 2.0rem;
    }

    .round_btn_mail {
        font-size: 2.0rem;
    }

    .round_btn_order {
        font-size: 1.8rem;
        padding: 0.9em 1.0em 0.7em 3.5em;
    }

    .round_btn_red {
        font-size: 1.8rem;
        padding: 0.7em 1.5em 0.5em;
    }

}


/*
------------------------------------------------------------------------------------------------
ヘッダー設定
------------------------------------------------------------------------------------------------
*/

.wrap {
    max-width: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px;
    box-sizing: content-box;
}

/* header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 1.0);
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.3);
    z-index: 3;
    border-bottom: #dd0000 solid 0px;
    border-top: #dd0000 solid 0px;
    transition: .3s;
} */

header {
    position: fixed;
    height: 70px;
    top:0;
    &.scrolled {
        .inner {
            color:#444444;
            background-color: rgba(255, 255, 255, 0.7);
            box-shadow: 0 0 30px rgba(0,0,0,0.4);
            height: 70px;
        }
    }

    .inner {
        background-color: rgba(255, 255, 255, 0.2);
        position: fixed;
        width: 100%;
        /* max-width: $inner-width; */
        min-width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 2rem 3rem;
        z-index: 100;

        .logo {
            margin-right: auto;
            flex: none;

            a {
                display: block;

                img {
                    height: 4rem;
                    width: auto;
                }
            }
        }

        .menu-wrapper {
            nav.gnav {
                flex: none;
                position: relative;
                .menu-container {
                    .gmenu {
                        display: flex;
                        margin: 0 1rem;

                        >.menu-item {
                            &.menu-item-has-children {
                                position: relative;

                                >a {
                                    &::after {
                                        color:#111111;
                                        content: url(../img/icon-arrow-down.svg);
                                        display: inline-block;
                                        width: 12px;
                                        height: 7px;
                                        margin-left: 5px;
                                    }
                                }

                                ul.sub-menu {
                                    position: absolute;
                                    padding: 0.5rem 0;
                                    display: none;

                                    li {
                                        a {
                                            padding: 0.5em 1em;
                                            line-height: 1.5em;

                                        }
                                    }
                                }

                                &:hover {
                                    ul.sub-menu {
                                        display: block;
                                        background: rgba(255, 255, 255, .8);

                                        li {
                                            a {
                                                display: block;
                                            }
                                        }
                                    }
                                }
                            }

                            a {
                                padding: 1.2rem;
                                font-size: 1.2rem;
                                font-weight: bold;
                                line-height: 1;
                                letter-spacing: .1rem;
                                color: #111111;
                                transition: all .3s;

                                &:hover {
                                    text-decoration: none;
                                    opacity: .7;
                                }
                            }

                            &.button {
                                padding-left: 1rem;

                                a {
                                    color:#FFFFFF;
                                    background-color: #FF0000;
                                    font-weight: bold;
                                    padding-left: 1em;
                                    padding-right: 1em;

                                    &:hover {
                                        text-decoration: none;
                                        opacity: 0.8;
                                    }

                                    &:before {
                                        content: "\f003";
                                        font-family: 'FontAwesome';
                                        margin-right:1em;
                                        font-size: 1rem;
                                        margin-right: 0.3rem;
                                        vertical-align: middle;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 599px) {
header {
    z-index: 1;

    .inner {
        padding: 1.5rem;
        min-width: 100%;
        .logo {
            margin: 0;
            margin-right: auto;

            a {
                display: block;

                img {
                    margin-right: 0;
                    height: 3rem;
                }
            }
        }

        .menu-wrapper {

            nav.gnav {
                display: block;
                position: fixed !important;
                top: 0;
                right: -310px;
                bottom: 0;
                width: 310px;
                padding: 6.5rem 1rem;
                background-color: rgba(255, 255, 255, 0.7);
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                transition: all .5s;
                z-index: 3;
                opacity: 0;
                margin-right: 0;

                .menu-container {
                    width: 100%;

                    .gmenu {
                        display: flex;
                        flex-wrap: nowrap;
                        flex-direction: column;
                        align-items: flex-end;
                        justify-content: center;

                        .menu-item {
                            position: static;
                            width: 100%;
                            height: auto;

                            &.menu-item-has-children  {
                                position: static;
                                ul.sub-menu {
                                    display: none; /* デフォルトでは非表示 */
                                    position: relative;
                                    padding: 0;
                                    padding-left: 1rem;
                                    >li {
                                        a {
                                            position: relative;
                                            &::after {
                                                content: '→';
                                                position: absolute;
                                                top: 50%;
                                                left: 0;
                                                transform: translateY(-50%);
                                                font-size: .9rem;
                                            }
                                        }
                                    }
                                }

                                .menu-open .sub-menu {
                                    display: block; /* メニューが開いているときに表示 */

                                }
                            }

                            &:nth-child(n+1) {
                                margin-left: auto;
                                border-top: 1px solid white;
                            }

                            &:last-child {
                                margin-left: auto;
                                border-bottom: 1px solid white;
                            }

                            a {
                                position: relative;
                                display: block;
                                padding: 2rem 1rem;
                                font-size: 1.5rem;
                                font-weight: bold;
                                color: #444444;

                                >span {
                                    display: block;
                                    font-weight: normal;
                                    color:  #444444;
                                }

                            }

                            &.button {
                                padding-top: 2em;
                                padding-left: 0;
                                border-bottom: none;
                                a {
                                    padding: 1.2rem 0;
                                    font-size: 1.1rem;
                                    text-align: center;

                                    &:before {
                                        content: "\f003";
                                        font-family: 'FontAwesome';
                                        font-size: 1.5rem;
                                        margin-right: 0.5rem;
                                    }
                                }

                            }

                        }

                    }
                }
            }

            .toggle-btn {
                display: block;
                position: fixed;
                top: 0;
                right: 0;
                width: 70px;
                height: 70px;
                transition: all .5s;
                cursor: pointer;
                z-index: 3;
                background-color: black;

                span {
                    display: block;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 35px;
                    height: 2px;
                    background-color: white;
                    transition: all .5s;

                    &:nth-child(1) {
                        top: 15px;
                    }

                    &:nth-child(2) {
                        top: 25px;
                    }

                    &:nth-child(3) {
                        bottom: 33px;
                    }


                    &.scrolled {
                        background-color: black;
                    }
                }

                >p {
                    position: absolute;
                    bottom: 7px;
                    left: 50%;
                    transform: translateX(-50%);
                    color: white;
                }

            }

            &.menu-open {
                .gnav {
                    right: 0;
                    opacity: 1;
                }

                .toggle-btn {
                    top: 0;
                    margin-top: 0;

                    span {
                        left: 25%;
                        background-color: #fff;

                        &:nth-child(1) {
                            -webkit-transform: translateY(17px) rotate(-315deg);
                            transform: translateY(9px) rotate(-315deg);
                        }

                        &:nth-child(2) {
                            opacity: 0;
                        }

                        &:nth-child(3) {
                            -webkit-transform: translateY(-17px) rotate(315deg);
                            transform: translateY(-11px) rotate(315deg);
                        }

                        &.scroll {
                            background-color: white;
                        }
                    }

                    p {
                        color: #fff;
                    }

                }

                #mask {
                    display: block;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: #000;
                    opacity: .3;
                    z-index: 2;
                    cursor: pointer;
                }
            }

            #mask {
                display: none;
                transition: all .3s;
            }
        }

    }

}
}
section.bottom_header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.3);
    z-index: 1;
    background: url(../images/common/img_03@2x.jpg);
    background-size: cover;
}

header .top.wrap h1 img {
    max-width: 200px;
    width: 200px;
    height: auto;
    padding-left: 0.5em;
}

.pages header .top.wrap p a img {
    width: 200px;
}

header .top.wrap {
    width: 100%;
}

header .top {
    color: #fff;
    font-size: 1.3rem;
    padding: 10px 0;
}


header .top.wrap {
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;
}

header .top ul li,
header .top ul li img {
    display: inline-block;
    vertical-align: middle;
}

header .top ul {
    width: 100%;
    text-align: right;
    padding: 0 1.0em;
    font-family: 'Noto Sans JP', sans-serif;
    position: relative;
}

header .top ul li {
    margin: 0 0px 0 0;
    padding: 0 0px 0 0;
}

header .top ul li::after {
    content: "";
    padding-left: 10px;
    padding-right: 5px;
    color: #444444;
}

header .top ul li:last-child::after {
    content: "";
    padding-left: 0px;
    padding-right: 0px;
    color: #444444;
}

header .top ul li:nth-last-child(2)::after {
    content: "";
    padding-left: 10px;
    padding-right: 5px;
}

header .top ul li a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: #444444;
}

header .top ul li.contact a {
    background: #eeeeee;
    border-radius: 4px;
    display: inline-block;
    padding: 2px 8px;
}

header .top ul li a:hover {
    padding-bottom: 0.3em;
    border-bottom: 3px solid #000;
    text-decoration: none;
    filter: alpha(opacity=70);
    /* 以下、ゆっくりフェードインさせる設定 */
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

header .top ul li.current-menu-item a {
    padding-bottom: 0.3em;
    border-bottom: 3px solid #000;
    text-decoration: none;
}

header .top ul li.contact a:hover {
    text-decoration: none;
    background: #503729;
}

header .top ul li:last-child {
    margin: 0;
}

header .top ul li.contact,
header .top ul li.phonebtn {
    padding: 0;
}

header .top ul li.contact:after,
header .top ul li.phonebtn:after {
    display: none;
}

/* 資料請求ボタン */


header .top.wrap ul li.btn a {
    position: relative;
    color: white;
    margin-left: 0.5em;
    padding: 0.2em 0.5em 0.2em 1.0em;
    text-decoration: none;
    display: block;
    text-align: center;
    border-radius: 3px;
    /* CSS3草案 */
    -webkit-border-radius: 3px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 3px;
    /* Firefox用 */
}

header .top.wrap ul li.btn.b01 a {
    background: #E50012;
}

header .top.wrap ul li.btn.b01 a::before {
    position: absolute;
    top: -5px;
    left: 5px;
    padding-left: 0.5em;
    content: '　';
    display: inline-block;
    width: 50px;
    height: 40px;
    background-image: url(../images/common/mark04.png);
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
}

header .top.wrap ul li.btn.b01 a::after {
    font-weight: 600;
    content: " \f0da";
    padding-left: 2px;
    padding-right: 5px;
    font-family: "Font Awesome 5 Pro";
}

header .top.wrap ul li.btn::after {
    content: "";
    padding-left: 0px;
    padding-right: 0px;
    color: #444444;
}

header .top.wrap ul li.btn a:hover {
    background: #eeae19;
    filter: alpha(opacity=70);
    /* 以下、ゆっくりフェードインさせる設定 */
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

header .top.wrap ul li.btn.b01 img {
    width: 70px;
    height: auto;
}



section .middle {
    height: auto;
    position: relative;
    padding: 0px 0;
    background: transparent;
    border-bottom: 0px solid #ffffff;
}

.flex {
    display: -webkit-box;
    /*レガシーCC*/
    display: -webkit-flex;
    /*Android2.3*/
    display: -ms-flexbox;
    /*IE9~用*/
    display: flex;
    /*最新のブラウザ*/
}

section .middle h2 {
    text-align: center;
}

section .middle .h_right {
    width: 100%;
}

header .h_bottan {
    display: flex;
    justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}


header .h_bottan .item {}

header .h_bottan .item2 a {}

header .h_bottan .item2 a:hover {}

header .h_bottan .item2 a:before {}

header .h_bottan .item3 a {}

header .h_bottan .item3 a:hover {}

header .h_bottan .item3 a:before {}

section .middle form {
    float: right;
    margin-top: 5px;
    border: 1px solid #B3B3B3;
    max-width: 390px;
    position: relative;
    width: 100%;
}

section .middle form input[type="text"] {
    font-size: 1.3rem;
    vertical-align: middle;
    border: none;
    width: 100%;
    padding: 15px 36px 15px 10px;
    box-sizing: border-box;
    display: block;
}

section .middle form input[type="submit"] {
    font-size: 0;
    background: url(../images/common/search.gif) no-repeat;
    background-size: 26px;
    width: 26px;
    height: 26px;
    border: none;
    vertical-align: middle;
    position: absolute;
    right: 10px;
    top: 10px;
}

.mainvi{
    /* margin-top: calc(70px + 2rem); */
}
.mainvisual .bottom {
    border-top: #dd0000 0px solid;
    border-bottom: #dd0000 0px solid;
}


.sp_nav {
    display: none;
}

/* ハンバーガーメニュー */
.menu-trigger,
.menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}

.menu-trigger {
    position: relative;
    width: 18px;
    height: 19px;
    padding: 0 4px;
    box-sizing: content-box;
}

.menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #503729;
    border-radius: 4px;
}

.menu-trigger span:nth-of-type(1) {
    top: 0;
}

.menu-trigger span:nth-of-type(2) {
    top: 8px;
}

.menu-trigger span:nth-of-type(3) {
    bottom: 0;
}

.menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(9px) rotate(-45deg);
    transform: translateY(9px) rotate(-45deg);
}

.menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
}

.menu-trigger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-7px) rotate(45deg);
    transform: translateY(-7px) rotate(45deg);
}



.mainvisual .bottom nav ul {
    justify-content: space-around;
}

.mainvisual .bottom nav ul li {
    padding: 0px 0px 0px;
}

.mainvisual .bottom nav ul li ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    display: none;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    padding: 0em;
}

.mainvisual .bottom nav ul li.menu-item-has-children {
    color: #232323;
    display: inline-block;
    font-size: 1.5rem;
}

.mainvisual .bottom nav ul li span {
    display: block;
    font-size: 1.1rem;
}

.mainvisual .bottom nav ul li {
    position: static;
}



/*
------------------------------------------------------------------------------------------------
SP用ハンバーガーメニュー
------------------------------------------------------------------------------------------------
*/

/* ハンバーガーメニュー中身 */
[off-canvas] {
    background: #503729;
    z-index: 5;
}

[off-canvas] nav {
    margin: 0 0 30px;
}

[off-canvas] nav ul {
    position: relative;
    z-index: 100000000;
}

[off-canvas] li,
.border_bottom p {
    border-bottom: 1px solid #fff;
}

[off-canvas] li ul li:last-child {
    border-bottom: none;
}

[off-canvas] a {
    padding: 10px 20px;
}

[off-canvas] p {
    padding: 10px 20px;
}

[off-canvas] a,
/* custom */
[off-canvas] li.page_item_has_children {
    color: #fff;
    display: block;
}

[off-canvas] li ul li a {
    padding: 10px 20px 10px 45px;
}

[off-canvas] li ul {
    display: none;
}

[off-canvas] li {
    position: relative;
}

[off-canvas] li.top img {
    margin: 0 15px 0 5px;
}

[off-canvas] li.menu-item-has-children>a:before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border: 6px solid transparent;
    border-left: 8px solid #fff;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 27px;
    right: 20px;
    transition: .3s;

}

[off-canvas] li ul li {
    padding: 0;
}

[off-canvas] li ul li:before,
[off-canvas] li.no_acordion:before {
    display: none;

}

[off-canvas] li.active:before {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 17px;
    transition: .3s;
    width: 8px;
}

[off-canvas] .sub {
    padding: 0 20px;
    margin-top: 20px;
}

[off-canvas] .sub li {
    border: none;
    margin-bottom: 5px;
}

[off-canvas] .sub li a {
    font-size: 1.2rem;
    padding: 0 0 0 17px;
    position: relative;
}

[off-canvas] .sub li:before {
    display: none;
}

[off-canvas] .sub li a:before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

[off-canvas] form.search+.btn {
    padding: 0 20px;
}

[off-canvas] form.search+.btn a {
    display: block;
    background: #fff;
    color: #503729;
    border-radius: 6px;
    text-align: center;
    position: relative;
}

[off-canvas] form.search+.btn a:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 20px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #503729;
    border-right: 1px solid #503729;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.g_menu li a,
.g_menu li.menu-item-has-children {
    display: inline;
    align-items: center;
}

.g_menu li.menu-item-has-children {
    position:relative;
}

.g_menu li.menu-item-has-children ul.sub-menu {
    height: 50px;
    
    position: absolute;
    align-items: center;
    text-align: center;
    justify-content: center;
	left:-50px;
	width:150px;
}

@media screen and (max-width:959px) {
    .mainvisual .bottom nav ul {
        text-align: center;
        position: relative;
    }

    .mainvisual .bottom nav ul li {
        display: inline-block;
        width: auto;
        float: none;
    }

    .mainvisual .bottom nav ul li a {}

    section .middle form {
        display: none;
    }

    .pc_nav {
        display: none;
    }

    .sp_nav {
        display: block;
    }

    section .middle {
        padding: 10px 0;
    }

    .bottom .sp_nav {
        background: #fff;
        text-align: center;
        padding: 7px 10px;
    }

    .bottom .sp_nav li {
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        margin: 0 13px 0 0;
    }

    .bottom .sp_nav li:last-child {
        margin: 0;
    }

    .bottom .sp_nav li span {
        display: block;
        font-size: 1.1rem;
    }
}



/*
------------------------------------------------------------------------------------------------
SP用モーダルウィンドウ
------------------------------------------------------------------------------------------------
*/

.menu-btn {
    position: absolute;
    top: 2px;
    right: 5px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    z-index: 1;
    font-family: 'Vollkorn', serif;
    z-index: 9999;
}

.menu-btn span {
    color: #fff;
}

.menu-btn span:after {
    content: attr(data-txt-menu);
}

/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu-btn span:after {
    content: attr(data-txt-close);
}


.menu {
    position: fixed;
    display: table;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, .8);
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: hidden;
    opacity: 0;
    z-index: 9998;
    font-family: 'Vollkorn', serif;
}

.menu ul {
    display: table-cell;
    vertical-align: top;
    margin: 0;
    padding: 6em 0 0 0;
}

.menu li {
    width: 100%;
    line-height: 1.4;
    margin: 0 auto 40px;
    padding: 0;
    text-align: center;
    list-style: none;
}

.menu li a {
    font-size: 2.0rem;
    color: #1b2850;
    -webkit-transition: color 0.5s;
    transition: color 0.5s;
}

.menu li a div {
    display: inline;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #1b2850;
    padding-bottom: 4px;
}

.menu li a div:first-child {
    padding-bottom: 2px;
}

.menu li a span {
    padding-top: 5px;
    display: block;
    font-size: 1.7rem;
    text-decoration: none;
}

.menu li a:hover {
    color: #999;
    -webkit-transition: color 0.5s;
    transition: color 0.5s;
}

/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu {
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: visible;
    opacity: 1;
}



/*
------------------------------------------------------------------------------------------------
ページTOPに戻る・固定コンテンツ
------------------------------------------------------------------------------------------------
*/
#btn_siryo {
    width: 150px;
    height: 150px;
    position: fixed;
    bottom: 50px;
    right: 0px;
    z-index: 100;
    cursor: pointer;
    background: transparent;
    /* mix-blend-mode: multiply;背景色を乗算に設定 */
    border-radius: 100%;
    /* CSS3草案 */
    -webkit-border-radius: 100%;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 100%;
    /* Firefox用 */
}

#top_back {
    width: 60px;
    height: auto;
    padding: 0.5rem;
    font-size: 1.3rem;
    position: fixed;
    bottom: 60px;
    right: 10px;
    z-index: 100;
    text-align: center;
    cursor: pointer;
    background: #3c3c3ce0;
    color: #fff;
    border-radius: 45px;
}

#top_back:hover {
    opacity: 0.8;
}

#top_back:after {
    /*
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-top: 3px solid #333;
    border-right: 3px solid #333;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 6px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
*/
}


/*
------------------------------------------------------------------------------------------------
固定ページ内 お問い合せボタン
------------------------------------------------------------------------------------------------
*/

.inquery_bnr {
    display: block;
    text-align: center;
    margin: 3rem 0;
}

.inquery_bnr_a {
    font-weight: bold;
    background: red;
    padding: 1rem 8rem;
    border-radius: 1rem;
    color: white;
}

@media screen and (max-width:599px) {
    .inquery_bnr {
        display: none;
    }
}


/*
------------------------------------------------------------------------------------------------
スマホ用 お問い合せボタン
------------------------------------------------------------------------------------------------
*/

#sp_inquery_btn {
    display: none;
}

@media screen and (max-width:599px) {
    #sp_inquery_btn {
        width: 100%;
        font-size: 1.3rem;
        position: fixed;
        bottom: 0px;
        z-index: 100;
        display: flex;
        /* display: none; */
        justify-content: center;
        background: #3c3c3ce0;
        padding: 10px;
    }

    #sp_inquery_btn_inner {
        width: 50%;
        height: auto;
        padding: 0.4em 0.5em 0.3em;
        text-align: center;
        cursor: pointer;
        background: #fb2e2e;
        border-radius: 15px;
    }

    #sp_inquery_btn_inner a {
        color: #fff;
    }
}

/*
------------------------------------------------------------------------------------------------
フッター（デフォルト）
------------------------------------------------------------------------------------------------
*/

footer {
    background: #f2f2f2;
}


footer .middle {}

small {
    display: block;
    font-size: 1.2rem;
    color: #000000;
    text-align: center;
    padding: 0px 20px 1.0em;
    background: transparent;
}

footer .sitemap {
    width: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

footer .footernav {
    display: inline-block;
    width: 30%;
    vertical-align: top;
}

footer .footernav ul li {
    font-size: 1.2rem;
}

footer .footernav ul li a {
    line-height: 2.0;
    color: #fff;
}

footer .contents {
    width: 100%;
    -webkit-flex-basis: 320px;
    -ms-flex-preferred-size: 320px;
    flex-basis: 320px;
    margin: 0 0 0 auto;
}

footer .contents p {
    padding: 7px 0px 5px;
    color: #ffffff;
    font-size: 1.2rem;
}





/* フェードインエフェクト（無効）
------------------------------ */

/*
@keyframes zoomUp {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.15);
    }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
    animation: zoomUp 10s linear 0s 1 normal both;  
    height: 100%;
}
*/


/* ページではズームさせない。
------------------------------ */

.swiper-slide-active .slide-img.page-header,
.swiper-slide-duplicate-active .slide-img.page-header,
.swiper-slide-prev .slide-img.page-header {
    animation: none;
}

//imgタグだと下に隙間ができるのでblockに。
.slide-img img {
    display: block;
}


/* Slick スライダー（左右3面）用
------------------------------ */


.slick-slider {
    display: none;
}

.slick-slider.slick-initialized {
    display: block;
    /*slick-initializedが付与されたら表示*/
}


.mainslick .slider {
    width: 100%;
    margin: 0 auto 0px;
}

.mainslick .slick-slide img {
    width: 100%;
    height: auto;
}

.mainslick .mainpattern {
    width: 100%;
}

.mainslick .mainpattern .slick-slide {
    margin: 0px;
}

.mainslick .slick-dots {
    bottom: 5px !important;
}

.mainslick .slick-dots li button {
    /* ドットのサイズ */
    width: 25px !important;
    height: 25px !important;
}

.mainpattern .slick-slide:not(.slick-center) {
    /* ドットのサイズ */
    -webkit-filter: opacity(60%);
    -moz-filter: opacity(60%);
    -o-filter: opacity(60%);
    -ms-filter: opacity(60%);
    filter: opacity(60%);
    transition: 0.2s linear;
}

.mainslick .slick-dotted.slick-slider {
    margin-bottom: 0px !important;
}




/* Slick スライダー（サムネイル連動）用
------------------------------ */

.main_thumb ul {
    margin: 0;
    padding: 0;
}

.main_thumb {
    width: 100%;
    margin: 10px auto;
    position: relative;

    a {
        color: #666;
    }
}

.main_thumb .slide {
    display: none;

    li {
        list-style: none;
    }

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

.main_thumb .slick-dots {
    margin-top: 5px;
    margin-left: -5px;
    margin-right: -5px;
    display: flex;
    justify-content: center;

    li {
        list-style: none;
        display: inline-block;
        max-width: 112px;
        max-hegiht: 56px;
        margin: 5px;

        img {
            opacity: 0.5;
            width: 100%;
            height: auto;
        }

        &.slick-active {
            img {
                opacity: 1;
            }
        }
    }
}

.main_thumb .slick-prev {
    position: absolute;
    z-index: 99;
    top: 120px;
    left: -50px;
}

.main_thumb .slick-next {
    position: absolute;
    z-index: 99;
    top: 120px;
    right: -50px;
}

.main_thumb .slick-dots {
    justify-content: center;
    width: 1000px !important;
    margin: 0 auto !important;
}

.main_thumb .slick-dots {
    position: static;
    bottom: 0px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.main_thumb .slick-dots li {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: calc(100%/5);
    height: auto;
    margin: 0 0px;
    padding: 10px 5px;
    cursor: pointer;
}


/* カルーセルスライダー用
------------------------------ */

.carousel {
    margin-top: 0.5em;
}

.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: -30px;
    left: 0;
    width: 100%;
}


.carousel .swiper-slide img {}

/* 〜599px：SP横
------------------------------ */
@media screen and (max-width:599px) {

    .swiper .swiper-slide {
        height: auto;
    }

    .swiper-slide {
        height: auto;
    }

    .swiper .swiper-slide img {
        height: 250px;
    }

    .main_thumb .slick-dots {
        width: 100% !important;
    }

    .main_thumb .slick-dots li {
        width: calc(100%/5);
        padding: 5px 3px;
    }

}

/* 480px〜599px：SP横
------------------------------ */
@media screen and (min-width:480px) and (max-width:599px) {}

/* 600px〜959px：タブレット
------------------------------ */
@media screen and (min-width:600px) and (max-width:959px) {}

/* 600px〜：タブレット以上
------------------------------ */
@media screen and (min-width:600px) {}

/* 〜959px：タブレット以下
------------------------------ */
@media screen and (max-width:959px) {}

/* 960px〜：小型PC以上
------------------------------ */
@media screen and (min-width:960px) {}

/* 960px〜1279px：小型PC
------------------------------ */
@media screen and (min-width:960px) and (max-width:1279px) {}

/* 1280px〜：大型PC
------------------------------ */
@media screen and (min-width:1280px) {}


/*------------------------------------*\
    ヘッダーアコーディオンメニュー
\*------------------------------------*/

.switch .menuWrapper {
    position: absolute;
    top: 0.5em;
    right: 1.0em;
}

.switch .inner {
    position: absolute;
    z-index: 99;
    right: 5em;
    top: 5.5em;
}

.pagemenu .menuWrapper {
    position: absolute;
    right: 2em;
}

.pagemenu .inner {
    position: absolute;
    right: 2em;
    z-index: 99;
}

.switch .inner li a {
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    display: block;
    background: #ffffff;
    color: #1b2850;
    padding: 5px 10px 3px;
    margin-bottom: 5px;
}

.switch .inner li a:hover {
    background: #1b2850;
    color: #ffffff;
    filter: alpha(opacity=70);
    /* 以下、ゆっくりフェードインさせる設定 */
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.switch .inner li a span {
    font-size: 1.2rem;
    padding: 3px 10px 3px;
}


/* ヘッダーアコーディオン */

.child {
    display: none;
}


/* PCハンバーガーメニュー */

.menuWrapper {
    position: relative;
    z-index: 0;
    border: 0px solid #ccc;
    width: 50px;
    height: 50px;
}

#menuButton {
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

#menuButton span,
#menuButton::before,
#menuButton::after {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 36px;
    height: 4px;
    margin: auto;
    background: #1b2850;
}

#menuButton span {
    overflow: hidden;
    z-index: 1;
    color: #1b2850;
}

#menuButton::before {
    z-index: 2;
    transform: translate(0, -12px);
    content: "";
}

#menuButton::after {
    z-index: 2;
    transform: translate(0, 12px);
    content: "";
}

/* ハンバーガーメニュー 閉じる */

#menuButton span {
    opacity: 1;
    transition: opacity 150ms 50ms;
}

#menuButton::before,
#menuButton::after {
    transition: transform 200ms;
}

.active #menuButton span {
    opacity: 0;
    transition: opacity 150ms;
}

.active #menuButton::before {
    transform: rotate(45deg);
}

.active #menuButton::after {
    transform: rotate(-45deg);
}




/*------------------------------------*\
コンテンツ_アコーディオンメニュー
\*------------------------------------*/


.ac_menu {
    margin: 2.5em auto;
}

.ac_menu__item {
    background: #ffffff;
    color: #fff;
    cursor: pointer;
    display: block;
    margin-bottom: 0px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    -webkit-border-top-left-radius: 30px;
    -webkit-border-top-right-radius: 30px;
    -moz-border-radius-topleft: 30px;
    -moz-border-radius-topright: 30px;
    border-bottom-left-radius: 31px;
    border-bottom-right-radius: 31px;
    -webkit-border-bottom-left-radius: 31px;
    -webkit-border-bottom-right-radius: 31px;
    -moz-border-radius-bottomleft: 31px;
    -moz-border-radius-bottomright: 31px;
}

.ac_menu__item__link {
    color: #dd0000;
    display: block;
    line-height: 60px;
    padding: 0 1rem;
    position: relative;
}

.ac_menu__item__link h3 {
    text-align: left;
    font-size: 1.8rem;
    padding: 0.3em 1.0em 0.5em;
}

.ac_menu__item__link h3:before {
    content: '';
    /*何も入れない*/
    display: inline-block;
    /*忘れずに*/
    margin-right: 0.8em;
    width: 50px;
    /*画像の幅*/
    height: 50px;
    /*画像の高さ*/
    background-image: url(../images/svg/icon_q.svg);
    background-size: contain;
    vertical-align: middle;
}

.ac_menu__item__link:after {
    background: transparent;
    content: '\f067';
    display: block;
    font-family: "Font Awesome 5 Pro";
    line-height: 75px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 60px;
    border-top-right-radius: 30px;
    -webkit-border-top-right-radius: 30px;
    -moz-border-radius-topright: 30px;

}

.ac_menu__item__link.on:after {
    content: '\f068';
}

.ac_submenu {
    background: #f2f2f2;
    display: none;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    -webkit-border-bottom-left-radius: 28px;
    -webkit-border-bottom-right-radius: 28px;
    -moz-border-radius-bottomleft: 28px;
    -moz-border-radius-bottomright: 28px;
}

.ac_submenu__item {
    font-size: 1.4rem;
    text-align: left;
    color: #222;
    padding: 2.0em;
}

.ac_submenu__item a {}

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

.ac_menu img.fleft {
    padding-right: 1.0em;
    width: 100px;
    height: auto;
}




/* 
------------------------------------------------------------------------------------------------
動画対応静止画ヘッダー
------------------------------------------------------------------------------------------------
*/

.header_wrap {}

.front {
    height: 100%;
    overflow: hidden;
    position: relative;
    background: url(../images/common/ico_dot_01.png);
}

.front.mainVisual img.mvi {
    object-position: top;
    /* ポジション設定 */
    object-fit: cover;
    /* モダンブラウザ用 画像トリミング */
    font-family: 'object-fit: cover;';
    /* IE EDGE 用 */
    position: relative;
    z-index: -999;
    width: 100%;
    height: 100%;
}

.front video {
    position: relative;
    margin-top: 0px;
    z-index: -100;
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    object-position: top;
    /* ポジション設定 */
    object-fit: cover;
    /* モダンブラウザ用 画像トリミング */
    font-family: 'object-fit: cover;'
        /* IE EDGE 用 */
}

.front video source {
    display: block;
    width: 100vw;
    width: auto;
}



.front .parts_circle {
    position: absolute;
    top: -1px;
    width: 100vw;
    height: auto;
}

.front::before {}


.pageheader {
    height: 45vh;
    position: relative;
    overflow: hidden;
}

.pageheader img {
    object-position: top;
    /* ポジション設定 */
    object-fit: cover;
    /* モダンブラウザ用 画像トリミング */
    font-family: 'object-fit: cover;';
    /* IE EDGE 用 */
    position: relative;
    z-index: -999;
    width: 100%;
    height: 100%;
}

.pageheader video {
    position: relative;
    margin-top: 0px;
    z-index: -100;
    display: block;
    width: auto;
}

.pageheader video source {
    display: block;
    width: 100vw;
    width: auto;
}

.pageheader .parts_circle {
    position: absolute;
    top: -1px;
    width: 100vw;
    height: auto;
}

.pageheader::before {}



.headline {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.headline h2 span {
    display: block;
    margin-top: 0.5em;
    line-height: 1.6;
    font-size: 3.0rem;
    color: #fff;
    font-family: 'Noto Serif JP', serif;
}

.headline h1 {
    margin: 0;
    font-size: 52px;
    color: #fff;
    text-shadow: 0px 0px 7px #222222;
}

.headline h2 {
    margin: 0;
    font-size: 52px;
    color: #fff;
    text-shadow: 0px 0px 7px #222222;
}

.headline p {
    color: #fff;
    line-height: 1.4;
    font-weight: 100;
    text-shadow: 0px 0px 3px #000000;
}

.headline p span {
    font-size: 4.0rem;
    font-weight: 600;
    font-family: 'Noto Serif JP', sans-serif;
}

.headline img {
    width: 100px;
    height: auto;
    filter: drop-shadow(0px 0px 5px #484848);
}

.headline .illust_02 img {
    width: 350px;
    height: auto;
    filter: drop-shadow(0px 0px 5px #484848);
}

article.topinfo {
    padding-top: 3.0em;
    background: #EEB9C1;
}

.headline a {
    font-size: 1.3rem;
    background: #ef276d;
    color: white;
    padding: 0.5em 1.0em;
    text-decoration: none;
    text-shadow: 0px 0px 0px white;
    border-radius: 3px;
    /* CSS3草案 */
    -webkit-border-radius: 3px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 3px;
    /* Firefox用 */
}

.headline a:hover {
    filter: alpha(opacity=70);
    /* 以下、ゆっくりフェードインさせる設定 */
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    background: white;
    color: #ef276d;
}






/* 下層ページ用設定 */
#page .contents {
    padding-top: 0;
    padding-bottom: 0;
}

.pages .mainvisual {
    height: 70vh;
}

.pages.single .mainvisual {
    height: 40vh;
}

.pages .mainvisual .mainimg {
    position: relative;
    height: 50vh;
}

.pages .mainvisual .mainimg .copy_top {
    text-align: center;
    position: absolute;
    z-index: 1;
    bottom: -20px;
    left: 0%;
    right: 0%;
    margin: auto;
    height: auto;
    width: 100%;
}

.pages .mainvisual .mainimg .copy_top img {
    width: 350px;
}

.pages .mainvisual .bottom {
    bottom: 0px;
    left: 0%;
}

.pages .mainvisual .bottom {
    align-items: center;
}

.pages .mainvisual .wrap {
    width: 1000px;
    margin: 0 auto;
    align-items: center;
}

.pages .mainvisual .wrap.class {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}

.pages .mainvisual .bottom .wrap .copy_top img.illust_02 {
    width: 300px;
}

.pages .mainvisual .bottom .wrap .copy_top {
    margin-top: 50px;
    letter-spacing: 0.05em;
    width: 100%;
    color: #ffffff;
    font-weight: 500;
    text-align: center;
}

.pages .mainvisual .bottom .wrap a.mark01 {
    position: absolute;
    bottom: 70%;
    right: 5%;
}

.pages .mainvisual h1 {
    text-align: center;
    margin: 0 auto;
}

.pages .mainvisual h2.title_about span {
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 4.0rem;
    letter-spacing: 0.20em;
    line-height: 1.5;
}


.pages .mainvisual h2.title_about.post span {
    font-size: 3.0rem;
}

.pages .mainvisual h2.title_about span.date {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.1rem;
}

.pages .mainvisual img.logo_about {
    width: 200px;
    height: auto;
}



article.topinfo {
    padding-top: 3.0em;
    background: #EEB9C1;
}

.pagettl {
    /* margin-top: 70px; */
    .ttl-text{
        color: white;
        font-weight: bold;
        font-size: 2rem;
        text-shadow: 2px 2px gray;
        background-color: #666666;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 400px;
        h1{
            font-family: unset;
        }
    }
}

.pagettl ul {
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;
    padding: 3em 0;
}

.pagettl li {
    align-items: center;
}

.pagettl .title_arrow {
    margin-bottom: 0;
    min-width: 400px;
}

.pagettl h1 {
    font-family: 'Noto Serif JP';
    display: inline-block;
    line-height: 1.4;
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.pagettl h1 span {
    font-family: 'Noto Sans Japanese';
    font-weight: 300;
    display: block;
    text-align: center;
    font-size: 1.2rem;
    padding-bottom: 1.0em;
}

.pagettl .caption {
    font-size: 2rem;
    font-weight: bold;
    line-height: 2.5rem;
}

.pagettl .caption span.date {
    font-size: 1.3rem;
    padding-right: 1.0em;
    display: block;
}

.pagettl .mainvisu {
    position: relative;
}

.pagettl .mainvisu img {
    width: 100%;
    max-height: 580px;
    object-fit: cover;
    object-position: top;
}

.pagettl .mainvisu p {
    position: absolute;
    color: white;
    top: 5%;
    font-size: 24px;
    font-weight: bold;
    width: 50%;
    margin: 0 0 0 5%;
    background: black;
    text-align: left;
    max-width: 800px;
    padding: 0 10px 5px 10px;
}

#page .catch {
    display: block;
    text-align: center;
    margin-top: 12vh;
}

#page .contents h2.line {
    font-size: 2.8rem;
    border-bottom: 1px solid #707070;
    padding-bottom: 0.5em;
    margin-bottom: 1.5em;
}

#page .detailBOX02 {
    flex-direction: row-reverse;
}

#page .detailBOX01 .txtBOX,
#page .detailBOX02 .txtBOX {
    width: 45%;
    box-sizing: border-box;
}

#page .detailBOX01 .txtBOX h2,
#page .detailBOX02 .txtBOX h2,
#page .detailBOX01 .txtBOX h3,
#page .detailBOX02 .txtBOX h3 {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 1.2em;
}

#page .detailBOX01 .txtBOX {
    padding-right: 3%;
}

#page .detailBOX02 .txtBOX {
    padding-left: 3%;
}

#page .detailBOX01 .photoBOX,
#page .detailBOX02 .photoBOX {
    width: 55%;
}

#page .detailBOX01 .photoBOX img,
#page .detailBOX02 .photoBOX img {
    min-width: 100%;
    min-height: auto;
    object-fit: cover;
}

#page .photoBOX video {
    width: 100%;
}

#page .w1000 {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

#page .mb3 {
    margin-bottom: 3.0em;
}

#page .mt3 {
    margin-top: 3.0em;
}

#page .mb6 {
    margin-bottom: 6.0em;
}

#page .w1000 h2.stripe,
#page .contents h2.stripe {
    background-size: auto auto;
    /*background-color: rgba(255, 255, 255, 1);
    background-image: repeating-linear-gradient(135deg, transparent, transparent 14px, rgba(139, 212, 226, 1) 14px, rgba(139, 212, 226, 1) 20px);*/
    position: relative;
    border-bottom: 5px solid #d1594d4d;
    width: 60%;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    padding: 0.1em;
    margin-bottom: 1.5em;
    font-size: 2.5rem;
    color: #000;
}

#page .w1000 h2.stripe:after,
#page .contents h2.stripe:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 5px;
    background-color: #d1594d;
}

.pagelinkBOX {
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 1);
    /*background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(241, 241, 241, 1) 10px, rgba(241, 241, 241, 1) 14px );*/
    width: 80%;
    margin: 3.0em auto 3.0em auto;
    justify-content: center;
    position: relative;
    height: 10vh;
}

.pagelinkBOX .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 80%;
    padding: 20px;
    outline: 2px solid black;
    box-shadow: 6px 6px grey;

}

.pagelinkBOX .inner li a {
    font-size: 1.6rem;
    color: #000;
    font-weight: bold;
    align-items: flex-start;
}

.pagelinkBOX .inner li a:hover {
    color: #dd0000;
}

.pagelinkBOX .inner li {
    margin-bottom: 1em;
}

.pagelinkBOX .inner li:last-child {
    margin-bottom: 0;
}

.pagelinkBOX .inner li img {
    margin-right: 0.5em;
}



#contact_area {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto 6.0em auto;
}

#contact_area .w-70 {
    width: 70%;
    margin: 0 auto;
}

#contact_area .w-70 .inner {
    width: 48%;
    margin-right: 4%;
    align-content: center;
    border:1px solid black ;
    padding: 2rem;
}

#contact_area .w-70 .inner a {
    display: block;
}

#contact_area .w-70 .inner h3 {
    width: 100%;
    z-index: 200;
    text-align: center;
}

#contact_area .w-70 .inner .telBOX h3 {
    font-size: 1.4rem;
    top: 3em;
}

#contact_area .w-70 .inner .telBOX h3 .number {
    font-size: 2.2rem;
    display: block;
    font-weight: bold;
}

#contact_area .w-70 .inner .telBOX h3 .time {
    font-size: 1rem;
    display: block;
}

#contact_area .w-70 .inner .mailBOX h3 {
    font-size: 2.2rem;
    top: 2em;
}

#sns {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto 6.0em auto;
}

#sns .iconBOX {
    justify-content: center;
}

#sns .iconBOX li {
    margin-right: 1.5em;
}

#sns .iconBOX li:last-child {
    margin-right: 0;
}

#sns .fa-facebook-square,
#sns .fa-instagram,
#sns .fa-twitter,
#sns .fa-youtube {
    font-size: 5rem;
}

#sns .fa-facebook-square {
    color: #3C5A99;
}

#sns .fa-instagram {
    color: #141414;
}

⁄ #sns .fa-twitter {
    color: #1DA1F2;
}

#sns .fa-youtube {
    color: #DA1725;
}

/* 〜599px：SP
------------------------------ */
@media screen and (max-width:599px) {

    .headline {
        width: 80%;
    }

    header .top.wrap {
        align-items: center;
        justify-content: center;
    }

    .pagettl {
        margin-top: 90px;
    }

    .pagettl ul {
        width: 100%;
        display: block;
        padding: 0 2.0em 35px;
    }

    .pagettl ul li {
        width: 100%;
        box-sizing: border-box;
        display: block;
    }

    .pagettl .title_arrow {
        min-width: 100%;
        box-sizing: border-box;
        margin-bottom: 2.0em;
    }

    .pagettl h1 {
        font-size: 2.5rem;
    }

    .pagettl .mainvisu p {
        font-size: 1rem;
    }

    .pagettl .caption {
        font-size: 1.4rem;
        font-weight: 600;
        /* line-height: 3.0rem;*/
    }

    #page .catch {
        margin: 3.0em 0;
        text-align: left;
    }

    #page .contents h2.line {
        font-size: 2.2rem;
        margin-bottom: 1em;
    }

    #page .detailBOX01,
    #page .detailBOX02 {
        width: 100%;
        display: block;
    }

    #page .detailBOX01 .txtBOX h2,
    #page .detailBOX02 .txtBOX h2,
    #page .detailBOX01 .txtBOX h3,
    #page .detailBOX02 .txtBOX h3 {
        font-size: 2.0rem;
    }

    #page .detailBOX01 .txtBOX,
    #page .detailBOX02 .txtBOX,
    #page .detailBOX01 .photoBOX,
    #page .detailBOX02 .photoBOX {
        width: 100%;
    }

    #page .detailBOX01 .txtBOX,
    #page .detailBOX02 .txtBOX {
        padding: 0;
        margin-bottom: 1.5em;
    }

    #page .w1000 {
        width: 100%;
        padding: 35px 2.0em 35px;
    }

    #page .w1000 h2.stripe,
    #page .contents h2.stripe {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        padding: 0.1em;
        margin-bottom: 1.8rem;
        font-size: 1.8rem;
    }

    .pagelinkBOX {
        width: 100%;
        margin: 3.0em auto;
        justify-content: center;
        position: static;
        height: auto;

    }

    .pagelinkBOX .inner {
        width: 100%;
        position: static;
        top: inherit;
        left: inherit;
        padding: 2em 1em;
        -webkit-transform: translate(0);
        transform: translate(0);
    }

    .pagelinkBOX .inner li a {
        font-size: 1.6rem;
        color: #000;
        font-weight: bold;
        align-items: flex-start;
    }

    .pagelinkBOX .inner li a:hover {
        color: #dd0000;
    }

    .pagelinkBOX .inner li {
        margin-bottom: 1em;
        width: 100%;
    }

    .pagelinkBOX .inner li:last-child {
        margin-bottom: 0;
    }

    .pagelinkBOX .inner li img {
        margin-right: 0.5em;
        width: 2em;
    }

    #contact_area {
        width: 100%;
        margin: 0 auto 3.0em auto;
    }

    #contact_area .w-70 {
        display: block;
        width: auto;
        padding: 35px 2.0em 35px;
    }

    #contact_area .w-70 .inner {
        width: 100%;
        margin-right: 0;
    }
    
    #contact_area .w-70 div:last-child {
        margin-top: 2rem;
    }

    #sns {
        width: 100%;
        margin: 0 auto 6.0em auto;
    }

    #page .mb3 {
        margin-bottom: 1.5em;
    }

    #page .mt3 {
        margin-top: 1.5em;
    }

    #page .mb6 {
        margin-bottom: 3.0em;
    }
}

/*------------------------------------*\
コンセプトページ
\*------------------------------------*/
.concept .concept02,
.concept .concept03 {
    margin-bottom: 3.0em;
}

.concept .concept03 .catch-item {
    background: linear-gradient(90deg, #8BD4E2 0%, #8BD4E2 80%, #fff 80%, #fff 100%);
    padding: 3em 0;
    margin-bottom: 6.0em;
}

.concept .concept03 .messageBOX {
    align-items: center;
}

.concept .concept03 .messageBOX .txtBOX {
    font-size: 2.2rem;
    color: #fff;
    font-weight: bold;
    width: 45%;
    box-sizing: border-box;
    padding: 1em;
}

.concept .concept03 .messageBOX .photo {
    width: 55%;
}

.concept .concept03 .messageBOX .photo img {
    width: 100%;
}

.concept04 {
    margin-bottom: 6.0em;
}

.concept04 img {
    width: 100%;
    max-height: 580px;
    object-position: top;
    object-fit: cover;
}


/* 〜599px：SP横
------------------------------ */
@media screen and (max-width:599px) {

    .concept .concept03 .catch-item {
        background-image: none;
        background-color: #8BD4E2;
        padding: 1em;
        margin-bottom: 3.0em;
        ;
    }

    .concept .concept03 .messageBOX {
        display: block;
    }

    .concept .concept03 .messageBOX .txtBOX {
        font-size: 1.6rem;
        width: 100%;
        padding: 0;
        text-align: center;
        margin-bottom: 1em;
    }

    .concept .concept03 .messageBOX .photo {
        width: 100%;
    }

    .concept04 {
        margin-bottom: 3.0em;
    }
}

/*------------------------------------*\
超音波スピンドル
\*------------------------------------*/
#page #spindle01 {
    margin-top: 6em;
}

#page #spindle02 .contents .gear {
    position: relative;
    display: block;
}

#page .spindle02 .gear .contentBOX {
    width: 100%;
    box-sizing: border-box;
}

#page .spindle02 .gear img.bgimg {
    position: absolute;
    bottom: -4.0em;
    right: 0;
    z-index: -1;
}

#page .spindle02 ul {
    justify-content: space-between;
}

#page .spindle02 ul li {
    width: 32%;
    align-content: center;
}


#page .spindle02 ul li .panelBOX {
    display: block;
    position: relative;
}

#page .spindle02 ul li .panelBOX .paneltxt {
    width: 100%;
    position: absolute;
    text-align: center;
    box-sizing: border-box;
    padding: 1.5em;
    color: #000;
}

#page .spindle02 ul li .panelBOX .paneltxt h3 {
    font-size: 2.2rem;
    font-weight: bold;
}

#page .spindle02 p.txt {
    width: 50%;
    margin: 3.0em auto 0 auto;
    text-align: center;
}

#page .spindle04 .sampleimg {
    width: 60%;
    margin: 6.0em auto;
}

#page .spindle05 h2.line {
    margin-bottom: 3.0em;
}

#page .spindle05 .lineupBOX {
    margin-bottom: 6.0em;
}

#page .spindle05 .lineupBOX .imgBOX {
    width: 30%;
    margin-right: 10%;
    align-content: center;
    text-align: center;
}

#page .spindle05 .lineupBOX .imgBOX img {
    width: 80%;
}

#page .spindle05 .lineupBOX .txtBOX {
    width: 60%;
    margin-right: 0;
}

#page .spindle05 .lineupBOX .txtBOX h3 {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 1.2em;
}

#page .spindle05 .pdfbtn {
    display: block;
    width: 40%;
    padding: 0.5em;
    text-align: center;
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: 10px;
    margin: 0 auto;
    font-weight: bold;
}

#page .spindle05 .pdfbtn:hover {
    background-color: #fff;
    color: #000;
}

#page .spindle06 .animeBOX {
    width: 100%;
}

#page .spindle06 .animeBOX table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
}

#page .spindle06 .animeBOX table td {
    width: 50%;
    border-collapse: collapse;
    border: 1px solid #ccc;
    text-align: center;
}

#page .spindle06 .animeBOX table td.img {
    padding: 1em 6em;
}

#page .spindle06 .animeBOX h4 {
    color: #4E8FD4;
    font-size: 2.5rem;
    font-weight: bold;
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.5em 0;
}

#page .spindle06 .animeBOX li {
    width: 50%;
}

#page .spindle07 h3 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 1rem;
}

#page .spindle07 table.case {
    width: 100%;
    border: 1px solid #ccc;
    margin-top: 1rem;
}

#page .spindle07 table.case tr th,
#page .spindle07 table.case tr td {
    padding: 0.5em;
    border: 1px solid #ccc;
    border-bottom: none;
    border-right: none;
}

#page .spindle07 table.case tr th {
    font-weight: bold;
    background-color: #e6f6f6;
}

#page .spindle07 .case-result {
    display: flex;
    justify-content: space-around;
}

#page .spindle07 .case-result .case-img30,
#page .spindle07 .case-result .case-txt30 {
    margin: 10px;
    width: 30%;
}

#page .spindle07 .case-result .case-img45,
#page .spindle07 .case-result .case-txt45 {
    margin: 10px;
    width: 45%;
}

.case_open {
    cursor: pointer;
    font-weight: bold;
    padding: unset;
}

.case_overlay {
    display: none;
}

#case_pop-up01,
#case_pop-up02,
#case_pop-up03,
#case_pop-up04,
#case_pop-up05,
#case_pop-up06 {
    display: none;
}

#case_pop-up01:checked+.case_overlay,
#case_pop-up02:checked+.case_overlay,
#case_pop-up03:checked+.case_overlay,
#case_pop-up04:checked+.case_overlay,
#case_pop-up05:checked+.case_overlay,
#case_pop-up06:checked+.case_overlay {
    display: block;
    z-index: 9999;
    background-color: #00000070;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}

.case_window {
    width: 50%;
    /*max-width: 380px;
	height: 240px;*/
    border: black 1px solid;
    background-color: #ffffff;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.case_close {
    cursor: pointer;
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 2rem;
    padding: 5px;
    background-color: white;
}

/* 〜599px：SP
------------------------------ */
@media screen and (max-width:599px) {

    #page #spindle01,
    #page #spindle02,
    #page #spindle03,
    #page #spindle04,
    #page #spindle05,
    #page #spindle06,
    #page #spindle07 {
        margin: 3em 0;
    }

    #page .spindle02 ul {
        display: block;
        margin-top: 1.5em;
    }

    #page .spindle02 ul li .panelBOX {
        margin-bottom: 1.5em;
    }

    #page .spindle02 ul li .panelBOX p {
        font-size: 1.5rem;
        text-align: left
    }

    #page .spindle02 p.txt {
        width: 100%;
        text-align: left;
    }

    #page .spindle02 .gear img.bgimg {
        bottom: 0;
        width: 70%;
    }

    #page .spindle04 .sampleimg {
        width: 100%;
        margin: 3.0em auto;
    }

    #page .spindle05 .lineupBOX {
        display: block;
        margin-bottom: 3.0em;
    }

    #page .spindle05 .lineupBOX .imgBOX {
        width: 100%;
        margin: 0 auto 1em auto;
    }

    #page .spindle05 .lineupBOX .imgBOX img {
        width: 60%;
        margin: 0 auto;
    }

    #page .spindle05 .lineupBOX .txtBOX {
        width: 100%;
    }

    #page .spindle05 .pdfbtn {
        width: 100%;
        padding: 1em;
    }

    #page .spindle06 .animeBOX table td.img {
        padding: 1em 1em;
    }

    #page .spindle07 .case-result {
        display: flex;
        flex-wrap: wrap;
    }

    #page .spindle07 .case-result .case-img30 {
        margin: 2px;
        width: 45%;
    }

    #page .spindle07 .case-result .case-txt30,
    #page .spindle07 .case-result .case-txt45,
    #page .spindle07 .case-result .case-img45 {
        width: 90%;
    }

    .case_open {
        pointer-events: none;
    }

}

/*------------------------------------*\
受託加工
\*------------------------------------*/
#page .entrustment01 {
    margin-top: 6.0em;
}

#page .entrustment03 .processingBOX {
    justify-content: space-between;
    flex-wrap: wrap;
}

#page .entrustment03 .processingBOX li {
    width: 47%;
    font-size: 1.4rem;
    margin-bottom: 6em;
}

#page .entrustment03 .processingBOX li:nth-last-child(-n+2) {
    margin-bottom: 0;
}

#page .entrustment03 .processingBOX li img {
    margin-bottom: 1.5em;
}

#page .entrustment04 .equip_img {
    text-align: center;
    width: 48%;
}

#page .entrustment04 table,
#page .entrustment06 table,
#page .entrustment07 table {
    width: 95%;
    margin: 0 auto;
}

#page .entrustment04 table,
#page .entrustment04 table th,
#page .entrustment04 table td,
#page .entrustment06 table,
#page .entrustment06 table th,
#page .entrustment06 table td,
#page .entrustment07 table,
#page .entrustment07 table th,
#page .entrustment07 table td {
    border-collapse: collapse;
    border: 1px solid #ccc;
}

#page .entrustment04 table td,
#page .entrustment06 table td,
#page .entrustment07 table td {
    padding: 0.5em;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
}

#page .entrustment05 .exBOX {
    justify-content: space-between;
    width: 70%;
    margin: 0 auto;
    flex-wrap: wrap;
}

#page .entrustment05 .exBOX li {
    width: 21%;
}

#page .entrustment05 .exBOX li:nth-child(-n+4) {
    margin-bottom: 1.5em;
}

#page .entrustment06 {
    margin-bottom: 2rem;
}

#page .entrustment06 .entrust_sample {
    padding: 1.5em;
}

#page .entrustment06 .entrust_sample_title {
    font-weight: bold;
}

#page .entrustment06 .entrust_sample_text {
    font-size: 1.4rem;
}

#page .entrustment07 .col-20 {
    width: 20%;
}

#page .entrustment07 .col-40 {
    width: 40%;
}

#page .entrustment07 .col-60 {
    width: 60%;
}

#page .entrustment07 h3 {
    font-weight: bold;
    margin: 0.5rem 0;
}

.es_open {
    cursor: pointer;
    font-weight: bold;
    padding: unset;
}

.es_overlay {
    display: none;
}

.to_sample {
    text-align: center;
    position: relative;
    margin-top: 3rem;
}

.to_sample a {
    padding: 1rem;
    border: 1px solid #000;
}

.to_sample:before {
    top: -3.5rem;
    content: 'More Sample';
    color: #fff;
    background: red;
    padding: 0 1rem;
    position: absolute;

}

#es_pop-up01,
#es_pop-up02,
#es_pop-up03 {
    display: none;
}

#es_pop-up01:checked+.es_overlay,
#es_pop-up02:checked+.es_overlay,
#es_pop-up03:checked+.es_overlay {
    display: block;
    z-index: 9999;
    background-color: #00000070;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}

.es_window {
    width: 50%;
    /*max-width: 380px;
	height: 240px;*/
    border: black 1px solid;
    background-color: #ffffff;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.es_close {
    cursor: pointer;
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 2rem;
    padding: 5px;
    background-color: white;
}



/* 〜599px：SP
------------------------------ */
@media screen and (max-width:599px) {

    #page .entrustment01,
    #page .entrustment02,
    #page .entrustment03,
    #page .entrustment04,
    #page .entrustment05 {
        margin: 3.0em 0;
    }

    #page .entrustment03 .processingBOX {
        display: block;
    }

    #page .entrustment03 .processingBOX li {
        width: 100%;
        margin-bottom: 3.0em;
    }

    #page .entrustment03 .processingBOX li:nth-last-child(2) {
        margin-bottom: 3.0em;
    }

    #page .entrustment03 .processingBOX li:nth-last-child(-n+1) {
        margin-bottom: 0;
    }

    #page .entrustment04 .scroll_table table,
	#page .entrustment06 .scroll_table table,
    #page .entrustment07 .scroll_table table,
    #page .millingchuck .scroll_table table {
        width: 30em;
    }

    #page .entrustment04 .scroll_table,
	#page .entrustment06 .scroll_table,
    #page .entrustment07 .scroll_table,
    #page .millingchuck .scroll_table {
        overflow: auto;
        /*tableをスクロールさせる*/
        white-space: nowrap;
        /*tableのセル内にある文字の折り返しを禁止*/
    }

    #page .entrustment04 .scroll_table::-webkit-scrollbar,
	#page .entrustment06 .scroll_table::-webkit-scrollbar,
    #page .entrustment07 .scroll_table::-webkit-scrollbar,
    #page .millingchuck .scroll_table::-webkit-scrollbar {
        /*tableにスクロールバーを追加*/
        height: 5px;
    }

    #page .entrustment04 .scroll_table::-webkit-scrollbar-track,
    #page .entrustment06 .scroll_table::-webkit-scrollbar-track,
    #page .entrustment07 .scroll_table::-webkit-scrollbar-track,
    #page .millingchuck .scroll_table::-webkit-scrollbar-track  {
        /*tableにスクロールバーを追加*/
        background: #F1F1F1;
    }

    #page .entrustment04 .scroll_table::-webkit-scrollbar-thumb,
    #page .entrustment06 .scroll_table::-webkit-scrollbar-thumb,
    #page .entrustment07 .scroll_table::-webkit-scrollbar-thumb,
    #page .millingchuck .scroll_table::-webkit-scrollbar-thumb  {
        /*tableにスクロールバーを追加*/
        background: #BCBCBC;
    }

    #page .entrustment04 p.caution,
    #page .entrustment06 p.caution,
    #page .entrustment07 p.caution {
        color: #dd4b39;
    }

    #page .entrustment05 .exBOX {
        width: 100%;
        margin: 0 auto;
        flex-wrap: wrap;
    }

    #page .entrustment05 .exBOX li {
        width: 48%;
    }

    #page .entrustment05 .exBOX li:nth-child(-n+6) {
        margin-bottom: 1.5em;
    }

    #page .entrustment06 .flex {
        display: block;
    }

    .es_open {
        pointer-events: none;
    }
}




/*------------------------------------*\
私たちについて
\*------------------------------------*/
#page.about .bgimg {
    position: relative;
}

#page.about .bgimg img {
    position: absolute;
    z-index: -1;
    top: -3em;
    right: 0;
}

#page.about .about01 {
    padding-top: 6.0em;
}

#page.about .about02 table tr td,
#page.about .about03 table tr td {
    width: 25%;
    box-sizing: border-box;
    padding: 0.5em;
}

#page.about .about02 table tr td:nth-child(even),
#page.about .about03 table tr td:nth-child(even) {
    width: 75%;
}

/* 〜599px：SP
------------------------------ */
@media screen and (max-width:599px) {
    #page.about .about01 {
        padding: 3.0em 0;
    }

    #page.about .about02,
    #page.about .about03 {
        padding: 1.5em 0 3.0em 0;
    }

    #page.about .bgimg img {
        width: 70%;
        top: 0;
    }

    #page.about .about02 table tr td,
    #page.about .about03 table tr td {
        width: 100%;
        display: block;
    }

    #page.about .about02 table tr td:nth-child(odd),
    #page.about .about03 table tr td:nth-child(odd) {
        padding-bottom: 0;
        font-weight: bold;
    }

    #page.about .about02 table tr td:nth-child(even),
    #page.about .about03 table tr td:nth-child(even) {
        width: 100%;
        padding-bottom: 1.0em;
        margin-bottom: 1.5rem;
        border-bottom: 1px solid #cccccc;
    }
}



/*------------------------------------*\
導入の流れ
\*------------------------------------*/
#page.introduction .intro01,
#page.introduction .intro02 {
    margin: 6.0em 0;
}

#page.introduction .intro01 h2.line,
#page.introduction .intro02 h2.line {
    margin-bottom: 1.0em;
}

#page.introduction .intro01 .bgBOX,
#page.introduction .intro02 .bgBOX {
    background-color: #8bd4e2;
    width: 100%;
    padding: 3.0em 0;
}

#page.introduction .intro01 .flowBOX,
#page.introduction .intro02 .flowBOX {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #000;
    padding: 1.5em;
    margin-bottom: 1.0em;
    background-color: #fff;
    justify-content: space-between;
    align-items: center;
}

#page.introduction .intro01 .flowBOX:last-child,
#page.introduction .intro02 .flowBOX:last-child {
    margin-bottom: 0;
}

#page.introduction .intro01 .flowBOX .iconBOX {
    width: 22%;
    text-align: center;
}

#page.introduction .intro01 .flowBOX .txtBOX.flex {
    width: 75%;
    align-items: center;
}

#page.introduction .intro02 .flowBOX .iconBOX {
    width: 12%;
    text-align: center;
}

#page.introduction .intro02 .flowBOX .txtBOX.flex {
    width: 85%;
    align-items: center;
}

.intro_img img {
    width: 100%;
    max-height: 580px;
    object-fit: cover;
    object-position: top;
}

/* 〜599px：SP
------------------------------ */
@media screen and (max-width:599px) {

    #page.introduction .intro01,
    #page.introduction .intro02 {
        margin: 3.0em 0;
    }

    #page.introduction .intro01 .flowBOX,
    #page.introduction .intro02 .flowBOX {
        display: block;
        width: 100%;
    }

    #page.introduction .intro01 .flowBOX .iconBOX,
    #page.introduction .intro02 .flowBOX .iconBOX {
        width: 100%;
        margin-bottom: 1em;
        border-bottom: 1px solid #ccc;
        padding: 1em;
    }

    #page.introduction .intro01 .flowBOX .txtBOX.flex,
    #page.introduction .intro02 .flowBOX .txtBOX.flex {
        width: 100%;
    }
}


/*------------------------------------*\
超音波スピンドルレンタル
\*------------------------------------*/
#page #rental01 {
    margin-top: 6em;
}


#page #rental01 ul.problem li {
    width: 33%;
    padding: 1rem;
    margin: 1rem;
    box-shadow: 1px 1px 3px 3px rgb(150 147 147 / 5%), -1px -1px 3px 3px rgb(150 147 147 / 5%), -1px 1px 3px 3px rgb(150 147 147 / 5%), 1px -1px 3px 3px rgb(150 147 147 / 5%);
    background-color: #FFFFFF;
    position: relative;
}

#page #rental01 ul.problem li .inner {
    padding: 2rem;
}

#page #rental01 ul.problem li .caption {
    width: 70px;
    border-radius: 70px;
    height: 70px;
    top: 5px;
    left: 1rem;
    background-color: #6fbaa9;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-flow: column;
    color: #FFFFFF;
    position: absolute;
}

#page #rental01 ul.problem h3.ttl {
    left: 6rem;
    position: relative;
    top: -20px;
    font-size: 1.7rem;
    font-weight: bold;
}

#page #rental01 ul.problem h3.ttl .border {
    font-size: 2.5rem;
    background-image: linear-gradient(transparent 60%, #d1594d);
}

#page #rental01 h3.solttl {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin: 2rem;
}

#page #rental01 h3.solttl span.pickup {
    color: orange;
    font-size: 3rem;
    font-weight: bold;
    margin: 0 1rem;
}

#page #rental01 table.price {
    width: 100%;
    border: 1px solid #ccc;
}

#page #rental01 table.price th.price_th,
td.price_td {
    width: 33%;
    font-weight: bold;
    padding: 1em;
    border: 1px solid #ccc;
}

#page #rental01 table.price td.price_td:not(:first-child) {
    font-weight: 200;
    text-align: right;
}

#page #rental01 ul.atention {
    padding-left: 3rem;
    list-style: initial;
}

#page .intro02 table.flowttlBox {
    margin-bottom: 2rem;
    width: 100%;
}

#page .intro02 table.flowttlBox th.flowtttlBox_th {
    width: 50%;
    font-weight: bold;
    padding: 1em;
    border: 1px solid #ccc;
    text-align: center;
}

#page .intro02 table.flowttlBox td.flowtttlBox_td {
    font-weight: 200;
    text-align: left;
    padding: 1em;
    border: 1px solid #ccc;
    width: 50%;
}


/* 〜599px：SP
------------------------------ */
@media screen and (max-width:599px) {

    #page #rental01,
    #page #rental02 {
        margin: 3em 0;
    }

    #page #rental01 ul.problem {
        display: block;
    }

    #page #rental01 ul.problem li {
        width: 90%;
        top: 5px;
        left: 10px;

    }

    #page .intro02 table.flowttlBox td.flowtttlBox_td {
        font-size: 1.3rem;
    }

}

/*------------------------------------*\
協力企業網
\*------------------------------------*/
#page.cooperating .underline{
    text-decoration: underline 2px #333;
    text-underline-offset: 1rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}
#page.cooperating .cooperating01 .listbox {
    margin-top: 2rem;
    padding-left: 2rem;
}
#page.cooperating .cooperating01 .listbox .title{
    font-size: 1.8rem;
}
#page.cooperating .cooperating01 .listbox .text{
    margin-left: 1rem;
}

#page.cooperating .cooperating02 .imgbox {
    width: 100%;
    flex-wrap: wrap;
    text-align: center;
    margin-top: 3rem;
}

#page.cooperating .cooperating02 .imgbox-item {
    margin: 0 auto 2rem auto;
}

#page.cooperating .cooperating02 .imgbox-item .img {
    border: solid 1px grey;
    padding: 1rem;
}
#page.cooperating .cooperating02 .imgbox-item .text {
    border: solid 1px grey;
    padding: 1rem;
    text-align: left;
}
#page.cooperating .cooperating02 .imgbox-item .text-center {
    border: solid 1px grey;
    padding: 1rem;
    text-align: center;
}

#page.cooperating .cooperating02 .w30 {
    width: 30%;
}

#page.cooperating .cooperating02 .w45 {
    width: 45%;
}

#page.cooperating .cooperating02 .w96 {
    width: 96%;
}
#page.cooperating .cooperating02 .imgbox-item .imgbox .text{
	border: solid 1px grey;
}


/* 〜599px：SP
------------------------------ */
@media screen and (max-width:599px) {
    #page.cooperating .cooperating02 .w30 {
        width: 96%;
    }
    #page.cooperating .cooperating02 .w45 {
        width: 96%;
    }
}


/*------------------------------------*\
自動化
\*------------------------------------*/
#page.automation .automation01 .listbox {
    list-style: disc;
    margin-top: 2rem;
    padding-left: 2rem;
}

#page.automation .automation01 .imgbox {
    width: 100%;
    flex-wrap: wrap;
    text-align: center;
    margin-top: 2rem;
}

#page.automation .automation01 .imgbox-item {
    width: 45%;
    margin: 0 auto 2rem auto;

}

#page.automation .automation01 .automation-img {
	text-align:center;	
}

#page.automation .automation01 .automation-img-arrow {
	width:20%;
}

#page.automation .automation01 .automation-effect {
	text-decoration: underline #1E88E5 3px;
    line-height: 5rem;
    text-underline-offset: 1rem;
    width: 70%;
    margin: 0 auto 6em auto;
    font-size: 2rem;
	border: solid 1px #1E88E5;
	padding:2rem;
}
#page.automation .automation01  .arrow-bottom .arrow-txt{
	color:white;
	position:absolute;
	bottom:5rem;
	left:8.5rem;
}

#page.automation .automation01 .arrow-right-bottom {
clip-path: polygon(2% 15%, 91% 15%, 91% 50%, 99% 50%, 85% 73%, 69% 51%, 78% 51%, 78% 30%, 2% 30%);
	position: relative;
	width:20rem;
	height:20rem;
	margin:0 auto;
	background-color: #1E88E5;
	top:-5rem;
}
#page.automation .automation01  .arrow-right-bottom .arrow-txt{
	color:white;
	position:absolute;
	bottom:5rem;
	left:8.5rem;
}


/* 〜599px：SP
------------------------------ */
@media screen and (max-width:599px) {
	#page.automation .automation01 .automation-effect {
    font-size: 1rem;
		width:90%;
}
	#page.automation .automation01 .automation-img-arrow {
	width:35%;
}
}


/*------------------------------------*\
お問い合わせ
\*------------------------------------*/
#page.contact .contact01,
#page.contact .contact02 {
    margin-bottom: 3.0em;
}


/*------------------------------------*\
求人情報
\*------------------------------------*/
#page.recruit .rec01 .contents {
    position: relative;
    margin-top: 6.0em;
}

#page.recruit .rec01 .contents .bgimg {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
}

#page.recruit .rec01 .txtBOX {
    margin-bottom: 6.0em;
}

#page.recruit .rec01 .photoBOX {
    width: 100%;
    position: relative;
    margin-bottom: 6.0em;
    height: 640px;
}

#page.recruit .rec01 .photoBOX .photo01 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 54%;
}

#page.recruit .rec01 .photoBOX .photo02 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 54%;
}

#page.recruit .rec02 {
    margin-bottom: 6.0em;
}

#page.recruit .rec02 .senior {
	width:80%;
	margin: 0 auto;
}

#page.recruit .rec02 .contents .senior .senior-inner {
    justify-content: space-between;
    margin-bottom: 5rem;;
}



#page.recruit .rec02 .senior-inner-img{
    width: 50%;
}


#page.recruit .rec02 .senior-inner-txtbox {
    width: 45%;
    text-align: left;
}

#page.recruit .rec02 h5.senior-inner-branch {
    font-weight: bold;
}

#page.recruit .rec02 h4.senior-inner-name {
    font-size: 2.5rem;
}

#page.recruit .rec02 p.senior-inner-btn {
    text-align: right;
    margin-top: 10rem;
    border: 2px solid #e6f6f6;
	background: linear-gradient(-45deg, #387ccc 10px, transparent 0);
}

#page.recruit .rec02 a.senior-inner-link {
	text-decoration:none;
	display:block;
	padding:2rem;
}

#page.recruit .rec02 .terms {
    margin: 2rem;
}


#page.recruit .rec02 dl dt:last-child,
#page.recruit .rec02 dl dd:last-child {
    margin-bottom: 0;
}

#page.recruit .rec02 dl dt {
    background-color: #8bd4e2;
    color: #fff;
    font-weight: bold;
    width: 80%;
	margin-top:1rem;
}

#page.recruit .rec02 dl dd {
    width: 75%;
}

#page.recruit .rec03 {
    margin-bottom: 6.0em;
}

#page.recruit .rec03 h2.line {
    margin-bottom: 1.5em;
}

#page.recruit .rec03 .caution {
    text-align: center;
}


/* 〜599px：SP
------------------------------ */
@media screen and (max-width:599px) {
    #page.recruit .rec01 .contents {
        margin-top: 3em;
    }

    #page.recruit .rec02,
    #page.recruit .rec03 {
        margin-bottom: 3.0em;
    }

    #page.recruit .rec01 .contents .bgimg {
        width: 50%;
    }

    #page.recruit .rec01 .txtBOX {
        margin-bottom: 1.5em;
    }

    #page.recruit .rec01 .photoBOX {
        width: 100%;
        position: static;
        margin-bottom: 3.0em;
        height: auto;
    }

    #page.recruit .rec01 .photoBOX .photo01 {
        position: static;
        width: 100%;
        margin-bottom: 1em;
    }

    #page.recruit .rec01 .photoBOX .photo02 {
        position: static;
        width: 100%;
    }

    #page.recruit .rec02 .detail h3 {
        font-size: 2.0rem;
    }

    #page.recruit .rec02 dl {
        width: 100%;
        display: block;
    }

    #page.recruit .rec02 dl dt {
        width: 100%;
    }

    #page.recruit .rec02 dl dd {
        width: 100%;
        margin-bottom: 1em;
    }
	
	#page.recruit .rec02 .contents .senior .flex {
		display : block;
	}
	
	#page.recruit .rec02 .senior-inner-name {
		font-size : 1rem;
	}
	#page.recruit .rec02 .senior-inner-img{
		width: 100%;
	}


#page.recruit .rec02 .senior-inner-txtbox {
    width: 100%;
    text-align: center;
}
	#page.recruit .rec02 h4.senior-inner-name {
		font-size : 1.5rem;
}

#page.recruit .rec02 p.senior-inner-btn {
    text-align: right;
    margin-top: 1rem;
}
}


/*------------------------------------*\
プライバシーポリシー
\*------------------------------------*/
#page.privacy .privacy01 {
    margin-bottom: 6.0em;
}

#page.privacy .privacy01 p {
    margin-bottom: 3.0em;
}

#page.privacy .privacy01 p:last-child {
    margin-bottom: 0;
}

#page.privacy .privacy01 h2 {
    font-size: 2.0rem;
    color: #68B6C5;
    font-weight: bold;
    margin-bottom: 0.5em;
}

/* 〜599px：SP
------------------------------ */
@media screen and (max-width:599px) {
    #page.privacy .privacy01 {
        margin-bottom: 3.0em;
    }
}

/*------------------------------------*\
Q&A
\*------------------------------------*/
#page.faq .faq01 {
    margin-top: 6.0em;
}

#page.faq .faq02 {
    margin-bottom: 6.0em;
}

#page.faq .faq01 ul,
#page.faq .faq02 ul {
    justify-content: space-between;
    flex-wrap: wrap;
    border-top: 1px solid #707070;
    padding: 1.5em;
}

#page.faq ul:last-child {
    border-bottom: 1px solid #707070;
}

#page.faq .iconBOX {
    align-items: flex-start;
    width: 7%;
}

#page.faq .txtBOX {
    width: 90%;
    height: auto;
}

#page.faq .cp_qa *,
.cp_qa *:after,
.cp_qa *:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#page.faq .cp_qa .cp_actab {
    position: relative;
    overflow: hidden;
    width: 100%;
    color: #1b2538;
}

#page.faq .cp_qa .cp_actab input {
    position: absolute;
    opacity: 0;
}

/* 質問 */
#page.faq .cp_qa .cp_actab label {
    line-height: 1.6em;
    position: relative;
    display: block;
    margin: 0 0 0 0;
    padding: 1.5em 0 1em 0;
    cursor: pointer;
}

#page.faq .cp_qa .cp_actab label:hover {
    transition: all 0.5s;
    color: #00838f;
}

/* --質問の＋アイコン */
#page.faq .cp_qa .cp_actab label::after {
    font-size: 1.8rem;
    line-height: 2em;
    position: absolute;
    top: 0.7em;
    ;
    right: 0;
    font-family: "Font Awesome 5 Pro";
    content: '\f067';
    display: inline-block;
    width: 2em;
    height: 2em;
    -webkit-transition: transform 0.3s;
    transition: transform 0.3s;
    color: #8BD4E2;
}

/* 答え */
#page.faq .cp_qa .cp_actab .cp_actab-content {
    position: relative;
    overflow: hidden;
    max-height: 0;
    -webkit-transition: max-height 0.3s;
    transition: max-height 0.3s;
}

#page.faq .cp_qa .cp_actab .cp_actab-content p {
    margin: 1em 1em 1em 0;
    padding: 1em;
    background-color: #333;
    color: #fff;
}

/* 質問を開いた時の仕様 */
/* --答えの高さ */
#page.faq .cp_qa .cp_actab input:checked~.cp_actab-content {
    max-height: 40em;
    box-sizing: border-box;
}

/* 質問をクリックした時のアイコンの動き */
#page.faq .cp_qa .cp_actab input:checked~label {
    color: #00838f;
}

/* 質問をクリックした時の+の動き */
#page.faq .cp_qa .cp_actab input[type=checkbox]:checked+label::after {
    content: '\f068';
}

/* faq 受託加工用2109以降 */ 
.cp_qa2109 *,
.cp_qa2109 *:after,
.cp_qa2109 *:before {
    font-family: 'FontAwesome', sans-serif;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.cp_qa2109 dt {
    position: relative;
    margin: 0 0 1.5em 0;
}

.cp_qa2109 dd {
    position: relative;
    margin: 0 0 2em 0;
    padding: 0 0 1.5em 2em;
    border-bottom: 1px dotted #0097a7;
}

.cp_qa2109 dt::before,
.cp_qa2109 dd::before {
    font-size: 1.2em;
    margin: 0 0.5em 0 0;
    color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    line-height: 1.2em;
}

.cp_qa2109 dt::before {
    padding: 0.1em 0.3em;
    content: 'Q';
    background: #f57c00;
}

.cp_qa2109 dd::before {
    padding: 0.12em 0.45em;
    content: 'A';
    background: #0097a7;
}


/* 〜599px：SP
------------------------------ */
@media screen and (max-width:599px) {

    #page.faq .faq01,
    #page.faq .faq02 {
        margin: 3.0em 0;
    }

    #page.faq .faq01 ul,
    #page.faq .faq02 ul {
        padding: 1.0em 0 0.5em 0;
    }

    #page.faq .cp_qa .cp_actab label {
        padding: 0.5em 2.5em 1em 0;
    }

    #page.faq .cp_qa .cp_actab label::after {
        top: 0em;
        right: -1em;
    }

    #page.faq .cp_qa .cp_actab .cp_actab-content p {
        margin: 0 0 1.0em 0;
    }

    #page.faq .contents h2.stripe {
        margin: 0 auto 1.5em auto;
    }
}



/*------------------------------------*\
スライダー系
\*------------------------------------*/

.swiper-slide {}

.swiper-slide .icon_new {
    position: absolute;
    top: -40px;
    left: 5px;
}

.cl_top_01 .swiper-container {
    overflow: visible;
}


/*------------------------------------*\
    WEBサイト 固有カスタム
\*------------------------------------*/

.wp-pc_nav {}

.wp-sp_nav {}


section.border {
    position: relative;
    margin: 5.0em 0 3.0em;
    text-align: center;
}

section.border .contents img {
    width: 100%;
}

section.border img.btn_next {
    position: absolute;
    bottom: -80px;
    right: 50px;
    width: 50px;
    height: auto;
}


section.border.photo {
    margin: 7.0em 0 4.0em;
}

section.border.photo .contents {
    margin-top: 90px;
}

section.border.photo img {
    width: 100%;
}


section .contents {
    width: 100%;
    margin: 0 auto;
    padding: 35px 0px 35px;
}

.logo-img {
    width: 300px;
}

section .middle h2 {
    font-size: 3.0rem;
}

section .middle h2 span {
    display: block;
    font-size: 2.0rem;
}



.cl_top_01,
.cl_top_04 {}

.cl_top_01 .contents {
    overflow: hidden;
}

.cl_top_01 h2,
.cl_top_04 h2 {}



.cl_top_01 .contents p {
    padding-bottom: 2.0em;
    line-height: 2.0em;
}



.cl_page.message {
    padding: 4.0em 0;
    color: #ffffff;
    background: #dd0000;
    text-align: center;
}

.cl_page .title01 {
    background: url(../images/common/img_03@2x.jpg);
    background-size: cover;
    padding: 4.0em 0;
}

.cl_page .contents {
    padding: 3.0em 0 5.0em;
    position: relative;
}

.cl_page h2 {
    font-size: 3.0rem;
    padding-bottom: 0em;
}

.cl_page h2 span {
    display: block;
}

.cl_page .title02 {
    width: 100%;
}

.cl_page .title02 h2 {
    text-align: center;
    background: #d00;
    color: #ffffff;
    padding: 0.3em 0;
    font-size: 2.5rem;
}


.cl_page.reason .contents .box {
    justify-content: flex-end;
    position: relative;
}

.cl_page.reason .contents .box p {
    text-align: left;
    line-height: 2.0;
}

.cl_page.reason .contents .box li:nth-child(1) {
    position: absolute;
    top: -120px;
    left: 0;
}

.cl_page.reason .contents .box li:nth-child(2) {
    flex-basis: 60%;
    box-sizing: border-box;
    padding: 1.5em 0;
}

.cl_page .contents.page_menu {
    width: 100%;
}

.cl_page .contents.page_menu .flex {
    flex-wrap: wrap;
    justify-content: center;
}

.cl_page .contents.page_menu .flex li {
    flex-basis: 25%;
    text-align: left;
    line-height: 3.0;
    font-size: 1.8rem;
}

.cl_page .contents.page_menu .flex li:before {
    font-weight: 300;
    content: " \f105";
    padding-left: 2px;
    padding-right: 5px;
    font-family: "Font Awesome 5 Pro";
}


.cl_page.jigyo .contents ul.box:nth-child(even) {
    flex-direction: row-reverse;
    margin: 2.0em 0;
}


.cl_page.jigyo .contents ul.box li:first-child {
    flex-basis: 50%;
    position: relative;
    background: #000;
}

.cl_page.jigyo .contents ul.box li:first-child img {
    opacity: 0.8;
    height: 100%;
    object-position: top;
    /* ポジション設定 */
    object-fit: cover;
    /* モダンブラウザ用 画像トリミング */
    font-family: 'object-fit: cover;'
        /* IE EDGE 用 */
}

.cl_page.jigyo .contents ul.box li:first-child h2 {
    letter-spacing: 0.1em;
    z-index: 2;
    color: #ffffff;
    width: 100%;
    height: 100%;
    position: absolute;
    justify-content: center;
    align-items: center;
}

.cl_page.jigyo .contents ul.box li:nth-child(2) {
    flex-basis: 50%;
    padding: 1.0em;
    text-align: left;
}

.cl_page.jigyo .contents ul.box li:nth-child(2) h2 {
    font-size: 2.3rem;
    margin-bottom: 0.5em;
}




/* 見出し - タイトル */

.title_arrow {
    min-width: 300px;
    max-height: 80px;
    position: relative;
    margin-bottom: 2.0em;
}

.title_arrow h2 {
    font-family: 'Noto Serif JP';
    display: inline-block;
    line-height: 1.4;
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.title_arrow h2 span {
    font-family: 'Noto Sans Japanese';
    font-weight: 300;
    display: block;
    text-align: center;
    font-size: 1.2rem;
    padding-bottom: 1.0em;
}


.title_arrow img {
    position: absolute;
    bottom: 0;
    display: block;
}




/* PICK UP */

.viewall {
    text-align: right;
    margin-bottom: 4.0em;
    font-family: 'Montserrat', sans-serif;
}

.viewall a {
    letter-spacing: 0.05em;
    font-size: 1.6rem;
    font-weight: 600;
}

.viewall a:after {
    font-weight: 600;
    content: " \f009";
    padding-left: 2px;
    padding-right: 5px;
    font-family: "Font Awesome 5 Pro";
}




/* CONCEPT */

.concept_box01 li:first-child {
    flex-basis: 50%;
}

.concept_box01 li:last-child {
    flex-basis: 50%;
}

.concept_box01 li .inner {
    padding-right: 2.0em;
}

.concept_box02 li .inner {
    padding-left: 2.0em;
}

.concept_box01 h3,
.concept_box02 h3 {
    font-size: 2.0rem;
    font-weight: 600;
    padding-bottom: 1.2em;
}

.concept_box02 h3 {
    padding-top: 1.5em;
}


.concept_box01 p {
    padding-bottom: 2.0em;
}

.concept_box02 {
    flex-direction: row-reverse;
}

.concept_box02 li:first-child {
    flex-basis: 45%;
}

.concept_box02 li:last-child {
    position: relative;
    flex-basis: 55%;
}

.concept_box02 li:last-child img {
    position: absolute;
    top: -50px;
}


/* enstrusment */


.enstrusment h3 {
    font-size: 2.0rem;
    line-height: 1.7;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.enstrusment>.contents ul.flex li:first-child {
    flex-basis: 50%;
}

.enstrusment>.contents ul.flex li:last-child {
    padding: 0.5em 0em 0 2.5em;
}

.enstrusment>.contents ul.flex li .inner {
    padding-top: 2.0em;
}

.enstrusment>.contents ul.flex li .inner p {
    padding-bottom: 2.0em;
}

.enstrusment>.title_arrow {
    margin-bottom: 4.0em;
}

.enstrusment .gallery p{
    text-align: center;
    margin-top: 2rem;
}

.enstrusment .gallery img{
    margin:1rem;
}

/* SERVICE */


.service h3 {
    font-size: 2.0rem;
    line-height: 1.7;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.service>.contents ul.flex li:first-child {
    flex-basis: 50%;
}

.service>.contents ul.flex li:last-child {
    padding: 0.5em 0em 0 2.5em;
}

.service>.contents ul.flex li .inner {
    padding-top: 2.0em;
}

.service>.contents ul.flex li .inner p {
    padding-bottom: 2.0em;
}

.service>.title_arrow {
    margin-bottom: 4.0em;
}

.bg_stripe {
    margin: 0 4.0em;
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 1);
    background-image: repeating-linear-gradient(132deg, transparent, transparent 10px, rgba(238, 238, 238, 1) 10px, rgba(238, 238, 238, 1) 15px)
}

.title_center {
    padding-top: 4.0em;
    display: block;
    text-align: center;
}

.title_center h2 {
    display: inline-block;
    line-height: 1.4;
    font-size: 2.3rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding-bottom: 0.5em;
    border-bottom: 3px solid #333;
}

.bg_stripe .flex.panel {
    justify-content: space-between;
    width: 600px;
    margin: 4.0em auto;
}

.bg_stripe .flex.text_box {
    justify-content: space-between;
    width: 600px;
    margin: 0 auto;
    padding: 0em 0 4.0em;
}

.bg_stripe .flex.text_box p {
    padding-right: 2.0em;
}

.bg_stripe .flex.panel li {
    text-align: center;
}

.bg_stripe .flex.panel li a .inner {
    position: relative;
    text-align: center;
    margin: 0 auto;
    display: flex;
    /*最新のブラウザ*/
    display: -webkit-box;
    /*レガシーCC*/
    display: -webkit-flex;
    /*Android2.3*/
    display: -ms-flexbox;
    /*IE9~用*/
    align-items: center;
    justify-content: center;
}

.bg_stripe .flex.panel li h3 {
    width: 133px;
    height: 133px;
    padding: 0.5em;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.6;
    position: absolute;
    display: flex;
    /*最新のブラウザ*/
    display: -webkit-box;
    /*レガシーCC*/
    display: -webkit-flex;
    /*Android2.3*/
    display: -ms-flexbox;
    /*IE9~用*/
    align-items: center;
    justify-content: center;
}

.bg_stripe .flex.panel li a:hover h3 {
    color: #000;
}

.bg_stripe .flex.panel li a:hover .inner svg .cls-1 {
    fill: #8BD4E2;
    filter: alpha(opacity=70);
    /* 以下、ゆっくりフェードインさせる設定 */
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.sample_gallery {
    margin-bottom: 3.0em;
}

.sample_gallery h4 {
    text-align: center;
    font-weight: 600;
    font-size: 1.8rem;
}

/* 600px〜999px：タブレット
------------------------------ */
@media screen and (min-width:600px) and (max-width:999px) {
    .bg_stripe .flex.panel {
        width: 100%;
        margin: 4.0em auto;
        padding: 0 1.0em;
    }

    .bg_stripe .flex.text_box {
        width: 95%;
    }

}



/* ABOUT US */

.about_box01.flex li:first-child {
    flex-basis: 40%;
}

.about_box01.flex li:last-child {
    flex-basis: 60%;
    display: flex;
    /*最新のブラウザ*/
    display: -webkit-box;
    /*レガシーCC*/
    display: -webkit-flex;
    /*Android2.3*/
    display: -ms-flexbox;
    /*IE9~用*/
    align-items: center;
}

.about_box01.flex li:first-child h3 {
    font-size: 2.0rem;
    font-weight: 600;
}

.about_box01.flex li:last-child p {
    max-width: 500px;
}

.about_box01 {
    margin-bottom: 5rem;
}

/* 会社概要 */

.cl_page.story .contents {
    margin: 4.0em auto;
    padding: .0em 0 .0em;
    overflow: hidden;
    color: #222222;
}

.cl_page.story02 .contents {
    margin: 0em auto 4.0em;
    padding: 0em 0 0em;
}


.cl_page.story .contents .profile {
    position: relative;
    z-index: 1;
    text-align: left;
    padding-bottom: 3.0em;
}

.cl_page.story .contents .profile h2 {
    font-size: 3.0rem;
    letter-spacing: 0.05em;
}

.cl_page.story .contents .profile h3 {
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    padding: 2.0em 0;
}

.cl_page.story .contents .profile p {
    font-size: 1.5rem;
    line-height: 2.5em;
}

.cl_page.story .contents img.posimg01 {
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}

.cl_page.story .contents img.posimg02 {
    width: 20%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}



.cl_page.story02 .contents p {
    padding: 2.0em 0;
    font-size: 1.5rem;
    line-height: 2.5em;
    text-align: left;
}

.cl_page.gaiyo .contents h2 {
    text-align: left;
    font-size: 2.5rem;
    padding-bottom: 1.0em;
}

.cl_page.gaiyo .contents table td,
.cl_page.gaiyo .contents table th {
    text-align: left;
    padding: 0.5em 0;
    font-size: 1.5rem;
}

.cl_page.gaiyo .contents table th {
    width: 25%;
}

.cl_page.gaiyo {
    background: #dd0000;
    color: #ffffff;
}

.cl_page.gaiyo .contents img {
    width: 300px;
    margin-bottom: 4.0em;
    position: absolute;
    bottom: 0;
    right: 0;
}




/* 求人情報 */


.cl_page.app .contents {
    padding: 5.0em 0 5.0em;
}

.cl_page.message>h2 {
    position: relative;
    display: inline-block;
    margin-bottom: 1em;
}

.cl_page.message>h2:before {
    content: '';
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 180px;
    height: 2px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #ffffff;
    border-radius: 2px;
}

.cl_page.message .contents>h3 {
    font-size: 2.0rem;
    padding-top: 1.0em;
}

.cl_page.story.recruit .contents .profile {
    width: 60%;
    padding-right: 1.5em;
}


.cl_page.story.recruit img.posimg01 {
    width: 40%;
}


.cl_page.story .contents .profile h2 {
    font-size: 2.5rem;
    letter-spacing: 0.05em;
    padding-top: 2.0em;
    margin-bottom: 2.0em;
}


.cl_page.message .contents>h2 {
    font-size: 2.0rem;
    padding-top: 1.0em;
}

.cl_page.message .photo_img {
    margin: 0 auto;
    position: relative;
    width: 300px;
    height: 250px;
}

.cl_page.message .photo_img img:nth-child(1) {
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: auto;
    z-index: 1;
}

.cl_page.message .photo_img img:nth-child(2) {
    position: absolute;
    right: -30px;
    bottom: 10px;
    width: 200px;
    height: auto;
    z-index: 0;
}

.cl_page.message .contents {
    padding: 3.0em 0 1.0em;
}


#page_03.cl_page.jigyo {
    position: relative;
    background: #000;
    margin-bottom: 5.0em;
}

#page_03.cl_page.jigyo img {
    opacity: 0.8;
}

#page_03.cl_page.jigyo.zosei img {
    opacity: 1.0;
}

#page_03.cl_page.jigyo h1 {
    position: absolute;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 3.0rem;
    width: 100%;
    height: 100%;
    z-index: 2;
    top: 0;
}




.cl_page.jigyo_qa .contents h2 {
    color: #512116;
    background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(179, 179, 179, 0.33) 5px, rgba(179, 179, 179, 0.33) 7px);
    margin-bottom: 0.5em;
    padding: 0.2em 0.5em;
}

.cl_page.jigyo_qa .contents ul {
    position: relative;
    flex-wrap: wrap;
    color: #ffffff;
    z-index: 1
}

.cl_page.jigyo_qa .contents ul h2 {
    font-size: 2.0rem;
    border-bottom: 1px solid #fff;
    margin-bottom: 0.8em;
}

.cl_page.jigyo_qa .contents ul h2:before {
    font-weight: 300;
    content: "Q.";
    padding-left: 2px;
    padding-right: 5px;
}

.cl_page.jigyo_qa .contents ul p {
    font-size: 1.4rem;
}

.cl_page.jigyo_qa .contents ul li {
    flex-basis: 50%;
    text-align: left;
    padding: 1.0em;
}

.cl_page.jigyo_qa .contents ul li .box {
    background-color: rgba(98, 44, 35, 0.5);
    height: 100%;
    padding: 1.0em 1.0em 1.5em;
    border-radius: 10px;
    /* CSS3草案 */
    -webkit-border-radius: 10px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 10px;
    /* Firefox用 */
}


.cl_page.jigyo_qa .contents img {
    width: 300px;
    opacity: 0.4;
    position: absolute;
    top: 10.0em;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 0;
}

.cl_page.jisseki .contents {
    padding: 0em 0 5.0em;
}

.cl_page.jisseki .contents .right img {
    padding-right: 0.3em;
    width: 50%;
}

.cl_page.jisseki .contents .left img {
    padding-left: 0.3em;
    width: 50%;
}


.cl_page.jisseki .contents ul {
    padding: 0.3em 0;
    flex-wrap: wrap;
}

.cl_page.jisseki .contents ul li {
    flex-basis: 25%;
    padding: 0.3em;
}


.cl_top_02 {}



/* 問い合わせフォーム */

.noticebox h3,
.noticebox02 h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5em;
}

.noticebox p,
.noticebox02 p {
    font-size: 1.3rem;
    font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "MS Pgothic", knowledge-reg, helvetica, arial, sans-serif;
    text-align: left;
}

.noticebox ul li {
    font-size: 1.3rem;
    font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "MS Pgothic", knowledge-reg, helvetica, arial, sans-serif;
    text-align: left;
}

.noticebox,
.noticebox02 {
    text-align: left;
}

.noticebox {
    background: #eee;
    padding: 1.0em;
    margin-bottom: 4.0em;
}




/*ボタンデザイン*/

a.btn_detail {
    background: #dd0000;
    border: 1px solid #dd0000;
    font-weight: 600;
    font-size: 1.4rem;
    padding: 0.8em 1.0em;
    color: white;
    border-radius: 3px;
    /* CSS3草案 */
    -webkit-border-radius: 3px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 3px;
    /* Firefox用 */
    font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "MS Pgothic", knowledge-reg, helvetica, arial, sans-serif;
}

.app a.btn_detail {
    display: block;
    text-align: center;
    background: #ffffff;
    border: 1px solid #dd0000;
    font-weight: 300;
    line-height: 0.1em;
    font-size: 1.8rem;
    padding: 1.3em 1.8em;
    max-width: 300px;
    color: #dd0000;
    margin: 0 auto;
    border-radius: 50px;
    /* CSS3草案 */
    -webkit-border-radius: 50px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 50px;
    /* Firefox用 */
    font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "MS Pgothic", knowledge-reg, helvetica, arial, sans-serif;
}

a.btn_detail:hover {
    color: #dd0000;
    background: rgba(255, 255, 255, 0.6);
    filter: alpha(opacity=70);
    /* 以下、ゆっくりフェードインさせる設定 */
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

a.btn_detail:before {
    font-weight: 600;
    content: " \f0da";
    padding-left: 2px;
    padding-right: 5px;
    font-family: "Font Awesome 5 Pro";
}

.app a.btn_detail:hover {
    background: #dd0000;
    color: #ffffff;
}


.cl_top_menu a.btn_detail {
    padding: 0.7em 1.4em;
    color: white;
    border: 1px #dd0000 solid;
}

.cl_top_menu a.btn_detail:hover {
    background: #fff;
    color: #d00;
}



/*ボタン_スライドメニュー補正*/

nav.slidemenu .slidebtn {
    width: 100%;
}

nav.slidemenu li a.btn_detail {
    display: block;
    color: #ffffff;
    text-align: center;
}

nav.slidemenu li a:hover.btn_detail {
    color: #dd0000;
}

nav.slidemenu .slidemenu_top li {
    flex-basis: 100%;
}

nav.slidemenu .slidemenu_top li:last-child {
    padding: 1.0em 0em 0em;
}

nav.slidemenu .logo {
    opacity: 0.7;
    width: 150px;
    height: auto;
    z-index: 0;
    position: absolute;
    bottom: 2%;
    right: 5%;
}



.cl_top_menu {
    padding-top: 0em;
}

.cl_top_menu .contents ul.flex {
    flex-wrap: wrap;
}

section.cl_top_menu .contents {
    padding: 0px 0px 35px;
}

.cl_top_menu .contents ul.flex li {
    width: calc(100%/3);
    box-sizing: border-box;
    padding: 0.5em;
}

.cl_top_menu .contents ul.flex h2 {
    text-align: center;
    font-size: 2.3rem;
    margin-top: 0em;
    margin-bottom: 0.5em;
    letter-spacing: 0.05em;
}

.cl_top_menu .contents ul.flex h3 {
    position: relative;
    display: inline-block;
    font-weight: 600;
    margin: 1.5em 15px 1.5em 0;
    padding: 0.8em 1.0em;
    min-width: 90%;
    max-width: 100%;
    height: 67px;
    color: white;
    font-size: 2.0rem;
    background: #707070;
}

.cl_top_menu .contents ul.flex h3:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -34px;
    border: 34px solid transparent;
    border-left: 34px solid #707070;
}

.cl_top_menu .contents ul.flex a {
    text-align: center;
}



.cl_top_menu .title02 {
    position: relative;
    padding: 4.0em 0 4.0em;
    text-align: center;
}

.cl_top_menu .title02 h2 {
    margin-block-start: 0em;
    margin-block-end: 0em;
    font-size: 3.0rem;
}

.cl_top_menu .title02 img {
    width: 40%;
    position: absolute;
    left: 0;
    bottom: 0;
}





.cl_infomation {}

.cl_infomation .contents ul.news li a {
    width: 100%;
    border-top: 1px solid #eee;
    display: flex;
    /*最新のブラウザ*/
    display: -webkit-box;
    /*レガシーCC*/
    display: -webkit-flex;
    /*Android2.3*/
    display: -ms-flexbox;
    /*IE9~用*/
    flex-wrap: wrap;
    font-size: 1.4rem;
    color: #444444;
    background: #ffffff;
    padding: 1.0em 0.8em 1.0em;
    margin: 0em 0 0em;
}


.cl_infomation .contents ul.news li:last-child a {
    border-bottom: 1px solid #eee;
}

.cl_infomation .contents ul.news li a .date {
    font-family: 'Montserrat', sans-serif;
}

.cl_infomation .contents ul.news li a .title {
    margin-left:1rem;
}

.cl_infomation .contents ul.news li a .icon {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.1em;
    margin: 0 1.5em;
    font-weight: 600;
}

.cl_infomation .contents ul.news li a .icon.news {}

.cl_infomation .contents ul.news li a .icon.media {}

.cl_infomation .contents ul.news li a:hover {
    background: #eeeeee;
    color: white;
    filter: alpha(opacity=70);
    /* 以下、ゆっくりフェードインさせる設定 */
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.cl_infomation .contents ul.news {
    width: 100%;
}

.cl_infomation .contents ul.news li a span:nth-child(3) {
    width: 100%;
}


a.morelink {
    background: #000000;
    display: block;
    width: 220px;
    text-align: center;
    font-size: 1.4rem;
    border: 1px solid #000000;
    padding: 1.0em 1.5em;
    color: #ffffff;
    margin: 2.0em 0 0 auto;
    border-radius: 10px;
    position: relative;
    /* CSS3草案 */
    -webkit-border-radius: 10px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 10px;
    /* Firefox用 */
}

a.morelink::after {
    content: "＞";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

a.morelink02 {
    background: #000000;
    display: block;
    width: 150px;
    text-align: center;
    font-size: 1.4rem;
    border: 1px solid #000000;
    padding: 1.0em 1.5em;
    color: #ffffff;
    margin: 2.0em 0 0 0;
    border-radius: 10px;
    /* CSS3草案 */
    -webkit-border-radius: 10px;
    /* Safari,Google Chrome用 */
    -moz-border-radius: 10px;
    /* Firefox用 */
}

a.morelink:hover,
a.morelink02:hover {
    background: #ffffff;
    color: #000000;
    filter: alpha(opacity=70);
    /* 以下、ゆっくりフェードインさせる設定 */
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}






.cl_access {
    padding-top: 3.0em;
    padding-bottom: 2.0em;
    background: #fffde0;
}

.cl_access h1 {
    text-align: center;
    font-size: 4.0rem;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.2em;
    margin-bottom: 1.0em;
}

.cl_access h1 span {
    display: block;
    font-size: 1.2rem;
    font-family: 'Noto Sans JP', sans-serif;
}

.cl_access address {
    background: white;
    border: 0px solid #ccc;
    padding: 1.0em;
    margin: 1.0em 0;
    font-size: 1.6rem;
}

.cl_access address span {
    display: block;
    font-size: 1.4rem;
}




/*サイドバー*/

.soj_sidebar {
    color: #eee;
    background: #3E3E3E;
}

.side_wrap {
    width: 95%;
    margin: 0 auto;
    padding: 4.0em 0px 35px;
    justify-content: space-between;
    align-items: flex-start;
}


.side_wrap ul.foot_menu {
    margin: 0;
    flex-wrap: wrap;
}

.side_wrap ul li {
    font-size: 1.3rem;
    line-height: 3.0;
}

.side_wrap ul li a,
.side_wrap ul li.ground_child,
.side_wrap ul li.f_child {
    color: #eee;
    font-weight: 600;
}

.side_wrap ul li.f_ground_child>ul {
    color: #eee;
    font-weight: 300;
    padding-left: 0em;
}

.side_wrap ul li.f_ground_child>ul:before {
    content: " - ";
    padding-left: 0px;
    padding-right: 3px;
}

.side_wrap ul li.f_ground_child>ul>li a,
.side_wrap ul li.f_child>ul li a {
    color: #eee;
    font-weight: 300;
}

.side_wrap ul li.f_ground_child>ul li,
.side_wrap ul li.f_child>ul {
    padding-left: 1.0em;
}


.side_wrap h2 {
    margin-bottom: 1.0em;
}

.side_wrap p {
    font-size: 1.3rem;
    line-height: 3.0em;
}

.side_wrap address {
    margin-top: 2.0em;
    font-size: 1.3rem;
    line-height: 2.0;
}

.side_wrap h2 img {
    width: 300px;
    height: auto;
}



.copyright {
    padding-top: 1.0em;
    color: #eee;
    text-align: center;
    background: #F5F5F5;
}

.copyright small {
    display: block;
    font-size: 1.2rem;
    color: #666;
    text-align: center;
    background: transparent;

}


/*------------------------------------*\
    Google Map
\*------------------------------------*/

.google-map {
    position: relative;
    width: 100%;
    /* 左右に余白が必要なら値を変更してもOK */
    height: 0;
    padding-bottom: 20.25%;
    /* padding-topでもOK */
    overflow: hidden;
}

.google-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 必要であれば!importantを付けてください */
    height: 100%;
    /* 必要であれば!importantを付けてください */
}




/*------------------------------------*\
    SNS
\*------------------------------------*/


.sns_box {
    display: flex;
    /*最新のブラウザ*/
    display: -webkit-box;
    /*レガシーCC*/
    display: -webkit-flex;
    /*Android2.3*/
    display: -ms-flexbox;
    /*IE9~用*/
    justify-content: center;
}

.sns_button {
    box-shadow: inset 0 0 0 2px #fff;
    border-radius: 100%;
    -moz-transition: all 280ms ease;
    -o-transition: all 280ms ease;
    -webkit-transition: all 280ms ease;
    transition: all 280ms ease;
}

.sns_button a {
    font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "MS Pgothic", knowledge-reg, helvetica, arial, sans-serif;
    display: table-cell;
    width: 44px;
    height: 44px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    -moz-transition: all 280ms ease;
    -o-transition: all 280ms ease;
    -webkit-transition: all 280ms ease;
    transition: all 280ms ease;
}

.sns_button i {
    font-size: 20px;
    vertical-align: middle;
}

.sns_button:hover {
    box-shadow: inset 0 0 0 22px #fff;
}

.sns_button+.sns_button {
    margin: 0 0 0 12px;
}

.twitter:hover a {
    color: #1B95E0;
}

.facebook:hover a {
    color: #3B5999;
}

.google:hover a {
    color: #dd4b39;
}

.instagram:hover a {
    color: #2b5c84;
}

.pocket:hover a {
    color: #EE4056;
}

#line img {
    width: 60%;
    height: auto;
}




/*------------------------------------*\
RESPONSIVE
- 〜599px：SP横まで
- 480px〜599px：SP横
- 600px〜959px：タブレット
- 600px〜：タブレット以上
- 〜959px：タブレット以下
- 960px〜：小型PC以上
- 960px〜1279px：小型PC
- 1280px〜：大型PC以上
\*------------------------------------*/



/* 〜999px：タブレット以下
------------------------------ */
@media screen and (max-width:999px) {


    /* 全体の調整 */

    section .contents {
        padding: 35px 2.0em 35px;
    }



    .mainvisual .bottom {
        border-top: #dd0000 0px solid;
        border-bottom: #dd0000 0px solid;
    }

    .pages .mainvisual .wrap {
        width: 100%;
    }

    .mainvisual .bottom .wrap .illust_03 {
        height: auto;
        position: absolute;
        bottom: 120%;
        left: 5%;
    }

    .mainvisual .bottom nav ul.g_menu {
        width: 90%;
        margin: 0 auto;
    }

    .mainvisual .bottom .wrap .copy_top {
        bottom: 0px;
    }

    .headline h2 span {
        font-size: 2.3rem;
    }


    .headline img {
        width: 100px;
    }



    /* ラインナップ */

    .cl_top_menu .contents ul.flex li {
        width: calc(100%/1);
        box-sizing: border-box;
        padding: 2.0em;
    }

    .cl_top_menu a.btn_detail {
        margin: 0 auto;
        display: block;
        width: 80%;
        padding: 1.4em 1.4em;
    }



    /* 見出し */




    .cl_top_06 .recruit_cap .contents img {
        width: 150px;
        height: auto;
        position: absolute;
        right: 5%;
        top: -4.0em;
    }

    .cl_top_06 .recruit img {
        height: 20.0em;
        object-position: top;
        /* ポジション設定 */
        object-fit: cover;
        /* モダンブラウザ用 画像トリミング */
        font-family: 'object-fit: cover;'

    }

    .cl_top_06 .recruit h2 span {
        font-size: 3.0rem;
    }

    .cl_top_06 .recruit_cap .contents h3 {
        font-size: 2.5rem;
        padding: 0 1.0em;
        text-align: center;
    }

    /* enstrusment */


    .enstrusment h3 {
        flex-basis: 100%;
    }

    .enstrusment div.flex {
        flex-direction: column;
    }


    /* SERVICE */


    .service h3 {
        flex-basis: 100%;
    }

    .service div.flex {
        flex-direction: column;
    }






    /* フッター */

    .side_wrap {
        flex-direction: column;
    }

    .sns_box {
        flex-basis: 100%;
    }

    .side_wrap ul.foot_menu {
        margin: 2.0em auto 0em;
        flex-wrap: wrap;
        justify-content: center;
    }





    /*------------------------------------*\
    Google Map
    \*------------------------------------*/

    .google-map {
        padding-bottom: 45.25%;
        /* padding-topでもOK */
    }



}

/* 600px〜999px：タブレット
------------------------------ */
@media screen and (min-width:600px) and (max-width:999px) {

    header .top h1,
    header .top p {
        padding-left: 0.5em;
    }

    header .top ul {
        /*width: 60%;*/
    }
}


/* 〜599px：SP横
------------------------------ */
@media screen and (max-width:599px) {


    .pages header .top.wrap p a img {
        margin-left: 0.5em;
    }


    .logo-img {
        width: 250px;
    }

    header .top ul {
        display: none;
    }

    section .middle .wrap h2 {
        font-size: 1.5rem;
    }

    .cl_infomation .contents .flex {
        flex-direction: column;
    }

    .cl_infomation .contents ul.news li a .title {
        width: 100%;
    }

    .cl_infomation .contents ul.news li a .icon {}

    .mainvisual .bottom .wrap a.mark01 {
        top: 30px;
        left: 50%;
        right: auto;
        transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
    }

    .mainvisual .bottom .wrap .mark01 img,
    .mainvisual .bottom .wrap .mark02 img {
        width: 80px;
    }

    .mainvisual .bottom .wrap .mark02 {
        top: 30px;
        left: 50%;
        right: auto;
        transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
    }


    .mainvisual .bottom .wrap .copy_top {
        top: auto;
        bottom: auto;
        left: 5%;
    }

    .mainvisual .bottom .wrap h2.copy_top,
    .mainvisual .bottom .wrap h1.copy_top {
        font-size: 3.0rem;
    }


    .mainvisual .bottom .wrap h1.copy_top.single {
        font-size: 2.3rem;
    }


    .mainvisual .bottom .wrap .copy_top span {
        display: block;
        padding-bottom: 0em;
    }

    .mainvisual .bottom .wrap .copy_top img.copy_top_ol {
        width: 250px;
    }

    .mainvisual .bottom .wrap .copy_top img.illust_02 {
        width: 320px;
    }

    .headline img {
        width: 100px;
    }



    /* 動画補正 */

    .front {
        height: 85vh;
    }



    /* ボーダー */


    section.border {
        margin: 1.0em 0 2.0em;
    }

    section.border.photo {
        margin: 7.0em 0 4.0em;
    }

    section.border .contents {
        padding: 35px 1.0em 35px;
    }


    /* 見出し・本文 */


    .cl_top_menu a.btn_detail {
        width: 100%;
    }

    .cl_top_01 .contents,
    .cl_top_04 .contents {}

    .cl_page .title01 {
        padding: 4.0em 1.0em;
    }


    /* CONCEPT */

    .concept_box01.flex {
        flex-direction: column;
    }

    .concept_box01 li:first-child {
        flex-basis: 100%;
    }

    .concept_box01 li:last-child {
        flex-basis: 100%;
    }

    .concept_box01 li .inner {
        padding-right: 0em;
    }


    .concept_box02 {
        flex-direction: column;
    }

    .concept_box02 li:first-child {
        flex-basis: 100%;
    }

    .concept_box02 li:last-child {
        flex-basis: 100%;
    }

    .concept_box02 li:last-child img {
        margin-top: 2.0em;
        position: static;
    }

    .concept_box02 li .inner {
        padding-left: 0em;
    }

  /* enstrusment */

    .enstrusment>.contents ul.flex {
        flex-direction: column;
        /* position: relative; */
    }

    .enstrusment>.contents ul.flex li:first-child {
        flex-basis: 100%;
    }

    .enstrusment>.contents ul.flex li:last-child {
        /* position: absolute; */
        top: 0;
    }
    .enstrusment .gallery div.flex{
        flex-wrap: wrap;
    }


    /* SERVICE */

    .service>.contents ul.flex {
        flex-direction: column;
        /* position: relative; */
    }

    .service>.contents ul.flex li:first-child {
        flex-basis: 100%;
    }

    .service>.contents ul.flex li:last-child {
        /* position: absolute; */
        top: 0;
    }


    .bg_stripe {
        margin: 0 0em;
        padding: 0 2.0em;
    }

    .cl_top_04 .contents {
        padding: 35px 0em 0px;
    }


    .cl_top_05 .contents {
        padding: 0px 0em 35px;
    }

    .bg_stripe .flex.panel {
        width: 100%;
    }

    .bg_stripe .flex.text_box {
        flex-direction: column;
        width: 100%;
    }

    .bg_stripe .flex.text_box p {
        padding-right: 0em;
    }

    .bg_stripe .flex.panel li {
        text-align: center;
    }

    .bg_stripe .flex.panel li svg {
        width: 90px;
        height: 90px;
    }

    .bg_stripe .flex.panel li h3 {
        width: 90px;
        height: 90px;
        padding: 0.5em;
        font-size: 1.5rem;
    }

    .bg_stripe .flex.panel li a:hover h3 {
        color: #000;
    }


    .sample_gallery {
        margin-bottom: 3.0em;
        margin-top: 1.0em;
        flex-wrap: wrap;
    }

    ul.sample_gallery li {
        flex-basis: 50%;
    }

    .sample_gallery h4 {
        text-align: center;
        font-weight: 600;
        font-size: 1.8rem;
    }



    /* ページ */


    .cl_page.reason .contents .box li:nth-child(2) {
        position: relative;
        z-index: 2;
        flex-basis: 100%;
        padding: 1.0em 1.5em 0;
    }

    .cl_page.reason .contents .box li:nth-child(1) {
        top: -20px;
    }

    .cl_page.reason .contents .box li:nth-child(1) img {
        width: 80%;
        opacity: 0.5;
    }

    .cl_page .contents.page_menu .flex li {
        flex-basis: 100%;
        padding: 0 1.5em;
    }


    .cl_page.jigyo .contents ul.box {
        flex-wrap: wrap;
    }

    .cl_page.jigyo .contents ul.box li:first-child img {
        opacity: 0.7;
        height: auto;
        object-position: top;
        object-fit: contain;
        font-family: 'object-fit: contain;'
            /* IE EDGE 用 */
        ;
    }

    .cl_page.jigyo h1 {
        font-size: 2.3rem;
    }

    .cl_page.jigyo .contents ul.box li:first-child {
        flex-basis: 100%;
    }

    .cl_page.jigyo .contents ul.box li:nth-child(2) {
        flex-basis: 100%;
    }


    .cl_page.jigyo_qa .contents ul li {
        flex-basis: 100%;
    }




    #page_03.cl_page.jigyo img {
        object-position: top;
        /* ポジション設定 */
        object-fit: cover;
        /* モダンブラウザ用 画像トリミング */
        font-family: 'object-fit: cover;';
        /* IE EDGE 用 */
        height: 300px;
    }

    #page_03.cl_page.jigyo h1 {
        font-size: 2.3rem;
    }

    #page_03.cl_page.jigyo {
        margin-bottom: 0em;
    }


    .pages .cl_top_01 {
        text-align: left;
    }

    .pages .cl_top_01 .contents ul {
        flex-direction: column;
    }

    .pages .cl_top_01 .contents p {
        padding-bottom: 0em;
    }

    .pages .cl_top_01 .contents ul li:first-child {
        margin-bottom: 1.0em;
    }



    /* 会社概要 */

    .cl_page.story .contents {
        margin: 0em auto .0em;
    }

    .cl_page.story02 .contents p {
        padding: 2.0em 1.0em 0;
    }

    .cl_page.story .contents .profile {
        padding: 3.0em 1.0em;
    }

    .cl_page.gaiyo .contents {
        padding: 3.0em 1.0em 5.0em;
        position: relative;
    }

    .cl_page.gaiyo .contents img {
        opacity: 0.2;
    }



    /* 求人情報 */


    .ac_menu img.fleft {
        display: none;
    }


    .cl_page.message .qabox {
        padding: 0 1.0em;
    }

    .cl_page.gaiyo .contents table th,
    .cl_page.gaiyo .contents table td {
        display: block;
        width: 100%;
    }

    .cl_page.gaiyo .contents table th {
        font-weight: 600;
        border-bottom: 1px solid #ccc;
    }


    .cl_page.story.recruit .contents .profile {
        width: 100%;
    }


    .cl_page.story .contents img.posimg01 {
        width: 100%;
        height: 400px;
        position: static;
        object-position: top;
        /* ポジション設定 */
        object-fit: cover;
        /* モダンブラウザ用 画像トリミング */
        font-family: 'object-fit: cover;'
            /* IE EDGE 用 */
    }

    .ac_menu__item__link h3 {
        font-size: 1.5rem;
        padding: 0.3em 1.0em 0.5em;
    }

    .ac_menu__item__link h3:before {
        width: 30px;
        height: 30px;
        background-image: url(../images/svg/icon_q.svg);
    }

    .ac_menu__item__link:after {
        line-height: 70px;
    }

    .cl_page.story .contents img.posimg02 {
        width: 40%;
        left: 2.0em;
        top: 2.0em;
    }


    .cl_page.story.recruit .contents img.posimg01 {}

    .cl_page.story .contents img.posimg02 {}

    .cl_page.story .contents .profile h2 {
        text-align: center;
        padding-top: 1.0em;
        margin-bottom: 2.0em;
    }




    /* ABOUT US */

    .about_box01.flex {
        flex-direction: column;
    }

    .about_box01.flex li:first-child {
        flex-basis: 100%;
    }

    .about_box01.flex li:last-child {
        flex-basis: 100%;
    }

    .about_box01.flex li:last-child p {
        max-width: 100%;
    }





    /* 問い合わせフォーム */

    .noticebox {
        margin-top: 2.0em;
    }

    .pages .cl_top_01 .contents .noticebox ul li:first-child {
        margin-bottom: 0em;
    }

    .noticebox ul li {}



    /* フッター */

    .side_wrap ul {
        padding: 0 2.0em;
    }

    .side_wrap address {
        margin-top: 1.0em;
        margin-bottom: 2.0em;
    }


    /* リンク */
    a.morelink02 {
        background: #000000;
        display: block;
        width: 150px;
        text-align: center;
        font-size: 1.4rem;
        border: 1px solid #000000;
        padding: 1.0em 1.5em;
        color: #ffffff;
        margin: 2.0em 0 0 auto;
        border-radius: 10px;
        /* CSS3草案 */
        -webkit-border-radius: 10px;
        /* Safari,Google Chrome用 */
        -moz-border-radius: 10px;
        /* Firefox用 */
    }


}


/* 600px〜768px：SP以上〜タブレット縦
------------------------------ */
@media screen and (min-width:600px) and (max-width:768px) {

    .mainvisual .bottom .wrap h2.copy_top,
    .mainvisual .bottom .wrap h1.copy_top {
        margin: 0.5em;
        font-size: 3.5rem;
        line-height: 1.3;
        color: #dd0000;
    }

    .mainvisual .bottom .wrap .copy_top {
        left: 5%;
    }

    .headline {
        margin-top: 2.0em;
    }

    .headline .illust_02 img {
        width: 280px;
    }


}



/* 600px〜999px：タブレット
------------------------------ */
@media screen and (min-width:600px) and (max-width:999px) {


    .pages .mainvisual h2.title_about.jigyo span {
        font-size: 3.0rem;
    }

    .cl_jigyo_intro .center {
        padding: 0 2.0em;
    }

    .cl_about_riyu .riyubox,
    .cl_jigyo_flow .flowbox {
        padding: 0 0.5em;
    }


    /* 問い合わせフォーム */

    .noticebox,
    .noticebox02 {
        padding: 0 1.0em;
    }

    .noticebox p,
    .noticebox02 p {
        font-size: 1.3rem;
        font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "MS Pgothic", knowledge-reg, helvetica, arial, sans-serif;
        text-align: left;
    }

    .noticebox ul li {
        font-size: 1.3rem;
        font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "MS Pgothic", knowledge-reg, helvetica, arial, sans-serif;
        text-align: left;
    }

    .noticebox,
    .noticebox02 {
        text-align: left;
    }


}

/* 600px〜：タブレット以上
------------------------------ */
@media screen and (min-width:600px) {


    .cl_page h2 {
        text-align: center;
    }


}


/* 768px〜：タブレット以上
------------------------------ */
@media screen and (min-width:600px) {}


/* 1000px〜：小型PC以上
------------------------------ */
@media screen and (min-width:1000px) {

    header .top.wrap {
        max-width: 1000px;
        width: 100%;
    }

    section .contents {
        max-width: 1000px;
        width: 95%;
        margin: 0 auto;
    }

    .side_wrap {
        width: 1000px;
        margin: 0 auto;
    }

    .mainvisual .bottom nav ul li {
        width: auto;
    }


    .cl_page .title02 {
        max-width: 1000px;
        width: 100%;
        margin: 0 auto;
    }

    .cl_page .contents.page_menu {
        max-width: 1000px;
        width: 100%;
        padding: 3.0em 1.0em 5.0em;
    }


}

/* 960px〜1279px：小型PC
------------------------------ */
@media screen and (min-width:960px) and (max-width:1279px) {

    .mainvisual .bottom .wrap .illust_03 {
        bottom: 120%;
    }

    .pages .mainvisual h2.title_about.jigyo span {
        font-size: 3.0rem;
    }


}

/* 1280px〜：大型PC
------------------------------ */
@media screen and (min-width:1280px) {

    .mainvisual .bottom .wrap {
        width: 1000px;
    }

    .headline img {
        width: 100px;
    }

    .headline .illust_02 img {
        width: 450px;
    }


}


/* 〜320px：SP横
------------------------------ */
@media screen and (max-width:320px) {

    .mainvisual .bottom .wrap .copy_top {
        top: -150px;
        bottom: auto;
        left: 5%;
    }

    .pages .mainvisual .bottom .wrap a.mark01 {
        top: 95px;
    }

    .pages .mainvisual img.logo_about {
        width: 200px;
        height: auto;
    }

    .mainvisual .bottom .wrap .mark01 img {
        width: 80px;
    }

    .pages .mainvisual h2.title_about.jigyo span {
        font-size: 1.8rem;
    }

    .mainvisual .bottom .wrap .illust_03 {
        height: auto;
        position: absolute;
        bottom: 110%;
        left: 5%;
    }

    .mainvisual .bottom .wrap .illust_03 span {
        line-height: 1.5;
    }

    .mainvisual .bottom .wrap .illust_03 img {
        width: 60px;
    }


    /*フッター 4インチ対応*/



    /*求人情報 4インチ対応*/

    .cl_page.message .photo_img {
        width: 200px;
        height: 200px;
    }

    .ac_menu__item__link h3 {
        line-height: 2.0;
        font-size: 1.5rem;
        padding: 1.0em 1.0em 0.8em;
    }

}

/* sle */

.samle_table-sle img {
    max-width: 100%;
    padding: 10px;
}

img.st-sle_img {
    max-width: 100%;
    padding: 5px 0;
}

/* sle */


/*------------------------------------*\
サンプル 2304以降
\*------------------------------------*/
.anchorBOX {
    width: 80%;
    justify-content: space-evenly;
    margin: 3.0em auto;
    flex-wrap: wrap;
}

.anchorBOX li {
    text-align: center;
    width: 150px;
    margin: 1rem;
}

.anchorBOX li a .inner {
    position: relative;
}

.anchorBOX li h2 {
    padding: 0.5em;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 3;
}

.sample {
    padding-top: 1rem;
}

.sample_even {
    background-color: #e5e5e5;
    padding-top: 1rem;
}


.sample .contents h3 {
    background-color: #8BD4E2;
    padding: 0.5em;
    font-size: 2.5rem;
    color: #fff;
    font-weight: bold;
    margin-bottom: 1.3em;
}

.sample_listbox {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.sample_table {
    background-color: #fff;
    margin-bottom: 2rem;
}

.sample_table td {
    padding: 1rem;
    border: 1px solid rgb(112, 112, 112);
    font-size: 1.5rem;
}

.sample_table tr:nth-child(2) {
    height: 25vh;
}

.table_30 {
    width: 30%;
}

.table_95 {
    width: 95%;
}

.sample_sidebar {
    position: fixed;
    font-size: 1.3rem;

    bottom: 100px;
    right: 10px;
    width: 130px;
    display: none;

}

.sample_sidebar li {
    border: 1px solid grey;
    background-color: #fff;
    margin-bottom: 0.5rem;
    padding: 0.5rem;

}

/* 〜599px：SP
------------------------------ */
@media screen and (max-width:599px) {

    .sample .anchorBOX {
        margin-top: 3em;
        width: 100%;
    }

    .sample .anchorBOX li {
        width: 130px;
    }

    .table_30 {
        width: 95%;
    }

}

/*------------------------------------*\
サンプル2304以前
\*------------------------------------*/

.sample04 {
    background-color: #8BD4E2;
    position: relative;
    z-index: -2;
}

.sample04 .bgimg {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.sample04 h2 {
    font-size: 2.8rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 3em 0 0.5em 0;
}

.sample04 .arrow {
    text-align: center;
    margin-bottom: 3em;
}

.sample04 .baloon {
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.sample04 .baloon li {
    margin-bottom: 3.0em;
}

.sample04 .baloon li:nth-last-child(-n+2) {
    margin-bottom: 4.0em;
}

.sample04 .person {
    width: 10%;
    margin-right: 5%;
}

.sample04 .chatting {
    width: 85%;
}

.sample04 .chatting .arrow_box {
    position: relative;
    width: 100%;
    height: auto;
    background: #fff;
    padding: 1.5em;
    text-align: left;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
}

.sample04 .chatting .arrow_box:after {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    border-color: rgba(90, 230, 40, 0);
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 17px;
    border-right-width: 17px;
    margin-top: -10px;
    border-right-color: #fff;
    right: 100%;
    top: 50%;
}

.sample04 .chatting .arrow_box h3 {
    border-bottom: 2px solid #4CA8BA;
    font-size: 2.2rem;
    font-weight: bold;
    padding-bottom: 0.3em;
    margin-bottom: 0.5em;
}


/* ?599px：SP
------------------------------ */
@media screen and (max-width:599px) {

    #page.sample .sample04 {
        margin-bottom: 3em;
    }

    #page.sample .sample04 .contents {
        padding-bottom: 3em;
        padding-top: 3em;
    }

    .sample .sample04 .bgimg {
        width: 50%;
    }

    .sample .sample04 h2 {
        font-size: 2.2rem;
        margin: 0 0 0.5em 0;
        padding: 0;
    }

    .sample .sample04 .arrow {
        text-align: center;
        margin-bottom: 2em;
    }

    .sample .sample04 .arrow img {
        margin-bottom: 0;
        width: 10%;
    }

    .sample .sample04 .baloon {
        display: block;
    }

    .sample .sample04 .baloon li {
        margin-bottom: 0.5em;
        ;
    }

    .sample .sample04 .baloon li:nth-last-child(-n+2) {
        margin-bottom: 0.5em;
    }

    .sample .sample04 .person {
        width: 100%;
        margin-right: 0;
        text-align: center;
    }

    .sample .sample04 .person img {
        width: 30%;
    }

    .sample .sample04 .chatting {
        width: 100%;
    }

    .sample .sample04 .chatting:nth-last-child(n+1) {
        margin-bottom: 3em;
    }


    .sample .sample04 .chatting .arrow_box:after {
        visibility: hidden;
    }

    .sample .sample04 .chatting .arrow_box h3 {
        font-size: 2rem;
    }

}


/*------------------------------------*\
超音波ミーリングチャック
\*------------------------------------*/
#page .millingchuck{
    margin-bottom: 3rem;
}

#page .millingchuck h3 {
    font-size: 2.2rem;
    font-weight: bold;
    text-align: center;

}
#page .millingchuck h3 span{
    color:#e50012;
}

#page .millingchuck .millingchuck_imgflex{
    display: flex;
    margin-bottom: 1rem;
}

#page .millingchuck .millingchuck_imgflex .imgflex_item{ 
    width: 50%;
    text-align: center;
}

#page .millingchuck .millingchuck_imgflex iframe{
    padding: 1rem;
}


#page .millingchuck .spec{
    margin-bottom: 1rem;
}



/* 〜599px：SP
------------------------------ */
@media screen and (max-width:599px) {
    #page #millingchuck {
        margin: 3em 0;
    }
    #page .millingchuck .millingchuck_imgflex{
        display: block;
    }
    #page .millingchuck .millingchuck_imgflex .imgflex_item{ 
        width: 100%;
    }

}

/*------------------------------------*\
先輩の声
\*------------------------------------*/

#page.senior .senior01 .contents  {
    margin-bottom: 6.0em;
}

#page.senior .senior01 .contents .seniorvoice {
    margin: 0 auto 6.0em auto;
    width: 90%;
}

#page.senior .senior01 .contents .seniorvoice .senior-main{
    margin: 0 auto 3.0rem auto;
    width: 80%;
}

#page.senior .senior01 .contents .seniorvoice .senior-contents .senior-contents-title{
    font-weight: bold;
    font-size: 2rem;
    margin: 2rem 0 1rem 0;
	padding-left:1rem;
	border-left:5px solid;
}

#page.senior .senior01 .contents .seniorvoice .senior-contents .senior-contents-subtitle{
    text-indent: 1rem;
    margin-bottom: 1rem;
	color:#D45A4C;
	font-size:2rem;
	font-weight:bold;
}

#page.senior .senior01 .contents .seniorvoice .senior-contents .senior-contents-txt{
    text-indent: 1rem;
    margin-bottom: 1rem;
}


/* 〜599px：SP
------------------------------ */
@media screen and (max-width:599px) {
    page.senior .senior01 .contents  {
        margin-top: 3em;
    }
}

.youtubeBox li{
	width:50%;
}
.youtube_embed{
	width: 98%;
    margin: 5px;
    height: auto;
    aspect-ratio: 16 / 9;
}
@media screen and (max-width: 599px){
	.youtubeBox{
		display:block;
	}
	.youtubeBox li{
	width:100%;
}
}

/*------------------------------------*\
材料別特性
\*------------------------------------*/
section.material{
    .contents{
        .material_caption{
            font-size: 2rem;
            border-bottom: 1px solid #D1594D;
            text-align: center;
            h3{
                font-size: 2.5rem;
            }
        }
        .material_listbox{
            padding: 1em;
            .material_title{
                font-size: 1.2em;
            }
            .material_itemlist{
                margin-left:1em;
                list-style-type: decimal;
                .material_item{
                    margin-bottom: 1em;
                    .material_itemtitle{
                        font-size:1.1em;
                    }
                }
            }
        }
    }

}
/* 〜599px：SP
------------------------------ */
@media screen and (max-width:599px) {

}

/*------------------------------------*\
資料ダウンロード
\*------------------------------------*/
section.download{
    margin-bottom: 5em;
    .contents{
        h3{
            font-size: 1.8rem;
            font-weight: bolder;
            text-align: center;
            margin-bottom: 2em;
        }
        .text{
            margin:2em auto;
        }
        .link{
            padding: 1em;
            @media (max-width:599px) {
                display: block;
            }
            li{
                text-align: center;
                border:1px solid #ffa423;
                color: #ffa423;
                margin: 2rem auto;
                padding: 1.5rem;
                width: 70%;
                position: relative;
                @media (max-width:599px) {
                    width: 100%;
                }
                a.btn::after{
                    content: url(../img/icon-download.svg);
                    width: 20px;
                    height: 20px;
                    right: 10px;
                    top: 50%;
                    position: absolute;
                    margin-top: -10px; 
                }
            }

        }
    }

}

/*------------------------------------*\
資料ダウンロードへの誘導ボタン
\*------------------------------------*/
.download-btn {
    color: white;
    font-weight: bold;
    line-height: 5rem;
    font-size: 2rem;
}

.download-btn>span {
    color: #d44114;
    background-color: white;
    padding: .5rem;
    font-size: 1.3rem;
    border-radius: .5rem;
}

.download-btn-wrap {
    text-align: center;
    background-color: #d44114;
    width: 40%;
    margin: 0 auto;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 3px 0 #912b0b;
}

.download-btn:hover{
    color:white;
}

@media screen and (max-width:599px) {
    .download-btn-wrap {
        width: 90%;
    }
}

/*------------------------------------*\
資料ダウンロードフォーム
\*------------------------------------*/
section.dl_form{
    margin: 3em 0;
    .contents{
        h3{
            font-size: 1.8rem;
            font-weight: bolder;
            text-align: center;
            margin-bottom: 2em;
        }
        p{
            margin-bottom: 1em;
        }
        .form{
            margin-top: 2em;
        }
    }

}