* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
}

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

html {
        font-size: 62.5%;
        /* sets the base font to 10px for easier math 1 */
}

body {
        font-family: 'Noto Serif JP', '游明朝 Medium', '游明朝体', 'Yu Mincho Medium', YuMincho, 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ 明朝', MS Mincho, 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
        font-style: normal;
        font-weight: 600;
        font-size: 1.6rem;
        color: #333333;
        width: 100%;
        line-height: 1.44;
        letter-spacing: 0.01em;
        background: no-repeat url(images/background.png) top center / 100% 100%;
                position: relative;
                background-repeat: repeat-y;
                background-size: 100%;
}
body p,
.content-textbox{
        line-height: 1.7;
        letter-spacing: 0.2rem;
}

a,
a:hover,
a:visited {
        color: #333;
        text-decoration: none;
}

a {
        outline: none;
}

a:focus {
        outline: none;
}

h1,
h2,
h3,
h4,
h5 {
        font-weight: bold;
}

.pc {
        display: block;
}

.mobile {
        display: none;
}

.sp {
        display: none;
}

.br_sp {
        display: none;
}

.top_menu01 {
        color: #ffffff;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
}

.breadcrumb-box {
        width: 100%;
        height: auto;
        color: var(--white-color);
        background: var(--bluegray-color);
}
.breadcrumb {
        width: 100%;
        max-width: 1200px;
        height: auto;
        overflow: hidden;
        margin: 0 auto;
        padding-left: 2rem;
        background: var(--bluegray-color);
        font-size: 14px;
}

.breadcrumb li {
        display: inline-block;
        height: auto;
        list-style: none;
        font-weight: normal;
        padding: 0.5rem 0;
        color: #ffffff;
}

.breadcrumb li a {
        text-decoration: none;
        color: #ffffff;
}

.breadcrumb li::after {
        content: '>';
        padding: 0 3px;
        color: #ffffff;
}

#copyright {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        color: var(--white-color);
        background: var(--bluegray-color);
}

/* ---------- 共通色 ---------- */
:root {
        --white-color: #f9f7ee;
}
:root {
        --gold-color: #b49147;
}
:root {
        --blue-color: #003366;
}
:root {
        --red-color: #872e4f;
}
:root {
        --bluegray-color: #1c222d;
}

/* ---------- 三角 ---------- */
.fa-chevron-up:before {}

/*-アコーディオンどこでも-*/
details[open] summary+* {
        position: relative;
}

details[open] summary::before {
        position: fixed;
        inset: 0;
        content: '';
}

/* ---------- page top ボタン ---------- */
#pageTop {
        position: fixed;
        bottom: 2em;
        right: 2em;
        z-index: 200;
        opacity: 1;
}

#pageTop a {
        display: block;
        z-index: 999;
        width: 60px;
        height: 60px;
        color: var(--white-color);
        font-size: 1.5em;
        font-weight: bold;
        line-height: 55px;
        text-decoration: none;
        text-align: center;
        background-color: var(--blue-color);
        border: solid 1px var(--white-color);
}


/* ---------- ヘッダー ---------- */
#header {
        position: absolute;
        width: 100%;
        height: auto;
        margin: 0 auto;
        z-index: 5;
}
#header .header-logo h1 {
        position: absolute;
        top:50px;
        left: 50px;
        z-index: -999;
        font-size: 1px;
        color: #A4C0DC;
}
#header .header-box {
        width: 95vw;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 1rem;
        margin: 0 auto;
}
#header .header-box .content {
        width: 16%;
        min-width: 80px;
}
#header .header-box .content a {
        width: 100%;
}
#header .header-box .content a img {
        width: 100%;
        max-width: 140px;
        min-width: 80px;
}
#header .header-box .top-menu {
        width: 84%;
        display: flex;
        justify-content: right;
        align-items: center;
}
#header .header-box .top-menu dd {
        color: var(--white-color);
        text-decoration: none;
        text-align: center;        
}
#header .header-box .top-menu dd .p1 {
        font-size: 13px;
}
#header .header-box .top-menu dd p {
        font-weight: 500;
        color: #fff;
        text-shadow: 0 0 5px #003366;
}
#header .header-box .top-menuddtop {
        padding-right: 1rem;
}
#header .header-box .top-menudd {
        border-left: solid 1px #fff;
        border-right: solid 1px #fff;
}
#header .header-box .toplr {
        padding: 0 1rem;
}
#header .header-box .top-menuddl {
        border-left: solid 1px #fff;
        padding-right: 0;
        padding-left: 1rem;
}
#header .header-box .top-menuddbig {
        width: 11vw;
        max-width: 166px;
        min-width: 110px;
}

