@charset 'UTF-8';
/*===========================================
content
===========================================*/
html{
overflow-x: hidden;
}
.loading #wrap{
position: fixed;
box-sizing: border-box;
overflow: hidden;
height: 0;
padding: 0;
}
.loading.cmp #wrap{
position: static;
height: auto;
overflow: auto;
}
.loading .ready{
position: fixed;
top: 0;
bottom: 0;
width: 100vw;
height: 100%;
z-index: 999;
overflow: hidden;
}
.loading .ready:after,
.loading .ready:before{
transition: transform 1s ease;
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 50%;
margin: auto;
z-index: 1;
}
.loading .ready .bar{
transition: transform 0.3s ease;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
margin: auto;
background-color: #5795ce;
transform: translateX(-100%);
z-index: 2;
}
.loading.cmp .ready .bar{
display: none;
}
.loading .ready .ready_txt{
transition: opacity 0.3s ease, transform 1s ease;
font-family: 'Assistant', sans-serif;
position: absolute;
top: calc(50% - 5rem);
left: 0;
right: 0;
width: 100%;
margin: auto;
font-size: 1.6rem;
color: #333;
text-align: center;
font-weight: bold;
opacity: 0;
z-index: 3;
}
.loading .ready .ready_txt span{
font-size: 3.2rem;
}
.loading .ready .ready_txt{
opacity: 1;
}
.loading.cmp .ready .ready_txt{
opacity: 0;
}
.loading .ready:before{
top: 0;
background-color: #FFF;
}
.loading .ready:after{
bottom: 0;
background: #FFF;
}
.loading.cmp .ready:before{
transform: translateY(-100%);
}
.loading.cmp .ready:after{
transform: translateY(100%);
}

.sg_recruitEntry,
.sg_recruitContact,
#footer{
z-index: 1;
}
#contents {
padding-top: 0 !important;
}
.sp .contents_inner{
padding-top: 60px;
}
.topicpath{
background-color: transparent;
}

.sec{
overflow: hidden;
}
.sec.active{
}
.sec .ttl{
height: calc(100vh - 75px);
}
.minHeader .sec .ttl{
height: calc(100vh - 60px);
}

.sec article{
position: relative;
background-color: #FFF;
z-index: 1;
}
.sec article .inner{
max-width: 950px;
margin: auto;
padding: 0 6rem;
}

.result_ttl{
position: relative;
color: #000;
font-size: 3.2rem;
text-align: center;
}
.result_ttl:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 3px solid #000;
}
.result_ttl span{
display: inline-block;
padding: 0.5em 0;
}

.count_num{
display: inline-block;
white-space: nowrap;
text-align: right;
font-family: 'Assistant', sans-serif;
}

.result{
transition: background 2s ease;
position: relative;
z-index: 1;
}
.result.sec1{
background-color: #0065d7;
}
.result.sec2{
background-color: #f38112;
}
.result.sec3{
background-color: #2ba010;
}

.note{
margin-top: 0.5em;
font-size: 1.6rem;
color: #999;
text-align: center;
}
.sp .note{
font-size: 1.4rem;
}

.sp .sec article .inner{
padding: 0 1.2rem;
}
.sp .result_ttl{
font-size: 2.1rem;
}

/*===========================================
result_nav
===========================================*/
.loading .result_nav{
visibility: hidden;
}
.loading.cmp .result_nav{
visibility: visible;
}
.result_nav{
position: fixed;
right: 0;
top: 0;
bottom: 0;
height: 330px;
margin: auto;
z-index: 9;
}
.result_nav li:nth-of-type(1){
background: url(../images/result_nav_bg01.png) center no-repeat #0065d7;
background-size: 100%;
}
.result_nav li:nth-of-type(2){
background: url(../images/result_nav_bg02.png) center no-repeat #f38112;
background-size: 100%;
}
.result_nav li:nth-of-type(3){
background: url(../images/result_nav_bg03.png) center no-repeat #2ba010;
background-size: 100%;
}
.result_nav li a{
display: flex;
align-items: center;
justify-content: center;
width: 110px;
height: 110px;
font-size: 1.4rem;
color: #FFF;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.sp .result_nav{
position: static;
height: 70px;
}
.sp .result_nav ul{
position: absolute;
top: calc(200vh - 70px);
left: 0;
width: 100%;
display: flex;
height: 70px;
bottom: 0;
z-index: 9;
}
.sp .result_nav.fix ul{
position: fixed;
width: 100%;
top: auto;
bottom: 0;
}
.sp .result_nav.static ul{
position: static;
}
.sp .result_nav li{
width: calc((100%) / 3);
}
.sp .result_nav li a{
width: auto;
height: auto;
padding: 1em 0;
}

/*===========================================
front
===========================================*/
.front {
padding: 122px 0 0 0;
}
.front .topicpath{
position: relative;
z-index: 1;
}
.front .inner{
box-sizing: border-box;
position: fixed;
top: 0;
width: 100%;
height: 100vh;
margin: 0 0 0 0;
padding: 122px 0 0 0;
background: linear-gradient(212deg, #3fcbe8, #9368bd, #3fcbe8, #9368bd, #3fcbe8);
background-color: #53b5e1;
background-size: 1200% 1200%;

transform: translate3d(0, 0, 0);
backface-visibility: hidden;
overflow: hidden;
}
.front .bg{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background:
	url(../images/front_bg01.png) left top no-repeat,
	url(../images/front_bg02.png) left 66% top 60% no-repeat,
	url(../images/front_bg03.png) right bottom -50% no-repeat;
background-size: 34%, 38%, 34%;
}
.front .bg:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(../images/front_bg04.png) center center repeat;
background-size: contain;
}
.loading .front .bg{
visibility: hidden;
}
.loading.cmp .front .bg{
visibility: visible;
}
.front .ttl{
position: absolute;
top: 172px;
bottom: 0;
left: 0;
right: 0;
width: 30%;
max-width: 438px;
height: calc(100% - 172px);
margin: auto;
white-space: nowrap;
text-indent: -9999px;
background: url(../images/front_ttl01.png) center left no-repeat;
background-size: contain;
}
.minHeader .front .ttl{
top: 122px;
height: calc(100% - 122px);
}

.sp .front .bg{
background-position: left -60% top 15%, left 110% top 60%, right -150% bottom -30%;
background-size: 64%, 80%, 75%;
}
.sp .front .bg:before{
background-size: 1000px;
}
.sp .front .ttl{
width: 75%;
background-position: center;
}

