@charset "utf-8";
/* ---------- MAINVISUAL ---------- */
.kv {
    width: 100%;
    position: relative;
}
.kv__catchcopy {
    display: block;
    position: absolute;
    top: 40%;
    right: 14%;
    transform: translateY(-40%);
}
.kv__catchcopy > span { 
    display: block; 
    color: #fff;
    font-family: "AxisStd", sans-serif;
    font-size: 3.5rem;
    line-height: 1.5;
    letter-spacing: 1.2rem;
}
.kv__maincopy {
    max-width: 839px;
    width: 65vw;
    max-height: 230px;
    position: absolute;
    right: 14%;
    bottom: -3.6%;
}
.kv__maincopy img { width: 100%; height: auto; }

/* slide */
#slide,
#slide02 {
    position: relative;
    z-index: -1;
}
#slide img,
#slide02 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#slide .splide__list {
    min-height: 750px;
    position: relative;
}
#slide .splide__list div { width: 100%; height: 100%; min-height: 750px; position: absolute; top: 0; left: 0; animation: infinite; }
#slide .splide__list div:nth-child(1) {
    animation-name: fade;
    animation-delay: 2s;
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
}
#slide .splide__list div:nth-child(2) { z-index: -1; }
@keyframes fade {
    0% {
        opacity: 1;
    }
    15% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}


/* ---------- NAVIGATION ---------- */
nav.nav-sub ul.nav-sub__items { display: flex; }
nav.nav-sub ul.nav-sub__items > li {
    border: 2px #1e9cd9 solid;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 20px 20px 0px rgba(4, 0, 0, 0.2);
    color: #1e9cd9;
    text-align: center;
}
nav.nav-sub ul.nav-sub__items > li > a {
    color: #1e9cd9;
    border-radius: 10px;
    display: block;
    position: relative;
}
nav.nav-sub ul.nav-sub__items > li > a > span {
    color: #7c7c7c;
    display: block;
    font-size: 70%;
}
nav.nav-sub ul.nav-sub__items > li > a > span::before,
nav.nav-sub ul.nav-sub__items > li > a > span::after {
    content: '-';
    display: inline-block;
}
nav.nav-sub ul.nav-sub__items > li > a > span::before { padding-right: 8px; }
nav.nav-sub ul.nav-sub__items > li > a > span::after { padding-left: 8px; }
nav.nav-sub ul.nav-sub__items > li > a::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 8px;
    background: url('../img/common/arrow-blue.svg') center center no-repeat;
    background-size: contain;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 16px;
    margin: auto;
    transition: ease right 0.2s;
}
nav.nav-sub ul.nav-sub__items > li > a:hover::after { right: -8px; }

.topics__wrap { padding-top: 46px; padding-bottom: 46px; }