/* ---------- フッター ---------- */
#footer {
        width: 100%;
        height: auto;
        background-color: var(--bluegray-color);
        padding: 3rem 0 2rem;
        margin-top: auto;
}
#footer .content {
        width: 94vw;
        max-width: 1240px;
        margin: 0 auto;
}
#footer .content img {
        width: 70%;
        max-width: 480px;
        padding-bottom: 1rem;
}
#footer .footer-text {
        width: 100%;
        display: flex;
        align-items: center;
}
#footer  .footer-text dd a {
        color: var(--white-color);
        text-decoration: none;
        padding: 2rem;
}
#footer .footer-text .footer-text-a1,
#footer .footer-text .footer-text-a3 {
        border-left: solid 1px var(--white-color);
}
#footer .footer-text .footer-text-a2 {
        border-left: solid 1px var(--white-color);
        border-right: solid 1px var(--white-color);
}

/*scroll_up ｜下から上へ出現*/
.scroll_up {
        transition: 0.8s ease-in-out;
        transform: translateY(30px);
        opacity: 0;
}

.scroll_up.on {
        transform: translateY(0);
        opacity: 1.0;
}

/*scroll_in ｜右から左へ出現*/
.slide_in {
        transition: 1s ease-in-out;
        transform: translateX(200px);
        opacity: 0;
}

.slide_in.on {
        transform: translateX(0);
        opacity: 1.0;
}

/* ここから下お問合わせのCSS */
#mail {
        color: var(--white-color);
        position: fixed;
        bottom: 6.5em;
        right: 2em;
        z-index: 201;
}

.drawer_open label {
        display: block;
        height: 60px;
        width: 100%;
}
.drawer_open2 {
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 101;
        /* 重なり順を一番上にする */
        cursor: pointer;
        color: var(--white-color);
        background-color: var(--red-color);
        border: solid 1px var(--white-color);
}

#mail .contact-box {
        padding-top: 0.5rem;
}
.drawer_open2 img {
        display: flex;
        width: 70%;
        margin: 0 auto;
}
.drawer_open2 p {
        font-size: 12px;
        text-align: center;
        letter-spacing: 0.1em;
}
.drawer_open2 a {
        text-decoration: none;
        color: var(--white-color);
}
.nav_mail {
        font-size: 12px;
        margin-top: -2.2rem;
        text-align: center;
        letter-spacing: 0.1em;
}
#drawer_input {
        width: 60px;
        height: 60px;
}

#menu {
        z-index: 19;
}

/* ここから下がハンバーガーメニューに関するCSS */
#nav-drawer {
        color: var(--white-color);
        position: fixed;
                bottom: 11em;
                right: 2em;
                z-index: 200;
}
/* チェックボックスを非表示にする */
.drawer_hidden {
        display: none;
}
/* ハンバーガーアイコンの設置スペース */
.drawer_open {
        display: block;
        height: 60px;
        width: 60px;
        position: relative;
        z-index: 100;
        /* 重なり順を一番上にする */
        cursor: pointer;
        color: var(--white-color);
        background-color: var(--gold-color);
        border: solid 1px var(--white-color);
}
/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
        content: '';
        display: block;
        height: 2px;
        width: 40px;
        background: var(--white-color);
        transition: 0.5s;
        position: absolute;
        right: 1rem;
        top: 2.3rem;
}
/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
        top: -1.2rem;
        left: 0;
}
/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
        top: 1.1rem;
        left: 0;
}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked~.drawer_open span {
        background: rgba(255, 255, 255, 0);
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked~.drawer_open span::before {
        top: 0;
        transform: rotate(45deg);
}
#drawer_input:checked~.drawer_open span::after {
        top: 0;
        transform: rotate(-45deg);
}

