@charset "UTF-8";

/* ------------------------------
	scroll-down
------------------------------ */

@media screen and (min-width: 751px), print  {
	.scroll-down {
		display: block;
		position: absolute;
		padding-top: 79px;
		text-align:center;
		bottom: 5%;
		left: 50%;
		margin: 0 0 0 -61px;
		z-index: 5;
		width: 130px;
	}
}
@media screen and (max-width:750px){
	.scroll-down {
		display: block;
		position: absolute;
		padding-top: 79px;
		text-align:center;
		bottom: 5%;
		left: 50%;
		margin: 0 0 0 -44px;
		z-index: 5;
	}
}
.arrow-down {
    display: block;
    margin: 0 auto;
    width: 10px;
    height: 20px;
}
.arrow-down:after {
    content: '';
    display: block;
    margin: 0;
    padding: 0;
    width: 8px;
    height: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    behavior: url(-ms-transform.htc);
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}
.sec .arrow-down:after {
    border-top: 1px solid #333;
    border-right: 1px solid #333;
}
.scroll-down a {	
	color: #fff!important;
}
.sec .scroll-down a {	
	color: #333!important;
}
.scroll-down a:hover {
	color: #ccc!important;
}
.scroll-title {
	display: block;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: .1em;
	color: #fff;
}
.sec .scroll-title {
	color: #333;
}
.scroll-down::before {
    -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;    
    -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;    
    -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;    
    animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    
    position: absolute;
    top: 28px;
    left: 50%;
    margin-left: -1px;
    width: 1px;
    height: 60px;
    background: #fff;
    content: ' ';
}
.sec.scroll-down::before {
    background: #333;
}
@media screen and (max-width:750px){
	.arrow-down:after {
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
	}
	.scroll-title {
		color: #fff;
	}
	.scroll-down::before {
    	background: #fff;
	}
	.sec .arrow-down:after {
		border-top: 1px solid #333;
		border-right: 1px solid #333;
	}
	.sec .scroll-title {
		color: #333;
	}
	.sec .scroll-down::before {
    	background: #333;
	}
}
@-webkit-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-moz-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-o-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}

/* ------------------------------
	full
------------------------------ */

.full {
	background-color: #f5d655;	
}

@media screen and (min-width: 751px), print  {
	.full {
		position: relative;
		width: 100%;
		min-height: 100vh;
		display: flex;
		overflow: hidden;
	}
	.full .slideShow {
		position: absolute;
		width: 100%;
		min-height: 100vh;
		top: 0;
		left: 0;
		z-index: 1;
		background: url("../images/bg_hero@2x.webp") no-repeat center center;
		background-size: cover;
	}
	
	.full h1 {
		position: absolute;
		width: 100%;
		min-height: 100vh;
		z-index: 3;
		text-indent: -9999px;		
		display: block;
		text-align:center;
		top: 50%;
		left: 50%;
		margin: -181px 0 0 -235px;
		z-index: 5;
		width: 470px;
		background: url("../common/images/logo_set.svg") no-repeat;
		background-position: top center;
		background-size: 470px 362px;
	}
	.full p {
		position: absolute;
		width: 100%;
		min-height: 100vh;
		z-index: 2;
		text-indent: -9999px;		
		display: block;
		text-align:center;
		top: 50%;
		left: 50%;
		margin: -280px 0 0 -300px;
		z-index: 5;
		width: 120px;
		background: url("../common/images/logo_symbol.svg") no-repeat;
		background-position: top center;
		background-size: 120px auto;
	}
	
} @media screen and (max-width: 750px) {
	.full {
		width: 100%;
		min-height: 100vh;
	}
	.full .slideShow {
		position: absolute;
		width: 100%;
		min-height: 100vh;
		top: 0;
		left: 0;
		z-index: 1;
		background: url("../images/bg_hero@0.5x.webp") no-repeat center center;
		background-size: auto 130%;
	}
	
	.full h1 {
		position: absolute;
		width: 100%;
		min-height: 50vh;
		z-index: 3;
		text-indent: -9999px;		
		display: block;
		text-align:center;
		top: 50%;
		left: 50%;
		margin: -115px 0 0 -150px;
		z-index: 5;
		width: 300px;
		background: url("../common/images/logo_set.svg") no-repeat;
		background-position: top center;
		background-size: 300px auto;
	}
	.full p {
		position: absolute;
		width: 100%;
		min-height: 20vh;
		z-index: 2;
		text-indent: -9999px;		
		display: block;
		text-align:center;
		top: 50%;
		left: 50%;
		margin: -160px 0 0 -180px;
		z-index: 5;
		width: 60px;
		background: url("../common/images/logo_symbol.svg") no-repeat;
		background-position: top center;
		background-size: 60px auto;
	}
}