/*===========================================
shiraishi
===========================================*/
.shiraishi{
position: relative;
margin-top: calc(100vh - 172px);
height: calc(100vh - 60px);
background: #caeeff;
background: #cbebfb;
overflow: hidden;
z-index: 9;
}
.shiraishi .flex{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
z-index: 1;
}
/*
.shiraishi .flex{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 950px;
margin: 0 auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
	padding-bottom: 50px;
height: 100%;
width: 100%;
z-index: 1;
}
*/
.shiraishi .txt{
margin: auto;
font-size: 3.2rem;
text-align: center;
font-weight: bold;
	text-align: left;
}
.shiraishi .no1{
position: relative;
margin-top: 35px;
}
.shiraishi .no1 .door2{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.shiraishi .no1 img{
margin: auto;
}
.shiraishi .no1:before,
.shiraishi .no1:after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/*
.shiraishi .no1:before{
background: url(../images/shiraishi_img01_2.png) 0 bottom no-repeat;
background-size: contain;
opacity: 0;
}
.shiraishi .no1:after{
background: url(../images/shiraishi_img01_1.png) 0 bottom no-repeat;
background-size: 200%;
}
*/
.shiraishi .shoes_box{
	/*visibility: hidden;*/
	text-align: right;
	height:100%;
	margin-top: 0px;
	position: relative;
	z-index: 100;
}
.shiraishi .shoes_box img{
	display: inline-block;
	height:110%;
	margin-top: -10%;
	width: auto;
	max-width:initial;
}
.shiraishi .kemuri{
	position: absolute;
	bottom: 4%;
	left: -15%;
}
.shiraishi .kemuri img{
	height: 55vh;
	width: auto;
}
.shiraishi .step{
	position: relative;
}
.shiraishi .step li:nth-child(2){
	position: absolute;
	top: 0;
	left: 0;
}
.shiraishi .step li img{
}
/*
.sp .shiraishi{
margin-top: calc(100vh - 122px);
}
*/
.sp .shiraishi .txt{
font-size: 2.1rem;
text-align: center;
padding-top: 20vh !important;
padding-right: 5%;
}
.sp .shiraishi .no1{
width: 56%;
margin-left: auto;
margin-right: auto;
}
.sp .shiraishi .shoes_box{
	/*visibility: visible;*/
}

.sp .shiraishi .shoes_box img{
	height:95%;
	margin-top: -5%;
	margin-left: -55%;
	width: auto;
	max-width:initial;

}
.about .head,
.work .head,
.environment .head{
position: fixed;
height: calc(100vh - 60px);
width: 100%;
background-color: transparent;
overflow: hidden;
top: 60px;
z-index: 0;

transform: translate3d(0, 0, 0);
backface-visibility: hidden;
overflow: hidden;
}

.IE .front .inner,
.IE .about .head,
.IE .work .head,
.IE .environment .head,
html.sp .front .inner,
html.sp .about .head,
html.sp .work .head,
html.sp .environment .head {
position: relative;
}
.IE .about,
.IE .work,
.IE .environment,
html.sp .about,
html.sp .work,
html.sp .environment{
padding-top: 0;
}
.IE .front .inner{
	height: calc(100vh - 166px);
}
.IE.minHeader .front .inner,
html.sp .front .inner{
	height: calc(100vh - 122px);
}
.IE .shiraishi,
html.sp .shiraishi{
margin-top: 0;
}
.IE .front .ttl,
html.sp .front .ttl{
top: 0;
}

/*===========================================
about
===========================================*/
.about{
padding-top: calc(150vh - 60px);
}
.about .head .ttl{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.about .head .ttl > *{
font-size: 6rem;
color: #FFF;
}
.about .head .bg1{
position: absolute;
top: 75px;
left: 60px;
width: 84%;
max-width: 1164px;
z-index: 1;
}
.about .head .bg1 img{
margin-top: 3px;
}
.about .head .bg2{
position: absolute;
right: 60px;
bottom: 75px;
width: 41.5%;
}
.about .head .bg2 img{
float: right;
}
.about .result_ttl:after{
border-color: #36bfec;
}
.sp .about .head .ttl > *{
font-size: 6.5vw;
}
.sp .about .head .bg1{
left: 2.4rem;
width: 150%;
max-width: 480px;
}
.sp .about .head .bg2{
right: -70px;
width: 80%;
max-width: 280px;
}
/*====================
炭酸カルシウムとは
====================*/
.about .art1 .inner{
padding-top: 150px;
padding-bottom: 100px;
}
.about .art1 .col1{
display: table;
margin: 8% auto 0 auto;
}
.about .art1 .col1 > *{
display: table-cell;
vertical-align: middle;
}
.about .art1 .col1{
width: 69%;
}
.about .art1 .col1 .txt1{
padding: 0 8% 0 0;
}
.about .art1 .col2{
position: relative;
margin: 8% auto 0 auto;
padding-top: 55%;
}
.about .art1 .col2 > *{
position: absolute;
}
.about .art1 .col2 .txt1{
top: 0;
left: 0;
width: 33%;
max-width: 312px;
}
.about .art1 .col2 .obj1{
bottom: 10%;
right: 8%;
width: 51.5%;
max-width: 487px;
}
.about .art1 .col2 .obj2{
bottom: 0;
right: 0%;
width: 14%;
max-width: 129px;
}
.about .art1 .col2 .obj3{
bottom: 0;
left: 34%;
width: 21%;
max-width: 196px;
background: url(../images/about_art1_obj01_2.png) 0 bottom no-repeat;
background-size: 200%;
}
.about .art1 .col2 .obj3 img{
opacity: 0
}

.sp .about .art1 .inner{
padding-top: 2em;
padding-bottom: 2em;
}
.sp .about .art1 .col1{
width: 100%;
max-width: 345px;
}
.sp .about .art1 .col1 .txt1{
padding-right: 5%;
width: 60%;
}
.sp .about .art1 .col2 {
padding-top: 500px;
max-width: 345px;
}
.sp .about .art1 .col2 .txt1 {
position: absolute;
left: 0;
right: 0;
width: 194px;
margin: auto;
z-index: 1;
}
.sp .about .art1 .col2 .obj1{
width: 268px;
left: 0;
right: 0;
margin: auto;
}
.sp .about .art1 .col2 .obj2{
width: 55px;
right: 2%;
bottom: 7%;
}
.sp .about .art1 .col2 .obj3{
width: 92px;
left: 2%;
bottom: 7%;
}
/*====================
石灰石の概要
====================*/
.about .art2{
position: relative;
max-width: none;
padding: 0;
}
.about .art2:after{
content: "";
display: block;
position: absolute;
bottom: 0;
height: 32px;
width: 100%;
background: #e6ba7c;
}
.about .art2 div.inner{
max-width: 950px;
margin: auto;
padding: 0 6rem 0 6rem;
}
.about .art2 .bg{
position: relative;
padding: 123px 0 193px 0;
}
.about .art2 .bg:before,
.about .art2 .bg:after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.about .art2 .bg:before{
background: url(../images/about_art2_img01.png) left 40px repeat-x;
}
.about .art2 .bg:after{
background: url(../images/about_art2_img02.png) left 0 bottom 30px repeat-x;
}
.about .art2 .col1{
position: relative;
z-index: 1;
}
.about .art2 .col1:after{
content: "";
display: block;
clear: both;
}
.about .art2 .col1 > *{
box-sizing: border-box;
width: 48%;
padding: 2em;
background-color: #0065d7;
}
.about .art2 .col1 > *:nth-of-type(odd){
float: left;
}
.about .art2 .col1 > *:nth-of-type(even){
float: right;
}
.about .art2 .col1 > * > *{
color: #FFF;
text-align: center;
}
.about .art2 .col1 h4{
position: relative;
font-size: 3.2rem;
}
.about .art2 .col1 h4:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 66px;
height: 3px;
margin: auto;
background-color: #36bfec;
}
.about .art2 .col1 p{
margin-top: 0.5em;
font-size: 2.8rem;
font-weight: bold;
line-height: 1;
}
.about .art2 .col1 p b{
font-size: 5rem;
}
.about .art2 .col1 p span{
font-size: 10rem;
}
.about .art2 .col1 div:nth-of-type(1) p span{
min-width: 1.55em;
}
@media only screen and (max-width: 1070px){
	.about .art2 .col1 p{
	font-size: 2.6vw;
	}
	.about .art2 .col1 p b{
	font-size: 4.8vw;
	}
	.about .art2 .col1 p span{
	font-size: 9.8vw;
	}
	}
.about .art2 .obj1{
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
z-index: 1;
}
.about .art2 .obj1 img{
float: right;
}

.sp .about .art2 .bg{
padding-top: 2em;
padding-bottom: 8em;
}
.sp .about .art2 div.inner{
padding: 0 1.2rem;
}
.sp .about .art2 .col1 > * + *{
margin-top: 1em;
}
.sp .about .art2 .col1 > *:nth-of-type(odd),
.sp .about .art2 .col1 > *:nth-of-type(even){
float: none;
width: auto;
}
.sp .about .art2 .col1 h3{
font-size: 2.1rem;
}
.sp .about .art2 .col1 p{
font-size: 2.1rem;
}
.sp .about .art2 .col1 p b{
font-size: 3rem;
}
.sp .about .art2 .col1 p span{
font-size: 6rem;
}
.sp .about .art2 .bg.visible .obj1 img{
width: 92px;
}
.sp .about .art2 .bg:after {
background-size: 300vw;
background-position-x: 118%;
}
/*====================
石灰石は日本列島全体に分布している
====================*/
.about .art3{
max-width: none;
padding: 170px 0 200px 0;
background: #a3e3ff;
}
.about .art3 .inner{
max-width: 950px;
margin: auto;
text-align: center;
}
.about .art3 .txt1{
position: relative;
display: inline-block;
margin-top: 8%;
padding: 0 48px;
text-align: center;
}
.about .art3 .txt1:before,
.about .art3 .txt1:after{
content: "";
display: block;
position: absolute;
width: 54px;
top: 0;
bottom: 0;
background: url(../images/about_art3_bg01.png) left top no-repeat;
background-size: contain;
}
.about .art3 .txt1:before{
left: 0;
}
.about .art3 .txt1:after{
right: 0;
transform: scale(-1,1);
}
.about .art3 .txt1 p{
font-size: 2.8rem;
font-weight: bold;
}
.about .art3 .txt1 span{
color: #0065d7;
}
.about .art3 .img1{
position: relative;
margin: 0 4.3%;
padding-top: 38.8%;
background: url(../images/about_art3_bg02.png) left top no-repeat;
background-size: contain;
}
.about .art3 .img1 li{
position: absolute;
width: 4.6%;
max-width: 38px;
}
.about .art3 .img1 li:nth-of-type(1){ top: 64%; left: 21%;}
.about .art3 .img1 li:nth-of-type(2){ top: 65%; left: 49.5%;}
.about .art3 .img1 li:nth-of-type(3){ top: 51%; left: 36%;}
.about .art3 .img1 li:nth-of-type(4){ top: 11%; left: 79%;}
.about .art3 .img1 li:nth-of-type(5){ top: 40%; left: 15%;}
.about .art3 .img1 li:nth-of-type(6){ top: 61%; left: 55%;}
.about .art3 .img1 li:nth-of-type(7){ top: 41%; left: 34%;}
.about .art3 .img1 li:nth-of-type(8){ top: 37%; left: 20%;}
.about .art3 .img1 li:nth-of-type(9){ top: 54%; left: 45%;}
.about .art3 .img1 li:nth-of-type(10){ top: 59.5%; left: 39.5%;}
.about .art3 .note li{
position: relative;
margin: 0;
padding-left: 45px;
color: #333;
font-size: 2rem;
text-align: left;
}
.about .art3 .note li:before{
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 33px;
height: 33px;
margin: auto;
}
.about .art3 .note li:nth-of-type(1):before{
background: #49b206;
}
.about .art3 .note li:nth-of-type(2):before{
background: url(../images/about_art3_obj01.png) center no-repeat;
background-size: contain;
}
.about .art3 .note li + li{
margin-top: 1em;
}
.about .art3 .txt2{
display: inline-block;
margin-top: 4%;
font-size: 2.8rem;
}
.about .art3 .txt2 > *{
display: block;
white-space: nowrap;
border-bottom: 2px dotted #FFF;
font-weight: bold;
text-align: center;
}
.about .art3 .txt2 > * > *{
display: block;
font-size: 2.8rem;
}
.about .art3 .txt2 > * > * > span{
display: inline;
border: none;
color: #0065d7;
}
.about .art3 .txt2 strong{
font-size: 5rem;
}
.about .art3 .txt2 b{
font-size: 10rem;
line-height: 1.1;
}

.sp .about .art3{
padding-top: 3em;
padding-bottom: 5em;
}
.sp .about .art3 .txt1{
font-size: 1.6rem;
padding: 0 2em;
}
.sp .about .art3 .txt1:before,
.sp .about .art3 .txt1:after{
width: 2em;
}
.sp .about .art3 .txt1 p{
font-size: 1.6rem;
}
.sp .about .art3 .txt1 span{
font-size: 2.1rem;
}
.sp .about .art3 .img1{
margin-top: 1em;
}
.sp .about .art3 .note li{
margin-top: 0.5em;
padding-left: 25px;
font-size: 1.4rem;
}
.sp .about .art3 .note li:before{
width: 18px;
height: 18px;
}
.sp .about .art3 .txt2{
margin-top: 8%;
}
.sp .about .art3 .txt2 > * > *{
font-size: 1.8rem;
}
.sp .about .art3 .txt2 > * > * > span{
font-size: 2.1rem;
}
.sp .about .art3 .txt2 b{
font-size: 6rem;
}
.sp .about .art3 .txt2 strong{
font-size: 3rem;
}
@media only screen and (max-width: 321px){
.sp .about .art3 .txt2 > * > *{
font-size: 5vw;
}
.sp .about .art3 .txt2 > * > * > span{
font-size: 5.5vw;
}
.sp .about .art3 .txt2 b{
font-size: 15vw;
}
.sp .about .art3 .txt2 strong{
font-size: 6vw;
}
}
/*===========================================
work
===========================================*/
.work {
    padding-top: calc(175vh - 60px);
}
.work .head .ttl{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.work .head .ttl > *{
font-size: 6rem;
color: #FFF;
}
.work .head .bg1{
position: absolute;
top: 75px;
left: 60px;
width: 84%;
max-width: 1164px;
z-index: 1;
}
.work .head .bg1 img + img{
margin-top: 15px;
}
.work .head .bg2{
position: absolute;
right: 60px;
bottom: 75px;
width: 41.5%;
}
.work .head .bg2 img{
float: right;
}
.work .result_ttl:after{
border-color: #fec30f;
}

.sp .work .head .ttl > *{
font-size: 6.5vw;
}
.sp .work .head .bg1 {
left: 2.4rem;
width: 150%;
max-width: 480px;
}
.sp .work .head .bg2 {
right: -30px;
width: 60%;
max-width: 240px;
}

/*====================
炭酸カルシウムを含む主要用途分野
====================*/
.work .art1 .inner{
	padding-bottom: 120px;
}
.work .art1 .col1 ul:after{
content: "";
display: block;
clear: both;
}
.work .art1 .col1 li{
float: left;
width: calc((100% - 1px) / 6);
margin-top: 3em;
font-size: 1.8rem;
font-weight: bold;
text-align: center;
}
.work .art1 .col1 li img{
margin: 0.5em auto 0 auto;
}

.sp .work .art1 .col1 li{
width: calc(100% / 3);
margin-top: 2em;
font-size: 1.6rem;
}
.sp .work .art1 .inner{
padding-bottom: 3em;
}

/*====================
白石グループが1年間で生産する炭酸カルシウムの量
====================*/
.work .art2 .inner{
padding-top: 120px;
}
.work .art2 .work_calcium .txt{
width: 6.5em;
width: 8.5em;
/*padding: 0 1em;*/
font-size: 5rem;
color: #f38112;
font-weight: bold;
/*text-align: right;*/
text-align: left;
}
.work .art2 .work_calcium .txt span{
font-size: 10rem;
}
.work .art2 .col1{
display: table;
width: 88%;
margin: 0 auto;
padding-top: 80px;
padding-bottom: 100px;
overflow: hidden;
}
.work .art2 .col1 > *{
display: table-cell;
vertical-align: middle;
}
.work .art2 .col1 .img1 img{
transform: translateY(5%);
margin: auto;
}
.work .art2 .col1 .img2{
position: relative;
padding-top: 22%;
}
.work .art2 .col1 .img2 img{
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}

.sp .work .art2 .inner{
padding-top: 3em;
}
.sp .work .art2 .col1{
display: block;
width: auto;
/*padding-top: 2em;*/
	padding-top: 0;
padding-bottom: 2em;
}
.sp .work .art2 .col1 > *{
display: block;
}
.sp .work .art2 .col1 > * + *{
margin-top: 1em;
}
.sp .work .art2 .work_calcium .txt{
margin: auto;
font-size: 3rem;
}
.sp .work .art2 .work_calcium .txt span{
font-size: 6rem;
}
.sp .work .art2 .img1{
width: 75%;
margin: auto;
}
.sp .work .art2 .img2{
width: 90%;
margin: auto;
}
.sp .work .art2 .note{
margin-top: 0;
}

/*====================
白石グループの1年間の研究開発費用
====================*/
.work .art3 .inner{
padding-top: 120px;
}
.work .art3 .col1{
display: table;
width: 100%;
padding-top: 80px;
padding-bottom: 100px;
}
.work .art3 .col1 > * {
position: relative;
display: table-cell;
vertical-align: middle;
}
.work .art3 .col1 > *:last-child{
width: 47%;
padding-bottom: 8%;
}
.work .art3 .work_budget .txt{
margin: 0;
font-size: 7rem;
color: #f38112;
font-weight: bold;
letter-spacing: -1px;
white-space: nowrap;
}
.work .art3 .work_budget .txt span{
min-width: 5.2em;
font-size: 8rem;
text-align: right;
}
.work .art3 #hiyou{
width: 80%;
margin-left: 6%;
}
.work .art3 figure{
position: absolute;
right: 0;
bottom: 0;
width: 37%;
max-width: 161px;
}
@media only screen and (max-width: 1070px){
	.work .art3 .work_budget .txt{
	font-size: 6.5vw;
	}
	.work .art3 .work_budget .txt span{
	font-size: 7.2vw;
	}
}

.sp .work .art3 .inner{
padding-top: 3em;
}
.sp .work .art3 .work_budget .txt{
margin-bottom: 0.25em;
font-size: 12vw;
text-align: center;
}
.sp .work .art3 .work_budget .txt span{
font-size: 14vw;
}
.sp .work .art3 .col1{
display: block;
padding-top: 2em;
padding-bottom: 0;
}
.sp .work .art3 .col1 > *{
display: block;
width: auto;
}
.sp .work .art3 .col1 figure{
width: 32%;
max-width: none;
margin-right: 5%;
}
.sp .work .art3 .col1 figure img{
width: 100%;
max-width: none;
}

/*====================
白石グループの海外拠点
====================*/
.work .art4 .col1{
/*margin-top: 80px;*/
margin-top: 30px;

}
.work .art4 .col1 .bg1{
max-width: 1400px;
margin: auto;
}
.work .art4 .col1 .pin{
position: relative;
padding-top: 34%;
background: url(../images/work_art4_img01.png) center center no-repeat;
background-size: contain;
overflow: hidden;
}
.work .art4 .col1 .pin li{
position: absolute;
top: 0%;
left: 0%;
max-width: 19px;
width: 1.36%;
}
.work .art4 .col1 .pin li:nth-of-type(1){ top: 57.6%; left: 45.5%;}
.work .art4 .col1 .pin li:nth-of-type(2){ top: 55%; left: 44.7%;}
.work .art4 .col1 .pin li:nth-of-type(3){ top: 65%; left: 46%;}
.work .art4 .col1 .pin li:nth-of-type(4){ top: 33%; left: 51.5%;}
.work .art4 .col1 .pin li:nth-of-type(5){ top: 37%; left: 48.3%;}
.work .art4 .col1 .pin li:nth-of-type(6){ top: 48.2%; left: 44.9%;}
.work .art4 .col1 .pin li:nth-of-type(7){ top: 50%; left: 45.8%;}
.work .art4 .col1 .pin li:nth-of-type(8){ top: 43%; left: 50.4%;}
.work .art4 .col1 .pin li:nth-of-type(9){ top: 41%; left: 39.4%;}
.work .art4 .col1 .pin li:nth-of-type(10){ top: 26%; left: 25.2%;}
.work .art4 .col1 .pin li:nth-of-type(11){ top: 37%; left: 49.1%;}
.work .art4 .col1 .pin li:nth-of-type(12){ top: 43%; left: 48.1%;}
.work .art4 .col1 .pin li:nth-of-type(13){ top: 53%; left: 50.5%;}
.work .art4 .col1 .pin li:nth-of-type(14){ top: 46%; left: 82.2%;}
.work .art4 .col1 .pin li:nth-of-type(15){ top: 50.6%; left: 46.5%;}
.work .art4 .col1 .pin li:nth-of-type(16){ top: 36%; left: 80%;}
.work .art4 .col1 .txt1{
transform: translateY(-10vw);
}
@media only screen and (min-width: 1070px){
.work .art4 .col1 .txt1{
transform: translateY(-38%);
}
}
.work .art4 .col1 .txt1 ul{
box-sizing: border-box;
max-width: 592px;
margin: auto;
padding: 6em 3em;
text-align: center;
background: url(../images/work_art4_img03.png) center center no-repeat;
background-size: contain;
}
.work .art4 .col1 .txt1 ul:after{
content: "";
display: block;
clear: both;
}
.work .art4 .col1 .txt1 li{
width: 7em;
float: left;
margin-right: 2em;
font-size: 2rem;
text-align: left;
line-height: 2.4;
}
.work .art4 .col1 .txt1 li:nth-of-type(3n){
margin-right: 0;
}
.work .art4 .col1 .txt1 li > *{
display: inline-block;
position: relative;
padding-left: 18px;
color: #000;
font-weight: bold;
white-space: nowrap;
}
.work .art4 .col1 .txt1 li > *:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 12px;
background: url(../images/work_art4_img02.png) center center no-repeat;
background-size: contain;
}

