@charset "UTF-8";

/*
Theme Name:Sumatora_TIGRISinc..
Author：Tigris_inc.Mateo.F
部品（ほぼ共通）
*/

/* ヘッダー */
.header_fact {
    width: 100%;
    padding: 10px;
    position:relative;
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
  }

  .header_fact .logoarea {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
  }

  .head_site_name .ttl{
    width:100%;
  }

  .header_face_logo {
    width: 35px;
  }

  .header_fact .ttl {
    font-size: 0.8rem;
    font-weight: bolder;
    padding: 0 0 0 10px;
    line-height: 1rem;
  }

  /* 開閉メニューの中身 */

   .menu-content ul{
     padding:20px 20px;
     margin:0;
     box-sizing:border-box;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
   }

  .menu-content li{
    width: 75%;
    border-bottom: 1px dotted #fff;
    padding:20px;
  }

 .menu-content li a{
    color:#fff;    
  }

.menu-content{
  display:flex;
  flex-direction: column;
  align-content: space-around;
}

.sns__container{
  width: 100%;
  text-align: center;
}

  /* トップイメージ*/
  .frame_topimage{
    width:100%;
    overflow-x:hidden;
  }

.frame_topimage .topimage{
  object-fit:contain;
  width:100%;
}

/* トップページレジュメコンテンツ */
.resume_wrap{
  padding: 40px 25px;
}

.resume_wrap .resume_title_wrap{
  padding:15px 0;
}

.resume_wrap .resume_title_wrap .text-sub{
  font-size:1.8rem;

  font-weight:bold;
  color:var(--color_m);
}

.resume_wrap .resume_title_wrap .resume-title{
  font-size:1rem;
  color:var(--color_m);
}

.resume_wrap .resume_contents_wrap{
  font-size:1rem;
}

.resume_wrap .resume_contents_wrap .resume-catch{
  font-size:1.2rem;
  line-height:3rem;
  font-weight:bold;
}

.resume_wrap .resume_contents_wrap .resume-text{
  font-size:1rem;
  text-align: justify;
}

.resume_wrap .resume_image_wrap{
  width:100%;
  aspect-ratio: 16/11;
  overflow-x:hidden;
  overflow-y:hidden;
  padding: 15px 0;
  box-sizing: content-box;
}

.resume_wrap .resume_image_wrap .resume-image{
  object-fit: contain;
  width:100%;
  aspect-ratio: 16/11;
}

.resume_wrap .resume_bt_wrap{
  text-align:right;
}

.resume_wrap .frame_news .news_box .post_rabel{
  border:solid 1px #eee;
  padding:3px 5px;
  margin:0 10px;
  font-size: 0.85rem;
  text-align: center;
}

.resume_wrap .frame_news .news_box{
  border-bottom:1px solid #eee;
  padding:10px 0;
}

.resume_top_newspost .news_box{
  width:100%;
}

.resume_top_newspost .post_date{
  width:70px;
}

.resume_top_newspost .post_rabel{
  width:70px;
}

/* フッター */
.footer_area{
  background: url(../images/image_topmain.png);
  width:100%;
  padding: 30px;
  background-repeat: no-repeat;
  background-size: cover;
  background-color:rgb(255 255 255 / 38%);
  background-blend-mode:lighten;
  box-sizing: border-box;
}

.footer_area .link_box{
  box-sizing:border-box;
  padding:6px 0;
}

.footer_area .footer-navtitle{
  color:#fff;
  line-height:3rem;
}

.footer_area a{
  background: #ffffffb8;
  padding: 5px 10px;
  box-sizing:border-box;
  font-size: 0.85rem;
}

.footer_area a::after{
  content:">";
  padding:0 0 0 6px
}

.footer_area .company_info{
  width:100%;
  border-top:solid 1px #fff;
  margin: 50px 0;
  padding:10px;
  color:#fff;
}

.footer_area .copy_rights{
  color:#fff;
  width:100%;
  text-align:right;
}

/* 各ページ共通にpage-wrapにマージンを調整する */
#page-wrap{
  margin: 0 0 65px 0;
  box-sizing: border-box;
}

/* 各ページFIX 部品関係 */

/* 各ページの主題表題要素の調整 */
.title_wrap{
  text-align:center;
  padding: 50px 0;
}

.title_wrap .des-title{
  padding:10px;
}

/* 各ページのセクションwrap周辺 */
.section_wrap{
  padding: 0 10px 70px;
  box-sizing: border-box;
}

.section_wrap .section-title-wrap{
  padding: 0 0 30px 0;
}

/* 説明リストDLの基本表示制御 */
.deslist{
  width:100%;
  padding: 0 0 90px;
  margin: 0;
}

.deslist dt{
  border-bottom:3px solid #eee;
  width: 110px;
  padding:10px;
  font-weight:bold;
}

.deslist dd{
  border-top:1px solid #eee;
  padding: 25px 0 15px 120px;
  margin:0;
  text-align: left;
}

.detailbox{
  box-sizing:border-box;
}

