@charset "UTF-8";

:root {
    /* 背景は大理石の柄 店のロゴは左上と右下に花柄、中央にFORTY FIVE(店名) 店名はレインボー柄  1番上にスライダーバナー追加  基本ピンク、薄い赤、薄い水色をベースに作りたいです */
    --color-green: #5CDFEE;
    --color-blue: #83bce2;
    --color-white: white;
    --color-silver: rgb(49, 49, 49);
    --color-gold: #E5B420;
    --main-text-color: rgb(126, 126, 126);
    --color-pink: #df92be;
    --color-red: #e68197;
    --color-powderblue: #b0e0e6;
    --color-turquoise: #40e0d0;
}

body {
    font-family: "Noto Serif JP", serif;
    color: var(--color-silver);
}

.loading {
    /* background: url(../img/bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */

}

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

    .loading img {
        width: 30%;
        margin: auto;
    }

    main {
        background: rgb(255, 255, 255, .7);
    }


    header {
        top: 0;
        background: rgb(255, 255, 255, 1)
    }

    .logo-area a {
        width: 200px;
        height: 50px;
        background-size: 100%;
    }

    .mainvisual {
        background: none;
    }

    .mainvisual-bg:before {
        background: url(../img/mainvisual.jpg);
        background-size: cover;
        background-position: center top 4rem;
        background-repeat: no-repeat;
    }

    .under-bg:before {
        background: url(../img/mainvisual.jpg);
        background-size: cover;
        background-position: center top 4rem;
        background-repeat: no-repeat;
    }


    .under-main .contents-ttl h2 {
        font-weight: 600;
        font-size: 2.5rem;
    }

    .under-main .contents-ttl p {
        font-weight: 600;
        font-size: 1.2rem;
    }

    /* .under-bg:before {
        background: url(../img/mainvisual.webp);
    } */

    .todays-wrap {
        background: none;
    }

    .under-wrap {
        background: none;
    }

    .weekly-schedule {
        background: var(--color-pink);
    }

    .weekly-schedule li a.current {
        color: white;
    }

    .weekly-schedule li a {
        color: white;
    }

    .weekly-schedule ul {
        border-top: 0;
        border-bottom: 0;
    }

    .detail-tbl tr th+th,
    .detail-tbl tr td+td {
        border: 1px solid var(--color-silver);
    }

    #nav a {
        color: var(--color-pink);

    }

    .header-bg #nav a {
        color: var(--color-pink);
    }

    .under-h {
        background: rgb(255, 255, 255, .8)
    }

    .under-h #nav a {
        color: var(--color-pink);
    }

    .wrap-style {
        background: #fff;
    }

    .footer-logo {
        padding: 15% 0;
        background-size: 100%;
    }

    .recruit-mainvisual {
        padding-top: calc(386 / 900* 70.5%);
        width: 60.5%;
    }

    .video-contents {
        margin: 0 auto;
    }

    .video-style {
        max-width: 100%;
    }

    .blog-detail-update:after {
        border-bottom: 1px solid var(--color-silver);
        border-top: 1px solid var(--color-silver);
    }

}

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

    .loading img {
        width: 70%;
    }

    main {
        background: none;
    }

    header {
        height: 60px;
    }

    .visual-logo {
        padding: 45% 0;
    }

    .main-contact {
        background: var(--main-text-color);
    }

    .todays-wrap {
        background: none;
    }

    .clamp-text3 {
        background: #fae1ee;
    }

    .sp-foot {
        background: #df92bedc;
    }

    .sp-foot a {
        color: var(--color-white);
    }

    .sp-foot li {
        /* border: 1px solid  var(--color-white); */
    }

    #nav-circle-bg {
        background: white;
    }

    #nav li {
        border-bottom: 1px solid var(--color-silver);
    }

    .close-btn {
        color: var(--main-text-color);
    }

    .mainvisual-bg:before {
        content: "";
        display: block;
        background: url(../img/mainvisual.jpg);
        background-size: cover;
        background-position: center right -12rem;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 3.75rem;
        left: 0;
        z-index: -1;
    }

    .under-bg:before {
        content: "";
        display: block;
        background: url(../img/mainvisual.jpg);
        background-size: cover;
        background-position: center right -12rem;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 6rem;
        left: 0;
        z-index: -1;
    }

    .under-wrap {
        background: none;
        padding-top: 2rem;
    }

    .news-under-wrap {
        border-bottom: 1px solid var(--color-silver);
    }

    .weekly-schedule li a.current {
        background: var(--color-pink);
        color: #fff;
    }

    .weekly-schedule li a {
        border: 1px solid var(--color-silver);
    }

    .detail-tbl tr td {
        border-left: none !important;
    }

    #nav a {
        color: var(--color-pink);
        font-size: 1rem;
    }

    #nav p {
        font-size: 0.7rem;
    }

    .logo-area {
        top: 0.4rem;
        left: 1rem;
    }

    .logo-area a {
        width: 130px;
        height: 46px;
    }

    .video-contents {
        width: 92%;
        margin: 0 auto;
    }

    .video-style {
        max-width: 100%;
    }

    .main-contact {
        background: var(--color-powderblue);
    }

    .footer-logo {
        background: url(../img/f-logo.png);
        background-size: 60%;
        background-position: center;
        background-repeat: no-repeat;
        padding: 10% 0;
    }

    .news-ico {
        padding: 0.1rem;
    }

    .clamp-text3 {
        background: none;
        padding-top: 0.25rem;
    }

    .under-h {
        background: rgb(255, 255, 255, .8)
    }

    .recruit-mainvisual {
        padding-top: calc(378 / 750* 100%);
        margin: 0 auto;
    }
}