.sp .work .art4 .col1{
margin-top: 14vw;
}
.sp .work .art4 .col1 .pin{
transform: scale(1.5);
}
.sp .work .art4 .col1 .txt1{
margin: 0 2em;
transform: translateY(-4vw);
}
.sp .work .art4 .col1 .txt1 ul{
padding: 2em 2em;
background-size: 100% 100%;
}
.sp .work .art4 .col1 .txt1 li{
width: calc(50% - 1em);
margin-right: 0;
font-size: 1.4rem;
}
.sp .work .art4 .col1 .txt1 li:nth-of-type(even){
float: right;
}

/*====================
白石グループの製品が使われている国の数
====================*/
.work .art5 .inner{
padding-top: 20px;
padding-bottom: 120px;
}
.work .art5 .col1{
display: table;
}
.work .art5 .col1 > *{
display: table-cell;
position: relative;
width: 50%;
vertical-align: middle;
}
.work .art5 .col1 > *:after{
content: "";
display: block;
clear: both;
}
.work .art5 .col1 h2{
	padding: 0 1.5em;
}
.work .art4 .txt2,
.work .art1 .txt2,
.environment .art10 .txt2{
position: relative;
color: #f38112;
font-size: 3.2rem;
line-height: 1;
font-weight: bold;
text-align: center;
}
.environment .art10 .txt2{
	color: #2ba010;
	margin-bottom: 2em;
}
.work .art5 .txt1{
transform: translateY(1.5em);
float: left;
position: relative;
width: 8.5em;
margin-left: 10%;
color: #f38112;
font-size: 3.2rem;
line-height: 1;
font-weight: bold;
text-align: center;
}
.work .art5 .txt1:after{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 8.5em;
height: 8.5em;
margin: auto;
border: 5px solid #f38112;
border-radius: 100vw;
}
.work .art5 .txt1 b,
.work .art4 .txt2 b,
.work .art1 .txt2 b,
.environment .art10 .txt2 b{
display: block;
font-size: 5rem;
line-height: 1;
text-align: center;
}
.work .art5 .txt1 span,
.work .art4 .txt2 span,
.work .art1 .txt2 span,
.environment .art10 .txt2 span{
display: inline-block;
width: 1em;
font-size: 10rem;
}
@media only screen and (max-width: 1070px){
	.work .art1 .txt2,
	.work .art4 .txt2,
	.work .art5 .txt1,
	.environment .art10 .txt2{
	font-size: 3vw;
	}
	.work .art1 .txt2 b,
	.work .art4 .txt2 b,
	.work .art5 .txt1 b,
	.environment .art10 .txt2 b{
	font-size: 4.8vw;
	}
	.work .art1 .txt2 span,
	.work .art4 .txt2 span,
	.work .art5 .txt1 span,
	.environment .art10 .txt2 span{
	font-size: 9.8vw;
	}
}
.work .art5 figure{
float: right;
position: relative;
width: 38%;
clear: both;
text-align: right;
z-index: 1;
}
.work .art5 figure:after{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(../images/work_art5_img01_2.png) left top no-repeat;
background-size: 200%;
}
.work .art5 figure img{
display: inline;
}
.work .art5 .note{
position: absolute;
bottom: 10%;
left: 0;
width: 80%;
text-align: center;
}

.sp .work .art5 .inner{
padding-top: 2em;
padding-bottom: 4em;
}
.sp .work .art5 .col1{
display: block;
}
.sp .work .art5 .col1 h2{
	padding: 0;
}
.sp .work .art5 .col1 > *{
display: block;
width: 85%;
max-width: 291px;
margin: auto;
}
.sp .work .art5 .col1 > *:first-child{
width: auto;
max-width: none;
}
.sp .work .art5 .txt1{
transform: translateY(3.5em);
margin-left: 0;
font-size: 2.4rem;
}
.sp .work .art1 .txt2,
.sp .work .art4 .txt2,
.sp .environment .art10 .txt2{
	font-size: 2.4rem;
}
.sp .work .art1 .txt2 b,
.sp .work .art4 .txt2 b,
.sp .work .art5 .txt1 b,
.sp .environment .art10 .txt2 b{
font-size: 3.6rem;
}
.sp .work .art1 .txt2 span,
.sp .work .art4 .txt2 span,
.sp .work .art5 .txt1 span,
.sp .environment .art10 .txt2 span{
font-size: 7.5rem;
}
.sp .work .art5 figure{
margin-top: 5em;
}
.sp .work .art5 figure{
width: 50%;
}
.sp .work .art5 .note{
text-align: left;
}
/*====================
地域別にみる取引割合
====================*/
.work .art6 .inner{
padding-top: 100px;
padding-bottom: 120px;
}
.work .art6 .col1{
display: flex;
flex-direction: row-reverse;
}
.work .art6 .col1 > *{
position: relative;
flex-basis: 50%;
}
.work .art6 .result_ttl{
margin-top: 8%;
}
.work .art6 .col1 .img1{
position: absolute;
left: -25%;
width: 150%;
}
.work .art6 .col1 .txt1 li{
position: absolute;
margin: auto;
text-align: center;
z-index: 1;
}
.work .art6 .col1 .txt1 li b{
display: block;
line-height: 1;
text-align: center;
}
.work .art6 .col1 .txt1 li span{
line-height: 1;
}
.work .art6 .col1 .txt1 li:nth-of-type(1){
bottom: 0;
left: 25%;
right: 0;
font-size: 3.4rem;
}
.work .art6 .col1 .txt1 li:nth-of-type(1) b{
font-size: 5rem;
}
.work .art6 .col1 .txt1 li:nth-of-type(1) span{
font-size: 8.6rem;
}
.work .art6 .col1 .txt1 li:nth-of-type(2){
top: 15%;
left: 0;
right: 50%;
font-size: 2.4rem;
}
.work .art6 .col1 .txt1 li:nth-of-type(2) b{
font-size: 2.6rem;
}
.work .art6 .col1 .txt1 li:nth-of-type(2) span{
font-size: 6.5rem;
}
.work .art6 .col1 .txt1 li:nth-of-type(3){
top: -10%;
left: 0;
right: 10%;
font-size: 2.4rem;
}
.work .art6 .col1 .txt1 li:nth-of-type(3) b{
font-size: 2.6rem;
}
.work .art6 .col1 .txt1 li:nth-of-type(3) span{
font-size: 4.8rem;
}
.work .art6 .col1 .txt2{
padding-top: 85%;
}
.work .art6 .col1 .txt2 dt{
position: relative;
padding-left: 2em;
font-size: 2rem;
}
.work .art6 .col1 .txt2 dt:before{
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
width: 1.5em;
height: 1.5em;
background-color: #f38112;
}
.work .art6 .col1 .txt2 li{
display: inline-block;
margin-left: 2em;
font-size: 2rem;
}
.work .art6 .col1 .txt2 li span{
margin-left: 0.3em;
font-size: 4rem;
}

.sp .work .art6 .inner{
padding-top: 2em;
padding-bottom: 2em;
}
.sp .work .art6 .col1{
display: block;
}
.sp .work .art6 .col1 > *{
display: block;
width: auto;
}
.sp .work .art6 .col1 .img1{
margin-top: 4em;
}
.sp .work .art6 .col1 .txt1 li:nth-of-type(1){
font-size: 2.55rem;
}
.sp .work .art6 .col1 .txt1 li:nth-of-type(1) b{
font-size: 3.75rem;
}
.sp .work .art6 .col1 .txt1 li:nth-of-type(1) span{
font-size: 8.5rem;
}
.sp .work .art6 .col1 .txt1 li:nth-of-type(2){
right: 40%;
font-size: 1.8rem;
}
.sp .work .art6 .col1 .txt1 li:nth-of-type(2) span{
font-size: 6rem;
}
.sp .work .art6 .col1 .txt1 li:nth-of-type(3){
font-size: 1.8rem;
}
.sp .work .art6 .col1 .txt2{
padding-top: 100%;
}
.sp .work .art6 .col1 .txt2 dt{
font-size: 1.6rem;
}
.sp .work .art6 .col1 .txt2 li{
font-size: 1.6rem;
}
.sp .work .art6 .col1 .txt2 li span{
font-size: 3rem;
}
.sp .work .art7 li.note{
width: 100% !important;
}

