@charset "utf-8";

body {
	--letter-spacing: 0.075em;
}

section.new {
	text-align: center;
}

section video {
	width: 100%;
}

.cover .frame {
	z-index: 10;
}

.cover {
	position: relative;
}

.cover::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.2;
	z-index: 1;
}

.cover_title,
.cover_subtitle {
	font-family: YakuHan-R, Helvetica-M, YuGo-B;
	position: relative;
}

body.en .cover_title,
body.en .cover_subtitle {
	letter-spacing: 0.05em;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 50px;
}


.department-detail {
	figure.flow {
		width: 100%;
	}
	
	figure.flow img {
		width: 100%;
		max-width: inherit!important;
		max-height: inherit!important;
	}
	
	.theme {
		
		figure {
			margin-left: -150px !important;
			width: calc(35% + 150px) !important;/*
			height: 450px!important;;
			border-radius: var(--border-radius)!important;;
			overflow: hidden!important;;*/
		}
		
		h3 {
			margin-top: 50px !important;
		}
	}
	
	/*
	p:not([class]) {
		line-height: 1.75em;
		letter-spacing: 0.1em;
	}*/
}

body:has(#theme) {
    .header {
        box-shadow: none-;
    }
    
    .cover {
        display: none;
    }
    
    .department-detail {
        padding: 0 !important;
    }
}





.j-center {
	justify-content: center;
}

/*------------------------------------------------------------------------------------------------ ▼ .cover_subtitle --*/

@media all {
	.cover_subtitle {
		color: #fff;
		text-align: center;
	}

	.dep_cover_title {
		font-size: 28px;
		letter-spacing: 0.3em;
	}

	.dep_cover_title::after {
		content: '';
		display: block;
		margin: 10px auto 12px;
		width: 480px;
		height: 0px;
		border-bottom: 1px dotted #FFF;
	}

	.dep_cover_subtitle {
		font-size: 20px;
		letter-spacing: 0.1em;
	}


	@media (width <=768px) {
		.dep_cover_title {
			font-size: 20px;
		}

		.dep_cover_subtitle {
			font-size: 14px;
		}
	}
}
	
/*------------------------------------------------------------------------------------------------ ▼ dl.portrait --*/

@media all {
	dl.portrait {
		margin-top: 50px;
	}

	dl.portrait dt,
	dl.portrait dt h3 {
		font-family: YuGo-B;
	}

	.en dl.portrait dt,
	.en dl.portrait dt h3 {
		font-family: HelveticaCond-B;
		letter-spacing: 0.025em;
	}

	dl.portrait dt {
		margin: 30px 0 10px;
		padding-left: 15px;
		border-left: 5px solid var(--blue);
	}

	dl.portrait dd {
		padding-left: 18px;
	}
}

/*------------------------------------------------------------------------------------------------ ▼ ul.image --*/

@media all {
	ul.image {
		display: flex;
		justify-content: center;
		margin-top: 0px;
	}

	ul.image .content {
		aspect-ratio: 4 / 3;
		border: 1px solid #ddd;
		border-radius: var(--border_radius);
		overflow: hidden;
		background-size: cover;
		background-position: center;
	}

	ul.image .title {
		margin-top: 2px;
		text-align: center;
	}

	@media (769px <=width) {
		ul.image li {
			width: calc((100% - 30px) / 3);
		}

		ul.image li:not(:nth-of-type(3n)) {
			margin-right: 15px;
		}

		ul.image li:nth-of-type(n + 4) {
			margin-top: 15px;
		}

		ul.image .title {
			font-size: 14px;
		}
	}

	@media (width <=768px) {
		ul.image li {
			width: calc((100% - 15px) / 2);
		}

		ul.image li:nth-of-type(2n) {
			margin-left: 15px;
		}

		ul.image li:nth-of-type(n + 3) {
			margin-top: 15px;
		}

		ul.image .title {
			font-size: 14px;
		}
	}
}

/*------------------------------------------------------------------------------------------------ ▼ general_title --*/