.under-wrap {
    /* background: url(../img/bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    background: rgb(255, 255, 255, .7);
}

.qa-bg {
    background: rgb(255, 255, 255, .7) !important;
}

#nav-toggle span {
    background: var(--color-pink);
    height: 3px;
}

/* .open header #nav-toggle span {
    background: var(--color-pink);
    height: 3px;
} */


/* .mainvisual-bg:before {
    content: "";
    display: block;
    background: url(../img/mainvisual.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
} */

.header-bg {
    background: rgb(255, 255, 255, 1)
}

.mainvisual p {
    color: var(--color-blue);
    text-shadow: 1px 1px 2px #ffffff;
}

.mainvisual a {
    color: var(--color-blue);
}

.contents-ttl {
    background: none;
    color: var(--color-pink);
}

.contents-ttl p {
    margin-top: 0.1rem;
}

.under-main .contents-ttl {
    color: var(--color-pink);
}

.news-ttl-top {
    color: var(--color-silver);
}

.news-text-wrap li span {
    background: var(--color-white);
    color: var(--color-blue);
    border: 1px solid var(--color-blue);
}

.news-text-wrap li:first-child {
    color: #333;
}

.clamp-text2 a {
    color: var(--color-silver);
}

.more-btn a {
    background: var(--color-pink);
    color: var(--color-white);
    border: 1px solid var(--color-pink);
}

.tosays-ttl {
    color: var(--color-pink);
}

.staff-box ul li {
    color: var(--color-silver);
    background: var(--color-white);
}

.staff-box>ul li+li {
    border-top: 1px solid var(--color-silver);
}

.staff-box ul:first-of-type li:nth-child(3) {
    background: var(--color-pink);
    border-top: 0;
    color: var(--color-white);
}

.blog-box+.blog-box {
    border-top: 1px solid var(--color-silver);
}

.ico01,
.ico04,
.ico07,
.ico010,
.ico013 {
    background: #ee5cc99c !important;
    color: var(--color-white) !important;
}

.ico02,
.ico05,
.ico08,
.ico011 {
    background: rgba(202, 75, 81, 0.4) !important;
    color: var(--color-white) !important;
}

.ico03,
.ico06,
.ico09,
.ico012 {
    background: #017acbc2 !important;
    color: var(--color-white) !important;
}

.reserve-bnr,
.qa-bnr,
.recruit-bnr {
    background: none;
}

.reserve-bnr a,
.qa-bnr a,
.recruit-bnr a {
    color: white;
    background: var(--color-red);
}

.reserve-bnr a p,
.qa-bnr a p,
.recruit-bnr a p {
    padding-top: 0.3rem;
}

footer {
    background: var(--color-powderblue);
}

footer p {
    color: var(--color-white);
}

.list-wrap h3 {
    border-top: 1px solid var(--color-silver);
    border-bottom: 1px solid var(--color-silver);
    color: var(--color-blue);
}

.list-wrap h3:before {
    border-top: 1px solid var(--color-silver);
}

.list-wrap h3:after {
    border-bottom: 1px solid var(--color-silver);
}

.list-wrap dt {
    background: var(--color-pink);
    text-shadow: 1px 1px 1px #333;
}

.list-wrap dd {
    background: var(--color-white);
    color: var(--color-blue);
}

.list-wrap dt,
.list-wrap dd {
    border: 1px solid var(--color-silver);
}

.list-wrap dd {
    border-left: 0;
}

.credit-bnr a {
    background: none;
    padding: 0;
}

.credit-bnr span {
    margin-top: 0.2rem;
    text-shadow: none;
    background: var(--color-white);
    color: var(--color-pink);
}

.news-ico {
    background: var(--color-white);
    border: 1px solid var(--color-blue);
    color: var(--color-blue);
}

.archive h3 {
    background: var(--color-blue);
}

.archive li {
    border: 1px solid var(--color-silver);
    border-top: 0;
}

.archive li a {
    color: var(--color-blue);
}

.filter-wrap select {
    border: 1px solid var(--color-silver);
    color: #333;
    background-image: url(../img/filter-arrow.svg), linear-gradient(to bottom, var(--color-blue) 0%, var(--color-blue) 100%);
}

.filter-inner {
    border: 1px solid var(--color-silver);
}

.ceck-point:before {
    border: 1px solid var(--color-silver);
}

.check-point {
    color: black;
}

.filter-inner input[type="checkbox"]:checked+.check-point:after {
    border-bottom: 3px solid var(--main-text-color);
    border-right: 3px solid var(--main-text-color);
}

.filter-inner input[type="submit"] {
    background: var(--color-blue);
}

.filter-wrap .filter-reset a {
    color: var(--color-red);
}

.blog-update {
    color: var(--main-text-color);
}

.blog-detail a {
    background: var(--color-pink);
}

.reserve>div {
    background: none;
}

.reserve input[type="text"],
.reserve input[type="number"],
.reserve input[type="tel"],
.reserve input[type="email"],
.reserve input[type="date"],
.reserve select {
    border: 1px solid var(--main-text-color);
}

.reserve #schedule {
    border: 1px solid var(--main-text-color);
    background-image: url(../img/calendar.svg), linear-gradient(to bottom, var(--color-blue) 0%, var(--color-blue) 100%);
}