/* メニューのデザイン*/
.nav_content {
        width: 30%;
        height: 100%;
        position: fixed;
        top: 0;
        right: -800px;
        /* メニューを画面の外に飛ばす */
        z-index: 99;
        background: var(--bluegray-color);
        transition: .5s;
}

/* メニュー黒ポチを消す */
.nav_list {
        list-style: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked~.nav_content {
        right: 0;
        /* メニューを画面に入れる */
}

/* 文字 */
.nav_item {
        border-bottom: solid 1px #f9f7ee49;
        color: var(--white-color);
        padding: 1rem 0;
        text-align: center;
}
.nav_item .p1 {
        font-size: 12px;
}
.nav_item a {
        text-decoration: none;
        color: var(--white-color);
}

/* ---------- メインエリア ---------- */
.wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
}
#main {
        width: 100%;
        height: auto;
        overflow: hidden;
        margin: 0 auto;
}

#content {        
        width: 100%;
}

#content .top {
        position: relative;
        width: 100%;
        height: 54.2vw;
}

.top-img {
        position: absolute;
        width: 100%;
        height: 45vw;
}

#content .top-img-s {
        position: absolute;
        top: 72%;
        left: 45.5%;
        margin: 0 auto;
        width: 9vw;
}
#content .top-img-s img {
        width: 100%;
}
#content .top-text {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        text-align: center;
        text-shadow: 0px 2px 5px rgba(16, 64, 123, 0.5);
}
#content .top-text .top-p1 {
        font-size: 3.5vw;
        margin-left: 0.5rem;
}
#content .top-text .top-p2 {
        font-size: 14vw;
        margin-top: -4vw;
        margin-right: 0.5rem;
}

#content .top-img {
        position: absolute;
        width: 100%;
        height: 55vw;
}
#content .top-img1 {
        width: 100%;
        height: 41vw;
        overflow: hidden;
}
#content .top-img1 img {
        width: 100%;
        vertical-align: top;
}

#content .top-img2 {
        width: 100%;
        height: 14vw;
        overflow: hidden;
}
#content .top-img2 img {
        width: 50%;
        display: block;
        float: left;
}

/* ---------- 共通 ----------*/
.tcg-box {
        width: 100%;
        margin: 3rem auto;
        padding-bottom: 4rem;
}
.content-title {
        font-size: 32px;
        width: 100%;
        text-align: center;
        padding: 3.5rem 0 2rem;
}
.content-title img {
        height: 40px;
        margin: 0 auto -0.5rem;
}
.content-title02 img {
        height: 40px;
        margin: 0 auto -1.5rem;
}
.content-title-h2 {
        width: 100%;        
        margin: 0 auto;
        text-align: center;
}
.content-title h2 {
        display: inline-block;
        margin: 0 auto;
        margin-top: -1.8rem;
        border-bottom: solid 1.5px #333;
        font-size: 32px;
        
}
.content-textbox {
        width: 100%;
        max-width: 1240px;
        margin: 0 auto;
}
/* ---------- お知らせ ----------*/
.detailText h2 {
        background-color: rgba(255, 255, 255, 0) !important;
}

#content .topics-box {
        width: 100%;
        margin: 0 auto;
        padding: 4rem 0;
        background-image: repeating-linear-gradient(45deg, #b49147 25%, transparent 25%, transparent 75%, #b49147 75%, #b49147), repeating-linear-gradient(45deg, #b49147 25%, #b49747 25%, #b49747 75%, #b49147 75%, #b49147);
                background-position: 0 0, 7px 7px;
                background-size: 14px 14px;
}
#content .topics-box .topics-list{
        width: 94%;
        max-width: 1632px;
        margin: 2rem auto;
        padding: 0 4rem 4rem;
        background-image: linear-gradient(0deg, #f9f7ee, #ffffff);
}
#content .topics-list-box {
        width: 100%;
        max-width: 1240px;
        margin: 0 auto;
}
#content .topics-box .topics-list a,
#content .topics-box .topics-list li {
        text-decoration: none;
        list-style: none
}

.php-copyright a {
        color: #EEE9D5 !important;
}


