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


/* =============================================================================
   タイトルバー(固定ページのh2はページタイトルに使用)
   ========================================================================== */

#company{
	width: 100%;
	margin: 0 auto;
}

#company .mv{
	width: 100%;
    margin: 0 auto;
    display: block;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
    margin-bottom: 30px;
    height: 325px;
    background-image: url(../../images/common/pc_titlebar.webp);
    background-repeat: no-repeat;
    background-size: cover;
}

#company h2{
    font-size: 40px;
	font-size:clamp(2.188rem, 1.993rem + 0.41vw, 2.5rem);/*values(min:35px,max40px)viewport(min768px,max2000px)*/
    letter-spacing: 3px;
    font-weight: bold;
    /* font-family: 'Hind', sans-serif; */
    color: #fff;
    margin: 0 auto;
	padding-top: 148px;
	padding-top: 162px;
	margin-left: 7%;
}
    


/* =============================================================================
   全体共通　
   ========================================================================== */

.body{
	margin: 0!important;
}

/*------------------
  リンク　a
  ------------------*/
#company .contents-wrapper a{
	text-decoration: none;
	color: #333;
}

/*------------------
  表示制御
  ------------------*/
/*spのみ表示のときは非表示*/
#company .sp{display: none;}
/*spのみ表示のときは非表示*/
#company .sp-visible{visibility: hidden;}


/*------------------
  改行制御
  ------------------*/
/*pcのみ改行のときはblock*/
#company .block{display: block;}
/*spのみ改行のときはインライン*/
#company .spnomi_block{display: inline;}


/*------------------
  その他の全体共通設定
  ------------------*/
#company h3{
	color: #2a2a2a;
	margin: 0 auto;
    line-height: 1.6;
	font-weight: bold;
	letter-spacing: 1px;
	/*font-size: 35px;*/
	font-size:clamp(2.063rem, 1.985rem + 0.16vw, 2.188rem);/*values(min:33px,max35px)viewport(min768px,max2000px)*/
	margin-top: -12px;
    margin-bottom:12px;
}

#company h4{
	margin: 0 auto;
    line-height: 1.6;
	font-weight: bold;
	letter-spacing: 1px;
	color: #2a2a2a;
	/*font-size: 20px;*/
	font-size:clamp(1.313rem, 1.235rem + 0.16vw, 1.438rem);/*values(min:21px,max23px)viewport(min768px,max2000px)*/
    margin-bottom: 30px;
}

#company p{
	color: #2a2a2a;
	/*font-size: 16px;*/
	line-height: 1.6;
	font-size:clamp(0.938rem, 0.899rem + 0.08vw, 1rem);/*values(min:15px,max16px)viewport(min768px,max2000px)*/
	text-align: justify;
}

/*文字　中央揃えに*/
.text_center{
	text-align: center;
}

/*文字　太く*/
#company .bold{
	font-weight: bold;
}

/*マーカー*/
#company span.maker{
	background: linear-gradient(transparent 50%, #54D6FF 50%);
}

/*------------------
  googlefont
------------------*/
/*ゴシック系　英字に*/
#company .hind{
	font-family: 'Hind', sans-serif;
}

/*ゴシック系　英字に*/
#company .lato{
	font-family: 'Lato', sans-serif;
}

/*ゴシック系　丸みあり　数字に*/
#company .varelaRound{
	font-family: 'Varela Round', sans-serif;
}

/*ゴシック系　数字に*/
#company .montserrat{
	font-family: 'Montserrat', sans-serif;
}



/*----------------
width指定
-----------------*/

/*100%(フル幅)*/
#company .contents-wrapper{
 margin: 0 auto;
 position:relative;
}

/*コンテンツエリア幅*/
#company .contents{
	margin: 0 auto;
	width: 95%;
	max-width: 1000px;
	position: relative;
}



/*===============================
	
全セクション共通

================================*/	
/*ヘッダーが表のz-indexより下になるので調整*/
header.header {
    /* padding: 40px 0; */
    background-color: transparent;
    position: fixed;
    transition: padding .5s, background-color .5s;
    width: 100%;
    z-index: 2;
}

