@charset "utf-8";

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------
    汎用スタイル
--------------------------------------------- */

#contentsPage h1 .container h1 {
    margin: 0 0 30px;
}

#contentsPage h2,
.container h2 {
    font-size: 180%;
    margin: 0 0 20px;
}

.container h2 {
    color: #eb5ea2;
    text-align: center;
    padding: 4px 0;
    border-top: 1px solid #eb5ea2;
    border-bottom: 1px solid #eb5ea2;
    letter-spacing: 0.2em;
}

.container h3 {
    text-align: center;
    margin: 0 0 8px;
    font-size: 150%;
}

.container h3 span {
    color: #eb5ea2;
    font-size: 200%;
}

.container h4 {
    text-align: center;
    border-bottom: 1px solid #000;
    padding: 0 0 4px;
    margin: 0 0 8px;
}

#contentsPage p,
.container p {
    margin: 0 0 20px;
}

.bgBeige {
    background: #f7f7f5;
}

.colum-2 {
    float: left;
    width: 48%;
    margin: 0 2% 0 0;
}

.colum-2:nth-child(even) {
    margin: 0 0 20px;
}

.txtPink {
    color: #eb5ea2;
}

.btnPink {
    background: #eb5ea2;
    width: 300px;
    margin: 0 auto 20px;
    text-align: center;
}

.btnPink a {
    display: block;
    padding: 8px;
    color: #fff;
}

/* ---------------------------------------------
    header
--------------------------------------------- */
header {
    padding: 20px 0 10px;
    height: 100px;
    position: relative;
}

/*--headerInner--*/
#headerInner {
    max-width: 960px;
    margin: 0 auto;
}

.logo {
    float: left;
    margin: 0 30px 20px 0;
}

header nav {
    padding: 20px 0 0;
    float: right;
}

.onlineStore {
    float: right;
}

header nav li {
    border-right: 1px solid #666;
    padding: 0 10px 0 0;
    box-sizing: border-box;
}

header nav li:last-child {
    border-right: none;
    padding: 0;
}

/* ---------------------------------------------
    contentsVisual
--------------------------------------------- */
#contentsVisual {
    margin: 0 0 20px;
}

/*----- item -----*/

#item {
    background-image: url(../../img/main_item.jpg);
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    height: 270px;
    margin: 0 0 20px;
}

#item h1 {
    padding-top: 90px;
    font-size: 300%;
    text-align: center;
}

#itemwatch {
    background-image: url(../../img/main_watch.jpg);
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    height: 270px;
}

#itemwatch h1 {
    padding-top: 90px;
    font-size: 300%;
    text-align: center;
}

/*----- parking -----*/

#parking {
    background-image: url(../../img/main_parking.jpg);
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    height: 270px;
}

#parking h1 {
    padding-top: 90px;
    font-size: 300%;
    text-align: center;
}

/*----- entrust -----*/

#entrust {
    background-image: url(../../img/main_entrust.jpg);
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    height: 270px;
}

#entrust h1 {
    padding-top: 90px;
    font-size: 300%;
    text-align: center;
}

/*----- kaitori -----*/

#kaitori {
    background-image: url(../../img/main_kaitori.jpg);
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    height: 270px;
}

#kaitori h1 {
    padding-top: 90px;
    font-size: 300%;
    text-align: center;
}

/*----- handling -----*/

#handling {
    background-image: url(../../img/main_handling.jpg);
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    height: 270px;
}

#handling h1 {
    padding-top: 90px;
    font-size: 300%;
    text-align: center;
}

/*----- shop -----*/

#shop {
    background-image: url(../../img/main_shop.jpg);
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    height: 270px;
}

#shop h1 {
    padding-top: 90px;
    font-size: 300%;
    text-align: center;
}

/*----- news -----*/

#news {
    background-image: url(../../img/main_news.jpg);
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    height: 270px;
}

#news h1 {
    padding-top: 90px;
    font-size: 300%;
    text-align: center;
    color: #fff;
}

/*----- contact -----*/

