@charset "UTF-8";
/* CSS Document */

@media screen and (max-width: 920px) {
}
/*TABLET*/
@media screen and (max-width: 768px) {
  body{ font-size: 14px;　word-wrap:break-word; /*will-change: transform;*/}
  #wrap { width: 100%; overflow: hidden;}
  .sp_br{ display: inherit;}
	.pc_br{ display: none;}

    /*ヘッダー*/
	header{ z-index: 99;}
  .head-btn, .head-nav, .head_contact{ display: none;}
  .header__nav .head-logo { width: 100%; max-width: 100%; padding: 6vw 6vw 1vw 5vw;}
  .header__nav .head-logo a{ width: 100px; margin-right: auto;}
	.header__nav h1{ left: 2rem; top: 5px; font-size: 1rem;}
	.head-logo .intxt{ font-size: .7rem; text-align: right;}
	header > .inner{ padding: 5px;}

	.is-show { transform: translateY(-100%);}
  
  .header__nav nav,
  .header-link.flex{
    display: none;
  }
  .header-hum{
    display: block;
    width: 50px;
    height: 50px;
    position: fixed;
    top: 8px;
    right: 0;
    z-index: 9999;
    background: rgba(255,255,255,.85);
  }
	#sp-menu{
	display: inherit;
    width: 50px;
    height: 50px;
    position: fixed;
    top: 8px;
    right: 0;
    z-index: 9999;
    background: rgba(255,255,255,.85);
  }
  #sp-menu button{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: block;
    background: #000;
    width: 32px;
    height: 2px;
    padding: 0;
    margin: 0;
    border: none;
    box-sizing: border-box;
  }
  #sp-menu button::before
  ,#sp-menu button::after{
    content: "";
    position: absolute;
    left: 0;
    display: block;
    width: 32px;
    height: 2px;
    background: #000;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
  }
  #sp-menu button::before{
    top: -10px;
  }
  #sp-menu button::after{
    top: 10px;
  }
  #sp-menu.open button{
    height: 0;
  }
  #sp-menu.open button::before{
    top: 0;
    transform: rotate(45deg);
  }
  #sp-menu.open button::after{
    top: 0;
    transform: rotate(-45deg);
  }
  .screen-reader-text {
    clip: rect(1px,1px,1px,1px);
    position: absolute!important;
    height: 1px;
    width: 1px;
    overflow: hidden;
  }
  #sp-menu-block{
    display: none;
    width: 80vw;
    height: 100vh;
    position: fixed;
    right: -100%;
    top: 0;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    z-index: 999;
    background: rgba(255,255,255,1);
    padding: 80px 0 50px;
  }
  #sp-menu-block.slide{
    right: 0;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
  }
  #sp-menu-block #g-nav{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }
  #g-nav li{
    border-bottom: 1px solid #666768;
  }
  #g-nav li a{
    display: block;
    padding: 1rem 20px;
  }
  #g-nav li a::after{
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border: 1px solid #666768;
    border-color: #666768 #666768 transparent transparent;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%) rotate(45deg);
  }
	#g-nav li.sp-menu-parent{
		border: none;
	}
	#g-nav li.sp-menu-parent a{
		pointer-events: none;
	}
	#g-nav li.sp-menu-parent a::after{
		content: none;
	}
	#g-nav ul.sp-menu-child li{
		border: none;
		font-size: .9em;
		padding: 0 0 0 10px;
	}
	#g-nav ul.sp-menu-child li:last-child{
		border-bottom: 1px solid #666768;
		padding-bottom: 1rem;
	}
  .sp-nav-btn{
    justify-content: center;
    margin-top: 30px;
  }
  .sp-nav-btn a.form{
    width: 90%;
    max-width: 280px;

    border: 2px solid #be0b32;
    color: #000;
    font-size: 1.125em;
    font-weight: 900;
    padding:.5em .5em .5em 10%;
    border-radius: 6px;
  }
  .sp-nav-btn a.form span{
    display: block;
    font-size: .85em;
    margin-bottom: 5px;
    color: #235b95;
  }
  .sp_nav_bg{
    position: fixed;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.85);
    -webkit-transition: all .3s;
    -o-transition:  all .3s;
    transition:  all .3s;
	  z-index: 100;
  }
  .sp_nav_bg.openbk{
    left: 0;
    z-index: 100;
  }
	.inner{ padding: 0 4vw;}
	section{ padding-top: 14vw;}
	
	
  /*topページ
  ===============================================================*/
	.mv__img1 .img1-wrap{ background-image: url("../imgs/main_key02_sp.jpg");}
	.mv__img1{ width: 100%;}
	h2.h{ font-size: 9vw;}
	.mv-wrap .top__load{ padding-bottom: 8vw;}
	.top__text01{ padding: 0 4vw 8vw 4vw;}
	.section_title{ font-size: 7vw; margin-bottom: 8vw; padding: 13vw 0 0;}
	.section_title::after{ height: 9vw;}
	.section_title::before{ width: 5px; height: 5px; margin-left: -2px;}
	
	.service_cnt,.service_cnt.even{ flex-direction: column;}
	.service_cnt{ padding-bottom: 16vw;}
	.service_cnt > div + div{ margin-top: -6vw;}
	.img_box{ width: 70%; margin-right: auto;}
	.service_cnt.even .img_box{ margin-left: auto; margin-right: 0;}
	.img_box > .img_box_sml{ margin-left: 80%;}
	.even .img_box > .img_box_sml{ margin-left: -35%;}
	.text_box{ width: 100%;}
	.service_ttl{ font-size: 8vw;}
	.service_txt{ padding: 6vw 0;}
	.service_list{ margin-top: 6vw; min-width: 200px; width: 100%;}
	.service_list::before{ top: -6vw;}
	.link_btn a{ margin-top: 8vw; padding: 3vw 25vw;}
	
	.works{ background: linear-gradient(180deg, #fff 0%, #fff 5%, #fdfcfb 5%, #fdfcfb 100%);}
	.works_inner{ flex-direction: column;}
	.works_cnt{ width: 100%;}
	.works_inner > div + div{ margin-top: 8vw;}
	
	.f_menu_box_inner h4{ font-size: 4.6vw;}
	.f_menu_box_inner figure::before,
	.f_menu_box_inner figure::after,
	.f_contact_mail::before{ content: none;}
	.f_menu_box.inner{ padding: 0;}
	
	.f_access_box,.f_contact_inner{ flex-direction: column;}
	.access_map{ width: 100%; padding-bottom: 60vw;}
	.access_text{ width: 100%; padding: 8vw 4vw;}
	.f_title{ font-size: 6vw; padding-bottom: 0;}
	.f_title::after{ content: none;}
	.access_text .link_btn,
	.f_contact_mail .link_btn{ width: 100%;}
	.access_text .link_btn a,
	.f_contact_mail .link_btn a{ width: 100%; padding: 3vw 0; text-align: center;}
	.f_contact_box{ padding: 8vw 4vw;}
	.f_contact_tel{ width: 100%; padding-right: 0; align-items: baseline;} 
	.f_contact_mail{ width: 100%; padding-left: 0;}
	.f_contact_tel .tel_num{ font-size: 7vw;}
	.f_contact_box .f_title{ align-items: baseline;}
	.f_contact_inner.inner{ padding: 4vw 0 0;}
	.f_contact_inner > div + div{ margin-top: 4vw;}
	
	.f_sitemap_inner{ gap: 4vw; grid-template-rows: 1fr; grid-template-columns: 1fr; font-size: 0.88em;}
	.f_sitemap_box{ padding: 8vw 0;}
	.f_logo_box{ grid-row: 1 / 2; grid-column: 1 / 3; width: 36vw;}
	.f_accesstxt_box{ grid-row: 2 / 3; grid-column: 1 / 3;}
	.f_text_box{ grid-row: 3 / 3; grid-column: 1 / 3; gap: 8vw; justify-content: space-between;}
	
  /*下層共通
  ===============================================================*/
	.subpage{ margin-top: 14vw;}
	.mv__img1.sub_key_mv figure,
	.mv__img1.sub_key_mv{ height: 50vw;}
	.sub_mv_title{ padding: 18vw 0 0 0; font-size: 8vw; margin-bottom: 0; width: 100%;}
	.subpage_title{ font-size: 7vw; margin-bottom: 6vw;}
	.subpage_title > span.en::before{ width: 2rem;}
	.subpage_title > span.en{ padding-left: 3.5rem;}
	
  /*会社概要
  ===============================================================*/	
	table.summary_list,.tab_area_box{ margin-bottom: 14vw;}
	.history{ padding-bottom: 14vw;}
	.summary_list tr{ display: flex;flex-direction: column;}
	.summary_list th,.summary_list td{ width: 100%; padding: 1rem;}
	.summary_list td > div.flex p:nth-child(1){ width: 30%;}
	.summary_list td > div.flex p:nth-child(2){ width: 70%;}
	.history_list{ padding: 8vw 4vw 8vw 8vw;}
	.history_list > div{ flex-direction: column;}
	.history_list dt,.history_list dd{ width: 100%;}
	.history_list dt::before,.history_list > div:not(:last-child) > dt::after{ left: -3vw;}
	.history_list > div:not(:last-child) > dt::after{ height: 38vw;}
	.history_list > div:nth-last-child(2) > dt::after{ height: 18vw;}
	.tab li a{ padding: .85rem 1rem;}
	.js-scrollable{ white-space: nowrap;}
	.area{ margin: 6vw 0 4vw;}
	
  /*事業内容共通
  ===============================================================*/
	.service_subpage{ margin-top: 20vw;}
	.service_subpage .service_cnt > div + div{ margin-top: 4vw;}
	.details_list ul > li{ padding: 8vw 4vw; flex-direction: column;}
	.details_list_ttl,.details_list_txt{ width: 100%;}
	.details_list_ttl{ padding-bottom: 4vw; font-size: 6vw;}
	.details_list li:before{ right: 0;}
	.icon_box > a + a{ margin-left: 2vw;}
	.icon_box > a{ width: 110px; height: 110px;}
	.icon_box > a img{ height: 10vw;}
	.icon_box > a img.icon_insulation,.icon_box > a img.icon_fireproof{ width: 11vw;}
	.icon_box > a > p:nth-child(2){ padding-top: 1vw; font-size: .88em;}
	
  /*アクセス
  ===============================================================*/
	.access_map_area{ margin: 0 0 8vw; flex-direction: column;}
	.address{ padding: 6vw 0 0;}
	.train{ margin-top: 4vw; padding: 4vw;}
	
　/*お問い合わせフォーム・サンクスページ・確認画面
  ===============================================================*/
	.form_area{ margin-bottom: 8vw;}
	.form_intro{ text-align: left; padding: 0;}
	
	.form_area{ padding: 8vw 4vw; margin-bottom: 8vw;}
	.form_area.confirmation .text-center{ text-align: left;}
	.form_area.confirmation tr{ flex-direction: column;}
	.form_area.confirmation th,.form_area.confirmation td{ width: 100%;}
	.form_area.confirmation td{ padding-left: .88rem;}
	.btn-secondary_box{ flex-direction: column-reverse;}
	.btn-secondary_box input + input{ margin: 0;}
	.btn-secondary_box input.btn{ width: 100%;}
	
	.form_area form{ padding: 4vw 0;}
	.form_area tr{ flex-direction: column; align-items: baseline;}
	.form_area th,.form_area td{ width: 100%; padding-bottom: .65em;}
	input,textarea,select{ font-size: 16px;}
	.select_box::after{ top: 40%; left: 1em;}
	.form_area input[type="text"], .form_area input[type="email"], .form_area input[type="tel"], .form_area select, .form_area textarea{ padding: .88em 1em;}
	.select_box > select{ padding: .88em 2em;}

/*230720 レイガード追加更新
  ===============================================================*/
    
    .service_subpage.layguard_page{
        margin-top: 20vw;
    }
    .service_subpage.layguard_page .img_box,
    .layguard_page .text_box{
        width: 100%;
    }
    .layguard_page .text_box .service_list{
        padding: 6vw;
    }
    .stock_list__inner,
    .grid_list,
    .attention_list__inner{
        padding: 8vw 4vw;
    }
    .stock_list td, .stock_list th{
        padding: 1vw;
    }
    .grid_list{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: max-content;
        grid-column-gap: 2vw;
        grid-row-gap: 4vw;
    }
    .layguard_page .link_btn a{
        padding: 6vw 0;
    width: 100%;
    }
    .sec-news-list li::before,
    .sec-news-list li::after{ 
        top: 50%;
    }
    .sec-news-list li{
        flex-direction: column;
        gap: 0.5em;
    }
    .sec-news-list li .date{ 
        width: 100%;
    }
    .sec-news-list li .post-title{ 
        width: calc(100% - 1em);
    }
	
	
  
}