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


/* contents==========================

	1.for contents style
	
*/

/* 1.for contents style ==============================================*/

/* ----------------------------------------------------
メディアクエリ設定 All
---------------------------------------------------- */


a{ text-decoration: none; color: #3a3a3a; }

/*ローカルナビ--------------*/
.localnavi{
  width: 100%;
  background: #f2f2f2;
  font-size: 12px;font-size: 1.2rem;
}
.localnavi::after{
  content: "";
  display: block;
  clear: both;
}
.localnavi > p{
  width: 200px;
  font-size: 20px;font-size: 2.0rem;
  float: left;
}
.localnavi > p a{ font-weight: bold; }
.localnavi > p a:hover,.local-sub a:hover{
  opacity: .6;
  transition: all .3s;
}
.localnavi a{
  text-decoration: none;
  color: #3a3a3a;
  display:flex;
  align-items:center;
  justify-content: center;
  height: 70px;
}
.localnavi-box{ float: right; width: calc(100% - 200px); }
.local-menu{
  display:flex;
  float: left;
  flex-wrap: wrap;
  max-width:850px;
}
.local-menu li a{ padding: 0 14px; font-size: 15px;font-size: 1.5rem; }
.local-menu li a:hover{ box-shadow: 0 -3px #bababa inset; }
.local-menu a.current,.local-menu a.current:hover{ box-shadow: 0 -3px #b40200 inset; }
.local-sub{ float: right; display:flex; }
.local-sub a{ padding: 0 15px; color: #fff; }
.local-sub .local-demo a{ background: #3a3a3a; }
.local-sub .local-contact a{ background: #b40200; }
.localnavi.fixed{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/*パンくず--------------*/
main{ position: relative; }
.breadcrumb{
  text-align: right;
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 1;
}
.breadcrumb li{ display: inline-block; font-size: 10px;font-size: 1.0rem; }
.breadcrumb li a{
  background: url(/common/img/arrow_black.png) right 5px center / 4px auto no-repeat;
  padding-right: 20px;
  color: #333;
}
.breadcrumb li a:hover{ text-decoration: underline; }

/*コンテンツ 共通--------------*/
.content{
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 150px;
  font-size: 17px;font-size: 1.7rem;
  font-weight: 400;
}

/*メインタイトル--------------*/
.bg-title{ margin:0 calc(50% - 50vw) 60px; position: relative; }

.bg-title::before{
  content: "";
  display: block;
  padding:100px 0;
  z-index: -1;
}
.bg-title h1{
  position: absolute;
  top:0; right:0; bottom:0; left:0;
  margin:auto auto;
  color: #fff;
  max-width: 1200px;
  width: 100%;
  font-size:2.5vw;
  display: flex;
  align-items: center;
  line-height: 1.3;
}
/*タイトル--------------*/
.tit-txt{
  font-size: 44px;font-size: 4.4rem;
  padding: 80px 0;
  font-weight: 200;
  line-height: 1.5;
}
.tit-linetop{
  font-size: 30px;font-size: 3.0rem;
  padding-top: 35px;
  border-top: 3px solid #b40200;
  margin:80px 0 40px;
  line-height: 1.5;
  font-weight: bold;
}
.tit-linebtm{
  font-size: 22px;font-size: 2.2rem;
  padding-bottom: 20px;
  margin-bottom: 20px;
  position: relative;
  line-height: 1.5;
  font-weight: bold;
}
.tit-linebtm::before{
  content: "";
  height: 3px;
  width: 44px;
  left: 0; bottom: 0;
  position: absolute;
  background: #b40200;
}
/*table*/
.row-tbl > dl{
  display: table;
  background: #fcfcfc;
  width: 100%;
  line-height: 2;
}
.row-tbl >  dl:nth-of-type(2n){ background: #f7f7f7; }
.row-tbl > dl > dt{
  display: table-cell;
  width: 25%;
  padding: 20px;
}
.row-tbl > dl > dd{
  width: 75%;
  padding: 20px;
  display: table-cell;
}
/*リンクボタン*/
.btn-black-l a,.btn-black-s a,
.btn-red-l a,.btn-red-s a{
  display: block;
  text-align: center;
  color: #fff;
  line-height: 1;
}
.btn-black-l a,.btn-black-s a{
  background: #3a3a3a;
}
.btn-red-l a,.btn-red-s a{
  background: #b40200;
}
.btn-black-l a,.btn-red-l a{
  font-size: 18px;font-size: 1.8rem;
  max-width: 840px;
  padding: 60px 0;
}
.btn-black-s a,.btn-red-s a{
  font-size: 16px;font-size: 1.6rem;
  max-width: 400px;
  padding: 20px 0;
}
.btn-black-l a:hover,.btn-black-s a:hover,
.btn-red-l a:hover,.btn-red-s a:hover{
  opacity: .7;
  transition: all .5s;
}
.btn-black-l span,.btn-black-s span,
.btn-red-l span,.btn-red-s span{
  background: url(/common/img/arrow_white.png) right center / 6px auto no-repeat;
  padding-right: 15px;
}
.btn-black-l span,.btn-red-l span{ font-weight: bold; }

/*カラム設定*/
.col3{
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
/*3カラム*/
.col3 > div,.col3 > dl,.col3 > section{
  width: calc(100% / 3 - (27/1200*100%))
}
/*画像右＋テキスト*/
.img-r-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*画像左＋テキスト*/
.img-l-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
}
.img-r-box figure,.img-l-box figure{ width: calc(700/1200*100%); }
.img-l-box figure{ margin-right: calc(65/1200*100%); }
.img-r-box figure{ margin-left: calc(65/1200*100%); }
.img-box-txt{ width: calc(435/1200*100%); }

/*アイコン*/
.ico-pdf{
  background: url(/common/img/ico_pdf.png) left center / 30px auto no-repeat;
  padding:5px 0 5px 30px;
}
.ico-pdf:hover{ text-decoration: underline; }

/*アンカー・ページメニュー*/
.page-menu ul{
  display: flex;
  border-right: 1px solid #B40200;
}
.page-menu li{
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #B40200;
  position: relative;
}
.page-menu li::before{
  content: "";
  display: block;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  width: 6px; height: 6px;
  margin: auto;
  border-top: 2px solid #d4d4d4;
  border-right: 2px solid #d4d4d4;
  transform: rotate(135deg);
}
.page-menu li.active{ color: #B40200; }
.page-menu li.active::before{ border-color: #B40200;}
.page-menu li a{
  display: flex;
  width: 100%; height: 100%;
  justify-content: center;
  padding: 15px 0 20px;
  align-items: center;
}
.page-menu li a:hover{ opacity: .7; transition: .3s ; }
/*All END*/


/* ----------------------------------------------------
メディアクエリ設定 (PC) 1000px～ 
---------------------------------------------------- */

@media screen and (min-width: 1000px) {
  
/*グローバルビ--------------*/
header a{ color: #333; }
header .h-wrapper{ border-bottom: 1px solid #e5e5e5; overflow: hidden; }
header .logo a{
  display: block;
  max-width: 123px;
  margin: 0 auto;
  padding: 19px 0 19px;
}
.gnavi > li > a{
  border-right: 1px solid #e5e5e5;
  padding-top: 25px;
  height: 67px;
}
.subnavi a:hover span{
  background: #ededed;
  transition: .5s;
  border-radius: 3px;
}
.subnavi a.current{
  color: #b40200;
  font-weight: bold;
  background: #ededed;
}
.gnavi-info a{ color: #fff; }
.othernavi > li > a{ height: 66px; }
.othernavi > li > a::after{ background: #e5e5e5; }
.drawer-dropdown.active .drawer-dropdown-menu{ border-bottom: 1px solid #e5e5e5; }
.othernavi .drawer-dropdown.active .drawer-dropdown-menu{
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
}
/*アイコン設定*/
.nav-form a span:before{ content: url(/common/img/ico_form_on.png); }
.nav-bi a span:before{ content: url(/common/img/ico_bi_on.png); }
.nav-cloud a span:before{ content: url(/common/img/ico_cloud_on.png); }
.nav-sol a span:before{ content: url(/common/img/ico_solution_on.png); }
.nav-data a span:before{ content: url(/common/img/ico_data_on.png); }	
.nav-search a{ background:url(/common/img/ico_search_on.png) no-repeat center 15px; }

  

}
/* ----------------------------------------------------
メディアクエリ設定 (PC) 961px～ 
---------------------------------------------------- */
@media screen and (min-width: 961px) {
	


/* (PC) 961px～  END*/
}

 /* ----------------------------------------------------
メディアクエリ設定 (tablet and PC) 769px～ 
---------------------------------------------------- */
@media only screen and (min-width: 769px){
	
.sp-local{ display: none; }
.tel{ cursor: default; pointer-events: none; text-decoration: none !important; }
	
/*(tablet and PC) 780px～  END*/
}



 /* ----------------------------------------------------
メディアクエリ設定 (tablet　only)  769～979px
---------------------------------------------------- */
@media only screen and (min-width: 769px) and (max-width: 979px) {
	
	


/*769～979px*/
}

 /* ----------------------------------------------------
メディアクエリ設定 (smartPhone only)   0～1199px
---------------------------------------------------- */
@media screen and (max-width: 1199px) {
	
  .localnavi-box .local-menu li a{ font-size: 10px;font-size: 1.0rem; padding: 0 10px; }
  .content{ margin: 0 10px; }
}

/* ----------------------------------------------------
メディアクエリ設定 (smartPhone only)   0～999px
---------------------------------------------------- */
@media screen and (max-width: 999px) {
	
.localnavi > p{ width: 180px; font-size: 14px;font-size: 1.4rem; }
.localnavi a{ height: 40px; }
.localnavi-box{ width: calc(100vw - 180px); }
.localnavi-box .local-menu li a{ font-size: 10px;font-size: 1.0rem; }
.local-sub{ display: none; }
/*smartPhone END*/
}

 /* ----------------------------------------------------
メディアクエリ設定 (smartPhone only)   0～768px
---------------------------------------------------- */
@media screen and (max-width: 768px) {

  
  
/*非表示*/
.localnavi-box,.breadcrumb{ display: none; }
  
/*ローカルナビ--------------*/
.localnavi{ background: #fff; border-bottom: 1px solid #e5e5e5; }
  .localnavi img{
    max-width: none;
    width: auto;
    height: 30px;
  }
.localnavi > p{ width: auto; float: none; }
.localnavi > p a{
  font-weight: normal;
  height: auto;
  padding: 15px 15px 15px 35px;
  justify-content:flex-start;
  position: relative;
}
.localnavi > p a::before{
  content: "";
  background: url(/common/img/arrow_red.png) left center / 7px auto no-repeat;
  width: 7px;
  height: 11px;
  display: block;
  position: absolute;
  left: 13px;
  top: calc(50% - 4px);
  transform: rotate(-180deg);
}
  
.sp-local{ background: #f2f2f2; padding: 20px 20px 0; }
.sp-local ul{ background: #80010b; }
.sp-local li{ background: #98010d; }
.sp-local li a{
  padding: 18px 30px;
  background:  url(/common/img/arrow_white.png) 95% center / 7px auto no-repeat;
  margin-bottom: 1px;
  color: #fff;
  display: block;
}
.sp-local .drawer-dropdown a{ background:  url(/common/img/ico_plus.png) 95% center / 10px auto no-repeat; }
.sp-local .open a{ background:  url(/common/img/ico_minus.png) 95% center / 10px auto no-repeat; }
.sp-local .drawer-dropdown-menu{ background: #4d0006; }
.sp-local .drawer-dropdown-menu li{ background: #80000b; margin-bottom: 1px; }
.sp-local .drawer-dropdown-menu a{
  background:  url(/common/img/arrow_white.png) 95% center / 7px auto no-repeat;
  margin-bottom: 0;
}
.sp-local li:last-of-type,.sp-local li:last-of-type a{ margin-bottom: 0; }

/*メインタイトル--------------*/
.bg-title{ margin-bottom: 40px; }
.bg-title::before{
  content: "";
  display: block;
  padding:50px 0;
  z-index: -1;
}
.bg-title h1{ font-size: 20px;font-size: 2.0rem; padding: 0 10px; }

.sp-nobg{ background: none !important; }
.sp-nobg h1{ 
  color: #333;
  border-bottom: 1px solid #e5e5e5;
  padding-right: 30px;}
.sp-nobg::after{
  content: "";
  background: url(/common/img/arrow_red.png) left center / contain no-repeat;
  width: 8px;
  height: 12px;
  display: block;
  transform: rotate(90deg);
  position: absolute;
  right: 15px;
  top: calc(50% - 5px);
}

/*タイトル--------------*/
.tit-txt{
  font-size: 20px;font-size: 2.0rem;
  padding: 40px 25px 40px 10px;
  position: relative;
  border-bottom: 1px solid #e5e5e5;
  margin:0 -10px 25px;
}
.tit-txt::before{
  content: "";
  background: url(/common/img/arrow_red.png) left center / 7px auto no-repeat;
  width: 7px;
  height: 11px;
  display: block;
  position: absolute;
  right: 15px;
  top: calc(50% - 4px);
  transform: rotate(-270deg);
}
.tit-linetop{
  font-size: 18px;font-size: 1.8rem;
  padding-top: 20px;
  margin:40px 0 20px;
  font-weight: bold;
}
.tit-linebtm{
  font-size: 16px;font-size: 1.6rem;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
/*コンテンツ共通--------------*/

.content{ padding-bottom: 80px; font-size: 14px;font-size: 1.4rem; }

/*3カラム →　2カラム*/
.col3 > .sp-col2-box{ width: calc(100% / 2 - 10px); }

/*table*/
.row-tbl > dl,.row-tbl > dl:nth-of-type(2n){ display: block; background: #fff; }

.row-tbl > dl > dt,.row-tbl > dl > dd{
  display: block;
  width: 100%;
  padding: 10px;
}
.row-tbl > dl > dt{ background: #f7f7f7; }
.row-tbl > dl > dd{ padding-bottom: 15px; }
  
/*リンクボタン*/
.btn-black-l a,.btn-red-l a{
  font-size: 16px;font-size: 1.6rem;
  padding: 30px 0;
}
.btn-black-s a,.btn-red-s a{ font-size: 14px;font-size: 1.4rem; }
  
/*アンカー・ページメニュー*/
  .page-menu ul{ font-size: 11px; font-size: 1.1rem;}
  .page-menu li{ padding: 0 10px; line-height: 1.5; text-align: center;}
  .page-menu li a{ padding: 10px 0 15px;}
/*smartPhone END*/
}