@charset "utf-8";

#splash {
position: fixed;
width: 100%;
height: 100%;
background: #fff;
z-index: 9999999;
text-align:center;
color:#fff;
}
#splash-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#splash-logo img{
width:250px;
}
.splashbg{
display: none;
}
body.appear .splashbg{
display: block;
position:fixed;
z-index: 999;
width: 100%;
height: 100vh;
top: 0;
left: 0;
transform: scaleY(0);
background-color: #81c12e;
animation-name:PageAnime;
animation-duration:1.2s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
}
@keyframes PageAnime{
0% {transform-origin:bottom;transform:scaleY(0);}
50% {transform-origin:bottom;transform:scaleY(1);}
50.001% {transform-origin:top;}
100% {transform-origin:top;transform:scaleY(0);}
}

#wrapper{
opacity: 0;
}
body.appear #wrapper{
animation-name:PageAnimeAppear;
animation-duration:1s;
animation-delay: 0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes PageAnimeAppear{
0% {opacity: 0;}
100% {opacity: 1;}
}

.bgextend{
animation-name:bgextendAnimeBase;
animation-duration:1s;
animation-fill-mode:forwards;
position: relative;
overflow: hidden;
opacity:0;
}
@keyframes bgextendAnimeBase {
from {opacity:0;}
to {opacity:1;}
}

.bgappear{
animation-name:bgextendAnimeSecond;
animation-duration:1s;
animation-delay: 0.6s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes bgextendAnimeSecond{
0% {opacity: 0;}
100% {opacity: 1;}
}

.bgLRextend::before{
animation-name:bgLRextendAnime;
animation-duration:1s;
animation-fill-mode:forwards;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #81c12e;
}
@keyframes bgLRextendAnime{
0% {transform-origin:left;transform:scaleX(0);}
50% {transform-origin:left;transform:scaleX(1);}
50.001% {transform-origin:right;}
100% {transform-origin:right;transform:scaleX(0);}
}

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
from {opacity: 0;transform: translateY(100px);}
to {opacity: 1;transform: translateY(0);}
}

.flipLeft{
animation-name: flipLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
perspective-origin: left center;
opacity:0;
}

@keyframes flipLeftAnime{
from {transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);opacity: 0;}
to {transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);opacity: 1;}
}

.bgLRextendTrigger,
.bgappearTrigger,
.fadeUpTrigger,
.flipLeftTrigger{
opacity: 0;
}

#hero {
overflow-y: hidden;
}
#hero, #hero ul {
position: relative;
}
#hero h2 {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}

#contentLink ul li {
border: 1px solid #000;
padding: 4px;
box-shadow: 8px 8px 0px 0px #dbd8ca;
background: #f3f2ed;
}
#contentLink ul li a {
display: flex;
border: 1px solid #000;
position: relative;
}
#contentLink ul li a div {
width: 50%;
text-align: center;
}
#contentLink ul li a div h2 {
font-weight: 900;
line-height: 1.2em;
}
#contentLink ul li a div h2 span {
font-weight: 700;
}
#contentLink ul li a div h2 > span {
display: block;
}
#contentLink ul li a div > span {
display: block;
width: 90%;
margin: 0 auto;
color: #fff;
font-weight: 700;
background:
linear-gradient(45deg,  transparent 5px, #81c12e 5px),
linear-gradient(135deg, transparent 5px, #81c12e 5px),
linear-gradient(225deg, transparent 5px, #81c12e 5px),
linear-gradient(315deg, transparent 5px, #81c12e 5px);
background-position: bottom left, top left, top right, bottom right;
background-size: 50% 50%;
background-repeat: no-repeat;
}
#contentLink ul li a div > span span {
display: block;
font-weight: 700;
line-height: 100%;
}
#contentLink ul li a img {
width: 50%;
}
#contentLink ul li:first-child a h4 {
position: absolute;
top: 5px;
right: 5px;
z-index: 1;
text-align: center;
border-radius: 50%;
background: #000;
color: #81c12e;
display: grid;
place-items: center;
line-height: 140%;
font-weight: bold;
}

