@charset "UTF-8";

/* base
----------------------------------------- */
.wrapper > .container > .contentWrap {
overflow: hidden;
}


/* Firstview
----------------------------------------- */
#Firstview {
position: relative;
overflow: hidden;
object-fit: cover;
}
#Firstview img {
width: 100%;
height: 100%;
object-fit: cover;
}
#Firstview svg .svg-elem-1 {
stroke-dashoffset: 855.503173828125px;
stroke-dasharray: 855.503173828125px;
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
animation-name: strokeAnime01;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: .3s;
}
@keyframes strokeAnime01 {
0% {
stroke-dashoffset: 855.503173828125px;
}
100% {
stroke-dashoffset: 0;
}
}
#Firstview svg .svg-elem-2 {
stroke-dashoffset: 33.41592653589793px;
stroke-dasharray: 33.41592653589793px;
fill: transparent;
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
animation-name: strokeAnime02;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1.2s;
}
@keyframes strokeAnime02 {
0% {
stroke-dashoffset: 33.41592653589793px;
}
100% {
stroke-dashoffset: 0;
fill: rgb(244, 225, 88);
}
}

/* section
----------------------------------------- */
.section .contentsWrap {
margin-right: auto;
margin-left: auto;
color: #727171;
}
.section h1 {
margin-right: auto;
margin-left: auto;
width: 100%;
display: block;
color: #0e3e98;
text-align: left;
border-bottom: 1px solid #4d69c6;
}
.section h1 .En {
font-family: "Josefin Sans";
font-weight: 400;
font-style: italic;
}
.section h1 .Jp {
font-size: 60%;
font-weight: normal;
font-family: "Noto Sans JP",sans-serif;
}

/* section Animation
------------------------------ */
.section figure.animated {
opacity: 0;
}
.section figure::after {
transform: scale(0.9, 0.9);
}
.section figure.active {
opacity: 1;
animation-fill-mode: forwards;
transition-timing-function: ease-in-out;
animation-delay: 5s;
}
.section figure.active::after {
transform: scale(1,1);
opacity: 1;
animation-delay: 10s;
}

/* About
----------------------------------------- */
#About svg .svg-elem-1 {
stroke-dashoffset: 593.7560424804688px;
stroke-dasharray: 593.7560424804688px;
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
#About svg.active .svg-elem-1 {
stroke-dashoffset: 1187.5120849609375px;
}

/* Staff
----------------------------------------- */
#Staff svg .svg-elem-1 {
stroke-dashoffset: 553.3419799804688px;
stroke-dasharray: 553.3419799804688px;
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
#Staff svg.active .svg-elem-1 {
stroke-dashoffset: 0;
}

#Staff .moreLink.animated::before {
transform-origin: left top;
transform:scale(0, 1);
}
#Staff .moreLink.active::before {
transform-origin: right top;
transform: scale(1, 1);
}




/* Business
----------------------------------------- */
#Business svg .svg-elem-1 {
stroke-dashoffset: 851.7144775390625px;
stroke-dasharray: 851.7144775390625px;
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}
#Business svg.active .svg-elem-1 {
stroke-dashoffset: 0;
}

/* Contact
----------------------------------------- */
#Contact {
background-color: #f4f4f4;
}
#Contact .submit input {
cursor: pointer;
transition: all .3s;
}
#Contact .submit input:hover {
color: #068c80;
}

/* KYOUTSU END // PC BASE ==================== */
@media only screen and (min-width: 1080px){

/* base
============================================== */

/* Firstview
============================================== */
#Firstview {
padding-bottom: 112px;
position: relative;
overflow: hidden;
}
#Firstview > svg {
width: 70%;
height: auto;
position: absolute;
top: 68%;
left: -10%;
}


/* slideImages
============================================== */
.slideImages {
margin-bottom: min(6vw,200px);
width: 100%;
}
.slideImages .slick-list {
padding: 0!important;
}
.slideImages div {
margin: 0;
}
.slideImages div img {
height: auto !important;
width: 100%;
object-fit: cover;
}
.slideImages .slick-track {
display: flex;
}
.slideImages .slick-slide {
height: auto !important;
}

