/*-----------------------------------------------*/
/*-------------------- color --------------------*/
/*-----------------------------------------------*/
:root {
    --white:#ffffff;
    --black:#191919;
    --l_black:#333333;
    --ll_black:#c2bfaf;
    --ll_black_a:#ccc;
    --gray:#d9d9d9;
    --bd_gray:#dddbdb;
    --bg_gray:#f0f0f0;
    --l_gray:#eeeeee;
    --d_gray:#8a8a8a;
    --dd_gray:#464646;
    --red:#ff0000;
    --d_red:#a53a3a;
    --yellow:#ffff99;
    --d_yellow:#bb8210;
    --blue:#428bca;
    --d_blue:#163b84;
    --l_green:#eff5e8;
    --green:#74b52a;
    --d_green:#008000;
    --violet:#8243c4;
    --d_violet:#58278c;
    --sky:#5ec2d2;
    --brown:#f8f7f2;
}


/*----------------------------------------------------------------------*/
/*------------------------------ sp-start ------------------------------*/
/*----------------------------------------------------------------------*/
@media(max-width:768px){


img {
    width: 100%;
}

/*---------- customer css ----------*/
/* .f24 {
    font-size: 18px !important;
}
.f18 {
    font-size: 16px !important;
} */

.page_link{
    margin-top:-100px;
    padding-top:100px;
}


/*--------------------------------------------------*/
/*-------------------- paginate --------------------*/
/*--------------------------------------------------*/
.pagination{
	margin:20px 0 0;
	
	li{
		span{
			padding:4px 12px;
			font-size:13px;
		}
		a{
			padding:4px 12px;
			font-size:13px;
		}
	}
}


/*------------------------------------------------------*/
/*---------------------- alertify ----------------------*/
/*------------------------------------------------------*/
.alertify-logs{
	article{
		padding:10px 10px !important;
		font-size:14px !important;
		line-height:20px !important;
	}
}


/*------------------------------------------------*/
/*-------------------- header --------------------*/
/*------------------------------------------------*/
header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
}
.site_title {
    display:flex;
    align-items:center;
    height:30px;
    padding:0;
    font-size:10px;

    .global_inner {
        margin:0;
    }
}
.global_header_main {
    height:70px;
    background-color: var(--white);
    margin: 0;
    align-items: center;
    padding: 0 20px;

    .logo {
        margin:0;

		img {
			width:200px;
		}
	}
}
.global_header_main .nav_btn {
    float: right;
    font-size: 25px;
    text-align: center;
    cursor: pointer;
    cursor: hand;
    border: 2px solid #74b52b;
    padding: 4px;
    border-radius: 8px;
    line-height: 1.1;
}
.global_header_main .nav_btn i {
    color: #74b52b;
    font-size: 33px;
}
.global_header_main .nav_btn span {
    display: block;
    font-size: 10px;
    font-weight: bold;
    color: #74b52b;
}
.global_header_main #nav_btn_close {
    display: none;
    width: 52px;
    box-sizing: border-box;
}
.main_contents {
    padding-top: 100px;
}
.global_nav {
    display: block;
    position: fixed;
    top: 100px;
    right: 0;
    bottom: 0;
    width: 300px;
    height: auto;
    padding: 0 20px;
    background-color:var(--white);
    box-sizing: border-box;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    /* transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; */
    z-index: 20;
}
.global_header_main{
    .header_contact_buttun_tel{
        .global_nav{
            ul{
                gap: 0;
                flex-direction: column;
                border-top: dotted 1px var(--gray);

                li{
                    a{
                        padding: 10px 0;
                        border-bottom: dotted 1px var(--gray);
                        position: relative;
                    }
                    a:after {
                        content: '\f054'; 
                        font-family: "Font Awesome 5 Free"; 
                        font-weight: 900;
                        position: absolute;
                        top: 15px;
                        right: 10px;
                        font-size: 12px;
                        color: var(--green);
                        background: inherit;
                    }
                }
            }
        }
    }
}
/* .header_back{
	display:block;
	position:fixed;
	top: 106px;
	right:0;
	bottom:0;
	width: 350px;
	background: var(--white);
	opacity:0;
	visibility:hidden;
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    transform: translateX(100%);
	z-index:10;
} */

/*---------- mobile-nav > open ----------*/
body.nav_open{
	overflow:hidden;

    .global_nav{
		opacity:1;
		visibility:visible;
		transform:translateX(0);
	}

	.header_back{
		opacity:1;
		visibility:visible;
        transform: translateX(0);
	}
}


