@charset "utf-8";

/* 基本設定 */
@import url(//fonts.googleapis.com/css?family=PT+Sans:400,700,&subset=latin,latin-ext);
@import url(//fonts.googleapis.com/css?family=Roboto:300,400,500,700|Google+Sans:400,500,700);

:root {   /* CSS変数 */
  --main-color: #22449E;
  --back-color: color-mix(in srgb, var(--main-color) 1%, white);
  --dark-color: color-mix(in srgb, var(--main-color) 50%, black);
  --text-color: #243245;
  --muted-color: #66758a;
  --line-color: rgba(16, 32, 58, 0.12);

  --body-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --heading-family: "Manrope", "Noto Sans JP", sans-serif;
  --section-margin-LR: 10vw;    /* セクション内左右マージン */
  --mobile-margin-LR: 4vw;
}

body {
  background-color: var(--back-color); 
  font-family: var(--body-family) !important; 
  font-size: 15px;  
  padding: 0;
  margin: 0;
  line-height: 1.8;
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility; 
  scroll-behavior: smooth; 
  min-height: 100vh;
  max-width: 100%;
}

a { 
  color: inherit;
  outline: none; 
}
a:focus { outline: none; }

h2 {
  font-family: var(--heading-family);
  font-size: clamp(1.8rem, 2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
  color: var(--dark-color);
}

.section {
  padding: 88px var(--section-margin-LR) 100px;
  max-width: calc(100vw - var(--section-margin-LR)*2);
}

.section > p {
  max-width: 760px;
  margin-top: 0;
  margin-bottom: 2.25rem;
  color: var(--muted-color);
  font-size: 1rem;
}

@media only screen and (max-width: 960px) {   /* タブレット以下用 */
  body { font-size: 14px; } 

  .section { 
    padding: 64px var(--mobile-margin-LR) 76px;  
    max-width: calc(100vw - var(--mobile-margin-LR)*2);
  }
}


/* 上部ヘッダバー */
.app-bar {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 60px;
  background-color: color-mix(in srgb, var(--main-color) 30%, white);
  box-shadow: 0 2px 4px -1px rgba(14,30,56,.2),0 4px 5px 0 rgba(14,30,56,.14),0 1px 10px 0 rgba(14,30,56,.12);
  z-index: 1000;
  padding: 4px var(--section-margin-LR);
  box-sizing: border-box;
}

@media only screen and (max-width: 960px) {   /* タブレット以下用 */
  .app-bar { padding: 4px var(--mobile-margin-LR); }
}

.app-bar a {
  color: var(--dark-color);
  text-decoration: none;
  margin-right: 10px;
}

.app-bar .logo {
  margin: 8px 10px 0 12px;
}

.app-bar .title {
  font-family: var(--heading-family);
  font-size: 1.4rem;
  margin-right: auto;
  letter-spacing: 0.01rem;
  font-weight: 600;
}

.app-bar .item {
  font-size: 0.82rem;
  margin-left: 20px;
}

.app-bar .btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  margin: 0 20px;
}

/* 上部ヘッダバー: 言語切り替えメニュー */
.app-bar #lang_menu {
  position: fixed;
  top: 58px;
  right: var(--section-margin-LR);
  min-width: 100px;
  background-color: var(--back-color);
  opacity: 0.97;
  box-shadow: 0 2px 4px -1px rgba(14,30,56,.2),0 4px 5px 0 rgba(14,30,56,.14),0 1px 10px 0 rgba(14,30,56,.12);
  border-radius: 16px;
  overflow: hidden;
}

.app-bar #lang_menu a {
  display: block;
  padding: 14px 16px;
  color: var(--dark-color);
  text-decoration: none;
  margin: 0;
}

/* 上部ヘッダバー: ハンバーガーメニュー */
.app-bar #hamburger_btn {
  margin-top: 8px;
  padding-bottom: 4px;
  width: 24px;
}

.app-bar #hamburger_btn span {
  display: block;
  width: 24px;
  height: 3px;
  background-color: var(--dark-color);
  margin-bottom: 6px;
  border-radius: 4px;
}

