/*
----------------------------------------
top
----------------------------------------
*/

#top .main {
	height: 100vh;
	max-height: 1000px;
	padding-top: 19.8vw;
	color: #fff;
	background: url( ../img/top/2x/main-img.png ) center center / cover no-repeat;
	/*
	background: -moz-linear-gradient( to right, #9dc419, #0bb84a );
	background: -webkit-linear-gradient( to right, #9dc419, #0bb84a );
	background: linear-gradient( to right, #9dc419, #0bb84a );
	 */
	border-radius: 50% / 0 0 25vw 25vw;
	overflow: hidden;
	position: relative;
	z-index: 99;
}

#top .main::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: -moz-linear-gradient( to right, #9dc419, #0bb84a );
	background: -webkit-linear-gradient( to right, #9dc419, #0bb84a );
	background: linear-gradient( to right, #9dc419, #0bb84a );
	border-radius: 50% / 0 0 25vw 25vw;
	opacity: .5;
	z-index: 1;
}

#top .main .mov-ttl {
	position: relative;
	z-index: 99;
}

#top .main h2 {
	font-style: italic;
	line-height: 1.4;
	white-space: nowrap;
}

#top .main .en {
	font-size: 5.2rem;
	transform: scale( .9, 1 );
}

#top .main .jp {
	font-size: 10rem;
	font-weight: 500;
	letter-spacing: 4px;
	margin-bottom: 45px;
	padding-right: 20px;
}

#top .main .smile img {
	width: 480px;
}

/*
#top .main .mov-wrap {
	position: relative;
	z-index: 1;
}
*/

/* youtube */

#loading {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}

/* jQueryで付与されたdisappearクラスがついたらロゴエリアを非表示 */

#loading.disappear {
	 display: none;   
}

/* youtube設定 */

#youtube-area {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	opacity: 0;    
	z-index: -1;
}

/* jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示 */

#youtube-area.appear {
	animation: fade 1s ease-in-out .5s 1 normal forwards;
}

#youtube {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 177.77777778vh; /* 16:9 の幅 → 16 ÷ 9＝ 177.77% */
	height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
	min-height: 100%;
	min-width: 100%;
}

#fix-bnr {
	position: fixed;
	right: 0;
	bottom: 40px;
	z-index: 9999;
	transition: all .2s;
}

#fix-bnr.hide {
	opacity: 0;
	z-index: -1;
}

#fix-bnr a {
	display: block;
	background: #328BCC;
	color: #fff;
	line-height: 1.6;
	box-shadow: 0 0 20px rgba( 0, 0, 0, .1 );
}

#fix-bnr figure {
	line-height: .5;
	position: relative;
}

#fix-bnr .txt {
	display: inline-block;
	font-weight: 500;
	padding: 1px 30px 2px;
	background: url( ../img/common/2x/arrow-link-wh.png ) right 5px center / 15px no-repeat;
	transition: all .2s;
}

/* slide-box */

.slide-box {
	padding: 4rem 0 1rem;
}

.slide-box .slide-bnr {
	opacity: 1 !important;
}

.slide-box .slide-bnr a {
	display: block;
	line-height: .5;
	margin: 0 10px;
	text-align: center;
	border-radius: 10px;
}

.slide-box .slide-bnr a img {
	width: 100%;
	transition: all .2s;
}

#contents .slide-box .slick-dots {
	bottom: -50px;
}

/* news-box */

.news-box {
	position: relative;
	padding-bottom: 90px;
}

.news-box .sns li {
	line-height: .5;
	margin-right: 10px;
}

.news-box .sns li a {
	display: inline-block;
}

.news-box .ttl {
	align-items: center;
	text-align: left;
	letter-spacing: 1px;
	margin: 40px 0 30px;
}

.news-box .ttl h2 {
	margin-right: auto;
	line-height: 1.6;
}

.news-box .ttl .en {
	font-size: 1.8rem;
	letter-spacing: 3px;
	color: #328BCC;
}

.news-box .ttl .jp {
	font-size: 5rem;
	font-weight: 500;
}

.news-box .ttl .btn-01 {
	margin-top: 30px;
}

.news-box .news {
	width: calc( ( 100% - 40px ) / 2 );
	margin-bottom: 40px;
}

.news-box .news:nth-child( odd ) {
	margin-right: 40px;
}

.news-box .news a {
	display: block;
	position: relative;
}

.news-box .news .flex {
	padding: 0 2px;
	position: relative;
	z-index: 99;
}

.news-box .news .thumb {
	width: 150px;
	height: 150px;
	line-height: .5;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
}

.news-box .news .thumb img {
	width: 100%;
	height: 100%;
	border-radius: 8px;
}

.news-box .news .txt {
	width: calc( 100% - 150px );
	padding-left: 30px;
}

.news-box .news .cat {
	margin-bottom: 4px;
	line-height: 1.5;
}

