@charset "UTF-8";

/* pc -------------------------------------------------------------------------------------*/
@media screen and (min-width: 641px) {

/* タイトル */
.title {
width: 100%;
height: 140px;
overflow: hidden;
position: relative;
}

/*タイトル部分ここから*/
.titlebar__inner{
  width: 1040px;          /* 指示：左右1040px */
/*  margin: 0 auto;*/
  padding: 18px 20px;
  display: flex;              /* flexbox */
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: absolute;
  top:0;
  left: 50%;            /* 親の左から 50% の位置へ */
  transform: translate(-50%, 0%); /* 自身の幅と高さの半分だけ戻す */
}

.titlebar__inner img{
width: 21px;
height: 21px;
}

/* 左：タイトル（左寄せ＋下線） */
.titlebar__title{
  margin: 0;
  color: #2f6f90;
  font-weight: 800;
  font-size: 38px;
  letter-spacing: .04em;
  line-height: 1;
}

/* 右：リンク（右寄せ） */
.titlebar__nav{
  display: flex;              /* flexbox */
  align-items: center;
  justify-content: flex-end;  /* 右寄せ */
  gap: 60px;
  flex: 0 0 auto;
}

/*タイトル部分ここまで*/


/*---------------------------------------------------------*/

/* 共通 */
section {
border-top: 5px solid #99bed6;
  max-width:100%;
  margin:0 auto 80px;
  padding:0;
}

/*---------------------------------------------------------*/

.office-section{
  background:#fff;
  margin-bottom: 90px;
}

.office-inner{
  max-width: 1040px;
  margin: 0 auto;
  padding: 1.5em 0 0 0;
  box-sizing: border-box;
}

/* 見出し（本社） */
.office-heading{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 24px;
  font-weight: 800;
  color:#669ec2;
  border-left: 10px solid #99bed6;
  padding-left: 0.5em;
}

/* 2カラム：上揃え（所在地と右画像の上を揃える） */
.office-row{
  display:flex;
  gap: 27px;
  align-items: flex-start;
}

/* 左カラム：小画像を下に固定し、上のテキスト塊を上へ */
.office-left{
  flex: 0 0 470px;
  display:flex;
  flex-direction:column;
  padding-left: 20px;
  gap: 0;               /* ← top側でgap管理するので一旦0 */
}

/* 上のテキスト塊（所在地〜アクセス） */
.office-left__top{
  height: 321px;
  line-height: 1.7em;
}

/* 小画像は左カラムの底に固定 */
.office-photo--small{
  margin-top: auto;
  width: 470px;
  height: 300px;
  border: 1px solid #c8c9ca;
}

/* 右画像の上端と揃えたい場合：
   office-rowの縦揃えは "上揃え" にする */
.office-row{
  align-items: flex-start; /* ★上端揃え */
}

.office-box{
/*  padding-top: 6px;*/
}

.office-subtitle{
  margin: 0 0 10px;
/*  font-size: 14px;*/
  font-weight: 800;
  line-height: 1;
  padding: 0 0 10px 0.5em;
  border-bottom: 1px solid #c8c9ca;
}

.office-text{
  padding: 0 0 1.5em 0.5em;
/*  font-size: 13px;*/
}

.office-access {
  padding: 0 0 0 0.5em;
}
/* ● を before で */
.office-access li{
  position: relative;
  padding-left: 1.2em;
  margin: 0.6em 0;
  line-height: 1.6;
}

.office-access li::before{
  content: "●";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 0.95em;
  color: #005d99;
}

/* 画像枠（プレースホルダー） */
.office-photo{
  margin: 0;
  overflow:hidden;
}

/* 実画像を入れる場合の共通 */
.office-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* ★右画像：高さを固定せず、左カラムと同じ高さにする */
.office-photo--large{
  flex: 0 0 521px;
  height: 621px;
}

/*google map*/
iframe {
  width: 470px;
  height: 300px;
}

}



