@charset "UTF-8";

/* Base */
html { font-family: "Ropa Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; font-size: 16px; line-height: 1.5; }
body { background-color: rgb(255, 255, 255); color: rgb(62, 61, 60); min-width: 1080px; font-family: "osaka";}
h1, h2, h3, p, ul { margin: 0; }
ul { padding-left: 0; }
ul li { list-style-type: none; }
a { color: inherit; text-decoration: none; }
img { vertical-align: middle; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }


.recruit-top{
width: 100%;
margin-top: 80px;
padding-bottom: 90px;
}
.recruit-top .roll{
color: #fff;
}
.person .roll{
color: #fff;
}
.hukurikousei .roll{
color: #fff;
}
.toprecruit-slider {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
max-width: 100%;
z-index: 1000000;
}

.toprecruit-slider div {
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 550px;
border-radius : 250px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
z-index: 10;
opacity: 0;
animation-name: slide-fade;
animation-duration: 15s;
animation-iteration-count: infinite;
}

@keyframes slide-fade {
0%{
opacity: 0;
}
20%{
opacity: 1;
}
80%{
opacity: 0;
}
100%{
opacity: 0;
z-index: 0;
}
}
.toprecruit-slider div:first-of-type{
background-image: url(../material/slide-3.png);
}
.toprecruit-slider div:nth-of-type(2){
background-image: url(../material/slide-1.png);
animation-delay: 5s;
}
.toprecruit-slider div:last-of-type{
background-image: url(../material/slide-2.png);
animation-delay: 10s;
}
.recruit-logo{
position: fixed;
width: 200px;
top: 10px;
right: 30px;
}
.recruit-logo img{
width: 100%;
}
.recruit-menu{
margin-top: 50px;
}
.recruit-menu li{
margin-bottom: 20px;
border-bottom: 2px solid;
}

.top-movie video{
width: 30%;
margin-left: 10%;
}]


.toprecruit-img2{
position: absolute;
right: 0px;
top:0px;
}
.toprecruit-img2 img{
display: none;
}
.toprecruit-slider2 {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
max-width: 100%;
z-index: 1000000;
}

.toprecruit-slider2 div {
position: absolute;
top: 0;
right: 0;
width: 600px;
height: 650px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
z-index: 10;
opacity: 0;
animation-name: slide-fade2;
animation-duration: 15s;
animation-iteration-count: infinite;
}

@keyframes slide-fade2 {
0%{
opacity: 0;
}
20%{
opacity: 1;
}
80%{
opacity: 0;
}
100%{
opacity: 0;
z-index: 0;
}
}
.toprecruit-slider2 div:first-of-type{
background-image: url(../material/team1.jpg);
}
.toprecruit-slider2 div:nth-of-type(2){
background-image: url(../material/team2.jpg);
animation-delay: 5s;
}
.toprecruit-slider2 div:last-of-type{
background-image: url(../material/team1.jpg);
animation-delay: 10s;
}
.top-catch{
margin-top: 90px;
color: #fff;
text-align: left;
}
.top-catch-recruit{
position: absolute;
top: 50px;
right: 8%;
margin-bottom: 40px;
font-size: 20px;
color: #262504;
z-index: 10000000;
}
.top-catch h2{
margin-bottom: 50px;
}
.top-catch-catch{
width: 30%;
margin: 20px auto 90px;
}
.top-catch-catch img{
width: 100%;
}
.top-catch-recruit h2{
font-size: 40px;
margin-top: 20px;
}
.top-catch-recruit-text{
margin-top: 40px;
font-size: 15px;
line-height: 30px;
}
.top-catch-under h1{
background: linear-gradient(to right,#e60000,#f39800,#fff100,#009944,#0068b7,#1d2088,#920783);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 80px;
font-weight: bold;
display: inline-block;
margin-top: 130px;
}
.top-catch-under img{
width: 90%;
}
.hukurikousei img{
width: 100%;
}
.hukurikousei li{
width: 30%;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 40px;
display: inline-block;
}
.text-fadein span{
display: inline-block;
position: relative;
}
.text-fadein span:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #ff0;
-webkit-transition: all .9s linear;
-o-transition: all .9s linear;
transition: all .9s linear;
}
.text-fadein.active span:before {
width: 0%;
}





.section1-menu{
margin-top: 50px;
}
.section1-menu img{
width: 100%;
height: 100%;
}
.section1-menu-text{
position: absolute;
width: 100%;
bottom: 0px;
}
.section1-menu-text h3{
padding-top: 320px;
font-size: 1.8em;
margin-bottom: 10px;
}
.section1-menu-text p{
color: #fff;
}
.w100p{
width: 100px;
float: left;
}
.w100chousei{
width: calc(100% - 100px);
float: left;
}


