/* style.css */

/*共通*/
body {
    font-family: 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f8fb;
    color: #333;
  }
  
 /* コンテナ */
  .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
  } 
  
/*スマホ*/
@media  screen and (max-width:800px) {

  /*hmburger*/
 #hamburger{
    position: fixed;
    width: 40px;
    height: 30px;
    top: 16px;
    right: 30px;
    z-index: 1000;
}
.line_item{
    position: absolute;
    background: #fff;
    display: block;
    width: 40px;
    height: 2px;
    transition: 0.3s;
}
#l_1{
    top: 0;
}
#l_2{
    top: 14px;
}
#l_3{
    bottom: 0;
}
/*ハンバーガーマークの×表示*/
.l1{
    top: 0;
    transform: rotate(-45deg);
    margin-top: 14px;
}
.l2{
    opacity: 0;
}
.l3{
    bottom: 0;
    transform: rotate(45deg);
    margin-bottom: 14px;
}

  /*header*/
  header {
    display: flex;
    /*justify-content: space-between; /* 左右に分ける */
    align-items: center; /* 縦の位置を中央に揃える */
    padding: 1rem 2rem; /* 上下左右に余白 */
    background-color: #4dc3ff; /* 好きな色に変更してOK */
  }
  
  .nav_top {
    font-size: 2rem;
    color: white; /* ロゴの文字色 */
    text-decoration: none;
  }
  #h_top a:hover{
    color: rgb(84, 6, 240);
  }
  
  header nav ul {
    display: flex; /* 横並びにする */
    list-style: none; /* ・を消す */
    margin: 0;
    padding: 0;
  }
  
  header nav ul li {
    margin-left: 2rem; /* リスト同士の間隔 */
  }
  
  header nav ul li a {
    color: white; /* リンクの色 */
    text-decoration: none; /* 下線を消す */
    font-weight: bold;
  }

  /*******************/
  #h_bottom{
    display: flex;
    justify-content: flex-end;
  }

  /* navi */
  nav{
    position:fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background:  rgba(65,74,82,0.7);
    opacity: 0;
    /* visibility: collapse; */
    visibility: hidden;
    transition: 0.3s;
  }
  nav ul{
    width: 84%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
  }
  nav li{
    display: block;
    background: #fff;
    border-radius: 20px;
    margin: 2rem 0;
    width: 100%;
    text-align: center;
    padding: 0.5rem 0;
    transition: 0.3s;
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
  }
  .nav_item{
    display: block;
    padding: 0 1rem;
    color: #1504ff;
  }
  .in{
    visibility: visible;
    opacity: 1;
  }

  /**footer**/
  footer {
    background-color: #4dc3ff;
    color: white;
    padding: 2rem 2rem;
  }
  .footer_top {
    color: white; /* ロゴの文字色 */
    text-decoration: none;
  }
  #f_top a:hover{
    color: rgb(84, 6, 240);
  }
  .footer_nav_area ul{
    list-style: none; /* ・を消す */
    margin: 2rem 0;
  }
  .footer_nav_area li{
    padding-right: 2rem;
    font-size: 1rem;
  }
  .footer_nav_area a{
    color: #fff;
    transition: 0.3s;
    text-decoration: none;
  }
  .footer_nav_area a:hover{
    color: rgb(84, 6, 240);
  }
}

/**PC**/
@media  screen and (min-width:600px) {
    /*header*/
  header {
    display: flex;
    justify-content: space-between; /* 左右に分ける */
    align-items: center; /* 縦の位置を中央に揃える */
    padding: 1rem 2rem; /* 上下左右に余白 */
    background-color: #4dc3ff; /* 好きな色に変更してOK */
  }
  
  .nav_top {
    font-size: 2rem;
    color: white; /* ロゴの文字色 */
    text-decoration: none;
  }
  #h_top a:hover{
    color: rgb(84, 6, 240);
  }
  
  header nav ul {
    display: flex; /* 横並びにする */
    list-style: none; /* ・を消す */
    margin: 0;
    padding: 0;
  }
  
  header nav ul li {
    margin-left: 2rem; /* リスト同士の間隔 */
  }
  
  header nav ul li a {
    color: white; /* リンクの色 */
    text-decoration: none; /* 下線を消す */
    font-weight: bold;
  }
  #main_nav a:hover{
    color: rgb(84, 6, 240);
  }

  /**footer**/
  footer {
    background-color: #4dc3ff;
    color: white;
    padding: 2rem 2rem;
  }
  .footer_top {
    color: white; /* ロゴの文字色 */
    text-decoration: none;
  }
  #f_top a:hover{
    color: rgb(84, 6, 240);
  }
  .footer_nav_area ul{
    display: flex;
    list-style: none; /* ・を消す */
    margin: 2rem 0;
  }
  .footer_nav_area li{
    padding-right: 2rem;
    font-size: 1.5rem;
  }
  .footer_nav_area a{
    color: #fff;
    transition: 0.3s;
    text-decoration: none;
  }
  .footer_nav_area a:hover{
    color: rgb(84, 6, 240);
  }
}


  /*****PC**********
  **********************************************/