/* ---------- お知らせの中身 ----------*/
#newsWrap .flex-wrap {
        width: 100%;
        display: flex;
        padding: 1.5rem 0 0.9rem;
        border-bottom: solid 1px #444;
}
#newsWrap .title {
        width: 100%;
}
#newsWrap .date-box {
        display: flex;
}
#newsWrap .title-box {
        margin-left: 3rem;
}
.newMark {
        color: #FFF;
        background-color: #af1c1c;
        padding: 0.1rem 0.5rem 0.2rem;
        margin-left: 1rem;
        font-size: 13px;
}
#newsWrap .up_ymd {
        width: 120px;
        margin-left: 1.5rem;
}
#newsWrap .catName {
        font-size: 15px;
        padding: 0.3rem 1rem;
        text-align: center;
        color: var(--white-color);
}
.link-box {
        display: flex;
        justify-content: center;
        width: 100%;
}
.link-box a {
        color: #fff;
        width: 200px;
        padding: 0.8rem 1rem;
        text-align: center;
        background: #3D3D3E;
}

/* ---------- はじめに ----------*/
.ift-box h2 {
        margin-top: -1rem;
}
.ift-box {
        width: 94%;
        max-width: 1632px;
        margin: 6rem auto 1.5rem;
        padding-bottom: 6rem;
        background: var(--white-color);
}
.ift-box .content-textbox {
        width: 90%;
        text-align: center;
}
.ift-box .content-textbox span {
        display: block;
        text-align: center;
        font-size: 21px;
        font-weight: bold;
        padding-bottom: 1rem;
}

/* ---------- 分譲マンション ----------*/
.ct-w h2 {
        border-bottom: solid 1.5px var(--white-color);
        color: var(--white-color);
}
.cfscontent-textbox {
        display: flex;
        justify-content: space-evenly;
}
.cfs-box {
        width: 30%;
        min-width: 236px;
        background: var(--white-color);
        display: flex;
        flex-direction: column;
}
.cfs-title p {
        width: 100%;
        padding: 1rem;
        text-align: center;
        color: var(--white-color);
}
.cfs-title01 p {
        background: #264938;
}
.cfs-title02 p {
        background: #872e4f;
}
.cfs-title03 p {
        background: #305563;
}
.cfs-img {
        width: 100%;
        overflow: hidden;
}
.cfs-img img {
        width: 100%;
        margin: 0 auto;
}
.cfs-textbox {
        width: 100%;
}
.cfs-textbox ul {
        list-style: none;
}
.cfs-textbox li {
        display: flex;
        align-items: center;
}
.cfs-textbox li span {
        font-size: 14px;
}
.cfs-text-t {
        width: 85%;
        margin: 0 auto;
        padding: 1rem 0 0.5rem;
        font-size: 18px;
        line-height: 1.3;
}
.cfs-text-t2 {
        width: 85%;
        margin: 0 auto;
}
.cfs-link {
        width: 100%;
        padding: 2rem 0;
        margin-top: auto;
}
.cfs-link a {
        color: #fff;
}
.cfs-box-a {
        display: flex;
        align-items: stretch;
        flex-direction: column;
}
.cfs-link01-a,
.cfs-link02-a {
        display: block;
        text-align: center;
        text-decoration: none;
        color: var(--white-color);
        padding: 0.8rem 1rem;
        margin: 0 4rem;
}
.cfs-link01-a {
        background: #264938;
}
.cfs-link02-a {
        background: #872e4f;
}
.cfs-link03-a {
        background: #305563;
}

