/* styles.css */
body {
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f8fc;
  color: #333;
      overflow-x: hidden;
}

/* ヘッダーのスタイル */
.header-container {
  display: flex;

  flex-direction: column;
}
.main-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 20px;
  background: #ffffff;
  flex-direction: column;
}
.logo {
  display: flex;
  align-items: center;
  height: 30px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.5em;
  font-weight: bold;
}
.logo img{
  width: 60px;
  padding: 5px;
}
.logo p{
  padding-top: 0px;
}


/* CTAボタンのスタイル */

.cta-button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background-color:#ae9d6b;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.cta-button i {
  margin-right: 8px; /* アイコンとテキストの間にスペースを追加 */
  font-size: 16px;
} 


.cta-buttons {
  display: flex;
  justify-content: flex-end; /* 右寄せ */
  align-items: center;
  /*gap: 15px; /* ボタン間の余白 */
  position: absolute;
  top: 0px;
  right: 0px;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  color: white;
/*  padding: 10px;*/
/*  border-radius: 5px;*/
  width: 100px; /* サイズ統一 */
  height: 58px; /* 高さ統一 */
  text-align: center;
  gap: 8px; /* アイコンとの間隔 */
  flex-direction: column;
}

.contact {
  background-color: #ae9d6b;
}

.language {
  background-color: #1b2a55;
  border: none;
  cursor: pointer;
}

/* アイコンのサイズ調整 */
.cta i {
  font-size: 16px;
}

/* Language Dropdown メニュー */
.language-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
/*  top: 75%; /* ボタンの真下に配置 */
  left: 50%;
  transform: translateX(-50%); /* ボタンの中央に揃える */
  background-color: white;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  width: 85px;
  text-align: center;
  z-index: 10;
}

.dropdown-content a {
  display: block;
  padding: 10px;
  color: black;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #f0f0f0;
}


/* JavaScriptで制御するクラス */
.show {
  display: block;
}

/* ナビゲーションメニュー */
.nav-menu {
   color: #ffffff;
  background-color: rgba(54, 106, 152, 0.8);
}
  .nav-menu ul {
  list-style: none;
  padding: 16px;
  display: flex;
  gap: 20px;
 
/*  background: rgba(0, 0, 0, 0.5); /* 背景を半透明に */
/*  padding: 15px 30px;
  border-radius: 5px;*/
  justify-content: center;
}

.nav-menu ul li {
  display: inline;
}

.nav-menu ul li a {
  text-decoration: none;
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
  transition: 0.3s;
}

.nav-menu ul li a:hover {
  color: #ae9d6b; /* ホバー時の色変更 */
}
/* ハンバーガーメニュー */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}
.hamburger span {
  height: 3px;
  width: 25px;
  background: #333;
  margin: 4px 0;
  transition: 0.3s;
}
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(10px, -10px);
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
  header {
      flex-direction: column;
      align-items: flex-start;
      font-size: 17px;
  }
  .cta-buttons {
    display: none;
  }
  .nav .nav-menu {
    display: none;
  }
  .header-container {
       flex-direction: row;
       align-items: center;
       justify-content: space-evenly
  }
  .nav-menu ul{
    display:none;
        padding: 20px;
        text-align: center;
     background-color: rgba(54, 106, 152, 1);
  }

   .hamburger {
    display: flex;
    background-color: white;
  }
  .nav-list {
    width: 0;
    flex-direction: column;
    position: absolute;
    top: 58px;
    right: 0;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);

    transition: .6s;
  }
  .nav-list.active {
    display: flex;
    width: 100%;
    z-index: 1;
  }
}

button:hover {
  background-color: #005bb5;
}

section {
  padding: 60px 20px;
  text-align: center;
}

h2 {
  color: #004b8d;
  font-size: 28px;
  margin-bottom: 20px;
}
/* concept */
/* セクション全体の見出し */
h2 {
  font-size: 28px;
  text-align: center;
  color: #005bb5;
  margin-bottom: 10px;
}

.section-subtitle {
  display:flex;
  flex-direction: column;
  text-align: center;
  font-size: 18px;
  color: #1b2a55;
  margin-bottom: 53px;
}
/* Heroセクション */

#hero {
  position: relative;
  width: 100%;
  min-height: 27vh; /* 必要に応じて調整 */
  overflow: hidden;
  text-align: center;
/*  padding: 80px 20px;*/

}
  
  #hero h1 {
    font-size: 32px;
    margin-bottom: 20px;
  }
/* 画像の余白を削除して横幅いっぱいに表示 */

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
}

/* Heroセクションのテキストエリア */
.hero-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  background: rgba(0, 0, 0, 0.5); /* 半透明の背景で視認性向上 */
  padding: 20px;
  border-radius: 10px;
}

/* 見出しのデザイン */
.hero-overlay h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