#contact {
    background-image: url(../../img/main_contact.jpg);
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    height: 270px;
}

#contact h1 {
    padding-top: 90px;
    font-size: 300%;
    text-align: center;
    color: #fff;
}

/*----- policy -----*/

#policy {
    background-image: url(../../img/main_policy.jpg);
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    height: 270px;
}

#policy h1 {
    padding-top: 90px;
    font-size: 300%;
    text-align: center;
    color: #fff;
}

/*----- about -----*/

#about {
    background-image: url(../../img/main_about.jpg);
    background-size: cover;
    background-position: center 0;
    background-repeat: no-repeat;
    height: 270px;
}

#about h1 {
    padding-top: 90px;
    font-size: 300%;
    text-align: center;
    color: #fff;
}

/* ---------------------------------------------
    contentsPage
--------------------------------------------- */

#contentsPage {
    max-width: 960px;
    margin: 20px auto;
    position: relative;
    padding: 8px;
    box-sizing: border-box;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 8px;
    box-sizing: border-box;
    position: relative;
}

/*--itemList--*/
.itemList {
    float: left;
    width: 23%;
    margin: 0 2% 2% 0;
}

.itemDetailImg {
    margin: 0 0 20px;
}

.itemDetail table {
    width: 100%;
    margin: 0 0 30px;
}

.itemDetail table th {
    width: 20%;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    vertical-align: middle;
    text-align: center;
    padding: 8px;
}

.itemDetail table td {
    border-bottom: 1px solid #000;
    padding: 8px;
}

.parkingCoupon {
    background: #fcecf4;
    max-width: 800px;
    margin: 0 auto 40px;
    padding: 12px 20px;
    box-sizing: border-box;
}

.parkingCoupon p span {
    color: #eb5ea2;
    font-size: 200%;
}

.couponLeft {
    float: left;
    width: 45%;
    text-align: center;
}

.couponRight {
    float: right;
    width: 45%;
    text-align: center;
}

.couponAttention {
    color: #eb5ea2;
    position: relative;
    padding: 2px;
    width: auto;
    text-align: center;
    background: #fff;
    border: 1px solid #eb5ea2;
    z-index: 0;
}
.couponAttention:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -9px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 9px 10px 8px;
    border-color: transparent transparent #fff transparent;
    z-index: 0;
}
.couponAttention:after {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    margin-left: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 9px 11px;
    border-color: transparent transparent #eb5ea2 transparent;
    z-index: -1;
}

.step {
    max-width: 880px;
    margin: 0 auto 20px;
}

.step td {
    vertical-align: middle;
    padding: 10px;
    width: 45%;
}

.check01 {
    background: #fcecf4;
    margin: 0 0 20px;
    padding: 10px 20px;
}

.check01 h3 {
    color: #eb5ea2;
    border-bottom: 1px solid #000;
    margin: 0 0 20px;
    padding: 0 0 0 20px;
    text-align: left;
    background-image: url(../img/ico_check01.gif);
    background-size: auto;
    background-position: 0 10px;
    background-repeat: no-repeat;
}

.check02,
.check03 {
    background: #f0f0f0;
    margin: 0 0 20px;
    padding: 10px 20px;
}

.check02 h3,
.check03 h3 {
    color: #eb5ea2;
    border-bottom: 1px solid #000;
    margin: 0 0 20px;
    padding: 0 0 0 20px;
    text-align: left;
    background-image: url(../img/ico_check01.gif);
    background-size: auto;
    background-position: 0 10px;
    background-repeat: no-repeat;
}

.check02 li {
    float: left;
    margin: 0 20px 12px 0;
    padding: 0 0 0 24px;
    background-image: url(../img/ico_check02.gif);
    background-size: auto;
    background-position: 0;
    background-repeat: no-repeat;
}

.check03 li {
    float: left;
    margin: 0 20px 12px 0;
    padding: 0 0 0 24px;
    background-image: url(../img/ico_check03.gif);
    background-size: auto;
    background-position: 0;
    background-repeat: no-repeat;
}