#interview h4 {
width: 90%;
max-width: 1280px;
margin: 0 auto;
font-weight: 700;
}
#staffSlider ul li {
background: #f3f2ed;
border: 1px solid #000;
}
#staffSlider ul li div, #staffSlider ul li div img {
position: relative;
}
#staffSlider ul li div {
z-index: 0;
}
#staffSlider ul li div h5 {
display: table;
background: #000;
color: #fff;
line-height: 100%;
padding: 8px 6px 8px 16px;
position: absolute;
left: 0;
bottom: 20px;
z-index: 1;
letter-spacing: 10px;
}
#staffSlider ul li p {
font-weight: 700;
}
.staff .slick-prev:before, .staff .slick-next:before {
font-family: 'Font Awesome 5 Pro';
opacity: 1;
background: #6a6969;
font-size: 1.6rem;
padding: 8px 13px;
z-index: 10;
}
.staff .slick-next {
right: 38px;
}
.staff .slick-prev:before {content: "\f053";}
.staff [dir='rtl'] .slick-prev:before {content: "\f054";}
.staff .slick-next:before {content: "\f054";}
.staff [dir='rtl'] .slick-next:before {content: "\f053";}

#concept {
background: #000;
color: #fff;
}
#concept .box {
border: 1px solid #fff;
padding: 4px;
}
#concept .box > div {
border: 1px solid #fff;
}
#concept h2, #about h2 {
font-weight: 800;
}
#concept h2 span, #about h2 span {
display: block;
font-weight: 700;
}
#concept h3, #concept h4, #about h3 {
font-weight: 700;
}
#vision h3 {
border-bottom: 1px solid #fff;
}
#philosophy h3 span {
display: block;
}

#message, #csr {
background: #f3f2ed;
}
#message h4 {
font-weight: 700;
}
#message p, #about p {
line-height: 140%;
}
img#ceo {
display: block;
width: 70%;
max-width: 600px;
margin-left: auto;
}

#about, #about > div {
border: 1px solid #000;
}
#about {
padding: 4px;
}
#main-area > section#about {
padding-bottom: 4px;
}
#about ul {
display: flex;
justify-content: space-between;
background: url(../images/town.webp) no-repeat center bottom;
background-size: 100% auto;
}
#about ul li {
box-sizing: border-box;
border: 1px solid #000;
}

#csr h3 {
font-weight: 700;
}
#csr .box > ul li div {
position: relative;
border: 1px solid #000;
padding: 4px;
}
#csr .box > ul li div img {
position: relative;
border: 1px solid #000;
z-index: 0;
}
#csr .box > ul li div p {
position: absolute;
z-index: 1;
text-align: center;
top: 50%;
transform: translateY(-50%);
color: #fff;
width: 100%;
}
#csrDetail article:last-child {
padding-bottom: 0;
}
#csrDetail h3 {
border-bottom: 1px solid #000;
}
#csrDetail ul {
padding-left: 20px;
margin-left: 0;
}
#csrDetail ul li {
list-style-type: disc;
}
#csrDetail ul li span {
display: block;
}

#entry h2 {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#entry h2 div {
font-weight: 700;
}
#entry > ul {
width: 90%;
max-width: 960px;
margin: 0 auto;
}
#entry ul li div {
border: 1px solid #000;
}
#entry > ul > li  {
border: 1px solid #000;
padding: 4px;
box-shadow: 8px 8px 0px 0px #dbd8ca;
}
#entry > ul > li:first-child {
background: #0093d4;
color: #fff;
}
#entry > ul > li:nth-child(2)  {
background: #ffe100;
}
#entry h3 {
width: 50%;
font-weight: 700;
text-align: center;
padding-right: 50%;
}
#entry h3 span {
display: block;
}
#entry p {
text-align: center;
font-weight: 500;
line-height: 100%;
}
#entry > ul > li:first-child h3 {
background: url(../images/career.svg) no-repeat;
background-size: auto 100%;
}
#entry > ul > li:nth-child(2) h3 {
background: url(../images/new.svg) no-repeat;
background-size: auto 100%;
}
#entry ul li ul {
width: 100%;
display: flex;
justify-content: space-between;
}
#entry ul li ul li {
width: 48%;
}
#entry ul li ul li a.btn {
width: 100%;
}