/* section
============================================== */
.section {
position: relative;
z-index: 1;
}
.section::before {
content: '';
height: 100%;
display: block;
background-color: #c0d1ea;
position: absolute;
top: 0;
z-index: 0;
}
.section .contentsWrap {
margin-right: auto;
margin-left: auto;
max-width: 936px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
position: relative;
z-index: 2;
}
.section h1 {
margin-bottom: 0.8em;
}
.section h1 .En {
margin-right: 0.7em;
font-size: 50px;
}
.section h1 .Jp {
font-size: 20px;
}
.section .contentsWrap .colBlk {
width: 50%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.section .contentsWrap .colBlk .txtBlk {
margin-bottom: max(6vw,80px);
}
.section .contentsWrap .moreLink {
margin-bottom: min(6vw,30px);
}
.section:nth-child(even) .contentsWrap .colBlk:first-of-type {
order: 2;
}
.section:nth-child(even) .contentsWrap .colBlk:last-of-type {
order: 1;
}
.section .txtBlk {
width: 90%;
line-height: 2;
}
.section:nth-child(even) .contentsWrap h1 {
margin-right: 0;
margin-left: auto;
padding-left: 10%;
}
.section:nth-child(even) .contentsWrap .txtBlk {
margin-right: 0;
margin-left: auto;
box-sizing: border-box;
}
.section:nth-child(even) .contentsWrap .moreLink {
margin-right: 0;
margin-left: auto;
}
.section .moreLink {
width: 90%;
font-size: 20px;
}
.section .contentsWrap .colBlk figure {
position: relative;
}
.section .contentsWrap .colBlk figure img {
position: relative;
z-index: 1;
}
.section .contentsWrap .colBlk figure::after {
content: '';
background-color: rgba(25,72,185,0.8);
position: absolute;
z-index: 0;
}
.section::after {
content: '';
display: inline-block;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
z-index: 2;
}

/* About
============================================== */
#About {
margin-bottom: 120px;
padding-top: 80px;
padding-bottom: 100px;
}
#About::before {
content: '';
width: 38%;
right: 0;
}
#About > svg {
width: 35%;
height: auto;
position: absolute;
bottom: 15%;
right: -5%;
z-index: 3;
}
#About .contentsWrap .colBlk figure::after {
width: 90%;
height: 105%;
top: 10%;
left: 30%;
}

/* Staff
============================================== */
#Staff {
margin-bottom: 200px;
padding-top: 80px;
padding-bottom: 50px;
}
#Staff::before {
content: '';
width: 42%;
left: 0;
}
#Staff > svg {
width: 28%;
height: auto;
position: absolute;
top: 30%;
left: -3%;
z-index: 3;
}
#Staff .contentsWrap .colBlk figure::after {
width: 76%;
height: 105%;
top: 20%;
right: 40%;
}

/* Business
============================================== */
#Business {
margin-bottom: 200px;
padding-top: 35px;
padding-bottom: 80px;
}
#Business::before {
content: '';
width: 45%;
right: 0;
}
#Business > svg {
width: 40%;
height: auto;
position: absolute;
top: 15%;
right: -5%;
z-index: 3;
}
#Business .contentsWrap .colBlk figure::after {
width: 90%;
height: 105%;
left: 15%;
bottom: 15%;
}