/* 説明文 */
.hero-overlay p {
  font-size: 18px;
  margin-bottom: 20px;
}

/* CTAボタン */
.hero-overlay button {
  background: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  margin: 5px;
}

/* メインビジュアルの設定 */
.main-visual {
  background-image: url(images/hero-it.jpg); /* 画像を指定 */
  background-size: cover;
  background-position: center center;
/*  height: 60vh; /* 高さは画面の60% */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  #hero {
    background-color: white;
  }
  #hero h1 {
    font-size: 1.2em;
  }
  .hero-overlay p {
      font-size: .85em;
  }
  .hero-image {
    height:auto;
    max-width: 564px;
  }
  .hero-overlay {
/*    top: 39%;*/
    padding: 10px;
    width: 84%;
  }

.section-subtitle {
      font-size: 1em;
}
}
/* コンセプトレイアウト */
#concept {
  width: 100%;
  height: 20vh;
  padding: 0;
  margin-top: 20px;
}
.concept-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: -180px;
}

.concept-item {
  background: white;
  padding: 20px;
  width: calc(50% - 20px);
  max-width: 210px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
  z-index: 0;
}
.concept-item p{
 text-align: left;
}
/* アイコン画像のスタイル */
.concept-item img {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
  #concept {
    height: auto;
margin-top: -17px;
  }
  .concept-container{
    margin: 0 auto;
    gap: 10px;
  }
  
  .concept-item {
    width: 168px;
  }
  .concept-item p{
    font-size: 0.8em;
  }
}
/* ソリューション概要レイアウト */
.solutions-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
}

.solution-item {
  background: white;
  padding: 20px;
  width: calc(50% - 20px);
  max-width: 400px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* 画像のスタイル */

.solution-title {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  margin-top: -55px;
}
.solution-num {
  width: 18%;
  font-family:'Times New Roman', Times, serif;
  font-size: 4rem;
  color: #ae9d6b;
}
.solution-title h3 {
  position: relative;
  padding: 5px 5px 5px 15px;
  background: #1b2a55;
  font-size: 20px;
  color: white;
  width: 80%;
/*  margin-left: -33px;
  line-height: 1.3;*/
  z-index: 0;
}

.solution-title h3:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index: 1;
}
.solution-title h3:after {
  position: absolute;
  content: '';
  right: -3px;
  top: -7px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px transparent;
  border-bottom: solid 79px white;
  z-index: 1;
}
.solution-detail p {
  color: #333;
  font-size: 14px;
  width: 60%;
  margin: 16px;
  text-align: left;
}
.solution-detail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}
.solution-detail img{
  width: 27%;
  margin: 10px;
  position: relative;
/*  width: 100px;*/
  height: 100px;
  border-radius: 100%;
  overflow: hidden;
  z-index: 0;
}
/* スマホ対応: 画面幅が小さい場合は1列表示 */
@media (max-width: 768px) {
  #solutions{
    margin-top: 0px;
  }
  .solutions .section-subtitle p {
    text-align: center;
  }
  .solution-num{
    font-size: 3.5rem;
  }
  .solution-item {
    width: 100%;
  }
  .solution-detail img{
    height: 80px;
    width: 80px;
  }
}

/**/
#solutions ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 800px;
}

#solutions ul li {
  background: #ffffff;
  padding: 15px;
  margin: 10px 0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: left;
}

#solutions ul li strong {
  color: #004b8d;
  font-size: 18px;
}
#case-studies {
  background-color: #f0f8ff;
  padding: 40px 20px;
}

.case-studies-container{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: flex-start;
  gap: 30px;
}
/* case study セクション*/
.case-study {
  display: flex;
  background: #ffffff;
  border-left: 5px solid #0073e6;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  flex-direction: row;
  align-items: center;
}
.case-study-description {
  display:flex;
  flex-direction: column;
  align-items: stretch;
  padding: 18px;
}

.case-study h3 {
  color: #005bb5;
  margin-bottom: 10px;
}
.case-study img {
  width: 30%;
  border-radius: 7px;
}
.case-study p {
  color: #333;
  line-height: 1.6;
  text-align: left;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
  .case-studies-container{
    flex-direction: column;
    margin: 0px auto;

  }
  .case-study {
    flex-direction: column;
  }
  .case-study img {
    width: 100%;
  }
}
/* 最新ニュース・ブログのスタイル */
.news-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.news-item {
  background: white;
  width: calc(33.333% - 20px);
  min-width: 280px;
  max-width: 400px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.news-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.news-content {
  padding: 15px;
}

/* 日付・カテゴリーのスタイル */
.news-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.news-date {
  font-weight: bold;
}

.news-category {
  background: #ae9d6b;
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.news-content h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.news-content p {
  font-size: 14px;
  color: #666;
}

.read-more {
  display: inline-block;
  margin-top: 10px;
  color: #1b2a55;
  text-decoration: none;
  font-weight: bold;
}

.read-more:hover {
  text-decoration: underline;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
  .news-content h3 {
    font-size: 15px;
  }
}
/* CTAセクションのスタイル */
#cta-section {
  background: #f5f7fa;
  padding: 40px 20px;
  text-align: center;
  margin: 0 auto;
}

.recruit-cta-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  /*max-width: 900px;*/
  margin: 0 auto;
  width: 65%;
}

