@charset "UTF-8";
/* base_style  Start */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
HTML{
    font-size: 100%;
}
:root{
    --header_height:50px;
    --footer_height:50px;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
body{
    min-height: calc(100vh - var(--header_height) - var(--footer_height));
}
/* base_style End ------------------------------------------------------------------------------------*/


/* header start */
.header_main{
    height: var(--header_height);
    background-color: #eee;
}
.header_container{
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    /* position: relative; */
}
/* icon */
.header_ico img{
    vertical-align: bottom;  /* <a>の中に<img>を入れると謎の余白が入るので，それを解消するもの*/
}
/* nav */
.header_nav{
    margin-left: auto; /* iconとnavを左右に分けるため */
}
.header_nav_list{
    display: flex;
}
.header_nav_list li + li{
    margin-left: 30px;
}
.header_nav_list li a{
    color: #333;
    font-weight: bold;
}
.header_nav_list li{
    border-radius: 10px;
    font-size: 1rem;
}
.header_nav_list a{
    border-radius: 20px;
    padding: 0 15px;
}
.header_nav_list li :hover{
    background-color:lightgreen;
    transition: .25s;
}


/* humberger menu style start */
.hum_nav{
    display: none;
}
#hummenu_toggle {
    display: none;
}
.hummenu_container{
    display: none;
}
.hummenu_button{
    position: relative;
}
.hummenu_container{
    margin-left: auto;
}
    .hummenu_button::before,
    .hummenu_button::after {
    display: block;
    background-color: #000;
    position: absolute;
    height: 3px;
    width: 30px;
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    right:0;
    transition: .25s;
}
.hummenu_button::before {
    content: '';
    margin-top: -4px;
}
.hummenu_button::after {
    content: '';
    margin-top: 4px;
}
#hummenu_toggle:checked ~ .hummenu_button::after{
    margin-top: 0px;
    transform: rotate(45deg);
    transition: .25s;
}
#hummenu_toggle:checked ~ .hummenu_button::before{
    margin-top: 0px;
    transform: rotate(-45deg);
    transition: .25s;
}
#hummenu_toggle:checked ~ .hum_nav{
    display: block;
    position: absolute;
    top: var(--header_height);
    left: 0;
    width: 100%;
    height: 100vh;
    text-align: center;
}
#hummenu_toggle:checked ~ .hum_nav .hum_nav_list{
    width: 90%;
    margin: 0 auto;
}
#hummenu_toggle:checked ~ .hum_nav li{
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#hummenu_toggle:checked ~ .hum_nav .hum_nav_list li a{
    color: #333;
    font-weight: 600;
}

/* header end ------------------------------------------------------------------------- */

/*  */
.main{
    min-height: calc(100vh - var(--header_height) - var(--footer_height));
    width: 100%;
}
.top_img_area{
    width:100%;
    /* background-color: aquamarine; */
    aspect-ratio: 2.5/1;
    position: relative;
}
    .top_img_area img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        overflow: hidden;
    }
    .top_img_comment{
        background-color: rgba(0, 0, 0, 0.3);
        color: #fff;
        padding: 20px;
        width: 50%;
        max-height: 90%;
        position: absolute;
        top:50%;
        right:1%;
        transform: translateY(-50%);
        border-radius: 15px;
    }
        .comment_top{
            text-align: center;
            font-weight: bold;
            font-size: 1.7rem;
        }
        .comment_service{ 
            text-align: center;
            font-size: 0.9rem;

        }
        .comment_company_comsept{
            font-size: 0.9em;
        }
        .top_img_comment p+p{
            margin-top: 30px;
        }
/*  */

/* main */
/* section */
.section_head{
    text-align: center;
    margin-bottom: 20px;
    padding-top: 20px;
}

.index_page .section:nth-child(2n){
    background-color:#fff;
}
.index_page .section:nth-child(2n+1){
    background-color:rgba(204, 204, 204, 0.8);
}
/* news */
.news{
    min-height: 300px;
}
    .news_container{
        width:80%;
        margin: 0 auto;
    }
    
    .news_content{
        display: flex;
        min-height: 30px;
        padding-left: 10px;
        border-bottom:solid 1px #333;
        align-items: flex-end;
    }

    .news_content .head .date{
        color: #555;
        padding-right: 10px;
    }
    .news_content .cat{
        font-size: 0.8rem;
        background-color: greenyellow;
        border-radius: 10px;
        padding:0 5px;
    }
    .news_content .article{
        padding-left:10px;
    }

/* -------- */