.app-bar #hamburger_menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 180px;
  height: 100vh;
  background-color: var(--back-color);
  opacity: 0.97;
  box-shadow: 0 2px 4px -1px rgba(14,30,56,.2),0 4px 5px 0 rgba(14,30,56,.14),0 1px 10px 0 rgba(14,30,56,.12);
  backdrop-filter: blur(16px);
  padding-top: 60px;
}

.app-bar #hamburger_menu a {
  display: block;
  padding: 16px;
  color: var(--dark-color);
  text-decoration: none;
  margin: 0;
  font-size: 15px;
}

.app-bar #hamburger_menu hr {
  margin: 8px 16px;
  color: var(--main-color);
  opacity: 0.3;
}


/* トップイメージ */
#top-img {
  background: linear-gradient(to right, rgba(14,30,56,0.2) 20%, rgba(14,30,56,0) 60%), 
              url('/img/top-header2.jpg') no-repeat center center;
  background-size: cover;
  margin-top: 60px;
  width: 100vw;
  height: 550px;
}

#top-title {
  position: relative;
  top: 130px;
  left: var(--section-margin-LR);
  color: #fff;
  max-width: calc(100vw - var(--section-margin-LR)*2);
}

@media only screen and (max-width: 960px) {   /* タブレット以下用 */
  #top-img {
    background-position: 65% 50%;
  }
  #top-title { 
    left: var(--mobile-margin-LR); 
    max-width: calc(100vw - var(--mobile-margin-LR)*2);
  }
}

#top-title h1 {
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  margin-bottom: 0.4rem;
  text-shadow: 2px 2px 4px color-mix(in srgb, var(--dark-color) 50%, transparent);
}

#top-title h4 {
  font-size: 1.25rem;
  margin: 0.3rem 0;
  text-shadow: 2px 2px 4px color-mix(in srgb, var(--dark-color) 50%, transparent);
}

#top-title p {
  font-size: 1.01rem;
  margin: 0.3rem 0;
  text-shadow: 2px 2px 4px color-mix(in srgb, var(--dark-color) 70%, transparent);
}

/* トップイメージ: 会社紹介ダウンロードボタン */
#top-img .cta-wrap {
  margin-top: 56px;
}

#top-img .cta-btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: color-mix(in srgb, var(--main-color) 15%, white);
  text-decoration: none;
  text-shadow: 2px 2px 4px rgba(14,30,56, 0.5);

  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--main-color) 15%, white);

  background: rgba(14,30,56,0.55);
  backdrop-filter: blur(6px);

  transition: all 0.3s ease;
}

#top-img .cta-btn:hover {
  background: color-mix(in srgb, var(--main-color) 15%, white);
  color: #0e1e38;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}



/* サービス紹介 */
#service .card {
  margin: 16px 0 22px 0;
  width: 100%;
  height: 320px; /* 固定高さ */
  background: #fff;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25), 0 4px 10px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#service .card.en {
  height: 370px; 
}

#service .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px rgba(0,0,0,0.3), 0 8px 20px rgba(0,0,0,0.2);
}

#service .card-image {
  position: relative;
  height: 55%;
  overflow: hidden;
}

#service .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

#service .card:hover .card-image img {
  transform: scale(1.1);
}

#service .card-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  font-family: var(--heading-family);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}

#service .card-content {
  height: 45%;
  padding: 10px;
  color: #000;
  box-sizing: border-box;
}

#service .card-content ul {
  margin-left: -10px;
  font-size: .9rem;
  line-height: 1.6rem;
  color: var(--text-color);
}

#service .card-content ul.en {
  font-size: .75rem;
}


/* ビジネス実績 */
#business-records {
  background: color-mix(in srgb, var(--main-color) 10%, white);
}

#business-records .table-container {
  height: min(70vh, 720px);
  overflow-y: auto;    /* 縦スクロール */
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(16, 32, 58, 0.08);
  border: 1px solid rgba(255,255,255,0.8);
}

#business-records table {
  width: 100%;
  border-collapse: collapse;
}

#business-records .year-row th {
  position: sticky;
  top: 0;              /* 固定位置 */
  background-color: color-mix(in srgb, black 10%, white);
  color: var(--dark-color);
  font-family: var(--heading-family);
  font-size: 1rem;
  border-bottom: 1px solid var(--line-color);
  padding: 12px 24px;
  text-align: left;
  z-index: 1;
}