@media  screen and (min-width:600px) {

 /******************************************************
  TOP*/
.top-img {
    width: 100%;  /* 画像をコンテナに合わせてサイズ調整 */
    height: 100%;  /* 高さを指定して画像を揃える */
    object-fit: cover;  /* 画像が切れずに収まるようにする */
    border-radius: 8px;  /* 画像の角も丸く */
}


  /******************************************************
  profile*/
  #about {
    padding: 1px 0 40px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    padding: 2rem;
  }

  .profile-container {
    display: flex;
    align-items: flex-start;  /* 画像と名前、リストの縦の整列 */
    gap: 80px;  /* 画像とテキスト、リスト間のスペースを調整 */
  }

  .profile-img {
    border-radius: 50%;
    width: 300px;  /* 必要に応じてサイズ調整 */
    height: 300px; /* 幅と高さが同じにすることで丸く表示される */
    object-fit: cover; /* 画像が切れずに収まるようにする */
    margin-top: 80px;  /* 画像を少し下にずらす */
    margin-left: 30px; /*画面を左にずらす*/
  }

  .profile-info {
    display: flex;
    flex-direction: column;  /* 名前と詳細リストを縦に並べる */
    gap: 10px;  /* 名前とリストの間にスペースを追加 */
  }

  .profile-name {
    font-size: 40px; /* 必要に応じて調整 */
    font-weight: bold;
    color: #333; /* テキストの色 */
  }

  .profile-details {
    list-style-type: none; /* デフォルトのリストの丸印を非表示にする */
    padding: 0; /* リストの余白をなくす */
    font-size: 16px;
    color: #555;
  }

  .profile-details li {
    margin-bottom: 8px; /* 各項目の間にスペースを追加 */
    display: flex;
    justify-content: space-between; /* 左右に分ける */
    padding: 4px 0;
  }

  .profile-details .rating{
    text-align: right;
    white-space: nowrap;
  }
  
  section {
    padding: 2rem;
    max-width: 800px;
    margin: auto;
  }
  
  h2 {
    border-bottom: 2px solid #4dc3ff;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
  }

/***********************************
history*/
#history{
    padding: 1px 0 40px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    padding: 2rem;
  }
.history-img {
    width: 100%;  /* 画像をコンテナに合わせてサイズ調整 */
    height: 100%;  /* 高さを指定して画像を揃える */
    object-fit: cover;  /* 画像が切れずに収まるようにする */
    border-radius: 8px;  /* 画像の角も丸く */
}

.history_item {
    margin: 60px auto 10px auto;            /* 上下に10pxの余白、左右は自動で中央寄せ */
    font-size: 18px;
    color: #333;
    background-color: #fff;       /* 背景を白に設定 */
    width: fit-content;           /* 内容に合わせた幅（必要に応じて固定幅に変更可） */
    padding: 20px;                /* 内側の余白 */
    text-align: center;          /* テキスト中央寄せ（必要に応じて） */
    border-radius: 8px;          /* 角を少し丸くする（任意） */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* 軽い影を追加（任意） */
    transition: all 0.3s ease;   /* ホバー時のアニメーションを滑らかに */
}
.history_item:hover {
    transform: translateY(-5px);  /* ホバー時に少し浮き上がるエフェクト */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);  /* ホバー時の影の強化 */
}
  