.recruit-catch{
text-align: center;
margin-bottom: 50px;
color: #000;
float: center;
}
.recruit-catch p{
margin-bottom: 15px;
}
.recruit-catch img{
width: 100%;
}
.recruit-catch ul{
margin-top: 130px;
}
.recruit-catch li{
display: inline-block;
width: 24%;
}
.top-menu{
position: fixed;
width: 100px;
top: 220px;
background-color: #101937;
color: #fff;
background-size: 100% 100%;
writing-mode: vertical-rl;
border-radius: 0px 10px 10px 0px;
z-index: 10000000;
}
.top-menu li{
display: inline-block;
margin-bottom: 40px;
font-size: 18px;
margin-right: 40px;
font-weight:bold;
}

.history-wide{
width: 800px;
margin: 0 auto;
}

.history{
margin-top: 90px;
list-style: none;
}
.history > li {
margin-bottom: 60px;
}

/* for Desktop */
@media ( min-width : 640px ){
.history > li {
overflow: hidden;
margin: 0;
position: relative;
}
.timeline-date {
width: 110px;
float: left;
margin-top: 20px;
}
.timeline-content {
width: 75%;
float: left;
border-left: 3px #101937 solid;
padding-left: 30px;
padding-bottom: 80px;
padding-top: 15px;
}
.timeline-content:before {
content: '';
width: 12px;
height: 12px;
background: #ff0;
position: absolute;
left: 106px;
top: 24px;
border-radius: 100%;
}
}
.history img{
width: 100%;
}
.history-photo1{
position: absolute;
width: 210px;
top: 40px;
right: -200px;
}
.history-photo2{
position: absolute;
width: 250px;
top: 300px;
right: -140px;
}
.history-photo3{
position: absolute;
width: 330px;
top: 590px;
right: -100px;
}
.history-photo1 img{
width: 100%;
}
.history-photo2 img{
width: 100%;
}
.history-photo3 img{
width: 100%;
}
.count{
margin-top: 90px;
}

.countblock {
display: grid;
place-items: center;
border: #6fc173 1px solid;
margin: 0 auto;
padding-top: 60px;
padding-bottom: 90px;
}
.countblock p{
font-size: 22px;
}
.countblock h2{
color: #001b7d;
}

@property --count {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}

.countUp {
counter-set: countUp var(--count);
animation: countUp 3.6s 1;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(1, 0.4, 0.2, 1);
font-variant-numeric: tabular-nums;
font-size: 3.5rem;
}
.countUp::after {
content: counter(countUp) "年";
}

@keyframes countUp {
100% {
--count: 2011;
}
}


.countUp1 {
counter-set: countUp1 var(--count);
animation: countUp1 3.6s 1;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(1, 0.4, 0.2, 1);
font-variant-numeric: tabular-nums;
font-size: 3.5rem;
}
.countUp1::after {
content: counter(countUp1) "人";
}

@keyframes countUp1 {
100% {
--count: 150;
}
}


.countUp2 {
counter-set: countUp2 var(--count);
animation: countUp2 3.6s 1;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(1, 0.4, 0.2, 1);
font-variant-numeric: tabular-nums;
font-size: 3.5rem;
}
.countUp2::after {
content: counter(countUp2) "億円";
}

@keyframes countUp2 {
100% {
--count: 10;
}
}
.countUp3 {
counter-set: countUp3 var(--count);
animation: countUp3 3.6s 1;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(1, 0.4, 0.2, 1);
font-variant-numeric: tabular-nums;
font-size: 3.5rem;
}
.countUp3::after {
content: counter(countUp3) "歳";
}

@keyframes countUp3 {
100% {
--count: 25;
}
}


.countUp4 {
counter-set: countUp4 var(--count);
animation: countUp4 3.6s 1;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(1, 0.4, 0.2, 1);
font-variant-numeric: tabular-nums;
font-size: 3.5rem;
}
.countUp4::after {
content: counter(countUp4) "年";
}

@keyframes countUp4 {
100% {
--count: 8;
}
}

.countUp5 {
counter-set: countUp5 var(--count);
animation: countUp5 3.6s 1;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(1, 0.4, 0.2, 1);
font-variant-numeric: tabular-nums;
font-size: 3.5rem;
}
.countUp5:after {
content: counter(countUp5) "%";
}

@keyframes countUp5 {
100% {
--count: 90;
}
}

.countUp6 {
counter-set: countUp6 var(--count);
animation: countUp6 3.6s 1;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(1, 0.4, 0.2, 1);
font-variant-numeric: tabular-nums;
font-size: 3.5rem;
}
.countUp6::after {
content: counter(countUp6) "店舗";
}
@keyframes countUp6 {
100% {
--count: 10;
}
}

.countUp7 {
counter-set: countUp7 var(--count);
animation: countUp7 3.6s 1;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(1, 0.4, 0.2, 1);
font-variant-numeric: tabular-nums;
font-size: 3.5rem;
}
.countUp7::after {
content: counter(countUp7) "店舗";
}
@keyframes countUp7 {
100% {
--count: 30;
}
}