/* ---------- NEWS ---------- */
.news__wrap {
    display: flex;
    margin-top: 54px;
}
.news__wrap  > .news__title {
    font-family: 'Oswald', sans-serif;
    color: #fff;
}
.news-area { border-left: 1px #fff solid; }
.news-area ul.news__items li > a,
.news-area ul.news__items li > div {
    color: #fff;
    display: flex;
    align-items: center;
}
.news-area ul.news__items li > a:hover { text-decoration: underline; }
p.news__all-link { text-align: right; }
p.news__all-link > a {
    color: #fff;
    position: relative;
}
p.news__all-link > a::after {
    content: '>';
    display: inline-block;
    margin-left: 4px;
    position: absolute;
    top: -5px;
    right: -12px;
    transition: ease 0.3s;
}
p.news__all-link > a:hover::after {
    content: '>';
    display: inline-block;
    right: -15px;
}

/* category */
p.news__cat {
    background: #fff;
    border: 1px #bfbfbf solid;
    border-radius: 15px;
    display: inline-block;
    font-size: 1.4rem;
    line-height: 1;
    padding: 6px 24px;
    text-align: center;
    width: 160px;
}

/* category change */
p.news__cat.news__cat--blue { color: #01abd3; }
p.news__cat.news__cat--green { color: #02b354; }
p.news__cat.news__cat--pink { color: #d768cc; }
p.news__cat.news__cat--purple { color: #876ed6; }


/* ---------- Greetings ---------- */
.greetings__wrap {
    display: flex;
    align-items: center;
}

.greetings__title {
    width: 770px;
    max-width: 770px;
    min-height: 770px;
    position: relative;
}
.greetings__title::after {
    content: '';
    display: block;
    width: 100%;
    min-height: 770px;
    background: url("../img/top/bg_greetings.svg") bottom right no-repeat;
    background-size: 110% 110%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.greetings__title > div {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
}
.greetings__title h2 { color: #058fd4; font-size: 2rem; }
.greetings__title h2 > span { display: block; }
.greetings__title h2 > span:not(:last-child) { margin-bottom: 1.6rem; }

.greetings__text > p {}
.greetings__text > p > span { display: block; }
.greetings__text > p > span:not(:last-child) { margin-bottom: 1.6rem; }


/* ---------- ABOUT US ---------- */
.about-us__wrap { position: relative; }
/* color change */
.about-us__wrap span.content-title__main-title { color: #fff; }
.about-us__wrap span.content-title__sub-title { background: #000; max-width: 520px; }

.about-us__kv img { width: 100%; height: auto; }

.about-us__content-area { margin-top: -16%; position: relative; }
.about-us__readtext {
    color: #fff;
}
.about-us__readtext > span {
    display: block;
}

/* ---------- JOSHO7DATA ---------- */
.josho-7-data__wrap {
	background: url("../img/top/data-bg.png") bottom 30% center no-repeat;
	background-size: contain;
}
.josho-7-data__wrap > .inner {
    position: relative;
}
.josho-7-data__title {
    display: flex;
    align-items: center;
    font-family: Hiragino Mincho ProN, YuMincho, Yu Mincho, serif;
    font-weight: bold;
    justify-content: center;
}
.josho-7-data__title > span { line-height: 1; text-align: center; }
.josho-7-data__title .seven { 
    font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 100;
    color: #fd8392;
    line-height: 1;
}
.josho-7-data__sub-title {
    font-family: Hiragino Mincho ProN, YuMincho, Yu Mincho, serif;
    text-align: center;
}
.josho-7-data__sub-title::before {
    content: '-';
    display: inline-block;
    margin-right: 10px;
}
.josho-7-data__sub-title::after {
    content: '-';
    display: inline-block;
    margin-left: 10px;
}
p.josho-7-data__text {
    text-align: center;
    margin-top: 48px;
    margin-bottom: 48px;
}
p.josho-7-data__text > span {
    background: #fff;
    display: inline-block;
    padding: 4px 6px 4px 12px;
}
p.josho-7-data__text > span:not(:last-child) { margin-bottom: 10px; }

/* circle item */
.circle-item01 {
    position: absolute;
    top: 34%;
    left: -10%;
}
.circle-item02 {
    position: absolute;
    left: 24%;
    bottom: 0;
}
.circle-item03 {
    position: absolute;
    right: -10%;
    top: 30%;
}


/* ---------- VOICE ---------- */
.voice__wrap {
    padding-top: 110px;
    padding-bottom: 124px;
}
.voice__wrap .content-title {
    text-align: center;
    margin-bottom: 80px;
}
.voice__wrap .content-title__main-title {
    font-size: 13rem;
    font-family: "Oswald", sans-serif;
    font-weight: 100;
    color: #999;
}
.voice__wrap .content-title__sub-title {
    font-size: 2.4rem;
    color: #0092c4;
    display: block;
    /*打消し*/
    background: none;
    margin: auto;
}


/* ---------- OUR WORK ---------- */
.our-work__wrap {
    max-width: 1440px;
    padding-top: 60px;
    padding-bottom: 60px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}


/* ---------- WORK LIFE ---------- */
.work-life__wrap {
    max-width: 1440px;
    padding-top: 60px;
    padding-bottom: 60px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

@media screen and (min-height: 470px) and (max-height: 600px) and (min-width: 769px) {
    .kv { min-height: 100vh; }
}
@media screen and (min-width: 769px), print {
    .kv { max-height: 80vh; }
    #slide img.sp { display: none; }
    
    /* ---------- NAVIGATION ---------- */
    nav.nav-sub ul.nav-sub__items { gap: 0px 36px; }
    nav.nav-sub ul.nav-sub__items > li {
        font-size: 2.4rem;
        width: 25%;
    }
    nav.nav-sub ul.nav-sub__items > li > a { padding: 20px 20px 40px; }
    
    /* ---------- NEWS ---------- */
    .news__wrap { gap: 0 40px; }
    .news__wrap  > .news__title { font-size: 10.4rem; }
    .news-area { padding-left: 40px; }
    .news-area ul.news__items li > a,
    .news-area ul.news__items li > div { gap: 0 20px; }
    .news-area ul.news__items li time { font-size: 1.4rem; }
    .news-area ul.news__items li p.news__title {
        font-size: 1.5rem;
        line-height: 1.5;
    }
    p.news__all-link { font-size: 1.4rem; }
    
    .greetings__text {
        width: 50%;
        padding-left: 48px;
    }
    .greetings__title h1 { margin-bottom: 10px; }
    
    /* ---------- ABOUT US ---------- */
    .about-us__wrap {
        background: #0093c4;
        background: -moz-linear-gradient(left,  #0093c4 0%, #4bcfbe 59%, #4bcfbe 75%, #ffffff 75%);
        background: -webkit-linear-gradient(left,  #0093c4 0%,#4bcfbe 59%,#4bcfbe 75%,#ffffff 75%);
        background: linear-gradient(to right,  #0093c4 0%,#4bcfbe 59%,#4bcfbe 75%,#ffffff 75%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0093c4', endColorstr='#ffffff',GradientType=1 );
        padding-top: 70px;
        padding-bottom: 80px;
    }
    
    /* ---------- JOSHO7DATA ---------- */
    .josho-7-data__wrap {
        padding-top: 118px;
        padding-bottom: 118px;
        
        overflow: hidden;
    }
    .josho-7-data__wrap > .inner {
        padding-bottom: 200px;
    }
    .josho-7-data__title {
        font-size: 3.5rem;
        letter-spacing: 2rem;
    }
    .josho-7-data__title .seven { 
        font-size: 27.7rem; 
    }
    .josho-7-data__sub-title {
        font-size: 2rem;
    }
    
    /* ---------- OUR WORK ---------- */
    .our-work__wrap .our-work__image,
    .work-life__wrap .work-life__image { width: 55%; }
    .our-work__wrap .our-work__image {
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .work-life__wrap .work-life__image {
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
    }
    .our-work__wrap .our-work__image img,
    .work-life__wrap .work-life__image img { width: 100%; height: auto; }
    
    .right-box { width: 50%; float: right; }
    .left-box { width: 50%; float: left; }
}
@media screen and (max-width: 768px) {
    /* ---------- MAINVISUAL ---------- */
    .kv__catchcopy {
        left: 2rem;
        top: 22%;
        transform: translateY(-22%);
    }
    .kv__catchcopy > span { 
        font-size: calc(2.6rem + ((1vw - 7.68px) * 0.6944));
        line-height: 1.5;
    }
    .kv__maincopy {
        width: 90%;
        right: 0;
        left: 0;
        bottom: 3%;
        margin: auto;
    }
    #slide img.pc { display: none; }
    #slide img { max-height: 750px; }
    
    /* ---------- NAVIGATION ---------- */
    nav.nav-sub ul.nav-sub__items { flex-wrap: wrap; }
    nav.nav-sub ul.nav-sub__items > li {
        font-size: calc(2rem + ((1vw - 7.68px) * 0.6944));
        width: 100%;
    }
    nav.nav-sub ul.nav-sub__items > li:not(:last-child) { margin-bottom: 2%; }
    nav.nav-sub ul.nav-sub__items > li > a { padding: 10px 10px 32px; }
    
    /* ---------- NEWS ---------- */
    .news__wrap { flex-wrap: wrap; }
    .news__wrap  > .news__title { font-size: calc(8rem + ((1vw - 7.68px) * 0.6944)); }
    .news-area { padding-left: 2rem; }
    .news-area ul.news__items li.news__item { margin-bottom: 20px; }
    .news-area ul.news__items li > a,
    .news-area ul.news__items li > div { flex-wrap: wrap; }
    .news-area ul.news__items li time {
        font-size: calc(1.5rem + ((1vw - 7.68px) * 0.6944));
        margin-right: 4%;
    }
    .news-area ul.news__items li p.news__title {
        font-size: calc(1.6rem + ((1vw - 7.68px) * 0.6944));
        line-height: 1.5;
        width: 100%;
        margin: 0;
    }
    p.news__all-link {
        font-size: calc(1.6rem + ((1vw - 7.68px) * 0.6944));
        padding: 2% 6% 2% 2%;
        margin: 0;
    }
    p.news__cat { font-size: calc(1.5rem + ((1vw - 7.68px) * 0.6944)); }
    
    .greetings__wrap { flex-wrap: wrap; }
    .greetings__title, .greetings__text { width: 100%; padding-left: 6%; padding-right: 6%; }
    .greetings__title { min-height: auto; width: 100vw; height: 100vw; max-height: 770px; }
    .greetings__title::after { min-height: auto; height: 100%; }
    .greetings__title > div { width: 65vw; }
    .greetings__title h2 { font-size: calc(1.7rem + ((1vw - 7.68px) * 0.6944)); }
    .greetings__text > p { font-size: calc(1.7rem + ((1vw - 7.68px) * 0.6944)); }
    
    /* ---------- ABOUT US ---------- */
    .about-us__wrap {
        background: #0093c4;
        background: -moz-linear-gradient(left,  #0093c4 0%, #4bcfbe 59%, #4bcfbe 88%, #ffffff 88%);
        background: -webkit-linear-gradient(left,  #0093c4 0%,#4bcfbe 59%,#4bcfbe 88%,#ffffff 88%);
        background: linear-gradient(to right,  #0093c4 0%,#4bcfbe 59%,#4bcfbe 88%,#ffffff 88%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0093c4', endColorstr='#ffffff',GradientType=1 );
        padding-top: 18%;
        padding-bottom: 21%;
    }
    .about-us__content-area { margin-top: -22%; }
    
    /* ---------- JOSHO7DATA ---------- */
    .josho-7-data__wrap {
        padding-top: calc(118px / 2);
        padding-bottom: calc(118px / 2);
    }
    .josho-7-data__title {
        font-size: calc(1.8rem + ((1vw - 7.68px) * 0.6944));
        letter-spacing: 1.8rem;
    }
    .josho-7-data__title .seven {  font-size: calc(7rem + ((1vw - 7.68px) * 0.6944));  }
    .josho-7-data__sub-title { font-size: calc(1.6rem + ((1vw - 7.68px) * 0.6944)); }
    
    /* ---------- OUR WORK ---------- */
    .our-work__wrap .our-work__image,
    .work-life__wrap .work-life__image { margin-top: 4rem; }
    
    /* ---------- VOICE ---------- */
    .voice__wrap { padding-top: 10%; padding-bottom: 10%; }
    .voice__wrap .content-title__main-title { font-size: calc(8rem + ((1vw - 7.68px) * 0.6944)); }
    .voice__wrap .content-title__sub-title { font-size: 55%; }
    .voice__wrap .content-title { margin-bottom: 4rem; }
    
    /* ---------- WORK LIFE ---------- */
    img { width: 100%; height: auto; }
}