@import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap");
@charset "UTF-8";
:root{
	--body : #000;
	--link : #000;
}

@media screen and (max-width: 750px){
	#menuBtn span span{
		background-color : #fff;
	}
}
@media print,screen and (min-width: 751px){
	#main .wrap {
		padding-left : 30px;
		padding-right : 30px;
	}
}
/*--------------------------------------------
HEADER
---------------------------------------------*/
@media screen and (max-width: 750px){
	#header {
		background-color: #000;
	}
}
/*--------------------------------------------
MAIN VISUAL + LOCAL NAV
---------------------------------------------*/
#main .heading {
	background-color: #000;
}
#mv .wrap {
	display: flex;
	flex-direction: column-reverse;
	padding-left: 0;
	padding-right: 0;
	width: auto;
}
#mv h1 {
	color: #e6e6e6;
	font-size: 2.4rem;
	font-weight: 900;
	line-height: 1.67;
}
#mv li {
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
/*-------------
#mv li.image01 {
	background-image: url(/assets/images/top/img_main_01.jpg);
}
#mv li.image02 {
	background-image: url(/assets/images/top/img_main_02.jpg);
}
#mv li.image03 {
	background-image: url(/assets/images/top/img_main_03.jpg);
}
#mv li.image04 {
	background-image: url(/assets/images/top/img_main_04.jpg);
}
#mv li.image05 {
	background-image: url(/assets/images/top/img_main_05.jpg);
}
--------*/
@media screen and (max-width: 750px){
	#mv h1 {
		padding: calc( 20 * 100% / 375 ) calc( 15 * 100% / 375 );
	}
    	#mv h1 em {
            font-style: italic;
    	}

	#mv li {
		height: calc( 100vh - (( 80 + 240 ) * 100vw / 375 ));
	}
}
@media print,screen and (min-width: 751px){
	#mv h1 {
		padding-bottom: 20px;
		padding-top: 11px;
		text-align: center;
	}
        #mv h1 em {
            font-style: italic;
        }
	#mv li {
		height: calc( 100vh - 108px - 151px /*- 81px */);
	}
}
/*--- LOCAL NAV pc only ---*/
@media print,screen and (min-width: 751px){
	.localNav  {
	    padding-bottom: 30px;
	}
	.localNav ul {
	    align-items: center;
	    display: flex;
	    justify-content: space-between;
	}
	.localNav li a {
		align-items: center;
		color: #c4c4c4;
		display: flex;
		flex-direction: column;
		font-size: 1.4rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 1;
		margin-bottom: 20px;
	}
	.localNav li a:after {
		background: url(../images/ui/icon/down03.svg)  0 0 / contain no-repeat;
		content: '';
		height: 5px;
		margin-top: 12px;
		transition: transform .3s ease-in;
		width: 10px;
	}
	.localNav li a:hover:after {
		transform: translateY( 10px );
	}
}