@media screen and (max-width:560px) {
#contentLink {
padding-bottom: 60px;
}
#contentLink ul li:first-child, #entry > ul > li:first-child {
margin-bottom: 40px;
}
#contentLink ul li:first-child a div h2 {
padding: 35px 0 2px;
font-size: 3.3vw;
letter-spacing: 1px;
}
#contentLink ul li:nth-child(2) a div h2 {
padding: 15px 0 4px;
font-size: 6.5vw;
letter-spacing: 1px;
line-height: 110%;
}
#contentLink ul li a div h3 {
font-size: 3vw;
padding-bottom: 4px;
}
#contentLink ul li:first-child a h4 {
width: 20vw;
height: 20vw;
font-size: 4vw;
}
#contentLink ul li a div > span span {
font-size: 3.2vw;
padding: 10px 0;
}

#interview h4 {
font-size: 4.5vw;
margin-bottom: 20px;
}
#staffSlider {
padding-bottom: 20px;
}
#staffSlider ul li {
padding: 10px;
}
#staffSlider ul li div {
margin-bottom: 16px;
}
#staffSlider ul li div h5 {
font-size: 4vw;
}
#staffSlider ul li p {
font-size: 3.8vw;
}
.staff .slick-slide{
margin-right: 5px !important;
margin-left: 5px !important;
}

#concept {
padding-top: 60px;
}
#concept .box > div {
padding: 20px;
}
#concept h2, #about h2 {
padding-bottom: 16px;
font-size: 9vw;
}
#concept h2 span, #about h2 span {
padding-top: 8px;
font-size: 3vw;
}
#vision h3 {
padding-bottom: 30px;
margin-bottom: 30px;
line-height: 240%;
font-size: 5.5vw;
}
#philosophy h3 {
font-size: 6vw;
padding-bottom: 10px;
}
#philosophy h3 span {
font-size: 2.4vw;
letter-spacing: -1px;
}
#concept h4 {
font-size: 4.2vw;
line-height: 240%;
}

#message, #csr, #entry {
padding-top: 60px;
}
#message h4 {
font-size: 5.5vw;
margin-bottom: 30px;
line-height: 200%;
}
#message p {
padding-bottom: 10px;
}

#about {
margin: 60px auto;
}
#about > div {
padding: 20px;
}
#about h3 {
font-size: 5vw;
margin-bottom: 30px;
}
#about p {
padding-bottom: 40px;
}
#about ul {
flex-wrap: wrap;
padding-bottom: 100px;
}
#about ul li {
width: 49%;
margin-bottom: 8px;
}

#csr h3 {
font-size: 5vw;
padding-bottom: 8px;
}
#csr .box > ul li {
padding-bottom: 30px;
}
#csr .box > ul li div p {
font-size: 3.6vw;
line-height: 150%;
}
#csrDetail article {
padding-bottom: 40px;
}
#csrDetail h3 {
margin-bottom: 8px;
}
#csrDetail ul {
padding-bottom: 20px;
}
#csrDetail ul li {
font-size: 3.6vw;
line-height: 140%;
padding-bottom: 5px;
}

#entry h2 {
font-size: 7vw;
padding: 16px 0;
margin-bottom: 16px;
line-height: 150%;
}
#entry h3 {
font-size: 5vw;
margin-bottom: 10px;
}
#entry > ul > li:first-child h3 {
background-position: top right 10vw;
}
#entry > ul > li:nth-child(2) h3 {
background-position: top right 14vw;
}
#entry h3 span {
font-size: 3vw;
}
#entry p {
font-size: 3.2vw;
padding-bottom: 10px;
}
#entry ul li div {
padding: 3vw;
}
}

@media (min-width: 561px){
#contentLink {
padding-bottom: 100px;
}
#contentLink ul li a div > span span {
padding: 16px 0;
}

#interview h4 {
margin-bottom: 30px;
line-height: 180%;
}
#staffSlider {
padding-bottom: 30px;
}
#staffSlider ul li {
padding: 16px;
}
#staffSlider ul li div {
margin-bottom: 24px;
}
.staff .slick-slide{
margin-right: 10px !important;
margin-left: 10px !important;
}