.countUp8 {
counter-set: countUp8 var(--count);
animation: countUp8 3.6s 1;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(1, 0.4, 0.2, 1);
font-variant-numeric: tabular-nums;
font-size: 3.5rem;
}
.countUp8::after {
content: counter(countUp8) "日";
}
@keyframes countUp8 {
100% {
--count: 120;
}
}

.type-page h1{
display: none;
}
/* 共通エリア開始 */
header{
position: relative;

}
.herder-position{
width: 100%;
position: absolute;
top: 0;
z-index: 1000;
}
.herder-position-in{
width: 100%;
background-color: #fff;
color: #000;
margin-top: -5px;
}
.smart-link{
display: none;
}
.smart-toppicture{
display: none;
}
.smart-top{
display: none;
}
.humberger-menu{
display: none;
}

.maintext {
position: absolute;
bottom:50px;
width: 550px;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
transform: scale(0.7, 1);
}

.maintext p{
text-align: center;
color: #fff;
font-size: 90px;
}



.w40{
float: left;
width: 40%;
}
.w50{
float: left;
width: 50%;
}
.w60{
float: left;
width: 60%;
}
.w80{
width: 80%;
margin: 0 auto;
}
.w50 img{
width: 100%
}
.w33{
width:calc(100% / 3) ;
margin: 0 auto;
float: left;
}
.position-re{
position: relative;
}
.person img{
width: 100%;
}
.person-color{
background-color: #101937;
padding: 5px 10px;
color: #fff;
border-radius: 10px;
}
.person-text h4{
font-size: 1.5em;
color: #00b1dc;
}
.person-text p{
text-align: left;
line-height: 30px;
}
.position-ab{
position: absolute;
bottom: 20px;
left: 10px;
}


.fa-envelope-open-text{
margin-right: 20px;
}
.fa-phone{
margin-right: 20px;
}
.top-effect-img img{
display: none;
position: absolute;
width: 100%;
left: 800px;
margin-left: -800px;
}
.top-effect-img{
position: absolute;
width: 700px;
min-width: 530px;
top:150px;
left:15%;
list-style: none;
text-align: center;
opacity: 0;
animation: example 2.5s ease 2.5s 1 forwards;　
-webkit-animation: example 2.5s ease 2.5s 1 forwards;
z-index: 100;
}
@-webkit-keyframes example {
100% {
opacity: 1;
}
}
@keyframes example {
100% {
opacity: 1;
}
}

.back-white{
background-color: #fff;
}
.w90{
width: 90%;
margin: 0 auto;
}

.whalf{
width: 50%;
float: left;
}
.height-size{
padding-top: 30px;
padding-bottom: 30px;
}
.w30{
width: 360px;
float: left;
}
.w25{
width: 25%;
float: left;
}
.w70{
width: 70%;
float: left;
}
.space20{
margin-left: 40px;
}
.space40{
margin-left: 40px;
}
.underup{
opacity : 0;
transform: translateY(90px);
transition: all 0.6s;
}
.underleft{
opacity : 0;
transform: translateX(90px);
transition: all 2s;
}
.header-menu-in{
width: 100%;
height: 75px;
}
.header-menu{
width: 100%;
color: #fff;
height: 80px;
background-color: #000;
padding-top: 10px;
}
.header-menu.sticky {
position: fixed;
top: 0;
z-index: 10000;
height: 90px;
background: linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0));
}
.header-menu > .inner {
margin: auto;
width: 960px;
}
.header-menu-in.sticky {
position: fixed;
top: 0;
z-index: 10000;
}
.header-menu-in > .inner {
margin: auto;
width: 960px;
}
.header-menu i{
color: #fff;
font-size: 40px;
padding-top: 15px;
margin-bottom: 5px;
}

.title2{
margin-top: 90px;
margin-bottom: 0px;
text-align: left;
}
.title2 h2{
font-size: 50px;
padding-bottom: 20px;
padding-top: 10px;
margin-left: 40px;
color: #000;
font-family: "Arial";
}
.title2 p{
font-size: 15px;
color: #e0db4d;
font-family: "Arial";
}

title{
margin-top: 90px;
margin-bottom: 60px;
text-align: left;
}
.title h2{
font-size: 50px;
padding-bottom: 20px;
padding-top: 10px;
color: #000;
font-family: "Arial";
}
.title p{
font-size: 15px;
color: #e0db4d;
font-family: "Arial";
}


.title3{
font-size: 50px;
color: #fff;
margin-bottom: 80px;
}
.title3 p{
font-size: 20px;
}
.title3-shadow{
position: absolute;
top: 30px;
left: 40px;
font-size: 1.2em;
color: rgba(210, 74, 90, 0.3);
}