/*--------------------------------------------
MAIN CONTENTS
---------------------------------------------*/
/*--- COMMON ---*/
.sec-title {
	font-size: 3.5rem;
	font-weight: 900;
}
.lead {
	font-size: 1.5rem;
	letter-spacing: .05em;
	line-height: 2;
	/*text-align: justify;*/
}
.icon {
	background-color: #5e5e5e;
	color: #fff;
	display: inline-block;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-align: center;
}
time {
	color: #5e5e5e;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: .05em;
}
.button a {
	display: block;
	position: relative;
}
.button a:after {
	backface-visibility: hidden;
	background-color: #5e5e5e;
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transition: transform .3s ease-out;
	width: 100%;
	will-change: transform;
}
.button a:hover:after {
	transform: scaleX( 1.06 ) scaleY( 1.2 )
}
.button a span {
	align-items: center;
	color: #fff;
	display: flex;
	font-size: 1.5rem;
	font-weight: 700;
	justify-content: center;
	left: 50%;
	letter-spacing: .1em;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	z-index: 2;
}
.button a span:after{
	content : "";
	display : block;
	background : url("../images/ui/icon/next03.svg") 0 0 / contain no-repeat;
	flex-shrink : 0;
}
.button.mail a span:after{
	background : url("../images/ui/icon/mail_black.svg") 0 0 / contain no-repeat;
}
@media screen and (max-width: 750px){
	#contentswrap > section {
		padding-bottom: calc( 80 * 100vw / 375 );
		padding-top: calc( 80 * 100vw / 375 );
	}
	.sec-title {
		margin-bottom: calc( 30 * 100vw / 375 );
		text-align: center;
	}
	.lead {
		margin-bottom: calc( 30 * 100vw / 375 );
	}
	.button {
		margin-bottom: 30px;
	}
	.button a {
		height: calc( 60 * 100vw / 375 );
		margin-left: auto;
		margin-right: auto;
	}
	.button a:after {
		border-radius: calc( 45 * 100vw / 375 );
	}
	.button a span:after {
		height: calc( 30 * 100vw / 375 );
		margin-left: calc( 15 * 100vw / 375 );
		width: calc( 30 * 100vw / 375 );
	}
	.button.mail a span:after {
		height: calc( 38 * 100vw / 375 );
		width: calc( 38 * 100vw / 375 );
	}
	.button.mail a span:after {
		height: calc( 38 * 100vw / 375 );
		margin-left: calc( 15 * 100vw / 375 );
		width: calc( 38 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	#contentswrap {
		margin-bottom: 100px;
		scroll-behavior: smooth;
	}
	#contentswrap > section:not(.bg-sec) {
		padding-top: 100px;
	}
	#contentswrap > section.bg-sec {
		margin-top: 100px;
	}
	.lead {
		margin-bottom: 50px;
	}
	.icon {
		margin-right: 8px;
	}
	.leftwrap {
		flex-shrink: 0;
		margin-right: 50px;
		width: 220px;
	}
	.button a {
		height: 50px;
	}
	.button a:after {
		border-radius: 25px;
	}
	.button a span:after {
		height: 22px;
		margin-left: 15px;
		width: 22px;
	}
	.button.mail a span:after {
		height: 38px;
		width: 38px;
	}
}

/*--- INFORMATION ---*/
.info-box {
	overflow: auto;
}
.info-box ul {
	background-color: #fff;
}
.info-box::-webkit-scrollbar-track {
	background: #ddd;
}
.info-box::-webkit-scrollbar-thumb {
	background: #5e5e5e;
}
.info-box li {
	display: flex;
	flex-direction: column;
}
.info-box h3 {
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 2;
}
    .info-box h3 a {
        text-decoration: underline;
    }
        .info-box h3 a:hover {
            text-decoration: none;
            opacity: .8;
        }
.info-box p {
	font-size: 1.4rem;
	letter-spacing: .05em;
	line-height: 1.64;
	/*text-align: justify;*/
}
@media screen and (max-width: 750px){
	#information .text-box {
		border-bottom: calc( 1 * 100vw / 375 ) solid #d0d0d0;
		margin-bottom: calc( 30 * 100vw / 375 );
	}
	.info-box {
		height: calc( 350 * 100vw / 375 );
		padding-right: calc( 14 * 100vw / 375 );
		width: calc( 344 * 100vw / 375 );
    }
	.info-box::-webkit-scrollbar {
		width: calc( 3 * 100vw / 375 );
	}
	.info-box::-webkit-scrollbar-thumb {
		width: calc( 3 * 100vw / 375 );
	}
	.info-box ul {
		border: calc( 2 * 100vw / 375 ) solid #ddd;
		padding: calc( 30 * 100vw / 375 ) calc( 15 * 100vw / 375 );
	}
	.info-box li {
		padding-bottom: calc( 30 * 100vw / 375 );	
	}
	.info-box li + li {
		border-top: 1px solid #ddd;
		padding-top: calc( 30 * 100vw / 375 );
	}
	.info-box time {
		margin-bottom: calc( 20 * 100vw / 375 );
	}
	.info-box h3 {
		margin-bottom: calc( 10 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	#information .sec-title {
		margin-bottom: 30px;
        text-align: center;
	}
	.info-box {
/*--		height: 480px;--*/
		height: auto;
		width: 1040px;
	    scrollbar-width: thin; /*for firefox*/
    	scrollbar-color: #5e5e5e #ddd; /*for firefox*/
    }
	.info-box::-webkit-scrollbar {
		width: 3px;
	}
	.info-box::-webkit-scrollbar-thumb {
		width: 3px;
	}
	.info-box ul {
		border: 2px solid #ddd;
		padding: 50px;
	}
	.info-box li {
		padding-bottom: 30px;	
	}
	.info-box li + li {
		border-top: 1px solid #ddd;
		padding-top: 30px;
	}
	.info-box time {
		margin-bottom: 20px;
	}
	.info-box h3 {
		margin-bottom: 10px;
	}
}