/* spc -------------------------------------------------------------------------------------*/
@media screen and (max-width: 640px) {

/* タイトル */
.title {
width: 100%;
height: 5em;
overflow: hidden;
position: relative;
}

/*タイトル部分ここから*/
.titlebar__inner{
  width: 100%;
/*  margin: 0 auto;*/
  padding: 0.5em 0 0 0.9em;
  display: flex;              /* flexbox */
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: absolute;
  top:0;
  left: 0;            /* 親の左から 50% の位置へ */
/*  transform: translate(-50%, 0%); /* 自身の幅と高さの半分だけ戻す */
}

/* 左：タイトル（左寄せ＋下線） */
.titlebar__title{
  margin: 0;
  color: #2f6f90;
  font-weight: 800;
  font-size: 6.5vw;
  letter-spacing: 0;
  line-height: 1;
}
/*タイトル部分ここまで*/

/* 右：リンク（右寄せ） */
.titlebar__nav{
  display: none;
}
/*タイトル部分ここまで*/


/*---------------------------------------------------------*/

/* 共通 */
section {
border-top: 5px solid #99bed6;
  max-width:100%;
  margin:0 auto 5em;
  padding:0;
}

/*---------------------------------------------------------*/

.office-section{
  background:#fff;
  margin-bottom: 5em;
}

.office-inner{
  max-width: 100%;
  margin: 0 auto;
  padding: 2em 0 0 0;
  box-sizing: border-box;
}

/* 見出し（本社） */
.office-heading{
  display:block;
/*  align-items:center;
  gap: 10px;*/
  margin: 0 0 1em 0.3em;
  font-size: 123%;
  line-height: 1.8em;
  font-weight: 800;
  color:#669ec2;
  border-left: 10px solid #99bed6;
  padding-left: 0.5em;
}

/* 2カラム：上揃え（所在地と右画像の上を揃える） */
.office-row{
  display:block;
  font-size: 90%;
/*  gap: 27px;
  align-items: flex-start;*/
}

/* 左カラム：小画像を下に固定し、上のテキスト塊を上へ */
.office-left{
  flex: block;
  display:block;
/*  flex-direction:column;*/
  padding-left: 0;
  gap: 0;               /* ← top側でgap管理するので一旦0 */
}

/* 上のテキスト塊（所在地〜アクセス） */
.office-left__top{
  height: auto;
  line-height: 1.7em;
  padding-left: 1.3em;
}

/* 小画像は左カラムの底に固定 */
/*google map*/
.office-photo--small{
  margin: 0;
  width: 100%;
  border: 1px solid #c8c9ca;
  position: relative;
}

.office-photo--small::before {
  content: "";
  display: block;
  padding-top: 65%; /* 幅に対するパーセンテージ */
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 右画像の上端と揃えたい場合：
   office-rowの縦揃えは "上揃え" にする */
.office-row{
/*  align-items: flex-start; /* ★上端揃え */
}

.office-box{
/*  padding-top: 6px;*/
width:97%;
}

.office-subtitle{
  margin: 0 0 0.7em;
/*  font-size: 14px;*/
  font-weight: 800;
  line-height: 1;
  padding: 0 0 0.7em 0.5em;
  border-bottom: 1px solid #c8c9ca;
}

.office-text{
  padding: 0 0 1.5em 0.5em;
/*  font-size: 13px;*/
}

.office-access {
  padding: 0 0 0 0.5em;
}
/* ● を before で */
.office-access li{
  position: relative;
  padding-left: 1.2em;
  margin: 0.6em 0;
  line-height: 1.6;
}

.office-access li::before{
  content: "●";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 0.95em;
  color: #005d99;
}

/* 画像枠（プレースホルダー） */
.office-photo{
  margin: 1.3em 0 0 0;
  overflow:hidden;
}

/* 実画像を入れる場合の共通 */
.office-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* ★右画像：高さを固定せず、左カラムと同じ高さにする */
.office-photo--large{
  flex: block;
  height: auto;
  width: 100%;
}


}