.title4{
margin-top: 30px;
margin-bottom: 30px;
text-align: center;
font-family: "Arial";
}
.title4 h2{
font-size: 80px;
padding-bottom: 20px;
padding-top: 40px;
color: #55AAFB;
font-style: oblique;
font-family: "Arial";
}
.title-kyujin{
text-align: center;
width: 900px;
margin: 0 auto;
padding-top: 60px;
color: #fff;
}
.title-kyujin img{
width: 300px;
margin-right: 20px;
margin-left: 20px;
margin-top: -90px;
}
.title-kyujin h2{
font-size: 30px;
padding-bottom: 20px;
padding-top: 10px;
color: #fff;
font-family: "Arial";
}
.title-big{
text-align: right;
font-family: "Arial";
color: #000;
font-size: 25px;
}
.title-big h2{
font-size: 100px;
letter-spacing: 10px;
color: #000;
}

.text-big{
font-size: 5em;
color: #fabd00;
}
.section0{
width: 100%;
margin-bottom: 120px;
margin-top: 120px;
}

.meet-menu{
text-align: center;
margin-top: 90px;
margin-bottom: 120px;
}
.meet-menu li{
width: 15%;
margin-left: 2%;
margin-right: 2%;
display: inline-block;
}
.meet-menu img{
width: 100%;
}
.top-history{
width: 80%;
margin: 0 auto;
position: relative;
margin-top: 80px;
padding-bottom: 50px;
}
.top-history img{
width: 100%;
}
.top-history-text{
position: absolute;
color: #fff;
top: 30%;
font-size: 40px;
}


.right2{
width: 120px;
margin-right: 30px;
text-align: center;
margin-right: 20px;
font-family: "ヒラギノ角ゴ Pro W6";
font-size: 12px;
color: #fff;
padding-left: 20px;
padding-bottom: 10px;
}
.right2 p{
padding-top: 3px;
}
.pamphlet-top{
height: 25px;
background-color: #101937;
margin-top: 10px;
margin-bottom: 5px;
}
.goto{
height: 25px;
background-color: #f00;
}
#menu{
list-style-type: none;
width: 100%;
font-family: "ヒラギノ角ゴ Pro W6";
text-align: center;
height: 75px;
}

#menu li{
position: relative;
float: left;
text-align: center;
padding-top: 5px;
height: 70px;
width: 120px;
border-collapse: collapse;
}
#menu li a{
display: block;
margin: 0;
padding: 18px 0;
font-size: 15px;
font-weight: bold;
line-height: 1;
}
#menu li ul{
list-style: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
z-index: 100;
}
#menu li:last-child ul{
left: -100%;
width: 100%
}
#menu li ul li{
overflow: hidden;
width: 250%;
height: 0;
color: #fff;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}
#menu li ul li a{
padding: 13px 15px;
background: #55AAFB;
color: #fff;
text-align: left;
font-size: 12px;
font-weight: normal;
}
#menu li:hover > a{
background: #000;
color: #ff0;
border-bottom: solid 10px #ff0;
transition: 0.3s;
}
#menu li:hover ul li{
overflow: visible;
height: 38px;
border-bottom: 1px solid #fff;
}
#menu li:hover ul li:first-child{
border-top: 0;
}
#menu li:hover ul li:last-child{
border-bottom: 0;
}


.top-small{
font-size: 9px;
margin-top: 10px;
color: #c0c0c0;
}
.header-logo{
float: left;
margin-left: 20px;
color: #fff;
padding-top: 10px;
}
.header-logo img{
height: 70px;
margin-right: 20px;
margin-top: -15px;
}
.header-menu-in img{
width: 80px;
margin-right: 20px;
margin-top: -25px;
}
.header-logo h1{
font-size: 30px;
font-family: "Arial";
margin-top: 8px;
color: #000;
}
.header-logo h1:hover{
color: #3B0863;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
transition: 0.5s;
}
.header-right{
color: #fff;
float: right;
}
.text-small{
font-size: 0.8em;
}
.w1080{
width: 1100px;
margin: 0 auto;
font-family: "osaka";
}
.width108{
width: 1080px;
margin: 0 auto;
}

.news{
text-align: left;
margin-top: 20px;
}
.about-com{
width: 900px;
margin: 0 auto;
background-color: #eef4fa;
border-radius:20px;
padding-bottom: 1px;
}
.reservation{
position: fixed;
bottom: 20px;
right: 30px;
width: 150px;
}
.reservation img{
width: 100%;
}


.about-in h2{
color: #3589fd;
font-size: 29px;
margin-bottom: 20px;
}
.lispace10{
margin-left: 4%;
margin-right: 4%;
}
.works-photo{
text-align: center;
margin-top: 80px;
}
.works-photo ul{
margin-bottom: 40px;
}
.works-photo li{
width: 30%;
display: inline-block;
}
.works-photo img{
width: 100%;
margin-bottom: 10px;
}

@keyframes gradientEffect {
from {background-position: left}
to {background-position: right}
}

