@charset "utf-8";

/*「会社情報」のみで使用しているcss*/

/* --------------------------------------------------------
main
-------------------------------------------------------- */
#mainImg,
#businessPage{
  background-image: url(../img/mainimg_01.png);
  background-size: cover; /* 要素全体を覆うように拡大（縦横比を維持） */
  background-repeat: no-repeat;
  background-position: center center;
}

#businessPage{
  background-image: url(../img/mainimg_02.png);
}

main nav{
	padding: 0;
}

.Catchphrase,
.Catchphrase2{
	margin:0 auto;
	background: #E1F7FF;
	padding: 5%;
	color:#001966;
	font-size:17px;
	line-height:1.8em;
	/*font-family: "うつくし明朝体" , sans-serif;*/
	font-family: 'Zen Maru Gothic', serif;
}

.Catchphrase2{
	text-align: center;
}

.toggle_switch{
	background-color: #DFEEFB;
    color: #001966;
}

.toggle_contents a {
    display: block;
    padding: 15px 25px;
    border-bottom: 1px solid #001966;
    text-align: center;
    color: #001966;
    font-family: "こころ明朝体", sans-serif;
	background: #f1f8ff;
}

main nav p{
  width: 90%;
	margin:0 auto;
	text-align: center;
}

.pan a:hover{ color: #2155DE; transition: .3s; text-decoration: underline;}

.blue16_mag5_line{
  background-color: #F0F0FF;
}

nav p{
	text-align: left;
}

/* --------------------------------------------------------
.info 基本情報
-------------------------------------------------------- */

section.info hr,
section.business hr{
	border: none;
	border-bottom: 1px dashed black;
}

.infoFlex{
	padding: 3% 0 0;
}

.infoFlex h2{
	background: #004080;
	display: inline-block;
	color: white;
	font-size: 1rem;
	padding: 1% 5%;
	border-radius: 5px;
}

.infoFlex2{
	display: flex;
  align-items: center;
	gap: 5px;
	padding: 2% 0;
}

.infoFlex2 .infoTxt{
  padding-bottom: 7px;
}

.infoFlex:nth-of-type(n+2) h2{
	background: #949EA7;;
}

.infoFlex:nth-of-type(n+2) .infoTxt{
	padding: 3% 0;
}

.infoTxt ul{
  margin: 0;
}

.infoFlex3{
	display: flex;
	gap: 10px;
}

span.spBr{
	display: block;
}

/* --------------------------------------------------------
.business 業務内容
-------------------------------------------------------- */

.business h2,
.history h2{
	text-align: center;
}

.businessWrap{
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 4% 0;
}

.businessWrap img{
	display: block;
}

.businessWrap p{
	padding: 0;
	margin: 0;
}

/* 画像の雰囲気に寄せた table */
.historyTable{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #dfe3ea;
  background: #fff;
  font-size: 15px;
  line-height: 1.6;
  margin: 5% 0 0;
}

.historyTable th,
.historyTable td{
  border-top: 1px solid #dfe3ea;
  border-right: 1px solid #dfe3ea;
  padding: 12px 16px;
  vertical-align: middle;
}

.historyTable tr:first-child th,
.historyTable tr:first-child td{
  border-top: none;
}

.historyTable th{
  width: 140px;              /* 左列の幅（画像っぽく固定気味） */
  text-align: center;        /* 年月は中央寄せ */
  font-weight: 500;
  white-space: nowrap;       /* 折り返さない */
  background: #fff;
}

.historyTable th.yellow{
	background: #FEFFEC;
}

.historyTable td{
  border-right: none;
}

/* 区切り（薄い水色行） */
.historyTable tr.isHighlight th,
.historyTable tr.isHighlight td{
  background: #eaf0ff;       /* 画像の薄青に近い */
}

/* SP対応（任意） */
@media (max-width: 560px){
  .historyTable th{
    width: 110px;
    padding: 10px 12px;
  }
  .historyTable td{
    padding: 10px 12px;
  }
}

/* --------------------------------------------------------
.building 本社の写真(map_m.html)
-------------------------------------------------------- */

.building{
	text-align: center;
}

.buildingWrap{
	padding: 2% 0;
}

.buildingWrap:first-of-type{
	padding: 0 0 2%;
}

/* --------------------------------------------------------
.map GoogleMap(map_m.html)
-------------------------------------------------------- */

.map{
	padding-top: 15%;
}

.map h3{
	text-align: center;
	padding-bottom: 5%;
}

/* --------------------------------------------------------
common(index1.html)
-------------------------------------------------------- */

.businessWrapAll{
	padding-bottom: 3%;
}

.businessWrapAll .click{
	display: block;
	text-align: right;
}

/* =============================================================
  PC表示 (980px以上に適用)
============================================================= */

@media screen and (min-width: 980px){

/* --------------------------------------------------------
main
-------------------------------------------------------- */

span.spBr{
	display:inline-block;
}

#mainImg,
#businessPage{
	background-image:url(../img/bg_01.webp);
  background-size: cover; /* 要素全体を覆うように拡大（縦横比を維持） */
  background-repeat: no-repeat;
  background-position: center center;
}

#businessPage{
	background-image:url(../img/bg_04.webp);
}