span.maker{
	background: linear-gradient(transparent 50%, #54D6FF 50%);
}



/*===============================

会社概要  セクション

================================*/
/*背景画像*/
#company .fare_2{
	background-image: url(../../images/top/bg_basicFee.webp);
	background-repeat: no-repeat;
	background-size: cover;
    margin-top: 112px;
	margin-bottom: 117px;
}

/*セクション内のコンテンツ幅*/
#company .fare_2 .nakami{
	margin: 0 auto;
}


/*-------レスポンシブ_行列固定の表　ここから--------*/	

/*テーブルのデフォルト設定*/
#company .fare_2 table {
	border-collapse:collapse;
	margin:0 auto;
}

/*表全体の幅*/
#company .fare_2 table{
  margin: 0 auto;
	width: 100%;
    max-width: 1000px;
  text-align: center;
  letter-spacing: 1px;
  font-weight: bold;
margin-bottom: 1%;
}

/*見出しセル、セル*/
#company .fare_2 .table th,td{
  width: 150px;/*1つのセルの幅*/
  height: 50px;;/*1つのセルの高さ*/
  vertical-align: middle;
  /*padding: 0 15px;*/
  font-weight: normal;
  text-align: left;
  padding-left: 15px;
}

#company .fare_2 .table th.border-bottom{
  border-bottom: 2px solid #fff;/*線*/
}

#company .fare_2 .table td{
  border: 2px solid #B9B7B7;/*線*/
}

#company .fare_2 .table .fixed01,
#company .fare_2 .table .fixed02{
  position: sticky;/*指定された場所までいくと固定*/
  top: 0;/*画面上部で固定*/
  left: 0;
  width: 21%;

}

#company .fare_2 .table .width02{
	max-width: 80px;	
}

#company .fare_2 .table .left{
	margin: 0 auto;
	text-align: left;
	max-width: 160px;
	padding-left: 22px;
	line-height: 1.45;
	font-weight: normal;
}

#company .fare_2 .table .fixed01{
  z-index: 2;
}
#company .fare_2 .table .fixed02{
  z-index: 1;
}

/*上見出し(1列目)だけ*/
#company .fare_2 .table table tr.ue_midashi{
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    background-color: #01A439;
    letter-spacing: 2px;/*見出しだけ時間ゆったり*/

}

/*【重要】なぜかここ(左上端)だけ背景色が透過になって、スクロールすると文字が重なって見える問題発生(検証ではわからない/実機で発覚)したため　局所的に色を再設定*/
#company .fare_2 .table table th:first-child {
	background-color:#01A439;
	/*border-top: 2px solid #B9B7B7;*/
}

/*左見出し(1行目)だけ*/
#company .fare_2 .table table tr th.hidari_midashi{
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    background-color: #9C8754;
    letter-spacing: 2px;
	/*border-left: 2px solid #B9B7B7;*/
}

#company .fare_2 .table table th:last-child {
	/*border-bottom: 2px solid #B9B7B7;*/
}

/*td*/
#company .fare_2 .table td{
	background-color: #fff;
	font-weight: normal;
    letter-spacing: normal;
}

#company .fare_2 .table table.outline {
  border: 2px solid #B9B7B7;
  border-collapse: collapse;
}

#company .fare_2 .table table.outline tr:last-child{
  /*border: 2px solid #B9B7B7;
  border-collapse: collapse;*/
}

/*-------レスポンシブ_行列固定の表　ここまで--------*/	







/*------------------
  マップ　セクション　
  ------------------*/	
#company section#map{
	margin-bottom: 117px;
}
    
#company section#map .contents {
    width: 100%;
	max-width: none;
}

#company section#map iframe{
    width: 100%;
	height: 535px;
}





/*------------------
  代表挨拶　セクション　
  ------------------*/	
