@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap");

#wrapper {
    min-width: 320px;
}

.text {
    line-height: 1.7;
}

.fead-right {
    opacity: 0;
    -webkit-transform: translateX(-20%);
    transform: translateX(-20%);
}

.fead-right.mv {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: 1s;
    transition: 1s;
}

[data-element-id] .fead-right {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* ##### reset.css上書き ##### */
.more {
    text-align: center;
    margin: 50px auto 0 auto;
    width: 80%;
    max-width: 300px;
    border: solid 1px #eeeeee;
}

.more a {
    display: block;
    background: #fff;
    color: #000;
    padding: 10px 20px;
}

h3 {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 0 5px;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
input,
button,
p {
    font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    line-height: 150%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

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

a,
button {
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
}

.underline a {
    text-decoration: underline;
}

@media (max-width: 1024px) {
    h3 {
        font-size: 20px;
    }
}

@media(max-width: 599px) {
    h3 {
        font-size: 18px;
        margin-bottom: 30px;
    }
}

/* ##### reset.css上書きここまで ##### */

/* ##### 共通ボタン設定 ##### */
.btn_details {
    max-width: 250px;
    width: 80%;
    margin-top: 70px;
    margin-left: auto;
    margin-right: auto;
}

.btn_details a {
    width: 100%;
    height: 100%;
    font-size: 18px;
    background: #020c3c;
    padding: 20px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    display: block;
    text-align: center;
}

.btn_details_hw a {
    background: #fff;
}

.btn_details_hw a {
    color: #000;
}

.btn_m0 {
    margin-top: 0;
}

.btn_m30 {
    margin-top: 30px;
}

@media (max-width: 1024px) {
    .btn_details {
        max-width: 200px;
        margin-top: 20px;
    }

    .btn_details a {
        padding: 10px 0;
    }
}

@media (max-width: 599px) {
    .btn_details {
        margin-top: 20px;
    }

    .btn_details a {
        font-size: 14px;
    }
}

/* ##### 共通 ##### */
.back_fff {
    background: #fff;
}

.inner {
    width: 92%;
    max-width: 1000px;
    margin: 0 auto;
}

.sp-only {
    display: none;
}

.tex {
    line-height: 30px;
}

.tc {
    text-align: center;
}

.georgia {
    font-family: 'Georgia';
}

.tit {
    color: #326d96;
}

.tit a {
    color: #326d96;
}

.tline {
    position: relative;
}

.tline:after {
    content: "";
    position: absolute;
    background: rgb(93, 135, 183);
    width: 34px;
    height: 5px;
    left: 5%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    bottom: -10px;
}

.tline_bottom {
    position: relative;
    text-align: center;
}

.tline_bottom.border:after {
    content: "";
    position: absolute;
    /* border-bottom: solid 5px #326d96; */
    border-bottom: solid 5px #1F2C5D;
    width: 35px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    bottom: -10px;
}



.back-bt,
.more-bt {
    max-width: 200px;
}

.back-bt a {
    border: #326d96 solid 1px;
    color: #326d96;
}

.more-bt a {
    border: #326d96 solid 1px;
    color: #326d96;
    max-width: 200px;
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb50 {
    margin-bottom: 50px;
}

.mt50 {
    margin-top: 50px;
}

.pt50 {
    padding-top: 50px;
}

.pb50 {
    padding-bottom: 50px;
}

.mt80 {
    margin-top: 80px;
}

.mb80 {
    margin-bottom: 80px;
}

.tac {
    text-align: center;
}

.tac-tal {
    text-align: center;
}

.space-80 {
    padding: 80px 0;
}

.space-50 {
    padding: 50px 0;
}

.space-30 {
    padding: 30px 0;
}

.space-0 {
    padding: 0;
}

.space-top-80 {
    padding-top: 80px;
}

.space-top-50 {
    padding-top: 50px;
}

.space-top-30 {
    padding-top: 30px;
}

.space-bottom-80 {
    padding-bottom: 80px;
}

.space-bottom-60 {
    padding-bottom: 60px;
}

.space-bottom-50 {
    padding-bottom: 50px;
}

.space-bottom-30 {
    padding-bottom: 30px;
}

.z1 {
    z-index: 1;
    position: relative;
}

.z2 {
    z-index: 2;
    position: relative;
}

.z3 {
    z-index: 3;
    position: relative;
}

.h-100\% {
    height: 100%;
}

.w500box {
    max-width: 500px;
}

.overlap {
    max-width: calc(500px + 5%);
    z-index: 1;
    position: relative;
}

.center-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.alternate-box:nth-of-type(odd) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.alternate-box:nth-of-type(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.alternate-box:nth-of-type(odd) .w500box {
    margin-left: auto;
}

.alternate-box:nth-of-type(odd) .overlap {
    margin-right: -5%;
}

.alternate-box:nth-of-type(even) .w500box {
    margin-left: 0;
    margin-right: auto;
}

.alternate-box:nth-of-type(even) .overlap {
    margin-left: -5%;
    margin-right: auto;
}

.shift-box .box:nth-of-type(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.shift-box .box:nth-of-type(odd) .box-cont {
    padding-left: 4%;
}

.shift-box .box:nth-of-type(even) .box-cont {
    padding-left: 0;
    padding-right: 4%;
}

.shift-box-rowr .box:nth-of-type(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.shift-box-rowr .box:nth-of-type(odd) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.shift-box-rowr .box:nth-of-type(odd) .box-cont {
    padding-left: 0;
    padding-right: 4%;
}

.shift-box-rowr .box:nth-of-type(even) .box-cont {
    padding-left: 4%;
    padding-right: 0;
}

.white-box {
    padding: 50px 30px;
    background: rgba(255, 255, 255, 0.8);
}

@media (max-width: 1024px) {
    .tline:after {
        left: 2%;
        -webkit-transform: none;
        transform: none;
    }

    .sp-only {
        display: block;
    }

    .pc-only {
        display: none;
    }

    .space-80\@tb {
        padding: 80px 0;
    }

    .space-50\@tb {
        padding: 50px 0;
    }

    .space-30\@tb {
        padding: 30px 0;
    }

    .space-0\@tb {
        padding: 0;
    }

    .space-top-80\@tb {
        padding-top: 80px;
    }

    .space-top-50\@tb {
        padding-top: 50px;
    }

    .space-top-30\@tb {
        padding-top: 30px;
    }

    .space-bottom-80\@tb {
        padding-bottom: 80px;
    }

    .space-bottom-50\@tb {
        padding-bottom: 50px;
    }

    .space-bottom-30\@tb {
        padding-bottom: 30px;
    }
}

@media (max-width: 599px) {
    .tac-tal {
        text-align: left;
    }

    .mb80 {
        margin-bottom: 50px;
    }

    .space-80\@sp {
        padding: 80px 0;
    }

    .space-50\@sp {
        padding: 50px 0;
    }

    .space-30\@sp {
        padding: 30px 0;
    }

    .space-0\@sp {
        padding: 0;
    }

    .space-top-80\@sp {
        padding-top: 80px;
    }

    .space-top-50\@sp {
        padding-top: 50px;
    }

    .space-top-30\@sp {
        padding-top: 30px;
    }

    .space-bottom-80\@sp {
        padding-bottom: 80px;
    }

    .space-bottom-50\@sp {
        padding-bottom: 50px;
    }
    
    .space-bottom-40\@sp {
        padding-bottom: 40px;
    }

    .space-bottom-30\@sp {
        padding-bottom: 30px;
    }

    .alternate-box:nth-of-type(odd) .w500box {
        margin-left: auto;
    }

    .alternate-box:nth-of-type(odd) .overlap {
        margin-right: auto;
    }

    .alternate-box:nth-of-type(even) .w500box {
        margin-left: auto;
        margin-right: auto;
    }

    .alternate-box:nth-of-type(even) .overlap {
        margin-left: auto;
        margin-right: auto;
    }

    .shift-box .box-img,
    .shift-box .box-cont {
        width: 100%;
        margin: 0;
    }

    .shift-box .box-cont {
        padding: 30px 10px;
    }

    .white-box {
        padding: 30px 10px;
    }
}

/* ##### 共通ここまで ##### */

/* ##### header ##### */
header {
    padding: 10px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

header .inner {
    padding: 0;
}

header li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 1024px) {
    header .header-info {
        display: none;
    }

    header li {
        width: calc(100% - 42px);
    }
}

/* ##### header end ##### */

/* ##### 固定バナー ##### */
.footfix {
    display: none;
    background: rgba(36, 36, 36, 0.9);
    padding: 5px 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 4;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
}

.footfix>div>div>ul {
    height: 100%;
}

.footfix .tel a {
    color: #fff;
    display: block;
    font-size: 22px;
    font-weight: bold;
    position: relative;
    text-align: center;
}

.footfix .contactbtn {
    width: 48%;
    margin: 1%;
    background: #326d96;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.footfix .contactbtn a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    padding: 5px 10px;
}

.footfix li a:before {
    display: block;
    content: "\f095";
    font-family: fontawesome;
    font-size: 22px;
    font-weight: normal;
    line-height: 1.2;
    margin-right: 5px;
}

@media (max-width: 1024px) {
    .footfix {
        display: block;
    }
}

@media (max-width: 599px) {
    .footfix .contactbtn a {
        font-size: 15px;
        padding: 5px;
    }
}

/*ABテスト（Bタイプ設定、一時的にdisplay: none;）*/
.footfix .b-type .contactbtn {
    background: #fff;
}

.footfix .b-type .contactbtn a {
    color: #326d96;
}

.footfix .web-icon a:before {
    display: block;
    content: "\f0c6";
    font-family: fontawesome;
    font-weight: normal;
    line-height: 1.2;
}

.footfix .mail-icon a:before {
    display: block;
    content: "\f0e0";
    font-weight: normal;
    font-family: fontawesome;
    line-height: 1.2;
}

/* ##### 固定バナー end ##### */

/* ##### footer ##### */
footer {
    padding: 80px 0 0 0;
    position: relative;
}

footer .footer_box {
    background: rgba(255, 255, 255, 0.6);
    padding: 80px 50px;
    z-index: 2;
    position: relative;
}

.footer-logo {
    width: 250px;
    max-width: 80%;
    margin: 0 auto 30px auto;
}

footer .footer_inner li+li {
    margin-top: 30px;
}

footer .footer_address {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

footer .footer-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

footer .footer-info+.footer-info {
    margin-top: 15px;
}

footer .footer-info dt {
    background: #76756d;
    color: #fff;
    padding: 3px 10px;
    margin-right: 10px;
    margin-left: 10px;
}

footer .footer-info dd {
    padding-top: 5px;
}

footer .back_g {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

footer .back_g::before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

footer .copy {
    width: 100%;
    background: rgb(31 44 93);
    color: #fff;
    margin-top: 80px;
    padding: 10px 10px;
    z-index: 2;
    position: relative;
}

.footer_box .mailaddress a {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    background: #326D96;
    text-align: center;
    color: #fff;
    font-weight: bold;
    padding: 10px 0;
    display: block;
}

.side-banar {
    position: fixed;
    right: 0;
    top: 30%;
    z-index: 100;
    width: 80px;
    background: #1F2C5D;
    border-radius: 10px 0 0 10px;
}

.side-banar .text {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    margin: auto;
    padding: 20px 0;
}

.side-banar a {
    color: #fff;
    display: block;
}

[data-element-id] .side-banar {
    position: static;
}

@media only screen and (max-width: 1024px) {
    .side-banar {
        display: none;
    }

    footer {
        padding-top: 50px;
    }

    footer .footer_box {
        padding: 50px 30px;
    }

    .footer-logo {
        width: 220px;
    }

    footer .footer_inner li+li {
        margin-top: 20px;
    }

    footer .copy {
        margin-top: 50px;
        padding-bottom: 70px;
    }
}

@media only screen and (max-width: 599px) {
    footer .footerin {
        padding-top: 20px;
    }

    footer .footer_inner {
        width: 100%;
    }

    footer .logo_img {
        width: 140px;
    }
}

/* ##### footer end ##### */

/* ##### nav ##### */
#gnav {
    width: 100%;
    padding: 20px 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#gnav .toggle {
    background: rgb(93, 135, 183);
}

#gnav li {
    margin-bottom: 12px;
}

#dropmenu {
    width: 100%;
    max-width: 1000px;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: auto;
}

#dropmenu li {
    margin: 5px 20px;
}

#dropmenu li a {
    letter-spacing: 1px;
    font-size: 18px;
}

#dropmenu .dropdown>a {
    pointer-events: none;
}

#dropmenu li a:hover {
    opacity: 1;
}

#dropmenu li a {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

#dropmenu li a:after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: '';
    width: 100%;
    height: 5px;
    background: rgb(93, 135, 183);
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
}

#dropmenu li a:hover::after {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}

#gnav li.reservation a {
    background: #eeeeee;
}