main nav{
	display: none;
	margin:0 auto;
	background: #E1F7FF;
	padding:50px 0 0;
	color:#001966;
	font-size:17px;
	line-height:1.8em;
	/*font-family: "うつくし明朝体" , sans-serif;*/
	font-family: 'Zen Maru Gothic', serif;
	height:170px; /* 120px ⇒　*/
}

main nav p{
	max-width:800px;
	margin:0 auto;
}

.pan a:hover{ color: #2155DE; transition: .3s; text-decoration: underline;}

#inquiry{
  max-width: 750px;
}

.Catchphrase,
.Catchphrase2{
	padding: 3% 0;
	text-align: center;
}

section{
	width: 850px;
}

.infoFlex{
	display: flex;
	gap: 5%;
	align-items: center;  /* ← stretchをやめる（h2が伸びなくなる） */
	flex-wrap: nowrap; /* ← 下段落ちさせない */
	padding: 10px 0;
}

.infoFlex h2{
	width: 130px;
	flex: 0 0 auto;    /* ← h2は固定 */
	text-align: center;
	padding: 5px 0;
}

.infoFlex2{
  gap: 10px;
	flex: 1 1 auto;    /* ← 右側を可変に */
	min-width: 0;      /* ← これがないと縮まず崩れることが多い */
	align-items: center;  /* ← これを追加（stretchをやめる） */
	padding: 0;
}

.infoFlex2 .infoTxt{
  padding-bottom: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.infoFlex2 .infoTxt .black22b{
  display: inline-block;
  padding-top: 2px;
}



.infoFlex:nth-of-type(n+2) .infoTxt{
	padding: 0;
}

.infoFlex3{
	align-items: center;
}

.mainOffice{
	width: 100%;
	display: flex;
	align-items: center;          /* 縦中央 */
	justify-content: space-between; /* 左：住所 / 右：ボタン */
	gap: 16px;
}

/* 左（住所）を伸ばす */
.mainOffice p{
  margin: 0;
  flex: 1;                 /* ← これが最重要 */
}

/* 右（詳しくはこちら）を右端に固定 */
.mainOffice a{
  margin-left: auto;       /* ← 右寄せの決定打 */
  flex-shrink: 0;
}

/* --------------------------------------------------------
.business 業務内容
-------------------------------------------------------- */

.business{
	padding: 100px 0 80px;
}

.businessWrap{
	padding: 10px 0;
}

/* --------------------------------------------------------
.building 本社の写真(map_m.html)
-------------------------------------------------------- */

.Catchphrase2{
	color: #FFFFFF;
    text-shadow: 1px 1px 1px #666;
    font-weight: bold;
	font-size: 40px;
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", osaka, sans-serif;
}

.buildingWrap2{
	display: flex;
	width: 850px;
	justify-content: space-between;
	padding: 30px 0;
}

.buildingWrap{
	padding: 0;
}

.buildingWrap:first-of-type{
	padding: 0;
}

/* --------------------------------------------------------
.map GoogleMap(map_m.html)
-------------------------------------------------------- */

.map{
	padding-top: 50px;
}

.map h3{
	padding-bottom: 15px;
}

.addressWrap{
	padding: 30px 0 0;
}

.addressWrap2 dl{
	width: 500px;
	margin: 0 auto;
	display: flex;
	gap: 10px;
	padding: 5px 0 0;
}

/* --------------------------------------------------------
common(index1.html)
-------------------------------------------------------- */

.Catchphrase p{
	width: 850px;
	margin: 0 auto;
	text-align: left;
	padding: 0;
}

.business{
	padding: 30px 0;
}

.businessWrapAll{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 0;
}

}