/*====================
国別の取引規模ランキング
====================*/
.work .art7{
background-color: #ffe394;
}
.work .art7 canvas{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.work .art7 .inner{
padding: 120px 0;
}
.work .art7 .img1{
position: relative;
}
.work .art7 .img1 figure{
position: relative;
margin-top: 70px;
}
.work .art7 .img1 figure > *{
position: absolute;
bottom: 0;
left: 0;
}
.work .art7 .img1 figure > *:last-child{
position: relative;
}
.work .art7 .txt1 li{
position: absolute;
bottom: 7%;
width: 2em;
font-size: 3.2rem;
font-weight: bold;
list-style: none;
white-space: nowrap;
}
.work .art7 .txt1 li:nth-of-type(1){
left: 0;
right: 0;
margin: auto;
color: #d3af00;
text-align: center;
}
.work .art7 .txt1 li:nth-of-type(2){
left: 26.5%;
color: #86847a;
}
.work .art7 .txt1 li:nth-of-type(3){
width: 6em;
right: 14%;
color: #90552d;
letter-spacing: -3px;
}
@media only screen and (max-width: 950px){
.work .art7 .txt1 li{
font-size: 3.2vw;
}
}
.work .art7 .txt2{
display: flex;
justify-content: center;
align-items: center;
margin: 2em 0 0 0;
}
.work .art7 .txt2 ol{
display: inline-block;
margin: 0;
padding: 0;
}
.work .art7 .txt2 li{
width: 7em;
margin: 0 2em 0 0;
margin: 0 3em 0 0;
float: left;
font-size: 2rem;
list-style: none;
font-weight: bold;
white-space: nowrap;
}
.work .art7 .txt2 li span{
display: inline-block;
margin-right: 0.15em;
vertical-align: middle;
font-weight: bold;
font-size: 3.3rem;
}
.work .art7 .txt2 li:nth-of-type(3n){
/*width: 5em;*/
width: 9em;
margin-right: 0;
}
.work .art7 .txt2 li:nth-of-type(3n + 1){
clear: both;
/*width: 10em;*/
/*width: 5em;*/
width: 7em;
}
.work .art7 li.note{
width: 100%;
font-size: 1.6rem;
font-weight: normal;
text-align: left;
}

.sp .work .art7 .inner{
padding-top: 2em;
padding-bottom: 2em;
}
.sp .work .art7 .txt1 li{
font-size: 3.2vw;
}
.sp .work .art7 .txt1 li:nth-of-type(3){
letter-spacing: -2px;
}
.sp .work .art7 .img1{
transform: scale(1.75);
}
.sp .work .art7 .img1 figure{
margin-top: 20vw;
}
.sp .work .art7 .txt2{
margin-top: 15%;
}
.sp .work .art7 .txt2 li{
width: 10em;
font-size: 1.4rem;
margin: 0;
}
.sp .work .art7 .txt2 li:nth-of-type(3n){
width: 10em;
margin: 0;
}
.sp .work .art7 .txt2 li:nth-of-type(3n+1){
clear: none;
}
.sp .work .art7 .txt2 li:nth-of-type(even){
width: 6em;
margin: 0;
}
.sp .work .art7 .txt2 li:nth-of-type(odd){
clear: both;
}
.sp .work .art7 .txt2 li span{
font-size: 2.1rem;
}


/*====================
研究開発体制4つの柱
====================*/
.work .art8{
	padding: 120px 0;
}
.work .art8 .work_art8_inner{
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 3em;
}
.work .art8 .inner .work_art8_inner> *{
	width: 40%;
}
.work .art8 .inner .work_art8_inner .img1 figure{
	width: 100%;
	margin-left:10%;
}

.work .art8 .inner .work_art8_inner .txt2 ol{
	list-style: none;
}

.work .art8 .inner .work_art8_inner .txt2 ol li{
	font-size: 2.2em;
	font-weight: bold;
	color: #f38112;
}

.work .art8 .inner .work_art8_inner .txt2 ol li span{
	font-size: 1.5em;
	padding-right: 10px;
}
@media only screen and (max-width: 1070px){
	.sp .work .art8{
		padding: 2em 0;
	}
	.sp .work .art8 .inner .work_art8_inner > *{
		width: 100%;
	}
	.sp .work .art8 .inner .work_art8_inner .img1 figure{
		margin-left: 0;
		width: 80%;
		margin: 0 auto;
	}
	.sp .work .art8 .work_art8_inner{
		margin-top: 2em;
	}
	.sp .work .art8 .inner .work_art8_inner .txt2 ol{
		padding: 0;
	}
	.sp .work .art8 .inner .work_art8_inner .txt2 ol li{
		font-size: 1.4em;
		text-align: center;
	}
}
/*===========================================
environment
===========================================*/
.environment{
padding-top: calc(175vh - 60px);
}
.environment .head .ttl{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.environment .head .ttl > *{
font-size: 6rem;
color: #FFF;
}
.environment .head .bg1{
position: absolute;
top: 75px;
left: 60px;
width: 84%;
max-width: 1164px;
z-index: 1;
}
.environment .head .bg1 img + img{
margin-top: 15px;
}
.environment .head .bg2{
position: absolute;
right: 60px;
bottom: 0;
width: 41.5%;
}
.environment .head .bg2 img{
float: right;
}
.environment .result_ttl:after{
border-color: #99cc1e;
}

.sp .environment .head .ttl > *{
font-size: 6.5vw;
}
.sp .environment .head .bg1 {
left: 2.4rem;
width: 150%;
max-width: 480px;
}
.sp .environment .head .bg2 {
right: 10px;
width: 60%;
max-width: 155px;
}

/*====================
従業員の数
====================*/
.light_green_bg{
	background: #d4edba !important;
}
.environment .art10 .inner{
padding-top: 120px;
}
.environment .art10 .inner .col1{
	position: relative;
}
.environment .art10 .inner .img2,
.environment .art10 .inner .img3{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.environment .art1 .inner{
padding-top: 80px;
}
.environment .art1 .col1{
display: flex;
align-items: center;
overflow: hidden;
}
.environment .art1 .col1 > *{
flex-basis: 50%;
}
.environment .art1 .col1 .txt1{
padding: 1em 0;
}
.environment .art1 .col1 .txt1 p{
color: #2ba010;
font-size: 5rem;
font-weight: bold;
text-align: center;
line-height: 1;
}
.environment .art1 .col1 .txt1 p span{
display: inline-block;
/*width: 1.5em;*/
font-size: 15rem;
}
@media only screen and (max-width: 1070px){
	.environment .art1 .col1 .txt1 p{
	font-size: 4.8vw;
	}
	.environment .art1 .col1 .txt1 p span{
	font-size: 14.8vw;
	}
}
.environment .art1 .col1 .note{
margin-top: 1em;
}
.environment .art1 .col1 .img1,
.environment .art1 .col1 .img2{
padding: 0 50px;
}
.environment .art1 .col1 .img1:after,
.environment .art1 .col1 .img2:after{
content: "";
display: block;
clear: both;
}
.environment .art1 .col1 .img1 li,
.environment .art1 .col1 .img2 li{
width: calc((100% - 1px) / 6);
float: left;
}
.environment .art1 .col1 .img1 li:nth-of-type(6n+1),
.environment .art1 .col1 .img2 li:nth-of-type(6n+1){
clear: both;
}
.sp .environment .art1 .col1{
display: block;
}
.sp .environment .art1 .col1 .img1{
max-width: 291px;
margin: 2em auto 0 auto;
}
.sp .environment .art1 .col1 .img2{
max-width: 291px;
margin: auto;
}
.sp .environment .art1 .col1 .img1 li,
.sp .environment .art1 .col1 .img2 li {
box-sizing: border-box;
padding: 0 0.25em;
}
.sp .environment .art1 .col1 .txt1 p{
font-size: 6.25rem;
}
.sp .environment .art1 .col1 .txt1 p span{
font-size: 12.5rem;
}

/*====================
年代別構成
====================*/
.environment .art2 .inner{
padding-top: 100px;
}
.environment .art2 .col1{
display: flex;
align-items: center;
flex-direction: row-reverse;
}
.environment .art2 .col1 > *{
position: relative;
flex-basis: 50%;
}
.environment .art2 .col1 .img1{
padding-top: 75.5%;
}
.environment .art2 .col1 .img1 > div {
position: absolute;
top: 0;
bottom: 0;
left: -25%;
width: 150%;
}
.environment .art2 .col1 .txt1 li{
position: absolute;
font-size: 2.4rem;
color: #FFF;
font-weight: bold;
text-align: center;
line-height: 1;
}
.environment .art2 .col1 .txt1 li:nth-of-type(1){
top: 4%;
left: 52%;
color: #2ba010;
}
.environment .art2 .col1 .txt1 li:nth-of-type(1) b{
text-align: left;
/*margin-left: -1em;*/
}
.environment .art2 .col1 .txt1 li:nth-of-type(2){
/*top: 30%;*/
top: 24%;
left: 63%;
color: #2ba010;
}
.environment .art2 .col1 .txt1 li:nth-of-type(3){
/*top: 52%;
left: 30%;
*/
top: 55%;
left: 45%;
}
.environment .art2 .col1 .txt1 li:nth-of-type(4){
/*top: 20%;*/
top: 35%;
left: 20%;
}
.environment .art2 .col1 .txt1 li:nth-of-type(5){
top: 10%;
left: 26%;
}
.environment .art2 .col1 .txt1 li:nth-of-type(5) b{
	text-align: right;
}
.environment .art2 .col1 .txt1 li span{
font-size: 4.2rem;
}
.environment .art2 .col1 .txt1 li:nth-of-type(1) span,
.environment .art2 .col1 .txt1 li:nth-of-type(5) span{
min-width: 1.1em;
font-size: 3.8rem;
}
.environment .art2 .col1 .txt1 li b{
display: block;
font-size: 3.2rem;
}
.environment .art2 .col1 .txt1 li:nth-of-type(1) b,
.environment .art2 .col1 .txt1 li:nth-of-type(4) b{
font-size: 1.9rem;
}
.environment .art2 .col1 .txt1 li b span{
min-width: 1.1em;
font-size: 6.4rem;
}
@media only screen and (max-width: 1070px){
	.environment .art2 .col1 .txt1 li{
	font-size: 2.2vw;
	}
	.environment .art2 .col1 .txt1 li span{
	font-size: 4vw;
	}
	.environment .art2 .col1 .txt1 li:nth-of-type(1) span,
	.environment .art2 .col1 .txt1 li:nth-of-type(4) span{
	font-size: 3.6vw;
	}
	.environment .art2 .col1 .txt1 li b{
	font-size: 3vw;
	}
	.environment .art2 .col1 .txt1 li:nth-of-type(1) b,
	.environment .art2 .col1 .txt1 li:nth-of-type(4) b{
	font-size: 1.7vw;
	}
	.environment .art2 .col1 .txt1 li b span{
	font-size: 6.2vw;
	}
}
.environment .art2 .col1 .note{
margin-top: 1em;
}

.sp .environment .art2 .inner{
padding-top: 2em;
}
.sp .environment .art2 .col1{
display: block;
}
.sp .environment .art2 .col1 > *:last-child{
max-width: 291px;
margin: 2em auto 0 auto;
padding: 0;
}
.sp .environment .art2 .col1 .img1{
position: relative;
padding-top: 75.5%;
}

.sp .environment .art2 .col1 .txt1 li{
font-size: 1.7rem;
line-height: 0.8;
}
.sp .environment .art2 .col1 .txt1 li:nth-of-type(1){
top: 5%;
left: 51%;
}
.sp .environment .art2 .col1 .txt1 li:nth-of-type(2){
top: 24%;
left: 62%;
}
.sp .environment .art2 .col1 .txt1 li:nth-of-type(3){
top: 53%;
left: 43%;
}
.sp .environment .art2 .col1 .txt1 li:nth-of-type(4){
top: 32%;
left: 18%;
}
.sp .environment .art2 .col1 .txt1 li:nth-of-type(5){
top: 11%;
left: 26%;
font-size: 1.3rem;
}
.sp .environment .art2 .col1 .txt1 li span{
font-size: 3rem;
}
.sp .environment .art2 .col1 .txt1 li:nth-of-type(1) span,
.sp .environment .art2 .col1 .txt1 li:nth-of-type(5) span{
font-size: 2.4rem;
}
.sp .environment .art2 .col1 .txt1 li b{
font-size: 2.3rem;
}
.sp .environment .art2 .col1 .txt1 li:nth-of-type(1) b,
.sp .environment .art2 .col1 .txt1 li:nth-of-type(4) b,
.sp .environment .art2 .col1 .txt1 li:nth-of-type(5) b{
font-size: 1.3rem;
}
.sp .environment .art2 .col1 .txt1 li:nth-of-type(5) b{
	text-align: center;
}
.sp .environment .art2 .col1 .txt1 li b span{
font-size: 4.5rem;
}
/*====================
男女比
====================*/
.environment .art3 .inner{
padding-top: 60px;
	padding-bottom: 120px;
}
.environment .art3 .col1{
display: flex;
align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
}
.environment .art3 .col1 > *{
position: relative;
	width: 50%;
/*flex-basis: 50%;*/
}
.environment .art3 .col1 .img1{
position: relative;
}
.environment .art3 .col1 .img1 > div{
padding-top: 116.5%;
}
.environment .art3 .col1 .img1 > div:after,
.environment .art3 .col1 .img1 > div:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: center center no-repeat;
background-size: contain;
}
.environment .art3 .col1 .img1 > div:before{
background-image: url(../images/environment_art3_img01.png);
}
.environment .art3 .col1 .img1 > div:after{
background-image: url(../images/environment_art3_img02.png);
}
.environment .art3 .col1 .txt1{
position: absolute;
top: 13%;
left: 26%;
z-index: 1;
}
.environment .art3 .col1 .txt1 p{
color: #FFF;
font-size: 3.2rem;
text-align: center;
line-height: 1;
}
.environment .art3 .col1 .txt1 p b{
display: block;
font-size: 5rem;
text-align: center;
line-height: 1.2;
}
.environment .art3 .col1 .txt1 p span{
min-width: 1.1em;
font-size: 15rem;
}
.environment .art3 .col1 .txt2{
position: absolute;
top: 63%;
left: 67%;
z-index: 1;
}
.environment .art3 .col1 .txt2 p{
color: #FFF;
font-size: 2.8rem;
text-align: center;
line-height: 1;
}
.environment .art3 .col1 .txt2 p b{
display: block;
font-size: 4rem;
text-align: center;
line-height: 1.2;
}
.environment .art3 .col1 .txt2 p span{
min-width: 1.1em;
font-size: 8rem;
}
@media only screen and (max-width: 1070px){
	.environment .art3 .col1 .txt1 p{
	font-size: 3vw;
	}
	.environment .art3 .col1 .txt1 p b{
	font-size: 4.8vw;
	}
	.environment .art3 .col1 .txt1 p span{
	font-size: 14.8vw;
	}
	.environment .art3 .col1 .txt2 p{
	font-size: 2.6vw;
	}
	.environment .art3 .col1 .txt2 p b{
	font-size: 3.8vw;
	}
	.environment .art3 .col1 .txt2 p span{
	font-size: 7.8vw;
	}
}
.environment .art3 .col1 .note{
width: 50%;
transform: translateY(-3em);
}

.sp .environment .art3 .col1{
/*display: block;*/
flex-direction: column-reverse;
}
.sp .environment .art3 .col1>*{
	width: 100%;
}
.sp .environment .art3 .col1 .img1{
position: relative;
max-width: 291px;
margin: 0 auto;
padding: 2em 0 0;
}
.sp .environment .art3 .col1 .txt1 p{
font-size: 2.05rem;
}
.sp .environment .art3 .col1 .txt1 p b{
font-size: 4rem;
}
.sp .environment .art3 .col1 .txt1 p span{
font-size: 8.5rem;
}
.sp .environment .art3 .col1 .txt2 p{
font-size: 1.8rem;
}
.sp .environment .art3 .col1 .txt2 p b{
font-size: 2.5rem;
}
.sp .environment .art3 .col1 .txt2 p span{
font-size: 5rem;
}
.sp .environment .art3 .col1 .note{
text-align: left;
}
/*====================
出身学部
====================*/
.environment .art4 .inner{
padding-top: 100px;
padding-bottom: 100px;
}
.environment .art4 .col1{
display: flex;
align-items: center;
/*flex-direction: row-reverse;*/
}
.environment .art4 .col1 > *{
position: relative;
flex-basis: 50%;
}
.environment .art4 .col1 .txt1,
.environment .art4 .col1 .txt2{
position: relative;
}
.environment .art4 .col1 .txt2{
margin-top: 2em;
}
.environment .art4 .col1 .txt1:after,
.environment .art4 .col1 .txt1:before,
.environment .art4 .col1 .txt2:after,
.environment .art4 .col1 .txt2:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background: center center no-repeat;
background-size: contain;
}
.environment .art4 .col1 .txt1:after{
background-image: url(../images/environment_art4_img02.png);
}
.environment .art4 .col1 .txt1:before{
background-image: url(../images/environment_art4_img01.png);
background-size: 100% 100%;
}
.environment .art4 .col1 .txt2:after{
background-image: url(../images/environment_art4_img04.png);
}
.environment .art4 .col1 .txt2:before{
background-image: url(../images/environment_art4_img03.png);
background-size: 100% 100%;
}
.environment .art4 .col1 .txt1 p,
.environment .art4 .col1 .txt2 p{
position: relative;
padding: 0 0 0.8em 3em;
font-size: 2.8rem;
line-height: 1;
text-align: center;
z-index: 1;
}
.environment .art4 .col1 .txt1 b,
.environment .art4 .col1 .txt2 b{
display: block;
font-size: 5rem;
text-align: center;
}
.environment .art4 .col1 .txt1 span,
.environment .art4 .col1 .txt2 span{
min-width: 1.1em;
font-size: 10rem;
}
@media only screen and (max-width: 1070px){
	.environment .art4 .col1 .txt1 b,
	.environment .art4 .col1 .txt2 b{
	font-size: 4.8vw;
	}
	.environment .art4 .col1 .txt1 span,
	.environment .art4 .col1 .txt2 span{
	font-size: 9.8vw;
	}
}
.environment .art4 .note{
margin-top: 1em;
}

.sp .environment .art4 .inner{
padding-top: 3em;
padding-bottom: 2em;
}
.sp .environment .art4 .col1{
display: block;
}
.sp .environment .art4 .col1 .txt1{
margin-top: 2em;
}
.sp .environment .art4 .col1 .txt1 p,
.sp .environment .art4 .col1 .txt2 p{
font-size: 2.05rem;
}
.sp .environment .art4 .col1 .txt1 b,
.sp .environment .art4 .col1 .txt2 b{
font-size: 3.5rem;
}
.sp .environment .art4 .col1 .txt1 span,
.sp .environment .art4 .col1 .txt2 span{
font-size: 7.5rem;
}
/*====================
最年少記録
====================*/
.environment .art5 .inner{
padding-top: 130px;
padding-bottom: 120px;
}
.environment .art5 .col1{
margin: 0 8%;
}
.environment .art5 .col1:after{
content: "";
display: block;
clear: both;
}
.environment .art5 .col1 > *{
width: 39%;
max-width: 306px;
}
.environment .art5 .col1 > *:nth-of-type(odd){
float: left;
}
.environment .art5 .col1 > *:nth-of-type(even){
float: right;
}
.environment .art5 .col1 p{
padding-top: 60px;
text-align: center;
line-height: 1;
font-size: 3.2rem;
font-weight: bold;
}
.environment .art5 .col1 p b{
display: block;
color: #2ba010;
font-size: 5rem;
text-align: center;
}
.environment .art5 .col1 p span{
min-width: 1.1em;
font-size: 15rem;
}
@media only screen and (max-width: 1070px){
	.environment .art5 .col1 p{
	font-size: 3vw;
	}
	.environment .art5 .col1 p b{
	font-size: 4.8vw;
	}
	.environment .art5 .col1 p span{
	font-size: 14.8vw;
	}
}
.environment .art5 .col1 .img1,
.environment .art5 .col1 .img2{
position: relative;
}
.environment .art5 .col1 .obj2{
position: absolute;
}
.environment .art5 .col1 .img1:after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: -3%;
right: 0;
width: 100%;
background: url(../images/environment_art5_img02.png) left 	top no-repeat;
background-size: 200%;
}
.environment .art5 .col1 .obj1{
bottom: 0;
left: 0;
}
.environment .art5 .col1 .obj2{
top: 20%;
left: 0;
}
.environment .art5 .col1 .note{
margin-top: 2em;
margin-left: 5%;
padding: 0;
font-size: 1.6rem;
font-weight: normal;
}

