/*** The new CSS reset - version 1.5.1 (last updated 1.3.2022) ***/

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

ol,ul,menu{list-style:none}

img{max-width:100%}

table{border-collapse:collapse}

::-moz-placeholder{color:unset}

:-ms-input-placeholder{color:unset}

::placeholder{color:unset}

:where([hidden]){display:none}

:where([contenteditable]){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space}

:where([draggable="true"]){-webkit-user-drag:element}

html, body{ width:100vw; overflow-x: hidden; overflow-y: auto; margin: 0; }

body {
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 14px;
}

input,
button,
select,
textarea {
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

label {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

select {
    -webkit-appearance: menulist;
       -moz-appearance: menulist;
            appearance: menulist;
}

/*IE用*/

select::-ms-expand {
    display: block;
}

:root {
    --theme-color: #21adde;
    --main-bg-color: #f7f6f3;
    --link-color: #0081ba;

    --main-width: 1100px;
    --normal-text-color: #000;
    --untoned-gray: #eee;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
        text-decoration: underline;
    }

input, textarea {
  border: 1px solid #ddd;
  border-radius: 5px;
}

input {
  padding: 10px;
}

select {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

textarea {
  margin: 10px 0 0;
  padding: 5px;
  width: 100%;
}

.buttons {
  text-align: center;
}

input[type=submit], input[type=button], button {
  background: var(--theme-color);
  padding: 10px 30px;
  color: #fff;
  border: none;
  font-size: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

input[type=submit]:hover, input[type=button]:hover, button:hover {
    opacity: 0.7;
    cursor: pointer;
  }

.wrap {
    width: var(--main-width);
    margin: 0 auto;
}

.spOnly {
	display: none !important;
}

@media screen and (max-width: 767px) {
	.spOnly {
		display: initial !important;
	}

	.pcOnly {
		display: none !important;
	}

    :root {
        --main-width: 100%;
    }

    .wrap {
        padding: 0 5px;
    }

        .wrap.spNoPadding {
            padding: 0;
        }
}

body.public, body.users {
    background: #fff;

}

body.public select, body.users select {
        background: #fff;
    }

body.public header .catchCopy, body.users header .catchCopy {
            font-size: .8rem;
        }

body.public header .row, body.users header .row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 20px 0;
        }

body.public header nav .closeBox, body.users header nav .closeBox {
                display: none;
            }

body.public header nav a, body.users header nav a {
                font-size: .9rem;
                margin-left: 15px;
            }

body.public header nav .txt, body.users header nav .txt {
                color: #000;

            }

body.public header nav .btn, body.users header nav .btn {
                color: #fff;
                border-radius: 20px / 50%;
                padding:  8px 12px;
                background: var(--theme-color);
            }

body.public header nav .btn i, body.users header nav .btn i {
                    margin-right: 10px;
                }

body.public footer, body.users footer {
        border-top: 6px var(--theme-color) solid;
    }

body.public footer .siteInfo, body.users footer .siteInfo {
            display: flex;
            align-items: center;
            margin: 30px 0;
        }

body.public footer .siteInfo .text, body.users footer .siteInfo .text {
                background: var(--main-bg-color);
                padding: 12px 20px;
                border-radius: 10px;
                margin-left: 30px;
                line-height: 1.8;
            }

body.public footer .inSiteLinks, body.users footer .inSiteLinks {
            background: var(--main-bg-color);
            padding: 15px 20px;
            border-radius: 10px;
            font-weight: bold;
        }

body.public footer .inSiteLinks .miscPages, body.users footer .inSiteLinks .miscPages {
                margin-top: 10px;
            }

body.public footer .inSiteLinks .miscPages .hojokinNotation, body.users footer .inSiteLinks .miscPages .hojokinNotation {
                    float: right;
                    color: #888;
                }

body.public footer .copyRights, body.users footer .copyRights {
            text-align: center;
            padding: 7px 0;
            font-size: .8rem;
        }

body.public .tableInfo, body.users .tableInfo {
        width: 100%;
    }

body.public .tableInfo th, body.public .tableInfo td, body.users .tableInfo th, body.users .tableInfo td {
            padding: 5px 10px;
        }

body.public .tableInfo th, body.users .tableInfo th {
            background: var(--theme-color);
            border: 1px solid var(--theme-color);
            color: #fff;
            vertical-align: top;
            text-align: left;
            vertical-align: middle;
        }

body.public .tableInfo td, body.users .tableInfo td {
            border: 1px solid #ccc;
            border-left: 0;
        }

body.public .tableInfo.th250 th, body.users .tableInfo.th250 th {
                width: 250px;
            }

body.public .underlinedHeadline, body.users .underlinedHeadline {
        font-size: 24px;
        color: #333;
        margin-bottom: 50px;
        position: relative;
        text-align: center;
    }

body.public .underlinedHeadline::after, body.users .underlinedHeadline::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -24px;
            display: inline-block;
            width: 150px;
            height: 6px;
            transform: translateX(-50%);
            background-image: linear-gradient(90deg,#3ad8ff,#04a7ff);
        }

body.public .underlinedHeadline.fullline, body.users .underlinedHeadline.fullline {
            text-align: left;
        }

body.public .underlinedHeadline.fullline::after, body.users .underlinedHeadline.fullline::after {
                width: 100%;
            }

body.public .breadcrumb, body.users .breadcrumb {
        font-size: 15px;
        margin-top: 20px;
    }

body.public .breadcrumb a.current, body.users .breadcrumb a.current {
            color: var(--normal-text-color);
            cursor: default;
            pointer-events: none;
        }

body.public .breadcrumb a.current:hover, body.users .breadcrumb a.current:hover {
                text-decoration: none;
            }

body.public .withBottomSpacer, body.users .withBottomSpacer {
        margin-bottom: 30px;
    }

body.public .buttonsBox, body.users .buttonsBox {
        padding: 10px 0;
        text-align: center;
    }

@media screen and (min-width: 768px) {
        body.public header, body.users header {
            background: #f8f8f8;
            border-bottom: 1px solid #dedede;
        }
}

@media screen and (max-width: 767px) {
        body.public header, body.users header {
            padding: 9px 12px 3px 8px;
        }

            body.public header .catchCopy, body.users header .catchCopy {
                font-size: .7rem;
            }

            body.public header .logo, body.users header .logo {
                width: 78%;
            }

            body.public header .fa-bars, body.users header .fa-bars {
                font-size: 27px;
            }

            body.public header nav, body.users header nav {
                display: none;
                position: fixed;
                background:rgba(26, 142, 198, 0.85);
                top: 85px;
                right: 0;
                text-align: right;
                padding: 2px 2% 2px 0;
                width: 70vw;
                z-index: 1000;
            }

                body.public header nav .closeBox, body.users header nav .closeBox {
                    display: block;
                }

                body.public header nav a, body.users header nav a {
                    display: block;
                    font-size: 1rem;
                    color: #fff;
                    margin-left: 0;
                    padding: 8px 10px 8px 3px;
                }

                    body.public header nav a:first-child, body.users header nav a:first-child {
                        border-bottom: 1px dashed #fff;
                        margin-bottom: 3px;
                    }

                body.public header nav .btn, body.public header nav .txt, body.users header nav .btn, body.users header nav .txt {
                    background: transparent;
                    font-size: 1rem;
                    color: #fff;
                    border-radius: 0;
                    padding: 8px 10px 8px 3px;
                    margin: 0;
                }
            body.public footer .wrap, body.users footer .wrap {
                padding: 0;
            }

            body.public footer .siteInfo, body.users footer .siteInfo {
                flex-direction: column;
                margin: 20px 0;
            }

                body.public footer .siteInfo .text, body.users footer .siteInfo .text {
                    background: transparent;
                    padding: 12px 20px;
                    border-radius: 0;
                    margin-left: 0;
                    line-height: 1.8;
                }

            body.public footer .inSiteLinks, body.users footer .inSiteLinks {
                flex-direction: column;
                width: 100%;
            }

                body.public footer .inSiteLinks div, body.users footer .inSiteLinks div {
                    display: flex;
                    flex-direction: column;
                }

                    body.public footer .inSiteLinks div a, body.users footer .inSiteLinks div a {
                        display: block;
                        padding: 5px 0;
                    }

                    body.public footer .inSiteLinks div .hojokinNotation, body.users footer .inSiteLinks div .hojokinNotation {
                        text-align: right;
                    }

            body.public footer .copyRights, body.users footer .copyRights {
                font-size: .7rem;
            }
}

body.public.home .buchinuki {
        margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw);
    }

body.public.home .buchinuki {
        background: #fff;
        padding-top: 15px;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;

    }

body.public.home .buchinuki img {
            display: inline-block;
        }

body.public.home .boatsSection {
        background: #fff;
        padding: 16px 0;
        margin: 0 auto;
    }

body.public.home .boatsList {
        display: flex;
        justify-content: center;
        gap: 30px;

    }

body.public.home .boatsList .boat {
            background-color: var(--main-bg-color);
            width: 250px;
            height: 340px;
            box-shadow: 0px 0px 1px 1px rgb(0 0 0 / 20%);
        }

body.public.home .boatsList .boat:hover {
                text-decoration: none;
                opacity: .8;
            }

body.public.home .boatsList .boat .img {
                width: 100%;
                height: auto;
                max-height: 187px;
                display: block;
            }

body.public.home .boatsList .boat .desc {
                padding: 12px 16px;
            }

body.public.home .boatsList .boat .desc .names {
                    height: 72px;
                    padding: 4px 0px;

                }

body.public.home .boatsList .boat .desc .names .manufacturerName {
                        font-size: 14px;
                        line-height: 20px;
                        display: block;
                    }

body.public.home .boatsList .boat .desc .names .name {
                        font-size: 17px;
                        line-height: 22px;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                    }

body.public.home .boatsList .boat .spec {
                display: flex;
                color: #333;
                height: 30px;
            }

body.public.home .boatsList .boat .spec dl {
                    width: 50%;
                    display: flex;
                    margin: 0;
                }

body.public.home .boatsList .boat .spec dl dt {
                        width: 45px;
                        font-size: 13px;
                        background: #f5f5f5;
                        border: 1px solid #999;
                        border-radius: 4px;
                        display: flex;
                        justify-content: center;
                        margin: auto 0;
                        flex-shrink: 0;
                        align-items: center;
                    }

body.public.home .boatsList .boat .spec dl dd {
                        font-size: 14px;
                        padding-left: 4px;
                        margin: auto 0;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

body.public.home .searchSection {
        background: var(--main-bg-color);
        padding: 10px 0;
        margin: 20px calc(50% - 50vw);
    }

body.public.home .searchSection .inner {
            background: #fff;
            margin: 30px auto;
            padding: 20px 30px;
        }

body.public.home .searchSection .inner h3 {
                font-size: 20px;
                color: #333;
                margin: 8px;
            }

body.public.home .searchSection .inner .searchByType {
                display: flex;
                justify-content: space-evenly;
            }

body.public.home .searchSection .inner .searchByType .boatType {
                    display: block;
                    text-align: center;
                }

body.public.home .searchSection .inner .searchByType .boatType:hover {
                        text-decoration: none;
                        opacity: .8;
                    }

body.public.home .searchSection .inner .searchByType .boatType .img {
                        display: block;
                        margin: 20px auto;
                        width: 120px;
                        height: auto;
                    }

body.public.home .searchSection .inner .searchByType .boatType .name {
                        margin: 20px 0;
                        font-size: 17px;
                        font-weight: normal;
                    }

body.public.home .searchSection .inner .searchByManufacture {
                margin-bottom: 22px;
            }

body.public.home .searchSection .inner .searchByManufacture .manufactures {
                    margin: 16px 0px;
                }

body.public.home .searchSection .inner .searchByManufacture .manufactures a {
                        margin: 16px;
                        font-size: 17px;
                    }

body.public.home .searchSection .inner.searchByMisc {
                display: flex;
                justify-content: space-between;
            }

body.public.home .searchSection .inner.searchByMisc .block {
                    width: 24%;
                }

body.public.home .searchSection .inner.searchByMisc .block nav a {
                        display: block;
                        font-size: 17px;
                        margin: 4px 16px;
                    }

body.public.home .shopsSection {
        padding: 16px 0;
        margin: 0 auto;
    }

body.public.home .shopsSection .inner {
            border-radius: 10px;
            background: var(--main-bg-color);
            padding: 12px 30px;
        }

body.public.home .shopsSection .inner h3 {
                font-size: 20px;
            }

body.public.home .shopsSection .inner nav a {
                display: inline-block;
                margin-right: 25px;
                font-size: 18px;
            }

body.public.home .shopsSection .inner nav a:last-child {
                    margin-right: 0;
                }

body.public.home .marinaSection {
        margin-bottom: 30px;

    }

body.public.home .marinaSection .inner {
            border-radius: 10px;
            background: var(--main-bg-color);
            padding: 12px 30px;
        }

body.public.home .marinaSection .inner h3 {
                font-size: 20px;
            }

body.public.home .marinaSection .inner .desc {
                margin: 16px 0;
                color:#333;
            }

body.public.home .marinaSection .inner nav a {
                display: inline-block;
                margin-right: 25px;
                font-size: 18px;
            }

body.public.home .marinaSection .inner nav a:last-child {
                    margin-right: 0;
                }

@media screen and (max-width: 767px) {
        body.public.home .boatsList {
            gap: 15px;
            padding: 0;
            flex-wrap: wrap;
        }

            body.public.home .boatsList .boat {
                width: calc((100% - 30px) / 2);
                height: auto;
                font-size: .8rem;
            }

                body.public.home .boatsList .boat .desc {
                    padding: 7px;
                }
                            body.public.home .boatsList .boat .desc .spec dl dt {
                                font-size: 12px;
                                width: auto;
                                padding: 0 4px;
                            }

                            body.public.home .boatsList .boat .desc .spec dl dd {
                                font-size: 12px;
                                padding-left: 2px;
                            }
            body.public.home .searchSection .inner {
                width: 95%;
            }

                body.public.home .searchSection .inner .searchByType {
                    flex-wrap: wrap;
                }

                body.public.home .searchSection .inner.manufacturesWrapper {
                    display: flex;
                    padding: 10px;
                }
                        body.public.home .searchSection .inner.manufacturesWrapper .searchByManufacture h3 {
                            margin: 5px 0 0;
                            font-size: 17px;
                            letter-spacing: -1px;
                        }
                        body.public.home .searchSection .inner.manufacturesWrapper .searchByManufacture .manufactures {
                            margin-top: 8px;

                        }
                            body.public.home .searchSection .inner.manufacturesWrapper .searchByManufacture .manufactures a {
                                display: block;
                                margin: 7px 0;
                                margin-left: 5px;
                            }

            body.public.home .searchSection .inner.searchByMisc {
                flex-wrap: wrap;
                padding: 15px;
            }
                    body.public.home .searchSection .inner.searchByMisc .block h3 {
                        font-size: 17px;
                        letter-spacing: -1px;

                    }
                    body.public.home .searchSection .inner.searchByMisc .block{
                    width: 47%}
            body.public.home .shopsSection nav {
                display: flex;
                flex-direction: column;
            }

                body.public.home .shopsSection nav a {
                    display: block;
                }
            body.public.home .marinaSection nav {
                display: flex;
                flex-direction: column;
            }

                body.public.home .marinaSection nav a {
                    display: block;
                }

}

body.manufacturesIndex .manufacturesList {
        background: var(--main-bg-color);
        padding: 25px 30px;
    }

body.manufacturesIndex .manufacturesList h2 {
            font-size: 1.3rem;
            margin: 0 0 20px;
        }

body.manufacturesIndex .manufacturesList .manufacturesContainer {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
        }

body.manufacturesIndex .manufacturesList .manufacturesContainer a {
                display: block;
                width: 24%;
                font-size: 1rem;
            }

body.manufacturesIndex .manufacturesList .manufacturesContainer a .img {
                    display: inline-block;
                    margin-right: 10px;
                    vertical-align: middle;
                }

body.manufacturesIndex .manufacturesList .manufacturesContainer::before{
                content: "";
                display: block;
                width: 24%;
                order: 1;
            }

body.manufacturesIndex .manufacturesList .manufacturesContainer::after{
                content: "";
                display: block;
                width: 24%;
            }

body.manufacturesIndex .manufacturesList + .manufacturesList {
            margin-top: 30px;
        }

body.manufacturesIndex .bottomPageSwitcher {
        display: flex;
        justify-content: center;
        gap: 60px;
        margin: 60px;
    }

body.manufacturesIndex .bottomPageSwitcher a {
            display: block;
            background: var(--theme-color);
            border-radius: 30px/50%;
            padding: 10px 50px;
            color: #fff;
            font-weight: bold;
            font-size: 1.3rem;
        }

@media screen and (max-width: 767px) {
        body.manufacturesIndex .manufacturesList {
            --manufacturers-border-color: #ccc;

            padding: 15px 0 0;
        }

            body.manufacturesIndex .manufacturesList h2 {
                font-size: 1.2rem;
                margin: 0 15px 5px;
            }

            body.manufacturesIndex .manufacturesList .manufacturesContainer {
                flex-direction: column;
                border-top: 1px solid var(--manufacturers-border-color);
            }

                body.manufacturesIndex .manufacturesList .manufacturesContainer a {
                    display: block;
                    width: 100%;
                    margin-right: 0;
                    padding: 10px 15px;
                    font-size: 1rem;
                    border-bottom: 1px solid var(--manufacturers-border-color);
                }

                    body.manufacturesIndex .manufacturesList .manufacturesContainer a .img {
                        display: none;
                    }

        body.manufacturesIndex .bottomPageSwitcher {
            justify-content: space-between;
            gap: initial;
            margin: 0;
            padding: 30px 0;
            width: 100%;
        }

            body.manufacturesIndex .bottomPageSwitcher a {
                background: transparent;
                color: var(--link-color);
                border-radius: 0;
                padding: 0;
                font-weight: normal;
                font-size: 1rem;
            }
}

body.boatShopsIndex .regionNav {
        background: var(--main-bg-color);
        padding: 25px 30px;
    }

body.boatShopsIndex .regionNav h2 {
            font-size: 1.3rem;
            margin: 0 0 4px;
        }

body.boatShopsIndex .regionNav a {
            display: inline-block;
            margin-right: 20px;
            font-size: 1.25rem;
        }

body.boatShopsIndex .bottomPageSwitcher {
        display: flex;
        justify-content: center;
        gap: 60px;
        margin: 60px;
    }

body.boatShopsIndex .bottomPageSwitcher a {
            display: block;
            background: var(--theme-color);
            border-radius: 30px/50%;
            padding: 10px 50px;
            color: #fff;
            font-weight: bold;
            font-size: 1.3rem;
        }

body.boatShopsIndex .regionsWrap {
        background: var(--main-bg-color);
        padding: 1px 50px;
        margin-top: 50px;

    }

body.boatShopsIndex .regionsWrap h2 {
            border-left: 8px solid var(--theme-color);
            padding-left: 15px;
            font-size: 20px;
            margin: 30px 0;
        }

body.boatShopsIndex .regionsWrap .shopCard {
            border: var(--untoned-gray) 1px solid;
            background: #fff;
            width: 1000px;
            margin: 0 auto 30px;
            display: flex;
            justify-content: space-between;
            padding: 30px;
        }

body.boatShopsIndex .regionsWrap .shopCard .pref {
                display: block;
                text-align: center;
            }

body.boatShopsIndex .regionsWrap .shopCard .img {
                display: block;
            }

body.boatShopsIndex .regionsWrap .shopCard .infoBlock {
                width: 640px;
            }

body.boatShopsIndex .regionsWrap .shopCard .infoBlock h3 {
                    margin: 0;
                    font-size: 1.35rem;
                }

body.boatShopsIndex .regionsWrap .shopCard .infoBlock .copy {
                    font-weight: bold;
                    font-size: 1.25rem;
                    margin: 5px 0;
                }

body.boatShopsIndex .regionsWrap .shopCard .infoBlock table {
                    font-size: .8rem;
                    width: 100%;
                }

body.boatShopsIndex .regionsWrap .shopCard .infoBlock table td {
                        padding: 3px 0;
                    }

body.boatShopsIndex .regionsWrap .shopCard .infoBlock table td:nth-child(2) {
                            padding-left: 15px;
                        }

body.boatShopsIndex .regionsWrap .shopCard .infoBlock table span {
                        display: inline-block;
                        background: var(--untoned-gray);
                        border-radius: 13px/50%;
                        padding: 3px 10px;
                        width: 75px;
                        text-align: center;
                        margin-right: 15px;
                    }

body.boatShopsIndex .regionsWrap .shopCard .detailBtn {
                background: var(--link-color);
                color: #fff;
                text-decoration: none;
                border-radius: 20px/50%;
                padding: 7px;
                display: block;
                text-align: center;
                font-weight: bold;
                margin-top: 10px;
            }

body.boatShopsIndex .regionsWrap .shopCard .detailBtn::after {
                    content: "＞";
                    margin-left: 7px;
                }

@media screen and (max-width: 767px) {
        body.boatShopsIndex .regionNav {
            padding: 15px 20px;
        }

            body.boatShopsIndex .regionNav a {
                margin-right: 10px;
                font-size: 1.1rem;
            }

        body.boatShopsIndex .bottomPageSwitcher {
            justify-content: space-between;
            gap: initial;
            margin: 0;
            padding: 30px 0;
            width: 100%;
        }

            body.boatShopsIndex .bottomPageSwitcher a {
                background: transparent;
                color: var(--link-color);
                border-radius: 0;
                padding: 0;
                font-weight: normal;
                font-size: 1rem;
            }

        body.boatShopsIndex .regionsWrap {
            padding: 1px 15px;
            margin-top: 30px;

        }

            body.boatShopsIndex .regionsWrap h2 {
                margin: 20px 0;
            }

            body.boatShopsIndex .regionsWrap .shopCard {
                width: 100%;
                flex-direction: column;
                padding: 30px;
            }

                body.boatShopsIndex .regionsWrap .shopCard .img {
                    display: block;
                    width: 100%;
                }

                body.boatShopsIndex .regionsWrap .shopCard .infoBlock {
                    width: 100%;
                    margin-top: 10px;
                }

                    body.boatShopsIndex .regionsWrap .shopCard .infoBlock h3 {
                        margin: 0;
                        font-size: 1.35rem;
                    }
                    body.boatShopsIndex .regionsWrap .shopCard .infoBlock .copy {
                        font-weight: bold;
                        font-size: 1.1rem;
                        margin: 5px 0;
                    }
                    body.boatShopsIndex .regionsWrap .shopCard .infoBlock table {
                        font-size: .8rem;
                        width: 100%;
                    }
                        body.boatShopsIndex .regionsWrap .shopCard .infoBlock table td {
                            display: block;
                            padding: 0;
                        }
                            body.boatShopsIndex .regionsWrap .shopCard .infoBlock table td:nth-child(2) {
                                padding-left: 0;
                            }
                        body.boatShopsIndex .regionsWrap .shopCard .infoBlock table span {
                            background: transparent;
                            padding: 0;
                            width: auto;
                            text-align: left;
                            margin-right: 5px;
                        }
                            body.boatShopsIndex .regionsWrap .shopCard .infoBlock table span::after {
                                content: '：';
                            }

                    body.boatShopsIndex .regionsWrap .shopCard .infoBlock .detailBtn {
                        border-radius: 5px;
                    }
}

body.boatsIndex .searchConditions {
        background: var(--main-bg-color);
        margin: 30px;
        border-radius: 5px;
        padding: 10px 30px;
        text-align: center;

    }

body.boatsIndex .searchConditions table {
            margin: 0 auto;
            text-align: left;
        }

body.boatsIndex .searchConditions table th, body.boatsIndex .searchConditions table td {
                padding: 5px;
            }

body.boatsIndex .regionsWrap {
        background: var(--main-bg-color);
        padding: 30px 50px 1px;
        margin-top: 50px;
    }

body.boatsIndex .regionsWrap .boatCard {
            border: var(--untoned-gray) 1px solid;
            background: #fff;
            width: 1000px;
            margin: 0 auto 30px;
            display: flex;
            justify-content: space-between;
            padding: 30px;
        }

body.boatsIndex .regionsWrap .boatCard .pref {
                display: block;
                text-align: center;
            }

body.boatsIndex .regionsWrap .boatCard .img {
                display: block;
            }

body.boatsIndex .regionsWrap .boatCard .infoBlock {
                width: 640px;
            }

body.boatsIndex .regionsWrap .boatCard .infoBlock h3 {
                    margin: 0;
                    font-size: 1.35rem;
                }

body.boatsIndex .regionsWrap .boatCard .infoBlock .copy {
                    font-weight: bold;
                    font-size: 1.25rem;
                    margin: 5px 0;
                }

body.boatsIndex .regionsWrap .boatCard .infoBlock table {
                    font-size: .8rem;
                    width: 100%;
                }

body.boatsIndex .regionsWrap .boatCard .infoBlock table td {
                        padding: 3px 0;
                    }

body.boatsIndex .regionsWrap .boatCard .infoBlock table td:nth-child(2) {
                            padding-left: 15px;
                        }

body.boatsIndex .regionsWrap .boatCard .infoBlock table span.title {
                        display: inline-block;
                        background: var(--untoned-gray);
                        border-radius: 13px/50%;
                        padding: 3px 10px;
                        width: 75px;
                        text-align: center;
                        margin-right: 15px;
                    }

body.boatsIndex .regionsWrap .boatCard .detailBtn {
                background: var(--link-color);
                color: #fff;
                text-decoration: none;
                border-radius: 20px/50%;
                padding: 7px;
                display: block;
                text-align: center;
                font-weight: bold;
                margin-top: 10px;
            }

body.boatsIndex .regionsWrap .boatCard .detailBtn::after {
                    content: "＞";
                    margin-left: 7px;
                }

body.boatsIndex .regionsWrap .emptyBox {
            background: #fff;
            padding: 20px 30px;
            margin: 50px;
        }

@media screen and (max-width: 767px) {
                body.boatsIndex .searchConditions table tr, body.boatsIndex .searchConditions table th, body.boatsIndex .searchConditions table td {
                    display: block;
                }

        body.boatShopsIndex .regionNav {
            padding: 15px 20px;
        }

            body.boatShopsIndex .regionNav a {
                margin-right: 10px;
                font-size: 1.1rem;
            }

        body.boatShopsIndex .bottomPageSwitcher {
            justify-content: space-between;
            gap: initial;
            margin: 0;
            padding: 30px 0;
            width: 100%;
        }

            body.boatShopsIndex .bottomPageSwitcher a {
                background: transparent;
                color: var(--link-color);
                border-radius: 0;
                padding: 0;
                font-weight: normal;
                font-size: 1rem;
            }

        body.boatShopsIndex .regionsWrap {
            padding: 1px 15px;
            margin-top: 30px;

        }

            body.boatShopsIndex .regionsWrap h2 {
                margin: 20px 0;
            }

            body.boatShopsIndex .regionsWrap .shopCard {
                width: 100%;
                flex-direction: column;
                padding: 30px;
            }

                body.boatShopsIndex .regionsWrap .shopCard .img {
                    display: block;
                    width: 100%;
                }

                body.boatShopsIndex .regionsWrap .shopCard .infoBlock {
                    width: 100%;
                    margin-top: 10px;
                }

                    body.boatShopsIndex .regionsWrap .shopCard .infoBlock h3 {
                        margin: 0;
                        font-size: 1.35rem;
                    }
                    body.boatShopsIndex .regionsWrap .shopCard .infoBlock .copy {
                        font-weight: bold;
                        font-size: 1.1rem;
                        margin: 5px 0;
                    }
                    body.boatShopsIndex .regionsWrap .shopCard .infoBlock table {
                        font-size: .8rem;
                        width: 100%;
                    }
                        body.boatShopsIndex .regionsWrap .shopCard .infoBlock table td {
                            display: block;
                            padding: 0;
                        }
                            body.boatShopsIndex .regionsWrap .shopCard .infoBlock table td:nth-child(2) {
                                padding-left: 0;
                            }
                        body.boatShopsIndex .regionsWrap .shopCard .infoBlock table span {
                            background: transparent;
                            padding: 0;
                            width: auto;
                            text-align: left;
                            margin-right: 5px;
                        }
                            body.boatShopsIndex .regionsWrap .shopCard .infoBlock table span::after {
                                content: '：';
                            }

                    body.boatShopsIndex .regionsWrap .shopCard .infoBlock .detailBtn {
                        border-radius: 5px;
                    }
}

body.marinasIndex .regionNav {
        background: var(--main-bg-color);
        padding: 25px 30px;
    }

body.marinasIndex .regionNav h2 {
            font-size: 1.3rem;
            margin: 0 0 4px;
        }

body.marinasIndex .regionNav a {
            display: inline-block;
            margin-right: 20px;
            font-size: 1.25rem;
        }

body.marinasIndex .bottomPageSwitcher {
        display: flex;
        justify-content: center;
        gap: 60px;
        margin: 60px;
    }

body.marinasIndex .bottomPageSwitcher a {
            display: block;
            background: var(--theme-color);
            border-radius: 30px/50%;
            padding: 10px 50px;
            color: #fff;
            font-weight: bold;
            font-size: 1.3rem;
        }

body.marinasIndex .regionsWrap {
        background: var(--main-bg-color);
        padding: 1px 50px;
        margin-top: 50px;

    }

body.marinasIndex .regionsWrap h2 {
            border-left: 8px solid var(--theme-color);
            padding-left: 15px;
            font-size: 20px;
            margin: 30px 0;
        }

body.marinasIndex .regionsWrap .marinaCard {
            border: var(--untoned-gray) 1px solid;
            background: #fff;
            width: 1000px;
            margin: 0 auto 30px;
            display: flex;
            justify-content: space-between;
            padding: 30px;
        }

body.marinasIndex .regionsWrap .marinaCard .pref {
                display: block;
                text-align: center;
            }

body.marinasIndex .regionsWrap .marinaCard .img {
                display: block;
            }

body.marinasIndex .regionsWrap .marinaCard .infoBlock {
                width: 640px;
            }

body.marinasIndex .regionsWrap .marinaCard .infoBlock h3 {
                    margin: 0;
                    font-size: 1.35rem;
                }

body.marinasIndex .regionsWrap .marinaCard .infoBlock .copy {
                    font-weight: bold;
                    font-size: 1.25rem;
                    margin: 5px 0;
                }

body.marinasIndex .regionsWrap .marinaCard .infoBlock table {
                    font-size: .8rem;
                    width: 100%;
                }

body.marinasIndex .regionsWrap .marinaCard .infoBlock table td {
                        padding: 3px 0;
                    }

body.marinasIndex .regionsWrap .marinaCard .infoBlock table td:nth-child(2) {
                            padding-left: 15px;
                        }

body.marinasIndex .regionsWrap .marinaCard .infoBlock table span {
                        display: inline-block;
                        background: var(--untoned-gray);
                        border-radius: 13px/50%;
                        padding: 3px 10px;
                        width: 75px;
                        text-align: center;
                        margin-right: 15px;
                    }

body.marinasIndex .regionsWrap .marinaCard .infoBlock .detailBtn {
                    background: var(--link-color);
                    color: #fff;
                    text-decoration: none;
                    border-radius: 20px/50%;
                    padding: 7px;
                    display: block;
                    text-align: center;
                    font-weight: bold;
                    margin-top: 10px;
                }

body.marinasIndex .regionsWrap .marinaCard .infoBlock .detailBtn::after {
                        content: "＞";
                        margin-left: 7px;
                    }

@media screen and (max-width: 767px) {
        body.marinasIndex .regionNav {
            padding: 15px 20px;
        }

            body.marinasIndex .regionNav a {
                margin-right: 10px;
                font-size: 1.1rem;
            }

        body.marinasIndex .bottomPageSwitcher {
            justify-content: space-between;
            gap: initial;
            margin: 0;
            padding: 30px 0;
            width: 100%;
        }

            body.marinasIndex .bottomPageSwitcher a {
                background: transparent;
                color: var(--link-color);
                border-radius: 0;
                padding: 0;
                font-weight: normal;
                font-size: 1rem;
            }

        body.marinasIndex .regionsWrap {
            padding: 1px 15px;
            margin-top: 30px;

        }

            body.marinasIndex .regionsWrap h2 {
                margin: 20px 0;
            }

            body.marinasIndex .regionsWrap .marinaCard {
                width: 100%;
                flex-direction: column;
                padding: 30px;
            }

                body.marinasIndex .regionsWrap .marinaCard .img {
                    display: block;
                    width: 100%;
                }

                body.marinasIndex .regionsWrap .marinaCard .infoBlock {
                    width: 100%;
                    margin-top: 10px;
                }

                    body.marinasIndex .regionsWrap .marinaCard .infoBlock h3 {
                        margin: 0;
                        font-size: 1.35rem;
                    }
                    body.marinasIndex .regionsWrap .marinaCard .infoBlock .copy {
                        font-weight: bold;
                        font-size: 1.1rem;
                        margin: 5px 0;
                    }
                    body.marinasIndex .regionsWrap .marinaCard .infoBlock table {
                        font-size: .8rem;
                        width: 100%;
                    }
                        body.marinasIndex .regionsWrap .marinaCard .infoBlock table td {
                            display: block;
                            padding: 0;
                        }
                            body.marinasIndex .regionsWrap .marinaCard .infoBlock table td:nth-child(2) {
                                padding-left: 0;
                            }
                        body.marinasIndex .regionsWrap .marinaCard .infoBlock table span {
                            background: transparent;
                            padding: 0;
                            width: auto;
                            text-align: left;
                            margin-right: 5px;
                        }
                            body.marinasIndex .regionsWrap .marinaCard .infoBlock table span::after {
                                content: '：';
                            }
                    body.marinasIndex .regionsWrap .marinaCard .infoBlock .detailBtn {
                        border-radius: 5px;
                    }
}

@media screen and (min-width: 768px) {
}

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