#dropmenu li.index-link span {
    display: none;
}

#dropmenu span.drop-btn {
    letter-spacing: 1px;
    font-size: 18px;
    display: block;
    text-align: left;
    border: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    font-weight: bold;
}

#dropmenu span.drop-btn:after {
    content: "\f0d7";
    position: absolute;
    font-family: fontawesome;
    color: #ed6f92;
    font-size: 14px;
    bottom: -20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.dropmenu {
    *zoom: 1;
}

.dropmenu .dropdown {
    position: relative;
}

#dropmenu .dropdown:hover {
    cursor: pointer;
}

.dropmenu .dropdown ul {
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    z-index: 9999;
    top: 100%;
    left: 50%;
    width: 200px;
    display: block;
    padding-top: 20px;
}

[data-element-id] .dropmenu .dropdown ul {
    position: static;
    -webkit-transform: none;
    transform: none;
}

#dropmenu .dropdown ul li {
    overflow: hidden;
    width: 100%;
    height: 0;
    -webkit-transition-property: all;
    -webkit-transition: 0.3s linear;
    transition-property: all;
    transition: 0.3s linear;
    width: 200px;
    margin-left: 0;
}

#dropmenu .dropdown ul li a {
    display: block;
    color: #000;
    width: 210px;
    height: 100%;
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #eee;
}

#dropmenu .dropdown:hover ul li {
    overflow: visible;
    height: auto;
}

.sab-nav {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200px;
}

.sab-nav li a {
    width: 100%;
}

#dropmenu .sp-only {
    display: none;
}

#gnav.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background: #fff;
    -webkit-box-shadow: 0px 4px 2px -2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 4px 2px -2px rgba(0, 0, 0, 0.2);
}



@media (max-width: 1024px) {
    #dropmenu {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        overflow-y: scroll;
    }

    #gnav {
        width: 65%;
        height: 100%;
        background: white;
        -webkit-box-shadow: 1px 0px 1px black;
        box-shadow: 1px 0px 1px black;
        -webkit-transform: translate(100%, 0);
        transform: translate(100%, 0);
        -webkit-transition: .3s;
        transition: .3s;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 6;
    }

    .active #gnav {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .overlay {
        display: block;
        width: 0;
        height: 0;
        background-color: transparent;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .active .overlay {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 5;
    }

    #gnav .accordion-inner {
        height: 100vh;
    }

    .accordion-inner .sns li {
        display: inline-block;
    }

    #dropmenu {
        width: 100%;
        display: block;
        padding-bottom: 80px;

    }

    #dropmenu li {
        margin: 0;
    }

    #dropmenu li a:after {
        content: none;
    }

    #gnav ul li span {
        height: auto;
        color: #fff;
        background-color: rgba(255, 255, 255, 0.2);
        display: block;
        padding: 10px;
    }

    .dropmenu .dropdown>a {
        display: none !important;
    }

    .dropmenu .dropdown ul {
        /* border-top: 1px solid #ddd; */
        position: static;
        background-color: rgba(78, 69, 64, 0);
        -webkit-transform: none;
        transform: none;
        width: 100%;
        padding-top: 0;
    }

    #dropmenu .dropdown ul li {
        overflow: visible;
        width: 100%;
        height: auto;
    }

    #dropmenu .dropdown ul li:last-of-type {
        border-bottom: none;
    }

    #dropmenu .dropdown ul li a {
        background-color: rgba(78, 69, 64, 0);
        /* color: #fff; */
        padding: 10px 15px;
    }

    #dropmenu li.index-link img {
        display: none;
    }

    #gnav ul li.index-link span {
        display: block;
        background: none;
    }

    #dropmenu span.drop-btn {
        color: #fff;
    }

    #dropmenu span.drop-btn:after {
        content: none;
    }

    #dropmenu .dropdown:hover ul li {
        height: auto;
        width: 100%;
    }

    #gnav.fixed {
        left: auto;
    }

    #gnav {
        padding: 0;
    }

    #dropmenu .sp-only {
        display: block;
    }

}