.news-box .news .cat span {
	display: inline-block;
	font-size: 1.4rem;
	font-weight: 500;
	color: #fff;
	background: #328BCC;
	margin: 0 8px 8px 0;
	padding: 4.5px 15px;
	border-radius: 15px;
}

.news-box .news h3 {
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.8;
	margin-bottom: 10px;
	transition: all .2s;
}

.news-box .news .date {
	font-size: 1.4rem;
	font-weight: 333;
	color: #666;
	padding-left: 26px;
	background: url( ../img/common/2x/icon-date.png ) left center / 16px no-repeat;
}

.news-box .puzzle > img {
	position: absolute;
	width: 17.5vw;
	z-index: -1;
}

.news-box .puzzle > img:nth-child( 1 ) {
	left: -1vw;
	top: -20px;
	opacity: 0;
	transform: translate( -50%, 50% ) rotate( -170deg );
	transition: all .6s 1.2s ease-in-out;
}

.news-box.view .puzzle > img:nth-child( 1 ) {
	opacity: 1;
	transform: rotate( -10deg );
}

.news-box .puzzle > img:nth-child( 2 ) {
	width: 9.2vw;
	left: 3vw;
	top: 265px;
	opacity: 0;
	transform: translate( -50%, 50% ) rotate( -105deg );
	transition: all .4s 1.4s ease-in-out;
}

.news-box.view .puzzle > img:nth-child( 2 ) {
	opacity: 1;
	transform: rotate( 15deg );
}

.news-box .puzzle > img:nth-child( 3 ) {
	width: 20.5vw;
	right: -3vw;
	bottom: -110px;
	opacity: 0;
	transform: translate( 50%, 50% ) rotate( 0deg );
	transition: all .6s 1.6s ease-in-out;
}

.news-box.view .puzzle > img:nth-child( 3 ) {
	opacity: 1;
	transform: rotate( 200deg );
}

/* business-box */

.business-box .wrap {
	max-width: 1084px;
}

.business-box .bus-list {
	padding: 120px 0 78px;
}

.business-box .bus-list ul {
	transform: translateX( -6px );
}

.business-box .bus-list .bus {
	opacity: 0;
	transform: translateY( 40px );
	transition: all .4s;
	transition-timing-function: ease-in-out;
}

.business-box .bus-list .bus-01 {
	transition-delay: .8s;
}

.business-box .bus-list .bus-02 {
	transition-delay: 1s;
}

.business-box .bus-list .bus-03 {
	transition-delay: 1.2s;
}

.business-box .bus-list .bus-04 {
	transition-delay: 1.4s;
}

.business-box .bus-list .bus-05 {
	transition-delay: 1.6s;
}

.business-box .bus-list .bus-06 {
	transition-delay: 1.8s;
}

.business-box .view .bus-list .bus {
	opacity: 1 !important;
	transform: none !important;
}

.business-box .bus-list li a {
	-js-display: flex;
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 348px;
	height: 348px;
	color: #fff;
	padding: 0 32px 32px;
	font-size: 1.8rem;
	position: relative;
}

.business-box .bus-list li a > * {
	position: relative;
	z-index: 99;
	width: 100%;
	padding: 0 32px 0 0;
	text-align: center;
}

.business-box .bus-list li a .img-box {
	position: static;
	z-index: 1;
}

.business-box .bus-list li a .img-box > * {
	position: absolute;
	top: 0;
	left: 0;
}

.business-box .bus-list li a .img-box .clip {
	width: 0;
	height: 0;
}

.business-box .bus-list li a .img-box .clip path {
	transform: scale( 0.001436781609195 );
}

.business-box .bus-list li a .img-box .img,
.business-box .bus-list li a .img-box .bg {
	width: 100%;
	height: 100%;
}

.business-box .bus-list li a .img-box .img image {
	width: 100%;
}

.business-box .bus-list li a .img-box .bg rect {
	width: 100%;
	height: 100%;
	opacity: .45;
	fill: #000;
	transition: all .1s;
}

.business-box .bus-list .bus-04 a,
.business-box .bus-list .bus-05 a,
.business-box .bus-list .bus-06 a {
	padding: 32px 32px 0;
}

.business-box .bus-list .bus-01 a {
	/* background: url( ../img/top/2x/business-img-01.png ) center center / 100% no-repeat; */
	transform: translateX( 44px );
}

.business-box .bus-list .bus-02 a {
	/* background: url( ../img/top/2x/business-img-02.png ) center center / 100% no-repeat; */
	transform: translateX( 22px );
}

.business-box .bus-list .bus-03 a {
	/* background: url( ../img/top/2x/business-img-03.png ) center center / 100% no-repeat; */
}

.business-box .bus-list .bus-04 a {
	/* background: url( ../img/top/2x/business-img-04.png ) center center / 100% no-repeat; */
	transform: translate( 44px, -54px );
}