.sp .environment .art5 .inner{
padding-top: 3em;
padding-bottom: 2em;
}
.sp .environment .art5 .col1 > *:nth-of-type(odd),
.sp .environment .art5 .col1 > *:nth-of-type(even){
float: none;
width: auto;
margin: auto;
}
.sp .environment .art5 .col1 p{
font-size: 2.1rem;
}
.sp .environment .art5 .col1 p b{
font-size: 4rem;
}
.sp .environment .art5 .col1 p span{
font-size: 8.5rem;
}
.sp .environment .art5 .col1 .note{
font-size: 1.4rem;
}
/*====================
休日
====================*/
.environment .art6{
background-color: #d4edba;
}
.environment .art6 .inner{
padding-top: 120px;
padding-bottom: 120px;
}
.environment .art6 .col1{
display: flex;
align-items: center;
}
.environment .art6 .col1 > *{
position: relative;
flex-basis: 50%;
}
.environment .art6 .col1 .txt2{
position: relative;
padding: 8em 0 1.5em 0;
background: url(../images/environment_art6_img01.png) center center no-repeat;
background-size: contain;
}
.environment .art6 .col1 .txt2:before{
content: normal;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(../images/environment_art6_img01_2.png) center center no-repeat;
background-size: contain;
transform-origin: 80% 42%;
}
html:not(.sp) .environment .art6 .col1 .txt2:before{
content: "";
}
.environment .art6 .col1 .txt2 p{
font-size: 5rem;
font-weight: bold;
text-align: center;
}
.environment .art6 .col1 .txt2 p span{
display: inline-block;
width: 1.5em;
font-size: 10rem;
}
@media only screen and (max-width: 1070px){
	.environment .art6 .col1 .txt2 p{
	font-size: 4.8vw;
	}
	.environment .art6 .col1 .txt2 p span{
	font-size: 9.8vw;
	}
}
.environment .art6 .col2{
display: flex;
align-items: center;
flex-direction: row-reverse;
}
.environment .art6 .col2 > *{
position: relative;
flex-basis: 50%;
}
.environment .art6 .col2 .txt3{
position: relative;
padding: 65% 0 0 0;
background: url(../images/environment_art6_img02.png) center center no-repeat;
background-size: contain;
}
.environment .art6 .col2 .txt3 p{
position: absolute;
top: 1.7em;
width: 100%;
font-size: 5rem;
font-weight: bold;
text-align: center;
z-index: 1;
}
.environment .art6 .col2 .txt3 p span{
min-width: 1.1em;
font-size: 10rem;
}
@media only screen and (max-width: 1070px){
	.environment .art6 .col2 .txt3 p{
	top: 1.2em;
	font-size: 4.8vw;
	}
	.environment .art6 .col2 .txt3 p span{
	font-size: 9.8vw;
	}
}
.environment .art6 .col2 .txt3 div{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transform: translateY(5%);
}
.environment .art6 .col2 .txt3 div canvas{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

.sp .environment .art6 .inner{
padding-top: 2em;
padding-bottom: 2em;
}
.sp .environment .art6 .col1{
display: block;
margin: 0;
}
.sp .environment .art6 .col1 > *:nth-of-type(odd),
.sp .environment .art6 .col1 > *:nth-of-type(even){
float: none;
width: auto;
max-width: none;
}
.sp .environment .art6 .col1 > *:nth-of-type(even){
position: relative;
max-width: 291px;
margin: 2em auto 0 auto;
}
.sp .environment .art6 .col1 .txt1 p{
padding-top: 2em;
font-size: 2.1rem;
}
.sp .environment .art6 .col1 .txt2{
padding: 45% 0 8% 0;
}
.sp .environment .art6 .col1 .txt2 p{
top: 2.5em;
font-size: 4rem;
}
.sp .environment .art6 .col1 .txt2 span{
font-size: 8.5rem;
}
.sp .environment .art6 .col1 .txt3{
padding-top: 5em;
}
.sp .environment .art6 .col1 .txt3 div{
max-width: 320px;
margin: auto;
}
.sp .environment .art6 .col1 .txt3 p{
font-size: 4rem;
}
.sp .environment .art6 .col1 .txt3 span{
font-size: 8.5rem;
}
.sp .environment .art6 .col2{
display: block;
margin-top: 4em;
}
.sp .environment .art6 .col2 > *:last-child{
position: relative;
max-width: 291px;
margin: 2em auto 0 auto;
}
.sp .environment .art6 .col2 .txt3{
padding-top: 80%;
}
.sp .environment .art6 .col2 .txt3 p{
position: absolute;
top: 1.4em;
width: 100%;
text-align: center;
font-size: 4rem;
}
.sp .environment .art6 .col2 .txt3 p span{
font-size: 8.5rem;
}
.sp .environment .art6 .col2 .img1{
transform: translateY(0.75em);
}
/*====================
残業時間
====================*/
.environment .art7 .inner{
padding-top: 120px;
}
.environment .art7 .col1{
padding-top: 70px;
}
.environment .art7 .col1:after{
content: "";
display: block;
clear: both;
}
.environment .art7 .col1 > *{
position: relative;
}
.environment .art7 .col1 > *:nth-of-type(odd){
float: left;
width: 35%;
}
.environment .art7 .col1 > *:nth-of-type(even){
width: 60%;
float: right;
}
.environment .art7 .txt1 p{
font-size: 4rem;
color: #2ba010;
text-align: center;
line-height: 1;
}
.environment .art7 .txt1 p b{
display: block;
font-size: 5rem;
text-align: center;
}
.environment .art7 .txt1 p span{
font-size: 15rem;
}
@media only screen and (max-width: 1070px){
	.environment .art7 .txt1 p{
	font-size: 3.8vw;
	}
	.environment .art7 .txt1 p b{
	font-size: 4.8vw;
	}
	.environment .art7 .txt1 p span{
	font-size: 14vw;
	}
}
.environment .art7 .img1{
overflow: hidden;
}
.environment .art7 .img1 .obj2,
.environment .art7 .img1 .obj3{
position: absolute;
top: 0;
overflow: hidden;
}
.environment .art7 .img1 .obj2:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
width: 400%;
background: url(../images/environment_art7_img02_2.png) 0 bottom no-repeat;
background-size: 100%;
}
.environment .art7 .img1 .obj2 img{
opacity: 0;
}
.environment .art7 .img1 .obj3{
opacity: 0;
}

.sp .environment .art7 .col1{
padding-top: 2em;
}
.sp .environment .art7 .col1 > *:nth-of-type(odd),
.sp .environment .art7 .col1 > *:nth-of-type(even){
float: none;
width: auto;
}
.sp .environment .art7 .col1 > *:nth-of-type(even){
max-width: 345px;
margin: 1em auto 0 auto;
}
.sp .environment .art7 .txt1 p{
font-size: 2.1rem;
}
.sp .environment .art7 .txt1 p span{
font-size: 8.5rem;
}
.sp .environment .art7 .txt1 p b{
font-size: 4rem;
}
/*====================
新卒入社者のグループ離職率
====================*/
.environment .art8 .inner{
padding-top: 120px;
}
.environment .art8 .col1{
padding-top: 70px;
}
.environment .art8 .col1:after{
content: "";
display: block;
clear: both;
}
.environment .art8 .col1 > *:nth-of-type(odd){
float: right;
width: 42%;
}
.environment .art8 .col1 > *:nth-of-type(even){
float: left;
width: 58%;
}
.environment .art8 .txt1 p{
font-size: 4rem;
color: #2ba010;
text-align: center;
line-height: 1;
}
.environment .art8 .txt1 p b{
display: block;
font-size: 12rem;
text-align: center;
}
.environment .art8 .txt1 p span{
/*font-size: 24rem;*/
font-size: 19rem;
}
@media only screen and (max-width: 1070px){
	.environment .art8 .txt1 p{
	font-size: 3.8vw;
	}
	.environment .art8 .txt1 p b{
	font-size: 11.8vw;
	}
	.environment .art8 .txt1 p span{
	/*font-size: 23.6vw;*/
	font-size: 16vw;
	}
}
.environment .art8 .img1{
position: relative;
}
.environment .art8 .img1 .obj1{
width: 66%;
max-width: 361px;
transform: translateX(6%);
}
.environment .art8 .img1 li{
position: absolute;
width: 11.5%;
max-width: 63px;
bottom: 0;
}
.environment .art8 .img1 li span{
display: block;
}
.environment .art8 .img1 li img{
opacity: 0;
}
.environment .art8 .img1 li:nth-last-of-type(1){
right: 37.5%;
}
.environment .art8 .img1 li:nth-last-of-type(1) span{
background: url(../images/environment_art8_img05_2.png) 0 bottom no-repeat;
background-size: 200%;
}
.environment .art8 .img1 li:nth-last-of-type(2){
right: 26%;
}
.environment .art8 .img1 li:nth-last-of-type(2) span{
background: url(../images/environment_art8_img04_2.png) 0 bottom no-repeat;
background-size: 200%;
}
.environment .art8 .img1 li:nth-last-of-type(3){
right: 14.5%;
}
.environment .art8 .img1 li:nth-last-of-type(3) span{
background: url(../images/environment_art8_img03_2.png) 0 bottom no-repeat;
background-size: 200%;
}
.environment .art8 .img1 li:nth-last-of-type(4){
right: 3%;
}
.environment .art8 .img1 li:nth-last-of-type(4) span{
background: url(../images/environment_art8_img02_2.png) 0 bottom no-repeat;
background-size: 200%;
}