/* ---------- 売買 ---------- */
.bas-box {
        width: 100%;
        margin: 3rem auto 0;
        background: linear-gradient(45deg, #0000 calc(25% / 3), #f9f6e7 0 calc(50% / 3), #0000 0 calc(250% / 3), #f9f6e7 0 calc(275% / 3), #0000 0), linear-gradient(45deg, #f9f6e7 calc(25% / 3), #0000 0 calc(50% / 3), #f9f6e7 0 25%, #0000 0 75%, #f9f6e7 0 calc(250% / 3), #0000 0 calc(275% / 3), #f9f6e7 0), linear-gradient(-45deg, #0000 calc(25% / 3), #f9f6e7 0 calc(50% / 3), #0000 0 calc(250% / 3), #f9f6e7 0 calc(275% / 3), #0000 0), linear-gradient(-45deg, #f9f6e7 calc(25% / 3), #0000 0 calc(50% / 3), #f9f6e7 0 25%, #0000 0 75%, #f9f6e7 0 calc(250% / 3), #0000 0 calc(275% / 3), #f9f6e7 0) #f9f7ee;
        background-size: 64px 64px;
        background-position: 0 0, 32px 32px;
}
.bas-box h2 {
        margin-top: -1rem;
}
.bas-toptext {
        width: 94%;
        max-width: 1632px;
        margin: 2rem auto 0;
        font-size: 16px;
}
.bas-c {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        max-width: 1240px;
        margin: 0 auto;
}
.bas-bay-g {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 45%;
        background-image: repeating-linear-gradient(45deg, #b49147 25%, transparent 25%, transparent 75%, #b49147 75%, #b49147), repeating-linear-gradient(45deg, #b49147 25%, #b49747 25%, #b49747 75%, #b49147 75%, #b49147);
                background-position: 0 0, 7px 7px;
                background-size: 14px 14px;
}
.bas-bs {
        width: 94%;
        margin: 2rem;
        padding: 2rem;
        background: #fff;
        text-align: center;
}
.bas-c-box {
        text-align: center;
}
.bas-bay .bas-i {
        color: #264938;
        line-height: 1;
}
.bas-sell .bas-i {
        color: var(--red-color);
        line-height: 1;
}
.bas-j {
        font-size: 28px;
        padding-bottom: 1rem;
}
.bct span {
        font-size: 21px;
}


@media screen and (max-width:768px) {
        .bas-c {
                display: block;
                width: 100%;
        }
        .bas-bay-g {
                width: 94%;
                margin: 0 auto;
                margin-bottom: 2rem;
        }
}

/* ---------- アクセス ---------- */
.tcga-box {
        margin: 1.5rem auto 3rem;
        color: var(--white-color);
}
.access-box {
        width: 94%;
        max-width: 1240px;
        margin: 0 auto;
}
.access-box a {
        text-decoration: none;
        color: var(--white-color);
}
.access-box li {
        list-style: none;
}
.ac-t {
        width: 100%;
        display: flex;
        justify-content: space-between;
}
.ac-t-box-left,
.ac-map {
        width: 47%;
        padding-bottom: 4rem;
}
.ac-t-box-left img {
        width: 100%;
}
.ac-title {
        font-size: 28px;
}
.ac-map .shop-map {
        width: 100%;
        height: 700px;
        /* height: 532px; */
}
.ac-t-box-left-img {
        display: flex;
        justify-content: space-between;
        width: 100%;
}
.ac-t-box-left-img img {
        width: calc(100%/2 - 0.4rem);
        height: auto;
        object-fit: contain;
}

/* ---------- お問い合わせ ---------- */
#contact {
        width: 100%;
        background: no-repeat url(images/background2.png) top center / 100% 100%;
                position: relative;
                background-repeat: repeat-y;
                background-size: cover;
}
#contact .main {
        width: 94%;
        max-width: 1240px;
        margin: 0 auto;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="text"],
input[type="date"],
textarea,
button,
select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
}

.contact-main .main-inner {
        width: 100%;
        margin: 0 auto;
        color: black;
}

.contact-main .title-wrap2 {
        position: relative;
        background-color: var(--bluegray-color);
        padding: 1rem;
        /*height: 40px;*/
        margin-bottom: 30px;
        text-align: left;
}

.content-title2 {
        font-size: 2rem;
        color: #ffffff;
}

/* step-progressbar */
.progressbar {
        display: flex;
        flex-wrap: wrap;
        margin: 2rem auto 5rem;
        overflow: hidden;
        width: 94%;
        max-width: 1240px;
}

.progressbar .item {
        position: relative;
        width: 33.3%;
        text-align: center;
        position: relative;
        align-items: center;
        justify-content: center;
        padding: 13px 0;
        font-size: 1.6rem;
        line-height: 1.5;
        background: #eee9d5;
        color: var(--bluegray-color);
}

.progressbar .item:not(:last-child)::before,
.progressbar .item:not(:last-child)::after {
        position: absolute;
        z-index: 2;
        top: 0;
        bottom: 0;
        left: 100%;
        content: '';
        border: 37px solid transparent;
        border-left: 20px solid #eee9d5;
        margin: auto;
}

