@charset "utf-8";

/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("inview.css");

/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
  --bg-color: #fff; /*主にテンプレートの背景色*/
  --bg-inverse-color: #333; /*上のカラーの「対」として使う色*/

  --primary-color: #05273f; /*メインまたはアクセントカラー*/
  --primary-inverse-color: #fff; /*上のカラーの「対」として使う色*/

  --light-color: #f4f4f4; /*メインまたはアクセントカラーの淡い版*/
  --light-inverse-color: #333; /*上のカラーの「対」として使う色*/

  --secondary-color: #43616d; /*サブカラー*/
  --secondary-inverse-color: #fff; /*上のカラーの「対」として使う色*/

  --accent-color: #f2d36b; /*アクセントカラー*/
  --accent-inverse-color: #fff; /*上のカラーの「対」として使う色*/

  --red: #ff0000;

  --content-space: clamp(
    0.8rem,
    -2.217rem + 12.77vw,
    8rem
  ); /*余白の一括管理用*/

  --headerH: 70px; /*headerの高さ他、関連パーツ用*/
}

/*bg-primary背景
------------------------------*/
.bg-primary {
  background: var(
    --primary-color
  ); /*背景色。css冒頭のprimary-colorを読み込みます。*/
  color: var(
    --primary-inverse-color
  ); /*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
}

/*bg-secondary背景
------------------------------*/
.bg-secondary {
  background: var(
    --secondary-color
  ); /*背景色。css冒頭のsecondary-colorを読み込みます。*/
  color: var(
    --secondary-inverse-color
  ); /*背景色。css冒頭のsecondary-inverse-colorを読み込みます。*/
}

/*bg-light背景
------------------------------*/
.bg-light {
  background: var(
    --light-color
  ); /*背景色。css冒頭のlight-colorを読み込みます。*/
  color: var(
    --light-inverse-color
  ); /*背景色。css冒頭のlight-inverse-colorを読み込みます。*/
}

/*bg（bg-primary、bg-secondary、bg-lightとセットで使います）
------------------------------*/
.bg {
  padding-top: 5vw; /*ボックス内の上に空ける余白。画面幅100%=100vw*/
  padding-bottom: 5vw; /*ボックス内の下に空ける余白。画面幅100%=100vw*/
}
.bg + .bg {
  margin-top: calc(-1 * 5vw) !important;
}

/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
  0% {
    left: -200px;
  }
  100% {
    left: 0px;
  }
}

/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*全体の設定
---------------------------------------------------------------------------*/
body * {
  box-sizing: border-box;
}
html,
body {
  font-size: 16px; /*基準となるフォントサイズ。*/
}

body {
  margin: 0;
  padding: 0;
  font-family:
    "Noto Serif JP", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E",
    "ＭＳ Ｐ明朝", "MS PMincho", serif; /*フォント種類*/
  font-optical-sizing: auto;
  -webkit-text-size-adjust: none;
  background: var(--bg-color); /*背景色。冒頭のbg-colorを読み込みます。*/
  color: var(
    --bg-inverse-color
  ); /*文字色。冒頭のbg-inverse-colorを読み込みます。*/
  line-height: 2; /*行間*/
}
body:not(.home) main {
  margin-top: var(--headerH);
}

/*リセット*/
figure {
  margin: 0;
}
dd {
  margin: 0;
}
nav,
ul,
li,
ol {
  margin: 0;
  padding: 0;
}
nav ul {
  list-style: none;
}

/*table全般の設定*/
table {
  border-collapse: collapse;
}

/*画像全般の設定*/
img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/*iframeタグ*/
iframe {
  width: 100%;
}

/*btn*/
.btn {
  display: inline-block;
  text-decoration: none;
  margin: 0 auto;
  background: var(--primary-inverse-color);
  color: var(--primary-color);
  padding: 0.5rem 3rem;
  border-radius: 100px;
  font-size: clamp(1.1rem, 1.016rem + 0.35vw, 1.3rem);
  cursor: pointer;
}
.btn:hover {
  background: var(--primary-color);
  color: var(--primary-inverse-color);
  box-shadow: none;
}

