@charset "utf-8";

/*--------------------------------------------------------------------------------------------------
 PC
 -------------------------------------------------------------------------------------------------*/

article::before {
    display: none;
}

#main-message {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 3;
    opacity: 1;
    visibility: visible;
    transition: all 1s;
}
#main-message.active {
    opacity: 0;
    visibility: hidden;
}
#main-message strong {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #0099D2;
    font-size: 4rem;
    opacity: 0;
    visibility: hidden;
    transition: all 5s ease-in;
}
#main-message strong.active {
    opacity: 1;
    visibility: visible;
}
#main-visual {
    background: #EFEAE3;
}
#main-visual .inner {
    max-width: 1600px;
    padding: 0;
    height: clamp(500px, 50vw, 750px);
    position: relative;
}
#main-visual .pc-img div,
#main-visual .smartsme,
#main-visual .message {
    position: absolute;
}
#main-visual .v-first,
#main-visual .v-second,
#main-visual .v-third,
#main-visual .v-fourth,
#main-visual .v-fifth,
#main-visual .v-sixth {
    opacity: 0;
    visibility: hidden;
    margin: -20px 0 20px;
    transition : all 1s;
}
#main-visual .v-first {
    transition : all 0.5s;
}
#main-visual .v-second {
    margin: -30px 0 30px;
    transition : all 0.5s ease-in;
}
#main-visual .v-third {
    margin: -40px 0 40px;
    transition : all 0.5s ease-in;
}
#main-visual .v-fourth {
    
}
#main-visual .v-fifth {
    
}
#main-visual .v-sixth {
    margin: 0;
    transition : all 2s;
}
#main-visual .active {
    opacity: 1;
    visibility: visible;
    margin: 0;
}
#main-visual .pc_h_line3   { width: 11%; top: 30%;}
#main-visual .pc_h_line1   { width: 53%; top: 4%; left: 20%;}
#main-visual .pc_h_line2   { width: 27%; bottom: 3%; right: 0;}
#main-visual .pc_h_tablet  { width: 21%; top: 7%; left: 2%;}
#main-visual .pc_h_flow    { width: 15%; top: 15%; right: 23%;}
#main-visual .pc_h_hand    { width: 7%; bottom: 5%; right: 27%;}
#main-visual .pc_h_man1    { width: 15%; bottom: 2%; left: 7%;}
#main-visual .pc_h_man4    { width: 16%; bottom: 0; left: 16%;}
#main-visual .pc_h_man3    { width: 16%; top: 10%; right: 4%;}
#main-visual .pc_h_you_a   { width: 15%; top: 36%; left: 12%;}
#main-visual .pc_h_plus    { width: 6%; top: 38%; left: 32%;}
#main-visual .pc_h_8_a     { width: 20%; top: 22%; left: 40%;}
#main-visual .pc_h_equal   { width: 6%; bottom: 35%; right: 30%;}
#main-visual .pc_h_mugen_a { width: 19%; bottom: 27%; right: 7%;}
#main-visual .pc_h_you_b   { width: 15%; top: 37%; left: 12%;}
#main-visual .pc_h_8_b     { width: 20%; top: 24%; left: 41%;}
#main-visual .pc_h_mugen_b { width: 19%; bottom: 25%; right: 7%;}
#main-visual .smartsme     { width: 9%; bottom: 1%; right: 6%;}
#main-visual .message {
    bottom: 6%;
    width: 100%;
    text-align: center;
    color: #0099D2;
    font-size: clamp(3rem, 2.5vw, 4rem);
}
#main-visual .pc_h_you_b,
#main-visual .pc_h_8_b,
#main-visual .pc_h_mugen_b {
    animation: shadow 5s infinite;
}
@keyframes shadow {
    0% { transform: translateX(10px); opacity: 1;}
    50% { transform: translateX(-10px); opacity: 0.2;}
    100% { transform: translateX(10px); opacity: 1;}
}
#main-title {
    text-align: center;
    font-size: clamp(2rem, 2.5vw, 3.2rem);
    padding: 90px 0 30px;
}
#main-title .inner {
    position: relative;
}
#main-title strong {
    display: block;
    font-size: 3em;
    color: #0098D3;
    line-height: 0;
    margin: 35px 0;
}
#main-title strong small {
    font-size: 0.5em;
    letter-spacing: -0.1em;
    margin-left: 0.3em;
}
#main-title p {
    font-size: 0.8em;
    line-height: 1.5;
    margin-top: 0.5em;
}
#main-title .bird1,
#main-title .bird2 {
    position: absolute;
}
#main-title .bird1,
#main-title .bird2 {
    opacity: 0;
    visibility: hidden;
    transition : all 1s;
}
#main-title .bird1 { width: 11%; top: -35%; right: 13%; margin: -20px -20px 0 0;}
#main-title .bird2 { width: 12%; bottom: 0; left: 11%; margin: 0 0 -20px -20px;}
#main-title .active {
    opacity: 1;
    visibility: visible;
    margin: 0;
}
#our-service {
    padding: 30px 0 0;
}
#our-service h2 {
    font-size: 6.5rem;
}
#our-service h2 small {
    font-size: 0.33em;
    margin-left: 1em;
}
#our-service dl div {
    display: grid;
    grid-template-columns: 40% 1fr;
    padding: 40px 0 100px;
    opacity: 0;
    visibility: hidden;
    margin-top: 1000px;
    transition : all 1s;
}
#our-service dl div.active {
    opacity: 1;
    visibility: visible;
    margin-top: 0;
    animation: updown1 2s;
}
@keyframes updown1 {
    50% { transform: translateY(-30px);}
    100% { transform: translateY(0);}
}
#our-service dl div dd:first-of-type {
    order: -1;
    grid-row: 1 / 5;
    padding-right: 10px;
}
#our-service dt {
    font-size: 5.5rem;
    line-height: 1.2;
}
#our-service dt small {
    display: block;
    color: #0098D3;
    font-size: 2rem;
    margin-bottom: 0.5em;
}
#our-service dd {
    font-size: clamp(1.3rem, 1.3vw, 1.8rem);
}
#our-service dd ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
#our-service dd ul li {
    font-size: 0.95em;
    background: #FFE414;
    padding: 0.5em 1em;
    border-radius: 10px;
}
#our-service dd ul li::before {
    content: "#";
}
#our-service dd nav a {
    display: inline-block;
    padding: 1em 2em;
    color: #fff;
    background-image: url(../images/arrow.png);
    background-image: image-set(url(../images/arrow.png) 1x, url(../images/arrow@2x.png) 2x);
    background-image: -webkit-image-set(url(../images/arrow.png) 1x, url(../images/arrow@2x.png) 2x);
    background-repeat: no-repeat;
    transition : all 0.2s;
}
#our-service dd nav a:nth-of-type(1) {
    width: 60%;
    background-color: #004D8C;
    background-position: 97% 50%;
    margin-right: 1em;
}
#our-service dd nav a:nth-of-type(2) {
    width: 35%;
    background-color: #3f97cf;
    background-position: 95% 50%;
}
#our-service dd nav a span {
    letter-spacing: 0.1em;
    margin-left: 2em;
}
#our-service dd nav a:hover {
    background-position-y: 45%;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
}
#recruit {
    background-image:
        url(../images/pc_rec_paper1.png),
        url(../images/pc_rec_paper2.png),
        url(../images/rec_bg.png);
    background-image:
        image-set(url(../images/pc_rec_paper1.png) 1x, url(../images/pc_rec_paper1@2x.png) 2x),
        image-set(url(../images/pc_rec_paper2.png) 1x, url(../images/pc_rec_paper2@2x.png) 2x),
        image-set(url(../images/rec_bg.png) 1x, url(../images/rec_bg@2x.png) 2x);
    background-image:
        -webkit-image-set(url(../images/pc_rec_paper1.png) 1x, url(../images/pc_rec_paper1@2x.png) 2x),
        -webkit-image-set(url(../images/pc_rec_paper2.png) 1x, url(../images/pc_rec_paper2@2x.png) 2x),
        -webkit-image-set(url(../images/rec_bg.png) 1x, url(../images/rec_bg@2x.png) 2x);
    background-repeat: repeat-x, repeat-x, repeat;
    background-position: top, bottom, 0 0;
    padding: 120px 0 140px;
}
#recruit .inner {
    background-image: url(../images/r_main.png);
    background-image: image-set(url(../images/r_main.png) 1x, url(../images/r_main@2x.png) 2x);
    background-image: -webkit-image-set(url(../images/r_main.png) 1x, url(../images/r_main@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: 90% 50%;
    background-size: contain;
}
#recruit h2 {
    font-size: clamp(11rem, 7vw, 13rem);
    line-height: 1;
}
#recruit h2 small {
    font-size: 0.15em;
    margin-left: 2em;
}
#recruit p {
    width: 55%;
    font-size: clamp(1.5rem, 1.5vw, 2rem);
}
#recruit p strong {
    display: block;
    font-size: 2em;
    margin-bottom: 0.5em;
}
#recruit nav {
    width: 55%;
    margin: 30px 0;
}
#recruit nav a {
    display: block;
    padding: 1em 2em;
    margin: 1em 0;
    color: #fff;
    background-repeat: no-repeat;
    transition : all 0.2s;
}
#recruit nav a:nth-of-type(1) {
    width: 75%;
    color: #000;
    background-image: url(../images/arrow_b.png);
    background-image: image-set(url(../images/arrow_b.png) 1x, url(../images/arrow_b@2x.png) 2x);
    background-image: -webkit-image-set(url(../images/arrow_b.png) 1x, url(../images/arrow_b@2x.png) 2x);
    background-color: #fff;
    background-position: 97% 50%;
    margin-right: 1em;
}
#recruit nav a:nth-of-type(2) {
    width: 45%;
    background-image: url(../images/arrow.png);
    background-image: image-set(url(../images/arrow.png) 1x, url(../images/arrow@2x.png) 2x);
    background-image: -webkit-image-set(url(../images/arrow.png) 1x, url(../images/arrow@2x.png) 2x);
    background-color: #3f97cf;
    background-position: 95% 50%;
}
#recruit nav a span {
    letter-spacing: 0.1em;
    margin-left: 2em;
}
#recruit nav a:hover {
    background-position-y: 45%;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
}
#about-us {
    padding: 10px 0 40px;
}
#about-us h2 {
    font-size: 6.5rem;
}
#about-us h2 small {
    font-size: 0.33em;
    margin-left: 1em;
}
#about-us dl {
    display: flex;
    justify-content: space-between;
}
#about-us dl div {
    width: 32%;
    border: #C1E0EE solid 2px;
    border-radius: 50px;
    text-align: center;
    padding: 20px 20px 70px;
    position: relative;
    opacity: 0;
    visibility: hidden;
    margin-top: 100px;
    transition : all 1s;
}
#about-us dl div.active {
    opacity: 1;
    visibility: visible;
    margin: 0;
}
#about-us dt {
    font-size: clamp(2.5rem, 1.6vw, 3rem);
    position: relative;
    margin-bottom: 1em;
}
#about-us dt::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    display: inline-block;
    width: 8rem;
    height: 4px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #C1E0EE;
    border-radius: 2px;
}
#about-us dd {
    font-size: clamp(1.3rem, 1vw, 1.6rem);
}
#about-us img {
    margin: 20px 0 0;
}
#about-us nav {
    position: absolute;
    bottom: 7%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
}
#about-us nav a {
    padding: 1em 4em 1em 3em;
    color: #fff;
    background-image: url(../images/arrow.png);
    background-image: image-set(url(../images/arrow.png) 1x, url(../images/arrow@2x.png) 2x);
    background-image: -webkit-image-set(url(../images/arrow.png) 1x, url(../images/arrow@2x.png) 2x);
    background-repeat: no-repeat;
    background-color: #104e88;
    background-position: 90% 50%;
    border-radius: 30px;
    transition : all 0.2s;
}
#about-us nav a:hover {
    background-position-y: 45%;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
}

