@charset "UTF-8";

/* -----------------リセットCSS始まり----------------- */
* {
    margin: 0;
    padding: 0;
}

a {
    display: block;
}

ul {
    list-style-type: none;
}

@font-face {
    font-family: NotoSerifJP;
    src: url(../font/static/NotoSerifJP-Regular.ttf);
}

/* -----------------リセットCSS終わり----------------- */



/* -----------------header部分始まり----------------- */
.menu-btn {
    display: flex;
    position: fixed;
    height: 10vw;
    width: 100%;
    align-items: center;
    justify-content: right;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.7);
}

h1 {
    width: 50vw;
    height: 2.7vw;
    padding-left: 1vw;
    left: 0;
    position: fixed;
    font-family: NotoSerifJP;   
    z-index: 900;
}

h1 a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
}

h1 a span {
    margin-top: 2vw;
    margin-left: 1vw;
    font-size: 5vw;
    font-weight: 200;
}

h1 a img {
    width: 10vw;
    height: auto;
    margin-top: 2vw;
}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    margin-right: 3vw;
    content: '';
    display: block;
    height: 0.2vw;
    width: 5vw;
    border-radius: 1vw;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 1.5vw;
}
.menu-btn span:after {
    top: 1.5vw;
}

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

#menu-btn-check {
    display: none;
}

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color: rgba(0, 0, 0, 0.7);
}
.menu-content ul {
    padding: 10vw 2vw 0;
}
.menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
}
.menu-content ul li a {
    text-align: center;
    display: block;
    width: 100%;
    font-size: 4vw;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 1vw 5vw 0.7vw 1vw;
    position: relative;
}

.menu-content ul li a:hover {
    background-color: rgba(202, 202, 202, 0.9);
    color: #000000;
    transition: 1s;
}

.menu-content {
    width: 100%;
    height: 60%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: rgba(0, 0, 0, 0.7);
    transition: all 0.5s;/*アニメーション設定*/
}

#menu-btn-check:checked ~ .menu-content {
    left: 0%;/*メニューを画面内へ*/
}
/* -----------------header部分終わり----------------- */



/* -----------------main部分始まり----------------- */

/* -----------------main-visual部分始まり----------------- */

.main-visual{
   position: relative;
   width: 100%;
   height: 50vh;
   overflow: hidden;
   margin: 0 auto;
}

.catch-copy1, .catch-copy2, .catch-copy3 {
    position: absolute;
    top: 47%;
    text-align: center;
    width: 100%;
    z-index: 10;
    color: #ffffff;
    font-size: 3vw;
    font-family: NotoSerifJP;
    text-shadow: 0 2px 3px #202020; 
}

.catch-copy1{
   animation: slide-catch-copy1 15s infinite;
}

.catch-copy2{
   animation: slide-catch-copy2 15s infinite;
}

.catch-copy3{
   animation: slide-catch-copy3 15s infinite;
}

@keyframes slide-catch-copy1 {
    0% {opacity: 1;}
  30% {opacity: 1;}
  40% {opacity: 0;}
  90% {opacity: 0}
100% {opacity: 1;}
}
@keyframes slide-catch-copy2 {
    0% {opacity: 0;}
  30% {opacity: 0;}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-catch-copy3 {
    0% {opacity: 0;}
  60% {opacity: 0;}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0;}
}

.img-01, .img-02, .img-03{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}
.img-01{
   background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 90%),url('../images/coffee01.jpg');
   animation: slide-animation-01 15s infinite;
   filter: brightness(0.6);
}
.img-02{
   background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 90%),url('../images/coffee02.jpg');
   animation: slide-animation-02 15s infinite;
   filter: brightness(0.6);
}
.img-03{
   background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 90%),url('../images/coffee03.jpg');
   animation: slide-animation-03 15s infinite;
   filter: brightness(0.6);
}
@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.05);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.03);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.05);}
}

/* -----------------main-visual終わり----------------- */

/* -----------------shop-info始まり----------------- */