#company section#greeting{
	margin-bottom: 117px;
}
#company section#greeting div.contents{
	z-index: 1;
}

    
#company section#greeting div.contents ul.greetingBox{
	display: flex;
	justify-content: space-between;
    column-gap: 45px;
	width: 93%;
}

#company section#greeting div.contents ul.greetingBox > li:first-child{
	width: 50%;
}


#company section#greeting div.contents ul.greetingBox > li:last-child h3{
	/*font-size: 35px;*/
	/*font-size:clamp(2.063rem, 1.985rem + 0.16vw, 2.188rem);values(min:33px,max35px)viewport(min768px,max2000px)*/
	margin-top: -12px;
    margin-bottom:12px;
}

#company section#greeting div.contents ul.greetingBox > li:last-child h4{
	/*font-size: 20px;*/
	/*font-size:clampclamp(1.125rem, 1.047rem + 0.16vw, 1.25rem);values(min:18px,max20px)viewport(min768px,max2000px)*/
    margin-bottom: 30px;
}

#company section#greeting div.contents ul.greetingBox > li:last-child p{
	/*font-size: 16px;*/
	line-height: 1.8;
	/*font-size:clamp(0.938rem, 0.899rem + 0.08vw, 1rem);/*values(min:15px,max16px)viewport(min768px,max2000px)*/
}

#company section#greeting div.contents ul.greetingBox > li:last-child p.mb01{
	margin-bottom: 15px;
}

#company section#greeting div.contents ul.greetingBox > li:last-child p.mb02{
	margin-bottom: 40px;
}

#company section#greeting div.contents ul.sign{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

#company section#greeting div.contents ul.sign li:first-child p{
	font-weight: normal;
	margin-right: 20px;
	transform: translate(0px, 5px);
}

#company section#greeting div.contents ul.sign li:last-child{
	width: 21%;
}


/*------------------
  あしらい
  ------------------*/
#company div.contents-wrapper{
	position: relative;
}

#company div.contents-wrapper img.deco{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 39%;
	z-index: 0;
}




/*------------------
	
  各固定ページに紐づく個別cssで調整】
	
  ------------------*/	
#company .contents-wrapper a.bredcrumb_homerink-text {
    text-decoration: underline;
}

/* //全体ここまで */
/* =================================================================================

スマホ(768px以上からPCコーディング)
961 

==================================================================================== */
@media only screen and (max-width: 767px){	

/*------------------
  表示制御
  ------------------*/
.pc{display: none;}
.sp{display: block;}
.pc-visible{visibility: hidden;}
	

/* =============================================================================
   タイトルバー(固定ページのh2はページタイトルに使用)
   ========================================================================== */
#company{
	width: 100%;
	margin: 0 auto;
	font-size: 13px;
    text-align: justify;
}
	
/*タイトルバー背景画像　SP用*/
#company .mv{
    height: 100px;
    background-image: url(../../images/common/sp_titlebar.webp);
}	
	
#company h2 {
    letter-spacing: 2px;
    padding: 30px 0;
    text-align: left;
    padding-top: 37px;
	font-size:clamp(1.125rem, 1.036rem + 0.45vw, 1.25rem);/*values(min:18px,max20px)viewport(min320px,max767px)*/
}	
	
	
	
	
/* =============================================================================
   全体共通　
   ========================================================================== */
	
/*------------------
  表示制御
  ------------------*/
/*pcのみ表示のときは非表示*/	
#company .pc{display: none;}
#company .sp{display: block;}
#company .pc-visible{visibility: hidden;}

/*------------------
  改行制御
  ------------------*/
/*pcのみ改行のときはインライン*/
#company .pcnomi_block{display: inline;}
/*spのみ改行のときはblock*/
#company .spnomi_block{display:block;}
	
	

/*----------------
width指定
-----------------*/
/*100%(フル幅)*/
#company .contents-wrapper{
/*wrapperの幅を100%に(これしてないと貫通むり)*/
	width:100%;
}
/*コンテンツエリア幅*/
#company .contents{
	width: 95%;
}	
	
/*------------------
  その他の全体共通設定
  ------------------*/
