@charset "UTF-8";

/*
COMMON
================================================ */
body {
  font-size: 15px;
  font-family: Georgia, '游明朝', YuMincho, 'Hiragino Mincho ProN', Meiryo, serif;
  line-height: 1.8;
}

a{
  text-decoration: none;
  color: #444444;
}

ul{
  list-style:none;
}

.container{
  max-width:1800px;
  width:90%;
  margin: 0 auto;
}

.top-container,
.main-container{
  max-width:1800px;
  width:90%;
  margin: 0 auto;
}

.fadein{
  opacity: 0;
}

.fadeleft{
  opacity:0;
}

.faderight{
  opacity:0;
}

/* スクロールロック用 */
body.is-locked {
  overflow: hidden;
}

/* アンダーライン用 */
.header-title h1::after,
.bottom-title h1::after
 {
  transform: scaleX(0);
  transform-origin: left;
}

@keyframes underline-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.is-visible::after {
  animation: underline-grow 0.8s ease-out forwards;
}

/* ==============================
モーダル
============================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}

.modal.active {
  display: block;
}

.modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 90%;
  max-width: 600px;
  padding: 40px;
  border-radius: 30px;
  animation: modalFade 0.5s ease;
}

@keyframes modalFade {
  from {
    opacity: 0;
    transform: translate(-50%, -55%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
}

/*
header
================================================ */
header{
  background-image: url(../Profile-image/header-image.jpg);
  padding-bottom: 60px;
  background-size: cover;
  background-position: center;
  height:100vh;
  opacity:0.8;
  position: relative;
}

.banner-back{
  background-color: #111;
  width:100%;
  height: 100px;
  opacity: 0.3;
  position: absolute;
  top:0;
  z-index:-1;
}

.header-container{
  max-width: 95%;
}

.header-container ul{
  display: flex;
  justify-content: flex-end;
}

.header-container ul li{
  margin-top: 30px;
  margin-right: 50px;
  font-weight: bold;
}

.header-container ul li a{
  color:#fff;
  transition:all 0.3s;
}

.header-container ul li a:hover{
  color:#ff9933;
}

.header-title{
  position:absolute;
  top:50%;
  left:10%;
}

.header-title p{
  font-size: 20px;
}

.header-title h1{
  font-size:54px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.header-title h1::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 15px;
  z-index:-1;
  width: 120%;
  height: 12px;

  background: #FFD100;

  /* 左太・右細 */
  clip-path: polygon(
    0 0,
    100% 50%,
    100% 50%,
    0 100%
  );

  border-radius: 999px;
}

/*
top-wrapper
================================================ */
.top-wrapper{
  border-top:#FFD100 solid 1px;
  border-bottom:#FFD100 solid 1px;
  padding-bottom: 80px;
  position: relative;
}

.teacher {
  position: sticky;
  top: 50%;          /* 画面上からの固定位置 */
  margin-left: 50px;
  font-size: 16px;
  color: #111;
  z-index: 10;
}

.teacher::after{
  content: "";
  width: 10px;
  border-top: solid 2px #FFD100;
  position: absolute;
  top: 13px;
  left: -15px;
}

.top-box{
  padding-top: 165px;
  display: flex;
  justify-content: space-between;
}

.top-text{
  width:40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  margin-top: 130px;
  margin-left: 50px;
}

.top-title{
  max-width:1800px;
  width:90%;
  margin: 0 auto;
}

.top-title h1{
  margin-bottom: 20px;
  padding-top: 50px;
  padding-left: 0px;
  font-size: 42px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
}

.top-title h1::after{
  content: "";
  width: 25px;
  height: 25px;
  border-top: solid 5px #FFD100;
  border-right: solid 5px #FFD100;
  transform: rotate(45deg);
  position: absolute;
  top: 75px;
  left: -40px;
  transition: all 0.5s;
}

.top-text p{
  font-size: 20px;
}

.top-image{
  width:40%;
}

.top-image img{
  width: auto;
  height: 600px;
  border-radius: 30px;
}

/*
main-wrapper
================================================ */
.main-wrapper{
  background-color: #F6F6F6;
  position: relative;
}

.Introduction {
  position: sticky;
  top: 50%;          /* 画面上からの固定位置 */
  margin-left: 50px;
  font-size: 16px;
  color: #111;
  z-index: 10;
}

