@charset "utf-8";
.pc-view{
    display: block;
}
.sp-view{
    display: none;
}
.fcolor-main{
    color:#000000;}
.fcolor-navy{
    color:#006090;}

header{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 70px;
    z-index: 10;
    background-color: rgba(255,255,255,0.9);}
    .logo-view{
        position: absolute;
        top: 0;
        left: 0;
        height:54px;
        padding-top: 10px;}
        .logo-view img{
            height: 100%;}
    .header-menu{
        height: 64px;
        line-height: 64px;
        list-style: none;
        display:flex;
        justify-content: flex-end;}
        .header-menu span{
            cursor: pointer;
            padding-left: 2vw;
            padding-right: 2vw;
            text-decoration: none;}
        .header-menu li{
            position: relative;
            height: 100%;
            overflow: hidden;}
            .sub-header-menu{
                position: absolute;
                width: max-content;
                top: calc(100% - 0.5rem);}
                .sub-header-menu p{
                    margin: 0;
                    background-color: #E46C62;}
                    .sub-header-menu p a{
                        color: #fff;}
                .sub-header-menu hr{
                    background-color: #fff;
                    border: unset;
                    height: 1px;
                    margin: 0;}
                .sub-header-menu p,
                .sub-header-menu hr{
                    opacity: 0;
                    transform: rotateY(90deg);}
                .header-menu li:hover{
                    overflow: unset;}
                .header-menu li:hover .sub-header-menu :nth-child(1){
                    opacity: 1;
                    transform: rotateY(0deg);
                    transition:all 0.5s 0.1s;}
                .header-menu li:hover .sub-header-menu :nth-child(2){
                    opacity: 1;
                    transform: rotateY(0deg);
                    transition:all 0.5s 0.2s;}
                .header-menu li:hover .sub-header-menu :nth-child(3){
                    opacity: 1;
                    transform: rotateY(0deg);
                    transition:all 0.5s 0.3s;}
                .header-menu li:hover .sub-header-menu :nth-child(4){
                    opacity: 1;
                    transform: rotateY(0deg);
                    transition:all 0.5s 0.4s;}
                .header-menu li:hover .sub-header-menu :nth-child(5){
                    opacity: 1;
                    transform: rotateY(0deg);
                    transition:all 0.5s 0.5s;}
                .header-menu li:hover .sub-header-menu :nth-child(6){
                    opacity: 1;
                    transform: rotateY(0deg);
                    transition:all 0.5s 0.6s;}
                .header-menu li:hover .sub-header-menu :nth-child(7){
                    opacity: 1;
                    transform: rotateY(0deg);
                    transition:all 0.5s 0.7s;}
body{}
.paragraph-num{
    font-size: 6rem;}
ul.pinkchk{
    list-style-position: inside;
    list-style-image: url("../img/chkpink.png");}
ul.bluechk{
    list-style-position: inside;
    list-style-image: url("../img/chkblue.png");}
ul.orangechk{
    list-style-position: inside;
    list-style-image: url("../img/chkorange.png");}
ul.pinksircle{
    margin-top: 4rem;
    margin-bottom: 4rem;
    list-style-position: inside;
    list-style-image: url("../img/ul_circle_pink.png");}
    /*ul.pinksircle li::marker{
        color:#f46c62;
        font-size: 1.6rem;}*/
    
    ul.pinkchk,
    ul.bluechk,
    ul.orangechk,
    ul.pinksircle{
        padding-left: 1.6rem;}
ul li{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

article{
    width: 100%;}
section{}
    section p{
        font-size: 1.6rem;
        line-height: 2em;}
.content{
    width: calc(100% - 10vw);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top:0;
    left:0;}
    

.article_1{
    width: 750px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5rem;
    position: relative;
    top: 0;
    left: 0;
    background-color: #ffffff;
}
    .article_1 .img-logo{
    width: 100%;
    max-width: 900px;
    margin-bottom: 2rem;
    display: block;
    }

    .article_1 p{
        line-height: 2em;
    }

    .article_1 .president{
        float: right;
        margin-left: 1em;
        padding-top: 1rem;
    }
    .article_1 .img_president{
        width: 150px;
        height: 200px;
    }
    

.article_2{
    width: 750px;
    margin-left: auto;
    margin: auto;
    padding-top: 5rem;
    position: relative;
    top: 0;
    left: 0;
    background-color: #ffffff;
}
    .article_2 h2{
        font-size: 1.2em;
        padding-top: 0.5em;
    }
    .article_2 p{
        line-height: 2em;
    }
    .article_2 ol{
        padding-inline-start: 20px;
    }
    .article_2 li{
        font-weight: bold;
    }
    .article_2 .service_contents{
        border-top: 10px solid #eadeba;
        margin-top: 3rem;
    }
    .article_2 .service_img{
        margin-right: 1rem;
        width:25%;
    }
    .article_2 .service_details{
        width: 50%;
        font-size: 1.5rem;
        font-weight: bold;
        padding-left: 1.2rem;
        line-height: 2em;
    }
    

.article_3{
    width: 750px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5rem;
    position: relative;
    top: 0;
    left: 0;
    background-color: #ffffff;
}
    .article_3 h2{
        font-size: 1.6rem;
    }
    .article_3 .companyOverview{
        display: flex;
        list-style: none;
        flex-direction: column;
        justify-content: center;
    }
    .article_3 table{
        line-height: 2em;
        letter-spacing: 0.05em;
    }

    .article_3 .label{
        font-weight: bold;
        padding-right: 0.5rem;
        vertical-align: baseline;
    }
    .article_3 .value{
        flex-grow: 1;
        text-align: left; 
    }

.article_4{
    width: 750px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5rem;
    position: relative;
    top: 0;
    left: 0;
    background-color: #ffffff;
}

    .article_4 h2{
        font-size: 2rem;
        margin-top: 3rem;
    }
    .article_4 p{
        line-height: 2em;
    }


.article_5{
    width: 750px;
    margin: 0 auto 0 auto;
    padding-top: 5rem;
    position: relative;
    top: 0;
    left: 0;
    background-color: #ffffff;
}
    .article_5 p{
        line-height: 2em;
        letter-spacing: 0.1em;
    }

.article_6{
    width: 750px;
    margin: 0 auto 4rem auto;
    padding-top: 5rem;
    position: relative;
    top: 0;
    left: 0;
    background-color: #ffffff;
}

@media (max-aspect-ratio: 10/9) {
.pc-view{
    display: none;
}
.sp-view{
    display: block;
}
header{
    position: fixed;
    top:0;
    left:0;
    z-index: 2;}
    /*header .content{
        width: calc(100% - 2rem);}*/
    header .logo-view{
        padding-top: 0;
        margin-top: 1.5rem;
        height: 38px;}
    .hamburger-btn{
        position: absolute;
        width: 40px;
        height: 40px;
        top: 1.5rem;
        right: 1.5rem;
        background-color: #ff4f4d;
        border-radius: 50%;
        cursor: pointer;}
        .hamburger-btn .hamburger-btn-line{
            position: absolute;
            top: 20px;
            left: 9px;}
        .hamburger-btn-line::before{
            transform: rotate(0deg);
            top: -7px;}
        .hamburger-btn-line::after{
            transform: rotate(0deg);
            top: 5px;}
        .hamburger-btn-line,.hamburger-btn-line::before,.hamburger-btn-line::after{
            display: block;
            content: " ";
            position: relative;
            height: 2px;
            width: 22px;
            background-color: #fff;
            transition: all 0.5s ease;}
            .hamburger-btn-line.close-button::before{
                transform: rotate(45deg);
                top: -1px;}
            .hamburger-btn-line.close-button::after{
                transform: rotate(-45deg);
                top: -3px;}
            .hamburger-btn-line.close-button{
                background-color: #ff4f4d;}
    header .header-top-menu{
        position: absolute;
        top: 70px;/*120px*/
        right: -75vw;
        width: 45vw;
        text-align: center;
        line-height: 2vh;
        font-size: 1.5vh;
        background-color: rgb(255, 79, 77,0.6);
        transition: all 0.5s ease;}
        header .header-top-menu p{
            cursor: pointer;
            color: #fff;}
            header .header-top-menu hr{
            height: 1px;
            width: 80%;
            margin: 0 auto;
            background-color: #fff;
            border: unset;}
            header .header-top-menu.menu-open{
                right: 0vw;
                transition: all 0.5s ease;}

}

/* .scroll_fadein{
    opacity: 1;
    top: 0;
    left: 0;
    animation:  scroll_fadein 1s ease 0s 1 alternate;}


@keyframes scroll_fadein {
0% {
    top:200px;
    opacity: 0;
}
100% {
    top:0px;
    opacity: 1;}
} */

.loading_base{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #fff;
    width: 100vw;
    height: 110vh;
    overflow-y: hidden;
    overflow-x: hidden;
    opacity: 0;
    animation:  wait_anime 4.5s ease 0s 1 alternate,
                fadeout 2s ease-in 4s 1 alternate;}

.loading_logo{
    margin-top: 8.8rem;
    width: 100vw;
}
    .loading_logo .logo_broom{
        text-align: center;
        transform-origin: top center;
        animation: swing 2s ease-in-out infinite;
        margin-right: 0.8em;
    }
    .loading_logo .logo_broom_img{
        width: 3.8em;
        height: auto;
    }

    .loading_logo .loading_text{
        text-align: center;
        font-size: 0.9em;
        font-weight: bold;
        margin-top: 2rem;
    }
    .loading_logo .dot {
        opacity: 0;
        animation: blink 1.5s infinite;
      }
  
      .dot:nth-child(1) {
        animation-delay: 0s;
      }
  
      .dot:nth-child(2) {
        animation-delay: 0.3s;
      }
  
      .dot:nth-child(3) {
        animation-delay: 0.6s;
      }

/* アニメーション停止用*/
.loading_base .loading_logo .stop-animation {
    animation: none;
}
  
@keyframes wait_anime{
    0% {opacity: 1;}
    100% {opacity: 1;}
}

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

@keyframes swing {
    0% {transrm: rotate(0deg);}
    20% {transform: rotate(-10deg);}
    60% {transform: rotate(10deg);}
    80% {transform: rotate(0deg);}
}

@keyframes blink {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

@media screen and (max-width:1024px) {
    .article_1,.article_2,.article_3,.article_4,.article_5,.article_6{
        width: 90vw;
    }
}

@media screen and (min-width:1024px) {
    .loading_logo .logo_broom{
        text-align: center;
        margin: 16rem 4.2rem 0 0;
        transform-origin: top center;
        animation: swing 2s ease-in-out infinite;
    }
    .loading_logo .logo_broom_img{
        width: 5em;
        height: auto;
    }
    .loading_logo .loading_text{
        text-align: center;
        font-size: 1.1em;
        font-weight: bold;
        margin: 3rem 4.2rem 0 0;
    }
}