@charset "UTF-8";

@import url(common.css);

* {
    margin: 0;
    padding: 0;
}

.mainvisual {
    position: relative;
    width: 95%;
    height: 50vw;
    margin-top: 1%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

/* 画像を重ねる */
.mainvisual-images {
    position: absolute;
    width: 100%;
    height: 100%;
}

.mainvisual-images img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0;
    animation: imageChange 12s infinite;
}

/* 1枚目 */
.mainvisual-images img:nth-child(1) {
    animation-delay: 0s;
}

/* 2枚目 */
.mainvisual-images img:nth-child(2) {
    animation-delay: 4s;
}

/* 3枚目 */
.mainvisual-images img:nth-child(3) {
    animation-delay: 8s;
}


/* 自動で切り替える */
@keyframes imageChange {

    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    38% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }

}

.mainvisual-title {
    position: absolute;
    z-index: 10;

    left: 0;
    bottom: 5%;

    width: 50%;

    padding: 25px 40px;

    background: rgba(255, 255, 255, 0.8);

    display: flex;
    align-items: center;
    gap: 50px;
}

.mainvisual-title > p {
    font-family: serif;
    font-size: 5vw;
    margin: 0;
}

.mainvisual-title div {
    display: flex;
    flex-direction: column;
}

.mainvisual-title small {
    font-size: 1.2vw;
}

.mainvisual-title span {
    font-family: serif;
    font-size: 2.5vw;
}



/* ここからニュース */
.news {
    display: flex;
    width: 95%;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
}

.news-textbox {
    width: 10%;
    padding: 2%;
    border-top: 0.5px solid #202020;
    border-bottom: 0.5px solid #202020;
    
}

.news h3 {
    font-size: 2.5vw;
}

.news p {
    font-size: 1.5vw;
}

.news ul {
    width: 90%;
    list-style-type: none;
    
}

.news ul a {
    display: block;
    text-decoration: none;
    line-height: 3;
}

.news ul a li{
    color: #202020;
    font-size: 1.2vw
}

.news ul span:nth-child(odd) {
    display: inline-block;
    width: 8em;
}

.news ul span:nth-child(even) {
    display: inline-block;
    width: 3em;
    text-align: right;
    
}


.news-1 a, .news-2 a, .news-3 a{
    display: block;
    margin-left: 5%;
    padding: 0.5%;
    background-color: #f4f0eb;
}


.news-2, .news-3 {
    margin-top: 1%;
}

.news-1 p, .news-2 p, .news-3 p {
    font-size: 1.2vw;
    margin-left: 5em;
}

.news-1 a:hover, .news-2 a:hover, .news-3 a:hover {
    background-color: #A4774D;
    transition: 1S;
}

.news ul a li:hover {
    color: #ffffff;
}

/* ここまで */

/* ここからお店について */

.shop {
    display: flex;
    height: 40vw;
    margin-top: 10%;
    position: relative;
}

.shop img {
    width: 55%;
    height: auto;
    object-fit: cover;
    position: relative;
    z-index: 2;
    clip-path: inset(0 0 0 100%);/* 最初は右側に隠す */
    animation: shopPhotoIn 1.2s cubic-bezier(.77, 0, .18, 1) forwards; /* アニメーション */
}

.box1 {
    position: absolute;
    width: 58%;
    height: 100%;
    top: 4vw;
    right: 0;
    background-color: #f4f0eb;
    z-index: 1;
}

.shop-textbox {
    position: relative;
    width: 40%;
    padding: 2% 4%;
    margin-right: 5%;
    border-top: 0.5px solid #202020;
    border-bottom: 0.5px solid #202020;
    z-index: 3;
}

.shop-textbox p:nth-of-type(1) {
    margin-top: 1%;
    margin-bottom: 10%;
    font-size: 1.2vw;
}

.shop-textbox p:nth-of-type(2),.shop-textbox p:nth-of-type(3) {
    font-size: 1.2vw;
    line-height: 1.7;
}