.Introduction::after{
  content: "";
  width: 10px;
  border-top: solid 2px #FFD100;
  position: absolute;
  top: 13px;
  left: -15px;
}

.main-title{
  padding-top: 130px;
  margin-left: 50px;
  margin-bottom: 100px;
}

.main-title h1{
  margin-bottom: 50px;
  padding-left: 35px;
  font-size: 42px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
}

.main-title h1::after{
  content: "";
  width: 25px;
  height: 25px;
  border-top: solid 5px #FFD100;
  border-right: solid 5px #FFD100;
  transform: rotate(45deg);
  position: absolute;
  top: 28px;
  left: -3px;
  transition: all 0.5s;
}

.main-grid-box{
  display: grid;
  grid-template-columns: 1fr 1fr;
  width:75%;
  margin: 0 auto;
}

.main-box{
  background-color: #fff;
  border-radius: 30px;
  position: relative;
  width: 85%;
  aspect-ratio: 1 / 1;  /* ← 追加 */
  justify-self: center; /* ← 重要 */
  margin-bottom: 50px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: all 0.1s;
}

.main-box:hover{
  opacity: 0.6;
}

.main-box:active{
  box-shadow: none;
  transform:translate(2px, 4px);
}

.box-title{
  margin-top: 50px;
  margin-left: 30px;
  padding: 5px 30px;
  width:fit-content;
  border: #111 solid 1px;
  border-radius: 100px;
}

.main-box-text{
  margin-top: 50px;
  padding-left: 30px;
  width:45%;
}

.main-box-text h3{
  margin-bottom: 20px;
}

.main-box-image img{
  width: 30%;
  position: absolute;
  right:10%;
  bottom:10%;
  z-index:1;
  transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.main-box-image {
  overflow: hidden;
}

/* main-box に hover したら拡大 */
.main-box:hover .main-box-image img {
  transform: scale(1.1);
}

.main-box-backImage img{
  width:50%;
  position: absolute;
  right:0px;
  bottom:0px;
  border-radius: 30px;
}

/*
bottom-wrapper
================================================ */
.bottom-wrapper{
  background-color: #F6F6F6;
  padding-top: 150px;
  padding-bottom: 170px;
  border-top:#FFD100 solid 1px;
  border-bottom:#FFD100 solid 1px;
}

.bottom-box{
  width: 90%;
  margin: 0 auto;
  padding-bottom: 100px;
  background-color: #fff;
  border-radius: 30px;
  position: relative;
}

.bottom-title{
  width: fit-content;
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 50px;
}

.bottom-title h1{
  position: relative;
}

.bottom-title h1::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 120%;
  height: 12px;

  background: #FFD100;

  /* 左太・右細 */
  clip-path: polygon(
    0 0,
    100% 50%,
    100% 50%,
    0 100%
  );

  border-radius: 999px;
}

.bottom-link{
  display: flex;
  justify-content: center;
}

.bottom-detail{
  width:30%;
  position: relative;
  transition: all 0.1s;
  border-radius:30px;
}

.bottom-detail:first-child{
  margin-right: 100px;
}

.bottom-detail img{
  width:100%;
  opacity: 0.8;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bottom-detail {
  overflow: hidden;
}

/* main-box に hover したら拡大 */
.bottom-detail:hover img {
  transform: scale(1.1);
}

.arrow {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  height:30px;
  margin: auto 0;
  line-height: 1;
  background-color: #fff;
  border-radius: 999px;
  padding: 20px;
  margin-right: 30px;
}

.arrow:before,
.arrow:after {
  content: "➜";
  color: #FFD100;
  font-size:32px;
  position: absolute;
  top:4px;
  right: 5px;
  animation-fill-mode: forwards;
  animation-duration: 0.6s;
}
.arrow:after {
  transform: translateX(-130%);
}
.inquiry-btn1:hover .arrow:before {
  animation-name: transformRightLeft; /* 修正: hover時のアニメーションを指定 */
  animation-delay: 0s;
}
.inquiry-btn1:hover .arrow:after {
  animation-name: transformLeftRight; /* 修正: hover時のアニメーションを指定 */
  animation-delay: 0.2s;
}

@keyframes transformLeftRight {
  0% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes transformRightLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(130%);
  }
}

.bottom-detail:hover{
  opacity:0.6;
}

.bottom-detail img:active{
  box-shadow: none;
  transform:translate(2px, 4px);
}