/***********************************
works*/
  #works {
    padding: 1px 0 40px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #f4f4f4;  /* 背景色の追加 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    padding: 2rem;
}

.works-list {
    display: flex;
    justify-content: space-around;  /* 作品を横並びに、間隔を均等に */
    gap: 20px;  /* 作品間の間隔 */
}

.work-item {
    text-align: center;
    max-width: 350px;  /* 作品の最大幅 */
    border: 1px solid #ddd;  /* 枠線を追加 */
    border-radius: 8px;  /* 角を丸くする */
    padding: 20px;
    background-color: white;  /* 背景色を白に設定 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* 軽い影をつけて立体感を演出 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;  /* ホバー時のエフェクト */
}

.work-item img {
    width: 100%;  /* 画像をコンテナに合わせてサイズ調整 */
    height: 200px;  /* 高さを指定して画像を揃える */
    object-fit: cover;  /* 画像が切れずに収まるようにする */
    border-radius: 8px;  /* 画像の角も丸く */
}

.work-item p {
    margin-top: 10px;
    font-size: 18px;
    color: #333;  /* テキストの色 */
}

.work-item:hover {
    transform: translateY(-5px);  /* ホバー時に少し浮き上がるエフェクト */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);  /* ホバー時の影の強化 */
}

/********************************************************
vision*/
#vision {
    padding: 1px 0 40px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    padding: 2rem;
  }
.vision-img {
    width: 100%;  /* 画像をコンテナに合わせてサイズ調整 */
    height: 100%;  /* 高さを指定して画像を揃える */
    object-fit: cover;  /* 画像が切れずに収まるようにする */
}

/********************************************************
contact*/
#contact {
    padding: 1px 0 40px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    padding: 2rem;
  }
  .contact-img {
    width: 100%;  /* 画像をコンテナに合わせてサイズ調整 */
    height: 100%;  /* 高さを指定して画像を揃える */
    object-fit: cover;  /* 画像が切れずに収まるようにする */
    border-radius: 8px;  /* 画像の角も丸く */
}
.form_inner {
  text-align: center;
  margin: 1rem 0 2rem;
  font-size: 1.2rem;
}
/* お問い合わせメール表示用 */
.contact-mail {
  text-align: center;
  margin: 1rem 0 2rem;
  font-size: 1.2rem;
}
.contact-mail a {
  color: #1504ff;
  text-decoration: underline;
  word-break: break-all; /* 長いアドレスでも折り返す */
}
   
}

/* === 共通のコンテンツ幅をまとめて管理 === */
:root{
  --content-width: 1000px; /* ← ここを 1100 / 1280 / 1440 など好みに */
  --gutter: 24px;          /* 画面端の余白 */
}



/* PC時のセクション幅（既存の max-width:800px を上書き） */
@media screen and (min-width: 600px){
  section{
    max-width: var(--content-width);
  }
}



/**********************下層ページ**********************************************/
/****************************************************************************/

/* work1 CSS */
#work1 {
  padding: 60px 20px;
  background-color: #f4f8fb;
}

.report-preview img {
  width: 200px;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #008080;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

/* work2 css */
  
  .project_top {
    padding: 20px 0 20px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #4dc3ff; 
    /* margin-bottom: 40px;  下にスペースを追加 */
    /* margin-top: 40px; */
    color: #fff;
    text-align: center;
  }
  .project0 {
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    text-align: center;
  }
  .project1 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 2rem;
  }
  .project2 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 2rem;
  }
  .project3 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 2rem;
  }
  .project4 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 2rem;
  }
  .project5 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 2rem;
    
  }
  .project6 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 2rem;
  }
  .project7 {
    background-color: #f4f4f4;
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    text-align: center;
    padding: 2rem;
  }

  /* workhistory css */
  
  .workhistory_top {
    padding: 20px 0 20px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #4dc3ff; 
    /* margin-bottom: 40px;  下にスペースを追加 */
    /* margin-top: 40px; */
    color: #fff;
    text-align: center;
  }
  .workhistory0 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 20px;
  }
  .workhistory1 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 2rem;
  }
  .workhistory2 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 2rem;
  }
  .workhistory3 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 2rem;
  }
  .workhistory4 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 2rem;
  }

  