/*--shopInfo--*/

.shopInfo table {
    width: 100%;
    margin: 0 0 20px;
}

.shopInfo th {
    vertical-align: middle;
    padding: 8px 0;
    border-bottom: 1px solid #eb5ea2;
    width: 80px;
}

.shopInfo th span {
    background: #eb5ea2 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    padding: 6px 0;
    text-align: center;
    vertical-align: middle;
    width: 80px;
}

.shopInfo td {
    vertical-align: middle;
    padding: 12px;
    border-bottom: 1px solid #eb5ea2;
}

.googlemap {
    background: #fff;
    max-width: 470px;
    margin: 20px auto 40px;
}

.googlemap p {
    margin: 0;
    font-size: 120%;
}

.googlemap a {
    border: 1px solid #eb5ea2;
    padding: 10px 0 20px;
    display: block;
    color: #eb5ea2;
    text-align: center;
}

.googlemap a::after {
    content: "";
    background-image: url(../img/ico_map.png);
    background-repeat: no-repeat;
    display: inline-block;
    width: 20px;
    height: 29px;
    position: relative;
    top: 5px;
    right: -5px;
}

/*--contentsLeft--*/
#contentsLeft {
    float: left;
    width: 68%;
}

/* ---------------------------------------------
    newsList
--------------------------------------------- */

.newsList h2 {
    letter-spacing: normal;
}

.newsList dt {
    padding: 4px;
}

.newsList dd {
    padding: 4px;
    margin: 0 0 12px;
    border-bottom: 1px dashed #666;
}

/* ---------------------------------------------
    btnList
--------------------------------------------- */

.btnList {
    background: #024e9e;
    display: inline-block;
}

.btnList a {
    padding: 4px 8px;
    color: #fff;
    display: block;
}

/* ---------------------------------------------
    contactform
--------------------------------------------- */

div.wpcf7 {
    background: #efefef;
    border: 1px solid #666;
    padding: 0px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin: 0 0 30px 0;
}
div.wpcf7 p {
    padding: 20px 20px 0;
    margin: 0;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    max-width: 95%;
    color: black;
    background-color: white;
}
div.wpcf7 input,
.wpcf7 textarea {
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 14px;
}
div.wpcf7 textarea {
    width: 97.5%;
    height: 300px;
}
div.wpcf7 input.wpcf7-submit {
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    width: 200px;
    height: 45px;
    margin: 0 auto;
    display: block;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #333;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5), inset 0px 32px 0px -12px #808080;
    border: 1px solid #666;
}
div.wpcf7 input.wpcf7-submit:hover {
    background: #006080;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5), inset 0px 32px 0px -12px #007ea8;
    border: 1px solid #006080;
}
.wpcf7 input.wpcf7-submit:active {
    box-shadow: none;
    bottom: -2px;
    position: relative;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
    border: 1px solid #009de1;
}
.wpcf7-captchac {
    border: 1px solid #ccc;
}

/* エラー個所をわかりやすく表示 */
.wpcf7 .wpcf7-not-valid {
    background: #ffb6c1;
}
.wpcf7 span.wpcf7-not-valid-tip {
    font-size: 80%;
}
.wpcf7 .wpcf7-response-output {
    margin: 10px 0 0;
    padding: 8px 35px 8px 14px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.wpcf7 .wpcf7-validation-errors {
    color: #b94a48;
    background-color: #f2dede;
    border: 1px solid #eed3d7;
}
.wpcf7 .wpcf7-mail-sent-ok {
    color: #3a87ad;
    background-color: #d9edf7;
    border: 1px solid #bce8f1;
}

/* 必須赤色表示 */
.wpcf7 .required {
    color: #eb5ea2;
}
/* 任意緑色表示 */
.wpcf7 .any {
    color: #080;
}

/* ---------------------------------------------
    aside
--------------------------------------------- */

/*--contentsRight--*/
#contentsRight {
    float: right;
    width: 30%;
}

