@charset "utf-8";

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

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

.top_mv {
    position: relative;
}
.top_mv .pic {
    display: flex;
    justify-content: flex-end;
}
.top_mv .pic img {
    width: 1250px;
    height: 854px;
}
.top_mv_text {
    position: absolute;
    top: 250px;
    left: 6vw;
    background: url("/system_panel/uploads/images/under2.png") left bottom no-repeat;
    background-size: 390px auto;
}
.top_mv_text h2 {
    font-size: 35px;
    letter-spacing: 7px;
    line-height: 2.57;
}
.top_mv .image {
    position: absolute;
    top: 180px;
    left: calc(500px + 6vw);
    width: 450px;
}
.top_mv .circle_list {
    position: absolute;
    bottom: 30px;
    left: calc(50% - 390px);
}

@media screen and (min-width: 1261px) and (max-width: 1700px){

    .top_mv .pic img {
        width: 70%;
        height: 854px;
    }
    .top_mv_text {
        top: 200px;
        left: 30px;
        padding-bottom: 10px;
        background-size: 340px auto;
    }
    .top_mv_text h2 {
        font-size: 32px;
        letter-spacing: 6px;
        line-height: 2.5;
    }
    .top_mv .image {
        top: 180px;
        left: calc(350px + 6vw);
        width: 400px;
    }
    .top_mv .circle_list {
        bottom: 15px;
    }    

}
@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .top_mv .pic img {
        width: 70%;
        height: 70vw;
    }
    .top_mv_text {
        top: 20vw;
        left: 30px;
        padding-bottom: 1vw;
        background-size: 30vw auto;
    }
    .top_mv_text h2 {
        font-size: 3vw;
        letter-spacing: .6vw;
        line-height: 2.2;
    }
    .top_mv .image {
        top: 8vw;
        left: calc(30vw + 6vw);
        width: 30vw;
    }
    .top_mv .circle_list {
        bottom: 0vw;
        left: calc(50% - 38vw);
    }    
    .top_mv .circle_list .circle .icon img {
        filter: brightness(0) saturate(100%) invert(99%) sepia(48%) saturate(143%) hue-rotate(260deg) brightness(115%) contrast(87%);
    }
    
}
@media screen and (max-width: 767px){
    
    .top_mv .pic img {
        width: 70%;
        height: 400px;
    }
    .top_mv_text {
        top: 40px;
        left: 4vw;
        padding-bottom: 10px;
        background-size: 100% auto;
    }
    .top_mv_text h2 {
        font-size: min(5vw,25px);
        letter-spacing: 3px;
        line-height: 1.75;
    }
    .top_mv .image {
        top: 210px;
        left: 4vw;
        width: calc(100% - 4vw);
    }
    .top_mv .image img {
        width: min(50%, 300px);
    }
    .top_mv .circle_list {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 30px;
    }    
    .top_mv .circle_list .circle .icon img {
        filter: brightness(0) saturate(100%) invert(99%) sepia(48%) saturate(143%) hue-rotate(260deg) brightness(115%) contrast(87%);
    }
    
}

/*----- worry -----*/

.top_worry {
    padding: 20px 0 100px;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .top_worry {
        padding: 1.8vw 0 8vw;
    }
    
}
@media screen and (max-width: 767px){
  
    .top_worry {
        padding: 10px 0 60px;
    }
    
}

/*----- info -----*/

.top_info {
    position: relative;
    padding: 120px 0 0;
}
.top_info:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -75px;
    border: 75px solid transparent;
    border-top: 75px solid var(--white);
}

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

    .top_info {
        padding: 9vw 0 0;
    }
    .top_info:before {
        margin-left: -6vw;
        border-width: 6vw;
        border-top-width: 6vw;
    }    
    
}
@media screen and (max-width: 767px){
    
    .top_info {
        padding: 60px 0 0;
    }
    .top_info:before {
        margin-left: -45px;
        border-width: 45px;
        border-top-width: 45px;
    }    
    
}

/*----- irukkusu -----*/