.topics.btn {
  margin: 2rem auto 1rem;
  background: var(--primary-color);
  color: var(--primary-inverse-color);
  width: auto;
  font-size: 1rem;
}
.topics.btn:hover {
  background: var(--primary-inverse-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

/*その他*/
input {
  font-size: 1rem;
}
i.fas,
i.far {
  padding: 0 0.5rem;
}
.mt0 {
  margin-top: 0px !important;
}

/*section
---------------------------------------------------------------------------*/
section {
  padding: 0 var(--content-space);
  margin: 5vw 0; /*ここ変更する際は、他にも影響する場合があるので注意*/
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
  color: inherit;
  transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
  text-decoration: none;
}

/*マウスオン時*/
a:hover {
  text-decoration: none;
}

/*conatiner（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
  animation: opa1 0.2s 0.4s both; /*0.4秒待機後、0.2秒かけてフェードイン*/
  display: grid;
  grid-template-rows: auto 1fr;
}

/*トップ以外のcontainer*/
body:not(.home) #container {
  grid-template-rows: 1fr;
}

/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
header {
  position: fixed; /*画面の一定箇所で固定表示*/
  z-index: 1000;
  width: 100%;
  background: var(
    --primary-color
  ); /*背景色。冒頭のprimary-colorを読み込みます。*/
  color: var(
    --primary-inverse-color
  ); /*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5rem; /*headerの直接の子要素同士に空けるスペース。２文字分。*/
  line-height: 1.5; /*行間を少し狭く*/
  height: var(--headerH); /*ヘッダーの高さ。css冒頭のheaderHを読み込みます。*/
  transition:
    transform 0.5s ease,
    opacity 0.5s ease; /*スクロールでheaderがフェードする際にかける時間。*/
  padding: 0 var(--headerH) 0 2rem; /*上(0)、右(css冒頭のheaderHのサイズ)、下(0)、左(2文字分)へのヘッダー内の余白。*/
}

#logo a {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/*隠す際のスタイル*/
.site-header.is-hide {
  opacity: 0;
  transform: translateY(-100%); /*真上に隠す*/
  pointer-events: none; /*消えている間はクリックを無効化*/
}

@media screen and (max-width: 1000px) {
  header {
    position: absolute; /*スクロールとともに動かす為、絶対配置*/
  }

  /*ドロップダウンメニュー冒頭の矢印アイコン*/
  header nav i {
    padding-right: 0.5rem; /*右に空ける余白*/
  }
} /*追加指定ここまで*/

/*ロゴ画像*/
#logo {
  margin: 0;
  flex-shrink: 0;
  gap: 1rem;
  align-items: center;
}
#logo img {
  display: block;
  height: 50px; /*ロゴの高さ。headerの高さを固定しているので、ロゴも高さで指定して下さい。*/
}
#logo .site-title {
  font-size: 1.5rem;
}

/*header内のメニュー（※開閉メニューとはブロックが異なります）
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
header nav {
  flex: 1;
}
header nav ul {
  display: flex;
  gap: 1rem; /*メニュー同士の間に空けるスペース*/
}

@media screen and (max-width: 1000px) {
  header nav ul {
    display: none; /*非表示に*/
  }
} /*追加指定ここまで*/

/*メニュー１個あたりの設定*/
header nav ul a {
  display: block;
  text-decoration: none;
  text-align: center;
}

/*ヘッダー内メニュー、開閉メニュー、共通のドロップダウン設定
---------------------------------------------------------------------------*/
header nav ul ul,
.small-screen #menubar ul ul {
  animation: opa1 0.5s 0.1s both; /*0.1秒待機後、0.5秒かけてフェードイン表示*/
}

/*ヘッダー内メニューのドロップダウン
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
header nav ul ul {
  position: absolute;
  z-index: 100;
  margin-left: 1rem;
  border: 1px solid var(--primary-color); /*枠線の幅、線種、varは色の指定で冒頭のprimary-colorを読み込みます。*/
}

/*最後のメニュー以外に、下の線を入れる*/
header nav ul ul li:not(:last-child) {
  border-bottom: 1px solid var(--primary-color); /*枠線の幅、線種、varは色の指定で冒頭のprimary-colorを読み込みます。*/
}

/*メニュー１個あたりの設定*/
header nav ul ul a {
  padding: 0.3em 1em; /*上下、左右へのメニュー内の余白*/
  background: #fff; /*背景色*/
  color: #333; /*文字色*/
}

/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {
  display: none;
}
#menubar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
#menubar a {
  display: block;
  text-decoration: none;
}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {
  display: block;
}
.small-screen #menubar.display-block {
  display: block;
}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {
  display: none;
}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {
  display: none;
}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
  font-family: bootstrap-icons; /*Bootstrap Iconsを使う指示*/
  content: "\F229"; /*使いたいアイコン名（Bootstrap Icons）をここで指定*/
  margin-right: 0.4em; /*アイコンとテキストとの間に空けるスペース*/
  display: inline-block;
  transform: scale(0.8) translateY(0.1em); /*アイコンを80%にし、0.1文字分下に移動*/
  opacity: 0.7; /*色を70%だけ出す*/
}