/* profile css */
  
  .profile_top {
    padding: 20px 0 20px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #4dc3ff; 
    /*margin-bottom: 40px;  下にスペースを追加 */
    /* margin-top: 40px; */
    color: #fff;
    text-align: center;
    margin-bottom: 40px;
  }

  .profile-area img{
    width: clamp(160px, 80%, 320px); /* 最小160px、標準50%、最大320px */
    height: auto;  /* 高さを指定して画像を揃える */
    display: block;                  /* margin: auto を効かせる */
    margin: 0 ;                  /* 中央寄せ */
    object-fit: contain;  /* 画像が切れずに収まるようにする */
    border-radius: 8px;  /* 画像の角も丸く */

  } 

  .profile0 {
    margin: 30px auto;
    padding: 2rem;
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
  }

  .profile1 {
    display: flex;
    flex-wrap: wrap;         /* 小さい画面で折り返し */
    align-items: flex-start;
    gap: 20px;
    margin: 30px auto;
    padding: 2rem;
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
  }

  .profile1 {
  display: flex;
  justify-content: center;   /* 親の中央揃え */
  gap: 40px;                 /* 画像の間隔 */
  flex-wrap: wrap;           /* 画面が小さいときは折り返す */
  }

  .profile1 img {
  width: 300px;              /* サイズを揃える（例: 200px） */
  height: 300px;             /* 高さも固定すると揃う */
  object-fit: cover;         /* 画像をトリミングしてバランス良く */
  border-radius: 8px;
  }
  
  .profile1 h2{
  flex-basis: 100%;
  margin: 0 0 8px;
  }
  
  .profile2 {
    display: flex;
    flex-wrap: wrap;         /* 小さい画面で折り返し */
    align-items: flex-start;
    gap: 20px;
    margin: 30px auto;
    padding: 2rem;
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
  }

  .profile2 {
  display: flex;
  justify-content: center;   /* 親の中央揃え */
  gap: 40px;                 /* 画像の間隔 */
  flex-wrap: wrap;           /* 画面が小さいときは折り返す */
  }

  .profile2 img {
  width: 300px;              /* サイズを揃える（例: 200px） */
  height: 300px;             /* 高さも固定すると揃う */
  object-fit: cover;         /* 画像をトリミングしてバランス良く */
  border-radius: 8px;
  }
  
  .profile2 h2{
  flex-basis: 100%;
  margin: 0 0 8px;
  }
  .profile4 {
    display: flex;
    flex-wrap: wrap;         /* 小さい画面で折り返し */
    align-items: flex-start;
    gap: 20px;
    margin: 30px auto;
    padding: 2rem;
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
  }

  .profile4 {
  display: flex;
  justify-content: center;   /* 親の中央揃え */
  gap: 40px;                 /* 画像の間隔 */
  flex-wrap: wrap;           /* 画面が小さいときは折り返す */
  }

  .profile4 img {
  width: 300px;              /* サイズを揃える（例: 200px） */
  height: 300px;             /* 高さも固定すると揃う */
  object-fit: cover;         /* 画像をトリミングしてバランス良く */
  border-radius: 8px;
  }
  
  .profile4 h2{
  flex-basis: 100%;
  margin: 0 0 8px;
  }

/* woork css */
  
  .woorktop_top {
    padding: 20px 0 20px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #4dc3ff; 
    /* margin-bottom: 40px;  下にスペースを追加 */
    /* margin-top: 40px; */
    color: #fff;
    text-align: center;
  }
.woorktop_area img {
    width: 50%;  /* 画像をコンテナに合わせてサイズ調整 */
    height: 100%;  /* 高さを指定して画像を揃える */
    object-fit: cover;  /* 画像が切れずに収まるようにする */
    border-radius: 8px;  /* 画像の角も丸く */
  }

  .woorktop1 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    text-align: center;
  }
  
  .woorktop2 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    text-align: center;
  }
  .woorktop3 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    text-align: center;
  }