.shop-info {
    width: 100%;
    height: 80vw;
    padding-top: 15vw;
    background-image: linear-gradient(0deg, #ffffff 85%, #666464 95%, #000000);
}

.shop-info img {
    display: block;
    width: 40vw;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4vw;
}

.shop-info ul {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    font-size: 2vw;
    font-family: NotoSerifJP;
}

.shop-info ul li {
    display: flex;
    width: 100%;
    font-weight: 500;
    line-height: 3vw;
    border-bottom: 0.1vw #462020 solid;
    margin-bottom: 3vw;
    text-align: center;
}

.shop-info ul li:last-child {
    margin-bottom: 5vw;
}

.shop-info ul li span {
    display: block;
    width: 17%;
    margin-right: 1em;
    font-weight: 600;
    color: #462020;
}

.shop-info h3 {
    margin-bottom: 3vw;
    text-align: center;
    font-size: 2vw;
    font-family: NotoSerifJP;
    color: #462020;
}

.shop-main {
    display: flex;
    width: 62vw;
    margin-left: auto;
    margin-right: auto;
}

.shop-child {
    width: 30vw;
    height: 20vw;
}

.shop-child:nth-of-type(1) {
    margin-right: 2vw;
}

.shop-child img {
    width: 30vw;
    margin-bottom: 2vw;
}

.shop-child p {
    text-align: center;
    font-size: 1.7vw;
    font-family: NotoSerifJP;
}

/* -----------------shop-info終わり----------------- */

/* -----------------concept始まり----------------- */

#CONCEPT h2 {
    height: 5vw;
    padding-top: 2vw;
    text-align: center;
    letter-spacing: 0.5em;
    font-size: 4vw;
    font-family: NotoSerifJP;
    color: #ffffff;
    background-image: linear-gradient(0deg, #000000 25%, #666464 60%, #ffffff);
}

.coffee-back, .bread-back {
    width: 40%;
    height: 20vh;
    padding: 10vh 0 0 5vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10;
    opacity: 0;
    transform: translateX(-40%);
    transition: all 3s ease;
}

.ingredients-back {
    width: 40%;
    height: 20vh;
    padding: 10vh 0 0 5vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10;
    opacity: 0;
    transform: translateX(40%);
    transition: all 3s ease;
    margin-left: auto;
}

.coffee-back.active, .bread-back.active {
    width: 40%;
    height: 15vh;
    padding: 10vh 0 0 5vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10;
    opacity: 1;
    transform: translateX(0);
}

.ingredients-back.active {
    width: 40%;
    height: 20vh;
    padding: 10vh 0 0 5vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10;
    opacity: 1;
    transform: translateX(0%);
    margin-left: auto;
}


.concept h2 {
    margin-bottom: 2vw;
    font-size: 3vw;
    font-family: NotoSerifJP;
    color: #ffffff;
}

.concept p {
    width: 80%;
    font-size: 1vw;
    white-space: pre-wrap;
    line-height: 3vw;
    font-family: NotoSerifJP;
    color: #ffffff;
}


.coffee, .ingredients, .bread {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.coffee {
    background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 100%), url(../images/coffee04.jpg);
    background-position: center;
}

.ingredients {
    background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 100%), url(../images/coffee05.jpg);
    background-position: center;
}

.bread {
    background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 100%),url(../images/coffee06.jpg);
    background-position: center;
}

.background-black {
    height: 10vw;
    background-color: black;
}

/* -----------------concept終わり----------------- */

/* -----------------food始まり----------------- */

#MENU h2 {
    padding-top: 7vw;
    margin-bottom: 5vw;
    text-align: center;
    letter-spacing: 0.5em;
    font-size: 4vw;
    font-family: NotoSerifJP;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    background-image: linear-gradient(0deg, #ffffff 25%, #666464 60%, #000000);
}

.food p {
    margin-bottom: 5vw;
    white-space: pre-wrap;
    text-align: center;
    font-size: 2vw;
    font-family: NotoSerifJP;
}


.slideshow li img, .slideshow2 li img {
    display: block; /* ★これを追加 */
    width: 20vw;
    height: 15vw;
    margin-bottom: 1vw;
}

.wrap1, .wrap2, .wrap3{
    width: 20vw;
    height: 40vw;
    overflow: hidden;
}

.wrap2 {
    margin-left: 2vw;
    margin-right: 2vw;
}

.slideshow-parent {
    display: flex;
    width: 64vw;
    height: 40vw;
    margin-left: auto;
    margin-right: auto;
    border-top: 0.5vw solid #462020;
    border-bottom: 0.5vw solid #462020;
    margin-bottom: 5vw;
}