#business-records td {
  border-bottom: 1px solid var(--line-color);
  padding: 16px 24px;
  background-color: #fff;
  line-height: 1.8;
  font-size: .85rem;
  color: var(--muted-color);
}

#business-records td span {
  display: inline-block;
  font-size: .95rem;
  font-weight: 600;
  color: var(--dark-color);
}


/* 会社情報 */
#about table {
  border-collapse: collapse;
  align-self: flex-start;
  margin: 20px 0 42px 0;
  width: 100%;
  overflow: hidden;
}

#about table tr {
  border-bottom: 1px solid var(--line-color);
}

#about table th {
  width: 6rem;
  padding: 1.2rem 1rem;
  letter-spacing: .15rem;
  color: var(--muted-color);
  text-align: left;
  vertical-align: top;
}

#about table td {
  padding: 1.2rem 1rem;
  color: var(--text-color);
}

#top-message {
  padding-left: 40px;
}

#top-message h3 {
  margin-bottom: 22px;
  font-family: var(--heading-family);
  font-size: 1.2rem;
  color: var(--dark-color);
}

#top-message img {
  display: block;
  padding: 0;
  margin: 0 auto 12px;
  border-radius: 18px;
}

#top-message .name {
  font-size: 0.9rem; 
  font-weight: 700;
  color: var(--dark-color);
  text-align: center;
}

#biography {
  font-size: 0.7rem;  
  line-height: 1rem;
  line-height: 1.8;
  margin: 18px 0 0;
  color: var(--muted-color);
}

#message {
  font-size: 0.9rem;  
  line-height: 2;
  margin-top: 0;
  color: var(--text-color);
}


/* 会社情報: 会社紹介ダウンロードボタン */
#about .company-info {
  margin-bottom: 35px;
}

#about .cta-wrap {
  margin-top: 30px;
}

#about .cta-btn {
  display: inline-block;
  padding: 10px 28px;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: color-mix(in srgb, var(--main-color) 80%, black);
  text-decoration: none;

  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--main-color) 80%, black);

  transition: all 0.3s ease;
}

#about .cta-btn:hover {
  background: color-mix(in srgb, var(--main-color) 80%, black);
  color: color-mix(in srgb, var(--main-color) 10%, white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}


/* お問い合わせ */
#contact {
  background: color-mix(in srgb, var(--main-color) 10%, white);
}

#contact form {
  width: 100%;
  margin-top: 30px;

  
}

#contact .field {
  position: relative;
  margin-bottom: 28px;
}

#contact .field input,
#contact .field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--text-color);
  background: transparent;
  font-size: 16px;
  color: var(--text-color);
  padding: 8px 4px;
  outline: none;
}

#contact .field label {
  position: absolute;
  left: 4px;
  top: 8px;
  font-size: 16px;
  color: var(--text-color);
  pointer-events: none;
  transition: 0.2s ease all;
}

#contact .field input:focus + label,
#contact .field input:not(:placeholder-shown) + label,
#contact .field textarea:focus + label,
#contact .field textarea:not(:placeholder-shown) + label {  /* フォーカス or 入力済みでラベル上に */
  top: -10px;
  font-size: 12px;
  color: var(--main-color);
}

#contact .field input:focus,
#contact .field textarea:focus {       /* 下線アニメーション */
  border-bottom: 2.5px solid color-mix(in srgb, var(--main-color) 80%, white);
}

#contact textarea {
  resize: vertical;
}

#contact .required::after {
  content: " *";
  color: #d32f2f;
}

#contact button {
  margin-top: 26px;
  display: inline-block;
  padding: 10px 38px;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  background: var(--back-color);
  color: color-mix(in srgb, var(--main-color) 90%, black);
  text-decoration: none;

  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--main-color) 90%, black);

  transition: all 0.3s ease;
}

#contact button:hover {
  background: color-mix(in srgb, var(--main-color) 90%, black);
  color: color-mix(in srgb, var(--main-color) 10%, white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}


/* フッタ― */
#footer {
  background: linear-gradient(180deg, #132440, #0b1527);
  color: var(--back-color);
  padding-top: 54px;
  padding-bottom: 56px;
}

#footer .lang-link {
  margin-top: 40px;
}

#footer .lang-link a {
  color: color-mix(in srgb, var(--main-color) 50%, white);
}