.ui-widget-header {
    background: var(--color-blue) !important;
}

.ui-widget.ui-widget-content {
    border: 1px solid var(--color-blue) !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid var(--color-blue) !important;
    background: var(--color-powderblue) !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 1px solid var(--color-blue) !important;
    color: black !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    background: var(--color-powderblue) !important;
}

.reserve input[type="time"] {
    border: 1px solid var(--color-silver);
}

.reserve select {
    background-image: url(../img/select-arrow.svg),
        linear-gradient(to bottom, var(--color-blue) 0%, var(--color-blue) 100%) !important;
}

.reserve input[type="radio"]+label:before {
    border: 1px solid var(--color-silver);
}

.reserve input[type="radio"]:checked+label:after {
    background: var(--color-silver);
}

.reserve textarea {
    border: 1px solid var(--color-silver);
}

.filter-inner input[type="checkbox"]:checked+.check-point:after,
.reserve input[type="checkbox"]:checked+.check-point:after {
    border-bottom: 3px solid var(--color-red);
    border-right: 3px solid var(--color-red);
}

.reserve input[type="submit"] {
    background: var(--color-pink);
}

.recruit-main {
    background: none;
}

.job-box dl dt {
    background: var(--color-pink);
}

.tab-label {
    background: #ddf3f3;
    color: var(--color-silver);
}