/* ------------------------------
	sec-message
------------------------------ */

.sec-message {
	position: relative;
	background-color: #020101;	
	color: #fff;
	padding-bottom: 100px;
}
@media screen and (min-width: 751px){
	.sec-message {
		background-image:
			url("../images/bg_message_front@2x.webp"),
			url("../images/bg_message_back@2x.webp");
		background-repeat:
			no-repeat,
			no-repeat;
		background-position:
			top center,
			bottom center;
		background-size:
			cover,
			cover;
	}
	.sec-message h2 {
		margin: 8em 0 2em 0;
	}
}

@media screen and (max-width:750px){
	.sec-message {		
		background-image:
			url("../images/bg_message_front@0.5x.webp"),
			url("../images/bg_message_back@0.5x.webp");
		background-repeat:
			no-repeat,
			no-repeat;
		background-position:
			top center,
			bottom center;
		background-size:
			contain,
			contain;
	}
	.sec-message h2 {
		margin: 8em 0 1em 0;
	}
}

/* ------------------------------
	sec_business
------------------------------ */

.sec_business {
	position: relative;
	background: url("../images/bg_business@2x.webp") no-repeat top center;
	background-size: 100% auto;	
	padding-bottom: 100px;
}
.sec_business dl dt {
	font-weight: bold;
	border-bottom: 1px solid #666;
	margin-bottom: 0.4em;
	padding-bottom: 0.5em;
}
.sec_business dl dd {
	margin-bottom: 0.3em;
}
.sec_business h4 {
	font-size: 26px;
	border: 1px solid #666;
}
.sec_business h4 small {
	margin-top: 1em;
	font-size: 16px;
}
.sec_business .wrapper_works {
	position: relative;
}
.sec_business .wrapper_works .box_works {
	border: 1px solid #666;
}

@media screen and (min-width: 751px){
	.sec_business {
	}
	.sec_business h4 {
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		padding: 1.5em 0.5em;
	}
	.sec_business .wrapper_works {
		margin-bottom: 10em;
	}
	.sec_business .wrapper_works .box_works {
		padding: 2em;
		width: 70%;
		margin: 3em auto 0.5em auto;
	}
	.sec_business .wrapper_works p.item_creative {
		text-indent: -9999px;
		position: absolute;
		display: block;
		top: -10%;
		right: 82%;
		z-index: 100;
		width: 318px;
		height: 296px;
		background: url("../images/img_creative@2x.webp") no-repeat center center;
		background-size: 318px auto;
	}	
	.sec_business .wrapper_works p.item_badge {
		text-indent: -9999px;
		position: absolute;
		display: block;
		top: 60%;
		right: -5%;
		z-index: 100;
		width: 260px;
		height: 199px;
		background: url("../images/img_badge@2x.webp") no-repeat center center;
		background-size: 260px auto;
	}
}