.business-box .bus-list .bus-05 a {
	/* background: url( ../img/top/2x/business-img-05.png ) center center / 100% no-repeat; */
	transform: translate( 22px, -54px );
}

.business-box .bus-list .bus-06 a {
	/* background: url( ../img/top/2x/business-img-06.png ) center center / 100% no-repeat; */
	transform: translateY( -54px );
}

.business-box .bus-list li a .copy {
	line-height: 1.5;
	letter-spacing: 1px;
	justify-content: center;
	align-items: center;
}

.business-box .bus-list li a .ttl {
	font-size: 3rem;
	line-height: 1.2;
	font-weight: 500;
	margin: 10px 0 25px;
	justify-content: center;
	align-items: center;
}

.business-box .bus-list li a .ttl.line-02 {
	font-size: 2.8rem;
}

.business-box .bus-list a.ttl {
	pointer-events: none;
}

.business-box .bus-list li a.ttl .ttl.line-02 {
	margin-bottom: 56px;
}

/* works-box */

.works-box .block-02 > a {
	display: block;
	color: #fff;
}

.works-box .block-02 .wrap {
	text-align: right;
}

.works-box .block-02 .box {
	text-align: left;
	width: 500px;
	max-width: 50%;
}

.works-box .block-02 .box .sub {
	color: #fff;
	line-height: 1.8;
}

.works-box .block-02 .box .more span {
	color: #fff;
	border: solid 2px #fff;
}

/* company-box */

.company-box {
	padding: 150px 0;
	position: relative;
}

.company-box .puzzle > img {
	position: absolute;
	z-index: -1;
}

.company-box .puzzle > img:nth-child( 1 ) {
	width: 14.2vw;
	left: .5vw;
	top: 40px;
	opacity: 0;
	transform: translate( -50%, 50% ) rotate( -145deg );
	transition: all .6s 1.2s ease-in-out;
}

.company-box.view .puzzle > img:nth-child( 1 ) {
	opacity: 1;
	transform: rotate( 15deg );
}

.company-box .puzzle > img:nth-child( 2 ) {
	width: 8.8vw;
	left: 8.2vw;
	top: 140px;
	opacity: 0;
	transform: translate( -50%, 50% ) rotate( -145deg );
	transition: all .4s 1.4s ease-in-out;
}

.company-box.view .puzzle > img:nth-child( 2 ) {
	opacity: 1;
	transform: rotate( -25deg );
}

.company-box .block-01 > .en {
	right: auto;
	left: 5px;
}

.company-box .youtube-wrap {
	margin: 70px 0 35px;
}

.company-box .youtube-wrap .wrap {
	max-width: 1350px;
	padding-bottom: 50px;
	position: relative;
}

.company-box .youtube-wrap .wrap::after {
	content: '';
	background: #fff;
	position: absolute;
	top: 90px;
	right: 170px;
	bottom: 0;
	left: 170px;
	background: #fff;
	z-index: -1;
}

.company-box .youtube-wrap .flex {
	align-items: center;
}

.company-box .youtube-wrap .img {
	width: 520px;
}

.company-box .youtube-wrap .txt {
	width: calc( 100% - 520px );
	padding: 10px 0 0 60px;
}

.company-box .youtube-wrap .box {
	width: 505px;
	max-width: 100%;
	font-size: 1.6rem;
}

.company-box .youtube-wrap h2 {
	margin: 15px 0;
}

.company-box .youtube-wrap .read {
	letter-spacing: 1.5px;
	line-height: 2.3;
	margin-bottom: 20px;
}

.company-box .youtube-wrap .link-01 {
	text-align: right;
	padding: 0 10px;
}

.company-box .store-link {
	width: calc( ( 100% - 30px ) / 2 );
}

.company-box .store-link:nth-child( odd ) {
	margin-right: 30px;
}

.company-box .store-link .flex {
	align-items: center;
	cursor: pointer;
}

.company-box .store-link .flex .store-logo {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	padding: 50px 15px 0;
	box-shadow: 0 0 10px rgba( 0, 0, 0, .1 );
}

.company-box .store-link .flex .txt {
	width: calc( 100% - 120px );
	padding-left: 20px;
	font-size: 1.6rem;
}

.company-box .store-link h3 {
	line-height: 1.5;
}

.company-box .store-link h3 span {
	display: inline-block;
	font-size: 2.8rem;
	padding-right: 24px;
	background: url( ../img/common/icon-link-02.png ) right center / 14px no-repeat;
}

.company-box .store-link p {
	letter-spacing: .5px;
}

/* sustainability-box */

.sustainability-box .block-01 .box {
	margin:  0 0 0 auto;
}

.sustainability-box .ttl-01 .en {
	margin-left: 10px;
}

.sustainability-box .ttl-01 .jp {
	font-size: 5.4rem;
	margin: 15px 0 20px;
}