.tab-switch:checked+.tab-label {
    background: var(--color-pink);
    color: var(--color-white);
}

.detail-tbl thead {
    background: var(--color-pink);
    color: var(--color-white);
}

.detail-tbl tr th,
.detail-tbl tr td {
    border: 1px solid var(--color-silver);
}

.detail-wrap li {
    border-bottom: 1px dotted var(--color-silver);
}

.accordion>ul>li>div {
    background: var(--color-pink);
    border: 1px solid var(--color-silver);
}

.accordion li .accordion_icon span {
    background: var(--color-blue);
}

.news-detail-info:after,
.blog-detail-info:after {
    border-bottom: 1px solidvar(--color-silver);
    border-top: 1px solid var(--color-silver);
}

.end-line {
    border-bottom: 1px solid var(--color-silver);
    border-top: 1px solid var(--color-silver);
}

.news-btn a {
    background: var(--color-pink);
    color: var(--color-white);
    border: 1px solid var(--color-pink);
}

.prev-btn a {
    background: var(--color-pink);
    color: var(--color-white);
    border: 1px solid var(--color-pink);
}

.shop-cmt {
    border-bottom: double var(--color-silver);
}

.shop-cmt:after {
    border-bottom: 1px solid var(--color-silver);
    border-top: 1px solid var(--color-silver);
}

.detail-wrap .shop-cmt:after {
    content: none;
}

.form-wrap {
    background: var(--color-white);
}

a.js-modal-close {
    background: var(--color-pink);
}

footer ul li a .fa-brands {
    color: var(--color-white);
}

.detail-tbl tbody {
    background: var(--color-white);
}

/* 追記 */
@media screen and (min-width: 769px) {

    .reserve-bnr,
    .qa-bnr,
    .recruit-bnr {
        width: 32.5%;
    }
}

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

    .reserve-bnr,
    .qa-bnr,
    .recruit-bnr {
        padding: 0;
    }

    .reserve-bnr a {
        margin-top: 3rem;
    }
}

.recruit-mainvisual {
    background-image: url(../img/recruit-top3.jpg);
}

.swiper-style {
    /*スライダーの幅と高さを調整*/
    width: 100%;
    position: relative;
    overflow: hidden;
    /* スクロールバー非表示 */
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.swiper-style:before {
    content: "";
    display: block;
    padding-top: 3.6rem;
}

/* スクロールバー非表示 chrome・Safari*/
.swiper-style::-webkit-scrollbar {
    display: none;
}

.swiper-slide>img {
    /* IE: not support */
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    /* インラインの影響を防ぐ */
}

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

    .mainvisual {
        top: 10%;
    }

    .visual-logo {
        padding: 20% 0 !important;
    }

    /* ページネーションのサイズと色 */
    .swiper-pagination-bullet {
        background-color: rgba(0, 0, 0, 0.6);
        height: 8px !important;
        width: 8px !important;
    }

}


/* ページネーションの余白 */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 10px 10px;
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 0px;
}

/* ページネーションのサイズと色 */
.swiper-pagination-bullet {
    background-color: rgba(0, 0, 0, 0.6);
    height: 12px;
    width: 12px;
}

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

    .news-container {
        margin: 0 auto;
    }

    .twitter-container {
        margin: 0 auto;
    }

    .phone-area {
        display: none;
    }

}

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

    /* Twitter個別ポストスタイル */ 
    /* .twitter-style {
        width: 90%;
        margin: 0 auto;
    } */

    .phone-area {
        text-align: end;
        font-size: 1rem;
        line-height: 3.7;
        width: 85%;
    }

    .phone-area h1 a{
        color: var(--color-pink);
    }


}

/* 追記 Xぼタン*/

@media screen and (min-width: 769px) {
    .prof-twbt {
        width: 60%;
        padding-top: 1rem;
    }
}

.prof-twbt {
    padding-top: 1rem;
}


.wrap4-style {
    text-align: center;
}