/*------------------------------------------------*/
/*-------------------- footer --------------------*/
/*------------------------------------------------*/
.global_footer{
    .global_footer_buttun_area {
        padding: 0px 20px 20px;
        overflow-x: hidden;
    }
    .footer_buttun_area_text {
        padding: 50px 0;
        text-align: center;
        z-index: 20;
        position: relative;
    
        strong{
            font-size:20px;
        }
        p{
            font-size:14px;
        }
    }
    .global_footer_nav{
        /* width: 77%; */
        margin: 30px auto;
        padding:0 20px;

        .menu_list {
            gap: 10px 20px;
            font-size:14px;
        }
    }
    .footer_buttun_area_buttun {
        flex-direction: column;
        gap: 50px;
        align-items: center;
    }
    .copyright{
        padding:30px 20px 100px;

        .logo_address {
            flex-direction: column;
            align-items: center;
            gap: 30px;

            .logo {
                width: 100%;
                text-align: center;
            
                img{
                    width:220px;
                }
            }
            .copyright_box.address{
                border-left: none;
                width: 100%;
                padding: 0;
                font-size:14px;
                box-sizing: border-box;
            }
        }
    }
}

/*------------------------------------------------*/
/*--------------------- home ---------------------*/
/*------------------------------------------------*/
.main_container_contents {
    padding: 0 20px 95px;
}
.main_container_contents  .top_title img {
    max-width: 715px;
    width: 100%;
}
.main_container_contents  .top_title p {
    text-align: left;
}
.main_container_contents  .top_service_link  .service_link_list ul {
    flex-direction: column;
    align-items: center;
}
.main_container_contents  .top_service_link  .service_link_list ul li {
    width: 100%;
    margin: 0 1% 20px;
    max-width: 500px;
}
.main_container_contents .top_about_service {
    flex-direction: column;
    align-items: center;
    gap: 100px;
}
.main_container_contents  .top_about_service .about_service {
    width: 100%;
}
.main_container_contents .top_feelsafe {
    padding: 40px;
    text-align: center;
}
.main_container_contents .top_feelsafe h2 {
    font-size: 20px;
}
.main_container_contents .top_feelsafe .top_feelsafe_box {
    flex-direction: column;
    gap: 20px;
}
.main_container_contents .top_blog_area {
    margin-top: 50px;
    width: 100%;
}
.main_container_contents  .top_blog_area .blog_area_title .box_left {
    flex-direction: column;
    gap: 0;
    padding-bottom: 30px;

    h2{
        line-height: 1.2;
    }
}
.main_container_contents .top_blog_area .blog_area_title {
    align-items: flex-end;
    padding-bottom:5px;
}

/*------------------------------------------------*/
/*--------------------- about --------------------*/
/*------------------------------------------------*/
.page_title_container  .page_title_mv .page_mv::after {
    content: none;
}
.page_title_container .page_title_mv {
    flex-direction: column;
    height: auto;
}
.page_title_container .page_title_mv .page_title {
    width: 100%;
    padding: 20px;
    background: url("/images/hp/page-main-titleback.webp") repeat-y;
    background-size: cover;
}
.page_title_container .page_title_mv .page_title p {
    margin-top: 18px;
}
.page_title_container .page_title_mv .page_mv {
    width: 100%;
}
.main_contents_container {
    padding: 0 20px 95px;
}
.main_contents_container .text_img_block .text_box_right {
    width: auto;
    float: none;
    margin: 0 0 20px;
}
.main_contents_container h2.style_title {
    font-size: 20px;
    margin: 60px 0 25px 0;
}
.main_contents_container h3.style_title {
    font-size: 18px;
}
.siteLink_post{
	a{
		font-size:14px;
	}
}

/*------------------------------------------------*/
/*------------------- business -------------------*/
/*------------------------------------------------*/
.main_contents_container .check_block {
    margin-bottom: 60px;
}