/*--------------------------------------------------------------------------------------------------
 PC-small
 -------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1365px) {



}

/*--------------------------------------------------------------------------------------------------
 Tablet-SP
 -------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1023px) {

#main-message strong {
    display: block;
    width: 100%;
    text-align: center;
    font-size: clamp(2rem, 2.5vw, 4rem);
}
#main-visual .inner {
    height: 620px;
    max-width: 768px;
}
#main-visual .sp-img div {
    position: absolute;
}
#main-visual .sp-img div img {
    width: 80%;
}
#main-visual .sp_h_line1  { width: auto; text-align: left;   bottom: 11%;}
#main-visual .sp_h_line2  { width: auto; text-align: right;  top: 27%; right: 0;}
#main-visual .sp_h_flow   { width: auto; text-align: center; top: 44%; left: 1%;}
#main-visual .sp_h_hand   { width: auto; text-align: center; top: 25%; right: 13%;}
#main-visual .sp_h_tablet { width: auto; text-align: right;  bottom: 14%; right: 0;}
#main-visual .sp_h_man1   { width: auto; text-align: center; top: 7%; left: 2%;}
#main-visual .sp_h_man2   { width: auto; text-align: center; top: 41%; right: 6%;}
#main-visual .sp_h_you    { width: auto; text-align: center; top: 15%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
#main-visual .sp_h_plus   { width: auto; text-align: center; top: 25%; left: 49.5%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
#main-visual .sp_h_eight  { width: auto; text-align: center; top: 35%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
#main-visual .sp_h_equal  { width: auto; text-align: center; bottom: 29%; left: 49.5%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
#main-visual .sp_h_mugen  { width: auto; text-align: center; bottom: 14%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
#main-visual .smartsme    { width: auto; text-align: right;  top: 14%; right: 1%;}
#main-visual .message {
    font-size: clamp(2rem, 2.5vw, 4rem);
}
#main-visual .smartsme img {
    width: 138px;
}
#main-title {
    font-size: 1.6rem;
    padding-top: 40px;
}
#main-title strong {
    font-size: 2.8em;
    margin: 20px 0;
}
#main-title img {
    width: 45%;
}
#main-title .bird1 { width: auto; text-align: right; top: -41%;}
#main-title .bird2 { width: auto; text-align: left; top: -40%;}
#our-service {
    padding: 10px 0 0;
}#our-service h2 {
    font-size: clamp(4rem, 10vw, 6rem);
    line-height: 1;
    background: linear-gradient(transparent 70%, #EFEAE3 60%);
    padding: 0 10px 5px;
}
#our-service dl div {
    display: block;
    padding: 40px 10px 20px;
}
#our-service dt {
    font-size: 3.5rem;
}
#our-service dt small {
    font-size: 1.6rem;
}
#our-service dl div dd:first-of-type img {
    width: clamp(40%, 36vmax, 85%);
    margin: 20px auto;
    display: block;
}
#our-service dd {
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
}
#our-service dl div dd:nth-of-type(3) {
    font-size: 0.8em;
    margin: 1.5em 0;
}
#our-service dd nav {
    border-bottom: #666 solid 2px;
    padding-bottom: 4em;
}
#our-service dl div:last-of-type dd nav {
    border: none;
}
#our-service dd nav a:nth-of-type(1) {
    width: 100%;
    margin: 0 0 1em 0;
}
#our-service dd nav a:nth-of-type(2) {
    width: 65%;
}
#recruit .inner {
    padding: 0 20px;
    background: none;
}
#recruit h2 {
    font-size: clamp(5rem, 16vw, 8rem);
}
#recruit h2 small {
    font-size: 0.3em;
    margin-left: 1em;
    letter-spacing: -0.1em;
}
#recruit p {
    width: 100%;
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
}
#recruit p strong {
    line-height: 1.5;
    margin: 1em 0 1em;
}
#recruit p img {
    display: block;
    width: clamp(40%, 36vmax, 85%);
    margin: 1em auto;
}
#recruit nav {
    width: 100%;
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
}
#recruit nav a:nth-of-type(1) {
    width: 100%;
}
#recruit nav a:nth-of-type(2) {
    width: 65%;
}
#about-us h2 {
    font-size: clamp(4rem, 10vw, 6rem);
    line-height: 1;
    background: linear-gradient(transparent 70%, #EFEAE3 60%);
    padding: 0 10px 5px;
}
#about-us dl {
    display: block;
    text-align: center;
}
#about-us dl div {
    width: 90%;
    display: inline-block;
    padding: 20px 0 70px;
}
#about-us dl div.active {
    margin: 2em 0 1em;
}
#about-us dt {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
}
#about-us dd {
    font-size: clamp(1.3rem, 3.5vw, 1.6rem);
}
#about-us img {
    margin: 20px 0;
}

}

/*--------------------------------------------------------------------------------------------------
 SP-small
 -------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {

#main-visual .smartsme img {
    width: 25%;
}



}