.sustainability-box .block-01 > .en {
	right: -30vw;
}

.sustainability-box {
	margin-bottom: 120px;
}

.sustainability-box .bnr-set-01 {
	margin: 120px 0 0;
	position: relative;
	z-index: 99;
}

.sustainability-box .bnr-set-01 .bnr {
	width: calc( ( 100% - 2px ) / 3 );
	margin-right: 1px;
}

.sustainability-box .bnr-set-01 .bnr:nth-child( 3n ) {
	margin-right: 0;
}

.sustainability-box .bnr-set-01 .bnr-01 a::after {
	background: url( ../img/top/2x/sdgs-bg.png ) center center / cover no-repeat;
}

.sustainability-box .bnr-set-01 .bnr-02 a::after {
	background: url( ../img/top/2x/csr-bg.png ) center center / cover no-repeat;
}

.sustainability-box .bnr-set-01 .bnr-03 a::after {
	background: url( ../img/top/2x/diversity-bg.png ) center center / cover no-repeat;
}

/* recruit-box */

.recruit-box {
	padding: 115px 0 110px;
	position: relative;
}

.recruit-box .puzzle > img {
	position: absolute;
	width: 20.5vw;
	z-index: -1;
}

.recruit-box .puzzle > img:nth-child( 1 ) {
	left: 1.6vw;
	top: -10px;
	opacity: 0;
	transform: translate( -50%, 50% ) rotate( -170deg );
	transition: all .6s 1.2s ease-in-out;
}

.recruit-box.view .puzzle > img:nth-child( 1 ) {
	opacity: 1;
	transform: rotate( -10deg );
}

.recruit-box .puzzle > img:nth-child( 2 ) {
	width: 14.2vw;
	left: 16.2vw;
	top: 210px;
	opacity: 0;
	transform: translate( -50%, 50% ) rotate( -195deg );
	transition: all .6s 1.4s ease-in-out;
}

.recruit-box.view .puzzle > img:nth-child( 2 ) {
	opacity: 1;
	transform: rotate( -75deg );
}

.recruit-box .puzzle > img:nth-child( 3 ) {
	width: 18.5vw;
	right: 2.5vw;
	top: 80px;
	opacity: 0;
	transform: translate( 50%, 50% ) rotate( 358deg );
	transition: all .6s 1.8s ease-in-out;
}

.recruit-box.view .puzzle > img:nth-child( 3 ) {
	opacity: 1;
	transform: rotate( 198deg );
}

.recruit-box .puzzle > img:nth-child( 4 ) {
	width: 12vw;
	right: 19vw;
	top: 175px;
	opacity: 0;
	transform: translate( 50%, 50% ) rotate( 248deg );
	transition: all .6s 1.6s ease-in-out;
}

.recruit-box.view .puzzle > img:nth-child( 4 ) {
	opacity: 1;
	transform: rotate( 128deg );
}

.recruit-box .ttl-01 .jp {
	font-size: 5.4rem;
	margin: 12px 0 20px;
}

.recruit-box .rec-list {
	margin-top: 80px;
	margin-right: auto;
	margin-left: auto;
}

.recruit-box .rec-list.rec-01 {
	max-width: 366px;
}

.recruit-box .rec-list.rec-02 {
	max-width: 732px;
}

.recruit-box .rec-list.rec-03 {
	max-width: 1098px;
}

.recruit-box .rec-list .rec {
	width: calc( ( 100% - 3px ) / 4 );
	margin-right: 1px;
}

.recruit-box .rec-list .rec:nth-child( 4n ) {
	margin-right: 0;
}

.recruit-box .rec-list .rec a {
	display: block;
	padding-bottom: 70px;
	position: relative;
}

.recruit-box .rec-list .rec a figure {
	transition: all .2s;
}

.recruit-box .rec-list .rec a img {
	width: 100%;
	height: 35.3vw;
	transition: all .2s;
}

.recruit-box .rec-list .rec .ttl {
	position: absolute;
	right: 20px;
	bottom: 0;
	left: 20px;
	text-align: left;
}

.recruit-box .rec-list .rec h3 {
	font-size: 2.4rem;
	font-weight: 500;
	margin-bottom: 20px;
	line-height: 2.2;
	letter-spacing: 1px;
}

.recruit-box .rec-list .rec h3 .txt {
	background: #fff;
	padding: 7px 12px 8px 14px;
	white-space: nowrap;
	position: relative;
}

.recruit-box .rec-list .rec h3 .txt span {
	position: relative;
	z-index: 99;
	transition: all .2s;
}

.recruit-box .rec-list .rec h3 .txt:nth-oftype( 2 ) span {
	transition-delay: .2s;
}

.recruit-box .rec-list .rec .more-arrow {
	padding-left: 4px;
}


/*
----------------------------------------
1600
----------------------------------------
*/

