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

#wrapper {display: flex; flex-direction: column; width: 100%; min-height: 100vh; margin: 0; padding: 0; box-sizing: border-box; overflow: visible !important;}

/*PC:body-------------------------------------*/
@media screen and (min-width:961px){
	.pc {display: block !important;}
	.tb {display: none !important;}
	.sp {display: none !important;}
	
	/* TOP-PAGE */
	section {float: left; width: 100%; margin: 0 0 50px; padding: 0; box-sizing: border-box; overflow: hidden;}
	section h2 {float: left; width: 100%; height: 24px; line-height: 24px; font-size: 16px; margin: 8px 0; padding: 0; text-align: center; box-sizing: border-box; font-family: 'Noto Serif JP', serif; color: #6b401b;}
	
	#videoSpc {float: left; width: 100%; height: 88vh; margin: 0; overflow: hidden; box-sizing: border-box; border-radius: 0 0 4px 4px; position: relative; display: flex; justify-content: center; align-items: center; box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.4);}
	#videoSpc video {width: 100%; height: 100vh; object-fit: cover; border-radius: 8px;}
	
	#videoSpc ul {width: 100%; height: 100vh; position: absolute; top: 0; bottom: 0; left: 0; margin: auto 0; padding: 120px 0 0; text-align: center; overflow: hidden; color: #F8F4E8;
			display: flex; /* Flexboxを有効化 */
  			flex-direction: column; /* 子要素を縦に並べる */
  			justify-content: center; /* 縦方向の中央に配置 */
	}
	#videoTitle {width: 90%; height: 30px; line-height: 30px; margin: 0; padding: 0 5%; font-size: 26px;}
	#videoOutset {width: 90%; height: auto; margin: 0; padding: 30px 5%; font-size: 28px}
	#videoText {width: 100%; height: auto; margin: 0; padding: 30px 0; font-size: 24px; font-family: 'Noto Serif JP', serif; }
	
	/* box*/
	.item_box {width: 100%; height: auto; background: #F8F4E8; padding: 16px 0; box-sizing: border-box;}
	.news_box {width: 100%; height: auto; background-image: url("../img/parallax/back_img.webp"); padding: 16px 0; box-sizing: border-box;}
	.slider_box {width: 100%; height: auto; background: #FFFFFF; padding: 16px 0; box-sizing: border-box;}
	
	/* ul */
	.vertical_ul {float: left; width: 60%; margin: 0 20%; padding: 0; box-sizing: border-box;}
	.vertical_ul li {width: 100%; height: auto; list-style: none;}
	.verticalTitle {height: 24px; line-height: 24px; text-align: center; font-size: 24px; box-sizing: border-box; font-family: 'Noto Serif JP', serif; font-weight: 700; color: #6b401b;}
	/* news */
	.verticaArticle {width: 96%; height: auto; margin: 30px 0; padding: 0 2%; border-radius: 8px; background: rgba(255,255,255,0.3);}
	
	/* ul-slider */
	.slider_ul {float: left; width: 100%; margin: 0; padding: 0 0 90px; box-sizing: border-box; border-top: solid 1px #BB8B00;}
	.slider_ul li {width: 100%; height: auto; list-style: none;}
	.slider_ul li p {width: 100%; height: 20px; line-height: 20px; margin: 8px 0; text-align: center; font-size: 14px; box-sizing: border-box; font-family: 'Noto Serif JP', serif; font-weight: 700; color: #6b401b; overflow: hidden;}
	.sliderTitle {height: 24px; line-height: 24px; margin: 8px 0 16px; text-align: center; font-size: 24px; box-sizing: border-box; font-family: 'Noto Serif JP', serif; font-weight: 700; color: #6b401b;}
	.sliderArrow {width: 100%; height: 60px; margin: 120px 0 50px; box-sizing: border-box; position: relative;}
	.videoSpc {float: left; width: 100%; height: auto; margin: 0; padding: 0 0 50px; overflow: hidden; box-sizing: border-box; text-align: center; border-bottom: solid 1px #BB8B00;}
	.videoSpc video {width: 100%; max-width: 1200px; height: auto; border-radius: 8px;}
	
  	/* ul-content:slider */
	.slider {width: 100%; height: auto; margin: 0 auto; padding: 0; box-sizing: border-box;}
	.slider-img {margin: 0 5px;}
	.slider-img img {height: auto; width: 100%; object-fit: cover; aspect-ratio: 16 / 9;}
	
	/* ul */
	.beside_ul {float: left; width: 90%; margin: 80px 5% 80px; padding: 0 8px 30px; display: flex; border-bottom: dashed 1px rgba(107,64,27,0.45); box-sizing: border-box; box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.2);}
	.beside_ul li {width: 100%; list-style: none; box-sizing: border-box; display: flex; align-items: center;}
	/* 修正後：比率を固定してはみ出しをカット */
	.beside_ul li img {
    	width: 100%;
    	aspect-ratio: 16 / 9; /* 強制的に16:9の枠を作る */
    	object-fit: cover;    /* 枠に合わせて中央で切り抜き（重要！） */
    	object-position: center; /* 切り抜く位置を中央に固定 */
	}
	
	/* ul-content */
	.u2 {width: 80%; height: auto; margin: auto 10%; padding: 0; box-sizing: border-box; font-family: 'Noto Serif JP', serif; font-weight: 700; color: #6b401b;}
	.u2title {width: 100%; height: 60px; line-height: 24px; font-size: 20px; text-align: left; box-sizing: border-box;}
	.u2text {width: 100%; height: auto; line-height: 24px; font-size: 16px; margin: 0 0 40px; padding: 20px 0; box-sizing: border-box; text-align: left;}
	.u2text span {width: 100%; display: block;}
	.u2text2 {width: 100%; height: auto; line-height: 24px; font-size: 16px; margin: 0 0 40px; padding: 20px 0; box-sizing: border-box;}
	.u2text2 span {width: 100%; display: block;}
	.u2arrow {width: 100%; height: 60px;  box-sizing: border-box; position: relative;}
	
	/* ul-content:news */
	article {float: left; width: 100%; height: auto; margin: 8px 0 30px; padding: 0;}
	article ul {width: 100%; height: auto; margin: 0; padding: 16px 50px; box-sizing: border-box; background: #FFFFFF; border-radius: 6px; box-shadow: 0 12px 16px rgba(0,0,0,0.08);}
	.articleDay {width: 100%; height: 20px; line-height: 20px; margin: 10px 0; padding: 0 3%; box-sizing: border-box; font-weight: 700; color: #6b401b; text-align: right;}
	.articleTitle {width: 100%; height: 60px; line-height: 60px; font-size: 24px; box-sizing: border-box;}
	.articleText {width: 100%; height: auto; line-height: 24px; font-size: 16px; margin: 0 0 40px; padding: 20px 0; box-sizing: border-box;}
	
	/* map */
	.gmap {width: 100%; height: 100%; margin: 0; padding: 0;}
	
	
	
}

/*TB:body-------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 960px){
	.pc {display: none !important;}
	.tb {display: block !important;}
	.sp {display: none !important;}
	
	/* TOP-PAGE */
	section {float: left; margin: 0 0 30px; padding: 0 0 20px;}
	section h2 {width: 100%; height: 24px; line-height: 24px; font-size: 14px; margin: 16px 0; padding: 0 30px 0 0; text-align: right; box-sizing: border-box; float: left; font-family: 'Noto Serif JP', serif; color: #6b401b;}
	
	#videoSpc {width: 100%; height: 74vh; margin: 0; overflow: hidden; box-sizing: border-box; position: relative; display: flex; justify-content: center; align-items: center;  float: left; box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.2);}
	#videoSpc video {width: 100%; height: 100vh; object-fit: cover;}
	
	#videoSpc ul {width: 100%; height: 100vh; position: absolute; top: 0; bottom: 0; left: 0; margin: auto 0; padding: 120px 0 0; text-align: center; overflow: hidden; color: #F8F4E8;
			display: flex; /* Flexboxを有効化 */
  			flex-direction: column; /* 子要素を縦に並べる */
  			justify-content: center; /* 縦方向の中央に配置 */
	}
	#videoTitle {width: 90%; height: 30px; line-height: 30px; margin: 0; padding: 0 5%; font-size: 16px;}
	#videoOutset {width: 90%; height: auto; margin: 0; padding: 30px 5%; font-size: 18px}
	#videoText {width: 100%; height: auto; margin: 0; padding: 30px 0; font-size: 16px; font-family: 'Noto Serif JP', serif; }
	
	/* box*/
	.item_box {width: 100%; height: auto; background: #F8F4E8; padding: 16px 0; box-sizing: border-box;}
	.news_box {width: 100%; height: auto;  background-image: url("../img/parallax/back_img.webp"); padding: 16px 0; box-sizing: border-box;}
	.slider_box {width: 100%; height: auto; background: #FFFFFF; padding: 16px 0; box-sizing: border-box;}
	
	/* ul */
	.vertical_ul {width: 90%; margin: 0 5%; padding: 0; box-sizing: border-box; float: left;}
	.vertical_ul li {width: 100%; height: auto; list-style: none;}
	.verticalTitle {height: 24px; line-height: 24px; text-align: center; font-size: 24px; box-sizing: border-box; font-family: 'Noto Serif JP', serif;font-weight: 700; color: #6b401b;}
	/* news */
	.verticaArticle {width: 98%; height: auto; max-height: 780px; margin: 14px 0; padding: 0 1%; box-sizing: border-box; border-radius: 8px; background: rgba(255,255,255,0.3);}
  	
	/* ul-slider */
	.slider_ul {width: 100%; margin: 0; padding: 0 0 90px; box-sizing: border-box; float: left; border-top: solid 1px #BB8B00;}
	.slider_ul li {width: 100%; height: auto; list-style: none;}
	.slider_ul li p {width: 100%; height: 20px; line-height: 20px; margin: 8px 0; text-align: center; font-size: 14px; box-sizing: border-box; font-family: 'Noto Serif JP', serif; font-weight: 700; color: #6b401b; overflow: hidden;}
	.sliderTitle {height: 24px; line-height: 24px; margin: 8px 0 18px; text-align: center; font-size: 24px; box-sizing: border-box; font-family: 'Noto Serif JP', serif; font-weight: 700; color: #6b401b;}
	.sliderArrow {width: 100%; height: 60px; margin: 120px 0 50px; box-sizing: border-box; position: relative;}
	.videoSpc {width: 100%; height: auto; margin: 0; padding: 0 0 50px; overflow: hidden; box-sizing: border-box; text-align: center; float: left; border-bottom: solid 1px #BB8B00;}
	.videoSpc video {width: 100%; max-width: 1200px; height: auto;}
	
	/* ul-content:slider */
	.slider {width: 100%; height: auto; margin: 0 auto; padding: 0; box-sizing: border-box;}
	.slider li {　border: solid 1px #0074F0;}
	.slider-img {margin: 0 5px;}
	.slider-img img {height: auto; width: 100%; object-fit: cover; aspect-ratio: 16 / 9;}
	
	/* ul */
	.beside_ul {width: 98%; margin: 30px 1%; padding: 0; float: left; border-bottom: dashed 1px rgba(107,64,27,0.45); box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.2);}
	.beside_ul li {width: 100%; margin: 0; padding: 0 0 50px; list-style: none; box-sizing: border-box; display: flex; align-items: center;}
	/* 修正後：比率を固定してはみ出しをカット */
	.beside_ul li img {
    	width: 100%;
    	aspect-ratio: 16 / 9; /* 強制的に16:9の枠を作る */
    	object-fit: cover;    /* 枠に合わせて中央で切り抜き（重要！） */
    	object-position: center; /* 切り抜く位置を中央に固定 */
	}
	
	/* ul-content */
	.u2 {width: 80%; height: auto; margin: auto 10%; padding: 0; box-sizing: border-box; font-family: 'Noto Serif JP', serif; font-weight: 700; color: #6b401b;}
	.u2title {width: 100%; height: auto; line-height: 26px; font-size: 20px; text-align: left; box-sizing: border-box;}
	.u2text {width: 100%; height: auto; line-height: 24px; font-size: 14px; margin: 0 0 20px; padding: 10px 0; text-align: left; box-sizing: border-box;}
	.u2text span {width: 100%; display: block;}
	.u2text2 {width: 100%; height: auto; line-height: 24px; font-size: 16px; margin: 0 0 20px; padding: 10px 0; box-sizing: border-box;}
	.u2text2 span {width: 100%; display: block;}
	.u2arrow {width: 100%; height: 60px;  box-sizing: border-box; position: relative;}
	
	/* ul-content:news */
	article {width: 100%; height: auto; margin: 8px 0 30px; padding: 0; float: left;}
	article ul {width: 100%; height: auto; margin: 0; padding: 16px 18px; box-sizing: border-box; background: #FFFFFF; border-radius: 6px; box-shadow: 0 12px 16px rgba(0,0,0,0.08);}
	.articleDay {width: 100%; height: 20px; line-height: 20px; margin: 10px 0; padding: 0 3%; box-sizing: border-box; font-weight: 700; color: #6b401b; text-align: right;}
	.articleTitle {width: 100%; height: 60px; line-height: 60px; font-size: 22px; box-sizing: border-box;}
	.articleText {width: 100%; height: auto; line-height: 24px; font-size: 16px; margin: 0 0 40px; padding: 20px 0; box-sizing: border-box;}
	
	/* map */
	.gmap {width: 100%;}
	
	/* botton補助 */
	.u2arrow a.btn,.btn-box a.btn {pointer-events: auto !important;  /* クリックを強制許可 */ position: relative !important; z-index: 10 !important;/* 上に持ってくる */}
	.item_box,.beside_ul,.u2arrow {pointer-events: auto !important; position: relative; z-index: 5;}
	/* 動画が覆ってる可能性対策 */
	#videoSpc {pointer-events: none !important;  /* 動画自体はクリック不要 */}
	#videoSpc * {pointer-events: auto !important;  /* 中のテキストはクリックOK */}
	
}

/*SP:body-------------------------------------*/
@media screen and (max-width: 767px){
	.pc {display: none !important;}
	.tb {display: none !important;}
	.sp {display: block !important;}
	
	/* TOP-PAGE */
	section {float: left; margin: 0 0 30px; padding: 0 0 30px;}
	section h2 {width: 100%; height: 20px; line-height: 20px; font-size: 14px; margin: 16px 0; padding: 0 12px 0 0; text-align: right; box-sizing: border-box; float: left; font-family: 'Noto Serif JP', serif; color: #6b401b;}
	
	#videoSpc {width: 100%; height: 74vh; margin: 0; overflow: hidden; box-sizing: border-box; position: relative; float: left; box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.2);}
	#videoSpc video {width: 100%; height: 100vh; object-fit: cover;}
	
	#videoSpc ul {width: 100%; height: 100vh; position: absolute; top: 0; bottom: 0; left: 0; margin: auto 0; padding: 90px 0 0; text-align: center; overflow: hidden; color: #F8F4E8; 
			display: flex; /* Flexboxを有効化 */
  			flex-direction: column; /* 子要素を縦に並べる */
  			justify-content: center; /* 縦方向の中央に配置 */
	}
	#videoTitle {width: 90%; height: 30px; line-height: 30px; margin: 0; padding: 0 5%; font-size: 16px;}
	#videoOutset {width: 90%; height: auto; margin: 0; padding: 30px 5%; font-size: 18px}
	#videoText {width: 100%; height: auto; margin: 0; padding: 30px 0; font-size: 16px; font-family: 'Noto Serif JP', serif; }
	
	/* box*/
	.item_box {width: 100%; height: auto; padding: 8px 0 0; background: #F8F4E8; box-sizing: border-box;}
	.news_box {width: 100%; height: auto; padding: 8px 0 0; background-image: url("../img/parallax/back_img.webp"); box-sizing: border-box;}
	.slider_box {width: 100%; height: auto; padding: 8px 0 0; background: #FFFFFF; box-sizing: border-box;}
	
	/* ul */
	.vertical_ul {width: 96%; margin: 0 2%; padding: 0; box-sizing: border-box; float: left;}
	.vertical_ul li {width: 100%; height: auto; list-style: none;}
	.verticalTitle {height: 24px; line-height: 24px; margin: 0 0 14px; text-align: center; font-size: 20px; box-sizing: border-box; font-family: 'Noto Serif JP', serif; font-weight: 700; color: #6b401b;}
	
	/* news */
	.verticaArticle {width: 98%; height: auto; margin: 0; padding: 0 1%; box-sizing: border-box; background: rgba(255,255,255,0.3);}
  	
	/* ul-slider */
	.slider_ul {width: 100%; margin: 0; padding: 0 0 90px; box-sizing: border-box; float: left; border-top: solid 1px #BB8B00;}
	.slider_ul li {width: 100%; height: auto; list-style: none;}
	.slider_ul li p {width: 100%; height: 20px; line-height: 20px; margin: 8px 0; text-align: center; font-size: 14px; box-sizing: border-box; font-family: 'Noto Serif JP', serif; font-weight: 700; color: #6b401b; overflow: hidden;}
	.sliderTitle {height: 24px; line-height: 24px; margin: 8px 0 18px; text-align: center; font-size: 20px; box-sizing: border-box; font-family: 'Noto Serif JP', serif;font-weight: 700; color: #6b401b;}
	.sliderArrow {width: 100%; height: 60px; margin: 120px 0 50px; box-sizing: border-box; position: relative;}
	.videoSpc {width: 100%; height: auto; margin: 0; padding: 0 0 50px; overflow: hidden; box-sizing: border-box; text-align: center; float: left; border-bottom: solid 1px #BB8B00;}
	.videoSpc video {width: 100%; max-width: 1200px; height: auto;}
	
	/* ul-content:slider */
	.slider {width: 100%; height: auto; margin: 0 auto; padding: 0; box-sizing: border-box;}
	.slider li {　border: solid 1px #0074F0;}
	.slider-img {margin: 0 5px;}
	.slider-img img {height: auto; width: 100%; object-fit: cover; aspect-ratio: 16 / 9;}
	
	/* ul */
	/* SPセクション内の指定を上書き */
	.beside_ul {
    	display: block; /* 横並び（flex）を解除して縦並びにする */
    	width: 96%;
    	margin: 30px 2%;
    	padding: 0;
    	overflow: hidden; /* 子要素のはみ出しをカット */
	}
	.beside_ul li {
    	width: 100%;
    	display: block; /* liも縦並びにする */
    	margin-bottom: 20px;
	}
	.beside_ul li img {
    	display: block;   /* インライン要素の隙間を消す */
    	width: 100%;      /* 親の幅いっぱいに広げる */
    	max-width: 100%;  /* 絶対にはみ出さないようにガード */
    	height: auto;     /* 高さは比率に任せる */
    	aspect-ratio: 16 / 9;
    	object-fit: cover;
    	object-position: center;
    	margin: 0 auto;
	}
	
	/* ul-content */
	.u2 {width: 80%; height: auto; margin: auto 10%; padding: 0; box-sizing: border-box; font-family: 'Noto Serif JP', serif; font-weight: 700; color: #6b401b;}
	.u2title {width: 100%; height: auto; line-height: 26px; font-size: 20px; text-align: left; box-sizing: border-box;}
	.u2text {width: 100%; height: auto; line-height: 24px; font-size: 14px; margin: 0 0 20px; padding: 10px 0; text-align: left; box-sizing: border-box;}
	.u2text span {width: 100%; display: block;}
	.u2text2 {width: 100%; height: auto; line-height: 24px; font-size: 16px; margin: 0 0 20px; padding: 10px 0; box-sizing: border-box;}
	.u2text2 span {width: 100%; display: block;}
	.u2arrow {width: 100%; height: 60px;  box-sizing: border-box; position: relative;}
	
	/* ul-content:news */
	article {width: 100%; height: auto; margin: 8px 0 30px; padding: 0; float: left;}
	article ul {width: 100%; height: auto; margin: 0; padding: 16px 12px; box-sizing: border-box; background: #FFFFFF; border-radius: 6px; box-shadow: 0 12px 16px rgba(0,0,0,0.08);}
	.articleDay {width: 100%; height: 20px; line-height: 20px; font-size: 12px; margin: 5px 0; padding: 0 3%; box-sizing: border-box; font-weight: 700; color: #6b401b; text-align: right;}
	.articleTitle {width: 100%; height: 30px; line-height: 30px; font-size: 20px; box-sizing: border-box;}
	.articleText {width: 100%; height: auto; line-height: 24px; font-size: 16px; margin: 0 0 40px; padding: 20px 0; box-sizing: border-box;}
	.article_img {width: 98%;}
	
	/* botton補助 */
	.u2arrow a.btn,.btn-box a.btn {pointer-events: auto !important;  /* クリックを強制許可 */ position: relative !important; z-index: 10 !important;/* 上に持ってくる */}
	.item_box,.beside_ul,.u2arrow {pointer-events: auto !important; position: relative; z-index: 5;}
	/* 動画が覆ってる可能性対策 */
	#videoSpc {pointer-events: none !important;  /* 動画自体はクリック不要 */}
	#videoSpc * {pointer-events: auto !important;  /* 中のテキストはクリックOK */}
	
}