@charset "utf-8";

.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F5F5F5 url("../images/splash-one.gif") no-repeat right top;
    background-size: cover;
    z-index: 999999;
    animation: fadeOut 2.4s;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*----- main -----*/
div.fv {
    position: relative;
    width: 100%;
    height: 1080px;
    background: url("../images/fv_bg.png") no-repeat center center;
    background-size: cover;
}
div.fv p.copy1 {
    position: absolute;
    top: 60%;
    left: calc(75% - min(10vw, 150px));
    width: min(20vw, 300px);
    height: min(10vw, 150px);
}
div.fv p.copy2 {
    position: absolute;
    top: calc(60% + min(10vw, 150px) + 25px);
    left: calc(75% - min(10vw, 150px));
    color: #007DB6;
    font-size: min(2vw, calc( 30 / var(--root-font-size) * 1rem ));
    line-height: 1.75;
    font-weight: 700;
}

div.introduction {
    padding: 75px 0;
}

@media screen and (max-width: 1280px) {
div.fv {
    position: relative;
    width: 100%;
    height: 756px;
    background: url("../images/fv_bg.png") no-repeat center center;
    background-size: cover;
}
div.fv p.copy1 {
    position: absolute;
    top: 60%;
    left: calc(75% - clamp(100px, 10vw, 150px));
    width: clamp(200px, 20vw, 300px);
    height: clamp(100px, 10vw, 150px);
}
div.fv p.copy2 {
    position: absolute;
    top: calc(60% + min(10vw, 150px) + 25px);
    left: calc(75% - clamp(100px, 10vw, 150px));
    color: #007DB6;
    font-size: clamp(calc( 20 / var(--root-font-size) * 1rem ), 2vw, calc( 30 / var(--root-font-size) * 1rem ));
    line-height: 1.75;
    font-weight: 700;
}
div.fv .pc {
    display: inherit!important;
}
div.fv .sp {
    display: none!important;
}

div.introduction {
    padding: 75px 0;
}
div.introduction .pc {
    display: inherit!important;
}
div.introduction .sp {
    display: none!important;
}
}

@media screen and (max-width: 960px) {
div.fv {
    position: relative;
    width: 100%;
    height: 756px;
    background: url("../images/fv_bg.png") no-repeat center center;
    background-size: cover;
}
div.fv p.copy1 {
    position: absolute;
    top: 60%;
    left: calc(75% - clamp(100px, 10vw, 150px));
    width: clamp(200px, 20vw, 300px);
    height: clamp(100px, 10vw, 150px);
}
div.fv p.copy2 {
    position: absolute;
    top: calc(60% + min(10vw, 150px) + 25px);
    left: calc(75% - clamp(100px, 10vw, 150px));
    color: #007DB6;
    font-size: clamp(calc( 20 / var(--root-font-size) * 1rem ), 2vw, calc( 30 / var(--root-font-size) * 1rem ));
    line-height: 1.75;
    font-weight: 700;
}
div.fv .pc {
    display: inherit!important;
}
div.fv .sp {
    display: none!important;
}

div.introduction {
    padding: 75px 0;
}
div.introduction .pc {
    display: inherit!important;
}
div.introduction .sp {
    display: none!important;
}
}

@media screen and (max-width: 720px) {
div.fv {
    position: relative;
    width: 100%;
    height: 667px;
    background: url("../images/fv_bg_sp.png") no-repeat center center;
    background-size: cover;
}
div.fv p.copy1 {
    position: absolute;
    top: inherit;
    bottom: 45px;
    left: calc(50% + 45px);
    width: 90px;
    height: 210px;
}
div.fv p.copy2 {
    position: absolute;
    top: inherit;
    bottom: 45px;
    left: 7.5vw;
    color: #007DB6;
    font-size: calc( 22 / var(--root-font-size) * 1rem );
    line-height: 1.75;
    font-weight: 700;
}
div.fv .pc {
    display: none!important;
}
div.fv .sp {
    display: inherit!important;
}

div.introduction {
    padding: 50px 0 25px;
}
div.introduction div.txtBlock {
    width: 85%;
    margin: 0 auto;
}
div.introduction div.txtBlock.center p {
    text-align: inherit;
    text-indent: inherit;
}
div.introduction .pc {
    display: none!important;
}
div.introduction .sp {
    display: inherit!important;
}
}

