@charset "utf-8";

/* すべての要素の余白をリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 /* エラーテキストの表示/非表示のみ。フォームの見た目は変更しません。 */
.hidden { display: none; }
/* エラーテキストを赤文字に */
.error-text { color: red; }

/* スクロールの設定 */
body {
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #ECEFF2;
}

/* ロゴなどの設定 */
.logo_div {
    display: flex;
    align-items: center;
}
.logo{
    aspect-ratio:auto/auto;
    height: 80px;
}

.Company_name{
    height: 50px;
    font-size: 1.7rem; 
    margin-top: auto;
    margin-bottom: auto;
}

.Company_name_br{
    display: none;
}

.logo, .Company_name {
    margin-left: 10px;
}

/* ハンバーガーメニューのコンテナ - fixedに変更 */
.hamburger-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background-color: #84c546;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
    z-index: 1000;
    height: 100px;
}

/* ハンバーガーメニューの開閉用コンテナ */
.nav_Line {
    display: none; /* 初期状態では非表示 */
    transition: transform 0.3s ease-in-out;
}

/* メニューが開いたときの表示 */
.hamburger-menu.active .nav_Line {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 99px;
    left: 0;
    width: 100%;
    height: calc(100vh - 65px);
    z-index: 999;
    padding: 50px;
    overflow-y: auto;
    background-color: rgba(70, 247, 1, 0.9);
    background-image: 
        linear-gradient(to bottom, rgba(52, 245, 4, 0.493), rgba(12, 245, 4, 0.555)),
        url('../img/Whisk_c9ac91609d.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ハンバーガーアイコンの基本スタイル */
.hamburger-icon {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 25px;
    position: relative;
}

/* ハンバーガーの線 */
.hamburger-icon span {
    width: 100%;
    height: 3px;
    background: #333;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* メニューが開いたときのアイコンのアニメーション */
.hamburger-menu.active .hamburger-icon span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}

.hamburger-menu.active .hamburger-icon span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .hamburger-icon span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

/* メニューリンクのスタイル */
.nav-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-links li {
    margin-bottom: 20px;
}

.nav-links a {
    color: #000;
    text-decoration: none;
    font-size: min(5vw, 30px);
    display: block;
    padding: 10px 0;
}

.nav-links a:hover {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.1);
}

/* bodyのスクロールを制御 */
body.body_active {
    overflow-y: hidden;
}

/* --- ここから修正 --- */

/* 写真のセクション全体に高さを設定し、スペースを確保 */
.material {
    height: calc(100svh - 99px);
    margin-bottom: 10px;
}

.material_svh{
    position: relative;
    min-width: 500px;
    height: 100%;
    max-height: 1700px;
    margin-top: 100px; /* ヘッダーの高さに合わせて余白を設定 */
    padding-top: 0;
    aspect-ratio: 5 / 3;
    width: 100%;
    background-repeat: no-repeat;
}

.material_div {
    position: relative; 
    width: 100%;
    height: 100%;
    background-image: url(../img/Image_fx\ \(3\).jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

/* 新しいコンテンツラッパー */
.material_content_wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; /* 必要に応じて調整 */
    text-align: center;
    color: #000;
}

.Achievements_Content,.aterial_Retention_rate,.material_greeting,.material_Annotation{
    position: absolute;
    left:50%;
}

.material_greeting_br{
    display: none;
}

.material_Retention_rate{
    object-fit: contain;
    aspect-ratio: 1.39;
    width: 40%;
    height: auto;
}

.material_find_work,.material_Seminar{
    object-fit: contain;
    aspect-ratio: 1.39;
    width: 30%;
    height: auto;
    
}

.Achievements_Content{
    display: flex;
    width: 40%;
    height: 50%;
    top:30%;
    left: 45%;  
}

.material_greeting{
    font-size: 3em;
    top:10%;
    left :35%;
}

.material_Annotation{
    top:80%;
    left: 70%;
    font-size: 2rem;
}
/* --- 修正ここまで --- */

/* 概要とステップの配列 */
.Overview_Steps_div{
    display: flex;
}
.office_steps{
    width: 66.66%;
    display: flex;
}
.Overview_Steps{
    display: flex;
    margin-top: 0;
}

/* 概要の背景色 */
.overview_div{
    padding: 30px;
}

.overview_div p,.overview_div h2{
    margin: 4vh 10px 4vh 10px;
}

.overview_div h2{
    font-size: 30px;
}

.overview_div p{
    font-size: 21px;
}


.overview_div{
    width: 33.33%;
    background-color: #A9FA5B;
}

/* A型事業所の利用開始ステップ設定 */
.A_type_office_steps,.transition_type_office_steps{
    width: 50%;
    margin: 10px;
}

.steps_h2{
    text-align: center;
    font-size: 1.35rem;
    padding: 10px 1px 10px 1px;
    background-color: #028D14;
    color:#FBFBFB;
}

.office_steps_margin{
    margin-top: 10px;
}

.A_type_office_steps p,.steps_h2,.transition_steps_text,.transition_steps_arrow{
    text-align: center;
}


.A_step_arrow{
    font-size: 1.25rem;
    margin-top: 7px;
    margin-bottom: 7px;
}

.A_step_text{
    padding: 20px 6px 20px 6px;
    font-size: 0.85rem;
}

.transition_steps_text,.A_step_text{
    background-color: #A9FA5B;
}

.steps_h2,.A_step_text,.steps_h2,.transition_steps_text{
    border-radius: 5px;
}

.transition_steps_arrow{
    font-size: 1.75rem;
    margin-top: 7px;
    margin-bottom: 7px;
}

.transition_steps_text{
    font-family: 0.85rem;
    padding: 19px 6px 19px 6px;
}

/* 資格取得実績の設定 */
.Qualification_results{
    font-size:2rem;
    text-align: center;
    margin-top: 70px;
}

.Qualification_results_section{
    text-align: center;
}
.Qualification_results_position_column{
    display: flex;
    width: 90%;
    margin-top: 70px;
    margin-left: 5%;
    margin-right: 5%;
}
.Qualification_results_position_column p{
    width: 33%;
    text-align: center;
    font-size: 1rem;
    margin: 5px;
    margin: 5px;
    background-color: #028D14;
    color: #FBFBFB;
    padding: 15px;
    border-radius: 5px;
}

.Qualification_results_position_column_2{
    width: 87.96%;
}

/* 事務所の写真スライド設定 */
.office_photo h2{
    /* margin-top: 70px; */
    margin-bottom: 70px;
    text-align: center;
    font-size:2rem;
}


.office_photo{
    width: 80%;
    margin: 0 auto;
    margin-top: 70px;
    overflow-x: hidden;
    background-color: #ECEFF2;
}

/* ↓ スライドの外枠 */
.slide-wrapper_two {
  width: 100%;
  aspect-ratio: 5 / 3;
  position: relative;
  overflow: hidden; /* はみ出したスライドを隠す */
}

/* ↓ スライド（コンテンツ） */
.slide_two { /*スライド全体 */
  width: 400%;
  height: 100%;
  display: flex;
  transition: all 0.3s;
}

.slide_two div { /* スライド */
  width: 33.33%;
  height: 100%;
  font-size: 16px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.slide1_two { /* スライドさせるために必要なクラス */
  transform: translateX(0);
}

.slide2_two { /* スライドさせるために必要なクラス */
  transform: translateX(-25%);
}

.slide3_two { /* スライドさせるために必要なクラス */
  transform: translateX(-50%);
}

.slide4_two { /* スライドさせるために必要なクラス */
  transform: translateX(-75%);
}

.slide_two div:nth-of-type(1){ /* 背景色 */
  background-image: url(../img/office1.jpg);
}

.slide_two div:nth-of-type(2){ /* 背景色 */
  background-image: url(../img/office2.jpg);
}

.slide_two div:nth-of-type(3){ /* 背景色 */
  background-image: url(../img/office3.jpg);
}

.slide_two div:nth-of-type(4){ /* 背景色 */
  background-image: url(../img/office4.jpg);
}

.slide_two div{
  background-size: cover;
  background-repeat: no-repeat;
}

/* ↓ 左右のボタン */
.next_two {
  position: absolute;
  width: 15px;
  height: 15px;
  right: 10px;
  bottom: 50%;
  z-index: 10;
  cursor: pointer;
  border-top: solid 3px #000;
  border-right: solid 3px #000;
  -webkit-transform: rotate(45deg) translateY(50%);
  transform: rotate(45deg) translateY(50%);
}

.prev_two {
  position: absolute;
  width: 15px;
  height: 15px;
  left: 25px;
  bottom: 50%;
  z-index: 10;
  cursor: pointer;
  border-top: solid 3px #000;
  border-right: solid 3px #000;
  -webkit-transform: rotate(-135deg) translateY(-50%);
  transform: rotate(-135deg) translateY(-50%);
}

/* ↓ インジケーター */
.indicator_two {
  width: 100%;
  position: absolute;
  bottom: 20px;
  display: flex;
  column-gap: 18px;
  z-index: 10;
  justify-content: center;
  align-items: center;
}

.indicator_two li {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  list-style: none;
  background-color: #fff;
  border: 2px #000 solid;
  cursor: pointer;
}

.indicator_two li:first-of-type {
  background-color: #000;
}

/* アンカーリンクの飛び先をヘッダーの高さ分下げる */
#overview_h2, #office_steps, #Qualification_results, #office_photo,#timetable_table, #Voices_of_graduates ,#question, #inquiry, #footer, #How_to_enter{
    scroll-margin-top: 100px; /* ヘッダーの高さに合わせて調整 */
}

/* 表の設定 */
.timetable_table h2{
    font-size:2rem;
    margin-top: 70px;
}

.timetable_table .timetable_table_p{
    margin-top: 60px;
    margin-bottom: 30px;
    font-size: 1.25rem;
}
.timetable_table{
    text-align: center;
    margin: 0 auto;
}

table{
    margin: 0 auto;
}

table , td, th {
	border: 1px solid #000;
	border-collapse: collapse;
}
td{
	padding: 3px;
	width: 220px;
	height: 50px;
    text-align: center;
}
th {
	padding: 3px;
	width: 220px;
	height: 50px;
    background:#028d14;
    color:#fff;
    text-align: center;
}
tr:nth-of-type(odd){
    background: #84c546;
}
tr:nth-of-type(even){
    background: #a9fa5b;
}

/* 卒業者・在籍者の声の設定 */
.Voices_of_graduates{
    text-align: center;
    background-image: url(../img/ChatGPT\ Image\ 2025年8月18日\ 13_42_53.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.Voices_of_graduates h2{
    font-size:2rem;
    padding-top: 30px;
    margin-top: 60px;
    margin-bottom: 50px;
}

.Voices_of_graduates_broad{ 
    display: flex;
    margin-top: 30px;
    padding-bottom: 60px;
}

.Voices_of_graduates_broad_outline{
    background-color: #ECEFF2;
    flex-direction:row;
    width: 40%;
    height: auto;
    padding-bottom: 3%;
    border-radius: 5%;
    border: 1px solid #000;
    margin-left: 5%;
    text-align: center;
    margin-right: 5%;

}

.Voices_of_graduates_broad_outline p{
    width: 80%;
    font-size:1rem ;
    text-align: left;
    margin:0 auto;
    margin-top: 5px;
    margin-bottom: 5px;
}

.Voices_of_graduates_broad_outline_div img{
    width: 100px;
    height: auto;
    margin-top: 5px;
    margin-bottom: 5px;
}


.Voices_of_graduates_broad_outline_div{
    margin-left: 50px;
    display: flex;
    align-items: center;
}

.Voices_of_graduates_broad_outline_div p{
    font-size: 1.5rem;
}

.answer_br_support{
    display: none;
}

/* 質問 */
.question{
    text-align: center;
    margin-bottom: 70px;
}

.question h2{
    font-size:2rem;
    margin-top: 30px;
}

summary {
  display: block; /* display: list-item となっているのを上書きして矢印を消す */
}

.question_div{
    margin-top: 20px;
    margin-bottom: 10px;
}

.Common_questions h3,.A_type_question h3,.Transitional_question h3{
    font-size: 1.75rem;
    margin-top: 30px;
    margin-bottom: 30px;
}

.Question_content{
    text-align: center;
    margin: 0 auto;
    width: 800px;
    background-color: #a9fa5b;
}

.answer{
    margin: 0 auto;
    text-align: center;
    width: 800px;
    padding-left: 50px;
    padding-right: 50px;
    background-color: #fbfbfb;
}

.answer_subject{
    text-align: left;
}

/* お問い合わせ */
.inquiry{
    width: 100%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

.inquiry_contents{
    width: 50%;
    margin-left: 5%;
}

.inquiry_contents h2{
    font-size:2rem;
}

.inquiry_contents form div:nth-of-type(4){
    height: 50%;
    min-height: 300px;
}

.name,.email,.phone,.topic,.message{
    border: 1px solid #494949;
    margin-top: 10px;
    margin-bottom: 10px;
}

.name{
    width: 60%;
    height: 4vh;
}

.email{
    width: 60%;
    height: 4vh;
}

.phone{
    width: 60%;
    height: 4vh;
}

.topic{
    width: 60%;
}

.message{
    width: 80%;
    min-height: 200px;
    height:60%;
    overflow-y: scroll;
}


.Privacy_policy_p{
    font-size: 1.25rem;
    margin-top: 30px;
    margin-bottom: 30px;
}

.Privacy_policy{
    text-decoration: none;
    color: #3e5061;
    text-align: center;
    margin: 20px auto;
    
}

.Privacy_policy:hover{
    color: #ee0a0a;
}

.submitBtn_div{
    margin-bottom: 30px;
}

.submitBtn{
    width: 140px;
    height: 30px;
    border: 0;
    border-radius: 25px;
    background-image: radial-gradient(#a4ffc0, #a4ffc0 12%, #70ff72 61%, #0ef47e 91%);
    color: #01061f;
    font-size: 1.25rem;
}


.inquiry_img{
    margin: auto 0;
    width: 50%;
    height: 25%;
}

/* 所在地 */
.footer{
    height: auto;
    background-color: #01500b;
    margin-top: 20px;
    padding-left: 50px;
    padding-right: 50px;
}

.location{
    margin-left: 10px;
    padding-top: 30px;
    padding-right: 10px;
    display: flex;
}

.location_information{
    width: 55%;
    padding-right: 20px;
    color: #fbfbfb;
    margin-right: 10px;
}

.sns{
    display: flex;
    width: 35%;
    margin-bottom: 10px;
}

.sns_div{
    margin-left: 10px;
    margin-right: 10px;
    align-items: center;
    flex-direction: column;
}

.sns_div p{
    font-size: 0.75rem;
    text-align: center;
    min-width: 80px;
    margin: 0 auto;
    height: 36px;
}

.sns_div a{
    margin-top: 15px;
    text-align: center;
    margin: 0 auto;
}
.instagram{
    text-align: center;
    width: 30px;
    height: 30px;
    margin: 30px;
    
}

.X{
    width: 30px;
    height: 30px;
    margin: 30px;
}

.line{
    width: 30px;
    height: 30px;
    margin: 30px;
}

.location_information_sentence{
    margin-top: 15px;
}

.location_information_sentence_1{
    margin-top: 15px;
    margin-bottom: 10px;
}

.office_phone{
    margin-top: 10px;
}

.office_email{
    margin-bottom: 10px;
}

.Business_hours{
    margin-top: 10px;
    margin-bottom: 10px;
}

.list {
  list-style: none;
}

/* モノレールの駅とバス停の設定 */
.ul_station,.ul_bus{
    list-style: disc;
    padding-left: 40px;
}
.ul_station{
    margin-bottom: 10px;
}

.li_station_br{
    display: none;
}

/* 所在地の地図の設定 */
.location_map{
    width: 50%;
    height: 400px;
    margin-top: 50px;
    /* margin-right: 50px; */
    margin-left: 30px;
}

/* Slide共通設定 */
.Slide_div{
    display: flex;
}

.How_to_enter{
    margin-top: 20px;
}

.How_to_enter h2{
    margin-top: 20px;
    color: #fff;
}

.stairs h3,.elevator h3{
    color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
}

.elevator,.stairs{
    width: 40%;
    margin: 5%;
    margin-top: 10px;
    padding-bottom: 20px;
}

/* Slide一個目 */
/* ↓ スライドの外枠 */
.slide-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; /* はみ出したスライドを隠す */
}

/*  ↓ スライド（コンテンツ） */
.slide { /*スライド全体 */
  width: 500%;
  height: 80%;
  display: flex;
  transition: all 0.3s;
}

.slide div { /* スライド */
  width: 20%;
  height: 90%;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.slide1 { /* スライドさせるために必要なクラス */
  transform: translateX(0);
}

.slide2 { /* スライドさせるために必要なクラス */
  transform: translateX(-20%);
}

.slide3 { /* スライドさせるために必要なクラス */
  transform: translateX(-40%);
}
.slide4 { /* スライドさせるために必要なクラス */
  transform: translateX(-60%);
}
.slide5 { /* スライドさせるために必要なクラス */
  transform: translateX(-80%);
}

.slide div p{
  height: 40%;
  width: 100%;
  background-color: #fff;
}

.slide div div{
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
}

.slide div:nth-of-type(1) div{ /* 背景色 */
  background-image: url(../img/stairs/building.jpg);
}

.slide div:nth-of-type(2) div{ /* 背景色 */
  background-image: url(../img/stairs/stairway.jpg);
}

.slide div:nth-of-type(3) div{ /* 背景色 */
  background-image: url(../img/stairs/2nd_elevator.jpg);
}

.slide div:nth-of-type(4) div{ /* 背景色 */
  background-image: url(../img/stairs/3rd_floor.jpg);
}

.slide div:nth-of-type(5) div{ /* 背景色 */
  background-image: url(../img/stairs/office_exterior.jpg);
}

.slide div{
  background-size: cover;
  background-repeat: no-repeat;
}

/* ↓ 左右のボタン */
.next {
  position: absolute;
  width: 15px;
  height: 15px;
  right: 10px;
  bottom: 50%;
  z-index: 10;
  cursor: pointer;
  border-top: solid 3px #000;
  border-right: solid 3px #000;
  -webkit-transform: rotate(45deg) translateY(50%);
  transform: rotate(45deg) translateY(50%);
}

.prev {
  position: absolute;
  width: 15px;
  height: 15px;
  left: 25px;
  bottom: 50%;
  z-index: 10;
  cursor: pointer;
  border-top: solid 3px #000;
  border-right: solid 3px #000;
  -webkit-transform: rotate(-135deg) translateY(-50%);
  transform: rotate(-135deg) translateY(-50%);
}

/* ↓ インジケーター */
.indicator {
  width: 100%;
  position: absolute;
  bottom: 0;
  display: flex;
  column-gap: 18px;
  z-index: 10;
  justify-content: center;
  align-items: center;
}

.indicator li {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  list-style: none;
  background-color: #fff;
  border: 2px #000 solid;
  cursor: pointer;
}

.indicator li:first-of-type {
  background-color: #000;
}

/* Slide二個目 */
.list_three {
  list-style: none;
}

/* ↓ スライドの外枠 */
.slide-wrapper_three {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; /* はみ出したスライドを隠す */
}

/*  ↓ スライド（コンテンツ） */
.slide_three { /*スライド全体 */
  width: 600%;
  height: 80%;
  display: flex;
  transition: all 0.3s;
}

.slide_three div { /* スライド */
  width: 16.66%;
  height: auto;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.slide_three1 { /* スライドさせるために必要なクラス */
  transform: translateX(0);
}

.slide_three2 { /* スライドさせるために必要なクラス */
  transform: translateX(-16.6%);
}

.slide_three3 { /* スライドさせるために必要なクラス */
  transform: translateX(-33.3%);
}

.slide_three4 { /* スライドさせるために必要なクラス */
  transform: translateX(-50%);
}

.slide_three5 { /* スライドさせるために必要なクラス */
  transform: translateX(-66.6%);
}

.slide_three6 { /* スライドさせるために必要なクラス */
  transform: translateX(-83.3%);
}

.slide_three div p{
  height: 40%;
  width: 100%;
  background-color: #fff;
}

.slide_three div div{
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
}

.slide_three div:nth-of-type(1) div{ /* 背景色 */
  background-image: url(../img/hall/building.jpg);
}

.slide_three div:nth-of-type(2) div{ /* 背景色 */
  background-image: url(../img/hall/alley.jpg);
}

.slide_three div:nth-of-type(3) div{ /* 背景色 */
  background-image: url(../img/hall/interphone.jpg);
}

.slide_three div:nth-of-type(4) div{ /* 背景色 */
  background-image: url(../img/hall/elevatorhall.jpg);
}

.slide_three div:nth-of-type(5) div{ /* 背景色 */
  background-image: url(../img/hall/3rd_floor.jpg);
}

.slide_three div:nth-of-type(6) div{ /* 背景色 */
  background-image: url(../img/hall/office_exterior.jpg);
}

.slide_three div{
  background-size: cover;
  background-repeat: no-repeat;
}

/* コピーライト */
.copyright{
    text-align: center;
    color: #fff;
}

/* ↓ 左右のボタン */
.next_three {
  position: absolute;
  width: 15px;
  height: 15px;
  right: 10px;
  bottom: 50%;
  z-index: 10;
  cursor: pointer;
  border-top: solid 3px #000;
  border-right: solid 3px #000;
  -webkit-transform: rotate(45deg) translateY(50%);
  transform: rotate(45deg) translateY(50%);
}

.prev_three {
  position: absolute;
  width: 15px;
  height: 15px;
  left: 25px;
  bottom: 50%;
  z-index: 10;
  cursor: pointer;
  border-top: solid 3px #000;
  border-right: solid 3px #000;
  -webkit-transform: rotate(-135deg) translateY(-50%);
  transform: rotate(-135deg) translateY(-50%);
}

/* ↓ インジケーター */
.indicator_three {
  width: 100%;
  position: absolute;
  bottom: 0px;
  display: flex;
  column-gap: 18px;
  z-index: 10;
  justify-content: center;
  align-items: center;
}

.indicator_three li {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  list-style: none;
  background-color: #fff;
  border: 2px #000 solid;
  cursor: pointer;
}

.indicator_three li:first-of-type {
  background-color: #000;
}


/* スマホ用の設定 */
@media screen and (max-width: 768px){
    body {
        min-width: 320px;
        max-width: 768px;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: scroll;
        background-color: #ECEFF2;
    }

    .hamburger-menu{
        flex-grow: 0;
        width:100vw;
        min-width: 320px;
        max-width: 768px;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    .Company_name_br{
        display: inline;
    }

    .logo{
        width: auto;
        height: 70px;
    }

    .Company_name{
        min-width: 180px;
        width: 80%;
        text-align: center;
        font-size: 1.1rem;
        margin-left: 0;
    }

    .hamburger-icon{
        width: 5%;
        min-width: 15px;
        margin-right: 10px;
    }

    .nav_Line {
        display: none; /* 初期状態では非表示 */
        transition: transform 0.3s ease-in-out;
    }


    .hamburger-menu.active .nav_Line{
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 99px;
        left: 0;
        width: 100%;
        height: calc(100vh - 99px);
        z-index: 999;
        padding: 0 20px 0 20px;
        overflow-y: auto;
        background-color: rgba(70, 247, 1, 0.9);
        background-image: 
            linear-gradient(to bottom, rgba(52, 245, 4, 0.493), rgba(12, 245, 4, 0.555)),
            url('../img/Whisk_c9ac91609d.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        margin-bottom: 0;
    }

    .nav-links a{
        padding: 0;
    }

    .nav_a{
        padding: 0;
    }
    
    .body.body_active {
        overflow-y: hidden;
    }

    /* 実績 */

    .material{
        height: 100%;
    }

    .overview_div p{
        font-size: 0.9rem;
    }

    .material_svh{
        width: clamp(320px,100%,768px);
        min-width: 320px;
        height: auto;
        /* height: clamp(200px, 200px, 400px); */
        aspect-ratio: 16/9;
        background-size:contain;
    }

    .material_div{
        box-sizing: border-box;
        width:clamp(320px,100%,768px);
        height: 100%;
        background-size:contain;
    }

    .material_greeting_br{
        display: inline;
    }

    .Achievements_Content{
        top: 35%;
        width: clamp(50px,40%,300px);
        height: 40%;
        left: 50%;
    }

    .material_Retention_rate{
        width: 40%;
        height: auto;
    }

    .material_find_work,.material_Seminar{
        width: 35%;
        height: auto;
    }

    .material_greeting{
        font-size:4vw;
        left: 50%;
        top:10%;
    }

     .material_Annotation{
        font-size: 4vw;
        left: 50%;
    }
    /* 概要 */
    .Overview_Steps_div{
        display: block;
        width: 100%;
    }

    .overview_div{
        width: 100%;
    }

    /* 利用開始のステップ */
    .office_steps{
        display: block;
        width: 100%;
    }

    .A_type_office_steps{
        width: 90%;
        margin: 4%;
        text-align: center;

    }

    .transition_type_office_steps{
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }

    .steps_h2,.steps_h2{
        width: 90%;
        text-align: center;
        margin: 0 auto;
        font-size: 1rem;
    }

    .transition_steps_text,.A_step_text{
        text-align: center;
        margin: 0 auto;
        margin-top: 10px;
        width: 80%;
        font-size: 0.67rem;
    }

    /* 資格実績 */
    .Qualification_results_position_column{
        display: block;
        text-align: center;
        width: 100%;
        margin: 0;
        margin-top: 0;
    }

    .Qualification_results_position_column p{
        width: 90%;
        text-align: center;
        margin-right: 5%;
        margin-left: 5%;
        margin-bottom: 10px;
    }
    
    .Qualification_results{
        margin-top: 30px;
    }

    /* 事務所の写真スライド */
    .office_photo{
        margin-top: 30px;
    }

    .office_photo_h1{
        margin-bottom: 30px;
    }

    /* 時間割表の設定 */
    .timetable_table{
        width: 300px;
        margin: 0 auto;
    }

    .timetable_table h2{
        margin-top: 30px;
    }

    .timetable_table .timetable_table_p{
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .table{
        width: 90%;
        text-align: center;
    }

    .timetable_table_p_Annotation{
        margin-top: 20px;
        margin-bottom: 30px;
    }

    /* 卒業生・在籍者の声 */
    .Voices_of_graduates{
        width: 100%;
        text-align: center;
        background-image: url(../img/ChatGPT\ Image\ 2025年8月18日\ 14_46_40.png);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size:cover;
        background-position: center 100px;
        height: auto;
    }

    .Voices_of_graduates_broad{
        display: block;
        padding-bottom: 0;
    }

    .Voices_of_graduates h2{
        margin-top: 0;
        margin-bottom: 10px;
    }

    .Voices_of_graduates_broad_outline{
        width: 90%;
        margin-top: 30px;
    }

    .Voices_of_graduates_broad_outline p{
        font-size: 4vw;
    }

    .Voices_of_graduates_broad_outline_div{
        max-width: 60%;
        text-align: center;
        margin: 0 auto;
    }

    .Voices_of_graduates_broad_outline_div img{
        width: 20%;
    }

    .Voices_of_graduates_broad_outline_div p{
        font-size:5vw;
    }

    .Voices_of_graduates_broad_a,.Voices_of_graduates_broad_e,.Voices_of_graduates_broad_b,.Voices_of_graduates_broad_f,.Voices_of_graduates_broad_c,.Voices_of_graduates_broad_g{
        height: auto;
    }

    .Voices_of_graduates_broad:nth-of-type(3){
        padding-bottom: 30px;
    }

    /* よくある質問 */
    .question{
        margin-top: 30px;
    }

    .Question_content{
        width: 80%;
    }

    .answer{
        width: 80%;
        text-align: left;
    }

    .answer_br{
        display: none;
    }

    .answer_br_support{
        display: inline;
    }


    /* お問い合わせ */
    .submitBtn_div{
        width: 200px;
        margin-left: 0;
    }

    .inquiry{
        display: block;
    }

    .inquiry_contents h2{
        text-align: center;
    }

    .inquiry_contents{
        width: 100%;
        margin-left: 0;
    }

    .inquiry_contents form{
        width: 100%;
        min-width: 300px;
        padding: 5%;
    }

    .inquiry_contents form div{
        width: 100%;
        max-width: 700px;
    }

    .inquiry_img{
        display: none;
    }

    .name{
        width: 80%;
        height: calc(3em - 1rem);
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .email{
        width: 80%;
        height: calc(3em - 1rem);
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .phone{
        width: 80%;
        height: calc(3em - 1rem);
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .topic{
        width: 80%;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .message{
        width: 80%;
        min-height: 200px;
        height:60%;
        overflow-y: scroll;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    /* フッター設定 */

    .footer{
        min-height: 320px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .location{
        display: inline;
        text-align: center;
        width: 90%;
    }

    .location_information{
        width: 100%;
    }

    .sns{
        width: 100%;
        display: block;
        text-align: center;
    }

    .instagram, .X, .line{
        width: 40px;
        height: 40px;
        margin: 40px;
    }


    .sns_div{
        text-align: center;
        margin: 0;
    }

    .sns_div p{
        font-size: 1rem;
        text-align: center;
    }

    .sns_br{
        display: none;
    }

    .location_information_sentence p{
        text-align: left;
        margin-left: 10px;
    }

    .ul_station li{
        text-align: left;
        margin-left: 11px;
    }

    .li_station_br{
        display: block;
    }

    .ul_bus li{
        width: 150px;
        margin-left: 11px;
    }

    .location_map{
        margin: 10%;
        margin-top: 20px;
        aspect-ratio: 1/1;
        width: 80%;
        height: auto;
    }

    /* Slide設定 */
    /* 共通 */

    .How_to_enter{
        text-align: center;
    }

    .Slide_div{
        display: block;
    }

    .How_to_enter h2{
        font-size: 1.5rem;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .stairs h2,.elevator h2{
        font-size: 0.75rem;
    }

    .elevator,.stairs{
        width: 80%;
        height: auto;
        margin: 10%;
        margin-top: 10px;
        padding-bottom: 20px;
    }
    
    /* 一個目 */
    .slide div p{
        font-size: 0.75rem;
        margin-bottom: 20px;
    }

    /* 二個目 */
    .slide_three div p{
        font-size: 0.75rem;
        margin-bottom: 20px;
    }

    .copyright{
        width: 100%;
        font-size: 9px;
        text-align: center;
        padding-bottom: 30px;
    }

}