#concept {
padding-top: 100px;
}
#concept .box > div {
padding: 30px;
}
#concept h2, #about h2 {
padding-bottom: 24px;
}
#concept h2 span, #about h2 span {
padding-top: 12px;
}
#vision h3 {
padding-bottom: 40px;
margin-bottom: 40px;
line-height: 180%;
}
#philosophy h3 {
padding-bottom: 16px;
}
#concept h4 {
line-height: 180%;
}

#message, #csr, #entry {
padding-top: 100px;
}
#message h4 {
margin-bottom: 45px;
line-height: 150%;
}
#message p {
line-height: 180%;
font-size: 1.8rem;
padding-bottom: 20px;
}

#about {
margin: 100px auto;
}
#about > div {
padding: 30px;
}
#about h3 {
margin-bottom: 20px;
line-height: 180%;
}
#about p {
line-height: 180%;
font-size: 1.8rem;
padding-bottom: 50px;
}
#about ul {
padding-bottom: 24vw;
}
#about ul li {
width: 24%;
}

#csr h3 {
padding-bottom: 16px;
}
#csr .box > ul li {
padding-bottom: 45px;
}
#csr .box > ul li div p {
line-height: 180%;
}
#csrDetail article {
padding-bottom: 60px;
}
#csrDetail h3 {
margin-bottom: 12px;
}
#csrDetail ul {
padding-bottom: 30px;
}
#csrDetail ul li {
line-height: 180%;
padding-bottom: 10px;
}

#entry h2 {
padding: 24px 0;
margin-bottom: 24px;
line-height: 180%;
}
#entry h3 {
margin-bottom: 20px;
}
#entry p {
padding-bottom: 20px;
}
}

@media (min-width: 561px) and (max-width: 768px){
#hero {
margin-bottom: 60px;
}

#interview h4 {
font-size: 4vw;
}
#staffSlider ul li div h5 {
font-size: 4vw;
}
#staffSlider ul li p {
font-size: 3.5vw;
}

#concept h2, #about h2 {
font-size: 7.7vw;
}
#concept h2 span, #about h2 span {
font-size: 2.4vw;
}
#concept h3 {
font-size: 5vw;
}
#philosophy h3 span {
font-size: 2vw;
}
#concept h4 {
font-size: 3.5vw;
}

#message h4 {
font-size: 5vw;
}

#about h3 {
font-size: 4.4vw;
}

#csr h3 {
font-size: 4vw;
}
#csr .box > ul li div p {
font-size: 3vw;
}
#csrDetail ul li {
font-size: 3vw;
}

#entry h2 {
font-size: 6vw;
}
#entry h3 {
font-size: 4vw;
}
}

@media (min-width: 561px) and (max-width: 1024px){
#contentLink ul li:first-child, #entry > ul > li:first-child {
margin-bottom: 60px;
}
#contentLink ul li:first-child a div h2 {
padding: 40px 0 20px;
font-size: 3.6vw;
letter-spacing: 2px;
}
#contentLink ul li:nth-child(2) a div h2 {
padding: 20px 0;
font-size: 6.5vw;
letter-spacing: 2px;
line-height: 100%;
}
#contentLink ul li a div h3 {
padding-bottom: 20px;
font-size: 2.8vw;
}
#contentLink ul li:first-child a h4 {
width: 100px;
height: 100px;
font-size: 2rem;
}
#contentLink ul li a div > span span {
font-size: 1.6rem;
}

#entry > ul > li:first-child h3 {
background-position: top right 8vw;
}
#entry > ul > li:nth-child(2) h3 {
background-position: top right 12vw;
}
#entry h3 span {
font-size: 2.4vw;
}
#entry p {
font-size: 2.8vw;
}
#entry ul li div {
padding: 2.6vw;
}
}

@media screen and (max-width:768px) {
#hero {
height: calc(100vh - 75px);
}
#hero h2 {
width: 70%;
left: 5%;
}
}