#company h3{
	font-size:clamp(1.25rem, 1.172rem + 0.16vw, 1.375rem);/*values(min:20px,max22px)viewport(min320px,max767px)*/
}
			
#company h4{
	font-size:clamp(1.125rem, 1.047rem + 0.16vw, 1.25rem);/*values(min:18px,max20px)viewport(min320px,max767px)*/
}
	
#home p{
	font-size:clamp(0.813rem, 0.774rem + 0.08vw, 0.875rem);/*values(min:13px,max14px)viewport(min320px,max767px)*/
	text-align: justify;
}	
	

/*------------------
   コンテンツエリア
  ------------------*/	
#home .wrapper .contents{
	width: 95%;
}	
	
	
	
/*===============================

 会社概要  セクション

================================*/
#company .fare_2 {
    margin-top: 48px;
    margin-bottom: 35px;
}
	
/*-------レスポンシブ_行列固定の表　ここから--------*/	
#company .fare_2 .table th{
    padding-left: 15px;
}
#company .fare_2 .table td {
	padding-left: 10px;
}	
	
	
#company .fare_2 .table{
	overflow: scroll;
    margin-top: 3%;
}
	
/*表全体の幅*/
#company .fare_2 table{
  width: 100%;
  letter-spacing: 1px;
  margin-bottom: 1%;
}
	
#company .fare_2 .table table {
  width: 100%;
  margin-bottom:2%;
}

/*見出しセル、セル*/
#company .fare_2 .table th,
#company .fare_2 .table td{
  width: 50%;/*1つのセルの幅*/
  height: 41px;/*1つのセルの高さ*/
}

#company .fare_2 .table .fixed01,
#company .fare_2 .table .fixed02{
  position: sticky;/*指定された場所までいくと固定*/
  top: 0;/*画面上部で固定*/
  left: 0;
  max-width: 90px;
}

#company .fare_2 .table .width02{
	max-width: 80px;
	font-size: clamp(0.875rem, 0.786rem + 0.45vw, 1rem);
}

#company .fare_2 .table .left{
	max-width: 160px;
	padding-left: 22px;
	line-height: 1.45;
}

#company .fare_2 .table .fixed01{
  z-index: 2;
}
#company .fare_2 .table .fixed02{
  z-index: 1;
}

/*上見出し(1列目)だけ*/
#company .fare_2 .table table tr.ue_midashi{
    font-size: 18px;
    letter-spacing: 2px;/*見出しだけ時間ゆったり*/
}

/*【重要】なぜかここ(左上端)だけ背景色が透過になって、スクロールすると文字が重なって見える問題発生(検証ではわからない/実機で発覚)したため　局所的に色を再設定*/
#company .fare_2 .table table th:first-child {
	background-color:#01A439;
}

/*左見出し(1行目)だけ*/
#company .fare_2 .table table tr th.hidari_midashi{
	font-size: clamp(0.875rem, 0.786rem + 0.45vw, 1rem);
}

/*td*/
#company .fare_2 .table td{
	background-color: #fff;
	font-weight: normal;
    letter-spacing: normal;
	text-align: justify;
	padding-right: 9px;
}

/*-------レスポンシブ_行列固定の表　ここまで--------*/	
	

	
/*------------------
  マップ　セクション　
  ------------------*/	
#company section#map{
	margin-bottom: 45px;
}

#company section#map iframe{
   height: 267px;
}


/*------------------
  代表挨拶　セクション　
  ------------------*/	
#company section#greeting{
    margin-bottom: 19px;
}
	  
#company section#greeting div.contents ul.greetingBox{
	display: block;
	width: 100%;
}

#company section#greeting div.contents ul.greetingBox > li:first-child{
	width: 100%;
}
	
#company section#greeting div.contents ul.greetingBox > li:first-child img{
	margin-bottom: 20px;	
}

#company section#greeting div.contents ul.greetingBox > li:last-child h3{
	margin-top: 0;
	margin-bottom: 20px;
}