/*----- About -----*/
section#about {
    padding: 75px 0;
}
section#about div.first {
    padding: 0 0 75px;
}
section#about div.first div.flexWrap {
    justify-content: space-between;
    width: 90%;
    max-width: 1000px;
    padding: 0 0 75px;
    margin: 0 auto;
}
section#about div.first div.flexWrap div.block {
    width: 43.75%;
}
section#about div.first div.flexWrap div.block p {
    line-height: 1.5;
}
section#about div.first div.flexWrap div.block p.copy {
    color: #007DB6;
}
section#about div.first div.flexWrap div.block p.copy span {
    font-size: calc( 16 / var(--root-font-size) * 1rem );
    font-weight: 700;
    letter-spacing: 0.1em;
}
section#about div.first div.flexWrap div.block p.ttl {
    position: relative;
    font-size: calc( 26 / var(--root-font-size) * 1rem );
    font-weight: 700;
    padding: 0 84px 0 0;
    margin: 50px 0 25px;
}
section#about div.first div.flexWrap div.block p.ttl::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 84px;
    height: 54px;
    margin: auto 0;
}
section#about div.first div.flexWrap div.block p.ttl.feature1::after {
    background: url("../images/icon_feature1.png") no-repeat center center;
    background-size: contain;
}
section#about div.first div.flexWrap div.block p.ttl.feature2::after {
    background: url("../images/icon_feature2.png") no-repeat center center;
    background-size: contain;
}
section#about div.first div.flexWrap div.block figure {
    margin: 50px 0 0;
}

@media screen and (max-width: 960px) {
section#about {
    padding: 75px 0 0;
}
section#about div.first {
    padding: 0;
}
section#about div.first div.txtBlock {
    width: 85%;
    margin: 0 auto;
}
section#about div.first div.txtBlock.center p {
    font-size: calc( 18 / var(--root-font-size) * 1rem );
    text-align: inherit;
    text-indent: inherit;
}
section#about div.first div.txtBlock .btn.center {
    margin: 25px 0 0;
}
section#about div.first div.flexWrap {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 85%;
    max-width: 1000px;
    padding: 0;
    margin: 0 auto;
}
section#about div.first div.flexWrap div.block {
    width: 100%;
    padding: 0 0 50px;
}
section#about div.first div.flexWrap div.block p {
    line-height: 1.5;
}
section#about div.first div.flexWrap div.block p.copy {
    color: #007DB6;
}
section#about div.first div.flexWrap div.block p.copy span {
    font-size: calc( 14 / var(--root-font-size) * 1rem );
    font-weight: 700;
    letter-spacing: 0.1em;
}
section#about div.first div.flexWrap div.block p.ttl {
    position: relative;
    font-size: calc( 24 / var(--root-font-size) * 1rem );
    font-weight: 700;
    padding: 0 84px 0 0;
    margin: 15px 0;
}
section#about div.first div.flexWrap div.block p.ttl::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 84px;
    height: 54px;
    margin: auto 0;
}
section#about div.first div.flexWrap div.block p.ttl.feature1::after {
    background: url("../images/icon_feature1.png") no-repeat center center;
    background-size: contain;
}
section#about div.first div.flexWrap div.block p.ttl.feature2::after {
    background: url("../images/icon_feature2.png") no-repeat center center;
    background-size: contain;
}
section#about div.first div.flexWrap div.block figure {
    margin: 25px 0 0;
}
}

/*----- Service -----*/
section#service {
    padding: 75px 0 0;
}

@media screen and (max-width: 960px) {
section#service div.txtBlock .btn.center {
    margin: 25px 0 0;
}
}

/*----- Works -----*/
section#works {
    padding: 75px 0 0;
}
section#works div.txtBlock {
    width: 90%;
    max-width: 1000px;
    padding: 0 0 100px;
    margin: 0 auto;
}
section#works div.sliderWrap {
    display: flex;
    justify-content: center;
    width: 100%;
    background: #007DB6;
    padding: 75px 0;
    margin: 0 auto;
}
section#works div.sliderWrap div.block {
    width: 30%;
    max-width: 300px;
    margin: 0 min(2.5%, 25px);
}

