@charset "UTF-8";




section.secA {
	width: 100%;
	/* height: 100vh ; */
	/* aspect-ratio: 5/3; */
	position: relative;
	background: url(../top_img/mv_back_pc.webp) no-repeat,var(--color-sub4);
	background-size: contain;
	padding: 100px 0 0;


	/* &:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		background: var(--color-sub1);

	} */
	& .container {
		width: 100%;
		height: 100%;

		/* padding: 20px; */
		margin: 0 auto;
		/* position: relative; */
		& h1 {
			position: relative;
			inset: 50px 0 0 0;
			width: 90%;
			max-width: 454px;
			aspect-ratio: 455/118;
			margin: auto;
			z-index: 5;
			& img {

				width: 100%;
			}
		}

		& .mvimg {

			margin: 0 0 20px auto;
			width: 95%;
			/* height: 70vw; */
			max-height: 600px;
			text-align: right ;
			/* overflow: hidden; */
			z-index: 1;

			&  img.mv_img {	
				/* position: absolute;
				right: -10vw; */
				/* height: 100%; */
				width: 100%;
				display: block;

	
			}
		}



		& .daytimetable {
			position: relative;
			margin: auto;
			width: 90%;
			/* height: 200px; */

			border-radius: var(--br-s);
			color: var(--color-accent1);
			overflow: hidden;
			z-index: 5;
			display: grid;
			grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr ;

			& .thead {
				background: var(--color-sub3);
				padding: 1em 0;
			}

			& .ttit {
				background: var(--color-sub3);
				/* line-height: 1em; */
				padding: 1em 0;
			}

			& .tdatl {
				background: var(--color-base);
				padding:  1em 0;
			}

			& .tdat {
				background: var(--color-base);
				padding: 1em 0;
			}
			& div:nth-of-type(8n) {
				padding-right: .5em;
			}
			& div:nth-of-type(8n + 1) {
				padding-left: .5em;
			}
			& div:nth-of-type(n + 17) {
				background-image: radial-gradient(circle, var(--color-sub1) 1px, transparent 1px);
				background-position: left top;
				background-repeat: repeat-x;
				background-size: 6px 2px;
			}
		}

	}
 }




 section.top_info {
	background: var(--color-sub1);
	& .inner {
		background: var(--color-base);
		width: 80%;
		max-width: 1000px;
		margin: 0 auto;
		padding: 40px 5% 40px;
		border-radius: var(--br-s);
		/* display: flex;
		justify-content: space-between;
		align-items: center; */

	  & h2 {
		flex: 1 400px;
		text-align: left;
		margin-bottom: 0;
		padding-bottom: 20px;

		& .subtitle {
			font-size: var(--font-sizeL);
			font-family: var(--font-en);
			color: var(--color-accent1);
			height: 1em;
			margin-bottom: 20px;
		}
	  }
  
	  & .right {
		flex: 3 600px;
		text-align: right;

		& ul {
			& li {

				width: 100%;
				padding: 20px 0;
				text-align: left;
				background-image: radial-gradient(circle, var(--color-sub1) 1px, transparent 1px);
				background-position: left bottom;
				background-repeat: repeat-x;
				background-size: 6px 2px;
				& a {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					gap: .5em;
					color: var(--color-main);


					& .day {
						/* flex:  0 80px; */
						font-weight: bold;
						font-family: var(--font-en);
					}
		
					& .tag {
						/* flex:  0 80px; */
						color: var(--color-base);
						background: var(--color-accent2);
						border-radius: 1em;
						text-align: center;
						padding: 0 2em;
						font-size: var(--font-sizeS);
					}
		
					& .title {
						flex: 2 100%;
						font-size: var(--font-sizeL);
					}
				}
				& a ,
				& a:link ,
				& a:visited {

					transition: .3s;
					text-decoration: none;
				}

				& a:hover ,
				& a:active ,
				& a:focus {
					color: var(--color-accent1);
				}
		  }
	
  	  }
		& a.more ,
		& a.more:link ,
		& a.more:visited {
			display: inline-block;
			margin: 30px 0 0;
			padding:  0 .5em .2em;
			border-bottom: 1px solid var(--color-accent1);
			color: var(--color-accent1);
			text-decoration: none;
			transition: .3s;

			&:after {
				content: "";
				display: inline-block;
				width: 1em;
				height: 1em;
				margin-left: .5em;
				margin-right: 0em;
				background: url(../common_img/link_arrow.webp) no-repeat;
				transition: .3s;
			}
		}
		& a.more:hover ,
		& a.more:active ,
		& a.more:focus {

			&:after {
				margin-left: 1em;
				margin-right: -0.5em;

			}
		}
	}

	}
  }
  
  section.secB {
	margin-top: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	background: url(../top_img/secB_img.webp) no-repeat;
	background-size: 85% ;
	background-position: bottom 10vw right;
	padding-bottom: 60vw;




	& .left {
		flex: 1 ;
		padding: 0px 10%;
		& h2 {
			text-align: left;
			margin-bottom: 20px;

			& .subtitle {
				font-family: var(--font-en);
				color: var(--color-accent1);
				font-size: var(--font-sizeL);
				line-height: 1.5em;
				margin-bottom: 20px;
				
				& br {
  
		  }
		}
	  }
  
	  & .comment {
		width: 100%;
		text-align: left;
		line-height: 2em;
		& p {
			margin-bottom: 1em;
  
		}
	  }
	}
	& .right {
		flex: 1;


	}
  }
  
  section.secC {

	.inner {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 5%;
		flex-wrap: wrap;
		width: 80%;
		max-width: 1200px;
		margin: 0 auto;

			& h2 {
				flex: 100%;
				text-align: left;
				align-self: center;

				& .subtitle {
					color: var(--color-accent1);
					font-size: var(--font-sizeL);
				}
			}
		
			& .item {
				width:  30%;
				margin-bottom: 10vw;
				
					& .img {
						background: var(--color-base);
						border-radius: var(--br-m);
						padding: 25%;
						margin-bottom: 20px;
						& img {
							width: 100%;
			
						}

					}
			
					& h3.mtit {
						font-size: var(--font-sizeM);
						font-family: var(--font-titg);
						line-height: 1.5em;
						& p {
				
						}
					}
			}
	}
}
  
  section.secD {
	width: 80%;
	padding: 40px 0;
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	& .img {
		flex: 1;
		margin-bottom: 20px;
		& img {
			width: 100%;

		}
	}

	& .inner {
		flex: 1;
		text-align: left;
		/* padding-left: 50px; */

		& h2 {
			margin-bottom: 20px;

			& .tag {
				font-size: var(--font-sizeL);
				color: var(--color-accent1);
				line-height: 1.5em;
				margin-bottom: 10px;
			}
	
			& .yomi {
				color: var(--color-accent3);
				font-size: var(--font-sizeM);
				line-height: 1.5em;
				margin-bottom: 0;
	
			}
	
			& .name {
				line-height: 1.5em;
				margin-bottom: 0;
	
			}
		}
	
		& .comment {

			& p {
	
			}
		}
	}
  }