@charset "UTF-8";

body {
	font-family:"Zen Kaku Gothic New","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	font-size:16px;
	line-height: 1.5;
	font-weight: 500;
	text-align: center;
	color: #000000;
	background: #fffa00;
}
*{vertical-align: top; box-sizing: border-box; word-break: break-all;}
a{color: #000000; display: inline-block; text-indent: 0; text-decoration: none;}
a:hover{opacity: 0.6;}

img{pointer-events: none; width: 100%;}

.txt{
	opacity: 0;
	font-size: 0;
	letter-spacing: 0;
	position: absolute;
	top: 0;
	left: 0;
}

.sp{display: none;}

.in_box{
	max-width: 1000px; 
	width: 90%; 
	margin: 0 auto;
	padding-top: 40px;
}

@media screen and (max-width: 800px){
	.pc{display: none;}
	.sp{display: inline; width: 100%;}
}

#mv a{margin-top: 8%; display: block;}

#contents{margin: 10% 0 14%;}
#contents img{padding-top: 10%;}

.youtube{margin: 20% auto;}
.youtube-title {margin-bottom: 12%; display: block;}
.youtube-title img{display: inline-block;}

.old{margin-top: 20%;}

/*//////////////////////////
YouTube埋め込みについて
//////////////////////////*/
/* ギャラリーのグリッド（幅に応じて可変） */
/* 行ごとに並べを制御 */
.yt-row {
    display: flex;
    /*gap: 16px;*/
    justify-content: space-between;
    margin-bottom: 7%;
}

/* 2×2 グリッド */
.yt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8%;
	margin-bottom: 12%;
}
.yt-card--portrait{width: 46%;}
.yt-card--wide{width: 100%;}
.yt-row img{width: 100%;}


/* モーダル */
body.modal-open {
    overflow: hidden;
}

/* モーダル本体：中央寄せ用のフレックス（or グリッドでもOK） */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    /* 初期は非表示 */
    z-index: 1000;
    align-items: center;
    /* 中央寄せ */
    justify-content: center;
    /* 中央寄せ */
    padding: 24px;
    /* 端末が小さい時の余白 */
}

.modal.is-open {
    display: flex;
}

/* オーバーレイ：全面にかぶせる */
.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

/* コンテンツ：必要なサイズのみ（全画面に広げない） */
.modal__content {
    position: relative;
    z-index: 1;
    /* オーバーレイより前面 */
    width: min(92vw, 960px);
    max-height: 90vh;
    /* 画面からはみ出さない */
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 10px;
    /* お好みで */
    overflow: hidden;
    /* 角丸適用など */
    /* 影や背景が欲しければ */
    /* background: #000; */
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.4); */
}

/* 16:9 埋め込み領域はそのままでOK */
.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

/* 縦長（ショート等） */
.modal.is-portrait .video-wrapper {
    aspect-ratio: 9 / 16;
    /* 縦基準でフィットさせる */
    height: min(90vh, 800px);
    width: auto;
    max-width: 92vw;
}

.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* 閉じるボタン（任意） */
.modal__close {
    align-self: flex-end;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* スマホ幅の微調整（必要に応じて） */
@media (max-width: 480px) {
    .yt-row {
        gap: 12px;
    }

    .yt-grid {
        gap: 12px;
    }

    .yt-play::after {
        width: 44px;
        height: 44px;
    }
}



footer{margin-top: 16%;}
footer .txt_img{
	max-width: 673px; 
	width: 90%;
	display: inline-block;
	margin-bottom: 9%;
}