@media screen and (max-width:750px){
	.sec_business {
	}
	.sec_business .flex h3 {
		padding-bottom: 1em;
	}
	.sec_business h4 {
		text-align: center;
		padding: 0.2em 0;
		margin-bottom: 1em;
		font-size: 17px;
	}
	.sec_business h4 small {
		margin-left: 1em;
	}
	.sec_business .wrapper_works {
		margin-bottom: 20em;
	}
	.sec_business .wrapper_works .box_works {
		padding: 1.5em;
		margin-bottom: 0.5em;
	}
	.sec_business .wrapper_works p.item_creative {
		text-indent: -9999px;
		position: absolute;
		display: block;
		top: 110%;
		left: 0%;
		z-index: 100;
		width: 240px;
		height: 223px;
		background: url("../images/img_creative@2x.webp") no-repeat center center;
		background-size: 240px auto;
	}	
	.sec_business .wrapper_works p.item_badge {
		text-indent: -9999px;
		position: absolute;
		display: block;
		top: 110%;
		right: 0%;
		z-index: 100;
		width: 200px;
		height: 153px;
		background: url("../images/img_badge@2x.webp") no-repeat center center;
		background-size: 200px auto;
	}
}

/* ------------------------------
	sec_info
------------------------------ */

.sec_info {
}
.sec_info .box_info {
	margin: 6em 0 0 0;
}

@media screen and (min-width: 751px){
	.sec_info {
	}
	.sec_info .heading-area {
		background: url("../images/bg_info@2x.webp") no-repeat top center;
		background-size: cover;
		padding: 6% 0 0 0;
	}
	.sec_info .heading-area h2 {
		padding-bottom: 35%;
	}
	.sec_info .heading-area .flex {
		width: 600px;
		margin-left: auto;
		line-height: 1.6;
		justify-content: space-between;
		padding: 20px 20px 0 30px;
	}
	.sec_info .box_info dl {
		border-bottom: 1px solid #666;
		margin: 0 0 0.8em 0;
		padding: 0 0 0.8em 0;
		display: flex;	
	}
	.sec_info .box_info dl dt {
		flex-basis: 20%;
		background-color: #333;
		color: #fff;
		text-align: center;
		margin: 0.2em 0;
	}
	.sec_info .box_info dl dd {
		padding-left: 3em;
		margin: 0.2em 0;
	}
}

@media screen and (max-width:750px){
	.sec_info {
	}
	.sec_info .heading-area {
		background: url("../images/bg_info@0.5x.webp") no-repeat center center;
		background-size: cover;
		padding: 15% 0 0 0;
	}
	.sec_info .heading-area h2 {
		padding-bottom: 40%;
	}
	.sec_info .heading-area .flex {
		justify-content: space-between;
		padding: 20px 20px 0 30px;
	}	
	.sec_info .box_info dl {
		margin: 0 0 0.2em 0;
		padding: 0 0 0.8em 0;
	}
	.sec_info .box_info dl dt {
		background-color: #333;
		color: #fff;
		text-align: center;
		margin-bottom: 0.5em;
	}
	.sec_info .box_info dl dd {
	}
}

/* ------------------------------
	sec_contact
------------------------------ */

.sec_sdgs {
	
}

@media screen and (min-width: 751px){
	.sec_contact {
	}
	.box_sdgs {
		margin-bottom: 6em;
		display: flex;
	}
}

@media screen and (max-width:750px){
	.sec_contact {
	}
	.box_sdgs {
		margin-bottom: 6em;
	}
}


/* ------------------------------
	sec_sns
------------------------------ */

.sec_sns {
	margin-bottom: 6em;	
}
.sec_sns .box_sns {
	display: flex;
	text-align: center;
	margin-bottom: 6em;
	width: 18em;
	margin: 0 auto;	
	overflow: hidden;
}
.sec_sns .box_sns li a img {
	display: block;
	width: 4em;
	height: auto;
	margin: 0 1em;
}

@media screen and (min-width: 751px){
	.sec_sns {
	}
}

@media screen and (max-width:750px){
	.sec_sns {
	}	
}