@media screen and ( max-width: 1600px ) {

	.recruit-box .rec-list .rec h3 {
		font-size: 1.8rem;
	}

	.recruit-box .rec-list .rec h3 .txt {
		padding: 5px 10px 6px 12px;
	}

}


/*
----------------------------------------
1400
----------------------------------------
*/

@media screen and ( max-width: 1400px ) {

	#top .main {
		padding-top: 25vh;
		max-height: 70vw;
	}

	#top .main .en {
		font-size: 4.5rem;
	}

	#top .main .jp {
		font-size: 8rem;
	}

	.news-box .ttl .jp {
		font-size: 4rem;
	}

	.news-box .news .txt {
		padding-left: 20px;
	}

	.news-box .news h3 {
		font-size: 1.6rem;
		line-height: 1.6;
	}

	.business-box .wrap {
		max-width: 880px;
	}

	.business-box .bus-list ul {
		transform: translateX( -3px );
	}

	.business-box .bus-list li a {
		width: 280px;
		height: 280px;
		padding: 0 26px 26px;
		font-size: 1.6rem;
	}

	.business-box .bus-list li a > * {
		padding: 0 26px 0 0;
	}

	.business-box .bus-list .bus-04 a,
	.business-box .bus-list .bus-05 a,
	.business-box .bus-list .bus-06 a {
		padding: 26px 26px 0;
	}

	.business-box .bus-list .bus-01 a {
		transform: translateX( 32px );
	}

	.business-box .bus-list .bus-02 a {
		transform: translateX( 16px );
	}

	.business-box .bus-list .bus-04 a {
		transform: translate( 32px, -42px );
	}

	.business-box .bus-list .bus-05 a {
		transform: translate( 16px, -42px );
	}

	.business-box .bus-list .bus-06 a {
		transform: translateY( -42px );
	}

	.business-box .bus-list li a .ttl {
		font-size: 2.4rem;
		margin-bottom: 15px;
	}

	.business-box .bus-list li a .ttl.line-02 {
		font-size: 2.2rem;
	}

	.business-box .bus-list li a.ttl .ttl.line-02 {
		margin-bottom: 33px;
	}

	.company-box .youtube-wrap .img {
		width: 50%;
	}

	.company-box .youtube-wrap .txt {
		width: 50%;
		padding: 0 0 0 20px;
	}

	.company-box .youtube-wrap .read {
		letter-spacing: 0;
		line-height: 2;
	}

	.sustainability-box .ttl-01 .jp,
	.recruit-box .ttl-01 .jp {
		font-size: 4.2rem;
	}

	.recruit-box .rec-list .rec h3 {
		font-size: 1.4rem;
	}

	.recruit-box .rec-list .rec h3 .txt {
		padding: 4px 10px 5px 12px;
	}

}


/*
----------------------------------------
1200
----------------------------------------
*/

@media screen and ( max-width: 1200px ) {

	#top .main .en {
		font-size: 4rem;
	}

	#top .main .jp {
		font-size: 6rem;
	}

	.news-box .news {
		width: calc( ( 100% - 20px ) / 2 );
	}

	.news-box .news:nth-child( odd ) {
		margin-right: 20px;
	}

	.news-box .news h3 {
		font-size: 1.5rem;
	}

	.business-box .wrap {
		max-width: 700px;
	}

	.business-box .bus-list ul {
		transform: none;
	}

	.business-box .bus-list li a {
		width: 220px;
		height: 220px;
		padding: 0 20px 20px;
		font-size: 1.4rem;
	}

	.business-box .bus-list li a > * {
		padding: 0 20px 0 0;
	}

	.business-box .bus-list li a .ttl {
		font-size: 1.8rem;
		margin-bottom: 10px;
	}

	.business-box .bus-list li a .ttl.line-02 {
		font-size: 1.7rem;
	}

	.business-box .bus-list li a.ttl .ttl.line-02 {
		margin-bottom: 31px;
	}

	.business-box .bus-list .bus-04 a,
	.business-box .bus-list .bus-05 a,
	.business-box .bus-list .bus-06 a {
		padding: 20px 20px 0;
	}

	.business-box .bus-list .bus-01 a {
		transform: translateX( 20px );
	}

	.business-box .bus-list .bus-02 a {
		transform: translateX( 10px );
	}

	.business-box .bus-list .bus-04 a {
		transform: translate( 20px, -30px );
	}

	.business-box .bus-list .bus-05 a {
		transform: translate( 10px, -30px );
	}

	.business-box .bus-list .bus-06 a {
		transform: translateY( -30px );
	}

	.business-box .more-arrow {
		font-size: 1.3rem;
	}

	.business-box .more-arrow::after {
		width: 21px;
		height: 5px;
		margin-left: 5px;
	}

	.sustainability-box .ttl-01 .jp,
	.recruit-box .ttl-01 .jp {
		font-size: 3.2rem;
	}

	.recruit-box .rec-list .rec .ttl {
		right: 10px;
		left: 10px;
	}

	.recruit-box .rec-list .rec h3 {
		font-size: 1.2rem;
	}

	.recruit-box .rec-list .rec h3 .txt {
		padding: 3px 10px 4px 12px;
	}

}