.sp .environment .art8 .inner{
padding-top: 2em;
}
.sp .environment .art8 .col1{
padding-top: 2em;
}
.sp .environment .art8 .col1 > *:nth-of-type(odd),
.sp .environment .art8 .col1 > *:nth-of-type(even){
float: none;
width: auto;
}
.sp .environment .art8 .col1 > *:nth-of-type(even){
max-width: 345px;
margin: 1em auto 0 auto;
}
.sp .environment .art8 .txt1 p{
font-size: 3rem;
}
.sp .environment .art8 .txt1 p b{
font-size: 6rem;
}
.sp .environment .art8 .txt1 p span{
font-size: 12rem;
}
/*===========================================
anniversary
===========================================*/
.anniversary{
position: relative;
padding: 10% 0;
background-color: #FFF;
z-index: 1;
overflow: hidden;
}
.anniversary .bg1{
position: relative;
/*max-width: 1400px;*/
max-width: 800px;
margin: auto;
background: url(../images/anniversary_bg01.png) center center no-repeat #FFF;
background-size: 100% 100%;
}
.anniversary .inner{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vw;
/*
max-width: 1400px;
max-height: 1400px;
*/
max-width: 800px;
max-height: 800px;
margin: auto;
padding: 0;
z-index: 2;
}
.anniversary .inner > div{
max-width: 80%;
}
.anniversary p{
margin: 0;
font-size: 3rem;
color: #FFF;
text-align: center;
}
.anniversary p img{
margin: auto;
}
.anniversary .txt1{
max-width: 70%;
margin: 0 auto;
}
.anniversary .txt2{
margin-top: 3em;
}
.anniversary .txt3{
margin-top: 1.5em;
}
.anniversary .txt6{
font-size: 8rem;
}
.anniversary .img1{
position: relative;
margin-top: 0.5em;
padding: 2em 1em;
}
.anniversary .col1 .txt1{
	padding-top: 4em;
}
.anniversary .img1:before{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background: url(../images/anniversary_img01.png) center center no-repeat;
background-size: contain;
}

.anniversary .last_bn{
	text-align: center;
}

.anniversary .last_bn h2{
	color: #c76ecc;
	font-size: 4rem;
}
.anniversary .last_bn p{
	color: #333;
	font-size: 2rem;
	padding: 0 5%;

}
.anniversary .last_bn figure{
	margin: 2em 30%;
	border: 3px solid #0068b7;
}
.anniversary .last_bn figure a{
	padding: 25px 0;
	display: block;
}
.anniversary .last_bn figure img{
	display: inline-block;
}
@media only screen and (max-width: 1070px){
	.anniversary p{
	font-size: 2.8vw;
	}
	.anniversary .txt6{
	font-size: 7.6vw;
	}
}
.anniversary .anniversary_bg > li{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: url(../images/anniversary_bg02.png) center center no-repeat;
background-size: 100% 100%;
}
.anniversary .anniversary_bg > li:nth-of-type(2){ background-image: url(../images/anniversary_bg03.png);}
.anniversary .anniversary_bg > li:nth-of-type(3){ background-image: url(../images/anniversary_bg04.png);}
.anniversary .anniversary_bg > li:nth-of-type(4){ background-image: url(../images/anniversary_bg05.png);}

.sp .anniversary .bg1{
padding: 40% 0 34% 0;
background-size: cover;
}
.sp .anniversary .bg1:after{
background-size: cover;
}
.sp .anniversary .anniversary_bg > li{
background-size: cover;
}
.sp .anniversary .inner > div{
max-width: none;
margin: 0 1.2rem;
}
.sp .anniversary p{
font-size: 1.6rem;
}
.sp .anniversary .txt5{
font-size: 2.1rem;
}
.sp .anniversary .txt6{
font-size: 4.3rem;
}

.sp .anniversary .last_bn{
	margin-top: 4em;
}
.sp .anniversary .last_bn h2{
	font-size: 2.2rem;
}

.sp .anniversary .last_bn p{
	font-size: 1.6rem;
	margin-top: 1em;
	padding: 0 5%;
}
.sp .anniversary .last_bn figure{
	margin: 2em 10%;
	border: 2px solid #0068b7;
}

.sp .anniversary .last_bn figure a{
	padding: 10px 0;
}
.sp .anniversary .last_bn figure img{
	width: 60%;
}
/*===========================================
parallax
===========================================*/
.head{
transition: background 2s ease;
}
.head{
visibility: hidden;
}
.visible .head{
visibility: visible;
}
.head .ttl{
transform: translateY(-500px);
}
.head .bg1 img{
transform: translateY(-500px);
opacity: 0;
}
.sec.visible .head .ttl{
transition: transform 0.75s ease 0.3s;
transform: translateY(0);
}
.sec.visible .head .bg1 img:nth-of-type(3){
transition-delay: 0s
}
.sec.visible .head .bg1 img:nth-of-type(2){
transition-delay: 0.1s
}
.sec.visible .head .bg1 img:nth-of-type(1){
transition-delay: 0.2s
}
.sec.visible .head .bg1 img{
transition: opacity 1s ease, transform 0.75s ease;
transform: translateY(0);
opacity: 1;
}
.head .bg2 img{
transform: translateY(500px);
opacity: 0;
}
.sec.visible .head .bg2 img{
transition: opacity 1s ease 0.75s, transform 0.75s ease 0.5s;
transform: translateY(0);
opacity: 1;
}


html:not(.sp) .result_ttl{
transition: opacity 0.75s ease, transform 0.75s ease;
opacity: 0;
}
html:not(.sp) .result_ttl{
transform: translateY(1em);
}
html:not(.sp) .result_ttl.visible{
opacity: 1;
transform: translate(0) !important;
}