.cuttin{
width: 100%;
margin-top: 60px;
margin-bottom: 90px;
overflow: hidden;
position: relative;
opacity: 0;
}
.cuttin img{
width: 100%;
}
.cuttin.active {
opacity: 1;
}
.cuttin.active::before {
animation: displayImg .7s linear forwards;
background: #f7f7f7;
content: '';
inset: 0;
pointer-events: none;
position: absolute;
z-index: 1;
}

@keyframes displayImg {
100% {
transform: translateX(100%);
}
}



.contact-color{
background-color: #004800;
color: #fff;
}
.contact-size h3{
font-size: 30px;
font-family: "ヒラギノ角ゴ Pro W6";
margin-bottom: 5px;
}
.contact-size p{
font-size: 15px;
font-family: "ヒラギノ角ゴ Pro W3";
}
.top-story{
background-color: #252c3c;
width: 100%;
color: #fff;
padding-top: 70px;
padding-bottom: 70px;
text-align: left;
}
.concept-block h3{
border-bottom: solid 1px #999999;
display: inline-block;
margin-left: 10%;
letter-spacing: 0.5rem;

}
.concept-block h2{
border: solid 1px #999999;
display: inline-block;
margin-top: 100px;
font-size: 2rem;
margin-left: 20%;
letter-spacing: 0.5rem;
padding-left: 10px;
}
.top-story-text{
margin-top: 100px;
margin-left: 30%;
line-height: 2em;
}
.top-story-right{
position: absolute;
width: 21%;
top: 70px;
right: 0%;
}
.top-story-right img{
width: 100%;
}
.top-story-left{
position: absolute;
width: 21%;
bottom: 0px;
left: 0%;
}
.top-story-left img{
width: 100%;
}
.top-recruit{
background-image: url(../material/green.jpg);
background-size: 100% auto;
padding-top: 100px;
padding-bottom: 100px;
width: 90%;
margin: 0 auto;
}

.top-recruit-base{
background-color: rgba(244, 240, 230, 0.9);
border-radius: 20px;
padding-top: 80px;
padding-bottom: 150px;
}
.top-recruit-base h3{
font-size: 30px;
color: #000;
z-index: 1000000000;
}
.top-recruit-base-shadow{
margin-top: 50px;
margin-bottom: 40px;
text-shadow: 2px 3px 3px #fff;
font-size: 18px;
}
.top-recruit-base-shadow p{
text-shadow: 2px 3px 3px #fff;
font-size: 18px;
z-index: 100000000;
}
.top-recruit img{
width: 100%;
border-radius: 20px;
}
.top-recruit-upperleft{
position: absolute;
width: 200px;
top: 10px;
left: 10px;
}
.top-recruit-upperright{
position: absolute;
width: 350px;
top: -70px;
right: -30px;
}
.top-recruit-underleft{
position: absolute;
width: 270px;
bottom: 30px;
left: 90px;
}
.top-recruit-underright{
position: absolute;
width: 300px;
bottom: -40px;
right: 30px;
}
.top-recruit-message{
position: absolute;
font-size: 45px;
bottom: 20px;
z-index: 800;
color: #fff;
left: 30%;
text-shadow:
2px 2px 2px black;
}

.top-about{
width: 100%;
}
.top-about img{
width: 100%;
}
.top-about-text{
line-height: 30px;
text-align: left;
}
.invisible-pc{
display: none;
}
.button{
text-align: center;
padding: 10px;
border:solid 2px #00b1dc;
background-color: #00b1dc;
color: #fff;
width: 70%;
margin: 30px auto 0;
text-align: center;
}
.button p{
text-align: center;
}
.button:hover{
color: #fff;
background-color: #1c2788;
transition: 0.6s;
}
.button2{
text-align: center;
padding: 10px;
border: solid 1px #fff;
color: #fff;
width: 200px;
margin: 30px auto 0;
border-radius: 20px; /* CSS3草案 */
-webkit-border-radius: 20px; /* Safari,Google Chrome用 */
-moz-border-radius: 20px; /* Firefox用 */
}
.button2:hover{
color: #000000;
background-color: #fff;
transition: 0.6s;
}
.button3{
background-color: #000;
color: #ff0;
text-align: center;
padding: 10px;
width: 200px;
}
.button3:hover{
color: #000;
background-color: #ff0;
transition: 0.6s;
}
.button4{
  margin-top: 40px;
}
.button4 a {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 400;
  border-top: solid 1px #333;
  border-bottom: solid 1px #333;
  display: block;
  position: relative;
  rotate: -5deg;
  transform: skewX(-5deg); 
  box-sizing: border-box;
  max-width: 260px;
  text-align: center; 
  padding: 16px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}

.button4 a::before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 20px;
  border-left: solid 1px #333;
  top: 0;
  left: 0;
  transition: all 0.3s;
}

.button4 a::after {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 20px;
  border-right: solid 1px #333;
  top: 0;
  right: 0;
  transition: all 0.3s;
}

.button4 a:hover {
  color: #fff;
  background: #333;
  transition: all 0.3s;
}