.slideshow {
  animation: loop-slide 40s infinite linear 1s both;
}

.slideshow2 {
  animation: loop-slide 40s infinite linear 1s reverse both;
}

@keyframes loop-slide {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}


.wrap1:hover .slideshow,
.wrap2:hover .slideshow2,
.wrap3:hover .slideshow {
    animation-play-state: paused;
}

.food-img {
    position: relative;
    display: flex;
}

.caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 20vw;
    height: 15vw;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    font-family: NotoSerifJP;
    font-size: 1.2vw;
    text-align: center;
    opacity: 0; 
    transition: opacity 1s ease;
}

.caption h3 {
    margin-top: 5vw;
    margin-bottom: 1vw;
}

.caption p {
    font-size: 1vw;
}

.food-img:hover .caption {
    opacity: 1;
    transition: 1s;
}

.menu-detail {
    margin-bottom: 5vw;
}

.menu-detail a {
    display: block;
    width: 25vw;
    color: #000000;
    text-decoration: none;
    line-height: 6vw;
    margin-left: auto;
    margin-right: auto;
    border: 0.1vw solid #462020;
    height: 6vw;
    font-size: 1vw;
    transition: 1s;
}

.menu-detail a p {
    font-size: 2vw;
}

.menu-detail a:hover {
    background-color: #462020;
    color: #ffffff;
    transition: 1s;
}

/* -----------------food終わり----------------- */

/* -----------------news始まり----------------- */

.news-section {
    margin-bottom: 5vw;
}

#NEWS h2 {
    padding-top: 7vw;
    margin-bottom: 2vw;
    text-align: center;
    letter-spacing: 0.5em;
    font-size: 4vw;
    font-family: NotoSerifJP;
    color: #000000;
}

#NEWS p{
    margin-bottom: 5vw;
    white-space: pre-wrap;
    text-align: center;
    font-size: 2vw;
    font-family: NotoSerifJP;
}

.news-container {
    display: flex;
    align-items: center;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vw;
    border-bottom: #462020 0.2vw solid;
    transition: 1s;
}

.news-container:hover {
    filter: brightness(0.8);
    background-color: #ffffff;
    transition: 1s;
}

.news-container time {
    width: 15%;
    padding-left: 1em;
    font-size: 1.5vw;
    font-weight: 600;
    color: #462020;
}

.news-container .news-category {
    text-align: center;
    width: 15%;
    line-height: 6vw;
    background-color: #462020;
    color: #ffffff;
    font-size: 1.5vw;
}

.news-container .news-title {
    width: 70%;
    padding-left: 1em;
}

.news-container img {
    width: 10vw;
    height: 7vw;
    border-radius: 5px;
    margin-left: auto;
}

.news-detail {
    margin-bottom: 5vw;
}

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


.news-detail a {
    text-align: center;
    display: block;
    width: 25vw;
    color: #000000;
    text-decoration: none;
    line-height: 6vw;
    margin-left: auto;
    margin-right: auto;
    border: 0.1vw solid #462020;
    height: 6vw;
    font-size: 1vw;
    transition: 1s;
}

.news-detail a p {
    font-size: 2vw;
}

.news-detail a:hover {
    background-color: #462020;
    color: #ffffff;
    transition: 1s;
}

/* -----------------news終わり----------------- */

/* -----------------ACCESS始まり----------------- */

.map-section {
    width: 80vw;
    margin: 0 auto 10vw auto;
}

#ACCESS h2 {
    padding-top: 7vw;
    margin-bottom: 3vw;
    text-align: center;
    letter-spacing: 0.5em;
    font-size: 4vw;
    font-family: NotoSerifJP;
    color: #000000;
}

#ACCESS p {
    margin-bottom: 5vw;
    text-align: center;
    font-size: 2vw;
    font-family: NotoSerifJP;
}


.access-parent {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    align-items: flex-start;
}


.access-info {
    padding-top: 4vw;
    width: 100%;
    font-family: NotoSerifJP;
}

.access-row {
    display: flex;
    margin-bottom: 2vw;
    border-bottom: 0.1vw solid #462020;
    padding-bottom: 1vw;
}