.bottom-detail h2{
  position: absolute;
  top:40%;
  left: 10px;
}

.bottom-detail p{
  position: absolute;
  top:55%;
  left:10px;
}

.inquiry-btn{
  width: 80%;
  position:absolute;
  left: 27%;
  bottom:-12%;
}

.inquiry-btn1{
  display: inline-block;
  width: 60%;
  height: 100px;
  background-color: #FFD100;
  display: flex;
  align-items: center;      /* 縦中央 */
  justify-content: center;  /* 横中央 */
  font-weight: bold;
  font-size:32px;
  border-radius: 100px;
  margin-top: 30px;
  box-shadow: 2px 2px 4px #111;
}

.inquiry-btn a:hover{
  opacity:0.8;
}

.inquiry-btn a:active{
  box-shadow: none;
  transform:translate(2px, 4px);
}

/*
footer
================================================ */
footer{
  background-color: rgb(38, 39, 40); 
  color:#ffffff
}

.footer-list{
  display: flex;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.list-title{
  margin-bottom: 30px;
}

.footer-list1,
.footer-list2,
.footer-list3,
.footer-list4{
  padding-right: 100px;
}

.footer-list1 ul li,
.footer-list2 ul li,
.footer-list3 ul li,
.footer-list4 ul li{
  margin-bottom: 10px;
}

.footer-list1 ul li a,
.footer-list2 ul li a,
.footer-list3 ul li a,
.footer-list4 ul li a{
  color:#ffffff
}

.footer-list a{
  transition:all 0.3s;
}

.footer-list a:hover{
  color:#ff9933;
}

@media(max-width:1280px){
  /*
top-wrapper
================================================ */
.teacher {
  position: absolute;
  margin-left: 15px;
  top:95%;
}

.top-container{
  width:100%;
}

.top-box{
  justify-content: space-around;
}

.top-text{
  margin-top: 0px;
  margin-left: 0px;
}
.top-image img{
  height: 500px;
  margin-top: 45px;
}

/*
main-wrapper
================================================ */
.Introduction {
  position: absolute;
  margin-left: 15px;
  top:97%;
}

.main-container{
  width:100%;
}

.main-grid-box{
  width:95%;
}

.main-box{
  width: 85%;
}

.box-title{
  margin-top: 20px;
}

.main-box-text{
  width:75%;
  margin-top: 20px;
}

/*
bottom-wrapper
================================================ */
.bottom-wrapper{
  padding-top: 100px;
}

.bottom-title h1::after{
  width: 110%;
}
.bottom-box{
  width: 100%;
}

.bottom-link{
  justify-content: space-around;
}

.bottom-detail{
  width:45%;
}

.bottom-detail:first-child{
  margin-right: 0px;
}

.inquiry-btn{
  width: 100%;
  left: 10%;
  bottom:-9%;
}

.inquiry-btn1{
  width: 80%;
}

}

@media(max-width:768px){
  /* ハンバーガーメニュー */

 /*ハンバーガーメニュー 開閉ボタン */
.btn-menu{
position: fixed;
right: 1rem;
top: 1rem;
z-index: 1000;
padding: .5rem 1rem;
height: 4rem;
width: 4rem;
transition: 1.0s;
}

/*ハンバーガーメニュー 非アクティブ */
.btn-menu span{
  width: 50%;
  height: 3px;
  display: block;
  background-color: #111;
  border-radius: 2px;
  position: absolute;
  transition:
    top 0.5s ease,            /* 上下に動く速度 */
    transform 0.5s, /* 回転の開始を0.3秒遅らせる */
    opacity 0.5s ease;        /* 真ん中の線のフェード用 */
}

.btn-menu span:first-child{
  top:33%;
}

.btn-menu span:nth-child(2){
  top:48%;
}

.btn-menu span:last-child{
  top:65%;
}

/* メニューの位置を中心に */
.banner {
position: fixed;        /* スクロールしても固定 */
top: 0;
left: 0;
width: 100%;
height: 100%;           /* 全画面に広げる */
background-color: rgba(0, 0, 0, 0.7); /* 半透明の背景（任意） */
display: flex;           /* フレックスボックスにする */
justify-content: center; /* 水平方向中央寄せ */
align-items: center;     /* 垂直方向中央寄せ */
z-index: 999;            /* 最前面に表示 */
opacity: 0;             /* 透明にする */
visibility: hidden;     /* クリックを無効にする */
transition: opacity 0.4s ease, visibility 0.4s ease; /* フェードアニメーション */
}

.banner.show {
opacity: 1;
visibility: visible;
}

.banner ul {
list-style: none;
width: 100%;
margin: 0 auto;
padding: 0;
display: flex;
flex-direction: column;     /* 縦並びにする */
justify-content: space-around; /* 均等配置 */
height: 50%;                 /* 均等配置のための高さ（調整可） */
text-align: center;
}

.banner ul li{
padding: 0;
}

.banner li a {
color: white;             /* テキストカラー（任意） */
font-size: 24px;          /* 大きめの文字（任意） */
text-decoration: none;
}

/* li を初期状態で非表示にする */
.banner li {
opacity: 0;
transform: translateY(20px);
}

/* show クラスがついたらアニメーション開始 */
.banner.show li {
animation: fadeUp 1.5s ease forwards;
}

/* フェードアップの定義 */
@keyframes fadeUp {
0% {
  opacity: 0;
  transform: translateY(20px);
}
100% {
  opacity: 1;
  transform: translateY(0);
}
}

/* 順番にディレイをかける（重要！） */
.banner li:nth-child(1) {
animation-delay: 0.1s;
}
.banner li:nth-child(2) {
animation-delay: 0.3s;
}
.banner li:nth-child(3) {
animation-delay: 0.5s;
}
.banner li:nth-child(4) {
animation-delay: 0.7s;
}

.banner li:nth-child(5) {
animation-delay: 0.9s;
}

/* 中央に集まる動き（closing中） */
#btn-menu.closing span:nth-child(1),
#btn-menu.closing span:nth-child(3) {
top: 48%; /* 真ん中に寄る */
transform: none;
}

/* バツ（active中） */
#btn-menu.active span:nth-child(1) {
top:48%;
transform: rotate(45deg);
background-color: #ffffff;
}

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