/*--- ARCHIVE ---*/
#archive {
	background-color: #000;
}
#archive .sec-title,
#archive .lead,
#archive a {
	color: #fff;
}
#archive a {
	text-align: center;
}
#archive .button a {
	margin: 0 auto;
}
@media screen and (max-width: 750px){
	#archive {
		padding-bottom: calc( 80 * 100vw / 375 );
		padding-top: calc( 80 * 100vw / 375 );
	}
	#archive .sec-title,
	#archive .lead,
	#archive .button {
		margin-bottom: calc( 50 * 100vw / 375 );
	}
	#archive .button a {
		width: calc( 345 * 100vw / 375 );
	}
	#archive .text-box {
		border-bottom: calc( 1 * 100vw / 375 ) solid #333;
		margin-bottom: calc( 50 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	#archive {
		padding-bottom: 100px;
		padding-top: 80px;
	}
	#archive .sec-title,
	#archive .lead {
		text-align: center;
	}
	#archive .sec-title {
		margin-bottom: 50px;
	}
	#archive .button {
		margin-bottom: 50px;
	}
	#archive .button a {
		width: 276px;
	}
	.archive-box ul {
		display: flex;
		flex-wrap: wrap;
	}
	.archive-box li {
		margin-bottom: 8px;
		display: flex;
		justify-content: center;
	}
	.archive-box li:nth-child(4n),
	.archive-box li:nth-child(4n+1) {
		width: 250px;
		flex-grow: 0;
	}
	.archive-box li:nth-child(4n+2),
	.archive-box li:nth-child(4n+3) {
		width: 270px;
	}
	.archive-box li > div {
		display: flex;
		height: auto;
		justify-content: center;
		margin-right: 4px;
		width: 100%;
	}
	.archive-box li:not(:nth-child(4n)) > div {
		border-right: 1px solid #333;
		padding-right: 5px;
	}	
	.archive-box li a {
		align-items: center;
		display: flex;
		flex-shrink: 0;
		flex-direction: column;
		padding-bottom: 40px;
		width: 100%;
	}
	.archive-box li:not(:nth-child(-n+4)) a {
		border-top: 1px solid #333;
		margin-top: -4px;
		padding-top: 40px;
	}
	.archive-box li a picture {
		height: 180px;
		position: relative;
		width: 180px;
	}
	.archive-box li a picture img {
	    height: auto;
		left: 50%;
	    max-height: 100%;
	    max-width: 100%;
		position: absolute;
		top: 50%;
		transform: translate(-50%,-50%);
		width: auto;
	}
	.archive-box li div div {
		margin-top: 10px;
	}
	.archive-box li .icon {
		min-width: 64px;
		padding: 4.5px 7px;
	}
	.archive-box li h3 {
		font-size: 1.4rem;
		font-weight: 700;
		letter-spacing: .05em;
		line-height: 1.43;
		margin-top: 8px;
	}
}