.access-label {
    width: 30%;
    font-size: 3vw;
    font-weight: 600;
    color: #462020;
}

.access-text {
    width: 70%;
    font-size: 1.5vw;
    line-height: 1.8vw;
    white-space: pre-wrap;
}


.access-map {
    margin-top: 5vw;
    width: 100%;
}

.access-map iframe {
    width: 100%;
    height: 40vw;
    border-radius: 5px;
}

/* -----------------ACCESS終わり----------------- */

/* -----------------CONTACT始まり----------------- */

.map-contact {
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10vw;
    font-family: NotoSerifJP;
}

#CONTACT h2 {
    padding-top: 7vw;
    margin-bottom: 3vw;
    text-align: center;
    letter-spacing: 0.5em;
    font-size: 4vw;
    color: #000000;
}

#CONTACT p {
    margin-bottom: 5vw;
    text-align: center;
    font-size: 2vw;
}

.form-row {
    display: flex;
    margin-bottom: 2vw;
    border-bottom: 0.1vw solid #462020;
    padding-bottom: 2vw;
}

.form-label {
    width: 25%;
    font-size: 2vw;
    font-weight: 600;
    color: #462020;
}

.form-row input[type="text"],
.form-row input[type="email"] {
    width: 70%;
    padding: 0.8vw;
    font-size: 1.5vw;
    border-radius: 4px;
}

.radio-group {
    width: 70%;
    display: flex;
    gap: 3vw;
    font-size: 1.5vw;
}

/* テキストエリア */
.form-row textarea {
    width: 70%;
    height: 15vw;
    padding: 0.8vw;
    font-size: 1.5vw;
    border-radius: 4px;

}

/* 送信ボタンのデザイン */
.form-submit {
    text-align: center;
    margin-top: 4vw;
}

.form-submit input[type="submit"] {
    width: 25vw;
    line-height: 3vw;
    height: 6vw;
    font-size: 2vw;
    font-family: NotoSerifJP;
    color: #000000;
    background-color: #ffffff;
    border: 0.1vw solid #462020;
    cursor: pointer;
    transition: 1s;
}

.form-submit input[type="submit"]:hover {
    background-color: #462020;
    color: #ffffff;
    transition: 1s;
}

/* -----------------CONTACT終わり----------------- */

/* -----------------h2アニメーション始まり----------------- */

.fade-title span {
    display: inline-block; 
    opacity: 0;
    transform: translateY(30px); 
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-title.active span {
    opacity: 1;
    transform: translateY(0); 
}

/* -----------------h2アニメーション終わり----------------- */

/* -----------------main部分終わり----------------- */



/* -----------------footer部分始まり----------------- */

footer {
    padding: 3vw;
    background-color: #462020;
    color: #ffffff;
    font-family: NotoSerifJP;
    font-size: 1.5vw;
}

.footer-logo {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5vw;
    margin-bottom: 1.54vw;
}

.footer-info {
    text-align: center;
    margin-bottom: 3vw;
}

.footer-content {
    display: flex;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.footer-content ul li a {
    display: block;
    color: #ffffff;
    text-decoration: none;
}

.footer-nav {
    width: 50%;
    text-align: center;
}

.footer-nav ul li a{
    line-height: 5vw;
}

.sns-nav {
    width: 50%;
    border-left: #ffffff 0.1vw solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vw; /* インスタとXの縦の隙間 */
}

/* 枠の中でさらに幅を決めて中央に寄せる */
.sns-nav li {
    width: 17vw;
    margin: 0 auto;
}

/* リンク全体（文字とアイコンを横に並べる） */
.sns-nav li a {
    display: flex;
    align-items: center; /* 縦の中心を揃える */
    gap: 1vw; /* アイコンと文字の間の隙間 */
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1vw; /* 文字の大きさ */
}

/* ★独自のクラスでアイコンだけを大きくし、幅を固定する */
.sns-icon {
    font-size: 2.5vw; /* アイコンを大きくする */
    width: 3vw;       /* アイコンの横幅を固定して文字の開始位置を揃える */
    text-align: center;
}

footer p small {
    display: block;
    margin-top: 2vw;
    text-align: center;
    font-size: 1.2vw;
}

footer a:hover {
    filter: brightness(0.5);
}

/* -----------------footer部分終わり----------------- */