/*開閉メニュー
---------------------------------------------------------------------------*/
/*メニューブロック共通*/
.small-screen #menubar {
  animation: animation1 0.2s both;
  position: fixed;
  overflow: auto;
  z-index: 100;
  inset: 0;
  padding: 100px var(--content-space) 50px; /*ブロック内の余白*/
  background: var(
    --primary-color
  ); /*背景色。css冒頭のprimary-colorを読み込みます。*/
  color: var(
    --primary-inverse-color
  ); /*文字色。css冒頭のprimary-inverse-colorを読み込み。*/
  line-height: 1.5; /*行間を少し狭く*/
  font-size: 1.2rem; /*文字サイズ120%*/
}

.small-screen #menubar {
  display: none;
}

/*メニュー１個あたり*/
.small-screen #menubar a {
  display: block;
  text-decoration: none;
  background: var(
    --primary-inverse-color
  ); /*背景色。css冒頭のprimary-inverse-colorを読み込み。*/
  color: #333; /*文字色*/
  margin-bottom: 0.5rem; /*下に１文字分のスペースを空ける。メニュー同士の間隔です。*/
  padding: 1rem 2rem; /*メニュー内の余白。上下に１文字分、左右に２文字分。*/
  text-align: left;
}

/*子メニュー*/
.small-screen #menubar ul ul a {
  background: var(--bg-color); /*背景色。冒頭のbg-colorを読み込みます。*/
  color: var(
    --bg-inverse-color
  ); /*文字色。冒頭のbg-inverse-colorを読み込みます。*/
  border: 1px solid var(--bg-inverse-color); /*枠線の幅、線種、varは色の指定で冒頭のbg-inverse-colorを読み込みます。*/
  margin-left: 2rem; /*左に空けるスペース*/
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
  display: none; /* デフォルトは非表示 */
  animation: opa1 0s 0.2s both;
  cursor: pointer;
  width: var(--headerH); /*幅。css冒頭のheaderHを読み込みます。*/
  height: var(--headerH); /*高さ。css冒頭のheaderHを読み込みます。*/
  position: fixed;
  z-index: 101;
  right: 0px;
  top: 0px;
}

/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham {
  background: #ff0000;
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
  display: block;
  position: absolute;
  left: 18px;
  transition: 0.3s;
  width: 35px;
  height: 2px; /*線の高さ*/
  background: #fff; /*線の色*/
  box-shadow: 1px 1px rgba(0, 0, 0, 0.3); /*背景色によってはアイコンが見えなくなるので薄く影を入れる*/
}

#menubar_hdr span:nth-of-type(1) {
  top: 24px;
}
#menubar_hdr span:nth-of-type(2) {
  top: 34px;
}
#menubar_hdr span:nth-of-type(3) {
  top: 44px;
}

/* ハンバーガーメニュー展開時 */
#menubar_hdr.ham span:nth-of-type(1) {
  transform: translateY(10px) rotate(-45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
  opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
  transform: translateY(-10px) rotate(45deg);
}

/*小さな画面での設定*/
.small-screen #menubar_hdr {
  display: flex;
}

/*main
---------------------------------------------------------------------------*/
main {
  overflow-x: clip; /*stickyを使っているセクションがあるので、hiddenじゃなくclipを使用。古いブラウザは未対応。*/
  min-width: 0; /*slide-thumbnail使用時にブラウザの横スクロールが出ないようにするため*/
}

/*トップページ以外のmain*/
body:not(.home) main {
  margin-top: var(--headerH); /*上にヘッダーの高さ分のスペースを空ける。*/
}

/*h2*/
main h2 {
  font-size: clamp(1.5rem, 1.09rem + 0.89vw, 1.6rem);
  font-weight: 600;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}
main h2 span {
  font-size: 0.8rem;
  opacity: 0.8;
  letter-spacing: 0.2em;
  text-align: center;
  margin-bottom: 1rem;
}

/*h3*/
main h3.sub_title {
  position: relative;
  display: inline-block;
  line-height: 1.4;
  margin: 0.5em 0;
  font-size: clamp(1.15rem, 1.129rem + 0.09vw, 1.2rem);
}
main h3.sub_title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.45em;
  background: #ffeba6;
  z-index: -1;
}
main h3.sub_title span {
  font-size: 1.1rem;
  padding: 0 0.2rem;
}