@media all {
	div.general_title {
		display: block;
		margin: 10px auto 15px;
		padding: 0 50px 5px;
		border-bottom: 0px solid var(--blue);
		color: var(--blue);
		font-family: YuGo-B;
		text-align: center;
	}

	body.en div.general_title {
		font-family: HelveticaCond-B;
		letter-spacing: 0.025em;
	}

	div.title_round {
		display: inline-block;
		margin: 0 auto;
		padding: 0 50px;
		line-height: 75px;
		border: 1px solid #ddd;
		border-radius: 100px;
		background: #fafafa;
	}
}

/*------------------------------------------------------------------------------------------------ ▼ .category_navi --*/

@media all {
	.wrap_category_navi {
		padding: 50px 0 75px;
		border-top: 0px dashed #eee;
		background: linear-gradient(#f7f7f7, #fff 5%, #fff);
	}

	.wrap_category_navi .general_title {
		margin-top: 0;
		color: #666;
	}

	.category_navi {
		display: flex;
		flex-wrap: wrap;
	}

	.category_navi a {
		display: flex;
		position: relative;
		padding: 10px;
		background: linear-gradient(#f6f6f6, #f0f0f0);
		border-radius: var(--border_radius);
		box-shadow: 0 0 3px #fff;
	}

	.category_navi .thumbnail {
		width: 80px;
		aspect-ratio: 1 / 1;
		background-position: center;
		background-size: cover;
		border-radius: var(--border_radius);
	}

	.category_navi .title {
		width: calc(100% - 100px);
		line-height: 80px;
		padding: 0 15px 0 25px;
		text-align: left;
	}

	body.en .category_navi .title {
		font-family: HelveticaCond-B;
		letter-spacing: 0.04em;
		color: #555;
	}

	@media (501px <=width) {
		.category_navi a {
			width: calc((100% - 15px) / 2);
			margin-top: 50px;
		}

		.category_navi a:nth-child(2n) {
			margin-left: 15px;
		}

		.category_navi a:nth-child(n + 3) {
			margin-top: 15px;
		}

	}

	@media (width <=500px) {
		.wrap_category_navi {
			padding: 30px 0 15px;
		}

		.category_navi a {
			width: 100%;
			height: 80px;
		}

		.category_navi a:nth-child(n + 2) {
			margin-top: 15px;
		}

		.category_navi .thumbnail {
			width: 60px;
		}

		.category_navi .title {
			width: 100%;
			line-height: 60px;
		}
	}

	@media (hover: hover) and (pointer: fine) {
		.category_navi a {
			transition: var(--transition);
		}

		.category_navi a:hover {
			box-shadow: 0 0 10px #bbb;
		}
	}
}

section:not(.new) {
	width: 100%;
	position: relative;
}
/*
@media (max-width: 768px) {
	section:not(.new) {
		padding: 0 20px;
	}
}
*/
/*------------------------------------------------------------------------------------------------ ▼ .article --*/

@media all {
	section:not(.new) article {
		display: flex;
		width: 100%;
		padding-bottom: 20px;
	}

	section:not(.new) article figure {
		width: 40%;
	}

	section:not(.new) article figure img {
		width: 100%;
	}

	section:not(.new) article div {
		width: 60%;
		padding-left: 50px;
	}

	section:not(.new) article h3 {
		margin-top: -5px;
		font-size: 30px;
		letter-spacing: 1.25px;
		color: var(--blue);
	}

	section:not(.new) article h3::after {
		content: '';
		display: block;
		width: 70px;
		height: 3px;
		background: var(--blue);
		margin-top: 15px;
		margin-bottom: 30px;
	}

	section:not(.new) article p {
		line-height: ;
	}

	section:not(.new) article a {
		text-decoration: underline;
	}

	@media (max-width: 1280px) {
		section:not(.new) article h3 {
			font-size: 24px;
		}
	}

	@media (max-width: 768px) {
		section:not(.new) article figure {
			width: 30%;
		}

		section:not(.new) article div {
			width: 70%;
			padding-left: 50px;
		}

		section:not(.new) article h3 {
			font-size: 24px;
		}
	}

	@media (max-width: 500px) {
		section:not(.new) article {
			flex-wrap: wrap;
		}

		section:not(.new) article figure,
		section:not(.new) article div {
			width: 100%;
		}

		section:not(.new) article div {
			padding: 50px 0 0 0;
		}


		section:not(.new) article h3 {
			font-size: 20px;
		}
	}
}

/*------------------------------------------------------------------------------------------------ ▼ . --*/

section:not(.new) .design {
	margin: 20px 0;
}

/*------------------------------------------------------------------------------------------------ ▼ table --*/

@media all {
	section:not(.new) table:not([class]) {
		border-collapse: collapse;
		width: 100%;
		margin: 20px 0 30px 0;
	}

	section:not(.new) table:not([class]) tr {
		border: 1px solid #DDD;
		font-size: 0;
	}

	section:not(.new) table:not([class]) tr::after {
		content: '';
		display: block;
		clear: both;
	}

	section:not(.new) table:not([class]) tr * {
		display: block;
		text-align: left;
		font-size: 14px;
		line-height: 20px;
		padding: 10px 2.5%;
	}

	section:not(.new) table:not([class]) tr th {
		width: 35%;
		background-color: #EEE;
		float: left;
	}

	section:not(.new) table:not([class]) tr td {
		width: 55%;
		float: right;
	}

	section:not(.new) table:not([class]) .title * {
		font-weight: 700;
		letter-spacing: 0.3em;
		color: #FFF;
	}

	section:not(.new) table:not([class]) .title th {
		background-color: #444;
	}

	section:not(.new) table:not([class]) .title td {
		background-color: #666;
	}

	@media (max-width: 768px) {
		section:not(.new) table:not([class]) tr * {
			font-size: 12px;
		}
	}
}

/*------------------------------------------------------------------------------------------------ ▼ table --*/

@media all {
	table.detail {
		width: 100%;
		margin-top: 30px;
	}
	
	table.detail th,
	table.detail td {
		padding: 5px;
		border: 1px solid #ccc;
	}
	
	table.detail th {
		background: #f0f0f0;
		text-align: center;
	}
}

/*------------------------------------------------------------------------------------------------ ▼ .table-title --*/

@media {
	.table-title {
		margin: 30px 0 -20px;
		font-weight: bold;
	}
	
	.table-title::before {
		content: '-';
		margin-right: 0.5em;
	}
	
	.table-title::after {
		content: '-';
		margin-left: 0.5em;
	}
}

/*------------------------------------------------------------------------------------------------ ▼ .dl --*/

@media all {
	section:not(.new) dl {
		padding: 30px 0;
		display: inline-block;
		text-align: center;
		vertical-align: top;
		width: 45%;
		margin: 2%;
	}

	section:not(.new) dl dt {
		font-weight: 700;
	}

	section:not(.new) dl dd img {
		margin: 15px 0;
		width: 80%;
		height: auto;
	}

	section:not(.new) dl dd .dep31 {
		width: 100%;
	}

	section:not(.new) dl dd p {
		line-height: 22px;
		text-align: left;
	}

	section:not(.new) dl dd small {
		font-size: 12px;
		line-height: 18px;
		display: inline-block;
	}

	section:not(.new) dl dd small::before {
		content: '\A';
		white-space: pre;
	}

	@media (max-width: 768px) {
		section:not(.new) dl {
			width: 100%;
		}
	}
}

/*------------------------------------------------------------------------------------------------ ▼ ul --*/

@media all {
	ul:not([class]) {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 75px;
	}

	ul:not([class]) figure img {
		width: 100%;
		height: auto;
		border: 1px solid #eee;
		vertical-align: inherit;
	}

	ul:not([class]) figcaption {
		font-weight: bold;
		text-align: center;
		letter-spacing: 0.25px;
		color: var(--blue);
	}

	ul:not([class]) figcaption span {
		/*	font-weight: 400;
		font-size: 12px;
		color: #444;*/
	}

	ul:not([class]) .fluid {
		display: block;
		width: 100%;
		padding: 0 15%;
		margin: 0 auto 20px auto;
		text-align: center;
		vertical-align: top;
		background: #333;
	}

	@media (min-width: 769px) {
		ul:not([class]) li {
			width: calc((100% - 100px) / 3);
		}

		ul:not([class]) li:nth-child(n + 2) {
			margin-left: 50px;
		}

		ul:not([class]) li:nth-child(3n + 1) {
			margin-left: 0;
		}

		ul:not([class]) li:nth-child(n + 4) {
			margin-top: 50px;
		}
	}

	@media (max-width: 768px) {
		ul:not([class]) {
			margin-top: 50px;
		}

		ul:not([class]) .fluid {
			padding: 0;
		}
	}

	@media (501px <=width <=768px) {
		ul:not([class]) {
			justify-content: flex-start;
		}

		ul:not([class]) li {
			width: calc((100% - 30px) / 2);
		}

		ul:not([class]) li:nth-child(even) {
			margin-left: 30px;
		}

		ul:not([class]) li:nth-child(n + 3) {
			margin-top: 30px;
		}
	}

	@media (max-width: 500px) {
		ul:not([class]) li {
			width: 100%;
		}

		ul:not([class]) li:nth-child(n + 2) {
			margin-top: 30px;
		}
	}
}

/*------------------------------------------------------------------------------------------------ ▼ ol --*/

@media all {
	section:not(.new) ol:not(.new) {
		margin-top: 50px 0;
	}

	section:not(.new) ol:not(.new) li {
		margin-bottom: 20px;
	}

	section:not(.new) ol:not(.new) li h5 {
		font-size: 16px;
		font-weight: 700;
		padding-bottom: 10px;
		border-bottom: 1px dotted #DDD;
	}

	section:not(.new) ol:not(.new) li p {
		padding-top: 10px;
		line-height: 24px;
	}

	@media (max-width: 768px) {
		section:not(.new) ol:not(.new) li h5 {
			font-size: 14px;
		}
	}
}

/*------------------------------------------------------------------------------------------------ ▼ h4 --*/

h4:not([class]) {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	margin: 100px 0 30px;
	padding-left: ;
	border-left: 0px solid #171C61;
	color: ;
	font-size: 2rem;
}

h4:not([class])::before {
	content: '';
	width: 10px;
	height: 1px;
	margin-right: 15px;
	background: #226;
}

@media (width <= 767px) {
	h4:not([class]) {
		margin: 50px 0 15px;
		font-size: 1.5rem;
	}
}

/*------------------------------------------------------------------------------------------------ ▼ section --*/

/*------------------------------------------------------------------------------------------------ ▼ .catalog-a --*/

@media all {
	.catalog-a {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.catalog-a {
		li {
			display: flex;
			flex-wrap: wrap;
		}
		
		li {
			> div {
				width: 100%;
			}
			
			.thumbnail {
				aspect-ratio: 16 / 10;
				border-radius: var(--border-radius-variable);
				background-position: center;
				background-size: cover;
			}
			
			.category {
				margin: 25px 0 5px;
				padding-left: 15px;
				border-left: 5px solid #444;
                font-family: YuGo-B;
                font-size: calc(1rem - 2px);
                
                @media (width <= 767px) {
                    margin: 15px 0 2px;
                    padding-left: 10px;
                    border-left: 4px solid #444;
                }
			}
			
			.name {
			}
		}
	}
	
    @media (768px <= width) {
        .catalog-a.col-3 {
            li {
                width: calc((100% - 100px) / 3);
                margin-right: 50px;
            }

            li:nth-child(3n) {
                margin-right: 0;
            }

            li:nth-child(n + 4) {
                margin-top: 50px;
            }
        }
    }
    
    @media (width <= 767px) {
        .catalog-a {
            li {
                width: calc((100% - 20px) / 2);
                margin-right: 20px;
            }

            li:nth-child(2n) {
                margin-right: 0;
            }

            li:nth-child(n + 3) {
                margin-top: 20px;
            }
        }
    }
}

/*------------------------------------------------------------------------------------------------ ▼ .compare --*/

@media all {
	.compare td:not(.t_center)  {
		vertical-align: top;
	}

	.compare li {
		position: relative;
		padding-left: 1em;
	}
	
	.compare li:before {
		content: '・';
		position: absolute;
		top: 0;
		left: 0;
	}
}

/*------------------------------------------------------------------------------------------------ ▼ #cover --*/

#cover {
    width: 100%;
    height: 400px;
    border-radius: var(--border-radius-variable);

    @media (width <= 1024px) {
        height: 300px;
    }

    @media (width <= 767px) {
        height: 25vh;
    }
}    

/*------------------------------------------------------------------------------------------------ ▼ .example --*/

@media all {
	ul.example li {
		flex-wrap: wrap;
		padding: ;
		border: 1px solid #f2f2f2;
		background: #f4f4f4;
	}
	
	.example img {
		margin-bottom: 5px;
	}
}

/*------------------------------------------------------------------------------------------------ ▼ .flex --*/

@media all {
	ul.flex {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	
	ul.flex li {
		display: flex;
		align-items: center;
		position: relative;
		margin: 15px 15px 0 0;
		padding: 15px;
		border: 1px dashed #ddd;
	}
	
	/*------------------------------------------------------------------- ▼ .col --*/
	
	ul.flex.col-3 li {
		width: calc((100% - 30px) / 3);
	}
	
	ul.flex.col-3 li:nth-of-type(3n) {
		margin-right: 0;
	}
	
	/*------------------------------------------------------------------- ▼ .numbering --*/
	
	ul.flex.numbering li div:not([class]) {
		width: calc(100% - 50px);
	}
	
	ul.flex.numbering div.number {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50px;
		padding-right: 15px;
		font-size: 20px;font-weight: bold;
		color: #36e;
	}
	
	@media (width <= 767px) {
		ul.flex li,
		ul.flex.col-3 li {
			width: 100%;
		}

		ul.flex li {
			margin: 15px 0 0 0;
		}
	}
}

/*------------------------------------------------------------------------------------------------ ▼ .flow-a --*/

@media all {
	.flow-a {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.flow-a {
		li {
			display: flex;
            align-items: flex-start;
			width: 100%;
			padding: 50px;
			border-radius: var(--border-radius);
			box-shadow: 5px 5px 0px #f3f3f3;
			background: #f6f6f6;
            overflow: hidden;
            
            @media (width <= 768px) {
				flex-wrap: wrap;
				padding: 20px;
                position: relative;
			}
		}
		
		li {
			.thumbnail {
				width: 350px;
                aspect-ratio: 4 / 3;
                border-radius: var(--border-radius);
                background-position: center;
                background-size: cover;
                
                @media (width <= 1023px) {
					width: 200px;
				}
                
                @media (width <= 768px) {
					width: calc(50% - 15px);
                    aspect-ratio: 16 / 12;
                    position: absolute;
                    top: 0;
                    right: 0;
                    border-radius: 0;
				}
			}
		
			.text {
				width: calc(100% - 350px);
				padding: 0 0 0 50px;
                
                @media (width <= 1023px) {
					width: calc(100% - 200px);
					padding: 0 0 0 50px;
				}
                
                @media (width <= 768px) {
					width: 100%;
					padding: calc(50% - 9rem) 0 0;
				}
                
                @media (width <= 500px) {
					padding: calc(50% - 8rem) 0 0;
				}
                
                @media (width <= 400px) {
					padding: calc(50% - 7.5rem) 0 0;
				}
			}
			
			.text {
				> div {
					width: 100%;
				}
				
				> div:not(.detail) {
                    @media (width <= 768px) {
                        width: calc(50% - 15px);
                    }
				}
				
				div.number {
					span {
						font-family: Helvetica-R;
						font-size: 50px;
						color: #ddd;
						color: #78BD36;
					}
                    
                    span::before {
            			font-size: 16px;
						content: 'flow-a';
						margin-right: 10px;
					}
				}

				div.title {
					margin: 15px 0;
					font: var(--font-medium-title);
                    
                    @media (width <= 768px) {
						margin: 0px 0 1em;
					}
				}
				
				div.detail {
					letter-spacing: var(--letter-spacing);
					line-height: var(--line-height);					
				}
				
				@media (width <= 768px) {
					div.number {
						span {
							font-size: 30px;
						}
                        
                        span::before {
							font-size: 14px;
						}
					}					
				}
			}
		}
		
		li:nth-child(n + 2) {
			margin-top: 15px;
		}
		
		@media (769px <= width) {
			li:nth-child(2n) {
				flex-direction: row-reverse;
			}
		
			li:nth-child(2n) {
				> div {
					padding: 0 50px 0 0;
				}
			}
		}
	}
}

/*------------------------------------------------------------------------------------------------ ▼ .flow-box --*/

@media all {
	.flow-box {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	
	@media all {
		/*--------------------------------------------------------------- ▼ .flow --*/

		.flow {
			display: flex;
			flex-wrap: wrap;
			width: calc(100% - 450px);		
		}

		.flow > li {
			display: flex;
			position: relative;
			width: 100%;
		}

		.flow > li:not(:first-of-type) {
			padding-top: 30px;
		}

		.flow img {
			max-width: 150px;
			max-height: 150px;
			border-radius: var(--border-radius);
		}

		@media (width <= 1200px) {
			.flow {
				width: calc(100% - 300px);		
			}
		}
		
		@media (width <= 767px) {
			.flow {
				width: 100%;
			}

			.flow li {
				flex-wrap: wrap;
			}
		}
		
		@media (width <= 500px) {
			.flow > li:not(:first-of-type) {
				padding-top: 15px;
			}
		}

		/*-------------------------------------- ▼ .step --*/

		.step {
			display: flex;
			align-items: flex-start;		
			width: 200px;
			background: rgba(255, 255, 50, 0.0);
		}

		.step::before {
			content: '';
			position: absolute;
			top: 0;
			left: 133px;
			display: block;
			width: 30px;
			height: 100%;
			background: #26a;
			z-index: -1;
			opacity: 0.075;
		}

		.step div {
			position: relative;
			width: 100px;
			padding: 5px 0;
			border-radius: 5px;
			background: #26a;
			text-align: center;
			color: #fff;
		}

		.step div::before {
			content: '';
			position: absolute;
			top: calc(50% - 0.5px);
			left: 115px;
			display: block;
			width: 70px;
			height: 1px;
			background: #26a;
			z-index: -1;
		}

		.step div::after {
			content: '';
			box-sizing: border-box;
			position: absolute;
			top: calc(50% - 6px);
			left: 142px;
			display: block;
			width: 12px;
			aspect-ratio: 1 / 1;
			border: 1px solid #26a;
			border-radius: 9999px;
			background: #fff;
			z-index: -1;
		}

		@media (width <= 767px) {
			.step::before {
				left: 32.5px;
				width: 5px;
			}
			
			.step div {
				width: 75px;
			}
			
			.step div::before {
				top: 55px;
				left: 35px;
				width: 55px;
			}
			
			.step div::after {
				top: 48px;
				left: 27.5px;
				width: 15px;
			}
		}
		
		@media (width <= 500px) {
			.step div::before {
				top: 51px;
			}
			
			.step div::after {
				top: 44px;
			}
		}

		/*-------------------------------------- ▼ .explain --*/

		.explain {
			width: calc(100% - 200px);
		}

		.explain div:first-child {
			line-height: 40px;
            font-family: var(--font-title-family);
		}
		
		@media (width <= 1200px) {
			.explain {
				width: 100%;
				padding-left: 50px;
			}
		}
		
		@media (width <= 767px) {
			.explain {
				width: 100%;
				padding-left: 100px;
			}
		}
	}
		
	/*------------------------------------------------------------------- ▼ .view --*/

	.view {
		width: 450px;
		padding-left: 100px;
		border: 0px solid #ccc;
	}

	.view img {
		width: 100%;
		border-radius: var(--border-radius);
	}
	
	.view img:not(:first-of-type) {
		margin-top: 50px;
	}
	
	.view_title {
		
	}	

	@media (width <= 1200px) {
		.view {
			width: 300px;
			padding-left: 50px;
		}
	}

	@media (width <= 767px) {

	}

	@media (width <= 500px) {

	}
}

/*------------------------------------------------------------------------------------------------ ▼ .highlight --*/

@media all {
	span.highlight,
	.highlight span {
		font-weight: bold;
		color: #36f;
	}
}

/*------------------------------------------------------------------------------------------------ ▼ .list-a --*/

@media all {
	.list-a {
		display: flex;
		flex-wrap: wrap;

	}
	
	.list-a {
		li {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			position: relative;
			padding: 50px;
			border-radius: var(--border-radius);
			background: #fff;			
		}
		
		li {
		
			> div {
				width: 100%;
			}
			
			div.number {
				span {
					font-family: Helvetica-R;
					font-size: 50px;
					color: #ddd;
					color: #78BD36;
				}
                
                span::before {
					font-size: 16px;
					content: 'list-a';
					margin-right: 10px;
				}
			}

			div.title {
				margin: 15px 0 30px;
				font: var(--font-medium-title);
			}

			.detail {
				letter-spacing: var(--letter-spacing);
				line-height: var(--line-height-medium);
				margin-bottom: calc(66.7% + 1em);
			}
			
			div.image {
				position: absolute;
				bottom: 50px;
				width: calc(100% - 100px);
                
                @media (width <= 1023px) {
					position: inherit;
					bottom: auto;
					margin-top: 50px;
				}
                
                @media (width <= 767px) {
					width: 100%;
				}
			}
			
			@media (width <= 1023px) {
				.detail {
					margin-bottom: 0;
				}
			}
			
			@media (width <= 768px) {
				div.number {
					::before {
						font-size: 14px;
					}

					span {
						font-size: 30px;
					}
				}
				
				div.title {
					margin: 10px 0 10px;
				}
			}
		}
		
		@media (width <= 768px) {
			li {
				padding: 20px;
			}
		}
	}
	
	.list-a.col-2 {
		li {
			width: calc((100% - 30px) / 2);
			margin-right: 15px;
		}
		
		li:nth-child(2n) {
			margin-right: 0;
		}
		
		li.double {
			width: 100%;
			margin-right: 0;
		}
	}
	
	.list-a.col-3 {
		li {
			width: calc((100% - 30px) / 3);
			margin-right: 15px;
		}
		
		li:nth-child(3n) {
			margin-right: 0;
		}
	}
	
	@media (width <= 1023px) {
		.list-a.col-2,
		.list-a.col-3,
        .list-a.landscape {
			li {
				width: 100%;
				margin-right: 0;
			}
			
			li:nth-child(n + 2) {
				margin-top: 15px;
			}
		}
	}
    
    .landscape {
        li:nth-child(n + 2) {
            margin-top: 15px;
        }
    }
    
    .landscape li .detail {
        @media (1024px <= width) {
            margin-bottom: calc(33% + 1em);
        }
    }
    
    .landscape .image {
        max-width: 50%;
    }
}

/*------------------------------------------------------------------------------------------------ ▼ .merit --*/

@media all {
	ul.merit li {
		border: 1px solid #36f;
		border-radius: 3px;
	}
	
	ul.merit .title {
		margin-bottom: 15px;
		padding-bottom: 8px;
		border-bottom: 1px dashed #ddd;
		
		font-weight: bold;
	}
}

/*------------------------------------------------------------------------------------------------ ▼ .section-title --*/

@media all {
    .section-title {
        position: relative;
        margin: 0 0 30px;
        padding-left: 1.5em;
        font: var(--font-title);
        
        @media (width <= 767px) {
            margin: 0 0 15px;
        }
    }
    
    .section-title::before {
        content: '';
        display: block;
        width: 1em;
        height: 1px;
        position: absolute;
        top: calc(50% + 5px);
        left: 0;
        background: var(--blue);
        
        @media (width <= 767px) {
            top: calc(50% + 1px);
        }
    }
}

/*------------------------------------------------------------------------------------------------ ▼ .theme --*/

@media all {
	.wrap-theme {
		display: flex;
		justify-content: center;
	}
	
	.theme {
		display: flex;
        flex-wrap: wrap;
		align-items: ;
        
        @media (width < 1280px) {
            width: 100%;
            padding: 0 var(--margin);
		}

        @media (width <= 767px) {
            padding: 0 20px;
        }
	}
	
	.theme {
		#theme-left {
            display: flex;
            align-items: center;
			width: 40%;
            padding-right: 100px;
            
            @media (width <= 767px) {
                width: 100%;
                margin-bottom: 15px;
                padding-right: 0;                    
            }
		}
        
        .theme-left {
            > div {
                width: 100%;
            }
        }
        
        #theme-title {
            margin: -0.25em 0 0.15em;
        }
        
        #theme-subtitle {
            color: #bbb;
            font-family: RobotoCnd-Medium;
            font-size: 18px;
            letter-spacing: 0.15em;
            
            @media (width <= 767px) {
                font-size: 14px;
            }
            
            @media (width <= 500px) {
                font-size: 13px;
            }
        }
        
        #theme-photo {
            display: flex;
            align-items: flex-start;
            margin-top: 50px;
            
            @media (width <= 767px) {
                margin-top: 30px;
            }
        }
        
        #theme-photo {
            li {
                width: 66.7%;
                
                @media (width <= 767px) {
                    width: 50%;
                }
            }
            
            div {
                aspect-ratio: 16 / 8;
                border-radius: var(--border-radius-variable);
                box-shadow: 15px 15px 0 #f0f0f0;
                
                @media (width <= 767px) {
                    box-shadow: 5px 5px 0 #ccc;
                }
            }
        }
        
        #theme-photo.col-2 {
            li {
                width: 35%;
            }
        
            li:nth-of-type(n + 2) {
                margin-left: 15px;
            }
            
            div {
                aspect-ratio: 16 / 9;
            }
        }

		#theme-right {
			width: 60%;
            
            @media (width <= 767px) {
                width: 100%;
            }
		}
		
		.theme-right {
			h3 {
				margin-top: -0.25em;			
				letter-spacing: 1.25px;
				color: ;
				font-family: YakuHan-R, GoMB101-Regular;
			}

			h3::after {
				content: '';
				display: block;
				width: 70px;
				height: 1px;
				background: var(--blue);
				margin-top: 15px;
				margin-bottom: 30px;
			}

			p:nth-of-type(n + 2) {
				margin-top: 1em;
			}

			a {
				text-decoration: underline;
			}
		}
	}
}