/* 写真が右から左へ入ってくる */
@keyframes shopPhotoIn {
    from {
        clip-path: inset(0 0 0 100%);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.shop-photo {
    width: 55%;
    height: auto;
    object-fit: cover;
    position: relative;
    z-index: 2;
    clip-path: inset(0 0 0 100%);
}

.shop-photo.is-show {
    animation: shopphotoIn 1.2s cubic-bezier(.77, 0, .18, 1) forwards;
}

@keyframes shopphotoIn {
    from {
        clip-path: inset(0 0 0 100%);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}
/* ここまで */


/* ここからカフェ */

.cafe {
    display: flex;
    width: 100%;
    height: 40vw;
    margin-top: 10%;
    position: relative;
}

.cafe-images {
    position: relative;
    width: 55%;
    height: 100%;
}   

/* 写真の後ろのボックス */

.cafe-box {
    position: absolute;
    width: 95%;
    height: 95%;
    top: 3vw;
    left: 3vw;
    background-color: #f3f0eb;
    z-index: 0;
}

/* 3枚の写真 */

.cafe-images img {
    position: absolute;
    object-fit: cover;
    z-index: 1;
    /* 最初は左にずらしておく */
    opacity: 0;
    transform: translateX(-80px);
}


/* 1枚目：左上 */

.cafe-images img:nth-of-type(1) {
    width: 47%;
    height: 47%;
    top: 0;
    left: 0;
}


/* 2枚目：左下 */

.cafe-images img:nth-of-type(2) {
    width: 47%;
    height: 47%;
    bottom: 0;
    left: 0;
}


/* 3枚目：右 */

.cafe-images img:nth-of-type(3) {
    width: 43%;
    height: 95%;
    top: 0;
    right: 0;
}

.cafe-images.is-show img {
    animation: cafePhotoIn 1s ease-out forwards;
}


@keyframes cafePhotoIn {

    from {
        opacity: 0;
        transform: translateX(-80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}

.cafe-textbox {
    width: 30%;
    padding: 2% 4%;
    border-top: 0.5px solid #202020;
    border-bottom: 0.5px solid #202020;
    margin-left: auto;
}

.cafe-textbox p:nth-of-type(1) {
    margin-top: 1%;
    margin-bottom: 10%;
    font-size: 1.2vw;
}

.cafe-textbox p:nth-of-type(2),.cafe-textbox p:nth-of-type(3) {
    font-size: 1.2vw;
    line-height: 1.7;
}



/* ここからドッグラン */

.run {
    display: flex;
    height: 40vw;
    margin-top: 10%;
    position: relative;
}

.run img {
    width: 55%;
    height: auto;
    object-fit: cover;
    position: relative;
    z-index: 2;
    clip-path: inset(0 0 0 100%);/* 最初は右側に隠す */
    animation: shopPhotoIn 1.2s cubic-bezier(.77, 0, .18, 1) forwards; /* アニメーション */
}

.box2 {
    position: absolute;
    width: 58%;
    height: 100%;
    top: 4vw;
    right: 0;
    background-color: #f4f0eb;
    z-index: 1;
}

.run-textbox {
    position: relative;
    width: 40%;
    padding: 2% 4%;
    margin-right: 5%;
    border-top: 0.5px solid #202020;
    border-bottom: 0.5px solid #202020;
    z-index: 3;
}

.run-textbox p:nth-of-type(1) {
    margin-top: 1%;
    margin-bottom: 10%;
    font-size: 1.2vw;
}

.run-textbox p:nth-of-type(2),.run-textbox p:nth-of-type(3) {
    font-size: 1.2vw;
    line-height: 1.7;
}

/* 写真が右から左へ入ってくる */
@keyframes runphotoIn {
    from {
        clip-path: inset(0 0 0 100%);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.run-photo {
    width: 55%;
    height: auto;
    object-fit: cover;
    position: relative;
    z-index: 2;
    clip-path: inset(0 0 0 100%);
}

.run-photo.is-show {
    animation: runphotoIn 1.2s cubic-bezier(.77, 0, .18, 1) forwards;
}

@keyframes runphotoIn {
    from {
        clip-path: inset(0 0 0 100%);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}









/* ここまで */

/* ここからアクセス */

.access {
    display: flex;
    height: 40vw;
    margin-top: 10%;
}

.access iframe {
    width: 50%;
    height: 40vw;
}

.access-box {
    width: 35%;
    margin-left: auto;
    padding: 2% 4%;
    border-top: 0.5px solid #202020;
    border-bottom: 0.5px solid #202020;
    margin-left: auto;
}

.access-box p {
    margin-top: 1%;
    margin-bottom: 10%;
    font-size: 1.2vw;
}

.access-flexbox {
    display: flex;
}

.access-textbox1,.access-textbox2 {
    width: 50%;
    text-align: left;
}

.access-textbox1 p,.access-textbox2 p {
    height: 44px;
    border-bottom: 0.5px dotted #202020;
}

/* ↓ここからContact */

.contact {
    margin-top: 10%;
    border-top:1px solid #202020;
}

.contact-box {
    margin-top: 3%;
    text-align: center;
}
form {
    width: 50%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.2vw;
}

.form-flex {
    display: flex;
    margin-bottom: 4%;
}

.label-item {
    width: 40%;
}

label span {
    margin-right: 1em;
    color: #ff0000;
}

.input-item {
    width: 60%;
}

.input-item input {
    width: 97%;
    padding: 0.3em;
}

.form-flex ul {
    display: flex;
    list-style-type: none;
}

.form-flex ul li {
    margin-right: 1em;
}

select {
    padding: 0.3em;
}

.message-item {
    width: 60%;
}

textarea {
    width: 97%;
    height: 8em;
    padding: 0.3em;
}

.submit-item {
    width: 14%;
    margin-left: auto;
    margin-right: auto;
}

.submit-item input {
    width: 100%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
/* ↑ここまで */