#contentsRight li {
    background-image: url("../img/ico_mark01.gif");
    background-position: 100% 4px;
    background-repeat: no-repeat;
    background-size: 18px 19px;
    margin: 0 0 12px;
    padding: 0 0 8px 8px;
    border-bottom: 4px double #666;
}

#contentsRight a {
    color: #666;
    cursor: pointer;
    display: block;
    text-decoration: none;
}

.inner-menu {
    display: none;
    margin: 12px 0;
}

.inner-menu li {
    border-bottom: 1px solid #666 !important;
    padding: 0 !important;
    background-image: url("../img/ico_mark02.gif") !important;
    background-position: 100% 4px !important;
    background-size: 12px 19px !important;
    font-size: 100% !important;
}

/* ---------------------------------------------
    pageTop
--------------------------------------------- */

#pageTop {
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: 77%;
}

#pageTop a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 20px 0;
    text-align: center;
    display: block;
    border-radius: 50%;
    opacity: 0.8;
}

#pageTop a:hover {
    text-decoration: none;
    background: #999;
}

/* ---------------------------------------------
    footer
--------------------------------------------- */

#footerStamp {
    background-image: url(../img/bg_footer.gif);
    background-size: 52px 38px;
    background-position: 0 0;
    background-repeat: repeat;
    height: 60px;
}

footer {
    background: #eb5ea2;
    padding: 12px;
}

/*--footerInner--*/
.footerInner {
    max-width: 960px;
    margin: 0 auto;
    color: #fff;
}

.footerInner a {
    color: #fff;
    text-decoration: underline;
}

.footerInner li {
    float: left;
}

.footerInner li:first-child {
    border-right: 1px solid #fff;
    margin: 0 12px 0 0;
    padding: 0 12px 0 0;
}

.copyright {
    margin: 12px 0 0;
    font-size: 80%;
    text-align: center;
}

@media screen and (max-width: 960px) {
    header ul li {
        border-right: none;
    }

    .onlineStore {
        float: none;
        max-width: 430px;
        margin: 0 auto;
    }

    /*--itemList--*/
    .itemList {
        width: 49%;
        margin: 0 2% 2% 0;
    }

    .itemList:nth-child(even) {
        width: 49%;
        margin: 0 0 2%;
    }

    /*--contentsLeft--*/
    #contentsLeft {
        float: none;
        width: 100%;
    }

    /*--contentsRight--*/
    #contentsRight {
        float: none;
        width: 100%;
    }

    #contentsRight li {
        float: left;
        width: 48%;
    }

    .inner-menu li {
        width: 100% !important;
    }
}

@media screen and (max-width: 640px) {
    @font-face {
        font-family: "Sawarabi Mincho";
        src: url("font.eot?") format("eot");
        src: url("font.eot?#iefix") format("embedded-opentype"), url("font.woff") format("woff"),
            url("font.ttf") format("truetype");
    }

    body {
        font-family: "Sawarabi Mincho";
    }

    .logo {
        float: none;
        margin: 10px auto 20px;
        max-width: 280px;
        text-align: center;
    }

    .colum-2 {
        float: none;
        width: 100%;
        margin: 0 0 20px;
    }

    .colum-2:nth-child(even) {
        margin: 0 0 20px;
    }

    .itemDetail table {
        border-top: 1px solid #000;
    }

    .itemDetail table th {
        width: 100%;
        display: block;
        padding: 8px 0;
        border-right: none;
    }

    .itemDetail table td {
        width: 100%;
        display: block;
        padding: 8px 0;
    }

    .couponLeft {
        float: none;
        width: 100%;
    }

    .couponRight {
        float: none;
        width: 100%;
    }

    .step tr {
        width: 100%;
        display: block;
    }

    .step td {
        width: 96%;
        display: block;
    }

    /*--contentsRight--*/
    #contentsRight {
        float: none;
        width: 100%;
    }

    #contentsRight li {
        float: none;
        width: 100%;
    }

    /*--footerInner--*/
    .footerInner {
        text-align: left;
    }
}