@media (max-width: 599px) {
    #gnav {
        width: 80%;
    }

    #gnav ul li a {
        font-size: 14px;
        line-height: 1.4;
    }
}

/* ##### nav end ##### */

/* ##### top ##### */
/* トップメインイメージ */

.mainimg {
    position: relative;
}

.mainimg .slid-logo {
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    border: solid 2px #fff;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 5% 3%;
}

.slid-logo span {
    max-width: 300px;
}

.mainimg .uk-slidenav-position:after {
    padding-top: 40%;
}

.mainimg .uk-slideshow {
    width: 100%;
    height: 100% !important;
}

.mainimg .uk-slideshow li,
.mainimg .uk-slideshow li div {
    height: 100% !important;
}

.mainimg .uk-slideshow li div img {
    width: 100%;
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    font-family: 'object-fit: cover; object-position: center center;';
}

.index .mainimg .mv_logo_box {
    width: 30%;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.4);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

@media (max-width: 1024px) {
    .mainimg .uk-slidenav-position::after {
        padding-top: 60%;
    }

    .index .mainimg .mv_logo_box {
        width: 40%;
        padding: 30px 20px;
    }
}

@media (max-width: 599px) {
    .mainimg .uk-slidenav-position::after {
        padding-top: 100%;
    }

    .index .mainimg .mv_logo_box {
        width: 55%;
        padding: 20px 10px;
    }
}

/*top-concept*/
.top-concept .box-inner {
    width: 48%;
}

@media (max-width: 599px) {
    .top-concept .box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .top-concept .box .box-inner {
        width: 100%;
    }
}

/*top-service*/
.top-service {
    position: relative;
}

.top-service h3 {
    color: #fff;
    text-align: center;
}

.top-service .title_text {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 15px;
}

.top-service .back_g {
    width: 100%;
    height: 100%;
    background: #465390;
    position: absolute;
    top: 0;
    left: 0;
}

.top-service .back_g .img {
    height: 100%;
}

.top-service .back_g img {
    opacity: 0.3;
}

.top-service .service_box .box {
    width: calc(94% / 3);
    margin: 1%;
}

.top-service .service_box .box .wrap,
.top-service .service_box .box a {
    display: block;
    height: 100%;
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
}

.top-service .service_box .service_icon {
    width: 35%;
    margin: 0 auto;
    padding: 20px;
    margin: 20px auto 15px;
    background: #eee;
    overflow: hidden;
    border-radius: 100%;
}