/*--- FEATURES ---*/
@media screen and (max-width: 750px){
	#features .wrap {
		display: flex;
		flex-direction: column;
	}
	#features .text-box {
		order: 1;
	}
	#features .slider02 {
		order: 3;
	}
	#features .button {
		border-bottom: calc( 1 * 100vw / 375 ) solid #d0d0d0;
		order: 2;
		margin-bottom: calc( 30 * 100vw / 375 );
		padding-bottom: calc( 30 * 100vw / 375 );
	}
	#features .button a {
		margin: 0 auto;
		width: calc( 255 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	#features .sec-title {
		margin-bottom: 30px;
		text-align: center;
	}
	#features .lead {
		margin-bottom: 80px;
		text-align: center;
	}
	#features .button a {
		margin: 0 auto;
		width: 220px;
	}
}

/*--- PROJECT ---*/
@media screen and (max-width: 750px){
	#project {
		background-color: #c4c4c4;		
	}
	#project .button {
		margin-bottom: calc( 30 * 100vw / 375 );
	}
	#project .button a {
		margin: 0 auto;
		width: calc( 255 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	#project .sec-title {
		margin-bottom: 50px;
	}
	#project .bgwrap {
		background-color: #c4c4c4;
		display: flex;
		padding: 80px 50px 130px;
	}
	#project .button a {
		width: 220px;
	}
}

/*--- NEWSLETTER ---*/
#newsletter .sec-title {
	text-align: center;
}
@media screen and (max-width: 750px){
	#newsletter .button a {
		margin: 0 auto;
		width: calc( 225 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	#newsletter .sec-title {
		margin-bottom: 30px;
	}
	#newsletter .lead {
		text-align: center;
	}
	#newsletter .button a {
		margin: 0 auto 80px;
		width: 220px;
	}
}

/*--- NEWS ---*/
@media screen and (max-width: 750px){
	#news {
		background-color: #f5f5f5;		
	}
	#news .button a {
		margin: 0 auto;
		width: calc( 255 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	#news .sec-title {
		margin-bottom: 30px;
	}
	#news .bgwrap {
		background-color: #f5f5f5;
		display: flex;
		padding: 80px 50px 130px;
	}
	#news .button a {
		width: 180px;
	}
}

/*--- ABOUTUS ---*/
#aboutus {
	background-color: #c4c4c4;
}
#aboutus .wrap {
	display: flex;
	flex-direction: column;
}
#aboutus .dan {
	font-size: 1.8rem;
	line-height: 2;
}
#aboutus ul {
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 750px){
	#aboutus {
		padding-top: 0!important;
	}
	#aboutus .wrap {
		background: url(../images/top/img_aboutus_01_pc.png) center 0/ contain no-repeat;
		padding-top: calc( 412 * 100vw / 375 );
	}
	#aboutus .sec-title,
	#aboutus .lead {
		margin-bottom: calc( 50 * 100vw / 375 );
	}
	#aboutus .dan {
		margin-bottom: calc( 30 * 100vw / 375 );
		/*text-align: justify;*/
	}
	#aboutus ul {
		width: 100%;
	}
	#aboutus .button {
		margin-bottom: 0;
	}
	#aboutus .button a {
		width: calc( 165 * 100vw / 375 );
	}
	.en #aboutus .button:nth-child(2) span {
		font-size: 1.3rem;
		padding-left: calc( 15 * 100vw / 375 );
		padding-right: calc( 15 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	#aboutus .sec-title {
		margin-bottom: 50px;
	}
	#aboutus .wrap {
		background: url(../images/top/img_aboutus_01_pc.png) 570px 80px/ auto no-repeat;
		padding: 80px 570px 80px 30px;
	}
	#aboutus .dan {
		letter-spacing: .05em;
		margin-bottom: 30px;
	}
	#aboutus ul {
		width: 400px;
	}
	#aboutus .button a {
		width: 170px;
	}
	.en #aboutus .button:nth-child(2) span {
		font-size: 1.3rem;
		padding-left: 15px;
		padding-right: 15px;
	}
}

