/* responsive.css */
@media (max-width: 768px) {

    /* ▼ section の強制 margin/padding が fade-up を殺していたので修正 */
    section {
        padding: 40px 5%;
        margin: 40px 0;
    }
	
	.logo {
    width: 50%;
}
.logo img{
	width: 100%;
	
}
	
.hero-content {
	width: 80%;
	margin-top: 180px;
    margin-left: auto;
	margin-right: auto;
	
}

.hero-content img {
    width: 100%;
	
		
}
    /* ▼ fade-up の初期状態をスマホでも強制 */
    .fade-up {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity .6s ease-out, transform .6s ease-out;
    }

    .fade-up.show {
        opacity: 1;
        transform: translateY(0);
    }

    /* ▼ greeting-images の transform/opacity 上書きを fade-up に影響しないよう限定 */
    .greeting-images img:not(.fade-up) {
        position: static;
        transform: none;
        opacity: 1;
    }

    /* ▼ intro-images も同様に限定 */
    .intro-images img:not(.fade-up) {
        position: static;
        transform: none;
        opacity: 1;
    }

    /* ▼ レイアウト調整（あなたの元コードを維持） */
    .greeting-inner,
    .intro-inner,
    .access {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .intro-text,
    .intro-images,
    .greeting-text,
    .greeting-images,
    .access-text,
    .access-map,
    .calendar-wrapper {
        width: 100%;
    }

    .intro-images {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .intro-images img {
        width: 100%;
        height: auto;
    }

    .menu-links {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .menu-card {
        width: 100%;
        height: auto;
    }

    .menu-card img {
        width: 100%;
        height: auto;
        display: block;
    }

    .news-list {
        flex-direction: column;
        gap: 20px;
    }

    .news-item {
        width: 100%;
    }

    .access-map iframe,
    .access-calendar iframe {
        height: 300px;
    }

    .section-title {
        font-size: 1.8rem;
        text-align: left;
    }

    .pc-nav { display: none; }
    .sp-menu-btn { display: flex; }
    .sp-nav { display: block; }

    .greeting-inner {
        flex-direction: column;
        text-align: left;
        gap: 30px;
        align-items: flex-start;
    }

    .greeting-text {
        text-align: left;
        width: 100%;
    }

   

   

    .greeting-inner {
        flex-direction: column; /* 縦並びに変更 */
        gap: 30px;
    }

   /* ------------------------------
   greeting-images（1枚専用）
------------------------------ */
.greeting-images {
    width: 100%;
    
    position: relative;
    margin: 0 auto;
    overflow: visible;
    padding: 40px 0; /* 上下に余白を確保して中央に見せる */
}

/* 画像1枚だけの中央寄せ */
.greeting-images img {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%) translateY(30px); /* 初期位置：中央＋下に30px */
    margin: 0 auto;
    opacity: 0;
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    transition: 0.8s ease-out;
}

/* ------------------------------
   fade-right（1枚用に最適化）
------------------------------ */
.fade-right {
    opacity: 0;
    transform: translateY(40px);
    transition: 1s ease-out;
}

.fade-right.show {
    opacity: 1;
    transform: translateY(0);
}

/* 画像のアニメーション（表示時） */
.fade-right.show img {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


    /* 表示された時 */
    .fade-right.show .img1 {
        opacity: 1;
        transform: translateY(0) rotate(-2deg);
    }
    .fade-right.show .img2 {
        opacity: 1;
        transform: translateY(0) rotate(1.5deg);
        transition-delay: 0.2s;
    }
    .fade-right.show .img3 {
        opacity: 1;
        transform: translateY(0) rotate(-1deg);
        transition-delay: 0.4s;
    }


    .intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .intro-text {
        width: 100%;
        text-align: left;
    }

    

    .menu-cards-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

   

    .store-gallery {
        margin: 200px 0;
    }

    .store-row,
    .store-row.reverse {
        flex-direction: column;
    }

    .course-card {
        padding: 20px;
    }

    .food-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }

    .food-item img {
        height: 220px;
    }
	
	
    .menu-card {
        flex-direction: column;
        text-align: left;
    }

    .menu-card img {
        width: 100%;
    }

	.sp-nav ul {
		list-style: none;
	}
	


	.section-title {
    font-size: 20px;
    margin-bottom: 40px;
    border-left: 4px solid #c40000;
    padding-left: 12px;
}

.store-text h3 {
    font-size: 18px;
    
}

.page-title {
    font-size: 20px;
    
}
	.course-name {
    font-size: 18px;
    
}
	.menu-category {
    font-size: 18px;
   
}
	.food-item h3 {
    font-size: 18px;
    
}
	.bento-name {
    font-size: 20px;
   
}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}