* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img {
	display: block;
	width: 100%;
	height: auto;
}

body {
    font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans", Meiryo, sans-serif;
    background:url("../images/background.jpg") top center repeat-y;
    background-size:100% auto;
    overflow-x:hidden;
}

.hero{
    position: relative;
    overflow: visible;
    z-index: 0;
}

.hero_image{
    position: relative;   /* absoluteをやめてrelativeに */
    inset: auto;          /* もしくは削除 */
    width: 100%;
    aspect-ratio: 1920 / 1130;
    background: url("../images/hero.png") center top no-repeat;
    background-size: 100% auto;
    z-index: -1;
}

@media screen and (max-width:768px){
	.hero_image{
    position: relative;   /* absoluteをやめてrelativeに */
    inset: auto;          /* もしくは削除 */
    width: 100%;
    aspect-ratio: 1920 / 2020;
    background: url("../images/hero-sp.png") center top no-repeat;
    background-size: 100% auto;
    z-index: -1;
	}
}

.yatai{
    width: 100%;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.yatai img{
    width:100%;
    display:block;
}

.yatai .pc{
    display:block;
}

.yatai .sp{
    display:none;
}

@media screen and (max-width:768px){
    .yatai .pc{
        display:none;
    }
    .yatai .sp{
        display:block;
    }
}

.sweets_title img{
    width: min(430px, 80%);
    margin: 60px auto 20px;
}

.sweets_flex{
    max-width: 1200px;
    margin: 0 auto;
}

.sweets_row{
    display: flex;
    margin: 0 auto 20px;
	max-width: 935px;
}

.sweets_row .sweets_pair{
    flex: 1; /* 2つを均等な幅で横並びにする */
}

.sweets_item img,
.sweets_shop img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.shop2, .shop3{
    width: 85%;
    margin: 0 auto;
}

.sweets .item1{
    max-width: 385px; /* 単独配置なので、大きくなりすぎないよう上限を設定。実際のバランスを見て調整してください */
    margin: 0 auto;
}

@media screen and (max-width: 768px){
    .sweets{
        width: 100%;
        margin: 40px 0;
    }
	.sweets_title img{
		margin: 30px auto 10px;
	}

    .sweets_row{
        flex-direction: column;
        gap: 0;
		margin: 0 auto;
    }

    .sweets_pair{
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 20px;
    }

    .sweets_item img,
    .sweets_shop img{
        width: 90%;
        margin: 0 auto;
    }

    .sweets .item1{
        max-width: 100%;
    }
}

.kitchen_title img{
    width:min(560px,100%);
    margin:50px auto 30px;
}

.kitchen_item img{
    display:block;
    width:100%;
    height:auto;
}

.kitchen_item a {
    display: flex;
    justify-content: center;
    color: #E85298;
}

.kitchen-1 a {
    display: flex;
    justify-content: right;
    color: #E85298;
    position: relative;
    top: -5%;
    right: 5%;
}

.kitchen-4a {
    display: flex;
    justify-content: space-around;
    position: relative;
    left: -15px;
}

/*====================
PC
====================*/

.kitchen_wrap{
    width:min(77%,1140px);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.kitchen_title{
    grid-column:1/-1;
}

.kitchen-1{
    grid-column:2;
    width:265%;
    justify-self:center;
}

.yakitori{
    grid-column:1;
}

.oyakipanda{
    grid-column:2;
}

.happysmile{
    grid-column:3;
}

.teppanyaki{
    grid-column:1;
}

.kitchen-4{
    grid-column:2 / span 2;
    align-self:end;
}

/*====================
SP
====================*/

@media (max-width:500px){

    .kitchen_title img{
        margin:20px auto;
    }

    .kitchen_wrap{
        width:calc(100% - 20px);
        grid-template-columns:repeat(2,1fr);
        gap:8px;
    }

    .kitchen_title{
        grid-column:1/-1;
    }

    .kitchen-1{
        grid-column:1/-1;
        width:100%;
        justify-self:center;
    }

    .yakitori{
        grid-column:1;
    }

    .oyakipanda{
        grid-column:2;
    }

    .happysmile{
        grid-column:1;
    }

    .teppanyaki{
        grid-column:2;
    }

    .kitchen-4{
        grid-column:1/-1;
    }

    .kitchen_item a {
        font-size: 12px;
    }

    .kitchen-1 a {
        font-size: 12px;
    }
    .kitchen-4a {
        left: -10px;
    }

}

@media screen and (min-width:1300px){
    .kitchen_item a,
    .kitchen-1 a  {
        font-size: 1.2rem;
    }
}

.map{
    width:min(1200px, calc(100% - 60px));
    margin:0 auto;
}

.map_title img{
    width:min(300px,90%);
    margin:100px auto 30px;
}

.map_image img{
    width:min(1200px,100%);
    margin:auto;
}

.map-link {
    color: #E85298;
    margin: 0 4% 80px;
}

.links {
    display: flex;
    justify-content: space-between;
}

.map-link instagram {
}

.map-link a {
    color: #E85298;
}

.decokatsu img{
    width: 100%;
    max-width: 700px;
    margin: 40px auto;
}

@media screen and (max-width:768px){
	.map_title img {
		width:min(200px,90%);
		margin:50px auto 30px;
	}
	.map {
		width:min(1200px, calc(100% - 20px));
		margin:0 auto;
	}
	.map_link img{
		margin-bottom: 40px;
	}
    .map-link a {
        font-size: 12px;
    }
	.decokatsu img{
		margin: 20px auto 40px;
	}
}

@media screen and (min-width:1300px){
    .map-link a {
        font-size: 1.2rem;
    }
}

/* ===== タイムテーブル共通 ===== */
.table_title img{
    width:min(550px,90%);
    margin:100px auto 10px;
}

.time_table{
    width: min(90%, 700px);
    margin: 0 auto;
    padding: 60px 0;
    position: relative;
}

/* ===== タイムテーブル PC/SP 出し分け ===== */
.time_table_image{
    display: none; /* デフォルトは非表示、PCで表示する */
}

.time_table_image img{
    display: block;
    width: 100%;
    margin: 0 auto;
}

.time_table.sp{
    display: block; /* デフォルトは表示(スマホ想定) */
}

@media screen and (min-width: 769px){
    .time_table_image{
        display: block;
        max-width: 1270px;
        margin: 0 auto;
    }

    .time_table.sp{
        display: none;
    }
}

.saturday,
.sunday{
    position: relative;
    background: #fff;
    border-radius: 30px;
    padding: 65px 30px 40px;
    margin-top: 90px; /* 日付バッジ分の食い込みスペース */
}

/* ===== 日付バッジ(Saturday.png / Sunday.png) ===== */
.date_badge{
    position: absolute;
    top: -76px; /* カード上端からはみ出す量。実際の見え方を見て微調整してください */
    left: 50%;
    transform: translateX(-50%);
    width: min(60%, 170px);
    aspect-ratio: 1000 / 448;
    background: url("../images/Saturday.png") center top / 100% 100% no-repeat;
}

.sunday .date_badge{
    background-image: url("../images/Sunday.png");
}

/* ===== 各コンテンツブロック ===== */
.time_content{
    margin-bottom: 50px;
}

.time_content:last-child{
    margin-bottom: 0;
}

/* ===== 時間帯バナー(blue.png) ===== */
.time_banner{
    position: relative;
    width: 100%; /* カード幅より左右に少し余白を持たせる */
    max-width: 640px;
    margin: 0 auto;
    aspect-ratio: 2000 / 113;
    background: url("../images/blue.png") center / 100% 100% no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.time_banner span{
    color: #fff;
    font-weight: bold;
    font-size: clamp(14px, 3.5vw, 24px);
    white-space: nowrap;
	letter-spacing: 1.2px;
	position: relative;
	top: -1px;
}

/* ===== タグ(パフォーマンス、など) ===== */
.tag{
    position: absolute;
    top: -15px;   /* バナー上端からのはみ出し量 */
    right: -3%;  /* バナー右端からの距離 */
    display: inline-block;
    padding: 4px 16px;
    background: #eaeef8;
    border: 1px solid #2f7fc1;
    color: #2f7fc1;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

@media screen and (max-width:500px){
	.time_table{
		padding: 0;
	}
    .tag{
        top: -27px;
		font-size: 10px;
    }
}

.tag::before{
    content: "";
    position: absolute;
    bottom: -5px;
    left: 30px;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    background-color: #eaeef8; /* .tagの背景色と揃える */
    rotate: 135deg;
    translate: -50% 0;
}

.tag::after{
    content: "";
    position: absolute;
    bottom: -7px;
    left: 30px;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border: 1px solid;
    border-color: #2f7fc1 #2f7fc1 transparent transparent;
    rotate: 135deg;
    translate: -50% 0;
}

/* ===== タイトル・本文 ===== */
.content_title{
    margin-top: 10px;
    font-size: clamp(18px, 5vw, 29px);
    font-weight: bold;
    text-align: center;
}

.highlight{
    margin-top: 10px;
    text-align: center;
    background: #fff6c8;
    padding: 8px;
    font-weight: bold;
	font-size: 20px;
}

.accent{
    color: #e0341f;
    font-size: 1.3em;
}

.content_image{
    margin-top: 15px;
    border-radius: 8px;
}

.saturday_content_text{
	color: #0062b1;
    margin-top: 15px;
    font-size: 17px;
    line-height: 1.7;
	font-weight: 600;
}

.sunday_content_text{
	color: #e50055;
    margin-top: 15px;
    font-size: 17px;
    line-height: 1.7;
	font-weight: 600;
}

.playing_content_text{
	color: #9c549d;
    margin-top: 15px;
    font-size: 17px;
    line-height: 1.7;
	font-weight: 600;
}

/* ===== 時間帯バナーの色違い ===== */
.time_banner.red{
    background-image: url("../images/red.png");
}

.time_banner.purple{
    background-image: url("../images/purple.png");
}

/* ===== 丸ピルバッジ(学校名+時刻)を見出しに軽くかぶせる ===== */
.school_item .content_title{
    position: relative;
    margin-top: 30px; /* ピルの高さぶん、上に余白を作る */
}

.school_item .content_title{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; /* 画面が狭い時、はみ出さず折り返せるように */
}

.enso {
	text-align: center;
	color: #9c549d;
}

.pill{
    /* position: absolute; ← 削除、flexの通常の子要素にする */
    display: inline-block;
    padding: 3px 18px 5px;
    border-radius: 999px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0; /* ピルは縮まないようにする */
	position: relative;
	top: 1px;
}

.pill.purple{
    background: linear-gradient(135deg, #a13d9e, #7b2fa3);
}

.pill.red{
    background: linear-gradient(135deg, #e0341f, #e5006e);
}


@media screen and (max-width:768px){
	.saturday_content_text{
		font-size: 15px;
		line-height: 1.7;
	}
	.sunday_content_text{
		font-size: 15px;
		line-height: 1.7;
	}
	.playing_content_text{
		font-size: 15px;
		line-height: 1.7;
	}
	.pill{
		padding: 0 18px 2px;
		font-size: 15px;
		top: 1px;
	}
	.enso {
		font-size: 18px;
	}
}

/*
.pink_zone{
    background: url("../images/background-pink.jpg") top center repeat-y;
    background-size: 100% auto;
}
*/

.footer{
    padding: 40px 20px 3px;
    text-align: center;
	background-image: linear-gradient(90deg, #cf0047, #e85298 50%, #cf0047);
	color: #fff;
	border-top: 5px solid #b07c1f;
}

.footer_inner{
    max-width: 700px;
    margin: 0 auto;
}

.footer_logo{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.footer_text{
    font-size: 14px;
    margin-bottom: 10px;
}

.footer_copyright{
	margin-top: 40px;
    font-size: 12px;
    color: #fff;
}

@media screen and (max-width:768px){
	.speechBubble {
        display: flex;
        justify-content: center;
	position: relative;   /* 追加:time_bannerを基準に配置するため */
	top: -25px;            /* time_bannerの上端からどれだけ浮かせるか */
	margin: 0 7%;      /* absoluteにするため不要になる */
	padding: 8px 15px;
	border: 2px solid #ffffff;
	border-radius: 9999px;
	background-color: #ffe100;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #000000;
	white-space: nowrap;   /* 追加:1行で収める場合 */
	z-index: 3;
	font-weight: 600;
	}
}