@media screen and (max-width: 960px) {
section#works {
    padding: 75px 0 0;
}
section#works div.txtBlock {
    width: 85%;
    max-width: 1000px;
    padding: 0 0 50px;
    margin: 0 auto;
}
section#works div.txtBlock.center p {
    text-align: inherit;
    text-indent: inherit;
}
section#works div.txtBlock .btn.center {
    margin: 25px 0 0;
}
section#works div.sliderWrap {
    display: inherit;
    width: 100%;
    background: #007DB6;
    padding: 50px 0;
    margin: 0 auto;
}
section#works div.sliderWrap div.block {
    width: inherit;
    max-width: inherit;
    margin: inherit;
}

section#works div.sliderWrap .slick-track {
    display: flex!important;
}
section#works div.sliderWrap div.slick-slide {
	height: auto !important;
    margin: 0 min(2vw, 7.5px);
}

/*ドットナビゲーションの設定*/
.slick-dots {
    text-align: center;
	margin: 25px 0 0;
}
.slick-dots li {
    display: inline-block;
	margin: 0 10px!important;
}
.slick-dots button {
    display: block;
    width: 10px;
    height: 10px;
    background: #007DB6;
    border: #F8B62D solid 1px;
    border-radius: 50%;
    color: transparent;
    outline: none;
}
.slick-dots .slick-active button {
    background: #F8B62D;
}
}

/*----- News -----*/
section#news {
    padding: 75px 0;
}
section#news div.flexWrap {
    justify-content: space-between;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}
section#news div.flexWrap div.flexL {
    width: 31.25%;
}
section#news div.flexWrap div.flexR {
    width: 60%;
}

@media screen and (max-width: 960px) {
section#news {
    padding: 75px 0 25px;
}
section#news div.flexWrap {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 85%;
    max-width: 1000px;
    margin: 0 auto;
}
section#news div.flexWrap div.flexL {
    width: 100%;
    padding: 0 0 50px;
}
section#news div.flexWrap div.flexR {
    width: 100%;
}
}

/*----- Contact -----*/
section#contact {
    padding: 75px 0;
}
section#contact div.flexWrap {
    justify-content: space-between;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}
section#contact div.flexWrap div.flexL {
    width: 45%;
}
section#contact div.flexWrap div.flexR {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 50%;
    background: #007DB6;
    border-radius: 10px;
    padding: 50px 5%;
}
section#contact div.flexWrap div.flexR p {
    color: #FFF;
    line-height: 1.5;
    text-align: center;
    margin: 0 0 15px;
}

@media screen and (max-width: 960px) {
section#contact {
    padding: 75px 0;
}
section#contact div.flexWrap {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 85%;
    max-width: 1000px;
    margin: 0 auto;
}
section#contact div.flexWrap div.flexL {
    width: 100%;
    padding: 0 0 50px;
}
section#contact div.flexWrap div.flexR {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    background: #007DB6;
    border-radius: 10px;
    padding: 25px 5vw;
}
section#contact div.flexWrap div.flexR p {
    color: #FFF;
    font-size: calc( 14 / var(--root-font-size) * 1rem );
    line-height: 1.5;
    text-align: center;
    margin: 0 0 15px;
}
}

/*----- Recruit -----*/
section#recruit {
    background: #F1F1F1;
    padding: 75px 0;
}
section#recruit div.flexWrap {
    justify-content: space-between;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}
section#recruit div.flexWrap div.flexL {
    width: 100%;
    /*width: 50%;*/
}
section#recruit div.flexWrap div.flexR {
    width: 43.75%;
}

@media screen and (max-width: 960px) {
section#recruit {
    background: #F1F1F1;
    padding: 75px 0;
}
section#recruit div.flexWrap {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 85%;
    max-width: 1000px;
    margin: 0 auto;
}
section#recruit div.flexWrap div.flexL {
    width: 100%;
    padding: 0 0 50px;
}
section#recruit div.flexWrap div.flexR {
    width: 100%;
}
}