/*--- SUPPORT ---*/
#support .sec-title,
#support h3 {
	text-align: center;
}
#support .lead02 {
	font-size: 1.8rem;
	letter-spacing: .05em;
	line-height: 2;
}
#support h3 {
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: .1em;
}
#support .box {
	background-color: #fff;
}
#support .box .lead span {
	font-weight: 700;
}
#support .box ul {
	display: flex;
}
#support .box li {
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 2;
}
@media screen and (max-width: 750px){
	#support .lead02 {
		margin-bottom: calc( 50 * 100vw / 375 );
	}
	#support h3 {
		margin-bottom: calc( 20 * 100vw / 375 );
	}
	#support .box {
		padding: calc( 30 * 100vw / 375 );
	}
	#support .box .lead {
		margin-bottom: calc( 30 * 100vw / 375 );
	}	
	#support .button a {
		width: calc( 285 * 100vw / 375 );
	}
	#support .box ul {
		flex-direction: column;
	}
	#support .box li {
		border-left: calc( 1 * 100vw / 375 ) solid #000;
		border-right: calc( 1 * 100vw / 375 ) solid #000;
		padding-left: calc( 20 * 100vw / 375 );
		padding-right: calc( 20 * 100vw / 375 );
	}
	#support .box li:nth-child(1) {
		margin-bottom: calc( 30 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	#support .sec-title {
		margin-bottom: 50px;
	}
	#support .lead02 {
		margin-bottom: 40px;
		text-align: center;
	}
	#support h3 {
		margin-bottom: 20px;
	}
	#support .box {
		padding: 40px;
	}
	#support .box .lead {
		margin-bottom: 30px;
	}
	#support .button a {
		width: 258px;
	}
	#support .box ul {
		margin-top: 30px;
	}
	#support .box li {
		padding-left: 20px;
	}
	#support .box li:nth-child(1) {
		border-left: 1px solid #000;
		border-right: 1px solid #000;
		padding-right: 20px;
	}
}