html:not(.sp) .about .art1 .col1 .txt1,
html:not(.sp) .about .art1 .col1 .obj1,
html:not(.sp) .about .art1 .col2 .obj1,
html:not(.sp) .about .art1 .col2 .obj2,
html:not(.sp) .about .art1 .col2 .obj3,
html:not(.sp) .about .art1 .col2 .txt1,
html:not(.sp) .about .art2 .col1 div,
html:not(.sp) .about .art3 .col1 .txt1,
html:not(.sp) .about .art3 .col1 .img1,
html:not(.sp) .work .art4 .col1 .txt1 ul,
html:not(.sp) .work .art4 .col1 .txt1 li,
html:not(.sp) .environment .art1 .col1 .img1 li,
html:not(.sp) .environment .art1 .col1 .img2 li,
html:not(.sp) .environment .art3 .col1 > div:last-child:before,
html:not(.sp) .environment .art3 .col1 > div:last-child:after,
html:not(.sp) .environment .art3 .col1 .txt1,
html:not(.sp) .environment .art3 .col1 .txt2,
html:not(.sp) .environment .art4 .col1 .txt1:before,
html:not(.sp) .environment .art4 .col1 .txt2:before,
html:not(.sp) .environment .art7 .col1 .txt1,
html:not(.sp) .environment .art8 .col1 .obj1,
html:not(.sp) .environment .art8 .col1 .img1 li{
transition: opacity 0.75s ease, transform 0.75s ease;
opacity: 0;
}
html:not(.sp) .about .art1 .col1.visible .txt1,
html:not(.sp) .about .art1 .col1.visible .obj1,
html:not(.sp) .about .art1 .col2.visible .obj1,
html:not(.sp) .about .art1 .col2.visible .obj2,
html:not(.sp) .about .art1 .col2.visible .obj3,
html:not(.sp) .about .art1 .col2.visible .txt1,
html:not(.sp) .about .art2 .col1.visible div,
html:not(.sp) .about .art3 .col1.visible .txt1,
html:not(.sp) .about .art3 .col1.visible .img1,
html:not(.sp) .work .art4 .col1.visible .txt1 ul,
html:not(.sp) .work .art4 .col1.visible .txt1 li,
html:not(.sp) .environment .art1 .col1.visible .img1 li,
html:not(.sp) .environment .art1 .col1.visible .img2 li,
html:not(.sp) .environment .art3 .col1.visible div:last-child:before,
html:not(.sp) .environment .art3 .col1.visible div:last-child:after,
html:not(.sp) .environment .art3 .col1.visible .txt1,
html:not(.sp) .environment .art3 .col1.visible .txt2,
html:not(.sp) .environment .art4 .col1.visible .txt1:before,
html:not(.sp) .environment .art4 .col1.visible .txt2:before,
html:not(.sp) .environment .art7 .col1.visible .txt1,
html:not(.sp) .environment .art8 .col1.visible .obj1,
html:not(.sp) .environment .art8 .col1.visible .img1 li,
html:not(.sp) .anniversary .col1.visible .txt1,
html:not(.sp) .anniversary .col1.visible .txt2,
html:not(.sp) .anniversary .col1.visible .txt3,
html:not(.sp) .anniversary .col1.visible .txt4,
html:not(.sp) .anniversary .col1.visible .img1:before,
html:not(.sp) .anniversary .col1.visible .txt5,
html:not(.sp) .anniversary .col1.visible .txt6{
	transform: translate(0) !important;
	opacity: 1 !important;
}
html:not(.sp) .about .art1 .col1 .txt1{
	transform: translateX(-100px);
}
html:not(.sp) .about .art1 .col1 .obj1{
	transform: translateX(100px);
}
html:not(.sp) .about .art1 .col2 .obj1{
	transform: translateX(100px);
}
html:not(.sp) .about .art1 .col2 .obj2{
	transition-delay: 0.2s;
	transform: translateX(100px);
}
html:not(.sp) .about .art1 .col2 .obj3{
	transition-delay: 0.4s;
	transform: translateX(-100px);
}
html:not(.sp) .about .art1 .col2 .txt1{
transform: scale(0.1) translate(400%, 300%);
transition-delay: 1s;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
html:not(.sp) .about .art2 .col1 div:nth-of-type(odd){
transform: translateX(-100px);
}
html:not(.sp) .about .art2 .col1 div:nth-of-type(even){
transform: translateX(100px);
}
html:not(.sp) .about .art3 .col1 .img1{
transform: translateY(100px);
}
html:not(.sp) .work .art4 .col1 .txt1 ul{
transition-delay: 1s;
transform: translateY(100px);
}
html:not(.sp) .work .art4 .col1 .txt1 li{
transform: translateX(50px);
}
html:not(.sp) .work .art4 .col1 .txt1 li:nth-of-type(1){transition-delay: 1.6s}
html:not(.sp) .work .art4 .col1 .txt1 li:nth-of-type(2){transition-delay: 1.7s}
html:not(.sp) .work .art4 .col1 .txt1 li:nth-of-type(3){transition-delay: 1.8s}
html:not(.sp) .work .art4 .col1 .txt1 li:nth-of-type(4){transition-delay: 1.9s}
html:not(.sp) .work .art4 .col1 .txt1 li:nth-of-type(5){transition-delay: 2s}
html:not(.sp) .work .art4 .col1 .txt1 li:nth-of-type(6){transition-delay: 2.1s}
html:not(.sp) .work .art4 .col1 .txt1 li:nth-of-type(7){transition-delay: 2.2s}
html:not(.sp) .work .art4 .col1 .txt1 li:nth-of-type(8){transition-delay: 2.3s}
html:not(.sp) .work .art4 .col1 .txt1 li:nth-of-type(9){transition-delay: 2.4s}
html:not(.sp) .work .art4 .col1 .txt1 li:nth-of-type(10){transition-delay: 2.5s}
html:not(.sp) .work .art4 .col1 .txt1 li:nth-of-type(11){transition-delay: 2.6s}
html:not(.sp) .work .art4 .col1 .txt1 li:nth-of-type(12){transition-delay: 2.7s}
html:not(.sp) .work .art4 .col1 .txt1 li:nth-of-type(13){transition-delay: 2.8s}

html:not(.sp) .work .art7 .col1 .img1 .obj1{
width: 0%;
height: 100%;
}
html:not(.sp) .work .art7 .col1.visible .img1 .obj1{
transition: width 1s ease;
width: 100%;
height: 100%;
}
html:not(.sp) .work .art7 .col1 .img1 .obj2{
opacity: 0;
transform: translateY(100px);
}
html:not(.sp) .work .art7 .col1.visible .img1 .obj2{
transition: opacity 0.75s ease, transform 0.75s ease;
opacity: 1;
transform: translateY(0);
}
html:not(.sp) .work .art7 .col1 .img1 .txt1 li{
opacity: 0;
}
html:not(.sp) .work .art7 .col1.visible .img1 .txt1 li{
transition: opacity 0.75s ease;
opacity: 1;
}
html:not(.sp) .work .art7 .col1.visible .img1 .txt1 li:nth-of-type(3){
transition-delay: 1.5s;
}
html:not(.sp) .work .art7 .col1.visible .img1 .txt1 li:nth-of-type(2){
transition-delay: 2s;
}
html:not(.sp) .work .art7 .col1.visible .img1 .txt1 li:nth-of-type(1){
transition-delay: 2.5s;
}
html:not(.sp) .work .art7 .col1 .txt2 li{
opacity: 0;
transform: translateX(100px);
}
html:not(.sp) .work .art7 .col1.visible .txt2 li{
transition: opacity 0.75s ease, transform 0.75s ease;
opacity: 1;
transform: translate(0);
}
html:not(.sp) .work .art7 .col1.visible .txt2 li:nth-of-type(1){transition-delay: 3s}
html:not(.sp) .work .art7 .col1.visible .txt2 li:nth-of-type(2){transition-delay: 3.1s}
html:not(.sp) .work .art7 .col1.visible .txt2 li:nth-of-type(3){transition-delay: 3.2s}
html:not(.sp) .work .art7 .col1.visible .txt2 li:nth-of-type(4){transition-delay: 3.3s}
html:not(.sp) .work .art7 .col1.visible .txt2 li:nth-of-type(5){transition-delay: 3.4s}
html:not(.sp) .work .art7 .col1.visible .txt2 li:nth-of-type(6){transition-delay: 3.5s}
html:not(.sp) .work .art7 .col1.visible .txt2 li:nth-of-type(7){transition-delay: 3.6s}
html:not(.sp) .work .art7 .col1.visible .txt2 li:nth-of-type(8){transition-delay: 3.7s}
html:not(.sp) .work .art7 .col1.visible .txt2 li:nth-of-type(9){transition-delay: 3.8s}
html:not(.sp) .work .art7 .col1.visible .txt2 li:nth-of-type(10){transition-delay: 3.8s}

html:not(.sp) .environment .art1 .col1 .img1 li,
html:not(.sp) .environment .art1 .col1 .img2 li{
transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
html:not(.sp) .environment .art1 .col1 .img1 li{
transform: translateY(-200px);
}
html:not(.sp) .environment .art1 .col1 .img2 li{
transform: translateX(200px);
}
html:not(.sp) .environment .art1 .col1 .img1 li:nth-of-type(1){transition-delay: 0.1s}
html:not(.sp) .environment .art1 .col1 .img1 li:nth-of-type(4){transition-delay: 0.2s}
html:not(.sp) .environment .art1 .col1 .img1 li:nth-of-type(3){transition-delay: 0.3s}
html:not(.sp) .environment .art1 .col1 .img1 li:nth-of-type(2){transition-delay: 0.4s}
html:not(.sp) .environment .art1 .col1 .img1 li:nth-of-type(6){transition-delay: 0.5s}
html:not(.sp) .environment .art1 .col1 .img1 li:nth-of-type(5){transition-delay: 0.6s}
html:not(.sp) .environment .art1 .col1 .img2 li:nth-of-type(2){transition-delay: 0.7s}
html:not(.sp) .environment .art1 .col1 .img2 li:nth-of-type(4){transition-delay: 0.8s}
html:not(.sp) .environment .art1 .col1 .img2 li:nth-of-type(1){transition-delay: 0.9s}
html:not(.sp) .environment .art1 .col1 .img2 li:nth-of-type(5){transition-delay: 1s}
html:not(.sp) .environment .art1 .col1 .img2 li:nth-of-type(3){transition-delay: 1.1s}
html:not(.sp) .environment .art1 .col1 .img2 li:nth-of-type(6){transition-delay: 1.2s}

html:not(.sp) .environment .art3 .col1 > div:last-child:before,
html:not(.sp) .environment .art3 .col1 > div:last-child:after{
transform: translateY(100px);
}
html:not(.sp) .environment .art3 .col1 > div:last-child:after{transition-delay: 0.2s;}
html:not(.sp) .environment .art3 .col1 .txt1{transition-delay: 0.5s;}
html:not(.sp) .environment .art3 .col1 .txt2{transition-delay: 0.7s;}

html:not(.sp) .environment .art4 .col1 .txt1:before,
html:not(.sp) .environment .art4 .col1 .txt2:before{
transition: width 1.5s ease;
width: 0%;
}
html:not(.sp) .environment .art4 .col1.visible .txt1:before,
html:not(.sp) .environment .art4 .col1.visible .txt2:before{
width: 100%;
}
html:not(.sp) .environment .art4 .col1 .txt2:before,
html:not(.sp) .environment .art4 .col1 .txt2:after{
transition-delay: 0.5s;
}
html:not(.sp) .environment .art4 .col1 .txt1:after,
html:not(.sp) .environment .art4 .col1 .txt2:after{
transform: translateY(-50px);
}

html:not(.sp) .environment .art7 .col1 .txt1{
transform: translateX(-100px);
}

html:not(.sp) .environment .art7 .col1 .obj1{
transform: translateX(-100%);
}
html:not(.sp) .environment .art7 .col1.visible .obj1{
transition: transform 3s linear;
transform: translateX(0%);
}
html:not(.sp) .environment .art7 .col1 .obj2{
transform: translateX(0);
}
html:not(.sp) .environment .art7 .col1.visible .obj2{
transition: transform 3s linear;
transform: translateX(-38%);
}
html:not(.sp) .environment .art7 .col1 .obj2:before{
opacity: 1;
}
html:not(.sp) .environment .art7 .col1.visible .obj2:before{
transition: opacity 0.1ms 3s linear;
opacity: 0;
}
html:not(.sp) .environment .art7 .col1 .obj3{
opacity: 0;
}
html:not(.sp) .environment .art7 .col1.visible .obj3{
transition: opacity 0.2s linear 5.5s;
opacity: 1;
}

html:not(.sp) .environment .art8 .col1 .obj1{
transform: translateX(-100px);
}
html:not(.sp) .environment .art8 .col1 .img1 li{
transition-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
transform: translateY(-200px);
}
html:not(.sp) .environment .art8 .col1 .img1 li:nth-of-type(3){transition-delay: 0.1s}
html:not(.sp) .environment .art8 .col1 .img1 li:nth-of-type(1){transition-delay: 0.2s}
html:not(.sp) .environment .art8 .col1 .img1 li:nth-of-type(2){transition-delay: 0.3s}
html:not(.sp) .environment .art8 .col1 .img1 li:nth-of-type(4){transition-delay: 0.4s}

html:not(.sp) .anniversary .col1 .txt1,
html:not(.sp) .anniversary .col1 .txt2,
html:not(.sp) .anniversary .col1 .txt3,
html:not(.sp) .anniversary .col1 .txt4,
html:not(.sp) .anniversary .last_bn h2,
html:not(.sp) .anniversary .last_bn p,
html:not(.sp) .anniversary .last_bn figure{
opacity: 0;
transform: translateY(100px);
}
html:not(.sp) .anniversary .img1:before,
html:not(.sp) .anniversary .col1 .txt5,
html:not(.sp) .anniversary .col1 .txt6,
html:not(.sp) .anniversary .last_bn h2,
html:not(.sp) .anniversary .last_bn p,
html:not(.sp) .anniversary .last_bn figure{
opacity: 0;
}
html:not(.sp) .anniversary .col1 .txt1,
html:not(.sp) .anniversary .col1.visible .txt2,
html:not(.sp) .anniversary .col1.visible .txt3,
html:not(.sp) .anniversary .col1.visible .txt4,
html:not(.sp) .anniversary .col1.visible .img1:before,
html:not(.sp) .anniversary .col1.visible .txt5,
html:not(.sp) .anniversary .col1.visible .txt6{
transition: opacity 0.75s ease, transform 0.75s ease;
}
html:not(.sp) .anniversary .col1.visible .txt1{ transition-delay: 0s;}
html:not(.sp) .anniversary .col1.visible .txt2{ transition-delay: 0.2s;}
html:not(.sp) .anniversary .col1.visible .txt3{ transition-delay: 0.4s;}
html:not(.sp) .anniversary .col1.visible .txt4{ transition-delay: 0.6s;}
html:not(.sp) .anniversary .col1.visible .img1:before{ transition-delay: 2s; transition-duration: 2s;}
html:not(.sp) .anniversary .col1.visible .txt5{ transition-delay: 1.5s; transition-duration: 2s;}
html:not(.sp) .anniversary .col1.visible .txt6{ transition-delay: 2s; transition-duration: 2s;}
html:not(.sp) .anniversary .last_bn.visible h2{ opacity: 1; transition-duration: 1s;}
html:not(.sp) .anniversary .last_bn.visible p{  opacity: 1; transition-duration: 1s;}
html:not(.sp) .anniversary .last_bn.visible figure{  opacity: 1; transition-duration: 1s;}



html:not(.sp) .anniversary .anniversary_bg > li{
transition: opacity 0.75s ease, transform 0.75s ease;
opacity: 0;
}
html:not(.sp) .anniversary .anniversary_bg > li:nth-of-type(1){transform: rotate(0);}
html:not(.sp) .anniversary .anniversary_bg > li:nth-of-type(2){transform: rotate(-15deg);}
html:not(.sp) .anniversary .anniversary_bg > li:nth-of-type(3){transform: rotate(-15deg);}
html:not(.sp) .anniversary .anniversary_bg > li:nth-of-type(4){transform: rotate(-15deg);}
html:not(.sp) .anniversary .visible .anniversary_bg > li{
opacity: 1;
transform: rotate(0);
}
html:not(.sp) .anniversary .visible .anniversary_bg > li:nth-of-type(1){transition-delay: 0.5s;}
html:not(.sp) .anniversary .visible .anniversary_bg > li:nth-of-type(2){transition-delay: 0.9s;}
html:not(.sp) .anniversary .visible .anniversary_bg > li:nth-of-type(3){transition-delay: 1.3s;}
html:not(.sp) .anniversary .visible .anniversary_bg > li:nth-of-type(4){transition-delay: 1.7s;}

/*===========================================
animate
===========================================*/
html:not(.sp) .shiraishi .txt{opacity: 0;}
html:not(.sp) .shiraishi .visible .txt{animation: slideInY 1s 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;}
html:not(.sp) .shiraishi .no1{opacity: 0;}
html:not(.sp) .shiraishi .visible .no1{animation: slideInY 1s 0.8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;}
html:not(.sp) .shiraishi .no1 .door2{opacity: 0;}
html:not(.sp) .shiraishi .visible .no1 .door1{transition-delay: 1.8s; opacity: 0;}
html:not(.sp) .shiraishi .visible .no1 .door2{transition-delay: 1.8s; opacity: 1;}

html:not(.sp) .shiraishi .visible .no1:before{animation: shine 5s 2.2s linear forwards;}

html:not(.sp) .shiraishi .shoes_box{opacity: 0}
html:not(.sp) .shiraishi .visible .shoes_box{animation:arrow2 0.85s 1s cubic-bezier(0.755, 0.050, 0.855, 0.060) forwards;}

.shiraishi .shoes_box{opacity: 0}
.shiraishi .visible .shoes_box{animation:arrow2 0.85s 1s cubic-bezier(0.755, 0.050, 0.855, 0.060) forwards;}

.shiraishi .kemuri1{visibility: hidden; display: none;}
.shiraishi .kemuri1 img{visibility: hidden;}
.shiraishi .kemuri2{display: none;}
html:not(.sp) .shiraishi .visible .kemuri1{visibility: visible; display: block;}
html:not(.sp) .shiraishi .visible .kemuri1 img{visibility: visible;}

@media all and (-ms-high-contrast: none) {
	.shiraishi .kemuri1{display: none !important;}
	html:not(.sp) .shiraishi .visible .kemuri2{visibility: visible; display: block;}
	html:not(.sp) .shiraishi .visible .kemuri2 img{visibility: visible;}
}

html:not(.sp) .shiraishi .step .obj1{opacity: 0;}
html:not(.sp) .shiraishi .visible .step .obj1{animation: arrow 0.85s 1.2s cubic-bezier(0.755, 0.050, 0.855, 0.060) forwards;}
html:not(.sp) .shiraishi .step .obj2{opacity: 0;}
html:not(.sp) .shiraishi .visible .obj2{animation: arrow 0.85s 1.8s cubic-bezier(0.755, 0.050, 0.855, 0.060) forwards;}
html:not(.sp) .shiraishi .step .obj3{opacity: 0;}
html:not(.sp) .shiraishi .visible .step .obj3{animation: arrow 0.85s 2.4s cubic-bezier(0.755, 0.050, 0.855, 0.060) forwards;}
html:not(.sp) .shiraishi .step .obj4{opacity: 0;}
html:not(.sp) .shiraishi .visible .step .obj4{animation: arrow 0.85s 3.0s cubic-bezier(0.755, 0.050, 0.855, 0.060) forwards;}
html:not(.sp) .shiraishi .step .obj5{opacity: 0;}
html:not(.sp) .shiraishi .visible .step .obj5{animation: arrow 0.85s 3.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) forwards;}
html:not(.sp) .shiraishi .step .obj6{opacity: 0;}
html:not(.sp) .shiraishi .visible .step .obj6{animation: arrow 0.85s 4.2s cubic-bezier(0.755, 0.050, 0.855, 0.060) forwards;}

html:not(.sp) .work .art7 .col1 .img1 .obj3{opacity: 0;}
html:not(.sp) .work .art7 .col1.visible .img1 .obj3{animation: arrow 0.85s 1s cubic-bezier(0.755, 0.050, 0.855, 0.060) forwards;}
html:not(.sp) .work .art7 .col1 .img1 .obj4{opacity: 0;}
html:not(.sp) .work .art7 .col1.visible .img1 .obj4{animation: arrow 0.85s 1.5s cubic-bezier(0.755, 0.050, 0.855, 0.060) forwards;}
html:not(.sp) .work .art7 .col1 .img1 .obj5{opacity: 0;}
html:not(.sp) .work .art7 .col1.visible .img1 .obj5{animation: arrow 0.85s 2s cubic-bezier(0.755, 0.050, 0.855, 0.060) forwards;}

html:not(.sp) .environment .art4 .col1 .txt1:after{opacity: 0;}
html:not(.sp) .environment .art4 .col1.visible .txt1:after{animation: bounceGummy 0.65s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;}
html:not(.sp) .environment .art4 .col1 .txt2:after{opacity: 0;}
html:not(.sp) .environment .art4 .col1.visible .txt2:after{animation: bounceGummy 0.65s 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;}

html:not(.sp) .environment .art5 .col1 .img1:after{animation: anm-leave2 0.75s steps(2) infinite;}

html:not(.sp) .environment .art10 .col1 .img1{opacity: 0;}
html:not(.sp) .environment .art10 .col1.visible .img1{animation: slideInY 1s 0.8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;}
html:not(.sp) .environment .art10 .col1 .img2{opacity: 0;}
html:not(.sp) .environment .art10 .col1.visible .img2{
	 opacity: 1;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	transition-delay: 1.3s;
}
html:not(.sp) .environment .art10 .col1 .img3{opacity: 0;}
html:not(.sp) .environment .art10 .col1.visible .img3{
	 opacity: 1;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	transition-delay: 1.6s;
}


html:not(.sp) .shiraishi .no1:after{animation: anm-leave2 0.75s steps(2) infinite;}

html:not(.sp) .work .art5 figure:after{animation: anm-leave2 1.2s steps(2) infinite;}

html:not(.sp) .result_ttl:after{
transform: scaleY(0);
transform-origin: left;
}
html:not(.sp) .result_ttl.visible:after{ animation: addLine 0.35s 0.35s linear forwards;}
@keyframes addLine {
    0%{transform: scaleX(0)}
    100%{transform: scaleX(1)}
}

html:not(.sp) .front .inner{ animation: bgGradient 30s ease infinite;}
@keyframes bgGradient {
    0%{background-position:67% 0%}
    50%{background-position:34% 100%}
    100%{background-position:67% 0%}
}

html:not(.sp) .about .art1 .col2 .obj3{ animation: anm-leave2 1s steps(2) infinite;}

html:not(.sp) .about .art2 .bg.visible .obj1{ animation: anm-track1 20s infinite;}
@keyframes anm-track1 {
  0%{
		transform: translateX(200px);
	}
  20%{
		transform: translateX(-20px);
	}
  35%{
		transform: translateX(-20px);
	}
	100%{
		transform: translateX(-200%);
	}
}

html:not(.sp) .about .art2 .obj1 img{ animation: anm-track2 1s infinite alternate;}
@keyframes anm-track2 {
  0%{
		transform: translateY(0%);
	}
  10%{
		transform: translateY(0.5%);
	}
  20%{
		transform: translateY(0%);
	}
  80%{
		transform: translateY(0%);
	}
  90%{
		transform: translateY(1%);
	}
	100%{
		transform: translateY(1%);
	}
}

html:not(.sp) .about .art2 .bg:before{ animation: anm-track-bg1 90s infinite linear;}
@keyframes anm-track-bg1 {
  0%{
		background-position: -1382px 40px;
	}
  100%{
		background-position: 40px 40px;
	}
}
html:not(.sp) .about .art2 .bg:after{ animation: anm-track-bg2 40s infinite linear;}
@keyframes anm-track-bg2 {
  0%{
		background-position: left -2600px bottom 30px;
	}
}



html:not(.sp) .about .art3 .col1 .txt1 p{
opacity: 0;
}
html:not(.sp) .about .art3 .col1.visible .txt1 p{
animation:  bounceGummy 450ms linear forwards;
}
html:not(.sp) .about .art3 .col1 .img1 li{
opacity: 0;
}
html:not(.sp) .about .art3 .col1.visible .img1 li{
animation:  bounceGummy 450ms linear forwards;
}
html:not(.sp) .about .art3 .col1 .img1 li:nth-of-type(1){ animation-delay: 0.5s;}
html:not(.sp) .about .art3 .col1 .img1 li:nth-of-type(2){ animation-delay: 0.6s;}
html:not(.sp) .about .art3 .col1 .img1 li:nth-of-type(3){ animation-delay: 0.7s;}
html:not(.sp) .about .art3 .col1 .img1 li:nth-of-type(4){ animation-delay: 0.8s;}
html:not(.sp) .about .art3 .col1 .img1 li:nth-of-type(5){ animation-delay: 0.9s;}
html:not(.sp) .about .art3 .col1 .img1 li:nth-of-type(6){ animation-delay: 1s;}
html:not(.sp) .about .art3 .col1 .img1 li:nth-of-type(7){ animation-delay: 1.1s;}
html:not(.sp) .about .art3 .col1 .img1 li:nth-of-type(8){ animation-delay: 1.2s;}
html:not(.sp) .about .art3 .col1 .img1 li:nth-of-type(9){ animation-delay: 1.3s;}
html:not(.sp) .about .art3 .col1 .img1 li:nth-of-type(10){ animation-delay: 1.4s;}
html:not(.sp) .about .art3 .col2 .txt2 > * > *{
opacity: 0;
}
html:not(.sp) .about .art3 .col2.visible .txt2 > * > *{
animation:  bounceGummy 450ms linear forwards;
}
html:not(.sp) .about .art3 .col2 .txt2 > *:nth-of-type(1) > *{
animation-delay: 0.1s;
}
html:not(.sp) .about .art3 .col2 .txt2 > *:nth-of-type(2) > *{
animation-delay: 0.2s;
}
html:not(.sp) .about .art3 .col2 .txt2 > *:nth-of-type(3) > *{
animation-delay: 0.3s;
}
html:not(.sp) .work .art2 .col1 .img1{
opacity: 0;
}
html:not(.sp) .work .art2 .col1.visible .img1{
animation:  bounceGummy 0.45s 0.35s linear forwards;
}
html:not(.sp) .work .art8 .col1 .img1{
opacity: 0;
}
html:not(.sp) .work .art8 .col1.visible .img1{
animation:  bounceGummy 0.45s 0.35s linear forwards;
}
@keyframes bounceGummy{
  0%{
		opacity: 0;
    transform: translateY(-500%) scale(1, 1.5);
  }
  50%{
		opacity: 1;
    transform: translateY(0) scale(1, 1);
  }
  80%{
		opacity: 1;
    transform: translateY(-20px) scale(0.98, 1.15);
  }
  100%{
		opacity: 1;
    transform: translateY(0) scale(1, 1);
  }
}

html:not(.sp) .work .art1 .col1 li img{
opacity: 0;
}
html:not(.sp) .work .art1 .col1.visible li img{
opacity: 0;
animation:  bounceFix 450ms linear forwards;
}
html:not(.sp) .work .art1 .col1.visible li:nth-of-type(1) img{animation-delay: 0s;}
html:not(.sp) .work .art1 .col1.visible li:nth-of-type(2) img{animation-delay: 0.05s;}
html:not(.sp) .work .art1 .col1.visible li:nth-of-type(3) img{animation-delay: 0.1s;}
html:not(.sp) .work .art1 .col1.visible li:nth-of-type(4) img{animation-delay: 0.15s;}
html:not(.sp) .work .art1 .col1.visible li:nth-of-type(5) img{animation-delay: 0.2s;}
html:not(.sp) .work .art1 .col1.visible li:nth-of-type(6) img{animation-delay: 0.25s;}
html:not(.sp) .work .art1 .col1.visible li:nth-of-type(7) img{animation-delay: 0.3s;}
html:not(.sp) .work .art1 .col1.visible li:nth-of-type(8) img{animation-delay: 0.35s;}
html:not(.sp) .work .art1 .col1.visible li:nth-of-type(9) img{animation-delay: 0.4s;}
html:not(.sp) .work .art1 .col1.visible li:nth-of-type(10) img{animation-delay: 0.45s;}
html:not(.sp) .work .art1 .col1.visible li:nth-of-type(11) img{animation-delay: 0.5s;}
html:not(.sp) .work .art1 .col1.visible li:nth-of-type(12) img{animation-delay: 0.55s;}

@keyframes bounceFix{
  0%{
		opacity: 0;
    transform: scale(1.5);
  }
  45%{
		opacity: 1;
    transform: scale(0.9);
  }
  74%{
		opacity: 1;
    transform: scale(1.1);
  }
  84%{
		opacity: 1;
    transform: scale(1);
  }
  95%{
		opacity: 1;
    transform: scale(1.03);
  }
  100%{
		opacity: 1;
    transform: scale(1, 1);
  }
}

html:not(.sp) .work .art2 .col1.visible .img2 .obj1{
animation:  weight1 0.2s 0.5s linear forwards;
}
@keyframes weight1 {
0% {transform: translateY(0%);}
50% {transform: translateY(8%);}
100% {transform: translateY(0%);}
}
html:not(.sp) .work .art2 .col1.visible .img2 .obj2{
animation:  weight2 0.5s 0.5s linear forwards;
}
@keyframes weight2 {
0% {transform: rotate(0deg);}
30% {transform: rotate(450deg);}
45% {transform: rotate(330deg);}
74% {transform: rotate(370deg);}
84% {transform: rotate(350deg);}
95% {transform: rotate(365deg);}
100% {transform: rotate(360deg);}
}

html:not(.sp) .environment .art5 .col1 .obj2{ animation: anime1 6s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite alternate; }
@keyframes anime1 {
0% {transform: translateY(-15%);}
100% {transform: translateY(15%);}
}

html:not(.sp) .environment .art7 .obj2:before{ animation: anm-overtime 1s steps(4) infinite;}
@keyframes anm-overtime {
  to {
		transform: translateX(-100%);
  }
}
html:not(.sp) .environment .art7 .col1.visible .obj2 img{ animation: anm-overtime2 2s 3s linear;}
@keyframes anm-overtime2 {
  0% {
		opacity: 1;
		transform: scale(1);
  }
	30% {
		opacity: 1;
		transform: scale(1);
  }
  80% {
		opacity: 1;
		transform: scale(0.5);
  }
  100% {
		opacity: 0;
		transform: scale(0.5);
  }
}

html:not(.sp) .environment .art8 .img1 li div{ animation: anm-leave1 0.5s 4s infinite alternate;}
html:not(.sp) .environment .art8 .img1 li:nth-of-type(1) div{ animation-delay: 4.05s}
html:not(.sp) .environment .art8 .img1 li:nth-of-type(3) div{ animation-delay: 4.1s}
@keyframes anm-leave1 {
  to {
		transform: translateY(-10px);
  }
}

html:not(.sp) .environment .art8 .img1 li span{ animation: anm-leave2 1s 4s steps(2) infinite;}
@keyframes anm-leave2 {
  to {
    background-position: 200% bottom;
  }
}


html:not(.sp) .work .art4 .col1 .pin li{
opacity: 0;
}
html:not(.sp) .work .art4 .col1.visible .pin li{
opacity: 0;
animation:  pin 0.5s linear forwards;
transform-origin: bottom center;
}
html:not(.sp) .work .art4 .col1 .pin li:nth-of-type(11){animation-delay: 0.1s;}
html:not(.sp) .work .art4 .col1 .pin li:nth-of-type(10){animation-delay: 0.2s;}
html:not(.sp) .work .art4 .col1 .pin li:nth-of-type(9){animation-delay: 0.3s;}
html:not(.sp) .work .art4 .col1 .pin li:nth-of-type(8){animation-delay: 0.4s;}
html:not(.sp) .work .art4 .col1 .pin li:nth-of-type(7){animation-delay: 0.5s;}
html:not(.sp) .work .art4 .col1 .pin li:nth-of-type(6){animation-delay: 0.6s;}
html:not(.sp) .work .art4 .col1 .pin li:nth-of-type(5){animation-delay: 0.7s;}
html:not(.sp) .work .art4 .col1 .pin li:nth-of-type(4){animation-delay: 0.8s;}
html:not(.sp) .work .art4 .col1 .pin li:nth-of-type(3){animation-delay: 0.9s;}
html:not(.sp) .work .art4 .col1 .pin li:nth-of-type(2){animation-delay: 1s;}
html:not(.sp) .work .art4 .col1 .pin li:nth-of-type(1){animation-delay: 1.1s;}
html:not(.sp) .work .art4 .col1 .pin li:nth-of-type(15){animation-delay: 1.2s;}
html:not(.sp) .work .art4 .col1 .pin li:nth-of-type(14){animation-delay: 1.3s;}
html:not(.sp) .work .art4 .col1 .pin li:nth-of-type(13){animation-delay: 1.4s;}
html:not(.sp) .work .art4 .col1 .pin li:nth-of-type(12){animation-delay: 1.5s;}
@keyframes pin {
  0% {
		opacity: 0;
    transform: translateY(-300px) scaleY(1.2);
  }
	1% {
		opacity: 1;
    transform: translateY(-300px) scaleY(1.2);
  }
	50%{
		opacity: 1;
    transform: translateY(0px) scaleY(1);
	}
	75%{
		opacity: 1;
    transform: translateY(0px) scaleY(0.75);
	}
	100%{
		opacity: 1;
    transform: translateY(0px) scaleY(1);
	}
}

@keyframes arrow {
  0% {
		opacity: 0;
    transform: translateY(-100px);
  }
	1% {
		opacity: 1;
    transform: translateY(-100px);
  }
	50%{
		opacity: 1;
    transform: translateY(0px);
	}
	100%{
		opacity: 1;
    transform: translateY(0px);
	}
}

@keyframes arrow2 {
  0% {
		opacity: 0;
    /*transform: translateY(-400px);*/
	  transform: translate(-100px, -400px)
  }
	1% {
		opacity: 1;
    /*transform: translateY(-400px);*/
	  transform: translate(-100px, -400px)
	}
	50%{
		opacity: 1;
    /*transform: translateY(0);*/
	  transform: translate(0,0)
	}
	100%{
		opacity: 1;
    /*transform: translateY(0);*/
	  transform: translate(0,0)
	}
}

html:not(.sp) .environment .art6 .col1.visible .txt2:before{
animation:  holiday 1s linear forwards;
transform-origin: 80% 42%;
}
@keyframes holiday {
  0% {
		opacity: 1;
    transform: translateY(0) rotate(0) scaleX(1);
  }
	40%{
		opacity: 1;
    transform: translateY(0px) rotate(-19deg) scaleX(0.5);
	}
	100%{
		opacity: 0;
    transform: translateY(-20px) rotate(-40deg) scaleX(-0.4);
	}
}

@keyframes slideInY {
  0% {
		opacity: 0;
    transform: translateY(100px);
  }
	100%{
		opacity: 1;
    transform: translateY(0);
	}
}
@keyframes shine {
    0%{opacity: 1;}
    18%{opacity: 0.3;}
    100%{opacity: 0;}
}


body.open{
top:0 !important;
}
#pagetop.fix{
position: absolute !important;
top: -39px;
}
.sp #pagetop.fix{
top: -29px;
}

@media only screen and (max-width: 1070px){
	.sp .p_t_2em{
		padding-top: 2em !important;
	}
	.sp .p_b_2em{
		padding-bottom: 2em !important;
	}

}