@charset "utf-8";

/*-----------------------
    page_top.css
------------------------*/

/*----- mv -----*/

.top_mv {
    height: 800px;
}
.top_mv .pic img {
    height: 800px;
}
.header:has(+ .top){
    position: absolute;
    top: 800px;    
}
.header.fixed:has(+ .top){
    position: fixed;
    top: 15px;
    left: -10px; 
}

@media screen and (min-width: 768px) and (max-width: 1700px){
    
    .top_mv,
    .top_mv .pic img {
        height: 640px;
    }
    .header:has(+ .top){
        top: 640px;    
    }
    
}
@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .top_mv,
    .top_mv .pic img {
        height: 60vw;
    }
    .header:has(+ .top){
        top: 60vw;    
    }
    
}
@media screen and (max-width: 767px){
    
    .top_mv,
    .top_mv .pic img {
        height: 72vw;
    }
    .header:has(+ .top){
        top: 72vw;    
    }
    
}


/*----- intro -----*/

.top_intro {
    padding: 210px 0 100px;
}
.top_intro .title {
    text-align: center;
}
.top_intro .title .ttl {
    display: inline-block;
    margin-bottom: 60px;
    padding: 30px 0;
    font-size: 35px;
    letter-spacing: 3px;
    border-top: 1px solid var(--text);
    border-bottom: 1px solid var(--text);
}
.top_intro .ul {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 40px 40px;
}
.top_intro .ul .li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 480px;
    height: 160px;
    background: #FEF79E;
    background: linear-gradient(0deg, rgba(254, 247, 158, 1) 0%, rgba(226, 235, 152, 1) 50%, rgba(185, 217, 144, 1) 100%);
    border-radius: 10px;
    font-size: 23px;
    line-height: 2;
    text-align: center;
}
.top_intro .ul .li:nth-of-type(3) {
    margin-left: 200px;
}
.top_intro .ul .illust {
    position: absolute;
    z-index: 0;
    top: 0;
    right: -30px;
    width: 181px;
}