.button5 a {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #fff;
  font-weight: 400;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
  display: block;
  position: relative;
  rotate: -5deg;
  transform: skewX(-5deg); 
  box-sizing: border-box;
  max-width: 260px;
  text-align: center; 
  padding: 16px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}

.button5 a::before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 20px;
  border-left: solid 1px #fff;
  top: 0;
  left: 0;
  transition: all 0.3s;
}

.button5 a::after {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 20px;
  border-right: solid 1px #fff;
  top: 0;
  right: 0;
  transition: all 0.3s;
}

.button5 a:hover {
  color: #000;
  background: #fff;
  transition: all 0.3s;
}


.top{
overflow: hidden;
top: 0px;
position: absolute;
min-width: 960px;
width: 100%;
height: 700px;
}
.top-img img{
display: none;
position: absolute;
width: 100%;
height: 700px;
left: 800px;
margin-left: -800px;
}
.top-img video{
width: 100%;
}
.ceparate:after {
content:"";
display: block;
clear:both;
}
.contents{
text-align: center;
padding-top: -30px;
margin-top: -20px;
}
.back-ch-change{
background-color: #3e3d3c;
animation: gradationTest 10s infinite;
}
@keyframes gradationTest {
0% { background-color: #3e3d3c; }
100% { background-color: #000; }
}
.black-height{
background-color: #ff0;
height: 20px;
width: 100%;
}

.service-me img{
width: 100%;
}
.service-me .title{
text-align: center;
}






.w50-in{
padding-top: 40px;
text-align: center;
width: 80%;
margin: 0 auto;
line-height: 40px;
text-align: left;
}
.w50-in h3{
font-size: 27px;
margin-bottom: 20px;
text-align: center;
color: #1c2780;
font-family: "Arial";
}
.works{
text-align: center;
margin-top: 50px;
margin-bottom: 60px;
}
.works .title{
text-align: center;
}
.left-border{
border-left: solid 1px;
}

.infiniteslide1{
height: 400px;

}
.infiniteslide1 img{
height: 300px;
margin-top: 50px;
margin-right: 30px;
border-radius: 50px;
}
.slide{
width: 100%;
color: #000;
margin-top: 20px;
}

.circle{
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 125px;
background-color: #1c2a53;
text-align: center;
font-size: 27px;
color: #fff;
}

.circle h3{
padding-top: 70px;
margin-bottom: 10px;
}



.recruit-button{
color: #fff;
width:30%;
margin: 0px auto;
background: #004800;
border:solid 2px #004800;
padding: 7px 20px;
text-align: center;
font-size: 20px;
}
.contact-button{
color: #fff;
width:70%;
margin: 42px auto;
border:solid 2px #fff;
padding: 7px 20px;
text-align: center;
font-size: 20px;
}
.button-frame{
width: 350px;
margin: 60px auto;
border: solid 4px #1c2a53;
color: #1c2a53;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
}
.button-frame i{
margin-right: 10px;
}
.button-frame h2{
font-size: 2.4em;
}


.small-text{
font-size: 24px;
}

.company-message {
margin-bottom: 90px;
}
.in{
width: 95%;
margin: 0 auto;
font-family: "ヒラギノ角ゴ ProN W3";
}
.team {
padding-bottom: 40px;
margin-top: 90px;
}
.team li{
width: 19%;
margin-top: 30px;
display: inline-block;
}
.team img{
width: 100%;
}
.recruit-button{
text-align: center;
margin-bottom: 60px;
}
.equipment-all li{
width: 30%;
display: inline-block;
margin-bottom: 70px;
}
.equipment-text{
height: 100px;
}
.equipment-all img{
width: 100%;
}
.equipment-all h3{
text-align: left;
border-left: solid 7px #ddcc18;
padding-left: 10px;
margin-bottom: 15px;
margin-top: 15px;
}
.back-color{
background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));
width: 100%;
height: 400px;
}
.recruit-member{
margin-bottom: 90px;
}
.recruit-member img{
width: 100%;
}
.color-black{
background-color: #000;
color: #ff0;
}

.colorch{
color: #1c2788;
font-size: 20px;
}

.button-color{
width:200px;
margin-top: 10px;
background: #004800;
padding: 10px 35px;
border:solid 2px #fff;
text-align: center;
color: #fff;
}
.button-color:hover{
color: #a73c59;
background-color: #fff;
transition: 0.7s;
}
.ff0{
color: #ff0;
}

