@charset "UTF-8";

.main-slider,
.main-slider * {
    outline: none;
}

.main-slider .pc-slide {
    display: none;
}

@media only screen and (min-width: 768px) {
    .main-slider {
        padding-top: 3.571429em;
    }

    .main-slider {
        position: relative;
    }

    .main-slider .sp-slide {
        display: none;
    }

    .main-slider .pc-slide {
        display: block;
    }

    .main-slide {
        position: relative;
    }

    .circle1 {
        width: 7.239584%;
        padding-bottom: 6.197917%;
        background-image: url(../images/top/circle-01-1.png);
        top: 29.204545%;
        left: 8.59375%;
    }

    .circle2 {
        width: 5.729167%;
        padding-bottom: 5.729167%;
        background-image: url(../images/top/circle-01-2.png);
        top: 56.136364%;
        left: 2.760417%;
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }

    .circle3 {
        width: 5.208334%;
        padding-bottom: 5.208334%;
        background-image: url(../images/top/circle-01-3.png);
        top: 26.136363%;
        right: 2.34375%;
        -webkit-animation-delay: 0.25s;
        animation-delay: 0.25s;
    }

    .circle4 {
        width: 5.208334%;
        padding-bottom: 4.427084%;
        background-image: url(../images/top/circle-01-4.png);
        top: 55.113636%;
        right: 8.020833%;
        -webkit-animation-delay: 0.33s;
        animation-delay: 0.33s;
    }

    .circle5 {
        width: 3.645833%;
        padding-bottom: 3.645833%;
        background-image: url(../images/top/circle-02-1.png);
        top: 30.113636%;
        left: 4.947917%;
    }

    .circle6 {
        width: 6.302083%;
        padding-bottom: 6.197917%;
        background-image: url(../images/top/circle-02-2.png);
        top: 41.590909%;
        left: 8.59375%;
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }

    .circle7 {
        width: 5.208333%;
        padding-bottom: 4.427083%;
        background-image: url(../images/top/circle-02-3.png);
        top: 26.590909%;
        right: 10.416667%;
        -webkit-animation-delay: 0.25s;
        animation-delay: 0.25s;
    }

    .circle8 {
        width: 5.208334%;
        padding-bottom: 5.208334%;
        background-image: url(../images/top/circle-01-3.png);
        top: 72.045454%;
        right: 2.96875%;
        -webkit-animation-delay: 0.33s;
        animation-delay: 0.33s;
    }

    .circle9 {
        width: 6.198917%;
        padding-bottom: 6.198917%;
        background-image: url(../images/top/circle-03-1.png);
        top: 32.5%;
        left: 12.291667%;
    }

    .circle10 {
        width: 3.645833%;
        padding-bottom: 3.645833%;
        background-image: url(../images/top/circle-03-2.png);
        top: 48.181818%;
        left: 5.520833%;
        -webkit-animation-delay: 0.33s;
        animation-delay: 0.33s;
    }

    .circle11 {
        width: 5.208334%;
        padding-bottom: 5.208334%;
        background-image: url(../images/top/circle-01-3.png);
        top: 74.204545%;
        left: 17.135417%;
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }

    .circle12 {
        width: 4.166667%;
        padding-bottom: 4.427083%;
        background-image: url(../images/top/circle-03-3.png);
        top: 23.295454%;
        right: 9.895833%;
        -webkit-animation-delay: 0.25s;
        animation-delay: 0.25s;
    }

    .circle13 {
        width: 7.5%;
        padding-bottom: 6.25%;
        background-image: url(../images/top/circle-03-4.png);
        top: 42.045454%;
        right: 2.604167%;
    }
}

@media only screen and (min-width: 1060px) {
    .main-slider {
        padding-top: 0;
    }
}

.intro {
    padding: 1.428571em 0 0;
    background: url(../images/common/bg1.png) repeat center top;
    background-size: 0.321429em auto;
    margin: 0;
}

.intro > .inner {
    background-color: #fff;
    padding: 3em 8% 4em;
}

.intro p {
    text-align: center;
    font-size: 1.071429em;
    line-height: 2;
    margin: 0 auto 1.5em;
}

.intro p:first-child {
    font-size: 1.428571em;
}

.intro p:first-child span {
    display: inline-block;
    background: url(../images/common/bg-line1.png) repeat-x left bottom;
    background-size: auto 0.1em;
    padding-bottom: 0.1em;
}