@media screen and (min-width: 768px) and (max-width: 1260px){

    .top_intro {
        padding: 16vw 0 8vw;
    }
    .top_intro .title .ttl {
        margin-bottom: 5vw;
        padding: 2.5vw 0;
        font-size: 3vw;
        letter-spacing: .3vw;
    }
    .top_intro .ul {
        gap: 3vw 3vw;
    }
    .top_intro .ul .li {
        width: 36vw;
        height: 13vw;
        font-size: 1.8vw;
    }
    .top_intro .ul .li:nth-of-type(3) {
        margin-left: 12vw;
    }
    .top_intro .ul .illust {
        right: -15px;
        width: 16vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .top_intro {
        padding: 110px 0 50px;
    }
    .top_intro .title .ttl {
        margin-bottom: 30px;
        padding: 20px 0;
        font-size: min(5vw,24px);
        letter-spacing: 0;
    }
    .top_intro .ul {
        display: block;
    }
    .top_intro .ul .li {
        width: min(400px,100%);
        height: 100px;
        margin: 0 auto 20px;
        font-size: min(4.5vw,20px);
    }
    .top_intro .ul .li:nth-of-type(3) {
        margin-left: auto;
    }
    .top_intro .ul .illust {
        position: relative;
        top: 0;
        right: 0;
        width: 120px;
        margin: 15px auto 0;
    }
    
}

/*----- solute -----*/

.top_solute {
    padding: 100px 0;
}
.top_solute .wrap {
    position: relative;
}
.top_solute .pic {
    position: absolute;
    z-index: 0;
    top: 140px;
    right: -40px;
    width: 508px;
}
.top_solute .title .text {
    display: inline-block;
    padding: 10px;
    font-size: 50px;
    border-top: 1px solid var(--text);
}
.top_solute .title:nth-of-type(2) .text {
    border-bottom: 1px solid var(--text);
}
.top_solute .ttl {
    margin: 30px 0 45px;
    color: var(--green);
    font-size: 27px;
    letter-spacing: 2px;
    line-height: 1.75;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .top_solute {
        padding: 8vw 0;
    }
    .top_solute .pic {
        top: 20vw;
        right: -2vw;
        width: 32vw;
    }
    .top_solute .title .text {
        padding: 1vw;
        font-size: 4vw;
    }
    .top_solute .ttl {
        margin: 3vw 0 4vw;
        font-size: 2.2vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .top_solute {
        padding: 50px 0;
    }
    .top_solute .pic {
        position: relative;
        top: auto;
        right: -5vw;
        width: min(400px,100%);
        margin: 30px auto 0;
    }
    .top_solute .title .text {
        font-size: 25px;
    }
    .top_solute .ttl {
        margin: 20px 0 30px;
        font-size: 18px;
    }
    .top_solute .ttl br {
        display: none;
    }
    
}

/*----- service -----*/

.top_service {
    padding: 90px 0 100px;
}
.top_service .ul {
    display: flex;
    flex-wrap: wrap;
    gap: 60px 60px;
    margin-bottom: 30px;
}
.top_service .ul .li {
    width: calc(33.33% - 40px);
}
.top_service .ul .li .pic img {
    aspect-ratio: 9/7;
    border-radius: 10px;
}
.top_service .ul .li .ttl {
    position: relative;
    margin: 20px 0;
    padding-bottom: 15px;
    font-size: 25px;
    line-height: 1.5;
    text-align: center;
}
.top_service .ul .li .ttl::after {
    position: absolute;
    display: block;
    content: "";
    width: 80px;
    height: 1px;
    bottom: 0;
    left: calc(50% - 40px);
    background: var(--text);
}

@media screen and (min-width: 768px) and (max-width: 1260px){

    .top_service {
        padding: 7vw 0 8vw;
    }
    .top_service .ul {
        gap: 4.5vw 4.5vw;
        margin-bottom: 3vw;
    }
    .top_service .ul .li {
        width: calc(33.33% - 3vw);
    }
    .top_service .ul .li .ttl {
        margin: 2vw 0;
        padding-bottom: 1.5vw;
        font-size: 2vw;
    }
    .top_service .ul .li .ttl::after {
        width: 8vw;
        left: calc(50% - 4vw);
    }    
    
}
@media screen and (max-width: 767px){

    .top_service {
        padding: 50px 0;
    }
    .top_service .ul {
        display: block;
        margin-bottom: 30px;
    }
    .top_service .ul .li {
        margin: 0 auto 30px;
        width: min(400px,100%);
    }
    .top_service .ul .li .ttl {
        margin: 15px 0;
        font-size: 20px;
    }
    
}

/*----- links -----*/

.top_links {
    padding: 150px 0 120px;
    background: url("/system_panel/uploads/images/top_bg_01.jpg") center no-repeat;
    background-size: cover;
}
.top_links_b_hover {
    background: url("/system_panel/uploads/images/top_bg_02.jpg") center no-repeat;
    background-size: cover;
}
.top_links_c_hover {
    background: url("/system_panel/uploads/images/top_bg_03.jpg") center no-repeat;
    background-size: cover;
}
.top_links .ul .li {
    padding-bottom: 30px;
}
.top_links .ul .li .inner {
    padding: 30px 60px;
    background: #FFF;
    background: linear-gradient(135deg,rgba(255, 255, 255, 1) 50%, rgba(255, 247, 160, 1) 60%, rgba(188, 228, 146, 1) 70%);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top_links .ul .li .title {
    display: flex;
    align-items: center;
}
.top_links .ul .li .title .icon {
    width: 50px;
}
.top_links .ul .li .title .ttl {
    margin: 0 30px;
    font-size: 30px;
}
.top_links .ul .li .title .en {
    color: var(--green);
}

@media screen and (min-width: 768px) and (max-width: 1260px){

    .top_links {
        padding: 9vw 0 7vw;
    }
    .top_links .ul .li {
        padding-bottom: 2vw;
    }
    .top_links .ul .li .inner {
        padding: 2vw 4vw;
    }
    .top_links .ul .li .title .icon {
        width: 4vw;
    }
    .top_links .ul .li .title .ttl {
        margin: 0 2vw;
        font-size: 2.4vw;
    }
    
}
@media screen and (max-width: 767px){
 
    .top_links {
        padding: 50px 0 30px;
    }
    .top_links .ul .li {
        padding-bottom: 20px;
    }
    .top_links .ul .li .inner {
        padding: 20px 5vw;
        display: block;
    }
    .top_links .ul .li .title {
        display: block;
        text-align: center;
    }
    .top_links .ul .li .title .icon {
        width: 40px;
        margin: 0 auto;
    }
    .top_links .ul .li .title .ttl {
        margin: 15px 0;
        font-size: 24px;
    }
    .top_links .ul .li .title .en {
        margin-bottom: 20px;
    }
    
}

/*----- works -----*/

.top_works {
    padding: 110px 0 130px;
}
.top_works .btns .webgene-blog {
    display: flex;
    justify-content: center;
    gap: 0 60px;
}
.top_works_ul .webgene-blog {
    display: flex;
    gap: 0 60px;
}
.top_works_ul .webgene-blog .li {
    width: calc(33.33% - 40px);
}
.top_works_ul .webgene-blog .li a {
    color: var(--text);
    text-decoration: none;
}
.top_works_ul .webgene-blog .li a:hover {
    opacity: .8;
}
.top_works_ul .webgene-blog .li .pic {
    width: 100%;
    height: 270px;
    background: #f4eee4;
    border-radius: 10px;
}
.top_works_ul .webgene-blog .li .pic img {
    height: 270px;
    border-radius: 10px;
}
.top_works_ul .webgene-blog .li .title {
    margin-top: 15px;
    text-align: center;
    line-height: 1.75;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .top_works {
        padding: 8vw 0;
    }
    .top_works .btns .webgene-blog {
        gap: 0 6vw;
    }
    .top_works_ul .webgene-blog {
        gap: 0 4.5vw;
    }
    .top_works_ul .webgene-blog .li {
        width: calc(33.33% - 3vw);
    }
    .top_works_ul .webgene-blog .li .pic,
    .top_works_ul .webgene-blog .li .pic img {
        height: 22vw;
    }
    .top_works_ul .webgene-blog .li .title {
        margin-top: 1.5vw;
    }

}
@media screen and (max-width: 767px){
    
    .top_works {
        padding: 50px 0;
    }
    .top_works .btns .webgene-blog {
        display: block;
    }
    .top_works .btns .m_btn {
        margin-bottom: 20px;
    }    
    .top_works_ul .webgene-blog {
        display: block;
    }
    .top_works_ul .webgene-blog .li {
        width: min(400px,100%);
        margin: 30px auto 0;
    }
    .top_works_ul .webgene-blog .li .pic,
    .top_works_ul .webgene-blog .li .pic img {
        height: 60vw;
    }
    .top_works_ul .webgene-blog .li .title {
        margin-top: 10px;
        text-align: left;
    }
    
}