@charset "utf-8";
/* main_Layout */

/*------------------------------------
	Main-visaul
------------------------------------*/
.main-visual{
	position:relative;
	margin-top:4rem;
}
.carousel-item {
	height: 75vw;
	background: no-repeat center center scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.portfolio-item {
  margin-bottom: 30px;
}
.main-visual .carousel-indicators{
	bottom:25% !important;
}
.main-visual .carousel-control-prev-icon, .carousel-control-next-icon {
    display: inline-block;
    width: 35px;
    height: 35px;
    background: transparent no-repeat center center;
	background-image: none;
	background-size: auto;
    background-size: 100% 100%;
}
.main-visual .carousel-control-next-icon {
    background-image:url('../images/main/visual-arrow-next.png');
}
.main-visual .carousel-control-prev-icon {
    background-image:url('../images/main/visual-arrow-prev.png');
}
@media (min-width: 992px) {
	.main-visual .carousel-item {
		height: 700px;
	}
	.main-visual .carousel-indicators{
		bottom:200px !important;
	}
	.main-visual .carousel-control-prev-icon, .carousel-control-next-icon {
		width: 70px;
		height: 70px;
	}
}
@media (min-width: 1200px) {
	.main-visual{
		margin-top:100px;
	}
	.main-visual .carousel-item {
		height: 800px;
	}
	.main-visual .carousel-indicators{
		bottom:245px !important;
	}
}



/*------------------------------------
	main-con
------------------------------------*/
.main-con-group .title-area{
	text-align:center;
}
.main-con-group .title-area h2{
	color:#222;
	font-size:1.5rem;
	letter-spacing:0.15rem;
	margin-bottom:1rem;
}
.main-con-group .title-area h2::before{
	content:'';
	display:block;
	width:2.5rem;
	height:1rem;
	border-top:1px solid #bf002c;
	margin:0 auto;
}
.main-con-group .title-area .title-text{
	font-size:0.85rem;
	color:rgba(0, 0, 0, 0.5);
}
.main-con-group .title-area.color-white h2{
	color:#fff;
}
.main-con-group .title-area.color-white h2::before{
	border-top:1px solid #fff;
}
.main-con-group .title-area.color-white .title-text{
	color:rgba(255, 255, 255, 0.7);
}
@media (min-width: 992px) {
	.main-con-group .title-area h2{
		font-size:2rem;
		margin-bottom:1.5rem;
	}
	.main-con-group .title-area .title-text{
		font-size:1.1rem;
		margin-bottom:2rem;
	}
	.main-con-group .title-area.color-white .title-text{
		font-size:1rem;
	}
}


/*------------------------------------
	main-con01
------------------------------------*/
.main-con01{
	background:url('../images/main/brand-bg01.gif')repeat 50% 0; 
	padding:4rem 0 5rem;
}
.brand-banner .btn{
	margin:0 auto;
	min-width:180px;
}
.brand-banner{
	margin-bottom:0 !important;
	padding:0 0 2rem;
}
.brand-banner .brand-img img{
	box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.25);
}
.brand-banner .barnd-info{
	margin-top:2.5rem;
	text-align:center;
}
.brand-banner .barnd-info h4{
	font-weight:500;
	font-size:1.5rem;
	color:#222;
}
.brand-banner .barnd-info .brand-text{
	margin-top:0.5rem;
	margin-bottom:1.5rem;
	font-size:1rem;
	color:#555;
	word-break:keep-all;
}
.brand-banner .slick-prev, 
.brand-banner .slick-next {
	top:28%;
	width: 2.2rem;
	height: 2.2rem;
	z-index:1000  !important;
}
.brand-banner .slick-prev::before, 
.brand-banner .slick-next::before {
	content:'' !important;
	display:block !important;
	width:100% !important;
	height:100% !important;
	opacity: 0.4  !important;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out; 
}
.brand-banner .slick-prev:hover::before, 
.brand-banner .slick-next:hover::before {
	opacity: 0.7  !important;
}
.brand-banner .slick-prev::before{
	background:url('../images/main/brand-arrow-left.png') no-repeat 50%/ contain;
}
.brand-banner .slick-next::before{
	background:url('../images/main/brand-arrow-right.png') no-repeat 50%/ contain;
}
.brand-banner .slick-dots {
	left:0;
}
.brand-banner .slick-dots li {
    width: 13px !important;
    height: 13px !important;
}
.slick-dots li button::before {
	content: '' !important;
    width: 13px !important;
    height: 13px !important;
	opacity:1 !important;
    border:3px solid #fff;
	border-radius:50%;
}
.slick-dots li.slick-active button::before {
    opacity:1 !important;
	background:#fff;
}
@media (min-width:1200px) {
	.main-con01{
		padding:7rem 0;
	}
	.main-con01 .brand-banner{
		padding:0 5rem 1rem;
	}
	.brand-banner .btn{
		position:absolute;
		left:37%;
		bottom:6rem;
		width:210px;
		padding: .7rem 0;
	}
	.brand-banner .barnd-info{
		margin-top:7.5rem;
		text-align:left;
	}
	.brand-banner .barnd-info .company-name{
		font-weight:800;
		font-size:0.92rem;
		letter-spacing:0.15rem;
		text-transform:uppercase;
	}
	.brand-banner .barnd-info h4{
		font-size:2.8rem;
	}
	.brand-banner .barnd-info h4::after{
		content:'';
		display:block;
		width:4.8rem;
		height:1rem;
		border-bottom:3px solid #222;
		margin-left:2px;
	}
	.brand-banner .barnd-info .brand-text{
		margin-top:3rem;
		font-size:1.3rem;
	}
	.brand-banner .slick-prev, 
	.brand-banner .slick-next {	
		top:50%;
		width:60px  !important;
		height:60px  !important;
	}
}