.progressbar .item:not(:last-child)::before {
        margin-left: 1px;
        border-left-color: #FFF;
}

/* progressbar-active */

.progressbar .item.active {
        z-index: 1;
        background: var(--bluegray-color);
        color: var(--white-color);
}

.progressbar .item.active:not(:last-child)::after {
        border-left-color: var(--bluegray-color);
}

.progressbar .item.active:not(:last-child)::before {
        border-left: none;
}

#formWrap {
        width: 100%;
        height: auto;
        margin-bottom: 40px;
}

#formWrap form {
        width: 100%;
        height: auto;
        margin-top: 40px;
}

.customer-box {
        margin-bottom: 10rem;
}

.form-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4rem;
        border-bottom: 1px solid var(--bluegray-color);
        padding-bottom: 30px;
}

.form-item dt {
        width: 30%;
        font-weight: 700;
}

.form-item dd {
        width: 68%;
}

form span {
        color: #ff0000;
}

form textarea,
#formWrap form input[type="text"] {
        width: 100%;
        padding: 1rem;
        border: solid 1px #acacac;
        font-size: 1.6rem;
        background-color: #ffffff;
}

.notice {
        margin-top: 2em;
}

#formWrap .error_messe {
        color: #ff0000;
        line-height: 2em;
}

.copy-right {
        display: none;
}

.formError {
        left: 60% !important;
        margin-top: -70px !important;
}

/* 確認画面 */

.kakunin-title {
        margin-bottom: 2rem;
        font-size: 1.8rem;
        text-align: center;
}

.contact-kakunin h3 {
        margin-bottom: 40px;
}

.contact-kakunin input[type="submit"],
.contact-kakunin input[type="button"] {
        display: block;
        width: 40%;
        padding: 1.5rem;
        margin: 0 auto;
        cursor: pointer;
        background-color: var(--bluegray-color);
        border: 1px solid #ffffff;
        color: #ffffff;
        border-radius: 3px;
        font-size: 1.7rem;
        text-decoration: none;
        text-align: center;
        box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
}

.formWrap-style {
        display: flex;
        align-items: center;
        justify-content: center;
}

.contact-kakunin input[type="submit"]:hover,
.contact-kakunin input[type="button"]:hover {
        transform: scale(1.01);
        transition: .3s;
}

.contact-kakunin input[type="button"] {
        background-color: #96A9B3;
}

.contact-kakunin table.formTable {
        width: 94%;
        max-width: 1240px;
        margin: 20px auto 4rem;
        border-collapse: collapse;
}

.contact-kakunin table.formTable th,
.contact-kakunin table.formTable td {
        border: 1px solid #96A9B3;
        padding: 10px;
}

.contact-kakunin table.formTable th {
        width: 30%;
        font-weight: normal;
        background-color: var(--bluegray-color);
        text-align: left;
        color: #ffffff;
}

.thanks-box h3 {
        width: 100%;
        margin: 0 auto;
        text-align: center;
}
.thanks-box {
        margin: 4rem auto;
}
.button-box {
        margin: 4rem auto;
}
.button-box a {
display: block;
width: 40%;
padding: 1.5rem;
margin: 1rem auto;
cursor: pointer;
background-color: var(--bluegray-color);
border: 1px solid #ffffff;
color: #ffffff;
border-radius: 3px;
font-size: 1.6rem;
text-decoration: none;
text-align: center;
box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
}
.button-box a:hover {
        opacity: 0.6;
}


/* privacy */
.p-space {
        width: 100%;
        height: 80px;
        background: var(--bluegray-color);
}
.title-block{
        width: 100%;
}
.jp-title {
        display: block;
        width: 100%;
        text-align: center;
        margin: -1.5rem auto 4rem;
}

.top-imgbox {
        position: relative;
        width: 100%;
        height: 100px;
        overflow: hidden;
}

.top-imgbox img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
}
#privacy {
        background: no-repeat url(images/background2.png) top center / 100% 100%;
                position: relative;
                background-repeat: repeat-y;
                background-size: cover;
}
.privacy .privacy-area {
        width: 100%;
        height: 250px;
        overflow: auto;
        margin-top: 20px;
        padding: 1.4rem;
        border: 1px solid rgba(0, 0, 0, 0.2);
        background-color: #ffffff;
}

