@charset "utf-8";
/* CSS Document */

/******************************

[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
	3.2 Header Content
	3.3 Logo
	3.4 Main Nav
	3.5 Hamburger
4. Menu
5. Section
6. Home
7. Features
8. Courses
9. Counter
10. Events
11. Team
12. News
13. Newsletter
14. Footer



******************************/

/***********
1. Fonts
***********/

@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
/*********************************
2. Body and some general stuff
*********************************/

/* 等線体
font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif; */

* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}

body {
  font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  background-image: url("../images/レンガ壁.jpg");
  background-repeat: repeat;
  background-size:20%
}

div {
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  list-style: none;
  margin-bottom: 0px;
}

p {
  font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.85;
  font-weight: 900;
  color: #76777a;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}

p a {
  display: inline;
  position: relative;
  color: inherit;
  border-bottom: solid 1px #ffa07f;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

p:last-of-type {
  margin-bottom: 0;
}

a,
a:hover,
a:visited,
a:active,
a:link {
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}

p a:active {
  position: relative;
  color: #ff6347;
}

p a:hover {
  color: #ffffff;
  background: #ffa07f;
}

p a:hover::after {
  opacity: 0.2;
}

::selection {
}

p::selection {
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  color: #384158;
  margin-bottom: 0;
}

h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {
}

.form-control {
  color: #db5246;
}

section {
  display: block;
  position: relative;
  box-sizing: border-box;
}

.clear {
  clear: both;
}

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

.float_left {
  float: left;
}

.float_right {
  float: right;
}

.trans_200 {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.trans_300 {
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.trans_400 {
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}

.trans_500 {
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.fill_height {
  height: 100%;
}

.super_container {
  width: 100%;
  overflow: hidden;
}

.prlx_parent {
  overflow: hidden;
}

.prlx {
  height: 130% !important;
}

.parallax-window {
  min-height: 400px;
  background: transparent;
}

.nopadding {
  padding: 0px !important;
}

/*********************************
3. Header
*********************************/


.image_header {
  background-image: url("../images/top_back.png");
  display: block;
  position: relative;
  object-fit: cover;
  height: 400px;
  width: 100%;
}

.image_header::after {
  content: "";
  background: rgba(43, 123, 142, 0.15);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.header_info {
  position: absolute;
  top: 50%;
  padding-left: 5%;
}

.header_info div:first-child {
  text-align: left;
  font-size: 50px;
  letter-spacing: 3.45px;
  color: rgba(146, 222, 241, 1);
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.39);
  text-transform: uppercase;
  opacity: 1;
}

.header_info div:nth-child(2) {
  text-align: left;
  font-size: 18px;
  letter-spacing: 2.7px;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
}

.title {
  text-align: left;
  font-size: 32px;
  letter-spacing: 0;
  color: #000000dd;
  text-transform: uppercase;
  opacity: 1;
  border-bottom: 4px solid #4aa0b5;
  width: fit-content;
}


.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: #34B6BF;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.header.scrolled {
  top: -40px;
}

/*********************************
3.2 Header Content
*********************************/

/* TOPページ用調整 */
.header_container {
  width: 100%;
}

.header_content {
  height: 90px;
}

.header.scrolled .header_content {
  height: 80px;
}

/* TOPページ専用ヘッダー */
.header-home {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  background: transparent; /* 最初は背景なし */
  transition: transform 0.4s ease;
  background: 0.4s ease;
}

.header-home.hide {
  transform: translateY(-100%);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);

}

/* ハンバーガーメニュー調整 */
.navbar-toggler {
  background: #34B6BF;     /* 丸めの背景 */
  border: none;            /* 余計な枠線を消す（Bootstrap対策） */
  border-radius: 50%;      /* 丸くする */
  width: 48px;             /* アイコン背景の大きさ */
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease;
  background: 0.3s ease;
}

.navbar-toggler:hover {
  background: #2ca2aa;     /* ホバーで少し暗く */
}

.toggle-menu {
  color: #fff;             /* アイコンを白に */
  font-size: 22px;         /* 適度なサイズ感 */
}


/*********************************
3.3 Logo
*********************************/

/*********************************
3.4 Main Nav
*********************************/

.main_nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.main_nav li {
  display: inline-block;
  position: relative;
}

.main_nav li:not(:last-child) {
  margin-right: 20px;
}

.dropdown-toggle::after {
  content: none;
}

.main_nav li a {
  font-size: 24px;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-shadow: 2px 2px 4px #34B6BF;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.main_nav li a:hover,
.main_nav li.active a {
  color: #ffd39a;
  text-decoration: underline;
}

.dropdown-item:hover {
  color: #000000dd !important;
}

.main_nav li a > p {
  color: #ffffff;
}

/*********************************
3.5 Hamburger
*********************************/

/*********************************
4. Menu
*********************************/

/*********************************
5. Home
*********************************/

.home {
  width: 100%;
  /* height: 850px; */
}

.home_title {
  letter-spacing: 3.2px;
  color: #000000;
  text-transform: uppercase;
  font-size: 32px;
}

.home_title_sub {
  font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  letter-spacing: 0.7px;
  color: #00000099;
  opacity: 1;
  font-size: 14px;
  border-bottom: 2px solid #4aa0b5;
  margin-bottom: 20px;
  width: fit-content;
}

/* メインビジュアル */
.main-visual {
  position: relative;
  width: 100%;
  height: 100vh; /* 画面高さ分を確保 */
  overflow: hidden;
  z-index: 3;
  box-shadow: 0px 10px 10px rgba(34, 17, 14, 0.1);
}

.mv-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 画像がマウスイベントを邪魔しないように */
}

.mv-layer img {
  position: absolute;
  top: 50%; /* top left transform の組み合わせによって「親の中心に自分の中心を合わせる」ことができる */
  left: 50%; 
  width: 110%; /* 少し大きめにしてズレても背景が見えないように */
  height: auto;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  object-fit: cover;
  pointer-events: none;
}

/* 幅が狭くなるほど拡大率を上げる */
@media screen and (max-width: 1440px) {
  .mv-layer img {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@media screen and (max-width: 1280px) {
  .mv-layer img {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@media screen and (max-width: 1080px) {
  .mv-layer img {
    transform: translate(-50%, -50%) scale(1.5);
  }
}

/* デフォルトはパララックス表示 */
.mv-sp {
  display: none;
}

/* 860px以下でパララックスを非表示、1枚画像を表示 */
@media screen and (max-width: 860px) {
  .mv-layers {
    display: none;
  }

  .mv-sp {
    display: block;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .mv-sp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* crossover */
.crossover {
  position: relative;
  z-index: 4; /* パララックスより上、introより下にするなら調整可 */
}

.crossover img {
  position: absolute;
  right: 0;              /* ブラウザ右端に固定 */
  top: -150px;           /* パララックス側に少しはみ出す */
  width: 25%;          /* 大きさ調整 */
  height: auto;
  z-index: 5;
  pointer-events: none;  /* マウス操作を邪魔しない */
}


/*********************************
6. Section
*********************************/

.introduction {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%; /* これが重要：高さを確保 */
  z-index: 1;
}

.intro-bg img {
  width: 70%;
  height: auto;
  margin: 4% 15%;  /* width + margin が100％になるようにする */
  object-fit: cover;
  object-position: center;
}

.intro-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}

.intro-icon img {
  width: 80%;
  transform: translate(25%, -5%); /* 右に40px、上に-60px（＝パララックスに重なる） */
  z-index: 1; /* パララックスより下は配置 3 以下に調整 */
  position: relative;
}

.intro_social ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(35px, 4vw, 55px);
  height: clamp(35px, 4vw, 55px); 
  margin-bottom: 3%; 
  border-radius: 10%;
  transition: all 200ms ease;
}

.intro_social ul li:first-child {
 background: #000; 
}

.intro_social ul li:last-child { 
  background: #4a6eb9; 
}

.intro_social ul li:not(:last-child) {
  margin-right: 10px;
}

.intro_social a svg {
  width: clamp(24px, 3vw, 35px);
  height: auto;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.intro_social a:hover svg {
  transform: scale(1.1);
  opacity: 0.8;
}

.intro_social {
  width: 70%;
  border-bottom: 3px dashed #34B6BF;
}

.intro-text {
  position: relative;
  top: 80px; /* ← ここで調整（例: 40px～80pxくらいで試す） */
  transform: rotate(-4deg) translate(10px, -20px) translateY(-2%); /* やや右上がりに傾ける、要素自体の高さに対して下げる */
  transform-origin: left center;
}

/* 見出しと本文をVW基準で可変 */
.intro-text h2 {
  font-size: clamp(24px, 6vw, 96px); /* 画面幅で自動拡縮 */
}

.intro-text p {
  font-size: clamp(10px, 1.5vw, 24px);
  line-height: 1.4;
  margin-bottom: 3%; 
}

/* スマホ・タブレット対応 */
@media screen and (max-width: 1630px) {
  .intro-text {
  transform: rotate(-4deg) translate(10px, -20px) translateY(-12%); /* やや右上がりに傾ける、要素自体の高さに対して下げる */
  }
}

@media screen and (max-width: 768px) {
  .intro-content {
    flex-direction: column;
    text-align: center;
  }

  .intro-icon img {
    width: 50%;
    transform: translateY(-15%);
    margin-bottom: 20px;
    width: 220px;
  }

  .intro_social {
    display: flex;
    justify-content: center;
    width: 40%;
  }

  .intro_social ul {
    justify-content: center;
    padding: 0;
  }

  .intro-text {
    transform: rotate(-4deg) translate(10px, -20px) translateY(-40%); /* やや右上がりに傾ける、要素自体の高さに対して下げる */
  }
}

/* ページボタン */ 


.page-buttons {
  position: relative;
  text-align: center;
  margin-top: 80px; /* introに少しかぶせる場合 */
  z-index: 4;
}

.page-container {
  display: flex;
  justify-content: center;
  gap: 80px;
  position: relative;
}

.page-item { /* 丸ボタンのサイズ調整 */
  position: relative;
  width: 220px;
  height: 220px;
}

.page-btn { /* 丸ボタンの設定 */
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 0% 30%, #8fe5d7, #34B6BF);
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border: 3px solid #34B6BF;
}

.page-btn:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.page-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid #fff;
  transform: scale(0.95);
  opacity: 1;
  transition: transform 0.8s ease, opacity 0.6s ease;
}

.page-btn:hover::before { /* ホバー時に枠が中央に縮小して消える */
  transform: scale(0);
  opacity: 0;
}

.page-bg { /* スライド画像の調整 */
  position: absolute;
  bottom: 0px; /* ホバー前の初期位置（ホバー後の位置は下記の:hoverで調整） */
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 1;
}

.page-item:hover .page-bg { /* ホバーでスライド調整 */
  bottom: 150px; /* 上にせり上がる位置調整 */
  opacity: 1;
}

/* CONTACT専用 背景切り替え */
.contact-bg {
  position: absolute;
  width:100px;
  height: 100px; /* 画像の表示範囲の調整 */
  z-index: 1;
}

.contact-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 0.8s ease;
}

.works-bg { /* 各ボタン用の画像 */
  background-image: url("../images/ハスク_btn.png");
}

.illust-bg {
  background-image: url("../images/ファイス_btn.png");
}

/* 最初に見える画像 */
.contact-bg .img1 {
  background-image: url("../images/CONTACTbtn.png");
  opacity: 1;
  width: 400px; /* width height 画像の表示範囲の調整 */
  height: 850px;
  left: 50%; /* left top translate(横,縦) 画像位置の調整 */
  top: 50%;
  transform: scale(0.6) translate(-55%, -127%); /* ← scaleで画像自体を比率で小さくできる */
}

/* ホバー後に表示される画像 */
.contact-bg .img2 {
  background-image: url("../images/CONTACTbtn_hover.png");
  opacity: 0;
  width: 500px; /* width height 画像の表示範囲の調整 */
  height: 660px;
  left: 50%; /* left top translate 画像位置の調整 */
  top: 50%;
  transform: scale(0.63) translate(-47%, -145%);/* ← scaleで画像自体を比率で小さくできる */
}

/* CONTACTボタンホバー時のフェード切り替え */
.page-item:hover .contact-bg .img1 {
  opacity: 0;
}

.page-item:hover .contact-bg .img2 {
  opacity: 1;
}


/* スマホ・タブレット対応 */
@media screen and (max-width: 768px) {
  .page-container {
    flex-direction: column;
    gap: 40px;
  }

  .page-bg {
    width: 160px;
    height: 160px;
  }
}


/* UPDATE LOG 16:9で調整してみる */
.information {
  position: relative; /* ← 背景画像とタイトルを重ねるための基準 */
  width: 100%;
  aspect-ratio: 16 / 9; /* ← 高さを横幅から自動算出 */
  padding-top: 0;
  text-align: center;
}

.info-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.info-bg  img {
  position: absolute; /* ← 背景を固定配置に */
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%); /* 画像を中央配置 */
  object-position: top center;
  object-fit: cover; 
  z-index: 0;
}

.info-content {
  position: relative;
  padding-top: clamp(32px, 5vw, 80px);
  z-index: 1;
  text-align: center;
}

.info-name {
  font-size: clamp(32px, 5vw, 80px);
  font-weight: 700;
}

.info-item {
  margin: 10px auto;
  width: 40%;
  max-width: 800px;
  text-align: left;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  padding: 10px;
  transition: background-color 0.3s ease;
}

.info-item:hover {
  background: rgba(255,255,255,0.6);
}

.info-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.info-title {
  white-space: nowrap;            /* 折り返さない */
  overflow: hidden;               /* はみ出した部分を隠す */
  text-overflow: ellipsis;        /* 「...」を表示 */
  display: block;
  width: 90%;
  flex: 1;
  margin: 0 10px;
  font-size: clamp(12px, 1.5vw, 28px);
}

.info-date {
  font-size: 0.9rem;
  opacity: 0.8;
}

.info-excerpt {
  white-space: nowrap;            /* 折り返さない */
  overflow: hidden;               /* はみ出した部分を隠す */
  text-overflow: ellipsis;        /* 「...」を表示 */
  display: block;
  width: 90%;
  margin-top: 10px;
  font-size: clamp(10px, 1.2vw, 20px);
  line-height: 1.6;
}

.cat-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
}

.cat-label.banner {
  background-color: #ff6b6b;
}
.cat-label.tips {
  background-color: #4ecdc4;
}
.cat-label.other {
  background-color: #3d87e7;
}
.cat-label.original {
  background-color: #58cc75;
}
.cat-label.fanart {
  background-color: #e99527;
}


/*********************************
7. WORKS
*********************************/

.works-post-header {
  background-image: url("../images/top_back.png");
  display: block;
  position: relative;
  object-fit: cover;
  height: 300px;
  width: 100%;
}

.header_info {
  width: 70%;
  border-bottom: solid 4px #34B6BF;
}

/*ソートボタンここから*/
.filter-buttons {
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
}

.filter-buttons button {
  background: #fff1d4;
  border: solid 6px #384158;
  border-radius: 50px;
  padding: 4px 4px;
  cursor: pointer;
  color: #384158;
  font-size: 1.8rem;
  font-weight: 600;
  font-style: italic;
  transition: 0.2s;
}

.filter-buttons button:hover {
  background: #333;
  color: #fff;
}

.filter-buttons button.active {
  background: #34B6BF;
  color: #fff;
}
/*ソートボタンここまで*/

.works-post-container {
  width: 100%;
}

.content-body {
  width: 100%;
  padding-left: 5%;
  padding-right: 2%;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 横並び・自動折り返し */
  gap: clamp(20px, 3vw, 40px); /* 画面幅に合わせて伸縮、最小20px */
  margin: 20px 0;
}

.work-card { /* カード疑似要素の設定 */
  background: #fff1d4;
  border: solid 4px #774128;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.work-card:hover {
  transform: translateY(-4px);
}

.thumbnail-link img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.card-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.work-title {
  font-size: 1.3rem;
  border-bottom: dashed #d8baa2;
}

.work-title a {
  font-weight: 700;
  color: #384158;
}

.work-client {
  font-size: 0.9rem;
}

.work-date {
  margin-top: auto; /* 一番下に寄せる */
  text-align: right;
  font-size: 0.85rem;
  color: #888;
}

.works-category-bg {
  position: fixed;
  bottom: 60px;
  left: -80px;
  width: 500px;
  z-index: -1;
  opacity: 0.4;
  pointer-events: none; /* クリックできないようにする（重要） */
  }

.illust-category-bg {
  position: fixed;
  bottom: 60px;
  left: -80px;
  width: 500px;
  z-index: -1;
  opacity: 0.4;
  pointer-events: none; /* クリックできないようにする（重要） */
  }

/* ページネーションの実装 */
.post-pagination {
  text-align: center;
  margin-bottom: 20px;
}

.post-pagination ul {
  display: inline-flex;
  list-style: none;
  padding: 0;
  gap: 10px;
}

.post-pagination li {
  margin: 0;
}

.post-pagination a,
.post-pagination span {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 9999px; /* 両端丸く */
  background: #eee;
  color: #333;
  text-decoration: none;
  transition: all 0.2s;
}

.post-pagination a:hover {
  background: #333;
  color: #fff;
}

.post-pagination .current {
  background: #34B6BF;
  color: #fff;
  font-weight: bold;
}


/* スマホで横並びに変更 */
@media (max-width: 768px) {
  .works-post-header {
    height: 200px;
  }

  .cat-per-title {
    width: 80%;
  }

  .filter-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
  }

  .filter-buttons button {
    font-size: 1.2rem;
    flex: 1 1 auto; /* 幅を自然に調整 */
    text-align: center;
  }
}

/*********************************
7-1. WORKS-POST(single.php)
*********************************/

.post-container {
  width: 100%;
  margin-bottom: 20px;
}

.profile-box {
  background-color: rgba(248, 240, 237, 0.7);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 20px;
  text-align: center;
}

.profile-image img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
  border: 2px solid #eee;
}

.profile-name {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 6px;
}

.profile-bio {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }

  .post-container {
    margin-left: 0;
}
}
/* プロフィールsideber ここまで */

.post-content {
  background-color: #fff;
  border-radius: 10px;
  padding: 3%;
}

.post-category {
  margin-bottom: 10px;
}

.post-title {
  font-size: 2rem;
  font-weight: bold;
}

.post-meta {
  color: #888;
  font-size: 0.85rem;
  margin-bottom: 20px;
}

.post-thumbnail img {
  width: 100%;
  height: auto;
  max-height: 85vh;
  border-radius: 8px;
  object-fit: contain;
  margin: 0 auto 30px auto;
}

.post-body p {
  line-height: 1.8;
  font-size: 1rem;
  color: #203764;
}

.post-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 100px;
  font-weight: bold;
}