/*
----------------------------------------
1000
----------------------------------------
*/

@media screen and ( max-width: 1000px ) {

	#top .main {
		padding-top: 20vw;
	}

	#top .main .smile img {
		width: 280px;
	}

	.news-box .sns {
		display: none;
	}

	#sp-logo {
		display: block;
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 9999;
	}

	#sp-logo a {
		display: inline-block;
		line-height: .5;
		padding: 9px 0;
	}

	#sp-logo img {
		height: 32px;
	}

	#fix-bnr a {
		width: 220px;
	}

}


/*
----------------------------------------
768
----------------------------------------
*/

@media screen and ( max-width: 768px ) {


	#top .main {
		-js-display: flex;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		align-items: center;
		max-height: 667px;
		height: 90vh;
		border-radius: 50% / 0 0 12.5vw 12.5vw;
	}

	#top .main::before {
		border-radius: 50% / 0 0 12.5vw 12.5vw;
	}

	#top .main .en {
		font-size: 2.6rem;
	}

	#top .main .jp {
		font-size: 5rem;
		line-height: 1.1;
		letter-spacing: 0;
		text-indent: -8px;
		margin: 3px 0 13px;
		padding-right: 0;
	}

	#top .main .smile img {
		width: 240px;
	}

	#fix-bnr {
		display: none;
	}

	.news-box {
		padding-bottom: 25px;
	}

	.news-box .ttl {
		margin: 30px 0 35px;
	}	

	.news-box .ttl h2 {
		line-height: 1.4;
	}

	.news-box .puzzle > img:nth-child( 1 ) {
		width: 40vw;
		top: -28px;
		right: 2vw;
		left: auto;
		transform: rotate( 98deg );
	}

	.news-box .puzzle > img:nth-child( 2 ) {
		width: 20.5vw;
		top: 116px;
		right: 11vw;
		left: auto;
		transform: rotate( -105deg );
	}

	.news-box .puzzle > img:nth-child( 3 ) {
		display: none;
	}

	.news-box .ttl .en {
		font-size: 1.4rem;
	}

	.news-box .ttl .jp {
		font-size: 3rem;
	}

	.news-box .ttl .btn-01 {
		margin-top: 5px;
	}

	.news-list {
		flex-direction: column;
	}

	.news-box .news {
		width: 100%;
		border-bottom: solid 1px #e5e5e5;
		padding-bottom: 19px;
		margin-bottom: 19px;
	}

	.news-box .news:nth-child( odd ) {
		margin-right: 0;
	}

	.news-box .news .flex {
		padding: 0;
	}

	.news-box .news .thumb {
		width: 100px;
		height: 100px;
	}

	.news-box .news .txt {
		width: calc( 100% - 100px );
	}

	.news-box .news .cat {
		margin-bottom: 0;
	}

	.news-box .news .cat span {
		font-size: 1.2rem;
		margin: 0 6px 6px 0;
		padding: 3px 14.5px 4px;
	}

	.news-box .news .date {
		font-size: 1.2rem;
		padding-left: 17px;
		background: url( ../img/common/2x/icon-date.png ) left center / 12px no-repeat;
	}

	.news-box .news h3 {
		font-size: 1.4rem;
		margin-bottom: 2px;
	}

	.news-box .news:nth-of-type( 4 ) {
		display: none;
	}

	.business-box .wrap {
		max-width: 100%;
		padding: 0;
	}

	.business-box .block-01 .read {
		padding: 0 20px;
	}

	.business-box .bus-list {
		overflow: hidden;
		padding: 8vw 0 8.2vw;
	}

	.business-box .bus-list .flex {
		justify-content: center;
		transform: scale( 1.08 );
	}

	.business-box .bus-list li a {
		width: 33vw;
		height: 33vw;
		padding: 1vw 2vw 5vw;
		font-size: 1.4rem;
	}

	.business-box .bus-list li a > * {
		padding: 0 1.5vw 0 0;
	}

	.business-box .bus-list .bus-04 a,
	.business-box .bus-list .bus-05 a,
	.business-box .bus-list .bus-06 a {
		padding: 5vw 2vw 1vw;
	}

	.business-box .bus-list .bus-01 a {
		transform: translateX( 3vw );
	}

	.business-box .bus-list .bus-02 a {
		transform: translateX( 1.5vw );
	}

	.business-box .bus-list .bus-04 a {
		transform: translate( 3vw, -4.5vw );
	}

	.business-box .bus-list .bus-05 a {
		transform: translate( 1.5vw, -4.5vw );
	}

	.business-box .bus-list .bus-06 a {
		transform: translateY( -4.5vw );
	}

	.business-box .bus-list li a .copy {
		font-size: 2vw;
		letter-spacing: 0;
	}

	.business-box .bus-list li a .ttl {
		font-size: 3.4vw;
		line-height: 1.2;
		text-align: center;
		margin: 0;
		min-height: 4rem;
	}

	.business-box .bus-list li a .ttl.line-02 {
		font-size: 3.2vw;
	}

	.business-box .bus-list li a.ttl .ttl.line-02 {
		margin-bottom: 2.16rem;
	}

	.business-box .more-arrow {
		font-size: 2vw;
	}

	.works-box .block-02 .box {
		margin-left: 50%;
		padding: 0 0 0 13px;
	}

	.works-box .block-02 .box .sub {
		line-height: 1.5;
	}

	.company-box {
		padding: 52px 0 56px;
	}

	.company-box .puzzle > img {
		z-index: 1;
	}

	.company-box .puzzle > img:nth-child( 1 ) {
		width: 16vw;
		top: 28px;
		left: 12.5vw;
	}

	.company-box .puzzle > img:nth-child( 2 ) {
		width: 10.5vw;
		left: 21.5vw;
		top: 50px;
	}

	.company-box .youtube-wrap {
		margin: 20px 0 5px;
	}

	.company-box .youtube-wrap .wrap {
		padding-bottom: 25px;
	}

	.company-box .youtube-wrap .flex {
		flex-direction: column;
		padding: 0 20px;
	}

	.company-box .youtube-wrap .img {
		width: 100%;
		text-align: center;
		margin-bottom: 12px;
	}

	.company-box .youtube-wrap .txt {
		width: 100%;
		padding: 0;
	}

	.company-box .youtube-wrap .box {
		width: 100%;
	}

	.company-box .youtube-wrap .txt .ttl {
		text-align: center;
	}

	.company-box .youtube-wrap .wrap::after {
		top: 30px;
		right: 20px;
		left: 20px;
		border-radius: 5px;
	}

	.company-box .youtube-wrap .box {
		font-size: 1.4rem;
	}

	.company-box .youtube-wrap h2 {
		margin: 5px 0;
	}

	.company-box .youtube-wrap .read {
		line-height: 2.2;
	}

	.company-box .youtube-wrap .link-01 {
		padding: 0;
		margin-top: 12px;
	}

	.company-box .store .wrap > .flex {
		flex-direction: column;
	}

	.company-box .store-link {
		width: 100%;
		margin-top: 20px;
	}

	.company-box .store-link:nth-child( odd ) {
		margin-right: 0;
	}

	.company-box .store-link .flex {
		width: 100%;
		padding: 13px 60px 13px 13px;
		border: solid 2px #ebebeb;
		border-radius: 5px;
		background: url( ../img/common/sp/icon-link-02.png ) right 20px center / 21px no-repeat;
	}

	.company-box .store-link .flex .store-logo {
		width: 90px;
		height: auto;
		line-height: .5;
		border-radius: 0;
		padding: 0;
		box-shadow: none;
		
	}

	.company-box .store-link .flex .txt {
		width: calc( 100% - 90px );
		padding-left: 10px;
		font-size: 1.3rem;
		line-height: 1.6;
	}

	.company-box .store-link h3 {
		margin-bottom: 5px;
	}

	.company-box .store-link h3 span {
		font-size: 2rem;
		background: none;
		padding-right: 0;
	}

	.sustainability-box .ttl-01 .jp,
	.recruit-box .ttl-01 .jp {
		font-size: 3rem;
		margin: 5px 0 10px;
	}

	.sustainability-box {
		margin-bottom: 20px;
	}

	.sustainability-box .bnr-set-01 {
		margin: 20px 0 0;
	}

	.sustainability-box .bnr-set-01 .bnr {
		width: 100%;
		margin: 0 0 1px;
	}

	.sustainability-box .bnr-set-01 .bnr-01 a {
		background: url( ../img/top/sp/sdgs-bg-sp.png ) center center / cover no-repeat;
	}

	.sustainability-box .bnr-set-01 .bnr-02 a {
		background: url( ../img/top/sp/csr-bg-sp.png ) center center / cover no-repeat;
	}

	.sustainability-box .bnr-set-01 .bnr-03 a {
		background: url( ../img/top/sp/diversity-bg-sp.png ) center center / cover no-repeat;
	}

	.recruit-box {
		padding: 42px 0 20px;
	}

	.recruit-box .rec-list .rec a img {
		height: 97.8vw;
	}

	.recruit-box .puzzle > img:nth-child( 1 ) {
		width: 22vw;
		left: 4.5vw;
		top: 40px;
	}

	.recruit-box .puzzle > img:nth-child( 2 ) {
		width: 16.5vw;
		left: 21vw;
		top: 90px;
	}

	.recruit-box .puzzle > img:nth-child( 3 ) {
		width: 20vw;
		right: 5.5vw;
		top: 60px;
		transform: rotate( 198deg );
	}

	.recruit-box .puzzle > img:nth-child( 4 ) {
		width: 14vw;
		right: 25vw;
		top: 85px;
		transform: rotate( 128deg );
	}

	.recruit-box .rec-list {
		margin-top: 14px;
	}

	.recruit-box .rec-list .rec {
		opacity: .5;
	}

	.recruit-box .rec-list .rec.slick-current {
		opacity: 1;
	}

	.recruit-box .rec-list .rec a {
		padding-bottom: 95px;
	}

	.recruit-box .rec-list .rec .ttl {
		right: 0;
		left: 0;
	}

	.recruit-box .rec-list .rec h3 {
		font-size: 1.8rem;
		letter-spacing: -.2px;
		margin-bottom: 10px;
		opacity: 0;
	}

	.recruit-box .rec-list .rec.slick-current h3 {
		opacity: 1;
	}

	.recruit-box .rec-list .rec h3 .txt {
		padding: 4px 10px 6px 12px;
	}

	.recruit-box .rec-list .rec .more-arrow {
		padding: 0;
		text-align: center;
	}

}