/*------------------------------------------------*/
/*----------------- about-office -----------------*/
/*------------------------------------------------*/
.about_office_boxs .about_office_box {
    border: none;
    flex-direction: column;
} 
.about_office_boxs  .about_office_box h5 {
    width: 100%;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

/*------------------------------------------------*/
/*-------------------- access --------------------*/
/*------------------------------------------------*/
.access_map_box iframe {
    height: 300px;
}
.address_access_boxs {
    flex-direction: column;
}
.address_access_boxs .address_access_box {
    width: 100%;
}
.access_detail {
    flex-direction: column;
}
.access_detail .access_detail_boxs {
    width: 100%;
}
.access_detail .access_detail_boxs {
    align-items: flex-start;
    width: 100%;
    flex-direction: column;
}
.access_detail .access_detail_boxs .access_detail_box img {
    margin-bottom: 20px;
    max-width: 430px;
}
.access_detail .access_detail_boxs .access_yajirusi {
    margin: 0 auto;
    margin-bottom: 40px;
}
.access_detail .access_detail_boxs .access_detail_box {
    margin-bottom: 20px;
}

/*------------------------------------------------*/
/*-------------------- office --------------------*/
/*------------------------------------------------*/
.text_img_flex {
    flex-direction: column;
}
.text_img_flexs .text_img_flex .left {
    max-width: 100%;
}

/*------------------------------------------------*/
/*------------------ blog lists ------------------*/
/*------------------------------------------------*/
.blogLists_main {
    padding: 0 20px 95px;
    position: relative;
}
.blogLists_main .blogLists_side {
    position: absolute;
    width: 100%;
    top: 70px;
    left: 0px;
    box-sizing: border-box;
}
.blogLists_main .blogLists_side .widget_categories ul {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}
.blogLists_main .blogLists_side .widget_categories {
    margin: 0;
    padding: 20px;
}
.blogLists_main .blogLists {
    width: 100%;
}

.news_tag{
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    
    h2{
        font-size:16px;
    }
    ul{
        gap:5px 10px;

        li{
            a{
                font-size:13px;
            }
        }
    }
}
.top_blog_lists {
	.box {
		grid-template-columns: 80px 1fr;
		
        .img {
			height: 70px;
		}
		.text {
            padding:5px;

			h3 {
				font-size: 14px;
			}
		}
	}
}

/*------------------------------------------------*/
/*------------------ blog detail -----------------*/
/*------------------------------------------------*/
.blog_lists_section{
    padding: 0 20px 95px;
}
.blog_lists_headline{
    time{
        font-size:13px;

        i{
            font-size:14px;
        }
    }
    h1{
        font-size:20px;
    }
    ul{
        /* gap:10px;
        margin-top:10px; */

        li{
            a{
                font-size:13px;
            }
        }
    }
}
/* .blog_lists_contents{
    p{
        font-size:14px;
    }
    iframe{
        height:300px;
    }
} */

.blog_container{
    display:grid;
    gap:20px;
}
.blog_row{
    display:grid;
    gap:20px;

    &.col2{
        grid-template-columns:1fr;
    }
    /* &.col3{
        grid-template-columns:1fr;
    }
    &.col4{
        grid-template-columns:1fr;
    } */
}
.blog_column{
    h2{
        padding:5px 0 5px 10px;
        font-size:22px;
    }
    h3{
        padding:3px 0 3px 10px;
        font-size:18px;
    }
    p, div{
        font-size:14px;
    }
    iframe{
        height:200px;
    }
    hr{
        /* margin:20px 0; */
    }
}

.blog_lists_link{
    margin-top:50px;

    a{
        padding:10px;
        font-size:14px;
    }
}
.blog_lists_tag{
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    
    h2{
        font-size:16px;
    }
    ul{
        gap:5px 10px;

        li{
            a{
                font-size:13px;
            }
        }
    }
}

/*------------------------------------------------*/
/*--------------------- format -------------------*/
/*------------------------------------------------*/
.format_contents_container{
    .page_title{
        margin:0;
        
        h1{
            font-size:24px;
        }
    }
}
section.sub_section {
    margin:0;
    padding: 50px 20px;
    width: 100%;
    box-sizing: border-box;
}
.sub_section .sub_contents {
    margin-bottom: 100px;
    margin-bottom: 50px;
}
.sub_section .sub_contents .sub_header {
    display: block;
    margin-bottom: 20px;
    padding: 10px 0 10px 10px;
}
.sub_section .sub_contents .sub_header h2 {
    margin: 0 0 5px;
    font-size: 24px;
    line-height: 1;
}
.sub_section .sub_contents .sub_header span {
    font-size: 13px;
}
.sub_section .sub_contents .sub_date_lists dl {
    /* flex-direction:column;
    align-items:flex-start; */

    dt{
        font-size:14px;
        /* white-space: normal; */
    }
}
.pass_area p {
    font-size: 14px;
}
.pass_area .form {
    grid-template-columns: 1fr 60px;
}
.pass_area .form input {
    padding: 15px;
    font-size: 14px;
}
.pass_area .form button {
    font-size: 14px;
}
.sub_section .sub_contents .title {
    font-size: 18px;
}
.sub_section .sub_contents .title span {
    font-size: 13px;
}
.sub_section .sub_contents .link {
    grid-template-columns: 1fr;
}
.sub_section .sub_contents .link a {
    padding: 15px;
    font-size: 16px;
}

.contact_header{
    margin:60px 0 30px;
}
.contact_container{
    margin-bottom:50px;
}
.contact_form dl{
    grid-template-columns:1fr;
    gap:5px;
}
.contact_form .policy p{
    text-align:left;
}
.contact_btn{
    margin-top:30px;
}
.contact_btn button{
    padding: 15px 0;
    font-size: 16px;
    color:var(--black);
}

/*---------- modal ----------*/
.modal_area{
	padding:10px;
}
.modal_body{
	padding:10px 10px 30px;
}
.modal_format{
	.title{
		h2{
			font-size:16px;
		}
		time{
			font-size:13px;
		}
	}
	ul{
		li{
			p{
				font-size:14px;
			}
			.memo{
				font-size:13px;
			}
			.link{
                flex-direction:column;

				a{
					font-size:14px;
				}
			}
		}
	}
}
.modal_close{
	font-size:14px;

    i{
        font-size:16px;
    }
}


}