/*--------------------------------------------
SLIDER
---------------------------------------------*/
/*--- slider01 ---*/
@media print,screen and (max-width: 750px){
	.slider01 {
		margin-left: calc( -15 * 100vw / 375 );
		margin-right: calc( -15 * 100vw / 375 );
	}
	.slider01 li {
		margin-top: calc( 5 * 100vw / 375 );
	}
	.slider01 li a {
		align-items: center;
		display: flex;
		flex-direction: column;
	}
	.slider01 li picture {
		align-items: center;
		display: flex;
		height: calc( 180 * 100vw / 375 );
		justify-content: center;
		position: relative;
		transition: transform .3s ease-in;
		width: calc( 180 * 100vw / 375 );
	}
	.slider01 li a:hover picture {
		transform: scale(1.05);
	}
	.slider01 li picture img {
	    height: auto;
		left: 50%;
	    max-height: 100%;
	    max-width: 100%;
		position: absolute;
		top: 50%;
		transform: translate(-50%,-50%);
		width: auto;
	}
	.slider01 li > div div {
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-top: calc( 10 * 100vw / 375 );
	}
	.slider01 li .icon {
		min-width: calc( 64 * 100vw / 375 );
		padding: calc( 4.5 * 100vw / 375 ) calc( 7 * 100vw / 375 );
	}
	.slider01 li h3 {
		font-size: 1.4rem;
		font-weight: 700;
		letter-spacing: .05em;
		line-height: 1.43;
		margin-top: calc( 8 * 100vw / 375 );
	}
	.slider01 .slide-controller02 {
		margin-top: calc( 50 * 100vw / 375 );
	}
}
/*--- slider02 ---*/
.slider02 li a {
	background-color: #fff;
	display: flex;
	transition: transform .3s ease-in;
}
.slider02 li h3  {
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 2;
	/*text-align: justify;*/
}
.slider02 li p {
	font-size: 1.4rem;
	letter-spacing: .05em;
	line-height: 1.64;
	/*text-align: justify;*/
}
@media screen and (max-width: 750px){
	.slider02 {
		margin-left: calc( -15 * 100vw / 375 );
		margin-right: calc( -15 * 100vw / 375 );
	}
	.slider02 li {
		padding-left: calc( 7.5 * 100vw / 375 );
		padding-right: calc( 7.5 * 100vw / 375 );
	}
	.slider02 li a {
		align-items: center;
		flex-direction: column;
		padding: calc( 30 * 100vw / 375 );
	}
	.slider02 li picture {
		align-items: center;
		display: flex;
		height: calc( 130 * 100vw / 375 );
		justify-content: center;
		position: relative;
		transition: transform .3s ease-in;
		width: calc( 225 * 100vw / 375 );
	}
	.slider02 li a:hover picture {
		transform: scale(1.05);
	}
	.slider02 li picture img {
		height: auto;
		left: 50%;
	    max-height: 100%;
	    max-width: 100%;
		position: absolute;
		top: 50%;
		transform: translate(-50%,-50%);
		width: auto;
	}
	.slider02 li a > div {
		width: calc( 225 * 100vw / 375 );
	}
	.slider02 li a > div div {
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		margin: calc( 20 * 100vw / 375 ) 0;
	}
	.slider02 li .icon {
		margin-bottom: 10px;
		padding: calc( 4.5 * 100vw / 375 );
	}
	.slider02 li h3 {
		margin-bottom: calc( 10 * 100vw / 375 );
	}
	.slider02 li .text-overflow {
		height: calc( 70 * 100vw / 375 );
		overflow: hidden;
	}
        .slider02 li .text-overflow strong {
            font-weight: 600;
            margin-bottom: .5em;
            display: block;
        }
}
@media print,screen and (min-width: 751px){
	.slider02 {
		margin-bottom: 50px;
		position: relative;
	}
	.slider02 li {
		padding-left: 15px;
		padding-right: 15px;
		width: 680px;
	}
	.slider02 li a {
		height: 256px;
		transition: all .3s ease-in;
		width: 680px;
	}
	.slider02 li a:hover {
		transform: scale(1.02);
	}
	.slider02 li picture {
		height: 256px;
		width: 180px;
	}
	.slider02 li picture img {
		font-family: "object-fit: cover;";
		max-height: 100%;
		object-fit: cover;
		width: 100%;
	}
	.slider02 li a > div {
		display: flex;
		flex-direction: column;
		padding: 40px;
		width: 500px;
	}
	.slider02 li a > div div {
		margin-bottom: 20px;
	}
	.slider02 li .icon {
		padding: 4.5px;
	}
	.slider02 li h3 {
		margin-bottom: 10px;
	}
	.slider02 li .text-overflow {
		overflow: hidden;
		height: 92px;
	}
        .slider02 li .text-overflow strong {
            font-weight: 600;
            margin-bottom: 1em;
            display: block;
        }
	.slider02:before,
	.slider02:after {
		content: '';
		height: 260px;
		position: absolute;
		top: -2px;
		width: 165px;
		z-index: 100;
	}
	.slider02:before {
		background: linear-gradient(to right, #e5e5e5 10%, rgba(229,229,229,0.1));
		left: -2px;
	}
	.slider02:after {
		background: linear-gradient(to left, #e5e5e5 10%, rgba(229,229,229,0.1));
		position: absolute;
		right: -2px;
	}
}
/*--- slider03 ---*/
.slider03 li a {
	display: flex;
}
.slider03 li h3  {
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 2;
	/*text-align: justify;*/
}
.slider03 li p {
	font-size: 1.4rem;
	letter-spacing: .05em;
	line-height: 1.64;
	/*text-align: justify;*/
}
@media screen and (max-width: 750px){
	.slider03 {
		border-top: calc( 1 * 100vw / 375 ) solid #d0d0d0;
		padding-top: calc( 30 * 100vw / 375 );
	}
	.slider03 ul {
		margin-left: calc( -15 * 100vw / 375 );
		margin-right: calc( -15 * 100vw / 375 );
	}
	.slider03 li {
		border-right: calc( 1 * 100vw / 375 ) solid #d0d0d0;
		padding-left: calc( 7.5 * 100vw / 375 );
		padding-right: calc( 7.5 * 100vw / 375 );
	}
	.slider03 li a {
		align-items: center;
		flex-direction: column;
		padding-left: calc( 30 * 100vw / 375 );
		padding-right: calc( 30 * 100vw / 375 );
		padding-top: calc( 5 * 100vw / 375 );
	}
	.slider03 li picture {
		align-items: center;
		display: flex;
		height: calc( 130 * 100vw / 375 );
		justify-content: center;
		position: relative;
		transition: transform .3s ease-in;
		width: calc( 225 * 100vw / 375 );
	}
	.slider03 li a:hover picture {
		transform: scale(1.05);
	}
	.slider03 li picture img {
		height: auto;
		left: 50%;
	    max-height: 100%;
	    max-width: 100%;
		position: absolute;
		top: 50%;
		transform: translate(-50%,-50%);
		width: auto;
	}
	.slider03 li a > div {
		width: calc( 225 * 100vw / 375 );
	}
	.slider03 li a div div {
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		margin: calc( 20 * 100vw / 375 ) 0;
	}
	.slider03 li .icon {
		margin-bottom: 10px;
		padding: calc( 4.5 * 100vw / 375 );
	}
	.slider03 li h3 {
		margin-bottom: calc( 10 * 100vw / 375 );
	}
	.slider03 li .text-overflow {
		height: calc( 70 * 100vw / 375 );
		overflow: hidden;
	}
        .slider03 li .text-overflow strong {
            font-weight: 600;
            margin-bottom: 1em;
            display: block;
        }
	.slider03 .slide-controller02 {
		border-top: calc( 1 * 100vw / 375 ) solid #d0d0d0;
		padding-top: calc( 30 * 100vw / 375 );		
	}
}
@media print,screen and (min-width: 751px){
	.slider03 {
		position: relative;
	}
	.slider03 li {
		border-bottom: 1px solid #d0d0d0;
		padding-bottom: 30px;
		width: 670px;
	}
	.slider03 li:not(:nth-child(3n)) {
		margin-bottom: 30px;
	}
	.slider03 li a {
		display: flex;
		width: 100%;
	}
	.slider03 li picture {
		flex-shrink: 0;
		height: auto;
		margin-right: 40px;
		transition: all .3s ease-in;
		width: 270px;
	}
	.slider03 li a:hover picture {
		transform: scale( 1.05 );
	}
	.slider03 li picture img {
		height: auto;
		width: 100%;
	}
	.slider03 li a > div {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		width: 360px;
	}
        .slider03 li a > div p {
            width: 360px;
        }
	.slider03 li a div div {
		margin-bottom: 20px;
	}
	.slider03 li .icon {
		padding: 2px;
	}
	.slider03 li h3 {
		margin-bottom: 10px;
	}
	.slider03 li .text-overflow {
		overflow: hidden;
		height: 92px;
	}
	.slider03 li .text-overflow  strong {
        font-weight: 600;
        margin-bottom: 1em;
        display: block;
	}
}
/*--- slider04 ---*/
@media screen and (max-width: 750px){
	.slider04 {
		border-top: calc( 1 * 100vw / 375 ) solid #d0d0d0;
		padding-top: calc( 30 * 100vw / 375 );
	}
	.slider04 li {
		margin-bottom: calc( 50 * 100vw / 375 );
		margin-left: calc( 7.5 * 100vw / 375 );
		margin-right: calc( 7.5 * 100vw / 375 );
		width: calc( 165 * 100vw / 375 );
	}
	.slider04 li a {
		align-items: center;
		display: flex;
		flex-direction: column;
		width: calc( 165 * 100vw / 375 );
	}
	.slider04 li picture {
		flex-shrink: 0;
		height: calc( 149 * 100vw / 375 );
		margin-bottom: calc( 12 * 100vw / 375 );
		margin-top: calc( 5 * 100vw / 375 );
		transition: all .3s ease-in;
		width: calc( 105 * 100vw / 375 );
	}
	.slider04 li a:hover picture {
		transform: scale( 1.05 );
	}
	.slider04 li picture img {
		height: 100%;
		width: auto;
	}
	.slider04 li a > div {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
	.slider04 li a div div {
		margin-bottom: calc( 8 * 100vw / 375 );
		text-align: center;
	}
	.slider04 li .vol {
		color: #5e5e5e;
		display: inline-block;
		font-size: 1.1rem;
		font-weight: 700;
		margin-right: calc( 10 * 100vw / 375 );
	}
	.slider04 li h3 {
		font-size: 1.2rem;
		font-weight: 700;
		letter-spacing: .05em;
		line-height: 1.5;
		text-align: center;
	}
	.slider04 .slide-controller02 {
		border-top: calc( 1 * 100vw / 375 ) solid #d0d0d0;
		margin-top: 0;
		padding-top: calc( 30 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	.slider04 {
		position: relative;
	}
	.slider04 li {
		padding-left: 20px;
		padding-right: 20px;
		width: 140px;
	}
	.slider04 li a {
		display: flex;
		flex-direction: column;
		width: 140px;
	}
	.slider04 li picture {
		flex-shrink: 0;
		height: 199px;
		margin-bottom: 12px;
		margin-top: 10px;
		transition: all .3s ease-in;
		width: 140px;
	}
	.slider04 li a:hover picture {
		transform: scale( 1.05 );
	}
	.slider04 li picture img {
		height: auto;
		width: 100%;
	}
	.slider04 li a > div {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
	.slider04 li a div div {
		margin-bottom: 8px;
	}
	.slider04 li .vol {
		color: #5e5e5e;
		display: inline-block;
		font-size: 1.1rem;
		font-weight: 700;
		margin-right: 10px;
	}
	.slider04 li h3 {
		font-size: 1.2rem;
		font-weight: 700;
		letter-spacing: .05em;
		line-height: 1.3;
	}
        .slider04 li p {
            font-size: 1.0rem;
            line-height: 1.3;
            margin-top: 5px;
        }
	.slider04:before,
	.slider04:after {
		content: '';
		height: 280px;
		position: absolute;
		top: -2px;
		width: 100px;
		z-index: 100;
	}
	.slider04:before {
		background: linear-gradient(to right, #e5e5e5 10%, rgba(229,229,229,0.1));
		left: -2px;
	}
	.slider04:after {
		background: linear-gradient(to left, #e5e5e5 10%, rgba(229,229,229,0.1));
		position: absolute;
		right: -2px;
	}
}
/*--------------------------------------------
SLIDER ARROW
---------------------------------------------*/
.slide-controller02 {
	align-items: center;
	display: flex;
	justify-content: center;
}
.slide-controller02 .slide-prev {
	background: url("../images/ui/icon/prev03.svg") 0 0 / contain no-repeat;
}
.slide-controller02 .slide-next {
	background: url("../images/ui/icon/next03.svg") 0 0 / contain no-repeat;
}
@media screen and (max-width: 750px){
	.slide-controller02 {
		margin: calc( 30 * 100vw / 375 ) auto 0;
	}
	.slide-controller02 .slide-prev, 
	.slide-controller02 .slide-next {
		height: calc( 40 * 100vw / 375 );
		width: calc( 40 * 100vw / 375 );
	}
	.slide-controller02 .slide-prev {
		margin-right: calc( 22.5 * 100vw / 375 );
	}
	.slide-controller02 .slide-next {
		margin-left: calc( 22.5 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 751px){
	.slide-controller02:not(.bottom) {
		right: 15px;
		position: absolute;
		top: -50px;
	}
	.slide-controller02.bottom {
		right: 15px;
		position: absolute;
		bottom: -52px;
	}
	.slide-controller02 .slide-prev, 
	.slide-controller02 .slide-next {
		height: 22px;
		width: 22px;
	}
	.slide-controller02 .slide-prev {
		margin-right: 10px;
	}
	.slide-controller02 .slide-next {
		margin-left : 10px;
	}
}