.privacy-box {
        width: 94%;
        margin: 0 auto;
        padding-bottom: 4rem;
}


form .button-box {
        display: flex;
        align-items: center;
        text-align: center;
        margin-top: 3rem;
}

form .button-box input {
        display: block;
        width: 40%;
        padding: 1.5rem;
        margin: 1rem auto;
        cursor: pointer;
        background-color: #96A9B3;
        border: 1px solid #ffffff;
        color: #ffffff;
        border-radius: 3px;
        font-size: 1.6rem;
        text-decoration: none;
        text-align: center;
        box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
}

form .button-box input[type="submit"] {
        background-color: var(--bluegray-color);
}

form .button-box input[type="submit"]:hover,
form .button-box input[type="reset"]:hover {
        opacity: 0.6;
}


.city-h-img {
        width: 100%;
}

/* ---------- contact-thanksページ ---------- */

.thanks-title {
        text-align: center;
        font-size: 1.8rem;
        margin-bottom: 2rem;
}

.contact-thanks .button-box a {
        display: block;
        width: 60%;
        padding: 1.5rem;
        margin: 20rem auto 0;
        cursor: pointer;
        background-color: #171C61;
        border: 1px solid #ffffff;
        color: #ffffff;
        border-radius: 3px;
        font-size: 1.7rem;
        text-decoration: none;
        text-align: center;
        box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
}

.contact-thanks .button-box a:hover {
        opacity: 0.8;
}

/*----- 会社概要 -----*/
.main-company {
        width: 100%;
        max-width: 1240px;
        min-height: 750px;
        margin: 0 auto;
        padding: 4rem 0;
        background: no-repeat url(images/background2.png) top center / 100% 100%;
        position: relative;
        background-repeat: repeat-y;
        background-size: cover;
}
.main-company-list {
        width: 90%;
        margin: 0 auto;
        padding-bottom: 4rem;
        list-style: none;
}
.main-company-box {
        width: 84%;
        margin: 0 auto;
}
.company-list {
        display: flex;
        padding: 3rem 0;
        border-bottom: 1px solid var(--bluegray-color);
}
.company-list dt {
        width: 20%;
        font-weight: 900;
}
.company-list .space {
        padding-bottom: 0.5rem;
}
.main-company-list a {
        text-decoration: none;
}



@media screen and (max-width:767px) {
        .contact-main .main-inner {
                margin-bottom: 10rem;
        }

        .progressbar {
                margin: 2rem auto;
        }

        .progressbar .item {
                font-size: 11.5px;
                line-height: 1.4;
                padding: 10px 0;
        }

        .progressbar .item:not(:last-child)::before,
        .progressbar .item:not(:last-child)::after {
                border-width: 25px;
                border-left-width: 12px;
        }

        .form-item {
                display: block;
                margin-bottom: 2rem;
        }

        .form-item dt {
                width: 100%;
                margin-bottom: 0.5rem;
                font-size: 1.5rem;
        }

        .form-item dt.form-item-title {
                margin-bottom: 1rem;
        }

        .form-item dd {
                width: 100%;
        }

        .form-item-checkbox {
                text-indent: 1rem;
        }

        #formWrap form {
                margin-top: 2rem;
        }

        form input[type="text"],
        form textarea {
                line-height: 2em;
        }

        .customer-box {
                margin-bottom: 3rem;
        }

        /* contact-kakunin */

        .contact-kakunin h3 {
                margin-bottom: 2rem;
        }

        .formWrap-style {
                margin-top: 5rem;
        }

        .contact-kakunin input[type="button"],
        .contact-kakunin input[type="submit"],
        .contact-thanks .button-box a {
                width: 100%;
                margin: 5rem auto;
        }

        .formWrap-style {
                display: block;
        }

        .contact-kakunin table.formTable {
                margin: 0 auto;
                margin-bottom: 2rem;
        }

        .contact-kakunin table.formTable th,
        .contact-kakunin table.formTable td {
                display: block;
                width: 100%;
                border-top: none;
        }

        .contact-kakunin table.formTable td {
                margin-bottom: 0.5rem;
        }

        form .button-box {
                display: block;
                width: 100%;
                height: auto;
                margin-bottom: 2em;
        }

        form .button-box input {
                width: 100%;
        }

}