/*****スマホ**********
**********************************************/
@media  screen and (max-width:800px) {

main{
  width: 100%;
}

 /*TOP*/
.top-img {
    width: 100%;  /* 画像をコンテナに合わせてサイズ調整 */
    height: 100%;  /* 高さを指定して画像を揃える */
    object-fit: cover;  /* 画像が切れずに収まるようにする */
    border-radius: 8px;  /* 画像の角も丸く */
}


  /******************************************************
  profile*/
  #about {
    padding: 1px 0 40px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    padding: 1rem;
  }

  .profile-img {
    border-radius: 50%;
    width: 150px;  /* 必要に応じてサイズ調整 */
    height: 150px; /* 幅と高さが同じにすることで丸く表示される */
    object-fit: cover; /* 画像が切れずに収まるようにする */
    /* margin-top: 90px;  画像を少し下にずらす */
    /*margin-left: 30px; /*画面を左にずらす */
    display: block;
    margin: 0 auto;
  }

  .profile-info {
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;  /* 名前と詳細リストを縦に並べる */
    gap: 10px;  /* 名前とリストの間にスペースを追加 */
  }

  .profile-name {
    font-size: 40px; /* 必要に応じて調整 */
    font-weight: bold;
    color: #333; /* テキストの色 */
  }

  .profile-details {
    list-style-type: none; /* デフォルトのリストの丸印を非表示にする */
    padding: 0; /* リストの余白をなくす */
    font-size: 16px;
    color: #555;
  }

  .profile-details li {
    margin-bottom: 8px; /* 各項目の間にスペースを追加 */
    display: flex;
    justify-content: space-between;
  }

  .profile-details .rating{
    text-align: right;
    white-space: nowrap;
  }
  
  section {
    padding: 1rem;/*スマホ変更*/
    max-width: 90%;/*スマホ変更*/
    margin: auto;
  }
  
  h2 {
    border-bottom: 2px solid #4dc3ff;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
  }

/***********************************
history*/
#history{
    padding: 1px 0 40px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    padding: 1rem;
  }
.history-img {
    width: 100%;  /* 画像をコンテナに合わせてサイズ調整 */
    height: 100%;  /* 高さを指定して画像を揃える */
    object-fit: cover;  /* 画像が切れずに収まるようにする */
    border-radius: 8px;  /* 画像の角も丸く */
}
.history_item {
    margin: 60px auto 10px auto;            /* 上下に10pxの余白、左右は自動で中央寄せ */
    font-size: 18px;
    color: #333;
    background-color: #fff;       /* 背景を白に設定 */
    width: fit-content;           /* 内容に合わせた幅（必要に応じて固定幅に変更可） */
    padding: 20px;                /* 内側の余白 */
    text-align: center;          /* テキスト中央寄せ（必要に応じて） */
    border-radius: 8px;          /* 角を少し丸くする（任意） */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* 軽い影を追加（任意） */
    transition: all 0.3s ease;   /* ホバー時のアニメーションを滑らかに */
}
.history_item:hover {
    transform: translateY(-5px);  /* ホバー時に少し浮き上がるエフェクト */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);  /* ホバー時の影の強化 */
}
  
/***********************************
works*/
  #works {
    padding: 1px 0 40px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #f4f4f4;  /* 背景色の追加 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    padding: 1rem;
}

.works-list {
    display: flex; 
    /* justify-content: space-around;  作品を横並びに、間隔を均等に */
    flex-direction: column;
    align-items: center;
    gap: 20px;  /* 作品間の間隔 */
}

.work-item {
    text-align: center;
    max-width: 350px;  /* 作品の最大幅 */
    border: 1px solid #ddd;  /* 枠線を追加 */
    border-radius: 8px;  /* 角を丸くする */
    padding: 20px;
    background-color: white;  /* 背景色を白に設定 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* 軽い影をつけて立体感を演出 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;  /* ホバー時のエフェクト */
}

.work-item img {
    width: 100%;  /* 画像をコンテナに合わせてサイズ調整 */
    height: 200px;  /* 高さを指定して画像を揃える */
    object-fit: cover;  /* 画像が切れずに収まるようにする */
    border-radius: 8px;  /* 画像の角も丸く */
}

.work-item p {
    margin-top: 10px;
    font-size: 18px;
    color: #333;  /* テキストの色 */
}

.work-item:hover {
    transform: translateY(-5px);  /* ホバー時に少し浮き上がるエフェクト */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);  /* ホバー時の影の強化 */
}

/********************************************************
vision*/
#vision {
    padding: 1px 0 40px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    padding: 1rem;
  }