.intro p:last-child {
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
    .intro {
        padding-top: 1.25em;
        background-size: 0.5625em auto;
    }

    .intro > .inner {
        padding: 5em 3%;
    }

    .intro p {
        font-size: 1.125em;
        line-height: 2.5;
        max-width: 54em;
    }

    .intro p:first-child {
        font-size: 1.5em;
        line-height: 2;
        margin-bottom: 1em;
    }

    .intro p:first-child span {
        display: inline;
        background: url(../images/common/bg-line2.png) repeat-x left bottom;
    }
}

.services-list {
    margin: 0;
    padding: 2.142857em 8%;
    list-style: none;
}

.services-list > li {
    max-width: 22.5em;
    margin: 0 auto 2.142857em;
    border-radius: 0.357143em;
    overflow: hidden;
}

.services-list > li:last-child {
    margin-bottom: 0;
}

.services-list .service-inner1 {
    background-color: #bef0f5;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.services-list .service-inner2 {
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    background-color: #fff;
}

.services-list .fade-in.visible {
    opacity: 1;
}

.services-list .visible .service-inner1 {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.services-list .visible .service-inner2 {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
}

@media only screen and (min-width: 768px) {
    .services-list {
        padding: 2.142857em 3%;
    }

    .services-list > li {
        max-width: 880px;
        border-radius: 0.625em;
    }

    .services-list .service-inner2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

@media only screen and (min-width: 1480px) {
    .services-list {
        padding: 5.625em 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .services-list > li {
        margin: 3.75em 1.5625% 0;
        width: 45.833333%;
    }

    .services-list > li:nth-child(1),
    .services-list > li:nth-child(2) {
        margin-top: 0;
    }

    .services-list li:nth-child(2) .service-inner1 {
        -webkit-transition-delay: 1s;
        transition-delay: 1s;
    }

    .services-list li:nth-child(2) .service-inner2 {
        -webkit-transition-delay: 1.5s;
        transition-delay: 1.5s;
    }
}

.service-img {
    margin: 0;
    padding: 0;
    line-height: 1;
    text-align: center;
}

.service-img img:nth-child(2) {
    display: none;
}

.service-txt {
    padding: 1.5em 1em;
}

.service-txt dl {
    margin: 0 0 1em;
}

.service-txt dt {
    font-size: 1.571429em;
    margin: 0 0 0.75em;
}

.service-txt dd {
    font-size: 0.928571em;
    line-height: 1.75;
    margin: 0;
}

.service-txt .button1 {
    margin-right: 0;
    width: 12.857143em;
}

@media only screen and (min-width: 768px) {
    .service-img {
        width: 47.727273%;
    }

    .service-img img:nth-child(1) {
        display: none;
    }

    .service-img img:nth-child(2) {
        display: inline;
    }

    .service-txt {
        width: 52.272727%;
        padding: 3em 5.454545%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .service-txt dl {
        width: 100%;
        margin-top: auto;
    }

    .service-txt dt {
        font-size: 1.75em;
    }

    .service-txt dd {
        font-size: 1em;
    }

    .service-txt .button1 {
        margin-right: auto;
        margin-left: 0;
        width: 13.75em;
        -ms-flex-item-align: end;
        align-self: flex-end;
    }
}

.news {
    border-bottom: 1px solid #36c9dc;
}

.news-list > li:nth-child(n+3) {
    display: none;
}

@media only screen and (min-width: 768px) {
    .news-list > li:nth-child(n+3) {
        display: list-item;
    }
    .news-list > .fade-in-up:nth-child(3n-3) {
        transition-delay: 0s;
    }
    .news-list > .fade-in-up:nth-child(n+4) {
        transition-delay: .5s;
    }
}

.photo-gallery {
    margin: 0 auto;
}

.photo-gallery,
.photo-gallery * {
    outline: none;
}

.slick-track {
    -webkit-transform: transale3d(0,0,0);
    transform: transale3d(0,0,0);
}

.photo-gallery .slick-arrow {
    width: 1.5em;
    margin: 0;
    padding: 0;
    outline: none;
    background: none;
    border: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-70%);
    transform: translateY(-70%);
    z-index: 50;
    font: inherit;
}

.photo-gallery .slick-prev {
    left: 1em;
}

.photo-gallery .slick-next {
    right: 1em;
}

.photo-gallery .slick-dots {
    list-style: none;
    padding: 0;
    margin: 1em 0 0;
    line-height: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.photo-gallery .slick-dots > li {
    margin: 0 0 0 0.5em;
    width: 0.714286em;
    height: 0.714286em;
}

.photo-gallery .slick-dots > li:first-child {
    margin-left: 0;
}

.photo-gallery .slick-dots > li button {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #dcdcdc;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.photo-gallery .slick-dots > li.slick-active button {
    background-color: #32c8dc;
}

@media only screen and (min-width: 768px) {
    .gallery-slide span {
        display: block;
        padding: 0 5%;
    }

    .gallery-slide {
        width: 91.145833%;
        max-width: 700px;
    }

    .photo-gallery .slick-arrow {
        width: 1.6875em;
    }

    .photo-gallery .slick-arrow:hover {
        cursor: pointer;
    }

    .photo-gallery .slick-prev {
        left: calc((100vw - 600px) / 2);
    }
    
    .photo-gallery .slick-next {
        right: calc((100vw - 600px) / 2);
    }

    .photo-gallery .slick-dots {
        width: 82.03125%;
        max-width: 630px;
        margin: 1em auto 0;
    }

    .photo-gallery .slick-dots > li {
        width: 0.75em;
        height: 0.75em;
        margin-left: 0.625em;
    }

    .photo-gallery .slick-dots > li button:hover {
        cursor: pointer;
    }
}

@media only screen and (min-width: 920px) {
    .photo-gallery .slick-prev {
        left: 2.375em;
    }
    
    .photo-gallery .slick-next {
        right: 2.375em;
    }
}

.shop-info {
    padding: 0 8% 4em;
    margin: 0 auto;
}

.shop-map {
    margin: 0 auto 2.5em;
}

.shop-map > div {
    width: 100%;
    height: 0;
    padding-bottom: 79.365079%;
    position: relative;
}

.shop-map > div > iframe {
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

@media only screen and (min-width: 768px) {
    .shop-info {
        width: 94%;
        max-width: 1200px;
        padding: 5em 0;
    }

    .shop-map {
        margin-bottom: 6.875em;
    }

    .shop-map > div {
        padding-bottom: 48.333333%;
    }
}

.shop-main {
    padding-bottom: 2.857143em;
    border-bottom: 1px dotted #36c9dc;
    margin: 0 auto 2.857143em;
}

.shop-sub {
    padding-bottom: 2.857143em;
    border-bottom: 1px dotted #36c9dc;
    margin: 0 auto;
}

.shop-img {
    margin: 0 0 1em;
    padding: 0;
    line-height: 1;
    text-align: center;
}

.shop-txt h3 {
    font-size: 1.357143em;
    font-weight: 400;
    margin: 0 0 0.5em;
}

.calendar {
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;
    table-layout: fixed;
}

.calendar .calendar-pc {
    display: none;
}

.calendar th,
.calendar td {
    text-align: center;
    vertical-align: middle;
    font-size: 0.857143em;
    padding: 0.25em;
}

.calendar th {
    background-color: #36c9dc;
    color: #fff;
    font-weight: 700;
}

.calendar td {
    background-color: #e6f8fa;
}

.shop-sub .button1 {
    margin-bottom: 1.5em;
    width: 12.857143em;
}

@media only screen and (min-width: 768px) {
    .shop-main,
    .shop-sub {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .shop-sub {
        padding-left: 8.333333%;
        padding-right: 8.333333%;
    }

    .shop-img {
        margin-bottom: 0;
        width: 36.666667%;
    }

    .shop-txt {
        width: 63.333333%;
        padding-left: 5%;
    }

    .shop-txt h3 {
        font-size: 1.25em;
    }

    .calendar {
        border-bottom: 1px dashed #36c9dc;
        margin-bottom: 1em;
    }

    .calendar th,
    .calendar td {
        font-size: 1.125em;
    }

    .calendar .calendar-pc {
        display: table-cell;
        width: 8em;
        font-size: 1em;
    }

    .calendar td {
        background-color: #fff;
    }

    .calendar td.calendar-pc {
        background-color: #e6f8fa;
    }

    .shop-sub .shop-img {
        width: 31%;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }

    .shop-sub .shop-txt {
        width: 69%;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        padding-left: 0;
        padding-right: 6%;
    }

    .shop-sub .button1 {
        width: 11.25em;
        margin-left: 0;
        padding: 0.625em 1.5em;
    }
}

@media only screen and (min-width: 960px) {
    .calendar {
        margin-top: 2.5em;
        margin-bottom: 1.75em;
    }

    .calendar th {
        padding: 0.5em 0.25em;
    }

    .calendar td {
        padding: 2.25em 0.25em;
    }

    .calendar .calendar-pc {
        width: 10em;
    }
}

@media only screen and (min-width: 1152px) {
    .news-list {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .news-list > .fade-in-up:nth-child(4) {
        -webkit-transition-delay: 1.5s;
        transition-delay: 1.5s;
    }

    .news-list > li:nth-child(2),
    .news-list > li:nth-child(4) {
        margin-top: 2.5em;
    }
}