@media screen and (max-width:1000px) {
        .bas-bs {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 190px;
        }

        .bas-c-box {
                height: 60px;
        }

        .bas-c-text {
                height: 86px;
        }

        #newsWrap .flex-wrap,
        #news-a .newsList {
                display: block;
        }
        #newsWrap .title-box {
        margin-left: 0;
        }
        #newsWrap .date-box {
                margin-bottom: 0.7rem;
        }
        #newsWrap .up_ymd {
                margin-left: 1rem;
        }
        .ac-map .shop-map {
        height: 400px;
        }
}

@media screen and (max-width:768px) {
        .pc {
                display: none;
        }
        .sp {
                display: block;
        }
        .br_sp {
                display: block;
        }
        #header .header-box {
                justify-content: left;
                padding-left: 1rem;
        }
        #header .header-box .top-menu {
                display: none;
        }
        .p-space {
                height: 58px;
        }
        #footer .footer-text {
                flex-wrap: wrap;
        }
        #footer .footer-text .footer-text-a1, #footer .footer-text .footer-text-a3 {
                border-left: none;
                padding-bottom: 0.5rem;
        }
        #footer .footer-text .footer-text-a2 {
                border-left: none;
                border-right: none;
        }
        #footer .footer-text .footer-text-a1, 
        #footer .footer-text .footer-text-a3 {
                border-right: solid 1px var(--white-color);
        }
        #footer .content img {
                width: 80%;
                padding-left: 2rem;
        }
        #footer .footer-text dd a {
                padding: 0 2rem;
        }
        #nav-drawer {
                top: 1rem;
                right: 1rem;
                opacity: 0.9;
        }
        #mail {
                top: 7.5rem;
                right: 1rem;
                opacity: 0.9;
        }
        #pageTop {
                right: 1rem;
                opacity: 0.9;
        }
        .nav_content {
                width: 60%;
        }

        .cfscontent-textbox {
                display: block;
                padding: 0 2rem;
        }
        .cfs-box {
                width: 100%;
                margin-bottom: 2rem;
        }
        .bas-bs {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 160px;
        }
        .bas-c-box {
                height: 60px;
        }
        .bas-c-text {
                height: 60px;
        }
        .bct span {
                font-size: 18px;
        }

        #news-a {
                padding-top: 12vw;
        }

        .ac-t {
                display: block;
                width: 100%;
        }
        .ac-t-top {
                padding-bottom: 4rem;
                border-bottom: solid 1px var(--white-color);
        }
        .ac-t-bottom {
                padding-top: 4rem;
        }


        .ac-t-box-left,
        .ac-map {
                width: 100%;
        }
        .ac-map {
                padding-bottom: 0;
        }

        .main-company {
                padding: 0 0 2rem;
        }
        .company-list {
                padding: 2rem 0;
        }
        .company-list02 {
                padding: 1rem 0 2rem;
        }
        .main-company-box {
                width: 100%;
        }
        .company-list {
                display: block;
        }
        .company-list dt {
                width: 100%;
                padding-bottom: 1rem;
                font-size: 18px;
        }

        #content .top-text .top-p1 {
                font-size: 3.4vw;
        }
}

@media screen and (max-width:500px) {
        #content .top-text {
                top: 50%;
        }
        #content .top-text .top-p1 {
                font-size: 5.1vw;
        }
        #content .top-text .top-p2 {
                font-size: 21vw;
        }
        #content .top-img1 {
                height: 40vw;
        }
        #content .top-img-s {
                top: 80%;
                left: 41.5%;
                width: 15vw;
        }
        #content .top {
                height: 65.5vw;
        }
        #content .top-img2 {
                height: 25.6vw;
        }
        #content .top-img2 img {
                width: 100%;
                display: block;
                float: left;
        }
}

@media screen and (max-width:409px) {
        .bas-c-text {
                height: 72px;
        }
        #newsWrap .date-box {
                display: block;
        }
        #newsWrap .ymd-new {
                padding-top: 0.5rem;
        }
        #newsWrap .up_ymd {
                margin-left: 0;
        }
        
        .nav_content {
                width: 100%;
        }
}