.vision-img {
    width: 100%;  /* 画像をコンテナに合わせてサイズ調整 */
    height: 100%;  /* 高さを指定して画像を揃える */
    object-fit: cover;  /* 画像が切れずに収まるようにする */
    border-radius: 8px;  /* 画像の角も丸く */
}

/********************************************************
contact*/
#contact {
    padding: 1px 0 40px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    padding: 1rem;
  }
  .contact-img {
    width: 100%;  /* 画像をコンテナに合わせてサイズ調整 */
    height: 100%;  /* 高さを指定して画像を揃える */
    object-fit: cover;  /* 画像が切れずに収まるようにする */
    border-radius: 8px;  /* 画像の角も丸く */
}
.form_inner {
  text-align: center;
  margin: 1rem 0 2rem;
  font-size: 1.2rem;
}
/* お問い合わせメール表示用 */
.contact-mail {
  text-align: center;
  margin: 1rem 0 2rem;
  font-size: 1.2rem;
}
.contact-mail a {
  color: #1504ff;
  text-decoration: underline;
  word-break: break-all; /* 長いアドレスでも折り返す */
}

}


/**********************下層ページ**********************************************/
/****************************************************************************/

/*work1 CSS */

#work1 {
  padding: 60px 20px;
  background-color: #f4f8fb;
}

.report-preview img {
  width: 200px;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #008080;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

/* work2 css */
  
  .project_top {
    padding: 20px 0 20px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #4dc3ff; 
    /* margin-bottom: 40px;  下にスペースを追加 */
    /* margin-top: 40px; */
    color: #fff;
    text-align: center;
  }
  .project0 {
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    text-align: center;
    
  }
  .project1 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 1rem;
  }
  .project2 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 1rem;
  }
  .project3 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 1rem;
  }
  .project4 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 1rem;
  }
  .project5 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 1rem;
    
  }
  .project6 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 1rem;
  }
  .project7 {
    background-color: #f4f4f4;
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    text-align: center;
    padding: 1rem;
  }

/* workhistory css */
  
  .workhistory_top {
    padding: 20px 0 20px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #4dc3ff; 
    /* margin-bottom: 40px;  下にスペースを追加 */
    /* margin-top: 40px; */
    color: #fff;
    text-align: center;
  }
  .workhistory1 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 1rem;
  }
  .workhistory2 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 1rem;
  }
  .workhistory3 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 1rem;
  }
  .workhistory4 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 1rem;
  }
  

/* profile css */
  
  .profile_top {
    padding: 20px 0 20px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #4dc3ff; 
    /* margin-bottom: 40px;  下にスペースを追加 */
    /* margin-top: 40px; */
    color: #fff;
    text-align: center;
  }
  
  .profile_area img {
    width: 100%;  /* 画像をコンテナに合わせてサイズ調整 */
    height: 100%;  /* 高さを指定して画像を揃える */
    object-fit: cover;  /* 画像が切れずに収まるようにする */
    border-radius: 8px;  /* 画像の角も丸く */
  }

  .profile0 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 1rem;
  }

  .profile1 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 1rem;
  }
  
  .profile2 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 1rem;
  }
 
  .profile4 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    margin-top: 40px;
    padding: 1rem;
  }

  
/* woork css */
  
  .woorktop_top {
    padding: 20px 0 20px 0;  /* 上の余白を縮め、下の余白はそのままに */
    background-color: #4dc3ff; 
    /* margin-bottom: 40px;  下にスペースを追加 */
    /* margin-top: 40px; */
    color: #fff;
    text-align: center;
  }
.woorktop_area img {
    width: 50%;  /* 画像をコンテナに合わせてサイズ調整 */
    height: 100%;  /* 高さを指定して画像を揃える */
    object-fit: cover;  /* 画像が切れずに収まるようにする */
    border-radius: 8px;  /* 画像の角も丸く */
  }

  .woorktop1 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    text-align: center;
  }
  
  .woorktop2 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    text-align: center;
  }
  .woorktop3 {
    background-color: #f4f4f4;  /* 背景色をWORKセクションと同じに設定 */
    margin-bottom: 40px;  /* 下にスペースを追加 */
    text-align: center;
  }