@media screen and (min-width:769px) {
#hero {
height: 600px;
margin-bottom: 100px;
}
#hero h2 {
width: 90%;
left: 50%;
transform: translate(-50%,-50%);
}
#hero h2 img {
width: 70%;
}

#csrDetail img {
display: block;
max-width: 640px;
margin: 0 auto;
}
}

@media (min-width: 769px) and (max-width: 1024px){
#interview h4 {
font-size: 4.5vw;
}
#staffSlider ul li div h5 {
font-size: 3vw;
}
#staffSlider ul li p {
font-size: 2.8vw;
}

#concept h2, #about h2 {
font-size: 5vw;
}
#concept h2 span, #about h2 span {
font-size: 2vw;
}
#concept h3 {
font-size: 4vw;
}
#philosophy h3 span {
font-size: 1.5vw;
}
#concept h4 {
font-size: 3vw;
}

#message h4 {
font-size: 4vw;
}

#about h3 {
font-size: 3.8vw;
}

#csr h3 {
font-size: 3.6vw;
}
#csr .box > ul li div p {
font-size: 3.6vw;
}
#csrDetail ul li {
font-size: 2vw;
}

#entry h2 {
font-size: 5vw;
}
#entry h3 {
font-size: 3.4vw;
}
}

@media screen and (max-width:1024px) {
#contentLink ul li a div h2 > span {
font-size: 9vw;
padding-bottom: 20px;
}
#contentLink ul li a div h2 span span{
font-size: 13vw;
}

#interview h4 {
text-align: center;
}
}

@media screen and (min-width:1025px) {
#contentLink ul, #entry > ul {
display: flex;
justify-content: space-between;
}
#contentLink ul li, #entry > ul > li {
width: 48%;
}
#contentLink ul li:first-child a div h2 {
padding: 50px 0 20px;
font-size: 1.8rem;
letter-spacing: 3px;
}
#contentLink ul li a div h2 > span {
font-size: 4rem;
padding-bottom: 20px;
}
#contentLink ul li a div h2 span span{
font-size: 6rem;
}
#contentLink ul li:nth-child(2) a div h2 {
padding: 20px 0 16px;
font-size: 3.3rem;
letter-spacing: 3px;
line-height: 110%;
}
#contentLink ul li a div h3 {
padding-bottom: 16px;
font-size: 1.6rem;
line-height: 100%;
}
#contentLink ul li:first-child a h4 {
width: 120px;
height: 120px;
font-size: 2.4rem;
}

#interview h4 {
font-size: 4rem;
}
#staffSlider ul li div h5 {
font-size: 2.6rem;
}
#staffSlider ul li p {
font-size: 1.8rem;
}

#concept h2, #about h2 {
font-size: 5rem;
}
#concept h2 span, #about h2 span {
font-size: 2rem;
}
#concept h3 {
font-size: 4.3rem;
}
#philosophy h3 span {
font-size: 1.6rem;
}
#concept h4 {
font-size: 2.4rem;
}

#message h4 {
font-size: 3.6rem;
}

#about h3 {
font-size: 3.2rem;
}

#csr h3 {
font-size: 2.4rem;
}
#csr .box > ul {
display: flex;
justify-content: space-between;
}
#csr .box > ul li {
width: 32%;
}
#csr .box > ul li div p {
font-size: 1.6rem;
}
#csrDetail ul li {
font-size: 2rem;
}
#csrDetail ul li span {
display: inline;
padding-left: 10px;
}

#entry h2 {
font-size: 5rem;
}
#entry h3 {
font-size: 3.2rem;
}
#entry h3 span {
padding-top: 8px;
font-size: 2.2rem;
}
#entry > ul > li > div {
height: 100%;
box-sizing: border-box;
padding: 16px;
}
#entry > ul > li:first-child div {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#entry > ul > li:first-child h3 {
background-position: top right 16%;
}
#entry > ul > li:nth-child(2) h3 {
background-position: top right 13%;
}
#entry p {
font-size: 1.6rem;
}
}

@media screen and (min-width:1281px) {
#contentLink ul li:first-child a div h2 {
padding: 70px 0 30px;
}
#contentLink ul li:nth-child(2) a div h2 {
padding: 50px 0 30px;
}
}