@charset "utf-8";

/* ===================================================================
CSS information
 file name  :  index.css
 style info :  /columns/index
=================================================================== */
:root {
	--button-color: #C0AE89;
	--h-color: #727272;
}

#columns_index{
	font-family: 'Jost', "Times New Roman", Times, "Noto Sans JP", sans-serif;
}

/*** top_area ***/
#top_area{
	max-width: 1500px;
	margin: 0 auto;
	
	.top_slide_box{
		position: relative;
		
		p.lang{
			position: absolute;
			top: 30px;
			right: 30px;
			font-size: 18px;
			z-index: 2;
			
			a{
				background-color: rgba(0,0,0,0.5);
				color: #FFF;
				padding: 5px 10px;
				border-radius: 5px;
			}
			
			@media (max-width: 768px) {
				top: 10px;
				right: 5px;
			}
		}
		
		h1{
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			position: absolute;
			top: 100px;
			left: 10%;
			z-index: 2;
			font-size: 80px;
			font-weight: 400;
			line-height: 0.8;
			color: #FFFFFF;
			
			span{
				font-size: 40px;
			}
			
			@media (max-width: 768px) {
				top: 5%;
				left: 5%;
				font-size: 48px;
				
				span{
					font-size: 28px;
				}
			}
		}
		
		
	}
	
	#top_slide{
		display: none;

		li.rec_list{
			position: relative;
			overflow: hidden;
			
			.info_box{
				position: absolute;
				bottom: 70px;
				left: 10%;
				z-index: 2;
				width: 555px;
				
				@media (max-width: 768px) {
					left: 0;
					bottom: 10px;
					padding: 0 5%;
					width: 90%;
				}
				
				h2{
					font-size: 22px;
					font-weight: bold;
					color: #FFF;
					line-height: 1.5;
					margin: 0 0 10px;
					max-height: 145px;
					
					@media (max-width: 768px) {
						font-size: 20px;
						
					}
				}
				
				.cat_date_box{
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					
					p.cat{
						width: 80%;
						font-size: 16px;
						color: #FFFFFF;
						
						.start_date::before {
							content: "｜";
							margin-right: 4px;
						}
					}
					
					p.read{
						
						@media (max-width: 768px) {
							display: none;
						}
						
						a{
							position: relative;
							display: inline-block;
							font-size: 24px;
							color: var(--button-color);
							text-decoration: none;
							padding-bottom: 8px;
							padding-right: 25px;

							/* 横線 */
							&::before{
								content: "";
								position: absolute;
								left: 0;
								bottom: 0;
								width: 100%;
								height: 2px;
								background: var(--button-color);
							}

							/* 右の斜めライン */
							&::after{
								content: "";
								position: absolute;
								right: 0px;
								bottom: 0px;
								width: 15px;
								height: 2px;
								background: var(--button-color);
								transform: rotate(45deg);
								transform-origin: right bottom;
							}
						}
					}
				}
			}

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

			&::after{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;

				background: linear-gradient(
					to right,
					rgba(29,57,80,0.8) 0%,
					rgba(0,0,0,0) 80%
				);

				pointer-events: none;
				
				@media (max-width: 768px) {
					background: linear-gradient(
						to bottom,
						rgba(29,57,80,0.8) 0%,
						rgba(29,57,80,0.4) 30%,
						rgba(0,0,0,0) 50%,
						rgba(29,57,80,0.4) 70%,
						rgba(29,57,80,0.8) 100%
					);					
				}
			}
		}
		
		.slick-dots{			
			bottom: 15px;
			left: 10%;
			width: 555px;
			text-align: left;
			
			
			@media (max-width: 768px) {
				bottom: -25px;
				left: 50%;
				width: 90%;
				transform: translateX(-50%);
				text-align: center;
			}
		}
		
		.slick-dots li{
			width: 95px;
			height: 4px;
			
			@media (max-width: 768px) {
				width: 60px;
			}
		}
		
		.slick-dots li button::before{
			width: 95px;
			height: 4px;

			content: "";
			border: solid 1px var(--button-color);
			background-color: var(--button-color);
			
			@media (max-width: 768px) {
				width: 60px;
			}
			
		}
	}
	
	#top_slide.slick-initialized{
		display: block;
	}	
}