.top_irukkusu {
    padding: 40px 0 120px;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .top_irukkusu {
        padding: 3vw 0 9vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .top_irukkusu {
        padding: 40px 0 60px;
    }
    
}

/*----- purchase -----*/

.top_purchase {
    padding: 30px 0 100px;
}
.top_purchase_box .box {
    position: relative;
    margin-bottom: 50px;
}
.top_purchase_box .pic img {
    height: 400px;
}
.top_purchase_box .top_purchase_btn {
    position: absolute;
    top: 0;
    right: 140px;
    width: 300px;
    height: 400px;
}
.top_purchase_box .top_purchase_btn .ttl {
    margin: 140px 0 50px;
    color: var(--white);
    font-size: 35px;
    letter-spacing: 5px;
    text-align: center;
}
.top_purchase_box .box:nth-of-type(2) .top_purchase_btn {
    right: auto;
    left: 140px;
}
.top_purchase_box .box:nth-of-type(2) .top_purchase_btn .ttl {
    color: var(--text);
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .top_purchase {
        padding: 2.5vw 0 8vw;
    }
    .top_purchase_box .box {
        margin-bottom: 4vw;
    }
    .top_purchase_box .pic img {
        height: 30vw;
    }
    .top_purchase_box .top_purchase_btn {
        right: 3vw;
        height: 30vw;
    }
    .top_purchase_box .top_purchase_btn .ttl {
        margin: 9vw 0 4vw;
        font-size: 2.5vw;
        letter-spacing: .5vw;
    }
    .top_purchase_box .box:nth-of-type(2) .top_purchase_btn {
        right: auto;
        left: 3vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .top_purchase {
        padding: 10px 0 30px;
    }
    .top_purchase_box .box {
        margin-bottom: 30px;
    }
    .top_purchase_box .pic img {
        height: min(60vw, 280px);
    }
    .top_purchase_box .top_purchase_btn {
        right: 0;
        width: 100%;
        height: min(60vw, 280px);
    }
    .top_purchase_box .top_purchase_btn .ttl {
        margin: 16vw 0 4vw;
        font-size: min(7vw, 30px);
        letter-spacing: 1vw;
    }
    .top_purchase_box .box:nth-of-type(2) .top_purchase_btn {
        right: auto;
        left: 0;
    }
    
}

/*----- news -----*/

.top_news {
    padding: 50px 0 150px;
}
.top_news_list {
    width: 850px;
    margin: 0 auto;
}
.top_news_box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40px;
    line-height: 1.5;
}
.top_news_box .category {
    width: 130px;
}
.top_news_box .category p {
    display: block;
    padding: 0 0 4px;
    background: var(--orange);
    color: var(--white);
    font-size: 15px;
    text-align: center;
}
.top_news_box .date {
    width: 130px;
    font-size: 17px;
    text-align: center;
}
.top_news_box .title {
    width: calc(100% - 130px - 130px);
    font-size: 17px;
    padding-left: 30px;
}
.top_news_box .title a:hover {
    text-decoration: underline;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .top_news {
        padding: 4vw 0 10vw;
    }
    .top_news_list {
        width: 87.5%;
    }
    .top_news_box {
        margin-bottom: 3.3vw;
    }
    .top_news_box .category {
        width: 11vw;
    }
    .top_news_box .category p {
        padding: 0 0 .4vw;
        font-size: 1.4vw;
    }
    .top_news_box .date {
        width: 11vw;
        font-size: 1.6vw;
    }
    .top_news_box .title {
        width: calc(100% - 11vw - 11vw);
        padding-left: 3vw;
        font-size: 1.6vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .top_news {
        padding: 10px 0 60px;
    }
    .top_news_list {
        width: min(100%, 600px);
    }
    .top_news_box {
        justify-content: flex-start;
        margin-bottom: 40px;
    }
    .top_news_box .category {
        width: 120px;
    }
    .top_news_box .category p {
        padding: 0 0 4px;
        font-size: 14px;
    }
    .top_news_box .date {
        width: 120px;
        font-size: 16px;
    }
    .top_news_box .title {
        width: 100%;
        margin-top: 10px;
        padding-left: 0;
        font-size: 16px;
    }
    
}

/*----- product, company -----*/

.top_product {
    padding: 20px 0 120px;
}
.top_company {
    padding: 20px 0 180px;
}
.top_product .pic img,
.top_company .pic img {
    height: 400px;
}

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

    .top_product .pic img,
    .top_company .pic img {
        height: 24vw;
    }

}
@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .top_product,
    .top_company {
        padding: 2vw 0 9vw;
    }
    .top_product .pic img,
    .top_company .pic img {
        height: 24vw;
    }
    
}
@media screen and (max-width: 767px){
    
    .top_product,
    .top_company {
        padding: 10px 0 60px;
    }
    .top_product .pic img,
    .top_company .pic img {
        height: min(40vw,180px);
    }
    
}