.post-nav a {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  background-color: #34B6BF;
  padding: 3px 1px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

/* ← 前の記事 */
.post-nav .prev a:hover {
  transform: translateX(-6px);
  color: #ffd39a;
}

/* 次の記事 → */
.post-nav .next a:hover {
  transform: translateX(6px);
  color: #ffd39a;
}

/* Tipsカテゴリ調整 */
.demo-frame {
  margin: 40px 0;
  background: rgba(255,255,255,0.05);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.section-title {
  font-size: 1.2rem;
  margin-bottom: 10px;
  border-left: 4px solid #4ecdc4;
  padding-left: 10px;
}
.demo-buttons {
  text-align: right;
  margin-top: 15px;
}

.github-btn {
  display: inline-block;
  background-color: #5f5151;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s, transform 0.2s;
}

.github-btn:hover {
  color: #fff;
  background-color: #4e5555;
  transform: translateY(-2px);
}

/*********************************
8. CONTACT
*********************************/
.page-form {
  padding: 80px 20px;
}

.page-form .form-container {
  max-width: 700px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 40px;
}

.page-form .page-title {
  font-size: 2rem;
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 30px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-bottom: dashed 3px #d8baa2;
}

.wpforms-field-label {
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
  background-color: #fff;
}

.wpforms-field input:focus,
.wpforms-field textarea:focus {
  border-color: #6ba4ff;
  box-shadow: 0 0 0 3px rgba(107,164,255,0.2);
  outline: none;
}

.wpforms-submit-container {
  text-align: center;
  margin-top: 20px;
}

.wpforms-form .wpforms-submit {
  background: radial-gradient(circle at 0% 50%, #8fe5d7, #34B6BF) !important;
  color: #fff !important;
  font-weight: 600;
  border: none;
  padding: 12px 40px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.4s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 3px 8px rgba(52, 182, 191, 0.25);
}

/* ホバー時のアニメーション */
.wpforms-form .wpforms-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(52, 182, 191, 0.3);
}

/* 押した瞬間 */
.wpforms-form .wpforms-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(52, 182, 191, 0.2);
}

/* ===================================
   レスポンシブ
=================================== */
@media (max-width: 768px) {
  .page-form {
    padding: 60px 10px;
  }
  .page-form .container {
    padding: 30px 20px;
  }
  .page-form .page-title {
    font-size: 1.6rem;
  }
}

.AOA-container { /*404*/
  height: 60vh;
}


/*********************************
9. Courses
*********************************/

.courses {
  width: 100%;
  padding-top: 30px;
  padding-bottom: 60px;
}

.courses_row {
  margin-top: 25px;
}

.course {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0px 1px 10px rgba(29, 34, 47, 0.1);
}

.course_image {
  width: 100%;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  overflow: hidden;
}

.course_image img {
  max-width: 100%;
  height: auto;
}

.course_body {
  padding-top: 22px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 23px;
}

.course_title a {
  font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 22px;
  color: #000000dd;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.course_title {
  height: 2.3em;
}

.course_title a:hover {
  color: #14bdee;
}

.course_teacher {
  font-size: 15px;
  font-weight: 400;
  color: #384158;
  margin-top: 6px;
}

.course_text {
  margin-top: 13px;
  height: 2.3em;
}

.course_footer {
  padding-left: 30px;
  padding-right: 30px;
}

.course_footer_content {
  width: 100%;
  /* border-top: solid 1px #e5e5e5; */
  padding-top: 9px;
  padding-bottom: 11px;
}

.campus_footer {
  padding-left: 30px;
  padding-right: 30px;
}

.campus_footer_content {
  width: 100%;
  /* border-top: solid 1px #e5e5e5; */
  padding-top: 9px;
  padding-bottom: 11px;
}

.campus_footer_content > span {
  text-align: left;
  font-size: 15px;
  letter-spacing: 0.45px;
  color: rgba(0, 0, 0, 0.6);
  opacity: 1;
  margin-left: 5px;
}

.campus_footer_content > img {
  margin-left: auto !important;
}


/*********************************
9. Counter
*********************************/

.counter {
  width: 100%;
  background: #ffffff;
  z-index: 2;
}

.counter_background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.counter_background::before {
  content: "";
  background: rgba(43, 123, 142, 0.75);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.counter_content {
  padding-top: 20px;
  padding-bottom: 50px;
}

.counter_title {
  font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  color: #ffffff;
  font-weight: 700;
}

.counter_text {
  margin-top: 19px;
}

.counter_text p {
  color: #ffffff;
}

.milestones {
  margin-top: 39px;
}

.milestone {
  text-align: center;
  width: 200px;
}

.milestone:not(:first-child)::after {
  display: block;
  position: absolute;
  top: 10px;
  width: 1px;
  left: 0;
  height: 70px;
  background: #ffffff;
  content: "";
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.milestone_counter > p {
  font-size: 14px;
  letter-spacing: 2.8px;
  color: #ffffff;
  opacity: 1;
  text-align: center;
}

.milestone_counter > img {
  margin-bottom: 30px;
}

.milestone_number {
  text-align: left;
  font-size: 40px;
  letter-spacing: 2px;
  color: #ffffff;
  opacity: 1;
}

.milestone_count {
  text-align: left;
  color: #ffffff;
}

.milestone_text {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  text-transform: uppercase;
  margin-top: 14px;
}

.counter_form {
  position: absolute;
  top: 0;
  right: 30px;
  width: 380px;
  height: 100%;
  background: #ffffff;
  padding-left: 40px;
  padding-right: 40px;
  box-shadow: 0px 5px 40px rgba(29, 34, 47, 0.15);
}

.counter_form_content {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.counter_form_title {
  font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #384158;
  text-transform: uppercase;
  line-height: 0.75;
  margin-bottom: 41px;
}

.counter_input {
  width: 100%;
  height: 46px;
  border: solid 1px #e5e5e5;
  border-radius: 3px;
  padding-left: 20px;
  outline: none;
  color: #384158;
  font-size: 14px;
}

.counter_input:not(:last-child) {
  margin-bottom: 10px;
}

.counter_text_input {
  height: 90px;
  padding-top: 10px;
}

.counter_options {
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  background-image: url(../images/down.png);
  background-position: center right;
  background-repeat: no-repeat;
}

.counter_input::-webkit-input-placeholder,
.counter_text_input::-webkit-input-placeholder {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #b5b8be !important;
}

.counter_input:-moz-placeholder,
.counter_text_input:-moz-placeholder {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #b5b8be !important;
}

.counter_input::-moz-placeholder,
.counter_text_input::-moz-placeholder {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #b5b8be !important;
}

.counter_input:-ms-input-placeholder,
.counter_text_input:-ms-input-placeholder {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #b5b8be !important;
}

.counter_input::input-placeholder,
.counter_text_input::input-placeholder {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #b5b8be !important;
}

.counter_form_button {
  width: 100%;
  height: 46px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  border: none;
  outline: none;
  background: #14bdee;
  cursor: pointer;
  margin-top: 30px;
  box-shadow: 0px 5px 40px rgba(29, 34, 47, 0.15);
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.counter_form_button:hover {
  box-shadow: 0px 5px 40px rgba(29, 34, 47, 0.45);
}

/*********************************
10. Events
*********************************/

.events {
  width: 100%;
  padding-top: 93px;
  padding-bottom: 70px;
  background: #ffffff;
}

.events_row {
  margin-top: 47px;
}

.event_left {
  padding-right: 20px;
}

.event_mid {
  padding-left: 10px;
  padding-right: 10px;
}

.event_right {
  padding-left: 20px;
}

.event_image {
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}

.event_image img {
  max-width: 100%;
}

.event_body {
  padding-top: 30px;
  padding-bottom: 30px;
}

.event_date {
  box-shadow: 0px 1px 10px rgba(29, 34, 47, 0.1);
}

.event_date > div {
  width: 60px;
  height: 60px;
}

.event_day {
  font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 24px;
  color: #14bdee;
  font-weight: 700;
  line-height: 0.75;
}

.event_month {
  font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 14px;
  color: #14bdee;
  font-weight: 400;
  line-height: 0.75;
  margin-top: 9px;
}

.event:hover .event_date > div {
  background: #14bdee;
}

.event:hover .event_day,
.event:hover .event_month {
  color: #ffffff;
}

.event_content {
  padding-left: 20px;
}

.event_title a {
  font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #384158;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.event_title a:hover {
  color: #14bdee;
}

/*********************************
11. Team
*********************************/

.team {
  width: 100%;
  padding-top: 93px;
  padding-bottom: 60px;
}

.team_background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.team_row {
  margin-top: 43px;
}

.team_col {
  margin-bottom: 40px;
}

.team_item {
  width: 100%;
}

.team_image {
  width: 180px;
  height: 160px;
  border-radius: 6px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -86px;
  z-index: 5;
}

.team_image img {
  max-width: 100%;
}

.team_body {
  width: 100%;
  padding-top: 108px;
  padding-bottom: 24px;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0px 1px 10px rgba(29, 34, 47, 0.1);
  text-align: center;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.team_item:hover .team_body {
  box-shadow: 0px 5px 40px rgba(29, 34, 47, 0.15);
}

.team_title a {
  font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #384158;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.team_title a:hover {
  color: #14bdee;
}

.team_subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #76777a;
  margin-top: 6px;
}

.social_list {
  margin-top: 16px;
}

.social_list ul li {
  display: inline-block;
}

.social_list ul li:not(:last-child) {
  margin-right: 10px;
}

.social_list ul li a i {
  font-size: 18px;
  color: #76777a;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.social_list ul li:hover a i {
  color: #14bdee;
}

.team_col .team_item {
  padding-left: 6px;
  padding-right: 6px;
}

.team_col:first-child .team_item {
  padding-left: 0;
  padding-right: 6px;
}

.team_col:nth-child(4n) .team_item {
  padding-left: 6px;
  padding-right: 0;
}

/*********************************
12. News
*********************************/

.news {
  width: 100%;
  padding-bottom: 30px;
  background: #ffffff;
}

.news_row {
  margin-top: 55px;
}

.news_post_large_container {
  padding-right: 30px;
}

.news_post_large {
  width: 100%;
}

.news_post_image {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
}

.news_post_image img {
  max-width: 100%;
}

.news_post_large_title {
  margin-top: 23px;
}

.news_post_large_title a {
  font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #384158;
  line-height: 1.4;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.news_post_large_title a:hover {
  color: #14bdee;
}

.news_post_meta {
  margin-top: 11px;
}

.news_post_meta ul li {
  display: inline-block;
  position: relative;
}

.news_post_meta ul li:not(:last-of-type)::after {
  display: inline-block;
  position: relative;
  content: "|";
  margin-left: 14px;
  margin-right: 11px;
}

.news_post_meta ul li a {
  font-size: 14px;
  font-weight: 400;
  color: #b5b8be;
  letter-spacing: 0.7px;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.news_post_meta ul li a:hover {
  color: #14bdee;
}

.news_post_text {
  margin-top: 13px;
}

.news_post_link {
  margin-top: 19px;
}

.news_post_link a {
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  color: #384158;
  text-decoration: underline;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.news_post_link a:hover {
  color: #14bdee;
}

.news_posts_small {
  margin-top: -6px;
}

.news_post_small:not(:last-child) {
  padding-bottom: 10px;
  border-bottom: solid 2px #e5e5e5;
}

.news_post_small_title a {
  font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 17px;
  letter-spacing: 0.51px;
  font-weight: bold;
  line-height: 1.55;
  color: #000000dd;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.news_post_small_title a:hover {
  color: #14bdee;
}

.news_post_small_title {
  margin-top: 10px;
}

/*********************************
13. Newsletter
*********************************/

/*********************************
14. Footer
*********************************/

.footer {
  display: block;
  position: relative;
  width: 100%;
  background: #34B6BF;
  padding-top: 30px;
}

.footer_title {
  font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  line-height: 0.75;
}

.footer_row,
.copyright_row  {
  margin-right: 0 !important;
  margin-left: 0 !important;
}


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

.footer_about_text {
  margin-top: 31px;
}

.footer_about_text p {
  color: #ffffff;
}

/* フッター調整ここから */

.footer_social ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 10%;
  transition: all 200ms ease;
}

.footer_social ul li:first-child {
 background: #000; 
}

.footer_social ul li:last-child { 
  background: #4a6eb9; 
}

.footer_social ul li:not(:last-child) {
  margin-right: 10px;
}

.footer_social,
.footer_links {
  padding-left: 20px;
}

.footer_social a svg {
  transition: transform 0.2s ease, opacity 0.2s ease;
  vertical-align: middle;
}

.footer_social a:hover svg {
  transform: scale(1.1);
  opacity: 0.8;
}

.footer_links_container {
  margin-top: 85px;
}

.footer_links_container ul li:not(:last-child) {
  margin-bottom: 10px;
}

.footer_links ul {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer_mobile {
  display: inline-block;
  float: right;
}

.footer_mobile_content {
  padding-top: 35px;
}

.footer_section.footer_links a {
  color: white;
  text-decoration: none;
}

.footer_section.footer_links ul li a {
  font-size: 32px;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer_section.footer_links a:hover {
  color: #f1b25e;
  text-decoration: underline;
}

.footer_row {
  align-items: center;
}

.footer_col img {
  max-width: 400px; /* ロゴ画像の最大幅制限 */
  height: auto;
}

.footer_col:last-child {
  flex: 1; /* 右側のSNS＋リンクを広げる */
}

/* フッター調整ここまで */

.footer_image:not(:last-child) {
  margin-bottom: 10px;
}

.copyright {
  height: 40px;
}

.cr_list li {
  display: inline-block;
}

.copyright div {
  font-size: 12px;
  color: #384158;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
}

.cr_text a {
  color: #ffffff;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.cr_text a:hover {
  color: #14bdee;
}

.cr_list li:not(:last-child) {
  margin-right: 50px;
}

.cr_list li a {
  font-size: 14px;
  color: #b5b8be;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.cr_list li a:hover {
  color: #14bdee;
}

/**sidebar */

.sidebar {
  width: 100%;
  padding-left: 54px;
}

.sidebar_search {
  width: 100%;
  /*height: 100px;*/
  /* padding-top: 100px; */
}

.sidebar_search input {
  width: 171px;
  height: 44px;
  border: solid 1px #d9d9d9;
  /* border-radius: 3px; */
  background: #ffffff;
  padding-left: 20px;
}

.sidebar_search button {
  width: 44px;
  height: 44px;
  background: #b39a6b;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  border: none;
  outline: none;
  /* border-radius: 3px; */
  cursor: pointer;
}

.category_title div {
  width: 70px;
}

.category_title h2 {
  text-align: left;
  font-size: 22px;
  letter-spacing: 2.2px;
  color: #000000;
  text-transform: uppercase;
  opacity: 1;
}

.category_title {
  margin: unset;
}

.sidebar_categories {
  margin-top: 16px;
}

.sidebar_categories ul li {
  position: relative;
  border-bottom: solid 1px #0000004c;
  width: fit-content;
  height: 51px;
}

.sidebar_categories ul li a {
  display: block;
  position: relative;
  font-size: 14px;
  color: #000000;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 51px;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.sidebar_categories ul li a::before {
  display: inline-block;
  position: relative;
  font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  content: "\f101";
  margin-right: 4px;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.category {
  margin-top: 50px;
}

.tab_panel_title {
  text-align: left;
  font-size: 32px;
  letter-spacing: 0;
  color: #000000dd;
  text-transform: uppercase;
  opacity: 1;
  border-bottom: 4px solid #4aa0b5;
  width: fit-content;
  margin-bottom: 30px;
  margin-top: 30px;
  font-weight: 700;
}

.tab_panel_header_title {
  text-align: left;
  font-size: 20px;
  letter-spacing: 0.4px;
  color: #000000dd;
  opacity: 1;
  font-weight: 700;
}

.tab_panel_content {
  margin-top: 30px;
}

.tab_panel_text {
  padding-top: 40px;
  padding-bottom: 50px;
}

.social_share {
  padding-bottom: 40px;
  padding-top: 5px;
  float: right;
}

.read_continue > button {
  background: #4aa0b5 0% 0% no-repeat padding-box;
  border-radius: 3px;
  opacity: 1;
  width: 150px;
  height: 40px;
  border: none;
  font-size: 16px;
  color: #ffffff;
  float: right;
  margin: 10px 0 10px 0;
}

.news_title > a {
  text-align: left;
  font-size: 20px;
  letter-spacing: 0.6px;
  color: #000000dd;
  opacity: 1;
  font-weight: bold;
}

.news_detail_title {
  text-align: left;
  font-size: 24px;
  letter-spacing: 0.72px;
  color: #000000dd;
  font-weight: bold;
  margin-top: 10px;
}

.news_time {
  padding: 15px 40px;
  margin: 20px 0px;
  background: #f0f0f0 0% 0% no-repeat padding-box;
  border-radius: 5px;
}

.news_post_meta {
  text-align: left;
  font-size: 14px;
  letter-spacing: 0.28px;
  color: #00000099;
  font-weight: 600;
}

.news_time span {
  text-align: left;
  font-size: 14px;
  letter-spacing: 0;
  color: #000000dd;
  margin-left: 15px;
  font-weight: bold;
}

.news_time div {
  padding: 5px;
}

.image_campus > img {
  height: 128px;
  width: 147px;
  margin-bottom: 35px;
}

.campus_content {
  height: 132px;
}

.contact_form {
  background: #f1f1f199 0% 0% no-repeat padding-box;
  opacity: 1;
  margin-bottom: 30px;
}

.contact_form > form {
  padding: 20px;
}

.input_title {
  padding-top: 30px;
}

.input_title h4 {
  font-weight: bold;
}

.submit_form {
  margin-top: 30px;
  width: 140px;
  height: 48px;
  background: #0000004c 0% 0% no-repeat padding-box;
  border-radius: 3px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}

.news_post_small_header {
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0;
  color: #000000dd;
  text-transform: uppercase;
}

.timeline {
  --uiTimelineMainColor: var(--timelineMainColor, #222);
  --uiTimelineSecondaryColor: var(--timelineSecondaryColor, #fff);
  position: relative;
  padding-bottom: 3rem;
}

.timeline:before {
  content: "";
  width: 4px;
  height: 90%;
  background-color: var(--uiTimelineMainColor);
  position: absolute;
  top: 35px;
}

.timeline__content div {
  text-align: left;
  font-size: 18px;
  letter-spacing: 0;
  color: #000000dd;
  opacity: 1;
  font-weight: bold;
}

.timeline__group {
  position: relative;
}

.timeline__group:not(:first-of-type) {
  margin-top: 4rem;
}

.timeline__year {
  padding: 0.5rem 1.5rem;
  color: var(--uiTimelineSecondaryColor);
  background-color: var(--uiTimelineMainColor);
  position: absolute;
  left: 0;
  top: 0;
}

.timeline__box {
  position: relative;
}

.timeline__box:not(:last-of-type) {
  margin-bottom: 30px;
}

.timeline__box:before {
  content: "";
  font-family: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  background-color: #4aa0b5;
  border: 0.2em solid white;
  border-radius: 50%;
  position: absolute;
  text-shadow: 0 1px 0 #424242;
  left: 86px;
}

.timeline__box::after {
  content: "";
  width: 4%;
  height: 5px;
  border-bottom: 2px dotted #4aa0b5;
  position: absolute;
  top: 47%;
  left: 7.5em;
  z-index: 0;
}

.timeline__date {
  min-width: 65px;
  position: absolute;
  left: 0;
  box-sizing: border-box;
  padding: 0.5rem 1.5rem;
  text-align: center;
  background-color: var(--uiTimelineMainColor);
  color: var(--uiTimelineSecondaryColor);
}

.timeline__day {
  font-size: 2rem;
  font-weight: 700;
  display: block;
}

.timeline__month {
  display: block;
  font-size: 0.8em;
  text-transform: uppercase;
}

.timeline__post {
  padding: 1.5rem 2rem;
  border-radius: 2px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  background-color: #f1f1f19c;
}

.timeline:before {
  left: 100px;
}

.timeline__group {
  margin-top: 55px;
}

.timeline__box {
  padding-left: 170px;
}

.timeline__box:before {
  top: 50%;
  transform: translateY(-50%);
}

.timeline__box span {
  top: 40%;
  position: absolute;
  left: 0;
  color: #000000dd;
  font-weight: bold;
  text-align: left;
  font-size: 22px;
}

.timeline__date {
  top: 50%;
  margin-top: -27px;
}

.timeline {
  --timelineMainColor: #0000004c;
  font-size: 16px;
}

.toggle-menu {
  color: #ffffff;
}

.footer_row {
  padding: 0px 5%;
}

.course_col {
  margin-bottom: 45px;
}

.counter-content {
  padding-left: 10%;
  padding-right: 10%;
}

.content-image {
  margin-top: 10px;
}

.content-image img {
  width: 100%;
  height: 350px;
}