/*-------------------------------------- 

index
 
-------------------------------------- */

/* slider
-------------------------------- */
#slider{
	position: relative;
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
	z-index: 0;
}
	#slider:after{
		position: absolute;
		top: 0;
		left: -1px;
		width: 1px;
		height: 100%;
		background: var(--black);
		content: "";
	}
	#slider:before{
		position: absolute;
		top: 0;
		right: -1px;
		width: 1px;
		height: 100%;
		background: var(--black);
		content: "";
	}
	@media screen and (max-width: 760px) {
		#slider{
			width: 100%;
		}
		#slider:after{
			left: 0;
			width: 0;
		}
		#slider:before{
			right: 0;
			width: 0;
		}
	}
#slider .item a{
	display: block;
}
#slider .item a:hover{
	opacity: .85;
}

/* zoomup
-------------------------------- */
.zoomup-all{
	padding-top: 3em;
	position: relative;
}
.zoomup-title{
	text-align: center;
	margin-bottom: 2.25em;
}
.zoomup-title .eng-tit{
	text-indent: -9999px;
	background: url(../images/index/zoomup-title.png) no-repeat left center;
	background-size: 100% auto;
	width: 280px;
	height: 45px;
	margin: 0 auto .75em;
	position: relative;
	z-index: 4;
}
.zoomup-ms{
	position: absolute;
	top: -1.5em;
	right: 5.5%;
	max-width: 145px;
	z-index: 0;
}
	@media screen and (max-width: 1200px) {
		.zoomup-ms{
			right: 3%;
			max-width: 130px;
		}
	}

	@media screen and (max-width: 760px) {
		.zoomup-all{
			padding-top: 2.5em;
		}
		.zoomup-title{
			padding-left: 5%;
		}
		.zoomup-title .eng-tit{
			margin-left: 0;
			width: 200px;
			height: 32px;
		}
		.zoomup-title{
			text-align: left;
		}
		.zoomup-ms{
			max-width: inherit;
			width: 20%;
		}

	}

.zoomup-slick-img{
	margin: 0 auto;
	padding-bottom: 4.25em;
	padding-right: 3%;
	padding-left: 3%;
}
.slick-item{
	border-right: 1px solid var(--lightgray);
	position: relative;

}
	@media screen and (max-width: 760px)  {
		.zoomup-slick-img-all{
			padding-bottom: 2em;
			padding-left: .125em;
			padding-right: .125em;
			background-size: 50px auto;
		}
	}
.slick-ctg{
	position: absolute;
	top: .5em;
	left: 7%;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	z-index: 4;
	font-size: .875em;
}
.slick-body{
	line-height: 1.5;
	height: 4.75em;
	max-width: 250px;
	width: 82.5%;
	margin: 1.25em auto 0;
	font-size: .9375em;
	font-weight: 500;
}
.slick-item img{
	position: relative;
	z-index: 3;
	max-width: 220px;
	width: 60%;
	margin: 0 auto;
	border-radius: 50%;
	border: 1px solid;
}

/* information
-------------------------------- */
.information-all{
	background: var(--lightgray);
	border-bottom: 1px solid;
}
.information{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: center;
	font-size: .9375em;
}
.information-title{
	font-family: 'Montserrat', sans-serif;
	font-size: 1.5em;
	border-right: 1px solid var(--black);
	margin: 0 1.5em;
	padding-right: 1.125em;
	padding-top: 1em;
	padding-bottom: 1em;
}
.information-new{
	padding-top: 1em;
	padding-bottom: 1em;
}
.information-new div{
	position: relative;
	padding-left: 1.5em;
}
.information-new div::before { 
	content: "";
	margin: auto;
	position: absolute;
	top: 8px;
	left: 0;
	width: 8px; 
	height: 8px;
	border-top: 2px solid var(--black);
	border-right: 2px solid var(--black);
	transform: rotate(45deg);
}
.information-new a,
.information-new span{
	padding-left: 1em;
}
.information-new a{
	text-decoration: underline;
}

	@media screen and (max-width: 760px) {
		.information{
			display: block;
		}
		.information-title{
			background: var(--lightgray);
			border-bottom: 1px solid var(--black);
			border-right: none;
			margin: 0;
			padding: .75rem 1rem;
			line-height: 1.0;
		}
		.information-new{
			margin: 0 1rem;
			padding-top: 1em;
			padding-bottom: 1.5em;
		}
		.information-new a,
		.information-new span{
			display: block;
			padding-left: 0;
		}
	}


/* column
-------------------------------- */

.column-all{
	border-top: 1px solid var(--black);
}
.column-flex{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative;
}
.column-side{
	width: calc(100% - 902px);
}
.column-body{
	width: 902px;
	position: relative;
}
.column-body:before{
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 1px;
	height: 100%;
	background: var(--black);
	z-index: 5;
}
	@media screen and (max-width: 1200px) {
		.column-side{
			width: 100%;
		}
		.column-body{
			width: 100%;
		}
		.column-body:before{
			width: 100%;
			height: 1px;
		}
	}

