@charset "UTF-8";

/* cssリセット */
body, html {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

/* wrapperは共通 */
.wrapper {
  font-family: 'Zen Kaku Gothic Antique Bold';
  padding: 0px 25px;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column; /* 子要素を縦並びにする */
  text-align: center;/* 各セクションが少なくとも画面の高さに合わせる */
}

img {
   display: block;
   margin-left: auto;
   margin-right: auto;
   max-width: 100%; 
}

p {
  font-size: 1.3rem;
}

a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color:inherit
}

.font-family-bun {
  font-family: 'Bungee', sans-serif;
  font-size: 32px;
}

.font-family-erica {
  font-family: 'EricaOne Regular', sans-serif;
  font-size: 32px;
  font-weight: 400;
}

.font-family-zen {
  font-family: 'Zen Kaku Gothic Antique Bold', sans-serif;
  font-size: 26px;
}

.font-family-inter {
  font-family: 'Inter';
  font-size: 26px;
}

/* ヘッダー */
header {
  background-color: #F7FCBC;
}

.navbar-toggler {
  border: none; /* 境界線を消す */
  background: none; /* 背景色を透明にする */ 
}

/* ハンバーガーメニューを閉じた後にアイコンの周りに表示される枠線を消す */
.navbar-toggler:focus {
  box-shadow: none !important;
 } 

.offcanvas {
  background-color: #000000;
}

#header a {
  color: #F7FCBC;
}

#header #humb_icon {
  max-width: none;
  width: 57.98px;
  height: 37px;
}

#header #humb_fix_icon {
  max-width: none;
  width: 49.86px;
  height: 50.06px;
}

#header .btn-size{
  max-width: none;
  width: 49.86px;
  height: 50.06px;
}

#header .font-family-zen {
  font-family: 'Zen Kaku Gothic Antique Black', sans-serif;
  font-size: 24px;
  font-weight: 900;
}

.btn-close {
  opacity: 1; /* 完全な不透明度に設定 */
  filter: brightness(1); /* 明るさを120%に設定して少し明るくする */
}

/* フォントBungeeの読み込み */
@font-face {
  font-family: 'Bungee';
  src: url('/p/assets/webpage/font/Bungee-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* フォントZen Kaku Gothic Antique Boldの読み込み */
@font-face {
  font-family: 'Zen Kaku Gothic Antique Bold';
  src: url('/p/assets/webpage/font/ZenKakuGothicAntique-Bold.ttf') format('truetype');
  font-style: normal;
}

/* フォントZen Kaku Gothic Antique Blackの読み込み */
@font-face {
  font-family: 'Zen Kaku Gothic Antique Black';
  src: url('/p/assets/webpage/font/ZenKakuGothicAntique-Black.ttf') format('truetype');
  font-style: normal;
}

/* フォントEricaOne-Regularの読み込み */
@font-face {
  font-family: 'EricaOne Regular';
  src: url('/p/assets/webpage/font/EricaOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* フォントInterの読み込み */
@font-face {
  font-family: 'Inter';
  src: url('/p/assets/webpage/font/Inter-VariableFont_slnt,wght.ttf') format('truetype');
  font-weight: 700;
  font-style: bold;
}

/* フォントNoto Sans Japaneseの読み込み */
@font-face {
  font-family: 'Noto Sans Japanese';
  src: url('/p/assets/webpage/font/NotoSansJP-VariableFont_wght.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

.offcanvas-body {
  padding: 0;
  margin-left: 10%;
}

.offcanvas-header {
  padding-bottom: 0;
}

/* Mainvisual */
#mainvisual {
  align-items: center;
  background-color: #F7FCBC;
  color: #000000;
}

#mainvisual p{
  align-items: normal;
  text-align: left;
  width: 100%;
  font-size: 87px;
  font-weight: 700;
}

#mainvisual .top-svg{
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 35px;
  height: 50%; 
  width: 80%;
}

#mainvisual span {
  display: block;
  text-align: left;
  margin-left: 0px;
  margin-right: auto;
  font-weight: 900;
  font-size: 85px;
}

#mainvisual img {
  width: 60%;
  margin-bottom: 20px; /* 画像とテキストの間にマージン */
}

/* MESSAGE */
#message {
  background-color: #F7FCBC;
  height: auto;
  color: #000000;
}

#message p{
  font-weight: bold;
  margin-right: auto;
  text-align: left;
  margin-bottom: 5vh;
}

#message .sub{
  font-size: 32px;
  margin-bottom: 3vh;
}

#message .content{
  font-size: 22px;
}

.title{
  margin-top: 5vh;
  margin-bottom: 4vh;
}

.title-font{
  font-size: 70px;
  font-family: 'EricaOne Regular';
}