.detailbox .col-wrap .detailbox_colname , .detailbox .col-wrap .detailbox_text{
  width:100%;
  text-align:center;
  background:#0b0b0b52;
  padding:5px;
  color:#fff;
  box-sizing: border-box;
}

.detailbox .col-wrap{
  width: 100%;
  height: 300px;
  margin: 0 0 15px 0;
  box-sizing: border-box;
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center;
}

.detailbox .col-wrap1{
  background-image:url(../images/service_image1.png);
}
.detailbox .col-wrap2{
  background-image:url(../images/service_image2.png);
}
.detailbox .col-wrap3{
  background-image:url(../images/service_image3.png);
}

.child_wrap .childcol-name{
  text-align:center;
  font-size:1rem;
}

.child_wrap .sub{
  font-size:0.9rem;
}

.child_wrap .text{
  padding: 10px 0 50px;
}

.section_wrap .resume_wrap{
  border: 25px solid #eee;
  box-sizing: border-box;
}

@media (min-width: 768px) {





  
}

@media (min-width: 1200px) {
.resume_title_wrap{
  width:100%;
}

.resume_wrap{
  padding: 110px 0;
}

.resume_fuct4 .resume_contents_wrap , .resume_fuct2 .resume_contents_wrap{
  width: 70%;
  padding: 0 40px 0 0;
  box-sizing: border-box;
}

.resume_fuct4 .resume_image_wrap , .resume_fuct2 .resume_image_wrap{
  width: 30%;
}

/* 各ページ共通にpage-wrapにマージンを調整する */
#page-wrap{
  margin: 0 0 120px 0;
}

.resume_top_newspost .resume_title_wrap{
  width: 20%;
}

.resume_top_newspost .frame_news{
  width: 80%;
}

.resume_wrap .frame_news .news_box .post_date{
  width: 100px;
  box-sizing: border-box;
}
  
.resume_wrap .frame_news .news_box{
  padding: 20px 0;
}
  
.resume_wrap .frame_news .news_box .post_rabel{
  width: 120px;
  border:solid 1px #eee;
  padding: 5px 5px;
  font-size: 0.85rem;
  text-align: center;
  box-sizing: border-box;
}

.resume_wrap .frame_news .news_box .post_link{
  padding: 0 0 0 20px;
}

.bg{
  width:100%;
  background:var(--color_bg);
}

.resume_wrap .resume_title_wrap .text-sub{
  font-size:3rem;
  font-weight:bold;
  color:var(--color_m);
}

.resume_wrap .resume_title_wrap .resume-title{
  font-size:1.25rem;
}

.resume_wrap .resume_contents_wrap .resume-catch{
  font-size:1.5rem;
  line-height:5rem;
}

.resume_wrap .resume_image_wrap{
  padding: 0 0 0;
}

.resume_wrap .resume_bt_wrap{
  padding: 70px 37px 0 0;
}

.resume_wrap .resume_bt_wrap a{
  border:solid 1px #eee;
  padding: 12px 20px;
  color:#fff;
  background: var(--color_bt);
}

/* フッター */
.footer_area{
  background: url(../images/image_topmain.png);
  width:100%;
  padding: 70px;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgb(255 255 255 / 1%);
  background-blend-mode:lighten;
  box-sizing: border-box;
}

.footer_area .link_box{
  width: calc(100% / 2 - 0px);
  display:flex;
  flex-direction: column;
}

.footer_area .link_box a{
  padding: 8px 15px;
  margin: 0 0 15px 0;
  background:none;
  color:#fff;
}

.header_fact {
    position:fixed;
    top: 0;
    background:#ffffffc9;
    z-index:999;
  }

.frame_topimage{
   /* margin-top: 56px; */
  }

/* 各ページのセクションwrap周辺 */
.section_wrap{
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 50px 0;
}

.resume_messa .resume_contents_wrap .resume-catch{
  font-size:1.6rem;
}

.resume_messa .resume_contents_wrap .resume-text{
  font-size:1.6rem;
  line-height:3rem;
}

.deslist dt{
  width: 200px;
  padding:10px;
  font-weight:bold;
}

.deslist dd{
  border-top: 1px solid #eee;
  padding: 25px 0 50px 250px;
  margin:0;
  text-align: left;
}

.detailbox{
  width: 100%;
  display:flex;
  flex-direction: column;
  /* padding: 0 0 77px 0; */
}
  
.section_wrap .resume_wrap{
  border: none;
  border-radius: 15px;
}

.detailbox .col-wrap{
  width: 100%;
  background-size:contain;
  background-position:right;
  border:solid 1px #eee;
  padding:30px;
 
}

.detailbox .col-wrap1{
  background-image:url(../images/service_image1.png);
  background-repeat:no-repeat;
}
.detailbox .col-wrap2{
  background-image:url(../images/service_image2.png);
  background-size:contain;
  background-repeat:no-repeat;
}
.detailbox .col-wrap3{
  background-image:url(../images/service_image3.png);
  background-size:contain;
  background-repeat:no-repeat;
}

.detailbox .col-wrap .detailbox_colname , .detailbox .col-wrap .detailbox_text{
  width:50%;
  text-align:left;
  background:none;
  color:var(--color_t);
}

  
}