.column-title {
	background: var(--lightgray);
	padding: 3em 1.75em 1em;
	margin-bottom: 1.5em;
}
.column-title .eng-tit{
	text-indent: -9999px;
	background-image: url(../images/index/column.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: auto 100%;
	width: 136px;
	height: 30px;
}
	@media screen and (max-width: 1200px) {
		.column-title{
			padding: 1em 1.75em;
			margin-bottom: 0;
			border-bottom: 1px solid var(--black);
		}
		.column-title .eng-tit{
			width: 113px;
			height: 25px;
		}
	}
	@media screen and (max-width: 760px) {
		.column-title{
			line-height: 1.0;
			padding: .5rem 1rem;

		}
	}

/* タブグループ JS使用
-------------------------------- */

.tab-group{
	margin-bottom:1em;
}
.tab-group li{
	position: relative;
	padding: .5em 2em;
	line-height: 1.3;
}
.tab-group li::after{
	content: "";
	margin: auto;
	position: absolute;
	top: .25em;
	bottom: 0;
	left: 1em;
	width: .5em;
	height: .5em;
	background: var(--black);
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}
.tab-group li::before { 
	content: "";
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 1em;
	width: .5em; 
	height: .5em;
	border-top: 1px solid var(--black);
	border-right: 1px solid var(--black);
	transform: rotate(45deg);
	transition: all 0.2s ease-out;
}
.tab-group li:hover{
	background: var(--lightgray);
}
.tab-group li:hover::before {
	right: .5em;
}
.column-panel{
	display:none;
}
.column-tab.is-active{
	background: var(--whitesmoke);
	transition: all 0.2s ease-out;
}
.column-panel.is-show{
	display:block;
}

	@media screen and (max-width: 1200px) {
		.tab-group{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			margin-bottom: 0;
		}
		.tab-group li{
			width: 20%;
			padding: 1.25em 0;
			border-right: 1px solid var(--lightgray);
			text-align: center;
		}
		.tab-group li:last-child{
			border-right: 0;
		}
		.tab-group li::after{
			content: "";
			margin: auto;
			position: absolute;
			top: auto;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 3px;
			background: none;
			border-radius:0;
			-moz-border-radius: 0;
			-webkit-border-radius:0;
			transition: all 0.2s ease-out;
		}
		.tab-group li:hover::after{
			background: var(--black);
		}
		.tab-group li::before{
			width: auto;
			height: auto;
			border-top: 0;
			border-right: 0;
		}
	}
	@media screen and (max-width: 1000px) and (orientation: portrait) {
		.tab-group li{
			font-size: 87.5%;
		}
	}
	@media screen and (max-width: 760px) {
		.tab-group-all{
			overflow-x: scroll;
		}
		.tab-group{
			width: 600px;
		}
	}


/*パネルレイアウト
-------------------------------- */

.column-panel-flex{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.category--list{
	width: calc(100% / 2);
}

.category--list ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	height: 899px;
}
	@media screen and (max-width: 1200px) and (orientation: portrait) {
		.category--list ul{
			height: calc(100vw * .88);
		}
	}
	@media screen and (max-width: 1200px) and (orientation: landscape) {
		.category--list ul{
			height: calc(100vw * .9);
		}
	}
	@media screen and (max-width: 900px) and (orientation: portrait) {
		.category--list ul{
			height: calc(100vw * .92);
		}
	}
	@media screen and (max-width: 760px) {
		.column-panel-flex{
			width: 96%;
			margin: 1.5em auto 2em;
			border: 1px solid var(--black);
		}
		.category--list{
			width: 100%;
		}
		.category--list ul{
			height: auto;
		}
	}

.category--list li{
	width: calc(100% / 2);
	height: calc(100% / 3);
	position: relative;
	line-height: 0;
}
.category--list li.no1{
	width: 100%;
	height: calc(100% / 1.5);
}

.category--list li:before{
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 1px;
	content: "";
	background: var(--black);
	z-index: 1;
}
.category--list li:after{
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	width: 100%;
	content: "";
	background: var(--black);
	z-index: 2;
}
.second-child li:nth-child(even):before{
	background: none;
}
.category--list li:nth-last-child(-n + 2):after{
	background: none;
}

/*画像比率*/
.category--list li .thumb{
	position: relative;
	width: 100%;
	height: 0;
	padding-top:  99.646017%;
}
.category--list li.no1 .thumb{
	padding-top:  116.3%;
}
.category--list li .thumb img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.category--list li .description{
	font-size: .875em;
	padding: 0 1em;
	line-height: 1.6;
	position: absolute;
	bottom: 0;
	height: 60px;
}
	@media screen and (max-width: 1200px) {
		.category--list li .thumb img{
			object-fit: cover;
		}
		.category--list li.no1 .thumb,
		.category--list li .thumb{
			padding-top: 0;
			width: 100%;
		}
	}
	@media screen and (max-width: 1200px){
		.category--list li.no1 .thumb{
			height: calc(100% - 70px);
		}
		.category--list li .thumb{
			height: calc(100% - 70px);
		}
	}
	@media screen and (max-width: 760px) {
		.first-child li:nth-child(1):before,
		.first-child li:nth-child(3):before {
			width: 0;
		}
		.first-child li:nth-child(n+2){
			border-bottom: 1px solid var(--black);
		}
		.category--list li,
		.category--list li.no1{
			height: auto;
		}
		.category--list li .thumb,
		.category--list li.no1 .thumb{
			padding-top: auto;
			height: auto;
		}
		.category--list li .thumb img,
		.category--list li.no1 .thumb img{
			position: relative;
			top: auto;
			left: auto;
			width: 100%;
			height: auto;
		}
		.category--list li .description{
			position: relative;
			bottom: auto;
			padding: 1.5em .75em;
			height: auto;
		}
	}

.category--list li .line-clamp{
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1.5;
}