/* Contact
============================================== */
#Contact {
padding-top: 100px;
padding-bottom: 100px;
}


}/* PC END // SP BASE |||||||||||||||||||||||||||||| */
@media only screen and (max-width: 1079px){

body {
padding-top: 70px;
}


/* Firstview
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
#Firstview {
position: relative;
overflow: hidden;
}
#Firstview > svg {
width: 70%;
height: auto;
position: absolute;
top: 83%;
left: -10%;
}


/* section
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
.section {
position: relative;
z-index: 1;
overflow: hidden;
}
.section::before {
content: '';
height: 100%;
display: block;
background-color: #c0d1ea;
position: absolute;
top: 0;
z-index: 0;
}
.section .contentsWrap {
width: 100%;
position: relative;
z-index: 2;
}
.section h1 {
margin-bottom: 0.8em;
}
.section h1 .En {
margin-right: 0.4em;
font-size: min(10vw,35px);
}
.section h1 .Jp {
font-size: min(6vw,18px);
}
.section .contentsWrap .colBlk {
box-sizing: border-box;
}
.section .contentsWrap .colBlk .txtBlk {
margin-bottom: min(10vw,80px);
}
.section .contentsWrap .moreLink {
margin-bottom: min(5vw,20px);
}
.section .txtBlk {
width: 90%;
line-height: 2;
font-size: min(3.5vw,26px);
}
.section:nth-child(even) .contentsWrap h1 {
margin-right: 0;
margin-left: auto;
}
.section:nth-child(even) .contentsWrap .txtBlk {
margin-right: 0;
margin-left: auto;
box-sizing: border-box;
}
.section:nth-child(even) .contentsWrap .moreLink {
margin-right: 0;
margin-left: auto;
}
.section .moreLink {
width: 90%;
font-size: min(3.5vw,30px);
}
.section .contentsWrap .colBlk figure {
margin-right: auto;
margin-left: auto;
width: 85%;
position: relative;
}
.section .contentsWrap .colBlk figure img {
position: relative;
z-index: 1;
}
.section .contentsWrap .colBlk figure::after {
content: '';
background-color: rgba(25,72,185,0.8);
position: absolute;
z-index: 0;
}
.section::after {
content: '';
display: inline-block;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
z-index: 2;
}

/* About
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
#About {
margin-bottom: 60px;
padding-bottom: 100px;
}
#About::before {
content: '';
width: 60%;
left: 0;
}
#About > svg {
width: 70%;
height: auto;
position: absolute;
bottom: 5%;
right: -5%;
z-index: 3;
}
#About .contentsWrap .colBlk figure::after {
width: 90%;
height: 100%;
top: 10%;
left: 30%;
}
#About .colBlk:first-of-type {
padding-top: 40px;
padding-bottom: 70px;
background-color: #ffffff;
}
#About h1 {
margin-right: auto;
margin-left: auto;
max-width: 90%;
}
#About .txtBlk {
margin-right: auto;
margin-left: auto;
}
#About .moreLink {
margin-right: auto;
margin-left: auto;
max-width: 90%;
display: block;
}
#About .colBlk:last-of-type {
padding-top: 40px;
}


/* Staff
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
#Staff {
padding-bottom: 100px;
}
#Staff::before {
content: '';
width: 65%;
right: 0;
top: -6%;
}
#Staff > svg {
width: 60%;
height: auto;
position: absolute;
bottom: 10%;
left: -5%;
z-index: 3;
}
#Staff .contentsWrap .colBlk figure::after {
width: 108%;
height: 100%;
bottom: -10%;
left: -50%;
}
#Staff .colBlk:first-of-type {
padding-bottom: 70px;
background-color: #ffffff;
}
#Staff h1 {
margin-right: auto;
margin-left: auto;
max-width: 90%;
}
#Staff .txtBlk {
margin-right: auto;
margin-left: auto;
}
#Staff .moreLink {
margin-right: auto;
margin-left: auto;
max-width: 90%;
display: block;
}
#Staff .colBlk:last-of-type {
padding-top: 80px;
}

/* Business
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
#Business {
margin-bottom: 50px;
padding-bottom: 80px;
}
#Business::before {
content: '';
width: 85%;
top: -3%;
left: 0;
}
#Business > svg {
width: 70%;
height: auto;
position: absolute;
bottom: 2%;
right: -5%;
z-index: 3;
}
#Business .contentsWrap .colBlk figure::after {
width: 120%;
height: 100%;
right: -50%;
bottom: -20%;
}
#Business .colBlk:first-of-type {
padding-bottom: 70px;
background-color: #ffffff;
}
#Business h1 {
margin-right: auto;
margin-left: auto;
max-width: 90%;
}
#Business .txtBlk {
margin-right: auto;
margin-left: auto;
}
#Business .moreLink {
margin-right: auto;
margin-left: auto;
max-width: 90%;
display: block;
}
#Business .colBlk:last-of-type {
padding-top: 80px;
}



/* Company
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
#Company {
padding-bottom: 100px;
}
#Company .image {
margin-bottom: max(3vw,15px);
width: 100%;
min-height: 70vh; 
overflow: hidden;
position: relative;
}
#Company .image img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#Company .catch {
margin-bottom: max(3vw,20px);
font-size: clamp(14px, 3vw, 26px);
}
#Company .moreLink {
min-width: 90%;
}

/* Recruit
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
#Recruit {
padding-top: 70px;
padding-bottom: 180px;
}
#Recruit h1 {
margin-right: auto;
margin-left: auto;
max-width: 90%;
}
#Recruit .contentsWrap {
margin-right: auto;
margin-left: auto;
max-width: 90%;
display: flex;
flex-wrap: wrap;
position: relative;
}
#Recruit .contentsWrap .leftBlk {
width: 100%;
order: 2;
}
#Recruit .contentsWrap .rightBlk {
width: 100%;
order: 1;
}
#Recruit h2 {
margin-bottom: max(4vw,0.4em);
font-size: max(4vw, 22px);
}
#Recruit .txtBlk {
margin-bottom: max(4vw,0.4em);
font-size: max(4vw, 18px);
}
#Recruit .recruitSlider {
width: 100%;
overflow: hidden;
aspect-ratio: 1/1;
}
#Recruit .moreLink {
margin: auto;
min-width: 90%;
position: absolute;
right: 0;
left: 0;
top: 105%;
}

/* Contact
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
#Contact {
padding-top: 100px;
padding-bottom: 100px;
}
#Contact #GeneralForm > .contentsWrap {
max-width: 100%;
}




}/* SP END |||||||||||||||||||||||||||||||||||||||| */