#btn-menu.active span:nth-child(3) {
top:48%;
transform: rotate(-45deg);
background-color: #ffffff;
}

#btn-menu.active:hover{
background-color: #ff9933;
}

/*
header
================================================ */
header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-item{
  position: static;          /* absolute解除 */
  display: flex;
  flex-direction: column;
  align-items: center;       /* 横中央 */
  justify-content: center;   /* 縦方向の中身中央 */
  text-align: center;
  margin: 0 auto; 
  width: 100%;
  height:100%;  
}

.header-title h3{
  font-size:28px;
}

/*
header
================================================ */

.banner-back{
  width:0%;
  height: 0px;
}

.header-title{
  top:50%;
  left:5%;
}

.header-title h1::after{
  width: 105%;
}

/*
top-wrapper
================================================ */
.teacher {
  top:97%;
}

.top-box{
  display: flex;
  flex-direction: column-reverse;
  justify-content: start;
  padding-top: 50px;
}

.top-text{
  width:95%;
  margin: 0 auto;
  padding-top: 20px;
}

.top-image{
  width:95%;
  margin: 0 auto;
}

.top-image img{
  width: 100%;
  height: auto;
  margin-top: 0px;
}

/*
main-wrapper
================================================ */
.main-title{
  padding-top: 50px;
  margin-left: 0px;
  margin-bottom: 50px;
}

.main-grid-box{
  grid-template-columns: 1fr;
}

.Introduction {
  top:98.5%;
}

/*
bottom-wrapper
================================================ */
.bottom-wrapper{
  padding-top: 50px;
}

.bottom-title{
  font-size: 14px;
  width: fit-content;
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 50px;
}

.bottom-title h1::after{
  width: 0%;
  height: 0px;
}

.bottom-link{
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.bottom-detail{
  margin: 0 auto;
  width:90%;
}

.bottom-detail:first-child{
  margin: 0 auto;
  margin-bottom: 20px;
}

.inquiry-btn{
  left: 2%;
  bottom:-9%;
}

.inquiry-btn1{
  width: 95%;
}

/*
footer
================================================ */
.footer-list{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.list-title{
  margin-bottom: 20px;
  border-bottom: 1px solid #ffffff;
}

.footer-list1,
.footer-list2,
.footer-list3,
.footer-list4{
  margin-bottom: 15px;
  padding-bottom: 15px;
}

.footer-list1 ul li,
.footer-list2 ul li,
.footer-list3 ul li,
.footer-list4 ul li{
  margin-bottom: 5px;
}
}