/*------------------------------------------------------------------------------------------------ ▼ .theme --*/

/*
@media all {
	.theme {
		display: flex;
		align-items: flex-start;
	}

	.theme_left {
		aspect-ratio: 4 / 3;
		border-radius: var(--border_radius);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.theme_right {}

	.theme_right h2 {
		position: relative;
		font-family: YuGo-B;
		line-height: 1.5em;
		color: var(--blue);
	}

	body.en .theme_right h2 {
		font-family: HelveticaCond-B;
		letter-spacing: 0.025em;
		line-height: 1.4em;
	}

	.theme_right h2::before {
		content: '';
		position: absolute;
		left: 0;
		width: 50px;
		border-top: 1px solid var(--blue);
	}

	@media (768px <=width) {
		.theme_left {
			width: 33%;
		}

		.theme_right {
			width: calc(67% - 50px);
			margin-left: 50px;
		}

		.theme_right h2 {
			margin: -10px 0 60px;
			font-size: 32px;
		}

		.en .theme_right h2 {
			margin: -10px 0 60px;
			font-size: 32px;
		}

		.theme_right h2::before {
			bottom: -30px;
		}
	}

	@media (width <=767px) {
		.theme {
			flex-wrap: wrap;
		}

		.theme_left,
		.theme_right {
			width: 100%;
		}

		.theme_right h2 {
			margin: 10px 0 40px;
			font-size: 20px;
		}

		.en .theme_right h2 {}

		.theme_right h2::before {
			bottom: -20px;
		}
	}
}
*/

/*------------------------------------------------------------------------------------------------ ▼ #wrap-cover --*/
/*
#wrap-cover {
    padding-bottom: 75px;

    @media (width <= 767px) {
        padding-bottom: 50px;
    }
}
*/


section:not(.new) .notice {
	margin: 10px 0 30px 0;
	text-align: right;
	font-size: 12px;
}

section:not(.new) .center {
	margin-top: 30px;
}

section:not(.new) .center img {
	display: block;
	margin: 0 auto 20px auto;
	width: 70%;
	height: auto;
}

section:not(.new) .center figcaption {
	text-align: center;
	font-size: 16px;
	line-height: 26px;
}

@media (max-width: 768px) {
	section:not(.new) .center img {
		width: 100%;
	}

	section:not(.new) .center figcaption {
		font-size: 12px;
		line-height: 18px;
	}
}