/*
----------------------------------------
widht 1001px height 900
----------------------------------------
*/

@media screen and ( min-width: 1001px ) and ( max-height: 900px ) {

	#top .main {
		padding-top: 30vh;
	}

}


/*
----------------------------------------
hover
----------------------------------------
*/

@media screen and ( min-width: 769px ) {

	.slide-box .slide-bnr a:hover {
		background: #328BCC;
	}

	.slide-box .slide-bnr a:hover img {
		opacity: .75;
	}

	.news-box .sns li a:hover {
		transform: scale( 1.2 );
	}

	.news-box .news figure::after {
		content: '';
		position: absolute;
		top: 0;
		right: 100%;
		bottom: 0;
		left: 0;
		background: #328BCC;
		opacity: .5;
		transition: all .2s;
	}

	.news-box .news a:hover figure::after {
		right: 0;
	}

	.news-box .news a:hover h3 {
		color: #328BCC;
	}

	.business-box .bus-list li a:hover .img-box .bg rect {
		fill: #328BCC;
	}

	/*
	.business-box .bus-list li a::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0;
		visibility: hidden;
		z-index: 1;
		transition: all .2s;
	}

	.business-box .bus-list li a:hover::after {
		opacity: 1;
		visibility: visible;
	}

	.business-box .bus-list .bus-01 a::after {
		background: url( ../img/top/2x/business-img-01-on.png ) center center / 100% no-repeat;
	}

	.business-box .bus-list .bus-02 a::after {
		background: url( ../img/top/2x/business-img-02-on.png ) center center / 100% no-repeat;
	}

	.business-box .bus-list .bus-03 a::after {
		background: url( ../img/top/2x/business-img-03-on.png ) center center / 100% no-repeat;
	}

	.business-box .bus-list .bus-04 a::after {
		background: url( ../img/top/2x/business-img-04-on.png ) center center / 100% no-repeat;
	}

	.business-box .bus-list .bus-05 a::after {
		background: url( ../img/top/2x/business-img-05-on.png ) center center / 100% no-repeat;
	}

	.business-box .bus-list .bus-06 a::after {
		background: url( ../img/top/2x/business-img-06-on.png ) center center / 100% no-repeat;
	}
	*/

	.business-box .bus-list li a:hover .more-arrow {
		color: #fff;
	}

	.business-box .bus-list li a:hover .more-arrow::after {
		background: url( ../img/common/2x/arrow-02-wh.png ) center center / contain no-repeat;
	}

	.works-box .block-02 > a:hover .box .more span {
		background: #fff;
		color: #328BCC;
	}

	.company-box .store-link .flex:hover {
		opacity: .6;
	}

	.recruit-box .rec-list .rec a:hover figure {
		background: #328BCC;
	}

	.recruit-box .rec-list .rec a:hover img {
		opacity: .8;
	}

	.recruit-box .rec-list .rec h3 .txt::after {
		content: '';
		position: absolute;
		top: 0;
		right: 100%;
		bottom: 0;
		left: 0;
		background: #328BCC;
		transition: all .2s;
	}

	.recruit-box .rec-list .rec h3 .txt:nth-of-type( 2 )::after {
		transition-delay: .2s;
	}

	.recruit-box .rec-list .rec a:hover h3 .txt {
		color: #fff;
	}

	.recruit-box .rec-list .rec a:hover h3 .txt::after {
		right: 0;
	}

	#fix-bnr figure::after {
		content: '';
		position: absolute;
		top: 0;
		right: 100%;
		bottom: 0;
		left: 0;
		background: #328BCC;
		opacity: .5;
		transition: all .2s;
	}

	#fix-bnr a:hover figure::after {
		right: 0;
	}

}