/*個別設定
---------------------------------------------------------------------------*/
/*index-about*/
section.index-about h2 {
  font-size: clamp(1.5rem, 1.09rem + 0.89vw, 1.8rem);
  color: var(--accent-color);
  align-items: flex-start;
  text-align: left;
}
section.index-about .page_text {
  font-size: 105%;
}

/*index-service*/
section.index-service .ttl-com_wrap {
  margin: 0 auto;
}
section.index-service .img_box2.pc {
  display: none;
}
section.index-service .img_box2.sp {
  display: block;
}
@media screen and (min-width: 1000px) {
  section.index-service .img_box2.pc {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
  }
  section.index-service .img_box2.sp {
    display: none;
  }
}
section.index-service span.border {
  display: block;
  width: 100%;
  height: 1px;
  background: #ddd;
  margin: 2rem 0;
}
section.index-service .page_block > div:last-child .border {
  display: none;
}

/*index-promise*/
section.index-promise h2 {
  font-size: clamp(1.3rem, 1.216rem + 0.35vw, 1.5rem);
  letter-spacing: -0.05em;
}
section.index-promise h2 span.big_ttl {
  font-size: clamp(1.8rem, 1.716rem + 0.35vw, 2rem);
  color: var(--primary-color);
  font-weight: 600;
}

/*index-greeting*/
section.index-greeting .profile {
  align-items: flex-end;
  justify-content: flex-end;
  column-gap: 1rem;
  margin-top: 1rem;
}
section.index-greeting .profile-img {
  max-width: 150px;
  height: auto;
}
section.index-greeting .img_box2 {
  width: clamp(10rem, 3.714rem + 26.61vw, 25rem);
  margin: 0 auto;
}
section.index-greeting .profile-text {
  line-height: 1.2;
}
section.index-greeting .profile-text p {
  margin: 0.5rem;
}
section.index-greeting .profile-text p.company-name {
  font-size: 1.2rem;
}
section.index-greeting .profile-text p.name {
  font-size: 1.3rem;
}
@media screen and (min-width: 1000px) {
  section.index-greeting .page_text2.wrap {
    flex-direction: row;
  }
}

/*index-contact*/
section.index-contact {
  margin: 5vw 0 0;
}
section.index-contact.imgBG {
  position: relative;
  overflow: hidden;
}
section.index-contact.imgBG::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(10, 25, 60, 0.45), rgba(10, 25, 60, 0.5)),
    url("../images/imgBG.jpg") center / cover no-repeat;
  z-index: -1;
}
section.index-contact.imgBG .page_block {
  padding-top: 5vw;
  color: var(--secondary-inverse-color);
  text-align: center;
}
section.index-contact h2 {
  font-size: clamp(1.5rem, 1.09rem + 0.89vw, 1.8rem);
}
section.index-contact .page_text {
  font-size: clamp(1.1rem, 1.016rem + 0.35vw, 1.3rem);
}

/*フッター
---------------------------------------------------------------------------*/
footer {
  background: var(--primary-color);
  color: var(--primary-inverse-color);
  padding: clamp(1rem, 0.162rem + 3.55vw, 3rem);
}
footer .footer-inner {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
footer .logo {
  display: flex;
  justify-content: center;
}
footer .logo img {
  max-width: clamp(15.625rem, 11.696rem + 16.63vw, 25rem);
  height: auto;
}
footer .footer-right {
  display: flex;
  flex-direction: column;
}
footer address.info {
  font-style: normal;
  text-align: left;
}
footer address.info .company-name {
  font-weight: 700;
  font-size: clamp(1.6rem, 1.223rem + 1.6vw, 2.5rem);
  margin: 0 0 2rem 0;
}
footer .footer-Copyright {
  margin-top: auto;
  font-size: 0.85rem;
  opacity: 0.7;
}
@media (min-width: 768px) {
  footer .footer-inner {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    text-align: left;
  }
  footer .logo {
    flex: 1;
  }
  footer .footer-right {
    flex: 1;
  }
  footer address.info {
    text-align: left;
  }
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {
  display: block;
}

/*ボタンの設定*/
.pagetop a {
  display: block;
  text-decoration: none;
  text-align: center;
  z-index: 99;
  animation: opa1 1s 0.4s both;
  position: fixed; /*スクロールに追従しない(固定で表示)為の設定*/
  right: 20px; /*右からの配置場所指定*/
  bottom: 50px; /*下からの配置場所指定*/
  color: #fff; /*文字色*/
  font-size: 1.5rem; /*文字サイズ*/
  background: rgba(
    0,
    0,
    0,
    0.2
  ); /*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
  width: 60px; /*幅*/
  line-height: 60px; /*高さ*/
  border-radius: 50%; /*円形にする*/
}