.recruit-cta-box {
  display: flex;
  background: #1b2a55;
  color: white;
  padding: 20px;
  /* border-radius: 8px; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
  width: 100%;
  max-width: 433px;
  text-align: center;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;

}
.recruit-cta-box__thumb img{
	max-width: none;
  width: 100%;
  height: 100%;
}
.recruit-cta-box__thumb {
  width: 100%;
}
.recruit-cta-box 
.recruit-cta-box h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.recruit-cta-box p {
  font-size: 14px;
  color: white;
  margin-bottom: 15px;
  text-align: left;
  padding: 10px;
 
}

.recruit-cta-button a {
  background: white;
  color: #1b1b1b;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  max-width: 260px;
  padding: 10px 25px;
  transition: 0.3s ease-in-out;
  font-weight: bold;
  text-decoration: solid;
}

.recruit-cta-button a:after {
  position: absolute;
  top: 50%;
  right: 0px;
  border-radius: 1px;
  transition: 0.2s ease-in-out;
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  transform: translateY(-50%);
}

.recruit-cta-button a:hover {
  background: white;
  color: #1b1b1b;
}
/* お問い合わせのメールリンク */
.cta-box a {
  color: white;
  text-decoration: none;
}

.cta-box a:hover {
  text-decoration: underline;
}
/* CTAボタンのスタイル */

.recruit-cta-button {
  display: inline-flex;
  align-items: center;
  padding: 5px 20px;
  background-color:white;
  color:#1b2a55;
  text-decoration: none;
  border-radius: 5px;
}

.recruit-cta-button i {
  margin-right: 8px; /* アイコンとテキストの間にスペースを追加 */
  font-size: 16px;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
  .recruit-cta-container{
    flex-direction: column;
    margin: 0px auto;
    width: 100%;
  }
  .recruit-cta-box__thumb {
    width: 100%;
  }
}
#call-home {
  background-color: #f0f8ff;
  padding: 40px 20px;
}

.call-home-cta-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0 auto;
  width: 100%;
  justify-content: center;
  }

.call-phone-type{
  padding: 30px;
}
.call-type h3{
    background: #1b2a55;/*背景色*/
    padding: 0.5em;/*文字まわり（上下左右）の余白*/
    border-radius: 50px;
    color: white;
    width: 300px;
    padding: 15px;
}
.call-type-cta{
  padding: 22px;
  font-size: 1.2em;
}
.call-phone-number {
  font-size: 2.5em;
  color: #1b2a55;
  padding: 15px;
}
.call-phone-number p:before{
  position: absolute;
  content: "\f095";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin: 7px -50px;
}
.call-mail-type{
  padding: 30px;
  border-left: 1px solid #1b1c20;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
  #call-home .section-subtitle {
    font-size: 15px;
    margin-bottom: 5px;
  }
  .call-home-cta-container{
    flex-direction: column;
    align-items: center;
    margin: 0px auto;
    width: 70%;
  }
  .call-phone-number {
    font-size: 2em;
  }
  .call-mail-type {
    border-left: none;
  }
}

footer a {
    color: #ffffff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

footer {
  background-color: #1b2a55;
  color: #ffffff;
  text-align: center;
  padding: 15px 0;
  margin-top: 20px;
}
/* トップに戻るボタン */
/* ボタン全体 */
.back-to-top {
width: 92px;
height: 92px;
border-radius: 29px;
position: fixed;
right: 10px;
bottom: 10px;
    background-color: #ae9d6b;
/*background: #e25407;*/
opacity: 0.85;
box-shadow: 2px 5px 5px 0px rgba(0, 0, 0, 0.35);
}

/* Font Awesome */
.back-to-top::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f0d8';
font-size: 50px;
color: #ffffff;
position: absolute;
top: 37%;
left: 50%;
translate: -50%;

}

.back-to-top::after {
content: 'PAGE TOP';
font-size: 14px;
    font-weight: bold;
    text-decoration: none;
color: #fff;
position: absolute;
margin: auto;
text-align: center;
width: 100%;
top: 25%;
left: 50%;
translate: -50%;

}

/* モバイル対応 */
@media (max-width: 768px) {
  .back-to-top {
 /*   right: 59px;*/
    right: 13px;
    bottom: 26px;
  }
}