#company section#greeting div.contents ul.greetingBox > li:last-child h4{
	margin-bottom: 12px;
}

#company section#greeting div.contents ul.greetingBox > li:last-child p{
	line-height: 1.7;
}

#company section#greeting div.contents ul.greetingBox > li:last-child p.mb01{
	margin-bottom: 12px;
}

#company section#greeting div.contents ul.greetingBox > li:last-child p.mb02{
	margin-bottom: 40px;
}

#company section#greeting div.contents ul.sign li:last-child{
	width: 34%;
}
	
/*------------------
  あしらい
  ------------------*/
#company div.contents-wrapper img.deco{
    width: 75%;
}
    

	
	
	
	
	
	
	
	
	


/*------------------
	
  各固定ページに紐づく個別cssで調整】
	
  ------------------*/	
/*#company .bredcrumb {
   width: 95%;
}*/
	
#company .mv {
   margin-top: 8.5%;
}

/*コンテンツ内のレイヤーより上に調整*/
#footer .container__fluid {
	z-index: 2;
}
	



}/* //スマホコーディング(ここまで) */
/* =================================================================================

スマホだけ

==================================================================================== */
@media screen and (min-width:320px)and (max-width:767px){
	

}
/* =================================================================================

PCコーディングだけ/768px以上～
     
==================================================================================== */
@media screen and (min-width:768px){
	
	
}
/* =================================================================================

タブレット以上/モニター(普通)以下

==================================================================================== */
@media screen and (min-width:600px)and (max-width:1200px){

/*------------------
  pcコーディングでコンテンツエリア(1200px※コンテンツエリアのpx値)以下の幅のとき

※1200px以上の絶対値指定したものは1200px以下の数値か%の数値へ変更
※横並びでspace-betweenにしているものはこの区間では両端に寄るので、1200px以下～スマホまでの領域はcenterにした上でcolumugapで余白つけとくこと
 ------------------*/	
	
/*表全体の幅*/
#company .fare_2 table{
	width: 100%;
    max-width: 1000px;
}	
	
	
	
/*===============================

会社概要  セクション

================================*/	
#company .fare_2 {
    margin-top: 75px;
    margin-bottom: 68px;
}	
	
/*===============================

マップ  セクション

================================*/		
#company section#map {
    margin-bottom: 68px;
}
	
/*===============================

代表挨拶  セクション

================================*/		
#company section#greeting {
    margin-bottom: 68px;
}	
	
	
/*------------------
  あしらい
  ------------------*/
#company div.contents-wrapper img.deco{
    width: 54%;
}	
	
	
	
	
	
	

	
/*-----【各固定ページに紐づく個別cssで調整】-----*/
header.header div.logo h1 {
    top: 51px;
    left: 15px;
}
header.header > ul.first {
   left: 5px;
}
header.header li.conversion {
	right: 73px;
    right: 23px;
	top: 1.5px;
}
	
header.header div.logo h1 {
	top: 47px;
	left: 15px;
}	
	
header.header div.logo h1 {
	width: 86px;
	height: 41px;
	top: 50px;
}
	
	
	
	
	
	

	

}
/* =================================================================================

モニター(wide)だけ

==================================================================================== */
@media screen and (min-width:1500px){

/*------------------
  あしらい
  ------------------*/
#company div.contents-wrapper img.deco{
    max-width: 606px;
}

	
}


/* =================================================================================

デスクトップだけ  ※イレギュラー追加
     
==================================================================================== */
@media screen and (min-width:1024px){

/*トップページと下層ページとで、ヘッダーの上に余白の高さがちがうのでheader.cssに一律指定で書くと相違が出るので個別cssで記述する*/
header.header{
    margin-top: -24px;
}

/*breadcrumbs.cssに一律指定で書くと相違が出るので個別cssでそのページのコンテンツエリアに合わせて記述する*/
.bredcrumb .bredcrumb-container {
	margin: 0 auto;
    width: 1100px;
}


/* //デスクトップだけだけ(ここまで) */
}