/*パンクズリスト*/
.breadcrumb {
width: 1080px;
margin: 0 auto;
padding-left:0;
height: 15px;
padding-bottom: 20px;
}
.breadcrumb li{
display:inline;/*横に並ぶように*/
list-style: none;
font-size: 14px;
}
.breadcrumb li:after{/* >を表示*/
content: '>';
padding: 0 3px;
}
.breadcrumb li:last-child:after{
content: '';
}
.breadcrumb li a {
text-decoration: none;
}
.breadcrumb li a:hover {
text-decoration: underline;
}
.inner-picture{
width: 100%;
height: 550px;
margin-bottom: 20px;
margin-top: -3px;
}
.inner-picture img{
width: 100%;
height: 570px;
}
.inner-guide{
text-align: center;
position: absolute;
top: 160px;
font-size: 50px;
font-family: "osaka";
width: 60%;
margin-left: 20%;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
}
.inner-guide p{
font-size: 25px;
}
.incontents{
width: 1080px;
margin: 90px auto;
font-family: "ヒラギノ角ゴ ProN W3";
}
.message{
line-height: 30px;
}
.message .title{
text-align: center;
}
.bottom30{
margin-bottom: 30px;
}
.bottom10{
margin-bottom: 10px;
}
.greet{
margin-top: 90px;
}
.greet-message{
width: 65%;
margin-right: 5%;
float: left;
font-family: "ヒラギノ角ゴ ProN W3";
line-height: 30px;
}
.greet-message h3{
font-family: "ヒラギノ角ゴ Pro W6";
color: #3b0863;
font-size: 22px;
}
.greet-img{
width: 30%;
float: left;
}
.greet-img img{
width: 100%;
}


.ceo{
width: 280px;
margin-top: 20px;
float: right;
}
.ceo-text{
position : relative;
padding: 15px;
background-color: #00b1dc;
width:70%;
left : 50%;
transform: translate(-50%);
border-radius: 20px;
text-align: center;
color: #fff;
}
.ceo-text:after{
border-right: 40px solid #00b1dc;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
left: -20px;
top : 0%;
content: "";
position: absolute;
}

.ceo-text h2{
font-size: 30px;
text-align: center;
color: #fff;
}
.ceo-text img{
width: 80%;
margin-left: 10%;
}
.ceo-text2 h2{
font-size: 30px;
text-align: cetner;
}
.ceo-support{
width: 650px;
margin: 60px auto 0px;
}
.ceo-point{
text-align: center;
margin-top: 60px;
font-size: 1.3em;
}
.ceo-point h3{
margin-bottom: 20px;
}
.ceo img{
width: 100%;
}
.hit-color{
background-color: #ff0;
color: #000;
}

.recruitment{
color: #000;
padding-bottom: 20px;
padding-top: 40px;
}


.company{
text-align: left;
}
.company-bottom{
margin-bottom: 60px;
margin-top: 120px;
}
.company-prof{
text-align: left;
padding-bottom: 20px;
}
.company-prof table{
border-collapse: collapse;
padding-bottom: 30px;
width: 900px;
margin: 0 auto 30px;
}
.company-prof th{
width: 20%;
border-bottom: dotted 1px #262504;
text-align: left;
padding-left: 15px;
color: #3f60bc;
}
.company-prof td{
border-bottom: dotted 1px #262504;
padding-left: 10px;
width: 560px;
}
.company-prof tr{
height: 70px;
}
.branch{
line-height: 30px;
font-family: "ヒラギノ角ゴ ProN W3";
margin-top: 90px;
}
.branch img{
width: 380px;
}
.branch iframe{
width: 100%;
height: 440px;
}
.branch-block{
margin-top: 15px;
margin-bottom: 65px;
}

.container {
position: relative;
width: 100%;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
border: solid 2px;
}

.logo {
position: absolute;
z-index: 3;
opacity: 1;
animation: fadeOutLogo 0.8s ease 1.5s forwards;
}

.logo img {
width: 100%;
height: auto;
}

.gradient-bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
/*
background: linear-gradient(45deg, #a9c9ff 0%, #ffbbec 100%);
*/
background-color: #fff;
transform: translateY(100%);
z-index: 1;
animation: rollUp 1.2s ease 1.5s forwards;
}

.main-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 2;
animation: fadeInImage 1.5s ease 2.7s forwards;
border: solid 2px;
}



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

@keyframes rollUp {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0%);
}
}

@keyframes fadeInImage {
0% {
opacity: 0;
}
100% {
/*
opacity: 0.4;
*/
opacity: 1;
}
}

@keyframes fadeInContent {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}


.section1{
background-image: url(../material/top5.jpg);
width: 100%;
background-size: 100% 100%;
height: 550px;
position: relative;
margin-bottom: 90px;
}
.section1-text{
position: absolute;
width: 100%;
top: 60%;
background-color: rgba(255, 255, 255, 0.7);
padding-bottom: 20px;
color: #162347;
font-family: Impact;
font-size: 1.3em;
}
.section1-text p{
color: #ee7800;
font-size: 1.2em;
}
.section1-link{
position: absolute;
right: 5%;
bottom:20px;
}

.bussines-menu{
width: 100%;
position: relative;
}
.bussines-menu img{
width: 100%;
}
.bussines-menu-text{
position: absolute;
width: 100%;
bottom: 0px;
}
.bussines-menu-text h3{
padding-top: 320px;
font-size: 1.8em;
margin-bottom: 10px;
color: #fff;
}
.bussines-menu-text p{
color: #fff;
}
.readmore{
position: absolute;
bottom: 40px;
right: 90px;
color: #fff;
font-size: 22px;
}