.light-green{
  font-weight: bold;
  font-family: 'Zen Kaku Gothic Antique Bold';
  font-size: 30;
  background: #4EF034;
  margin-top: auto;
  margin-bottom: auto;
  padding: 3px 20px 3px;
  color: #000000;
}
/* NEWS・ARCHIVE */
#news {
  min-height: 80vh;
  background-color: #F7FCBC;
  color: #000000;
}

#search_element_app{
  min-height: 50vh;
}

.news_container{
  width: 30%;
}

.news_date{
  font-family: 'Inter';
  font-size: 30px;
  text-align: left;
  padding: 2% 3%;
  margin-bottom: 2vh;
  background-color: #000000;
  color: #F7FCBC;
}

.news_title{
  font-size: 28px;
  height: 5em;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: left;
}

.news_message{
  font-size: 20px;
  height: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: left;
}

.news_img{
  width: 100%;
}

/* ABOUT */
#about {
  background-color: #000000;
  color: #F7FCBC;
}

#about .sub{
  width: 100%;
}

#about .sub p{
  width: 100%;
  display: block;
  font-size: 36px;
  font-weight: 700;
  text-align: center;
}

#about .discription{
  margin-top: 4rem;
  margin-bottom: 2rem;
}

#about .discription .context{
  width: 80%;
  text-align: left;
  border: solid;
  border-width: 2px 0px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -2px;
  font-size: 24px;
  padding: 1rem 0rem;
}

.button-box{
  width: 80%;
  height: 74px;
  display: flex;
  justify-content: center;
  position: relative;
  font-family: 'EricaOne Regular', 'Zen Kaku Gothic Antique Bold';
  font-size: 30px;
  margin: 0.5em auto 5rem;
  border: solid;
  border-width: 3px;
  border-color: #000000;
  background-color: #F0FF41;
  color: #000000;
}

.center-text{
  font-size: 35px;
  font-weight: bold;
  text-align: center;
  margin-top: 8px;
  margin-bottom: auto;
}
.button-box .right {
  font-size: 20px;
  position: absolute;
  right: 0px;
  padding-right: 1rem;
  top: 28%;
}

/* CURRICULUM */
#curriculum {
  background-color: #F7FCBC;
  color: #000000;
}

.curriculum-text {
  text-align: left;
  font-size: 24px;
  font-weight: 700;
}

.curriculum-svg {
  margin-top: 10vh;
  margin-bottom: 8vh;
}

#curriculum .button-box {
  width: 100%;
}

/* TEACHER */
#teacher {
  background-color: #F7FCBC;
  color: #000000;
}

/* EVENT */
#event {
  background-color: #000000;
  color: #F7FCBC;
}

/* OTHER */
#other {
  background-color: #F7FCBC;
  color: #000000;
}

#other .content {
  font-family: 'EricaOne Regular';
  font-size: 30px;
  padding:0.5em;
  margin:0.5em;
}

#other .buttons{
  align-items: center;
  padding: 5% 0;
}

#other .buttons .content{
  width: 80%;
  display: block;
  font-family: 'Bungee', 'Zen Kaku Gothic Antique Bold';
  font-size: 30px;
  padding:0.5em;
  margin:0.5em;
  border: solid;
  border-width: 3px;
  background-color: #F0FF41;
}

.buttons_font{
  font-size: 36px;
}

.other_img_container{
  margin-top: auto;
  margin-bottom: auto;
  width: 60%;
}

.other_img_container .other-svg{
  width: 100%;
}

.in_page_transition {
  width: 20%;
  text-align: left;
}

.box{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* フッター */
#footer {
  font-family: 'Zen Kaku Gothic Antique Black';
  position: sticky;
  background-color: #000000;
  color: #F7FCBC;
  padding-top: 1%;
  padding-bottom: 2%;
}

.wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: column;
  height: 100%;
  margin: 0 0 1em;
}
.between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.around {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

#carrerpath {
	min-height: 100vh;
  background-color: #F7FCBC;
}

.fs-description {
  font-family: 'Zen Kaku Gothic Antique Bold';
  font-size: 40px;
}
.fp {
  text-align: center; 
}
.fs {
  font-family: 'Zen Kaku Gothic Antique Bold';
  font-size: 40px;
  font-weight: bold
}

.return-btn {
  margin: 1rem 0px;
  margin-left: 7%;
  display: block;
  font-family: 'Zen Kaku Gothic Antique Bold';
  font-size: 20px;
  padding: 3px;
  width: max-content;
  border: solid;
  border-width: 3px;
  background-color: #F0FF41;
}

#about-detail {
	min-height: 100vh;
  background-color: #F7FCBC;
}