@charset "utf-8";
/* CSS Document */

html{
scroll-behavior:smooth;
}
a{transition: 0.5s;}
/* ヘッダー */
	.se_area_header div img{display:block;width: 100%;}
	.se_area_header div a{display:block;margin: 0 auto;width:40%;max-width: 200px;}
/* 背景 */
	#area_nagoya #wrapper,
	#area_top #wrapper,
	#area_owari #wrapper,
	#area_ama #wrapper,
	#area_chita #wrapper,
	#area_nishimikawa #wrapper,
	#area_higashimikawa #wrapper{background-image: url(../images/img_bg_area.png);/*background-attachment: fixed;*/background-size: clamp(500px,100%,1600px);background-repeat:no-repeat;background-position:top center;}
/* TOP 一覧ページ */
	#area_top #wrapper{background-color: rgba(253,89,232,0.48);}
	#area_top .tit_area{font-size: clamp(1rem, 4vw, 1.5rem);font-weight: bold;}
	#area_top .tit_area a{text-decoration: none; color: #000;}
	#area_top .tit_area a:hover{text-decoration: inherit; color:#FC0BC6;}
	#area_top .area-menu{margin-bottom: 1rem;}
	#area_top .box_menu{width: 96%;max-width: 1200px;padding: 2rem;box-sizing: border-box;background-color: rgba(253,251,251,0.9);margin: 0 auto;border-radius: 0.25rem;}
	#area_top .box_menu div{padding: 1rem 0;}
	#area_top .box_menu h2{text-align: center;font-size:clamp(1.5rem, 5vw, 2.5rem);}
	#area_top .box_menu p.area_catch{text-align: center;font-size:clamp(1rem, 3vw, 1.55rem);font-weight: bold;padding-bottom: 2rem;}

/* 尾張地方（名古屋）ページ */
	#area_nagoya #wrapper{background-color:rgba(2,230,249,0.25);}
	#area_nagoya #wrapper .youtube-grid{grid-template-columns:repeat(1,1fr);max-width: 1000px;}
/* 尾張地方（尾張）ページ */
	#area_owari #wrapper{background-color:rgba(83,3,251,0.4);}
/* 尾張地方（海部）ページ */
	#area_ama #wrapper{background-color:rgba(253,243,0,0.50);}
/*　尾張地方（知多）ページ*/
	#area_chita #wrapper{background-color:rgba(191,1,252,0.5);}
/*　三河地方（西三河）ページ*/
	#area_nishimikawa #wrapper{background-color:rgba(6,255,3,0.5);}
/*　三河地方（東三河）ページ*/
	#area_higashimikawa #wrapper{background-color:rgba(228,251,0,0.6);}

/* 動画ページ共通 */
	#area .box_movie{max-width: 2000px;padding: clamp(0.25rem,3vw,2rem);box-sizing: border-box;background-color: rgba(253,251,251,0.8);margin: 0 auto;border-radius: 0.25rem;}
	.box_movie .tit_area{font-size: clamp(1.25rem, 8vw, 2.5rem);font-weight: bold;}	
	.youtube-item:target{animation: highlightFade 4s ease;}
@keyframes highlightFade{
0%{
background-color:rgba(255,255,255,0.80);
}
70%{
background-color:rgba(255,0,237,0.50);
}
100%{
background:transparent;
}
}

section#area
{position: relative;}
section#area > div{padding: 1rem;}

/* ===== アンカーリンクメニュー ===== */
.sticky{
position: sticky;
top: 0;
padding: 1rem 0;
}

.area-menu{
display:flex;
gap:0.25rem;
flex-wrap:wrap;
/*margin-bottom:2.5rem;*/
}
	
.area-menu a{
text-decoration:none;
background:/*#fe5789*/#FC0BC6;
padding:0.5rem 0.875rem;
border-radius:1.25rem;
font-size:clamp(0.65rem, 1vw, 0.875rem);
font-weight: bold;
color:#fff;
}

.area-menu.city a{
background:#666;
margin-top: -0.25rem;
padding:0.25rem 0.5rem;
font-size:clamp(0.5rem, 1vw, 0.75rem);
font-weight: bold;
}

.area-menu a:hover,
.area-menu.city a:hover{
background:#EB0000;
}
/* ===== グリッド ===== */

.youtube-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
/*gap:clamp(0.875rem, 1vw, 1.5rem);*/
width: 96%;max-width: 1600px;
margin: 0.5rem auto;
list-style:none;
padding:0;
}

/* ===== 動画カード ===== */

.youtube-item{
display:flex;
flex-direction:column;
padding:0.75rem;
border-radius:0.25rem;
scroll-margin-top:200px;
}

.youtube-title{
font-size:1rem;
font-weight:bold;
margin-bottom:0.5rem;
white-space:nowrap;
overflow:hidden;
/*text-overflow:ellipsis;　…を表示 */
}

.youtube-video{
aspect-ratio:16/9;
margin-bottom:0.5rem;
}

/*動画無し*/
.youtube-video img{
width:100%;
height:100%;
object-fit:cover;
border-radius:0.25rem;
}
.youtube-item.novideo p{
font-size:0.75rem;
color:#888;
font-weight:bold;
}
.novideo .youtube-link{
font-size:0.75rem;
color:#888;
text-decoration:none;
font-weight:bold;
}
/*/動画無し*/

.youtube-video iframe{
width:100%;
height:100%;
border:none;
background-color: #000;
}

.youtube-link{
font-size:0.75rem;
color:#cc0000;
text-decoration:none;
font-weight:bold;
}

.youtube-link:hover{
text-decoration:underline;
}

/* ===== レスポンシブ ===== */

@media (max-width:1024px){
	#area_nagoya #wrapper,
	#area_top #wrapper,
	#area_owari #wrapper,
	#area_ama #wrapper,
	#area_chita #wrapper,
	#area_nishimikawa #wrapper,
	#area_higashimikawa #wrapper{background-position:left;background-attachment: fixed;}
	
	#area_nagoya #wrapper > div,
	#area_top #wrapper > div,
	#area_owari #wrapper > div,
	#area_ama #wrapper > div,
	#area_chita #wrapper > div,
	#area_nishimikawa #wrapper > div,
	#area_higashimikawa #wrapper > div{padding-bottom: 1rem;}

	.youtube-grid{grid-template-columns:repeat(2,1fr);}
	}

@media (max-width:600px){
.youtube-grid{grid-template-columns:1fr;}
.sticky{position: sticky;/*margin-top: 150px;*/}
}