@media (max-width: 1024px) {
    .top-service .service_box .service_icon {
        width: 30%;
        padding: 15px;
        margin: 10px auto 10px;
        background: #eee;
        overflow: hidden;
        border-radius: 100%;
    }

    .top-service .title_text {
        font-size: 14px;
    }

    .top-service .details_text {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .top-service .service_box .box {
        width: 48%;
    }

    .top-service .service_box .box .wrap,
    .top-service .service_box .box a {
        padding: 10px;
    }
}

@media (max-width: 599px) {
    .top-service .service_box .box {
        width: 80%;
        margin: 10px auto;
    }
}

/*top-pickup*/
@media (max-width: 599px) {
    .top-pickup .shift-box .img {
        width: 100%;
    }

    .top-pickup .shift-box .text_box {
        width: 100%;
    }

    .top-pickup .shift-box .text_box .text {
        padding: 0 30px;
    }
}

/*top-project*/
.top-project .project_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.top-project .project_box .box {
    width: calc(94% / 3);
    margin: 1%;
}

.top-project .title_box {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.top-project .btn_details {
    margin: 0;
}

.top-project a {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 1024px) {
    .top-project .project_box .box {
        width: calc(96% / 2);
    }
}

/*top-news*/
.top-news ul {
    margin: 0 auto;
    margin-top: 30px;
}

.top-news li a {
    display: block;
}

.top-news dd {
    width: calc(100% - 90px);
}

/*top-pickup_banner*/
.top-pickup .title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
}

.top-pickup h3 {
    border-left: 4px solid #000;
    padding-left: 35px;
}

.top-pickup ul li+li {
    margin-top: 100px;
}

.top-pickup_banner {
    background: rgba(93, 135, 183, 0.2);
}

.top-pickup_banner .banner_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.top-pickup_banner .banner_box a {
    width: 100%;
    height: 100%;
    display: block;
}

.top-pickup_banner .banner_box .box {
    width: calc(96% / 2);
    margin: 1%;
    background: #000;
    position: relative;
}

.top-pickup_banner .banner_box .box img {
    opacity: 0.7;
}

.top-pickup_banner .banner_box .box .text {
    width: 100%;
    font-size: 22px;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute !important;
    top: 50%;
    left: 50%;
}

@media (max-width: 1024px) {
    .top-pickup_banner .banner_box .box .text {
        font-size: 16px;
    }
}

@media (max-width: 599px) {
    .top-pickup_banner .banner_box .box {
        width: 100%;
        margin: 15px auto;
    }
}

/*top-recruit*/
.top-recruit {
    position: relative;
}

.top-recruit .back_g {
    width: 100%;
    height: 100%;
    background: #398aa7;
    position: absolute;
    top: 0;
    left: 0;
}

.top-recruit .back_g .img {
    height: 100%;
}

.top-recruit .back_g img {
    opacity: 0.3;
}

.top-recruit .recruit {
    z-index: 1;
    position: relative;
}

.top-recruit .recruit .tline_bottom,
.top-recruit .recruit .text {
    color: #fff;
}

/*top-news_blog*/
.top-news_blog .news_blog_box dt {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    color: #9b9b9b;
}

.news_blog_box_inner {
    padding-bottom: 100px;
    position: relative;
}

.news_blog_box_inner .btn_details {
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.top-news_blog .list-cmn01+.list-cmn01 {
    margin-top: 10px;
}

.top-news_blog .news_blog_box dd {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-left: 10px;
}

@media(max-width: 1024px) {
    .news_blog_box_inner {
        padding-bottom: 80px;
    }

    .top-news_blog .news_blog_box dd {
        width: 100%;
        margin-left: 0;
    }

    .top-pickup .rational {
        margin-bottom: 0;
    }

    .top-pickup .rational li:first-of-type,
    .top-pickup .shift-box li:nth-of-type(even) li:first-of-type {
        position: relative;
        width: 100%;
        margin-bottom: 80px;
        left: 0;
        top: 0;
    }

    .top-pickup .rational div.tex {
        margin-bottom: 0;
    }

    .top-staff li {
        width: calc(50% - 10px);
    }
}

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

    .news_blog_box_inner+.news_blog_box_inner {
        margin-top: 50px;
    }

    .top-link li {
        margin-bottom: 5%;
    }

    .top-gallery li {
        width: 50%;
        margin-bottom: 5%;
    }

    .top-gallery li:first-of-type,
    .top-gallery li:last-of-type {
        width: 50%;
    }

    .top-gallery li:last-of-type {
        margin-top: 0;
    }

    .top-gallery h3 {
        position: relative;
        margin-bottom: 50px;
    }

    .top-gallery h3 span {
        display: inline-block;
        padding-left: 10px;
    }

    .top-staff li {
        width: calc(80% - 10px);
        margin: 0 auto 30px;
    }

    .top-blog li {
        margin-bottom: 30px;
    }
}

/* ##### トップここまで ##### */

/* ##### 下層ページ共通 ##### */
.lower-page-img {
    position: relative;
}

.lower-page-img .ofimg::before {
    padding-top: 30%;
}

.lower-page-img .mv_logo_box {
    width: 1000px;
    max-width: 90%;
    margin: auto;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    z-index: 1;
}

.page_title {
    text-shadow: #fff 1px 0px 0px, #fff -1px 0px 0px, #fff 0px -1px 0px, #fff 0px 1px 0px;
}

.page_title .color_b {
    /* color: #326d96; */
    color: #1F2C5D;
}

@media (max-width: 1024px) {
    .lower-page-img .ofimg::before {
        padding-top: 40%;
    }

    .page_title {
        font-size: 35px;
    }
}

@media (max-width: 599px) {
    .lower-page-img .ofimg::before {
        padding-top: 60%;
    }

    .page_title {
        font-size: 25px;
    }
}

.underimg-box {
    position: relative;
}

.underimg-title-box {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    margin: auto;
    z-index: 1;
}

.underimg-title-box .underimg-title {
    font-size: 46px;
    letter-spacing: 4px;
    text-align: center;
}

.item-wrap {
    position: relative;
}

.item-cont {
    margin-top: 100px;
    padding-left: calc(50% - 500px);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.item-img {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.item-text-wrap {
    padding: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.6);
}

.item-text .text {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.item-list li {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 50px;
}

.img-only-item .item-img,
.item_03 .item-img {
    width: 100%;
    position: static;
}

.item_03 .item-cont {
    width: 100%;
    padding-left: 0;
}

.item_03 .item-cont .item-text-wrap {
    margin-bottom: 20px;
    padding: 0;
}

.item_03 .item-cont .item-text-wrap .text {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
}

.check-list {
    margin: 50px 0;
}

.check-list li {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.check-list li:before {
    content: "\f14a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #4a4b8a;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

.pager_02 ul li a {
    color: #4a4b8a;
}

.pager_02 ul li .now,
.pager_02 ul li a:hover {
    background-color: #4a4b8a;
}

.pager_02 ul li a:hover {
    background-color: #4a4b8a;
}

.pager_02 ul .prev a,
.pager_02 ul .next a {
    color: #4a4b8a;
}

.pager_02 ul li a:hover {
    color: #fff;
}

@media (max-width: 1024px) {
    .underimg:before {
        padding-top: 25%;
    }

    .underimg-title-box .underimg-title {
        font-size: 40px;
    }

    .item-text-wrap {
        padding: 20px;
    }

    .item-cont {
        width: 80%;
        margin-top: 50px;
        padding-left: 2%;
    }

    .item-list li .ofimg {
        width: 30%;
    }

    .item-list li .item-text {
        width: 65%;
    }

    .check-list {
        margin: 30px 0;
    }

    .check-list li {
        font-size: 14px;
        margin-bottom: 5px;
    }
}

@media (max-width: 599px) {
    .underimg:before {
        padding-top: 40%;
    }

    .underimg-title-box .underimg-title {
        font-size: 30px;
    }

    .item-cont {
        width: 100%;
        margin-top: 0;
    }

    .item-img {
        width: 90%;
        top: auto;
        bottom: 0;
    }

    .item-text-wrap {
        padding: 10px;
    }

    .item-list li .ofimg {
        width: 80%;
        margin: 10px auto 0 auto;
    }

    .item-list li .item-text {
        width: 100%;
    }

    .staff-list li .ofimg {
        width: 80%;
    }

    .check-list {
        margin: 10px 0;
    }
}

/* ##### 下層ページ共通 end ##### */

/* ##### 外壁塗装などの說明ページ(troubleページから使用) ##### */
.back_lower_page {
    background: rgba(255, 255, 255, 0.8);
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.shift-box02 {
    overflow: hidden;
}

.rational02 {
    position: relative;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.rational02 li:last-of-type {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
}

.rational02 li:first-of-type {
    width: 600px;
    margin-top: 40px;
    margin-right: calc(50% - 500px);
    position: relative;
    z-index: 2;
}

.rational02 h3 {
    text-align: right;
}

.rational02 h3:after {
    left: calc(100% - 34px);
    -webkit-transform: none;
    transform: none;
}

.trouble .item .pic {
    width: 30%;
}

.rational02 dl {
    background: rgba(255, 255, 255, 0.8);
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.trouble .item dl {
    width: 65%;
}

.count {
    position: relative;
    width: 71px;
    font-style: italic;
    margin-right: 19px;
    font-size: 36px;
}

.count:after {
    position: absolute;
    content: "";
    width: 71px;
    top: 17%;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    height: 39px;
}

@media (max-width: 599px) {
    .trouble .item .pic {
        width: 100%;
        margin: auto;
    }

    .trouble .item dl {
        width: 100%;
        margin-top: 10px;
    }
}

/* ##### 外壁塗装などの說明ページ(troubleページから使用) end ##### */

/* ##### リフォーム全般はお任せください(remodeling)(troubleから追加) ##### */
.remodeling .rational02 dd {
    margin-bottom: 0;
}

.remodeling .item li+li {
    margin-top: 50px;
}

.remodeling .item dl .box {
    padding: 5px;
}

.remodeling .item dt {
    color: #1F2C5D;
    border-bottom: 2px solid #1F2C5D;
}

.remodeling .sign_text {
    padding: 20px 40px;
    line-height: 30px;
    background: #020c3c;
    color: #fff;
}

.remodeling .reverse .item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.remodeling .reverse .pic_text {
    margin-bottom: 50px;
}

.remodeling .reverse .item .text {
    line-height: 1.8;
}

@media (max-width: 599px) {
    .remodeling .item dl {
        width: 100%;
        margin-top: 10px;
    }
}

/* ##### リフォーム全般はお任せください end ##### */

/* ##### 建物を長持ちさせる外壁塗装(exterior_wall_painting) ##### */
.wall_paint_02 .text {
    margin-bottom: 50px;
    font-size: 18px;
}

.wall_paint_02 ul.item>li+li {
    margin-top: 50px;
}

.item-list-inner li+li {
    margin-top: 5px;
}

.exterior_wall_painting .timing .box .title {
    font-size: 22px;
}

.exterior_wall_painting .timing .box div {
    line-height: 1.8;
}

.exterior_wall_painting .timing .box .pic_text:last-of-type {
    margin-bottom: 10px;
}

.exterior_wall_painting .timing .box .pic_text::before {
    content: "・";
    width: 100%;
    height: 100%;
}

.exterior_wall_painting .timing .box li {
    line-height: 1.8;
}

.exterior_wall_painting .timing_02 .text {
    line-height: 1.8;
}

@media (max-width: 1024px) {
    .exterior_wall_painting .timing .box div {
        padding: 0 40px;
    }
}

@media (max-width: 599px) {
    .exterior_wall_painting .timing .box div {
        padding: 0 20px;
    }
}

/* ##### 建物を長持ちさせる外壁塗装(exterior_wall_painting) end ##### */

/* ##### ダメージが蓄積された屋根の塗装(roof_painting) ##### */
.roof_painting .reverse .rational02 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.roof_painting .damage .text {
    line-height: 1.8;
}

.roof_painting .divide .text {
    font-size: 20px;
    margin-bottom: 50px;
}

.roof_painting .divide .table_box:not(:last-of-type) {
    margin-bottom: 50px;
}

.roof_painting .divide .table_box h4 {
    margin-bottom: 10px;
}

.roof_painting .divide .table_box .title_text {
    font-size: 18px;
    margin-bottom: 10px;
}

.roof_painting .section_box .teu_box:not(:last-of-type) {
    margin-bottom: 50px;
}

@media (max-width: 1024px) {
    .roof_painting .divide h3 {
        font-size: 20px;
    }

    .roof_painting .divide .text {
        font-size: 16px;
    }

    .roof_painting section:first-of-type {
        margin-top: 30px;
    }
}

@media (max-width: 599px) {
    .roof_painting section:first-of-type {
        margin-top: 20px;
    }
}

/* ##### ダメージが蓄積された屋根の塗装(roof_painting) end ##### */
.divide table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #020c3c;
}

.divide .table_box tr th,
.divide .table_box tr td {
    width: 30%;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
    padding: 20px;
}

.divide .table_box tr th {
    background: #020c3c;
    color: #fff;
    padding: 5px 0;
}

.divide .table_box tr th:first-child {
    background: #a40000;
}

@media (max-width: 599px) {

    .divide .table_box tr td,
    .divide .table_box tr td div {
        font-size: 12px;
    }

    .divide .table_box tr td {
        padding: 10px;
    }
}

/* ##### 取り扱い塗装剤(handling_paint) ##### */
.handling_paint .divide .table_box tr th:first-child,
.handling_paint .divide .table_box tr th {
    background: #020c3c;
}

.handling_paint .divide .title_text {
    font-size: 22px;
    margin-bottom: 50px;
}

.handling_paint .divide .table_box h4 {
    margin-bottom: 10px;
}

.handling_paint .divide .pic_text {
    margin-top: 20px;
}

.handling_paint .divide .pic_text::before {
    content: "＊";
    width: 100%;
    height: 100%;
}

.handling_paint .divide .table_box .explanatory_text {
    font-size: 22px;
    margin-bottom: 10px;
}

.handling_paint .shift-box02 .text_only h3 {
    text-align: center;
}

.handling_paint .shift-box02 .text_only {
    width: 100%;
    margin-right: 0;
}

.handling_paint .shift-box02 li {
    margin-bottom: 50px;
}

.handling_paint .shift-box02 li .text {
    line-height: 1.8;
}

.handling_paint .shift-box02 li .text a {
    color: #326d96;
}

@media (max-width: 1024px) {
    .handling_paint .divide {
        margin-top: 30px;
    }
}

/* ##### 取り扱い塗装剤(handling_paint) end ##### */

/* ##### シロアリ被害のリフォーム(termite_damage) ##### */
.termite_damage .top-service .service .text {
    font-size: 20px;
    color: #fff;
    line-height: 1.8;
}

.termite_damage .top-service .service .text:first-of-type {
    margin-bottom: 50px;
}

.termite_damage .top-service .service .text:last-of-type {
    margin-top: 50px;
}

.termite_damage .termites02 .title_text {
    font-size: 20px;
    margin-bottom: 50px;
}

.termite_damage .termites02 dt {
    font-size: 20px;
}

.termites03 .text,
.termites02 .tex,
.termites01 .text {
    line-height: 1.8;
}

.termites02 ul li+li {
    margin-top: 50px;
}

@media (max-width: 1024px) {

    .termite_damage .top-service .service .text,
    .termite_damage .termites02 .title_text {
        font-size: 18px;
    }
}

@media (max-width: 599px) {
    .termite_damage section:first-of-type {
        padding-top: 20px;
    }

    .termite_damage .tex {
        line-height: 1.8;
    }
}

/* ##### シロアリ被害のリフォーム(termite_damage) end ##### */

/* ##### 涼しさと暖かさを叶える断熱リフォーム(insulation_reform) ##### */
.insulation_reform .shift-box02 .text {
    line-height: 1.8;
}

.insulation_reform .insulation .text {
    margin-bottom: 50px;
}

.insulation_reform .insulation .item {
    margin-bottom: 50px;
}

.insulation_reform .insulation .item li {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.insulation_reform .insulation .item .box+.box {
    margin-top: 50px;
}

.insulation_reform .insulation .pic_text {
    font-size: 20px;
}

@media(max-width: 1024px) {
    .insulation_reform .insulation .pic_text {
        font-size: 18px;
    }
}

@media (max-width: 599px) {
    .reverse-sp {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
}

/* ##### 涼しさと暖かさを叶える断熱リフォーム(insulation_reform) end ##### */

/* ##### 中島塗装ってどんな会社？ ##### */
.company_greeting h3 {
    text-align: center;
}

.company_greeting .concept_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: calc(50% - 500px);
}

.company_greeting .concept_box .box {
    width: 35%;
    margin: auto 0;
}

.company_greeting .concept_box .box .text {
    padding: 10px 0;
    line-height: 30px;
}

.company_greeting .concept_box .img_box {
    width: 65%;
}

.company-owner-caption {
    margin-top: 10px;
}

.company-owner-caption h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 0;
}

.company-onwer-info div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 10px 5px;
    border-bottom: 1px solid #333;
}

.company-onwer-info div dt {
    width: 20%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.company-onwer-info div dd {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.company .company_access .access_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.company .company_access .access_box .box {
    width: 46%;
    margin: 0 2% 6% 2%;
}

.company .company_access .access_box .box dl dd {
    margin-top: 5px;
}

.company .company_access .tline_bottom {
    text-align: center;
}

.company .company_access iframe {
    width: 100%;
}

@media (max-width: 1024px) {
    .company .top-service .service_box {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .company .top-service .service_box .box {
        width: calc(96% / 2);
    }

    .company-onwer-info div dt {
        width: 30%;
    }

    .company .company_greeting .concept_box .box {
        width: 100%;
        padding: 0 30px 15px;
    }

    .company .company_greeting .concept_box .img_box {
        width: 100%;
    }

    .company .company_greeting .concept_box {
        margin-left: auto;
    }
}

@media (max-width: 599px) {
    .company .construction_right h4 {
        font-size: 18px;
    }

    .company .top-service .service_box .box {
        width: calc(94% / 1);
    }

    .company .construction.details .construction_left h3 {
        font-size: 15px;
    }

    .company .company_access .access_box .box {
        width: 100%;
    }

    .company .company_access {
        margin-bottom: 0;
    }
}

.company_greeting .concept_box .img_box .img::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(255, 255, 255);
    background: linear-gradient(104deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

/* ##### 中島塗装ってどんな会社？ end ##### */

/* ##### お見積りの流れ（quote） ##### */
@media (max-width: 599px) {
    .quote h4 {
        font-size: 20px;
    }
}

/* ##### お見積りの流れ（quote） end ##### */

/* ##### アクセス情報（contact） ##### */
.contact .contact-list input,
.contact .contact-list textarea {
    border: none;
    background: #c3e4fa;
    width: 100%;
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.contact .contact-list input[type="radio"] {
    width: auto;
}

/* ##### アクセス情報（contact） end ##### */

/* ##### 求人情報（recruit） ##### */
.assi-box .in {
    position: relative;
    padding: 60px;
}

.circle .ue,
.circle .shita {
    position: relative;
}

.assi-box {
    /* background: #bce3f5; */
    background: #1F2C5D;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* .recruit .circle .ue:before {
    content: "";
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: #fff;
    position: absolute;
    top: -30px;
    right: -30px;


 .recruit .circle .ue:after {
    content: "";
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: #fff;
    position: absolute;
    top: -30px;
    left: -30px;
}

.recruit .circle .shita:after {
    content: "";
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: #fff;
    position: absolute;
    bottom: -30px;
    right: -30px;
}

.recruit .circle .shita::before {
    content: "";
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: #fff;
    position: absolute;
    bottom: -30px;
    left: -30px;
} */

.assi-box .in .kazari {
    position: absolute;
    width: 93px;
    height: 108px;
    left: -20px;
    top: -24px;
    z-index: 2;
}

.s-data dl {
    border-bottom: 1px solid #333;
    padding: 10px 0;
}

.s-data dt {
    width: 30%;
}

.s-data dd {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-left: 15px;
}

@media (max-width: 1024px) {
    .recruit section {
        margin-bottom: 30px;
    }

    .s-data dt {
        width: 100%;
    }

    .s-data dd {
        margin-left: 0;
    }
}

@media (max-width: 599px) {

    .assi-box .in {
        padding: 35px 20px;
    }
}

/* ##### 求人情報（recruit）end ##### */

/* ##### 中嶋塗装ができること（contribute） ##### */

.contribute .item-title_01.tline_bottom {
    text-align: left;
}

.contribute .item-title_01.tline_bottom .border {
    left: 0;
    -webkit-transform: translate(10%, 0);
    transform: translate(10%, 0);
}

.contribute .contribute_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.contribute .contribute_inner .box {
    min-width: 48%;
    margin: 1%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding-left: 20px;
    position: relative;
}

.contribute .contribute_inner .box::before {
    content: '・';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

.contribute .assi-box {
    /* background: #326d96; */
    background: #1F2C5D;
}

.contribute .assi-box h4,
.contribute .assi-box dt,
.contribute .assi-box dd,
.contribute .assi-box li {
    color: #fff;
}

@media (max-width: 599px) {

    .contribute .assi-box .in {
        padding: 30px;
    }

    .assi-box .in .kazari {
        width: 50px;
        height: 50px;
        left: 0;
        top: 0;
    }

    .contribute .s-data dt {
        width: 100px;
    }

    .contribute .s-data dd {
        width: calc(100% - 100px);
    }

    .contribute .item-cont {
        width: 100%;
        padding-left: 0;
    }

    .contribute .item-img {
        width: 100%;
        position: static;
    }

    .contribute .item-title_01.tline_bottom {
        margin-left: 2%;
    }
}

/* ##### 中嶋塗装ができること（contribute）end ##### */

/* ##### 店舗のご案内 ##### */
.info-box-wrap {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.info-box {
    margin: 2% 2% 50px 2%;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
}

.info-title {
    font-size: 20px;
}

.info-box .text {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.infoimg-list li:nth-of-type(even) {
    margin-top: 50px;
}

.salon_info .map+.text {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
    margin-top: 10px;
}

@media (max-width: 1024px) {
    .infoimg-list li:nth-of-type(even) {
        margin-top: 30px;
    }
}

@media (max-width: 599px) {
    .info-box-wrap {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

    .info-box {
        margin: 2% 2% 30px 2%;
    }

    .infoimg-list li:nth-of-type(even) {
        margin-top: 1%;
    }
}

/* ##### 店舗のご案内 end ##### */

/* ##### pagenav ##### */
.pagenav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 50px 0;
}

.pagenav li {
    width: 25px;
    height: 25px;
    margin: 0 10px;
}

.pagenav li a,
.pagenav li span.now {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    text-align: center;
    font-weight: bold;
    color: #326d96;
    background: #fff;
    border-radius: 100%;
}

.pagenav li a:hover,
.pagenav li span.now {
    opacity: 1;
    color: #fff;
    background-color: #326d96;
}

.pagenav li.st a {
    background: #326d96;
    color: #fff;
}

.pagenav li.prev a,
.pagenav li.next a {
    background: #fff;
    color: #326d96;
    font-size: 15px;
}

.pagenav li.prev a {
    text-align: right;
}

.pagenav li.next a {
    text-align: left;
}

/* ##### pagenav end ##### */

/* ##### ブログ共通 ##### */
.news_details .news_main,
.blog_details .blog_main {
    margin-bottom: 50px;
}

.news_details .side .cate_box:not(:last-of-type),
.blog_details .side .cate_box:not(:last-of-type) {
    margin-bottom: 40px;
}

.blog_details .content .recommend li {
    margin-bottom: 0;
}

.one-line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

.blog li a:hover .pic {
    opacity: 0.6;
}

.blog dt {
    margin-top: 10px;
    margin-bottom: 5px;
}

.blog .more {
    margin: 20px auto 0 auto;
}

.news_details .more,
.blog_details .more {
    margin-top: 50px;
}

.deta,
.side {
    float: left;
}

.main {
    float: right;
}

.b-link dt {
    color: #326d96;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.b-link dt:after {
    border-top: 1px solid #326d96;
    content: "";
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.b-link dt:after {
    margin-left: 2%;
}

.b-link dd {
    border-bottom: #c9c9c9 solid 1px;
}

.b-link dd a {
    padding: 5px 0;
    display: block;
    margin-left: 10px;
    width: calc(100% - 10px);
}

.deta ul {
    border-bottom: #326d96 solid 2px;
}

.deta ul li.d {
    font-size: 80px;
    line-height: 60px;
}

.deta ul li.b {
    margin: 10px 0;
}

.deta ul li.b span {
    margin-left: 10px;
}

.recommend {
    background: #dce7e3;
    position: relative;
    padding: 50px 0;
}

.recommend:after {
    content: "";
    width: 206px;
    height: 182px;
    left: 0;
    top: 0;
    position: absolute;
}

.recommend:before {
    content: "";
    position: absolute;
    width: 157px;
    height: 152px;
    right: 0;
    bottom: 0;
}

.recommend .inner {
    position: relative;
    z-index: 3;
}

/*news*/
.blog .news li {
    border: solid #326d96 1px;
    padding: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.blog .news li dd a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.blog .news li .more-bt {
    height: 40px;
    margin: 15px auto 0 auto;
}

.blog .news li .more-bt a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    background: #326d96;
}

.blog .blog_content {
    margin-bottom: 50px;
}

@media (max-width: 1024px) {
    .blog .blog_content {
        margin-top: 50px;
    }

    .blog_details .content .recommend li {
        margin-bottom: 30px;
    }

    .blog dt {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

@media (max-width: 599px) {
    .blog .blog_content {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .news_details .news_main div,
    .blog_details .blog_main div {
        width: 100%;
    }

    .blog section li {
        margin-bottom: 30px;
    }

    .deta ul li {
        margin-bottom: 0;
    }

    .recommend {
        padding: 20px 0;
    }

    .recommend li {
        margin-bottom: 30px;
    }
}

/* ##### ブログ共通ここまで end ##### */

/* ##### メニュー ##### */
.menu .item-text-title_02 {
    margin-bottom: 50px;
}

.menu-box-wrap {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.menu-box {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
    margin: 0 2% 50px 2%;
}

.menu-list {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-bottom: 20px;
    border-bottom: 1px solid #b5b0ac;
}

.menu-list * {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.menu-list dt {
    font-size: 16px;
}

.menu-list dt .menu-text {
    font-size: 12px;
    padding-left: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.menu-list dd {
    width: 120px;
    font-size: 18px;
    letter-spacing: 1px;
    text-align: right;
    margin-left: 30px;
}

@media (max-width: 599px) {
    .menu-box-wrap {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

    .menu .item-text-title_02 {
        margin-bottom: 30px;
    }
}

/* ##### メニュー end ##### */

/* ##### 当店のこだわり系 ##### */
.item-list li .more-btn_02 {
    margin: 10px 0 0 auto;
}

.scalp .item-cont .more-btn_02,
.point .item-cont .more-btn_02 {
    margin-top: 30px;
}

@media (max-width: 599px) {
    .item-list li .more-btn_02 {
        margin: 10px auto 30px auto;
    }

    .scalp .item-cont .more-btn_02 {
        margin-top: 10px;
    }
}

/* ##### 当店のこだわり系 end ##### */

/* ##### よくある質問 ##### */
.faq-text {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
    text-align: center;
    margin: 30px 0;
}

.faq-list {
    margin-bottom: 80px;
    position: relative;
}

.faq-list .deco {
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.faq-list .deco:before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border: 2px solid #326d96;
    border-radius: 50%;
    position: absolute;
    top: -15px;
    left: -15px;
    z-index: 1;
}

.faq-list .deco:after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border: 2px solid #326d96;
    border-radius: 50%;
    position: absolute;
    top: -15px;
    right: -15px;
    z-index: 1;
}

.faq-list dt:before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border: 2px solid #326d96;
    border-radius: 50%;
    position: absolute;
    bottom: -15px;
    left: -30px;
    z-index: 1;
}

.faq-list dt:after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border: 2px solid #326d96;
    border-radius: 50%;
    position: absolute;
    bottom: -15px;
    right: -30px;
    z-index: 1;
}

.faq-list dt {
    width: calc(100% - 30px);
    margin: 0 15px 0 15px;
    position: relative;
    padding: 15px 15px 15px 65px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-top: 2px solid #326d96;
    border-bottom: 2px solid #326d96;
}

.faq-list dt .faq-dt {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #4a4b8a;
}

.faq-list dt .faq-dt:before {
    content: 'Q';
    display: inline-block;
    font-family: "garamond", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝", serif;
    font-size: 40px;
    color: #4a4b8a;
    position: absolute;
    top: 15px;
    left: 20px;
}

.faq-list dd {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #444;
    position: relative;
    padding: 0 30px 0 75px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.faq-list dd:before {
    content: 'A';
    display: inline-block;
    font-family: "garamond", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝", serif;
    color: #35abfc;
    font-size: 40px;
    position: absolute;
    top: 5px;
    left: 40px;
}

@media (max-width: 599px) {
    .faq-list {
        margin-bottom: 60px;
    }

    .faq-list dt {
        width: calc(100% - 20px);
        margin: 0 10px 0 10px;
        padding: 10px 10px 10px 40px;
        border-top: 1px solid #b5b475;
        border-bottom: 1px solid #b5b475;
    }

    .faq-list .deco {
        margin-bottom: 20px;
    }

    .faq-list .deco:before {
        width: 20px;
        height: 20px;
        border: 1px solid #b5b475;
        top: -10px;
        left: -9px;
    }

    .faq-list .deco:after {
        width: 20px;
        height: 20px;
        border: 1px solid #b5b475;
        top: -10px;
        right: -9px;
    }

    .faq-list dt .faq-dt:before {
        font-size: 30px;
        top: 15px;
        left: 5px;
    }

    .faq-list dt:before {
        width: 20px;
        height: 20px;
        border: 1px solid #b5b475;
        bottom: -10px;
        left: -20px;
    }

    .faq-list dt:after {
        width: 20px;
        height: 20px;
        border: 1px solid #b5b475;
        bottom: -10px;
        right: -20px;
    }

    .faq-list dt .faq-dt {
        font-size: 14px;
    }

    .faq-list dd {
        font-size: 14px;
        padding: 0 20px 0 50px;
    }

    .faq-list dd:before {
        content: 'A';
        font-size: 35px;
        left: 15px;
    }
}

/* ##### よくある質問 end ##### */

/* ##### スタイル ##### */
.inpage-nav-list li {
    margin: 0 15px;
}

.inpage-nav-list li a {
    font-weight: bold;
    position: relative;
}

.inpage-nav-list li a:after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background-color: rgba(117, 117, 117, 0.4);
    ;
    position: absolute;
    bottom: -3px;
    left: 0;
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
}

.inpage-nav-list li a:hover {
    opacity: 1;
}

.inpage-nav-list li a:hover:after {
    width: 100%;
}

.thumbs {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
    -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.thumbs li:hover {
    cursor: pointer;
}

.thumbs li.active-img {
    outline: 5px solid #999;
}

.gallery-title {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #4a4b8a;
    letter-spacing: 4px;
    margin-bottom: 20px;
}

.gallery-text {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
    margin: 20px 0;
}

.gallery-stylis t-box {
    margin: 50px 0;
}

.gallery-stylist-title {
    font-size: 24px;
    font-weight: bold;
    color: #4a4b8a;
    letter-spacing: 4px;
    border-bottom: 1px solid #4a4b8a;
    margin-bottom: 10px;
}

.staff-position,
.staff-alphabet {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
}

.staff-name {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 18px;
    font-weight: bold;
}

.gallery_detail .more-btn_02 {
    margin: 50px auto;
}

@media (max-width: 599px) {
    .gallery-stylist-box {
        margin: 30px 0;
    }

    .gallery-stylist-img {
        width: 80%;
        margin: 2% auto;
    }

    .gallery_detail .more-btn_02 {
        margin: 30px auto;
    }

    /* ##### スタイル end ##### */
}

/* ##### お客様の声 ##### */
.voice-box {
    margin-bottom: 50px;
    padding: 0 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.user,
.shop {
    width: 90%;
    border-radius: 5px;
    border: 1px solid #ccc;
    position: relative;
}

.user {
    margin-bottom: 10px;
}

.shop {
    margin-left: auto;
}

.balloon {
    padding: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 5px;
    position: relative;
    z-index: 1;
}

.shop .balloon {
    background-color: #f5f5f5;
}

.user:before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid #ccc;
    background-color: #fff;
    position: absolute;
    bottom: 20px;
    left: -8px;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.shop:before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    position: absolute;
    bottom: 20px;
    right: -8px;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.user-info-wrap {
    padding: 5px 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
}

.icon {
    width: 50px;
}

.user-info {
    width: calc(100% - 50px);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 5px 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.user-info * {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}

.user-about {
    margin: 0;
}

.user-about * {
    margin-right: 10px;
}

.user-voice .text,
.shop .text {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
}

/* ##### お客様の声 end ##### */

/* ##### お問い合わせ ##### */
.contact-item {
    margin-bottom: 30px;
}

.contact-item dt {
    width: 20%;
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold;
}

.contact-item dd {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.contact-item dd input,
.contact-item dd textarea {
    width: 100%;
    padding: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.contact-item dd textarea {
    height: 200px;
}

.contact-btns li {
    margin: 0 30px;
}

.must {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 10px;
    line-height: 180%;
    background: #a40000;
    display: block;
    width: 40px;
    text-align: center;
    color: #fff;
    padding: 1px 10px;
}

.contact .more-btn_02 button {
    padding: 10px 50px;
    background: #020c3c;
    color: #fff;
}

@media (max-width: 1024px) {
    .contact-item dt {
        width: 30%;
        font-size: 14px;
    }

    .contact-btns li {
        margin: 0 20px;
    }
}

@media (max-width: 599px) {
    .contact-item dt {
        width: 100%;
        margin-bottom: 5px;
    }

    .must {
        display: inline-block;
        margin-left: 10px;
    }

    .contact-btns li {
        max-width: 200px;
        margin: 0 10px;
    }
}

/* ##### お問い合わせ end ##### */

/* ##### 取り扱い商品 ##### */
.product-list li {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 30px;
}

.product-list li * {
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
}

.product-list li .product-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 120%;
    margin-bottom: 10px;
    color: #4a4b8a;
}

.product-list li .product-category {
    display: inline-block;
    background-color: #4a4b8a;
    color: #fff;
    font-size: 12px;
    line-height: 100%;
    padding: 5px 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.price-box {
    margin: 10px 0;
}

.price-box * {
    margin-right: 10px;
}

.product-list li .product-text {
    line-height: 140%;
}

@media (max-width: 1024px) {
    .product-list li .product-title {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .price-box {
        margin: 5px 0;
    }

    .product-list li .product-text {
        font-size: 12px;
    }
}

@media (max-width: 599px) {
    .product-list li .product-img {
        width: 40%;
        margin: 0;
    }

    .product-list li .product-info {
        width: 58%;
        margin: 0;
    }

    .product-list li .product-title {
        font-size: 14px;
    }

    .product-list li .product-category {
        font-size: 10px;
    }
}

/* ##### 取り扱い商品 end ##### */

/* ##### 施工事例、施工事例詳細 ##### */
.construction .construction_section .trouble {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: flex-start;
}

.construction .construction_section .box {
    width: calc(94% / 3);
    border: 1px solid #333;
    padding: 5px;
    margin: 1%;
}

.construction .construction_section .box a {
    width: 100%;
    height: 100%;
    display: block;
}

.construction .construction_section .construction_box {
    position: relative;
}

.construction .construction_box .img_before {
    width: 40%;
    border: 5px solid #fff;
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 1;
}

.construction .before_inner {
    position: relative;
}

.construction .after_inner {
    position: relative;
}

.construction .before_after {
    font-family: "游ゴシック", YuGothic, Hiragino Sans, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}

.construction .img_before .before_after {
    font-size: 12px;
    padding: 5px 5px;
    letter-spacing: 1px;
    line-height: 1.2;
    color: #fff;
    background: #326d96;
    position: absolute;
    top: 5px;
    right: 5px;
}

.construction .img_after .before_after {
    min-width: 150px;
    text-align: center;
    font-size: 20px;
    padding: 5px 24px;
    letter-spacing: 2px;
    color: #fff;
    background: #35abfc;
    position: absolute;
    top: 10px;
    right: 10px;
}

.construction .title_text {
    padding: 10px 10px 5px;
}

@media (max-width: 1024px) {
    .construction .construction_section .box {
        width: 48%;
    }

    .construction .img_after .before_after {
        font-size: 18px;
        padding: 3px 15px;
        top: 5px;
        right: 5px;
    }

    .construction .img_before .before_after {
        font-size: 10px;
        padding: 2px 5px;
        top: 2px;
        right: 2px;
    }

    .construction .construction_box .img_before {
        width: 45%;
    }
}

@media (max-width: 599px) {
    .construction .construction_section .box {
        width: 100%;
    }

    .construction .img_after .before_after {
        font-size: 16px;
        padding: 2px 10px;
    }
}

/*なかしま建装　施工事例詳細*/
.active-img {
  outline: solid #000;
}
.construction.details .box {
    width: 100%;
    border: none;
}

.construction.details .img_before .before_after {
    font-size: 12px;
    padding: 5px 10px;
    letter-spacing: 1px;
    color: #fff;
    background: #35abfc;
    position: absolute;
    top: 5px;
    right: 5px;
}

.construction.details .img_before li:last-of-type .before_after {
  background: #326d96;
}

.construction.details .construction_left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.construction.details .construction_right {
    padding: 10px 10px 0;
}

.construction.details .img_before {
    margin-right: 5%;
    flex-grow: 1;
}

.construction.details .change_imglist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
}

.construction.details .img_before li {
  width: 100%;
  position: relative;
  flex-grow: 1;
}

.construction.details .img_before li+li {
  margin-top: 20px;
}

.construction.details .img_after {
    flex-grow: 3;
}

.construction.details .text {
    width: 100%;
    padding: 5px;
    margin: 5px;
    /* border-bottom: 1px solid #333; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.construction.details .text dt {
    width: 30%;
    padding-right: 10px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.construction.details .text dd {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-left: 15px;
}

/*beforeとafterで背景の色変更*/
.construction .img_after .before_after.BEFORE {
  background: #326d96;
}

.construction .img_after .before_after.AFTER {
  background: #35abfc;
}

@media (max-width: 1024px) {
    .construction.details .text dt {
        max-width: none;
        width: 100%;
    }

    .construction.details .text dd {
        width: 100%;
    }

    .construction.details .img_before .before_after,
    .construction.details .img_after .before_after {
        position: static;
    }

    .construction.details .img_after .before_after {
        top: 5px;
        right: 5px;
    }
  .construction.details .change_imglist {
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  
    .construction.details .img_before {
      width: 100%;
      margin-right: 0;
      margin-bottom: 20px;
  }
    
    .construction.details .img_before li {
      width: auto;
      flex-grow: 1;
  }
  
    .construction.details .img_before li+li {
      margin-top: 0;
      margin-left: 20px;
  }

  .construction.details .img_after {
      width: 100%;
  }
}

@media (max-width: 599px) {
}

/* ##### お客様の声（customers_voice） ##### */
.customers_voice .construction.details .text dt,
.customers_voice .construction.details .text dd {
    max-width: 100%;
    width: 90%;
}

@media (max-width: 599px) {
    .company.customers_voice .construction_section {
        padding-top: 0;
    }

    .customers_voice.company .construction.details .construction_left {
        width: 100%;
    }

    .customers_voice.company .construction.details .construction_right {
        width: 100%;
    }
}

/* ##### お客様の声（customers_voice） end ##### */


/* #### top-project組み込み用順番並び替え  ##### */
.top-project .project_box div.box:nth-of-type(1) {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

.top-project .project_box div.box:nth-of-type(2) {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
}

.top-project .project_box div.box:nth-of-type(3) {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
}

.top-project .project_box div.project-title {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
}

.top-project .project_box div:nth-of-type(4) {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
}

.top-project .project_box div:nth-of-type(5) {
    -webkit-box-ordinal-group: 7;
    -ms-flex-order: 6;
    order: 6;
}

/* ##### lightbox ##### */
.uk-lb img {
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
}

.uk-lb img:hover {
    cursor: pointer;
    opacity: 0.6;
}

/* ##### lightbox end ##### */

/* ##### 見たまま編集 ##### */
#gnav.fixed[data-element-id] {
    position: static !important;
}

[data-element-id] #dropmenu {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

[data-element-id] #dropmenu li {
    margin: 5px;
}

#dropmenu[data-element-id] .sp-only {
    display: block;
    border: 1px solid #000080;
}

#dropmenu[data-element-id] .sp-only::before {
    content: 'スマホナビ';
    display: block;
    font-size: 10px;
    text-align: center;
    line-height: 1.2;
    color: white;
    padding: 2px 5px;
    background-color: #000080;
}

#dropmenu[data-element-id] .dropdown ul li {
    overflow: visible;
    height: auto;
}

[data-element-id] .footfix {
    display: block;
    position: absolute;
    bottom: 50px;
}

[data-element-id] .top-project .project_box>div {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

[data-element-id] .construction .construction_section .trouble>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: flex-start;
}

[data-element-id] .deta ul li.d {
    font-size: 10px;
}

[data-element-id] .deta,
[data-element-id] .side {
    clear: left;
}

/* ##### 見たまま編集 end ##### */
 
/* ##### 2026/06 ##### */
.font-serif {
  font-family: "Noto Serif JP", serif;
}
.font-serif a {
  font-family: "Noto Serif JP", serif;
}


 /* 求人ページ */
.recruit .s-data dl {
  border-bottom: 1px solid #fff;
}
.recruit .s-data dt {
  color: #fff;
}
.recruit .s-data dd {
  color: #fff;
}
.recruit .s-data dd a {
  color: #fff;
}

/* 大規模修繕工事 */
.repair02 ul {
  display: flex;
  flex-wrap: wrap;
}
.repair02 ul li {
  width: 46%;
  margin: 10px auto 30px;
}
.repair02 ul li h4 {
  padding: 2%;
  background: #1F2C5D;
  text-align: center;
  font-size: 18px;
  margin-bottom: 10px;
  color: #fff;
}
.repair03 h4 {
  border-bottom: 2px solid #1F2C5D;
  padding-bottom: 5px;
}
@media (max-width: 599px){
  .repair02 ul li {
    width: 100%;
  }
}

/* 2026/06/22サイト変更 */
header {
  background: #1F2C5D;
  color: #fff;
}
header ul li {
  color: #fff;
}
header ul li h1 {
  font-family: "Noto Serif JP", serif;
  color: #fff;
}
[data-element-id] .side-banar {
  position: fixed;
}
#dropmenu {
  max-width: 1200px;
}
#gnav {
  background: #1F2C5D;
}
#gnav ul li {
  font-family: "Noto Serif JP", serif;
  color: #fff;
}
#gnav ul li a {
  font-family: "Noto Serif JP", serif;
  color: #fff;
}
#gnav.fixed {
  background: #1F2C5D;
}
.font-notoserif {
  font-family: "Noto Serif JP", serif;
  color: #fff;
}
.font-notoserif a {
  font-family: "Noto Serif JP", serif;
  color: #fff;
}
.footfix .contactbtn {
  background: #1f2c5d;
}
.top-recruit .back_g {
  background: #1F2C5D;
}

/* フッター */
footer {
  background: #1F2C5D;
  padding: 0;
}
footer .g-map {
  width: 100%;
  height: 400px;
}
footer .g-map iframe {
  width: 100%;
  height: 100%;
}
footer .inner {
  display: flex;
}
footer .inner>div {
  width: 48%;
  margin: 0 auto;
}
footer .footer_box {
  background: initial
}

footer .inner .footer-logo {
  margin: 0 auto 10px auto;
}
footer .inner .logo {
  background: #fff;
  padding: 2%;
}
footer .footer_inner li+li {
  margin-top: 10px;
}
.footer_address dt , .footer_address dd {
  font-family: "Noto Serif JP", serif;
  color: #fff;
}
footer .footer_box {
  padding: 50px;
}
footer .footer-right {
  padding: 50px;
  display: flex;
}
footer .footer-right ul {
  width: 48%;
  margin: 0 auto;
}
footer .footer-right ul li {
  margin-bottom: 5px;
}
footer .footer-right ul li a {
  color: #fff;
  font-family: "Noto Serif JP", serif;
}
footer .copy {
  margin-top: 0;
}
.c-navy {
  color: #1F2C5D;
}

@media (max-width: 1024px){
  footer .g-map {
    height: 300px;
  }
  footer .footer-right {
    padding: 50px 20px;
  }
}

@media (max-width: 599px){
  footer .g-map {
    height: 250px;
  }
  footer .inner {
    display: block;
  }
  footer .inner>div {
    width: 100%;
  }
  footer .footer-right {
    padding: 0 50px 50px;
  }
  footer .footer-right ul {
    display: flex;
    flex-wrap: wrap;
  }
}

/* サイドメニュー */
/* メニュー全体の固定配置 */
.side-menu {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%); /* 画面の上下中央に配置 */
  z-index: 9999;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各メニュー項目のスタイル */
.side-menu-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  cursor: pointer;
  position: relative;
  /* 右端を基準にするため、あらかじめ右に隠す準備 */
}

/* アイコン部分のスタイル */
.menu-icon {
  width: 50px;
  height: 50px;
  background-color: #002d62; /* 濃い青（サイトのイメージ色） */
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  z-index: 2; /* アイコンを文字より前面に出す */
  box-shadow: -2px 2px 5px rgba(0,0,0,0.2);
}

.menu-icon img {
  width: 70%;
}

/* ホバー時に出てくる要素のスタイル */
.menu-content {
  position: absolute;
  right: 50px; /* アイコンの横幅分、左に配置 */
  height: 50px;
  white-space: nowrap; /* 文字の折り返しを防ぐ */
  background-color: #002d62;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 14px;
  z-index: 1;
  font-family: "Noto Serif JP", serif;
  
  /* アニメーションの設定：最初は右側に隠す */
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none; /* 隠れている時はクリック等に反応させない */
}

/* 1. 【追加】aタグ自体の装飾をリセットし、親要素いっぱいに広げる */
.side-menu-item a {
  text-decoration: none; /* 下線を消す */
  color: inherit;        /* 文字色を親要素(白)に合わせる */
  display: flex;         /* 横並びを維持する */
  align-items: center;
  width: 100%;
  height: 100%;
}

/* 2. 【変更】ホバーの対象をaタグに変更（挙動を安定させるため） */
.side-menu-item a:hover .menu-content {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.side-menu-item a:hover .menu-icon {
  background-color: #00408c; /* ホバー時のアイコン色変化 */
}

@media (max-width: 1024px){
  .side-menu {
    display: none;
  }
}