.service-menu-text{
position: absolute;
width: 100%;
bottom: 0px;
text-align: center;
}
.service-menu-text h3{
padding-top: 20px;
font-size: 1.8em;
margin-bottom: 10px;
color: #fff;
text-align: center;
}
.service-menu-text p{
color: #fff;
}
.service-block{
margin-bottom: 50px;
}
.service-block img{
border-radius: 30px;
}

.personal{
text-align: left;
}
.personal-section{
margin-bottom: 40px;
line-height: 30px;
}
.personal-section2{
width: 900px;
margin: 0 auto;
}
.personal-section2 p{
margin-bottom: 30px;
}
.contact-message{
width: 600px;
margin: 0 auto;
}
.contactform{
text-align: center;
font-size: 15px;
margin-bottom: 40px;
}
.contactform .title{
text-align: center;
}
.nyuryoku{
width: 760px;
margin:auto;
margin-top: 30px;
}
.nyuryoku li{
display: inline-block;
}
.nyuryoku tr{
height: 70px;
}
.nyuryoku th{
width: 160px;
text-align: right;
padding-right: 70px;
}
.nyuryoku td{
text-align: left;
}
.square_btn{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.square_btn:active {/*ボタンを押したとき*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
}
.confirm {
width: 700px;
margin: auto;
padding-top: 30px;
padding-bottom: 100px;
}
.confirm p{
line-height: 200%;
}
.confirm h2{
margin-top: 30px;
}
.recruit-greeding{
text-align: center;
width: 900px;
margin:0 auto 80px;
}
.recruit-greeding h3{
color: #000;
text-shadow: 2px 2px 2px #ff0;
}
.recruit-greeding p{
margin-top: 30px;
}
.recruit-prof{
width: 100%;
}
.recruit-prof img{
width: 60%;
margin-left: 20%;
margin-right: 20%;
margin-top: 40px;
}
.recruit-prof table{
border-collapse: collapse;
padding-bottom: 30px;
margin: 0 auto 30px;
width: 700px;
font-size: 17px;
}
.recruit-prof th{
width: 130px;
background-color: #3F9447;
border: solid 1px #fff;
color: #fff;
text-align: center;
}
.recruit-prof td{
border: solid 1px #fff;
padding-left: 30px;
padding-right: 20px;
}
.recruit-prof tr{
height: 70px;
}

.selection-recruit{
text-align: center;
margin-bottom: 40px;
}
.selection-recruit li{
width: 250px;
margin-left: 10px;
margin-right: 10px;
display: inline-block;
}
.selection-recruit img{
width: 100%;
}
.career{
margin-top: 90px;
font-family: "ヒラギノ角ゴ ProN W3";
margin-bottom: 60px;
}
.career-block{
margin-bottom: 20px;
}


.busho-intro{
margin-bottom: 100px;
}
.busho-intro h3{
background-color: #000;
color: #ff0;
display: inline-block;
padding:5px 20px;
font-family: "ヒラギノ角ゴ Pro W6";
margin-bottom: 20px;
}
.busho-intro img{
width: 80%;
margin-left: 10%;
}
.member-duce{
line-height: 30px;
margin-bottom: 30px;
}
.strongpoint{
font-size: 20px;
margin-bottom: 10px;
margin-top: 20px;
font-weight: "bold";
text-shadow: 2px 2px 2px #ff0;
}
.shop-info{
margin-top: 50px;
margin-bottom: 50px;
}
.shop-info img{
width: 50%;
border-radius: 10px;
}
.shop-info li{
margin-bottom: 10px;
}

footer{
background-color: #000;
color: #fff;
padding-top: 70px;
padding-bottom: 40px;
text-align: center;
}
.footer-contact{
width: 90%;
margin: 0px auto;
padding-top: 10px;
padding-bottom: 30px;
background-color: #3e3d3c;
}
.footer-title{
margin-top: 20px;
margin-bottom: 20px;
font-size: 25px;
font-family: "Arial";
}
.footer-pr{
margin-top: 20px;
margin-bottom: 20px;
height: 90px;
line-height: 30px;
}
.footer-logo{
margin-top: 70px;
}
.footer-logo img{
width: 100%;
}
.footer-logo li{
width: 10%;
margin-left: 1%;
margin-right: 1%;
display: inline-block;

}




.contact-tell{
text-align: center;
margin-top: 5px;
}
.contact-tell h2{
font-size: 65px;
}

.copywright{
text-align: center;
color: #fff;
font-size: 14px;
padding-top: 50px;
}
.copywright h2{
letter-spacing: 30px;
font-size: 40px;
font-family: "Charter Black";
margin-bottom: 40px;

}
.copywright span{
color: orangered;
font-size: 18px;
}
br-no {
  display: none;
}