/*** wrap_columns ***/
#wrap_columns{
	width: 1000px;
	margin: 80px auto 0;
	display: flex;
	justify-content: space-between;
	
	@media (max-width: 768px) {
		width: 100%;
		margin: 40px auto;
		display: block;
	}
	
	aside{
		width: 200px;
		
		@media (max-width: 768px) {
			width: 100%;
			padding: 0 20px;
			box-sizing: border-box;			
			display: flex;
			justify-content: space-between;
			gap: 2rem;
			box-sizing: border-box;
		}
		
		.side_cat_box{
			margin: 0 0 60px;
			
			@media (max-width: 768px) {
				width: 50%;
				margin: 0 0 30px;
			}
			
			.side_cat_list{
				display: none;

				@media (max-width: 768px) {
					display: block;
					width: 100%;
					font-size: 14px;
					color: var(--h-color);
					padding: 5px;
					border: solid 1px var(--button-color);
					height: 40px;
				}
			}
		}
		
		h3{
			font-size: 40px;
			color: var(--h-color);
			margin: 0 0 30px;
			
			
			@media (max-width: 768px) {
				font-size: 25px;
				font-weight: normal;
				text-align: center;
				margin: 0 0 10px;
			}
		}
		
		ul{
			
			@media (max-width: 768px) {
				display: none;
			}
			
			li{
				font-size: 18px;
				font-weight: bold;
				margin: 0 0 20px;
				text-indent: -20px;
		        padding: 0 0 0 20px;
				
				a{
					position: relative;
					padding-left: 20px;
					color: var(--h-color);

					&::before{
						content: "";
						position: absolute;
						left: 0;
						top: 50%;
						width: 10px;
						height: 3px;
						background: var(--button-color);
						transform: translateY(-50%);
					}
				}
			}
		}
				
		.side_year_box{
			
			@media (max-width: 768px) {
				width: 50%;
			}
			
			.side_year_list{
				width: 100%;
				font-size: 16px;
				color: var(--h-color);
				padding: 5px;
				border: solid 1px var(--button-color);
				
				@media (max-width: 768px) {
					font-size: 14px;
					padding: 5px;
					height: 40px;
				}
			}
		}
	}
	
	main{
		width: 750px;
		
		@media (max-width: 768px) {
			width: 100%;
			padding: 0 20px;
			box-sizing: border-box;
		}
		
		#list_area{
			position: relative;
			
			p.lang{
				position: absolute;
				top: 0;
				right: 0;
				font-size: 18px;
				z-index: 2;

				a{
					background-color: rgba(0,0,0,0.5);
					color: #FFF;
					padding: 5px 10px;
					border-radius: 5px;
				}
				
				@media (max-width: 768px) {
					top: 10px;
				}
			}
			
			h2{
				font-size: 40px;
				color: var(--h-color);
				margin: 0 0 50px;
				
				@media (max-width: 768px) {
					font-size: 30px;
					margin: 0 0 30px;
				}
			}
			
			.list_box ul{
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				gap: 50px 35px;
				
				@media (max-width: 768px) {
					justify-content: space-between;
					gap: 20px 0;
				}
				
				li.article-item{
					width: 30%;
					display: none;
					
					@media (max-width: 768px) {
						width: 48%;
					}
					
					a.transp65{
						opacity: inherit;
					}
					
					.img_box{
						/*height: 360px;*/
						margin: 0 0 10px;
						overflow: hidden;
						
						@media (max-width: 768px) {
							height: auto;
							margin: 0 0 10px;
						}
						
						img{
							width: 100%;
							height: auto;
							transition: transform .6s ease;
						}						
					}
					
					.img_box:hover img{
						transform: scale(1.2);
					}
					
					h3{
						font-size: 18px;
						font-weight: bold;
						color: var(--h-color);
						
						
						@media (max-width: 768px) {
							font-size: 14px;
							margin: 0 0 5px;
						}
					}
					
					p.cat{
						font-size: 12px;
						color: var(--h-color);
						
						@media (max-width: 768px) {
							font-size: 10px;
						}
						
						.start_date::before {
							content: "｜";
							margin-right: 4px;
							
							@media (max-width: 768px) {
								display: block;
								content: "";
								margin-right: 0px;
							}
						}
					}
				}
			}
			
			
			
		}
	}
	
	main.columns_detail{
		#detail_top_area{
			position: relative;
			
			p.lang{
				position: absolute;
				bottom: 0;
				right: 0;
				font-size: 18px;
				z-index: 2;

				a{
					background-color: rgba(0,0,0,0.5);
					color: #FFF;
					padding: 5px 10px;
					border-radius: 5px;
				}
			}
			
			h1{
				font-size: 60px;
				font-weight: 400;
				line-height: 0.8;
				color: var(--h-color);
				margin: 0 0 80px;
				
				span{
					font-size: 30px;
				}
				
				@media (max-width: 768px) {
					font-size: 48px;
					margin: 0;
					padding: 0 0 40px 0;
					
					span{
						font-size: 28px;
					}
				}
			}
		}
		
		#content_area{
			p.cat{
				width: 80%;
				font-size: 16px;
				color: var(--h-color);
				margin: 0 0 10px;
				
				@media (max-width: 768px) {
					font-size: 12px;
				}

				.start_date::before {
					content: "｜";
					margin-right: 4px;
				}
			}
			
			.main_img{
				margin: 0 0 20px;
				
				img{
					width: 100%;
					height: auto;
				}
				
				p.author{
					font-size: 16px;
					color: var(--h-color);
					text-align: right;
					margin: 10px 0;
					
					@media (max-width: 768px) {
						font-size: 12px;
						text-align: left;
						margin: 10px 0 20px;
					}
				}
				
				p.description{
					font-size: 18px;
					line-height: 1.8;
					margin: 10px 0;
					
					@media (max-width: 768px) {
						font-size: 15px;
					}
				}				
			}
			
			h1{
				font-size: 34px;
				color: var(--h-color);
				margin: 5px 0 5px;
				line-height: 1.5;

				@media (max-width: 768px) {
					font-size: 24px;
				}
				
			}
			
			.content_box{
				img{
					width: 100% !important;
					height: auto !important;
				}
				
				div{
					
				}
				
				h1,h2,h3,h4,h5,h6{
					color: var(--button-color);
					margin-top: 2rem;
					margin-bottom: 1rem;
					line-height: 1.4;
					font-weight: 500;
				}
				
				h1 { font-size: clamp(1.8rem, 4vw, 2.2rem); }
				h2 { font-size: clamp(1.6rem, 3.5vw, 2rem); }
				h3 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
				h4 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
				h5 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
				h6 { font-size: clamp(1rem, 1.8vw, 1.2rem); }
				
				img{
					width: 100%;
					height: auto;
				}
				
				iframe {
					width: 100%;
					aspect-ratio: 16 / 9;
					height: auto;
					display: block;
				}				
				
				
				p{
					font-size: 18px;
					line-height: 1.8;
					margin: 10px 0 10px;
					
					@media (max-width: 768px) {
						font-size: 15px;
					}
					
					a{
						text-decoration: underline;
						color: #003BFF;
					}
				}
				
				p.clear{
					font-size: 0;
					height: 0;
				}
				
				.caption{
					padding: 20px 0;
					
					p{
						font-size: 16px;
						color: var(--h-color);
						margin: 0;
						text-align: center;
						
						@media (max-width: 768px) {
							font-size: 12px;
							text-align: left;
						}
					}
				}
				
				.img_l,
				.img_r{
					padding: 20px 0;
					display: flex;
					gap: 2rem;
					align-items: flex-start;
				}
				
				

				.img_r{
					flex-direction: row-reverse;
				}

				/* 直下の要素は全部50% */
				.img_l > *,
				.img_r > *{
					flex: 1;
					min-width: 0;
					margin: 0;
				}
				
				/* SP時だけ縦 */
				@media (max-width: 768px){
					.img_l.spVertical,
					.img_r.spVertical{
						flex-direction: column;
					}

					.img_l.spVertical > *,
					.img_r.spVertical > *{
						flex: 0 0 auto;
					}
				}
				
				/* 画像共通 */
				.img_l img,
				.img_r img{
					width: 100% !important;
					height: auto !important;
					display: block;
				}
				
				.img-row{
					display: flex;

					gap: 2rem;
					flex-wrap: wrap;
				}
				
				.img-row > *{
					flex: 1;
					min-width: 0;
				}
				
				@media (max-width: 768px){
					.img-row.spVertical{
						flex-direction: column;
					}

					.img-row.spVertical > *{
						flex: 0 0 auto;
					}
				}
				
				.img-row img{
					width: 100% !important;
					height: auto !important;
					display: block;
				}
				
				ul{
					padding: 0 0 10px 20px;
					
					li{
						font-size: 18px;
						line-height: 1.8;
						margin: 0 0 10px;
						list-style: outside disc;
						
						&::marker{
							color: var(--button-color);
						}
						
						@media (max-width: 768px){
							font-size: 15px;
						}
					}
				}
				
				ol{
					padding: 0 0 10px 20px;
					li{
						font-size: 18px;
						line-height: 1.8;
						margin: 0 0 10px;
						list-style: outside decimal;
						
						&::marker{
							color: var(--button-color);
						}
						
						@media (max-width: 768px){
							font-size: 15px;
						}
					}
				}
				
				table{
					width: 100%;
					margin: 0 0 20px;
					font-size: 18px;
					border: none;
					
					@media (max-width: 768px){
						font-size: 15px;
					}
					
					th{
						min-width: 30%;
						border: none;
						border-bottom: solid 2px var(--button-color);
						padding: 20px 20px 20px 5px;
						font-weight: normal;
						text-align: left;
						vertical-align: top;
					}
					
					td{
						border: none;
						border-bottom: solid 1px var(--button-color);
						padding: 20px 20px 20px 5px;
					}
				}
				
				@media (max-width: 768px){
					table.spVertical,
					table.spVertical tbody,
					table.spVertical tr,
					table.spVertical th,
					table.spVertical td{
						display: block;
						width: 100%;
						box-sizing: border-box;
					}

					table.spVertical tr{
						margin-bottom: 15px;
					}

					table.spVertical th{
						border-bottom: none;
						padding-bottom: 5px;
						font-weight: bold;
					}

					table.spVertical td{
						border-bottom: solid 1px var(--button-color);
						padding-top: 0;
					}
				}
				
				a.button{
					display: inline-block;
					background-color: var(--button-color);
					background-image: url("../../img/columns/icon_columns_button.png");
					background-repeat: no-repeat;
					background-position: 96% center;
					border-radius: 5px;
					color: #FFFFFF;
					text-align: center;
					padding: 10px 60px;
					font-size: 14px;
					font-weight: bold;
					
					&:hover{
						opacity: 0.6;
					}
				}
				
				.shop{
					padding: 30px;
					margin: 20px 0 40px;
					display: flex;
					column-gap: 30px;
					background-color: #E6E3DB;
					
					@media (max-width: 768px){
						padding: 20px;
						flex-direction: column;
					}
					
					.map{
						width: 600px;
						padding: 0;
				
						iframe {
							width: 100%;
							aspect-ratio: 16 / 9;
							height: auto;
							display: block;
						}
						
						@media (max-width: 768px){
							width: 100%;
							padding: 0 0 20px;
						}
					}
					
					.info{
						width: 310px;
						padding: 0;
						
						@media (max-width: 768px){
							width: 100%;
						}
						
						h3{
							font-size: clamp(1.1rem, 2.5vw, 1.25rem);
							font-weight: bold;
							margin: 0;
						}
						
						p{
							font-size: 12px;
							line-height: 2.2;
						}
						
						.link{
							text-align: center;
						}
						
						
					}
				}
				
				.profile{
					padding: 30px;
					margin: 20px 0 40px;
					display: flex;
					column-gap: 30px;
					background-color: #E6E3DB;
					
					@media (max-width: 768px){
						padding: 20px;
					}
					
					.img{
						padding: 0;
						width: 20%;
				
						img {
							width: 100%;
							height: auto;
						}
						
						@media (max-width: 768px){
							width: 100%;
						}
						
					}
					
					.info{
						width: 100%;
						padding: 0;
						
						h3{
							font-size: clamp(1.1rem, 2.5vw, 1.25rem);
							font-weight: bold;
							margin: 0;
						}
						
						p{
							font-size: 14px;
							line-height: 1.8;
						}
						
					}
				}
				
				.link_card_external{
					transition: transform 0.25s ease, box-shadow 0.25s ease;
					padding: 30px;
					margin: 0 0 40px;
					display: flex;
					column-gap: 30px;
					background-color: #E6E3DB;
					position: relative;

					@media (max-width: 768px){
						padding: 20px;
						flex-direction: column;
					}
					
					&:hover{
						opacity: 0.8;
						transform: translateY(-6px);
						box-shadow: 0 6px 12px rgba(0,0,0,0.12);
						text-decoration: none;
					}
					
					&::after{
						content: "";
						position: absolute;
						right: 0;
						top: 0;
						display: block;
						width: 30px;
						height: 30px;
						background-image: url("../../img/columns/icon_columns_button.png");
						background-position: center center;
						background-color: var(--button-color);
						background-repeat: no-repeat;
					}
					
					.img{
						padding: 0;
						width: 400px;

						@media (max-width: 768px){
							width: 100%;
							padding: 0 0 20px;
						}
				
						img {
							width: 100%;
							height: auto;
						}						
					}
					
					.info{
						width: 100%;
						padding: 0;
						
						h3{
							font-size: clamp(1.1rem, 2.5vw, 1.25rem);
							font-weight: bold;
							margin: 0;
							
							a{
								text-decoration: none;
								color: #444444;
							}
						}
						
						p{
							font-size: 14px;
							line-height: 1.8;
							
							a{
								text-decoration: none;
								color: #444444;
						}
						
							@media (max-width: 768px){
								font-size: 12px;
							}

						}
					}
				}
				
				.link_card{
					display: block;
					transition: transform 0.25s ease, box-shadow 0.25s ease;
					
					@media (max-width: 768px){
						color: #444444;
					}
					
					&:hover{
						opacity: 0.8;
						transform: translateY(-6px);
						box-shadow: 0 6px 12px rgba(0,0,0,0.12);
						text-decoration: none;
					}
					
					.link_card_box{
						padding: 30px;
						margin: 0 0 40px;
						display: flex;
						column-gap: 30px;
						background-color: #E6E3DB;
						position: relative;
						
						@media (max-width: 768px){
							padding: 20px;
							flex-direction: column;
						}
						
						span{
							position: absolute;
							right: 0;
							top: 0;
							display: block;
							width: 30px;
							height: 30px;
							background-image: url("../../img/columns/icon_columns_button.png");
							background-position: center center;
							background-color: var(--button-color);
							background-repeat: no-repeat;
						}
						
						.img{
							padding: 0;
							width: 400px;
							
							@media (max-width: 768px){
								width: 100%;
								padding: 0 0 20px;
							}

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

						.info{
							width: 100%;
							padding: 0;

							h3{
								font-size: clamp(1.1rem, 2.5vw, 1.25rem);
								font-weight: bold;
								margin: 0;
							}

							p{
								font-size: 14px;
								line-height: 1.8;
								
								@media (max-width: 768px){
									font-size: 12px;
								}
								
							}
						}
					}
				}
			}
		}
	}
		
	.sns_area{
		margin: 0 0 60px;
		ul {
			width: 100%;
			display: flex;
			justify-content: center;
			column-gap: 20px;
		}
	}

	.page {
		ul {
			width: 100%;
			display: flex;
			padding: 0;
			list-style: none;

			li {
				font-size: 18px;
				font-weight: bold;

				a {
					color: var(--button-color);
					text-decoration: none;
					display: inline-flex;
					align-items: center;
					position: relative;
				}
			}

			li.next {
				margin-left: auto;
			}

			/* ← 前 */
			li.back a::before {
				content: "";
				width: 8px;
				height: 8px;
				border-left: 2px solid var(--button-color);
				border-bottom: 2px solid var(--button-color);
				transform: rotate(45deg);
				margin-right: 8px;
			}

			/* → 次 */
			li.next a::after {
				content: "";
				width: 8px;
				height: 8px;
				border-right: 2px solid var(--button-color);
				border-top: 2px solid var(--button-color);
				transform: rotate(45deg);
				margin-left: 8px;
			}

			li.back a:hover::before {
				transform: translateX(-2px) rotate(45deg);
			}

			li.next a:hover::after {
				transform: translateX(2px) rotate(45deg);
			}

			li.back a::before,
			li.next a::after {
				transition: transform 0.2s ease;
			}				
		}
	}

}

#breadcrumb_area{
	@media (max-width: 768px) {
		display: none;
	}
}