/*------------------------------------
	main-con02
------------------------------------*/
.main-con02{
	position:relative;
	background:url('../images/main/ict-bg.jpg')no-repeat 50% /cover;
}
.main-con02 .ict-info > div{
	background:rgba(160, 0, 37, 0.9);
	padding:3rem 2rem;
	margin:4rem 2rem;
}
.main-con02 .ict-info ul li a{
	display:block;
	text-align:center;
	font-size:1.1rem;
	color:#fff;
	padding:1.7rem 0;
	border:1px solid rgba(255, 255, 255, 0.5);
	
}
@media (min-width:1200px) {
	.main-con02 .ict-info > div{
		padding:7rem 5.5rem;
		margin:0;
	}
	.main-con02 .ict-info ul li a{
		text-align:left;
		padding:2.5rem 2rem;
		font-size:1.3rem;
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out; 
		background:url('../images/main/white-arrow.png') no-repeat calc(100% - 2rem) 50% / auto 0.8rem;
	}
	.main-con02 .ict-info ul li a:hover{
		color:#111;
		background:rgba(255, 255, 255, 0.8) url('../images/main/d-gray-arrow.png') no-repeat calc(100% - 2rem) 50% / auto 0.8rem;
	}
}
/*------------------------------------
  main-con03
------------------------------------*/
.main-con03{
	padding:4rem 0;
}
.width-HM .con-wrap{
	padding:0;
	position:relative;
}
.width-HM .con-wrap::before{
	content:'';
	display:block;
	width:100%;
	height:0;
	padding-top:50%;
	overflow:hidden;
}
.width-HM .con-wrap.con-02::before,
.width-HM .con-wrap.con-03::before{
	padding-top:100%;
}
.width-HM .con-wrap > div{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
}
.width-HM .con-wrap h4{
	font-size:1.7rem;
	color:#fff;
}
.width-HM .con-wrap .btn{
	margin-top:1.5rem;
	border:1px solid rgba(255, 255, 255, 0.5);
	color:rgba(255, 255, 255, 0.8);
	padding:0.5rem 3rem;
	font-weight:500;
	font-size:0.95rem;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out; 
}
.width-HM .con-wrap .btn:hover{
	color:#222;
	background:rgba(255, 255, 255, 1);
}