.service{
    background-color: #eee;
    width: 100%;
}
    .service_main.col_3{
        display: flex;
        width: 100%;
    }
        .col_3_item{
            width: 33.33%;
            padding: 0 10px;
        }


            .service_name{
                text-align: center;
                font-weight: 600;
            }
            .service_img{
                text-align: center;
            }
            .service_img > img{
                width: 200px;
                aspect-ratio: 1/1;
            }
            .service_comment{
                /* padding: 0 45px; */
            width: 300px;
            max-width: 100%;
            margin: 0 auto;
            }
.main section:last-child{
    padding-bottom: 30px;
}
/* main_section end */








/* footer */
.footer_main{
    height: var(--footer_height);
    background-color: #eee;
    border-top: #333 1px solid;
}
.copy_write{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* ------------------------------------------ */


/* humbager munu */
#hummenu_toggle{
    display: none;
}
.hummenu_button{
    display: none;
}
.header_container{
    position: relative;
}
.hum_nav{
    position: absolute;
    top: var(--header_height);
    left: 0%;
    z-index: 2;
    width: 100%;
    height: 100vh;
    background-color: #eee;
    transition: .5s;
    display: none;
}

.hum_nav_list li{
    padding-top: 5px;    
    border-bottom: 1px solid #4DB56A;
}
.hum_nav_list li a{
    color: #333;
    width: 100%;
    padding-left: 15px;
    display: flex;
}
.hum_nav_list li a:hover{
    font-weight: bold;
}

#hummenu_toggle:checked ~ .hum_nav{
    display: block;
    transition: .25s;
}


/* responsive */
/* max-width:480px:画面幅が480px以下になった場合に適用されるスタイル */
@media screen and (max-width:480px){ /*　スマホ用のブレイクポイントは480pxに設定することが多い */ 
    HTML{
        font-size: 70%;
    }
    .header_nav_list{
        display: none;
    }.hummenu{
        display: block;
    }
    .comment_top{
        display: none;
    }
    .comment_service{ 
        display: none;
    }
    .comment_company_comsept{
        font-size: 0.7em;
    }
    .top_img_comment p+p{
        margin-top: 10px;
    }
    .top_img_comment{
        padding: 10px 20px
    }
    .service_img > img{
        width: 150px;
    }

    /* section */
.section_head{
    margin-bottom: 10px;
    padding-top: 10px;
}
/* news */
.news{
    min-height: 250px;
}

    .news_content span+span{
        margin-left: 10px;
    }
    .news_content .date,.news_content .cat{
        font-size: 0.8rem;
        width: 50px;
    }
    .service_main.col_3{
        display:block;
        width: 100%;
    }
        .col_3_item{
            width: 100%;
            padding: 20px 10px;
        }
            .service_name{
                text-align: center;
                font-weight: 600;
            }
            .service_img{
                text-align: center;
            }
            .service_comment{
                padding: 0 45px;
                text-align: center;
            }
.main section:last-child{
    padding-bottom: 30px;
}
    
/* hum */
.hummenu_button{
    display: block;

}
}


@media screen and (max-width:768px){ /* tablet用*/
    .header_container{
        padding: 0 10px;
    }
    .header_nav_list li + li{
        margin-left: 10px;
    }
    .header_nav_list li{
        font-size: 0.8rem;
    }

    .comment_top{
        font-size: 1.5rem;
    }
    .comment_service{ 
        font-size: 0.7rem;

    }
    .comment_company_comsept{
        font-size: 0.7em;
    }


}
@media screen and (max-width:885px){
    .top_img_comment p+p{
        margin-top: 10px;
    }
}
@media screen and (max-width:650px){
    .top_img_comment p+p{
        margin-top: 10px;
    }
    .comment_top{
        display: none;
    }
    .service_main.col_3{
        flex-direction: column;
        align-items: center;
    }
    .service_main.col_3 li+li{
        margin-top: 40px;
    }
    .service_comment{
        width: 250px;
    }
}
@media screen and (max-width:485px){

    .news_list *{
        font-size: 0.9rem;
    }
}
@media screen and (max-width:560px){
    .news_list *{
        font-size: 0.8rem;
    }
    .comment_service{
        display: none;
    }
    .header_nav_list *{
        font-size: 0.7rem;
    }
    .header_nav_list li a{
        padding:0 8px;
    }


}
@media screen and (max-width:767px){
    .service_img img{
        width: 150px;
    }
    .news_content{
        display: block;
        padding-top: 10px;
    }
    .news_content .article{
        padding-left: 20px;
        margin-top: 5px;
    }
    
}
.hummenu{
    display: none;
}

@media screen and (max-width:375px){
    .top_img_comment{
        display: none;
    }
    .news_content *{
        font-size: 0.7rem;
    }
    .article{
        display:block;
    }
}
/*  */
.hummenu_button{
    height: 40px;
    width: 30px;
}