/* HM ÄíÅ· ½ºÅ丮 */
.width-HM .con-01 .title-area{
	background:#a00025;
	position:relative;
}
.width-HM .con-01 .title-area h4{
	padding-top:3.8rem;
	background:url('../images/main/with-icon01.png') no-repeat 50% 0/ auto 2.7rem;
}
.width-HM .con-01 .title-area::after {
	content: '';
	position:absolute;
	right:-9px;
	top:50%;
	display: block;
	width: 18px;
	height: 18px;
	background:#a00025;
	margin:-9px 0 0 0;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	transform: rotate(-135deg);
	vertical-align:middle;
	z-index:100;
}
.width-HM .con-01 .story-list{
	width:50%;
	padding:3rem 3.5rem;
	background:url('../images/main/story-bg.gif') repeat 0 0;
}
.width-HM .con-01 .story-list dl dt{
	font-size:1.4rem;
	color:#000;
	font-weight:400;
	line-height:1.4;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.width-HM .con-01 .story-list dl dd{
	font-size:1.1rem;
	padding-top:1.5rem;
	margin-top:1.5rem;
	border-top:1px solid rgba(0, 0, 0, 0.15);
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* ÇöÀ彺ÄÉÄ¡ */
.width-HM .con-04 .title-area{
	background:#282828;
	position:relative;
}
.width-HM .con-04 .title-area h4{
	padding-top:3.8rem;
	background:url('../images/main/with-icon04.png') no-repeat 50% 0/ auto 2.7rem;
}
.width-HM .con-04 .title-area::after {
	content: '';
	position:absolute;
	left:-9px;
	top:50%;
	display: block;
	width: 18px;
	height: 18px;
	background:#282828;
	margin:-9px 0 0 0;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	transform: rotate(-135deg);
	vertical-align:middle;
	z-index:100;
}
.width-HM .con-04 .gallery-list{
	width:50%;
}
.width-HM .con-04 .gallery-list div{
	height:100%;
}
/* ¼Ò¼È&¶óÀ̺ê / ºê·Î¼Å */
.width-HM .con-wrap.con-02 h4,
.width-HM .con-wrap.con-03 h4{
	padding-top:5rem;
	background:url('../images/main/with-icon02.png') no-repeat 50% 0/ auto 3.2rem;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out; 
}
.width-HM .con-wrap.con-02 a:hover h4,
.width-HM .con-wrap.con-03 a:hover h4{
	margin-top:-1.5rem;
}
.width-HM .con-02 > div{
	background:#c05f5f;
}
.width-HM .con-03 > div{
	background:#5d4e4e;
}
.width-HM .con-wrap.con-03 h4{
	background-image:url('../images/main/with-icon03.png');
}


/* È«º¸¿µ»ó */
.width-HM .con-05{
	background:#000;
	overflow:hidden;
}
.width-HM .con-05 > div{
	background:url('../images/main/movie-bg.jpg') no-repeat 50%/ cover;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
	-ms-transition:all 0.3s;
	transition:all 0.3s;
}
.width-HM .con-05 > div:hover{
	transform: scale(1.1);
	opacity:0.7;
}
.width-HM .con-05 h4{
	padding-bottom:4.5rem;
	background:url('../images/main/with-icon05.png') no-repeat 50% 100%/ auto 3.5rem;
}

/* slick css */
.width-HM .slick-dotted.slick-slider {
    margin-bottom: 0;
}
.width-HM .slick-dots{
	right:100%;
	padding:0 30px;
	z-index:100;
	bottom:25px;
	text-align:right;
}
.width-HM .con-04 .slick-dots{
	right:-100%;
	text-align:left;
}
.width-HM .slick-dots li {
    width: 10px !important;
    height: 10px !important;
	margin:0 3px !important;
}
.width-HM .slick-dots li button::before {
    width: 10px !important;
    height: 10px !important;
	border: 2px solid rgba(255, 255, 255, 0.5);
}

@media (min-width: 992px) {
	.main-con03{
		padding:8rem 0 9rem;
		position:relative;
	}
}

@media (max-width: 1199px) {
	.width-HM .con-wrap h4{
		font-size:1.2rem;
	}
	.width-HM .con-wrap .btn{
		margin-top:0.5rem;
		padding:0.15rem 2rem;
		font-weight:500;
		font-size:0.85rem;
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out; 
	}
	/* HM ÄíÅ· ½ºÅ丮 */
	.width-HM .con-01 .title-area h4{
		padding-top:3rem;
		background-size:auto 2rem;
	}
	.width-HM .con-01 .title-area::after {
		right:-6px;
		top:50%;
		width: 12px;
		height: 12px;
		margin:-6px 0 0 0;
	}
	.width-HM .con-01 .story-list{
		padding:1.5rem 2rem;
		background:url('../images/main/story-bg.gif') repeat 0 0;
	}
	.width-HM .con-01 .story-list dl dt{
		font-size:1.1rem;
	}
	.width-HM .con-01 .story-list dl dd{
		font-size:0.95rem;
		line-height:1.5;
		padding-top:1rem;
		margin-top:1rem;
		-webkit-line-clamp: 4;
	}

	/* ÇöÀ彺ÄÉÄ¡ */
	.width-HM .con-04 .title-area{
		background:#282828;
		position:relative;
	}
	.width-HM .con-04 .title-area h4{
		padding-top:3rem;
		background-size:auto 2rem;
	}
	.width-HM .con-04 .title-area::after {
		left:-6px;
		top:50%;
		width: 12px;
		height: 12px;
		margin:-6px 0 0 0;
	}
	.width-HM .con-04 .gallery-list{
		width:50%;
	}
	.width-HM .con-04 .gallery-list div{
		height:100%;
	}

	/* ¼Ò¼È&¶óÀ̺ê / ºê·Î¼Å */
	.width-HM .con-wrap.con-02 h4,
	.width-HM .con-wrap.con-03 h4{
		padding-top:4.5rem;
		background-size:auto 2.9rem;
	}

	/* È«º¸¿µ»ó */
	.width-HM .con-05 h4{
		padding-bottom:3.7rem;
		background-size:auto 3rem;
	}

	/* slick css */
	.width-HM .slick-dots{
		padding:0 1rem;
		bottom:1rem;
	}
}

/*------------------------------------
  main-con04
------------------------------------*/
.main-con04{
	background:#f4f4f4;
	padding:4rem 0;
}
.main-con04 ul li{
	margin:0.5rem 0;
}
.main-con04 .btn-more{
	height:1.1rem;
	vertical-align:top;
}
.main-con04 .board h2{
	font-size:1.15rem;
	font-weight:normal;
}
.main-con04 .board > div{
	height:100%;
	background:#fff;
	border:1px solid #e5e5e5;
}
.main-con04 .board .board-title{
	position:relative;
	border-bottom:1px solid #e5e5e5;
	padding:1rem 1.5rem;
}
.main-con04 .board .board-title h3{
	color:#222;
	font-size:1.15rem;
	font-weight:700;
	margin:0;
}
.main-con04 .board .board-con{
	position:relative;
	padding:1rem 1.5rem;
}
.main-con04 .board .board-con a{
	display:block;
	font-size:1rem;
}
.main-con04 .board .board-con span.data{
	display:block;
	font-size:0.9rem;
	color:#999;
	margin:1rem 0 0.5rem;
}
.main-con04 .slick-prev, 
.main-con04 .slick-next {
    width: 2rem  !important;
    height: 2rem  !important;
	border:1px solid #e5e5e5;
	top:70% !important;
	z-index:1000  !important;
}
.main-con04 .slick-prev{
	left:auto;
	right:calc(3.5rem - 1px);
}
.main-con04 .slick-next{
	left:auto;
	right:1.5rem;
}
.main-con04 .slick-prev::before, .slick-next::before {
	content:'' !important;
	display:block !important;
	width:100% !important;
	height:100% !important;
	opacity: 1  !important;
}
.main-con04 .slick-prev::before{
	background:#fff url('../images/main/pre-arrow.png') no-repeat 50%/ auto 55%;
}
.main-con04 .slick-next::before{
	background:#fff url('../images/main/next-arrow.png') no-repeat 50%/ auto 55%;
}
.main-con04 .banner a{
	background:#fff;
	border:1px solid #e5e5e5;
	padding:2rem 1.5rem; 
	color:#222;
	font-size:1.15rem;
	font-weight:500;
	background:#fff url('../images/main/btn-more.png') no-repeat calc(100% - 1.5rem) 50%/ 1.1rem;
}

@media (min-width: 1200px) {
	.main-con04{
		padding:7rem 0 8rem;
	}
	.main-con04 .btn-more{
		height:1.38rem;
	}
	.main-con04 li.board{
		-ms-flex: 0 0 38%;
		flex: 0 0 38%;
		max-width: 38%;
	}
	.main-con04 li.bannern{
		-ms-flex: 0 0 24%;
		flex: 0 0 24%
		max-width: 24%;
	}
	.main-con04 .board .board-title{
		padding:1.2rem 2rem;
	}
	.main-con04 .board .board-title h3{
		font-size:1.5rem;
	}
	.main-con04 .board .board-con{
		padding:1.5rem 2rem;
	}
	.main-con04 .board .board-con a{
		font-size:1.15rem;
		height:4rem;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.main-con04 .board .board-con span.data{
		font-size:1.05rem;
		margin:1rem 0;
	}
	.main-con04 .slick-prev, 
	.main-con04 .slick-next {
		width: 2.5rem  !important;
		height: 2.5rem  !important;
		border:1px solid #e5e5e5;
		top:70% !important;
		z-index:1000  !important;
	}
	.main-con04 .slick-prev{
		left:auto;
		right:calc(4.5rem - 1px);
	}
	.main-con04 .slick-next{
		left:auto;
		right:2rem;
	}
	.main-con04 .banner a{
		padding:2.5rem 2rem; 
		font-size:1.5rem;
		background-size:1.38rem;
		background-position:calc(100% - 2rem) 50%
	}
}