@charset "UTF-8";
/*
Theme Name: Tutrial3
Theme URI: http://walkal.com
Description: WP theme for Tutrial
Version: 1.0
Author: Walkal Inc.
Author URI: http://walkal.com/
*/
html {scroll-behavior: smooth;}
body {
    font-family: "Noto Sans JP", sans-serif;
    margin: 0;
    padding: 0;
    color: #333333;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: normal;
}
p {line-height:180%;font-size:clamp(18px, 1.2vw, 25px);}

.h4-blue {
    font-size:clamp(23px, 1.3vw, 28px);;
    color: #024696;
    font-weight: bold;
	margin-top:5%;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}


header {
    width: 100%;
    background-color: #FFFFFF;
    padding: 5px 10px;
    margin: 0;
    position: fixed;
    z-index: 2;
    top: 0;
    transition: top 0.3s ease-in-out;
	height:70px;
}

header.hidden {
    top: -100px;
}



@media (min-width: 769px) {
    .other {
        width: calc(100% - 270px);
    }
}
header a {
    text-decoration: none;
}
header h1 {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}
header h1 img {
    max-width: 75%;
    display: block;
}
@media (max-width: 768px) {
    header {
        background-image: none;
        height: 50px;
        display: flex;
        align-items: center;
    }
}
footer {
	position:relative;
    background-color: #efefef;
    padding: 0;
    transition: margin-right 0.3s;
}

footer a {text-decoration:none;}

#movie {
    position: relative;
    width: 100%;
    padding-top: 56.25vw; /* default 56.25% */
    background-color: #FFFFFF; /* 背景色設定 */
	margin-top:80px;
	z-index:1;
}
#movie video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill; /* default:contain */
}
#slideshow-container {
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 400px;
	max-height:303px;
	opacity: 0;
    transition: opacity 0.3s ease;
}
#slideshow {
    width: 96%;
    height: auto;
    overflow: hidden;
    margin: 2%;
}
.slides {
    display: flex;
    transition: transform 1s ease;
    /*width: 700%;*/
}
.slide {
    width: 96%;
    height: auto;
    padding: 2%;
    margin: auto;
	background:#FFFFFF;
}
.buttons {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}
.button {
    width: 12%;
    height: 6px;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0 3%;
}
.button.active {
    background-color: #26cbdd;
}
.page_head {
    margin: 0;
    padding: 0;
    transition: margin-right 0.3s;
    position: relative;
    text-align: center;
}
.page_head img {width:100%;}

.page_head .overlay_text {
    position: absolute;
    top: 50%; /* 縦中央 */
    left: 50%; /* 横中央 */
    transform: translate(-50%, -50%); /* 中央揃え */
}
.page_head .overlay_text-greeting {
    position: absolute;
    top: 50%; /* 縦中央 */
    left: 5%; /* 横中央 */
	right:50%;
    transform: translate(0, -50%); /* 中央揃え */
}

.page_head_sub {
    margin: 5% 0;
    padding: 0 2%;
    transition: margin-right 0.3s;
    position: relative;
    text-align: center;
}
@media screen and (max-width: 768px) {
    .page_head .overlay_text-greeting {
    position: absolute;
    top: 50%;
    right: 40%;
	}
}
main {
	position:relative;
    margin: 0;
    padding: 0;
    transition: margin-right 0.3s;
}
.post_area {
    background: url(images/news_back.png);
    background-repeat: repeat-y;
    background-size: 100%;
    padding: 5% 0;
	/* overflow-x:hidden; */
}

article {
    margin: 0 5% 0 5%;
    padding: 5%;
    background: #FFFFFF;
}
@media screen and (max-width: 768px) {
    article {
        margin: 5% 5% 0 5%;
    }
}
#sidebar {
    position: fixed;
    top: 0;
    right: -250px;
    width: 250px;
    height: 100%;
    background: url(images/menu_bak.png);
    background-repeat: repeat-y;
	background-size:contain;
    color: #333333;
    padding: 0;
    transition: right 0.3s;
    z-index: 99;
}
#sidebar.visible {
    right: 0;
}
#sidebar.visible ~ header,
#sidebar.visible ~ .page_head,
#sidebar.visible ~ .page_head_sub,
#sidebar.visible ~ .dep_head,
#sidebar.visible ~ main,
#sidebar.visible ~ footer {
    margin-right: 245px;
}
#sidebar.visible ~ header.bb-head,
#sidebar.visible ~ main.main-index-bb,
#sidebar.visible ~ main.main-page-bb,
#sidebar.visible ~ footer.bb-foot {margin-right:175px;}
#sidebar h2 {
    margin: 0;
    padding: 0;
}
#sidebar img {
    max-width: 100%;
    height: auto;
}
.menu {
    list-style-type: none;
    padding: 0 0 0 5px;
    margin: 5% 0;
    font-size: 95%;
}
.menu li {
    position: relative; /* 親メニュー項目は相対位置を保持 */
}

.menu .submenu {
    position: fixed; /* ビューポート基準に絶対配置 */
    top: 0; /* 画面の上部に揃える */
    right: 240px; /* サイドバーの右端から250pxの位置に展開 */
    background:url('images/submenu-back001.png');
	background-repeat:repeat-y;
	background-position:right;
    min-width: 250px;
    height: 100vh; /* 画面全体の高さ */
    overflow-y: auto; /* 必要に応じてスクロール可能に */
    padding: 0 10px 0 0;
    margin: 0;
    border-left: 1px solid #c4f3ff;
    border-top: 1px solid #c4f3ff;
    opacity: 0; /* 初期状態で透明 */
    visibility: hidden; /* 初期状態で非表示 */
    transform: translateX(20px); /* 初期位置を右にずらす */
    transition: opacity 0.3s ease, transform 0.3s ease; /* フェードとスライドのアニメーション */
    z-index: 100; /* 他の要素より前面 */
}
.submenu {top:166px!important;}

/* 親メニューまたはサブメニューがホバーされている場合に表示 */
.menu li:hover > .submenu,
.menu .submenu:hover {
    opacity: 1; /* 完全に表示 */
    visibility: visible; /* 表示可能に */
    transform: translateX(0); /* 初期位置から元の位置に戻す */
}
.menu a {
    display: block;
    padding: 0;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s;
}
.menu a:hover {
    background-color: #c4f3ff;
}



.subsubmenu {
    list-style-type: none;
    display: none;
    position: absolute;
    right: 100%;
    top: -1px;
    background-color: #FFFFFF;
    min-width: 250px;
    height: 100vh; /* 高さを100%に設定 */
    padding: 0;
    margin: 0;
    border-left: 1px solid #c4f3ff;
    border-right: 1px solid #c4f3ff;
    border-top: 1px solid #c4f3ff;
}
.submenu li a, .subsubmenu li a {
    min-height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #efefef;
	text-decoration:none;
	color:#333333;
}
.menu li:hover > .submenu,
.submenu li:hover > .subsubmenu {
    display: block;
}
.submenu a, .subsubmenu a {
    display: block;
    width: calc(100% - 10px);
    height: 100%;
    padding: 5px 0 5px 10px;
}
.subsubmenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.subsubmenu ul li a {
    min-height: 34px;
    width: calc(100% - 20px);
    padding-left: 20px;
}
.submenu small, .subsubmenu small{font-size:.75em;}
.submenu-title-orange {background: #FFF4CE;padding: 5px 0 5px 10px;font-weight: 500;border-bottom: 1px solid #ffcc00;}
.submenu-title-pink {background: #feebf4;padding: 5px 0 5px 10px;font-weight: 500;border-bottom: 1px solid #ed7eae;}

/* サブメニューが画面右端にはみ出す場合の対応 */
@media screen and (max-width: 768px) {
    main {
        padding-left: 20px;
    }
	.main-index {padding-top:50.25vw;background: url(images/news_back.png);background-repeat:repeat-y;background-size:100%;}
    #sidebar {
        display: none; /* スマホではサイドバーを非表示にする */
    }
    .submenu, .subsubmenu {
        right: 0;
        top: 100%;
        height: auto; /* 画面サイズが小さい場合の高さを自動調整 */
    }
    .hamburger-menu {
        display: block; /* スマホではハンバーガーメニューを表示する */
        position: fixed;
		z-index:100;
        top: 5px;
        right: 10px;
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
    .hamburger-menu div {
        width: 100%;
        height: 4px;
        background-color: #024696;
        margin: 6px 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .hamburger-menu.open div:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    .hamburger-menu.open div:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.open div:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }
    .mobile-sidebar {
        position: fixed;
        top: 0;
        right: -100%; /* 開閉エフェクト用に初期位置を設定 */
        width: 98%;
        height: 100%;
        background-color: #FFFFFF;
        z-index: 11;
        padding: 1%;
        overflow-y: auto; /* 上下スクロールを有効にする */
        transition: right 0.3s ease; /* トランジションを追加 */
        font-size: 95%;
    }
    .mobile-sidebar img {
        max-width: 75%;
        height: auto;
    }
    .mobile-sidebar.visible {
        right: 0; /* visibleクラスが追加されたときの位置 */
    }
/*    #movie {
        height: 100vh;
        padding-top: 0;
    }*/
	.oc-head {height:0!important;padding-top:56.25%!important;}
    #slideshow-container {
        position: absolute; /* スライドショーコンテナの位置を絶対位置に変更 */
        /*bottom: 15%;*/
		top:56.25vw;
        right: 50%;
        transform: translateX(50%);
        width: 80%; /* 幅を調整して画面に収める */
        margin: 0;
    }
}
@media (min-width: 769px) {
    .mobile-sidebar {
        display: none !important; /* PCではモバイルサイドバーを非表示にする */
    }
}
@media (max-width: 768px) {
    .buttons {
        display: flex; /* ボタンの表示を有効にする */
        justify-content: center;
        padding: 10px 0;
        position: static;
        margin-top: 10px;
    }
    .page_head {
        padding: 0; /* mainエリアに上部の余白を追加 */
        width: 100%; /* mainエリアの幅を100%に設定 */
    }
    .page_head_sub {
        padding: 2%; /* mainエリアに上部の余白を追加 */
        width: 96%; /* mainエリアの幅を100%に設定 */
        font-size: 75%;
    }
	.dep_head {
        padding: 0; /* mainエリアに上部の余白を追加 */
        width: 100%; /* mainエリアの幅を100%に設定 */
    }
    main {
        padding: 0; /* mainエリアに上部の余白を追加 */
        width: 100%; /* mainエリアの幅を100%に設定 */
    }

    footer {
        margin: 0;
        width: 100%; /* mainエリアの幅を100%に設定 */
    }
}
.mobile-submenu,
.mobile-subsubmenu {
    display: none;
    list-style-type: none;
    padding-left: 5px;
    font-size: .9em;
}
.mobile-submenu ul {
    list-style: none;
}
.mobile-menu {
    list-style: none;
    margin: 0;
    padding: 20px 0;
}
.mobile-sidebar h2 {
    width: calc(100% - 60px);
    margin: 0;
    padding: 5px 10px;
}
.mobile-menu li {
    position: relative;
}
.mobile-menu a {
    display: flex;
    align-items: center;
    padding: 10px 3px 10px 10px;
    color: #333;
    border-bottom: 1px solid #efefef;
    text-decoration: none;
    transition: background-color 0.3s;
}
.mobile-menu a:hover {
    background-color: #c4f3ff;
}
.mobile-menu a.has-submenu::after {
    content: "+";
    padding: 0 5px;
    font-weight: bold;
    color: #26cbdd;
}
.mobile-menu a.has-submenu.open::after {
    content: "-";
    padding: 0 5px;
    font-weight: bold;
    color: #024696;
}
.news {
    background: url(images/news_back.png);
    background-repeat: repeat-y;
    background-size: 100%;
    padding: 5% 0;
}
.notice-section {
    margin: 0 5%;
    padding: 5%;
    background: #FFFFFF;
}
.notice-buttons {
    text-align: center;
    margin-bottom: 20px;
}
.notice-buttons button {
    width: 150px;
    height: 38px;
    margin: 0 1% 5px 1%;
    padding: 3px 0 0 0;
    cursor: pointer;
    border-radius: 9999px;
    border: 1px solid #024696;
    background-color: #FFFFFF;
    letter-spacing: 2px;
	font-size:large;
}
.notice-buttons .active {
    background-color: #c4f3ff;
    color: #333333;
}
.notice-category {
    display: none;
    opacity: 0;
    position: relative;
    left: -100%;
    transition: all 0.5s ease;
}
.notice-category.active {
    display: block;
    opacity: 1;
    left: 0;
}
.notice-category ul {
    width: 100%;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    font-size: 85%;
}
.notice-category ul li {
    width: 44%;
    margin: 3%;
    padding: 0 0 2% 0;
    border-bottom: 1px solid #dfdfdf;
}
.notice-category ul li a {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    text-decoration: none;
    color: #333333;
    background-image: url('images/news_navi.png');
    background-repeat: no-repeat;
    background-position: center right;
    opacity: 1.0;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
	font-size: clamp(14px, 1.2vw, 22px);
}
.notice-category ul li a:hover {
    background-image: url('images/news_navi4.png');
    transition: background-image 0.3s ease;
}
.notice-category ul li img {
    max-width: 45%;
    height: auto;
}
.notice-category ul li a img {
    transition: transform 0.3s ease;
}
.notice-category ul li a:hover img {
    transform: scale(1.2);
}

/* 1. 画像を囲む「箱」の設定 */
.notice-category ul li .img-box {
    width: 45%;           /* ★画像の幅指定をここに移動 */
	aspect-ratio: 3 / 2;
    overflow: hidden;     /* ★重要：拡大してはみ出た部分をカットする */
    margin-right: 3%;     /* 右側のテキストとの隙間（必要なら調整） */
    line-height: 0;       /* 画像の下にできる微妙な隙間を消す */
    flex-shrink: 0;       /* Flexboxで箱が潰れないようにする */
}

/* 2. 画像自体の設定 */
.notice-category ul li .img-box img {
    width: 100%;          /* 箱の中で幅いっぱい */
    height: auto;
    max-width: 100%;      /* 念のため */
    transition: transform 0.3s ease; /* アニメーション設定 */
    display: block;
}

/* 3. マウスオーバー時の動き */
.notice-category ul li a:hover .img-box img {
    transform: scale(1.2);
}





.notice-section-bb {
	width:90%;
    margin: 0 5%;
    padding: 5%;
    background: #FFFFFF;
	display:flex;
	justify-content:space-between;
}

.notice-category ul.notice-bb li {
    width: 96%;
    margin: 2%;
    padding: 0 0 2% 0;
    border-bottom: 1px solid #dfdfdf;
}

.notice-bb {flex-direction:column;}
.games-info-bb {width:33%;margin-right:5%;}
.games-info-bb h3 {text-align:center;margin-bottom:2%;}
* --- カード全体 --- */
.games-r-card {
width: 100%;
max-width: 320px;
margin: 0 auto 3% auto;
box-sizing: border-box;
}

/* --- 上部：濃紺ヘッダー --- */
.games-r-header {
  background: linear-gradient(to bottom, #002550, #00509b);
  color: #fff;
  padding: 20px 15px 25px;
  text-align: center;
}

/* タイトル「試合結果」 */
.games-r-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 auto 15px; /* 下に余白 */
  padding-bottom: 5px;
  border-bottom: 1px solid #fff; /* 白い細線 */
  width: 80%; /* 線の長さを調整 */
  color: #fff;
}

/* 対戦エリア全体 */
.games-r-match-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 10px;
}

/* チームごとのブロック */
.games-r-team {
  text-align: center;
  width: 30%; /* チームの幅 */
}

/* チーム名 */
.games-r-team-name {
  font-size: 15px;
  margin-bottom: 5px;
  font-weight: bold;
  white-space: nowrap; /* 折り返し防止 */
	overflow:hidden;
	text-overflow:ellipsis;
}

/* スコアの黒い箱 */
.games-r-score-box {
  background-color: #333; /* 濃いグレー背景 */
  color: #fff;
  width: 100%;
  aspect-ratio: 1 / 1; /* 正方形にする */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px; /* 数字の大きさ */
  font-weight: bold;
  border: 1px solid #ccc; /* 薄い枠線（画像再現） */
  box-sizing: border-box;
}

/* 真ん中の×マーク */
.games-r-vs {
  font-size: 40px;
  font-weight: normal;
  padding-top: 20px; /* スコアボックスの中心に合わせる調整 */
  color: #fff;
  width: 20%;
  text-align: center;
}

/* --- 下部：水色ボディ --- */
.games-r-body {
  background-color: #cceeff; /* 水色背景 */
  color: #333;
  padding: 15px 20px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
	margin-bottom:30px;
}
.games-r-body h4 {font-size:21px;color:#00318b;text-align:center;font-weight:bold;}
.games-r-body h5 {font-size:21px;text-align:center;border-top:1px solid; border-bottom:1px solid;line-height:120%;padding:10px 0;font-weight:bold;}
.games-r-body h5 span {display:block;}

/* 大会名 */
.games-r-tournament {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 18px;
}

/* 日時・場所 */
.games-r-details,
.games-r-place {
  font-size: 15px;
  margin-bottom: 3px;
}
.topics-bb{flex:1;}

.news_about {
    max-width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-right: 2%;
    z-index: 5;
}
.news_about h3 {
    font-size: 95%;
}
.news_cat {
    border: 1px solid #26cbdd;
    padding: 2px 6px;
    margin-bottom: 2px;
    display: inline-block;
    font-size: 75%;
}
.news_date {
    display: block;
}
#scroll-nav {
    position: absolute;
    top: -115px;
    left: 0;
    padding-left: .5%;
    border-radius: 4px;
	z-index:1
}
.campus {
    margin: 0 5%;
    padding: 5%;
    background: #FFFFFF;
}
.campus ul {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}
.campus ul li {
    width: 46%;
    margin: 2%;
}
.campus img {
    max-width: 100%;
    height: auto;
}
.topics {
    background: url(images/news_back.png);
    background-repeat: repeat-y;
    background-size: 100%;
    padding: 5% 0;
}
.topics_wrap {
    margin: 0 5%;
    padding: 5%;
	background:none;
}
.topics_wrap img {
    max-width: 100%;
    height: auto;
}
.topics_wrap ul {
    width: 86%;
    padding: 0;
    margin: 7% auto;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
.topics_wrap ul li {
    margin-bottom: 3%;
}
.cat_all_base {display:flex;justify-content:flex-end;}
.cat_all {
            display: inline-block;
            padding: 8px 30px;
            background-color: white;
            color: #024696;
            text-decoration: none;
            border: 1px solid #024696;
            border-radius: 50px;
            transition: background-color 0.3s ease;
            font-size: 90%;
        }

        .cat_all:hover {
			color:#024696;
            background-color: #c4f3ff;
        }
.cat_all_height {height:1px;}
@media (max-width: 768px) {
    .notice-section {
        margin: 2%;
        padding: 2%;
    }
    .notice-category ul li {
        flex-direction: column;
        width: 98%;
    }
    .notice-category ul li img {
        max-width: 40%;
        margin: 0;
    }
    .news_about {
        max-width: 45%;
        margin-right:2%;
    }
    .campus, .topics_wrap {
        margin: 2%;
        padding: 2%;
    }
    #scroll-nav {
        display: none;
    }
}
@media (max-width: 1024px) {
	.notice-section-bb {width:92%;padding:5% 2%;margin:2%;flex-direction:column;}
}

.title {
    background-image: url(images/titlebar.png);
    background-position:bottom center;
    background-repeat: repeat-x, no-repeat;
    padding-bottom:1px;
    margin-bottom: 5%;
    text-align: center;
}
.title img {border-bottom:6px solid #024696;padding-bottom:0;padding-left:2%;padding-right:2%;}
@media (max-width: 768px) {
    .title {
        background-size: auto, 70%;
		background-position:bottom 3px center;
		padding-bottom: 4px;
    }
    .title img {
        max-height: 40px!important;
		width:auto!important;
    }
}
ul.icons {
    width: 90%;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0 2% 0 8%;
}
ul.icons li {
    width: 40%;
    margin: 5%;
    text-align: center;
}
@media (max-width: 768px) {
    ul.icons {
        width: 98%;
        padding: 0 1% 8% 1%;
    }
}
.strength {
    background: url(images/strength.png), url(images/strength_bottom.png), url(images/strength_middle.png);
    background-repeat: no-repeat, no-repeat, repeat-y;
    background-size: 100%;
    background-position: top, bottom, top;
    padding: 12% 9% 5% 9%;
}
.strength ul {
    width: 100%;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 0;
    margin: 0;
}
.strength ul li {
    width: 23%;
    margin: 1%;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.strength ul li.visible {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 768px) {
    .strength ul li {
        width: 48%;
        margin: 2% 1%;
    }
}
.recruiting img {
    width: 100%;
    height: auto;
}
.recruiting ul {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
.recruiting ul li {
    width: 50%;
}
@media (max-width: 768px) {
    .recruiting ul {
        flex-direction: column;
    }
    .recruiting ul li {
        width: 100%;
    }
}
.f_sitemap {
    padding: 3% 2%;
}
.f_sitemap h5 {
    font-size:clamp(12px, 1vw, 45px);
    min-height: 60px;
    font-weight: bold;
    padding-bottom: 5px;
    margin-bottom: 5px;
    color: #024696;
    border-bottom: 1px solid #024696;
    display: flex;
    align-items: baseline;
    flex-direction: column;
    justify-content: flex-end;
    letter-spacing: 2px;
}
.f_sitemap p {
    font-size: 75%;
}
.font65 {
    font-size: 65%;
}
.font75 {
    font-size: 75%;
}
.f_sitemap {
    width: 100%;
    padding: 2% 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: #efefef;
}
ul.f_s_main {
    width: 99%;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start;
}

ul.bb-f_s_main {
    width: 99%;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start;
}
ul.f_s_main li {
    width: auto;
	min-width:28.5%;
    list-style: none;
	padding:1.5%;
    margin-left: 1%;
}
ul.f_s_main li:last-child {width:94%;}
.f_s_other {
    padding: 0;
    display: flex;
    flex-direction: column;
    color: #024696;
}
ul.bb-f_s_main li {
    width: auto;
	min-width:20%;
    list-style: none;
	padding:1.5%;
    margin-left: 1%;
}
ul.bb-f_s_main li:last-child {width:94%;}
.f_s_other {
    padding: 0;
    display: flex;
    flex-direction: column;
    color: #024696;
}
@media (max-width: 768px) {
    ul.f_s_main {
        flex-direction: column;
		flex-wrap:nowrap;
    }
	ul.bb-f_s_main {
        flex-direction:row;
		flex-wrap:wrap;
    }
	ul.bb-f_s_main li {
    width: auto;
	min-width:45%;
    list-style: none;
	padding:1.5%;
    margin-left: 1%;
}
}
.f_s_other li {
    display: flex;
	justify-content:flex-end;
}
.disclosure {
    color: #333333;
    background-image: url(images/icon_disclosure.png);
    background-repeat: no-repeat;
    padding-left: 20px;
}
.f_s_other h6 {
    font-size: 75%;
    font-weight: bold;
    padding-bottom: 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: baseline;
    flex-direction: column;
    justify-content: flex-end;
    letter-spacing: 1px;
}
ul.f_s_sub {
    display: flex;
    flex-direction: column;
    font-size: clamp(11px, .85vw, 27px);
    line-height: 175%;
    margin-left: 10px;
    padding-left: 1%;
}
ul.f_s_sub li:before {
    content: '＞';
    margin: 0 5px 0 -15px;
}
ul.f_s_sub li ul {
    padding-left: 10px;
    flex-direction: column;
}
ul.f_s_sub a, ul {
    color: #333333;
    text-decoration: none;
    /*transition: text-shadow 0.3s ease, color 0.2s ease;*/
	text-decoration:none;
}
ul.f_s_sub a:hover {
/*color:#024696;
text-shadow: 0 0 5px #26cbdd, 0 0 10px #26cbdd, 0 0 15px #c4f3ff;*/
	text-decoration:underline;
}

.f_icons {
    display: flex;
    align-items: flex-end;
   /* height: 18vh;*/
}
.f_icons img {
    max-width: 100%;
    height: auto;
}
.f_icons a {
    margin: 0 20% 0 0;
}
.f_icons a:hover {background:none;}
@media (max-width: 768px) {
    .f_icons {
        /*height: 15vh;*/
    }
    .f_icons a {
        margin: 0 2.5% 0 2.5%;
    }
}
.f_schools {
    width: 86%;
    padding: 7%;
    background-color: #FFFFFF;
}
.f_schools ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.f_schools img {
    max-width: 100%;
    height: auto;
}
.f_schools span {display:block;margin-bottom:3%;font-size:clamp(12px, 1.3vw, 40px);}

.f_copy {
    width: 96%;
    padding: 2%;
    display: flex;
    justify-content:center;
}
.f_copy p {font-size:70%;}
@media (max-width: 768px) {
    .strength ul li {
        width: 48%;
        margin: 2% 1%;
    }
}
.hover-image {
    display: inline-block;
    cursor: pointer;
    position: relative;
}
.hover-image img {
    display: block;
    transition: opacity 0.2s ease-in-out;
}
.hover-image img:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.hover-image:hover img:nth-child(1) {
    opacity: 0;
}
.hover-image:hover img:nth-child(2) {
    opacity: 1;
}
/* 初期状態 */
.strength ul li {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
/* 表示時 */
.strength ul li.visible {
    opacity: 1;
    transform: translateY(0);
}
/* 初期状態 (campusセクション) */
.campus ul li {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
/* 表示時 (campusセクション) */
.campus ul li.visible {
    opacity: 1;
    transform: scale(1);
}
/* 初期状態 */
.campus ul li a img {
    transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
}
/* ホバー時 */
.campus ul li a:hover img {
    transform: scale(1.1);
    filter: brightness(1.3);
}
/* 初期状態 */
ul.icons li a img, ul.bb-icons li a img, ul.bb-icons2 li a img, ul.bb-icons3 li a img {
    transition: transform 0.3s ease;
}
/* ホバー時 */
ul.icons li a:hover img {
    transform: scale(1.3);
}
ul.bb-icons li a:hover img {
    transform: scale(1.1);
}
ul.bb-icons2 li a:hover img {
    transform: scale(1.1);
}
ul.bb-icons3 li a:hover img {
    transform: scale(1.1);
}
.topics_wrap ul li a img {
    transition: transform 0.3s ease;
}
/* マウスオーバー時 */
.topics_wrap ul li a:hover img {
    transform: scale(1.1);
}
/* 投稿 */
ul.post-pics {
    list-style: none;
    padding: 0;
    margin: 2% 0;
    width: 96%;
    display: flex;
    flex-wrap: wrap;
}
ul.post-pics li {
    width: 24%;
    margin: 0.5%;
    padding: 0;
}
ul.post-pics img {
    max-width: 100%;
    height: auto;
}
/* Zoom effect */
.zoom-effect {
    opacity: 0;
    transform: scale(1);
    transition: opacity 0.3s ease-in-out;
}
.zoom-effect.visible {
    opacity: 1;
    animation: zoomInOut 0.6s ease-in-out forwards;
}
@keyframes zoomInOut {
    0% {
        transform: scale(0.5);
    }
    50% {
        transform: scale(1.2); /* 拡大する倍率を調整 */
    }
    100% {
        transform: scale(1); /* 等倍に戻る */
    }
}
/* Slide up effect */
.slide-up-effect {
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    transform: translateY(50px); /* 初期位置を少し下に */
    opacity: 0; /* 初期は透明 */
    will-change: transform, opacity;
}
.slide-up-effect.visible {
    transform: translateY(0); /* 元の位置に戻す */
    opacity: 1; /* 完全に表示 */
}
/* Slide right effect */
.slide-right-effect {
    opacity: 0;
    transform: translateX(-100px); /* 初期位置を左にオフセット */
    transition: opacity 0.5s ease-in-out;
}
.slide-right-effect.visible {
    opacity: 1;
    animation: slideInRight 0.5s ease-in-out forwards;
}
@keyframes slideInRight {
    0% {
        transform: translateX(-100px); /* 左から */
        opacity: 0;
    }
    100% {
        transform: translateX(0); /* 右にスライドして定位置に */
        opacity: 1;
    }
}

/* 汎用的なホバー拡大クラス */
.scale-on-hover {
    transition: transform 0.3s ease;
}

.scale-on-hover:hover {
    transform: scale(1.05);
}

/* パンくず */
.breadcrumbs {
    font-size: .8em;
    margin: 80px 1% 1% 1%;
}
.breadcrumbs a {
    color: #333333;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs span {
    margin: 0 2px;
}
/* 5大バックアップ */
article.backups {
    margin-bottom: 5%;
}
article.backups h3 {
    width: 92%;
    height: auto;
    padding-left: 8%;
    padding-bottom: 2%;
    margin-bottom: 5%;
    background-image: url(images/backups-h3.png);
    background-repeat: no-repeat;
    background-size: cover;
}
/* Instagram */
.insta_area {text-align:center;padding:2%;background:#FFFFFF;}


article.backups h4 {
    font-size: 1.3em;
    color: #024696;
    font-weight: bold;
}
article.backups p {}
article.backups hr {
    border-top: 1px solid #333333;
}

/* キャンパスライフ トップ */

a.campuslife-hub {width:100%;height:147px;border:1px solid #024696;padding:0;margin:0 0 5% 0;background:url('images/common_navi01.png');background-repeat:no-repeat;background-position: 98% 50%;display:flex;align-items:center;text-decoration:none;color:#333333;transition:background .3s;}
a.campuslife-hub:hover {background:url('images/common_navi02.png');background-repeat:no-repeat;background-position: 98% 50%;transition:background .1s;}
.campuslife-head {width:349px;height:147px;background:url('images/campuslife-head.png');background-repeat:no-repeat;background-size:cover;display: flex;align-items: center;justify-content: center;flex-shrink:0;font-size:175%;letter-spacing:5px;padding:0;margin-right:2%;}
.campuslife-middle {padding-right:50px;}
@media (max-width: 919px) {
	a.campuslife-hub{height:72px;background:url('images/news_navi.png');background-repeat:no-repeat;background-position: 98% 50%;}
	a.campuslife-hub:hover {background:url('images/news_navi2.png');background-repeat:no-repeat;background-position: 98% 50%;}
	.campuslife-head {width:170px;height:72px;font-size:120%;}
	.campuslife-middle {padding-right:25px;font-size:70%;}
}

/* 年間行事 */

.common-h {
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content:space-around;
  width: 100%;
	color:#024696;
	overflow:hidden;
}
.common-h::before, .common-h::after {
  content: '';
  flex-grow: 1;
  height: 1px;
  background-color: #024696;
}
/*.common-h::before {
  margin-right: 10%;
}
.common-h::after {
  margin-left: 10%;
}*/
.h-text {
  display: inline-block;
  white-space: nowrap; 
  font-size:clamp(1.375rem, 0.92rem + 2.27vw, 2.625rem);
	letter-spacing:15px;
  position: relative;
  z-index: 1;
	padding:0 3%;
	margin:0 2%;
}
.h-text::before, .h-text::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 80px;
  height: 9px;
  background-color: #024696;
  transform: translateY(-50%);
  z-index: 0;
}
.h-text::before {
  right: 100%;
}
.h-text::after {
  left: 100%;
}
@media (max-width: 768px) {
  .h-text::before, .h-text::after {
    width: 50px;
  }

  .h-text {
    letter-spacing: 10px;
  }

}

.yearly_h4 {
	width:96%;
    position: relative;
    font-size: 2em;
    padding:0.3em 2%;
    margin: 0 2% 20px 0;
    background: #ffffff;
    display: inline-block;
	border-bottom: 1px solid #333333;
    z-index: 1;
}

.yearly_h4::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background-color: #c4f3ff;
    z-index: -1;
}

.yearly_box {width:100%;display:flex;justify-content:space-between;align-items:flex-start;padding:5% 0;border-bottom:1px dotted #333333;}
.yearly_box img {width:100%;height:auto;}
.yearly_box_end {border-bottom:none;margin-bottom:10%;}
.yearly_box ul {list-style:none;padding:0;margin:0;width:48%;}
.yearly_box ul li p{margin-top:0;/*font-size:85%;*/}
ul.yearly_pics {display:flex;flex-wrap:wrap;}
ul.yearly_pics li {width:49%;margin:0.5%;background-size:cover;}
ul.yearly_pics li img {width:100%;height:auto;}
@media (max-width: 768px) {
	.yearly_box {flex-direction:column;}
	.yearly_box ul {width:100%;}
}


/* 未来へ羽ばたく内定者たち */

.propose_h3 {
	position: relative;
	padding: 10px 20px 10px 90px;
	margin-top:3%;
	margin-left:-6.2%;
	margin-bottom:8%;
	font-size: clamp(25px, 3vw, 3em);
	letter-spacing:5px;
	font-weight:bold;
}

.propose_h3::before {
  content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
    border-top: 2px solid #024696;
    border-right: 2px solid #024696;
}

.propose_h3::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 60px;
  right: 0;
  border-bottom: 2px solid #024696;
}

.propose_h3 span::before {
  content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 40px;
    background-color: #024696;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 75% 100%, 0% 100%);
}
.propose_h3 small {font-size:.5em;}
span.prop_orange::before {background-color:#f9be00;}
span.prop_pink::before {background-color:#ed848c;}
span.prop_sky::before {background-color:#2bc2b5;}
span.prop_green::before {background-color:#84c0bc;}
span.prop_purple::before {background-color:#c1b5d6;}
span.prop_wine::before {background-color:#b43677;}


@media (max-width: 768px) {
	.propose_h3 {
	padding: 5px 0 5px 70px;
	/*font-size:150%;*/
}

.propose_h3::before {
    width: 45px;
}

.propose_h3::after {
  left: 45px;
}
	.propose_h3 span::before {
	width: 60px;
    height: 30px;
}
}


.prop {width:auto;padding-left:50px;margin-left:-6.5%;display: flex;justify-content: space-between;align-items: flex-start;flex-wrap:wrap;font-size:1.2vw;}
.prop_container {width:46%;margin:2%;display:flex;align-items:stretch;background:#efefef;}
.prop_container img {width:50%;align-self:flex-start;}
.prop_container h4 {font-size:95%;background: linear-gradient(0deg, #FFFFFF 0%, #FFFFFF 60%, #efefef 60%, #efefef 100%);padding-bottom:1%;padding-left:2%;margin-top:3%;margin-bottom:1%;}
.prop_container p {font-size:85%;margin:0;padding:0;line-height:150%;}
.prop_container p span {font-size:75%;line-height:100%;}
.prop_name {font-size:108%!important;}
hr.prop_under {height:1px; border:none;border-bottom:1px solid #333333;margin:0;}
.prop_container ul {width:50%;list-style:none;padding:0 0 1% 2%;margin:0;background:#efefef;display: flex;flex-direction: column;justify-content: space-between;}
.prop_container ul li {padding:1.5% 0;}
h5.prop_req {width:80%;max-width:714px;margin:5% auto;}
h6.prop_req {width:80%;max-width:714px;margin:5% auto 15% auto;}
@media (max-width: 939px) {
	.propose_h3_orange, .propose_h3_pink, .propose_h3_sky {width:auto;height:45px;padding-left:50px;}
	.prop {flex-direction:column;width:98%;margin:1%;padding:0;}
	.prop_container {width:96%;}
	.prop_container h4 {font-size:1rem;}
	.prop_container p {font-size:.8rem;}
	.prop_container p span {font-size:.7rem;}
	.prop_name {font-size:1.15rem!important;}
	h5.prop_req {width:100%;}
	h6.prop_req {width:100%;}
	
}
@media (max-width: 768px) {
	.prop_container {flex-direction: column;margin-bottom:15%;}
	.prop_container img {width:100%;}
	.prop_container ul {width:100%;}
	.prop_container ul li {padding:3% 0;}
}

/* 5つの特徴 */
ul.effort_list {width:90%;list-style:none;padding:0;margin:0 5%;display:flex;flex-wrap:wrap;justify-content:space-evenly;font-size: clamp(14px, 1.5vw, 25px);}
ul.effort_list li{min-width:10%;padding:0 0 0 4%;margin:3% 0;background:url('images/common_navi03.png');background-repeat:no-repeat;background-position: 0% 50%;background-size:contain;display:flex;align-items:center;text-decoration:none;color:#333333;transition:background .3s;}
ul.effort_list li:hover {background:url('images/common_navi04.png');background-repeat:no-repeat;background-position: 0% 50%;background-size:contain;transition:background .1s;}
ul.effort_list li a{text-decoration:none;color:#333333;}


.effort {margin-top:10%;margin-bottom:15%;}
.effort_h {line-height:115%;margin-top:-12%}
.effort h4 {color:#024696;font-size: clamp(21px, 3vw, 25px);font-weight:bold;margin-top:7%;}
.effort h5 {
	width:96%;
    position: relative;
    font-size: 1.3rem;
	font-weight:bold;
    margin: 0 0 2% 0;
	background: linear-gradient(white 60%, #c4f3ff 40%);
  border-bottom: 1px solid black; /* 下線 */
  box-decoration-break: clone; /* 装飾を分割 */
  -webkit-box-decoration-break: clone; /* Webkit対応 */
  padding: 0.5em; /* テキストに余白を追加 */
}
.effort p {margin-top:1%;font-size:1.2em;}
.propose_h3 em {color:#024696;font-weight:normal;font-weight: normal;transform: scale(0.7, 1);display: inline-block;margin-left:-10px;letter-spacing:2px;}
em.em_num {font-size:150%;margin-left:-20px;font-weight:500;}
ul.effort_list01 {list-style:none;padding:0 20%;margin:0 -12.5%;background:rgba(239,239,239,.65);display:flex;justify-content:center;text-align:center;}
ul.effort_list01 li {padding:2.5%;}
ul.effort_list01 li img{width:25vw;margin:auto;max-width:328px;}
ul.effort_list02 {list-style:none;padding:0 20%;margin:0 -12.5%;background:rgba(239,239,239,.65);display:flex;justify-content:center;text-align:center;}
ul.effort_list02 li {padding:2.5%;}
ul.effort_list02 li img{width:60vw;margin:auto;max-width:1320px;}
ul.effort_list04 {width:100%;padding:0;margin:0;list-style:none;display:flex;justify-content:space-between;}
ul.effort_list04 li {width:46%;margin:0;}

ul.effort_label {width:100%;list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;margin:5% 0 2% 0;justify-content:space-around;}
ul.effort_label li{width:30%;margin:0 1.66%;}
.effort_box {width: 100%;height: auto;min-height:64px;display:flex;max-width: 340px;background-color: #024696;clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);font-size: clamp(15px, 1vw, 21px);padding: 0;margin:0 auto;color: #FFFFFF;font-weight: bold;letter-spacing: 1px;text-decoration: none;justify-content: center;align-items:center;}
.arrow-heading {display: inline-block;position: relative;padding-right: 2em;}
.arrow-heading::after,.arrow-heading::before {content: "";position: absolute;background-color: currentColor;}
.arrow-heading::after {right: 0;top: calc(50% + 5px);width: 1.7em;height: 1px;transform: translateY(-50%);}
.arrow-heading::before {right: 0;top: calc(50% + 5px);width: 0.8em;height: 1px;transform: translateY(-50%) rotate(45deg);transform-origin: right bottom;}
@media (max-width: 1200px) {
	/*.effort_box {font-size:.9em;}*/
	ul.effort_label li{width:48%;margin:3% 1%;}
}


@media (max-width: 768px) {
	.effort {margin-bottom:20%;}
	.effort_h {line-height:115%;margin-top:-14%}
	ul.effort_list {width:90%;justify-content:flex-start;}
	ul.effort_list li{padding:0 7%;}
	ul.effort_label li{width:100%;margin:3%;}
	.effort_box {font-size:100%;}
	ul.effort_list02 li img{width:88vw;}
	ul.effort_list04 {flex-direction:column;}
	ul.effort_list04 li {width:98%;}
}

/* 統合型選抜について */
.aonyushi {width:90%;margin:2% auto;font-size:clamp(18px, 1.2vw, 24px);}
.aonyushi_h3 {margin-top:15%;}
h4.aonyushi_h4 {font-size:1.2em;font-weight:500;}
ul.aonyushi_ul {width:90%;padding:0;margin:3% auto 0 auto;list-style:none;display:flex;flex-wrap:wrap;font-size: clamp(21px, 1.5vw, 30px);align-items:flex-end;}
ul.aonyushi_ul li:first-child{
	min-width:62%;
    font-size: 1.1em;
    margin: 3% 2% 0 0;
   background: linear-gradient(white 60%, #c4f3ff 40%);
  border-bottom: 1px solid black; /* 下線 */
  box-decoration-break: clone; /* 装飾を分割 */
  -webkit-box-decoration-break: clone; /* Webkit対応 */
  padding:0.5em;
}

ul.aonyushi_ul li{width:auto;font-size:0.8em;}
ul.aonyushi_detail {width:90%;padding:0;margin:3% auto 0 auto;list-style:none;display:flex;flex-wrap:wrap;align-items:flex-end;font-size:clamp(0.8em, 2vw, 1em);}
ul.aonyushi_detail li {width:48%;margin:0 auto;}
ul.aonyushi_detail thead {font-weight:normal;}
ul.aonyushi_detail th {background-color:#dedede;}
ul.aonyushi_detail th:first-child {width:24%;}
.aonyushi_application table {width:90%!important;padding:0;margin:0 auto;font-size:clamp(18px, 1vw, 21px);}
.aonyushi_application table tr {display:flex;}
.aonyushi_application table tr td {border:none;padding:0;}
@media (max-width: 768px) {
	ul.aonyushi_ul{flex-direction:column;align-items:flex-start;}
	ul.aonyushi_ul li:first-child{width:96%;}
	ul.aonyushi_ul li{width:98%}
	ul.aonyushi_detail li {width:98%;margin:0 auto;}
}

.pentawrap {
		width:96%;
		max-width:1200px;
		min-height:150px;
        display: flex;
		flex-wrap: wrap;
		gap: 0;
        margin: 20px auto;
		justify-content:space-around;
        }

        .pentacontain {
            position: relative;
            width: calc(20% - 45px);
			margin-left:5px;
			margin-right:30px;
			flex-shrink: 0;
			margin-bottom:15px;
			font-size: clamp(.6em, 1.2vw, 1em);
        }

        .pentagon {
            width: calc(100% - 30px);
            height: 120px;
			padding:10px 30px;
            background-color: #4A90E2;
            clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%);
            position: absolute;
            top: 0;
            left: 0;
			display:flex;
			align-items:center;
			font-weight:bold;
			color:#FFFFFF;
			z-index:2;
        }
		.pentacontain:first-child .pentagon {
            width: calc(100% - 30px);
			padding:10px 40px 10px 20px;
            background-color: #5d93d3;
            clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
            position: absolute;
            top: 0;
            left: 0;
			display:flex;
			align-items:center;
			font-weight:bold;
			color:#FFFFFF;
        }
		.pentacontain:nth-child(2) .pentagon {
			background-color: #3e7dc7;
		}
		.pentacontain:nth-child(2) .pentagon.second {
			background-color: #6597d2;
		}
		.pentacontain:nth-child(2) .pentagon.third {
			background-color: #FFFFFF;
		}
		.pentacontain:nth-child(3) .pentagon {
			background-color: #1f68be;
		}
		.pentacontain:nth-child(3) .pentagon.second {
			background-color: #4c86cb;
		}
		.pentacontain:nth-child(3) .pentagon.third {
			background-color: #FFFFFF;
		}
		.pentacontain:nth-child(4) .pentagon {
			background-color: #0053b5;
		}
		.pentacontain:nth-child(4) .pentagon.second {
			background-color: #3375c4;
		}
		.pentacontain:nth-child(4) .pentagon.third {
			background-color: #FFFFFF;
		}
		.pentacontain:nth-child(5) .pentagon {
			background-color: #024696;
		}
		.pentacontain:nth-child(5) .pentagon.second {
			background-color: #FFFFFF;
		}
		.pentacontain:nth-child(5) .pentagon.third {
			background-color: #FFFFFF;
		}
		.pentagon.second {
            background-color: #FFD700;
            top: 0px;
            left: 20px;
            z-index: 1;
        }
		.pentacontain:first-child .pentagon.second {
            background-color: #7da9dc;
            top: 0px;
            left: 20px;
        }
		.pentagon.third {
            background-color: #FFFFFF;
            top: 0px;
            left: 25px;
            z-index: 0;
        }
		.pentacontain:first-child .pentagon.third {
            background-color: #FFFFFF;
            top: 0px;
            left: 25px;
        }
        @media (max-width: 768px) {
		.pentawrap {
			min-height:150px;
			justify-content:flex-start;
			}
            .pentacontain {
                width: calc(33% - 40px);
				margin-right:25px;
            }
			.pentagon {
			width: calc(100% - 2px);
			padding:10px 15px 10px 15px;
			height:50px;
			}
			.pentagon.second,.pentacontain:first-child .pentagon.second,.pentacontain:nth-child(4) .pentagon.second {
            left: 10px;
			}
			.pentagon.third,.pentacontain:first-child .pentagon.third,.pentacontain:nth-child(4) .pentagon.third {
            left: 12px;
			}
			.pentacontain:first-child .pentagon,.pentacontain:nth-child(4) .pentagon {
			width: calc(100% - 2px);
            clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
            left: 0;
			padding:10px 20px 10px 10px;
        }
        }
.aonyushi_contact {width:90%;max-width:1000px;display:flex;margin:7% auto;justify-content:space-around;align-items:center;}
.aonyushi_contact span:first-child {min-height:52px;border-top:1px solid #024696;border-bottom:1px solid #024696;border-left:1px solid #024696;padding:15px;}
.aonyushi_contact span:nth-child(2) {border-radius:9999px;background-color:#c4f3ff;font-weight:500;padding:0.5% 2.5%;display:flex;height:auto;align-items:center;font-size:clamp(21px, 1.2vw, 1em);text-align:center;}
.aonyushi_contact span:nth-child(3) {font-size:clamp(18px, 1.2vw, .9em);margin:1%;}
.aonyushi_contact span:last-child {min-height:52px;border-top:1px solid #024696;border-bottom:1px solid #024696;border-right:1px solid #024696;padding:15px;}
 @media (max-width: 1024px) {
	 .aonyushi_contact{flex-direction:column;}
	 .aonyushi_contact span {margin-bottom:2%;}
	 .aonyushi_contact span:first-child {width:90%;min-height:6px;border-top:1px solid #024696;border-bottom:none;border-left:1px solid #024696;padding:15px;border-right:1px solid #024696;padding:5px;margin-top:10%;}
	 .aonyushi_contact span:last-child {width:90%;min-height:6px;border-top:none;border-bottom:none;border-left:1px solid #024696;padding:15px;border-right:1px solid #024696;border-bottom:1px solid #024696;padding:5px;margin-top:3%;margin-bottom:10%;}
}

/* オンライン入学願書受付 */

.apply-button {
	text-align:center;
}
.apply-button a {
	display:inline-block;
	padding:10px 20px 10px 20px;
	border:1px solid #024696;
	border-radius:9999px;
	color:#024696;
	transition: background-color 0.2s ease;
}
.apply-button a:hover {
	background:#c4f3ff;
}

.net_p {padding-bottom:5%;}

/* CKGが選ばれる理由 */

.formerschool {
	margin-top:5%;
}
ul.table-area {width:100%;max-height:800px;overflow-y:scroll;list-style:none;padding:0;margin:0;display:flex;font-size:.85em;flex-wrap:wrap;}
ul.table-area li {width:30%;margin:0 1.5%}
ul.table-area li span {width:100%;font-size:1.3em;font-weight:bold;border-bottom:1px solid #333333;display:inline-block;}
ul.table-area li p {line-height:180%;}
.faq {display:flex;align-items:flex-end;padding:10% 0;border-bottom:1px dotted #26cbdd;}
.faq ul {width:100%;list-style:none;padding:0;margin:0;}
.faq ul li:first-child {font-size:1.5em;}
/*.faq ul li:nth-child(even){width:52%;}*/
.faq ul li:last-child {margin-bottom:0;background:#c4f3ff;padding-left:10px;}
.faq ul li span {width:61%;padding:5px 0;display:inline-block;}
.faq img {position:absolute;width:38%;margin-left:60%;}
.custom-li {
position: relative;
padding-left: 2.5em;
margin-bottom:10%;
line-height:130%;
	font-size:clamp(18px, 1.2vw, 28px);
}
.custom-li::before {
content: '';
position: absolute;
left: 0;
top: 0;
font-size: 2em;
font-weight:bold;
}
.custom-li.q::before {
content: 'Q';
color: #024696;
}

.custom-li.a::before {
content: 'A';
color: #024696;
}
.custom-style.no::before {
content: ' ';
}
@media (min-width: 1078px) {
	.faq ul li:nth-child(2){width:60%;}
	
}

.withpict {display:flex;align-items:flex-end;justify-content:space-between;margin-top:15vw;}
.withpict img {width:38%;height:auto;}
ul.formerschool_counts {list-style:none;padding:2% 7% 3% 7%;margin:0 -12.5%;background:rgba(239,239,239,.65);display:flex;justify-content:center;text-align:center;overflow:hidden;flex-wrap:wrap;}
ul.formerschool_counts li {min-width:8%;margin:10px 0;padding:1%;border-left:1px solid #333333;}
ul.formerschool_counts li:first-child {border-left:none;}
.formerschool_number {background:#024696;color:#FFFFFF;border-radius:0 0 5px 5px;padding:8px;display:block;font-size:1em;line-height:100%;letter-spacing:2px;}
.small-f {font-size:.65em!important;letter-spacing:0!important;padding:3px 0!important;line-height:125%!important;}
ul.formerschool_counts li span {font-size:1.5em;}
@media (max-width: 768px) {
	.faq {flex-direction:column;}
	.faq ul {width:98%;}
	/*.faq img {width:98%;}*/
	.faq ul li span {font-size:.8em;}
	ul.table-area {max-height:450px;font-size:.75em;}
	ul.table-area li {width:46%;}
	ul.formerschool_counts li {width:30%; border-left:none;}
}

/* 未来予想図 */
.future-box {display:flex;align-items:flex-start;}
.future-main {width:35%;}
.future-right{width:65%;}
.future-minibox {display:flex;align-items:center;}
.future-icon {width:20%;}
ul.future-list {width:48%;margin:0 1%;padding-left:24px;font-size:1.2em;}
.future-img {max-width:30%;}
ul.future-list2 {width:58%;margin:0 1%;padding-left:24px;font-size:1.2em;}
.future-img2 {width:40%;}
.future_h4 {width:96%;
    position: relative;
    font-size: 1.5em;
    padding: 5px 0 0 2%;
    margin: 0 2% 20px 0;
    background: #ffffff;
    display: inline-block;
    z-index: 1;}
.future_h4::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background-color: #c4f3ff;
    z-index: -1;
}
.future-orange::before {background:#fbe4e7;}
.future-cream::before {background:#fff2b8;}

.movin-box {
  position: relative; /* 子要素の絶対配置の基準にする */
}

.overlay-image {
position: absolute;
top: 50%; /* 縦方向の配置（調整可能） */
right: -20%; /* 画像を左に配置 */
transform: translateY(-50%); /* 中央揃え */
width: 30%; /* 画像のサイズを調整 */
max-width:350px;
height: auto;
z-index: 1; /* 他の要素より前面に配置 */
animation: swing 2s infinite ease-in-out; /* アニメーションを適用 */
}

/* アニメーション定義 */
@keyframes swing {
  0% {
    transform: translate(-50%, -50%) rotate(-10deg); /* 左に10度傾ける */
  }
  50% {
    transform: translate(-50%, -50%) rotate(10deg); /* 右に10度傾ける */
  }
  100% {
    transform: translate(-50%, -50%) rotate(-10deg); /* 元の位置に戻る */
  }
}
.masuda-area{padding:0;background: url(images/news_back.png);background-repeat: repeat-y;background-size: 100%;padding:2% 0;margin-top:-10%;}
.masuda{background:none;padding:0;display:flex;justify-content:flex-end;flex-wrap:wrap;line-height:130%;}
.masuda-head {display:flex;align-items:center;flex-wrap:nowrap;}
.masuda-products {display:flex;flex-wrap:nowrap;align-items:center;}
.masudamiku {display:flex;font-size:clamp(10px, .7vw, 10px);flex-wrap:nowrap;align-items:center;max-width:500px;}
.masudamiku img {min-width:98px;height:auto;}
.masudamiku h3 {font-weight:500;margin:0 3px;}
.masudamiku p{font-size:clamp(10px, .7vw, 10px);line-height:130%;margin:0 3px;}
.masudamiku ul {white-space:nowrap;padding-left:10px;padding-right:30px;display:flex;flex-direction:column;flex-shrink:0;}
.masudamiku ul li {margin-left:10%;line-height:130%;}
.masudamiku h5 {border:1px solid #333333;font-size:clamp(10px, .7vw, 10px);padding:3px 0;margin-left:10px;display:inline-block;writing-mode: vertical-rl;text-orientation: upright;letter-spacing:1px;}
@media (max-width: 768px) {
	.future-box {flex-direction:column;}
	ul.future-list {font-size:1em;}
	.future-main {width:100%;}
	.future-right{width:100%;}
	.overlay-image {width: 40%;top:90%;}
	.masudamiku {width:100%;margin-left:0%;flex-direction:column;font-size:clamp(13px, .7vw, 13px);}
	.masudamiku p,.masudamiku h5{font-size:clamp(13px, .7vw, 13px);}
}

@media (min-width: 1280px) {
	.overlay-image {top:40%;right:-10%;} 
}

/* ヒューマンウェイ */

.humanway_list {
list-style: none;
padding: 5% 20%;
margin: 5% -12.5%;
background: rgba(239, 239, 239, .65);
display: flex;
justify-content: center;
align-items:center;
}
.humanway_list h4 {font-weight:bold;font-size:1.15em;}
.humanway_list img {max-width:35%;margin:1%;}

.text_with_image {
    text-align: justify; /* 文章を均等揃え */
    line-height: 1.8; /* 行間を調整 */
}

.text_with_image img {
    float: right; /* 右寄せ */
    margin-left: 15px; /* 画像とテキストの間に余白を設定 */
    margin-bottom: 15px; /* 下部にも余白を設定 */
    width: 40%; /* 必要に応じて調整 */
    height: auto; /* 画像のアスペクト比を維持 */
}

/* スマートフォン用メディアクエリ */
@media (max-width: 768px) {
    .text_with_image img {
        float: none; /* 回り込みを解除 */
        display: block; /* ブロック表示に変更 */
        margin: 0 auto 15px auto; /* 中央揃えと下部余白 */
        width: 100%; /* 横幅を親要素に合わせる */
    }
	.humanway_list {flex-direction:column;}
	.humanway_list img {max-width:98%;margin:0 auto;}
}


/* 学科・専攻紹介 */
.dep_head h1 {display:flex;padding:0;margin:1%;font-size:clamp(1.2em, 3vw, 3em);align-items:stretch;}
.dep-title {display:flex;flex-direction:column;justify-content:center;white-space: pre-wrap;}
.dep-title small {font-size:.6em;}
.dep_icon {width:204px;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;}
.dep_icon img {width:50%;}
.dep-period {min-width:10%;display:flex;justify-content:center;align-items:center;padding:3% 1%}
.icon-white {display:none;}
.pink {background:#ffe7e4;border-right:1px solid #ff5d4c;font-size:clamp(.5em, 2vw, 1em);margin-right:1%;}
.sky {background:#d9f2fa;border-right:1px solid #00a8dc;font-size:clamp(.5em, 2vw, 1em);margin-right:1%;}
.purple {background:#f1e9f4;border-right:1px solid #a272b8;font-size:clamp(.5em, 2vw, 1em);margin-right:1%;}
.orange {background:#fdf7d9;border-right:1px solid #f1c92f;font-size:clamp(.5em, 2vw, 1em);margin-right:1%;}
.dep {padding:0 ;background:none;margin-bottom:5%;}
.dep_h2 {position:relative;color:#024696;font-size:clamp(4em, 7vw, 9em);font-weight:200;padding:0 3%;display:flex;align-items:center;background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, white 30%);white-space: nowrap;padding:0.5em;}
.dep_h2 span {font-size:25%;padding:2% 0 0 2%;font-weight:normal;white-space: normal;}
.dep_h3 {
	position: relative;
	padding: 10px 20px 10px 90px;
	/*margin-top:10%;*/
	margin-bottom:3%;
	font-size: clamp(14px, 2vw, 3em);
	letter-spacing:5px;
	font-weight:bold;
}
.dep_h3::before {
  content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
    border-top: 2px solid #024696;
    border-right: 2px solid #024696;
}

.dep_h3::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 60px;
  right: 0;
  border-bottom: 2px solid #024696;
}

.dep_h3 span::before {
  content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 40px;
    background-color: #024696;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 75% 100%, 0% 100%);
}
.overlay_text_course {
	position: absolute;
	bottom: 20%;
	left:10%;
	right:50%;
}

/* 親ボックスのスタイル */
.dep-container {
	background:#FFFFFF;
	padding:3% 3% 3% 0;
	position: relative; /* 子ボックスの絶対配置の基準にする */
	margin-top:-1px;
}

/* 子ボックスのスタイル */
.dep-overlay-box {
position: absolute; /* 親ボックス内での重ね合わせ */
bottom: 0; /* 親ボックスの上部に配置 */
right: 0; /* 親ボックスの左端に配置 */
width: 40%; /* 親ボックスの幅に合わせる */
height:auto;
  z-index: 10; /* 重なり順を制御 */
	display:flex;
	align-items:flex-end;
	flex-direction:column;
	justify-content:flex-end;
	margin-right:3%;
	margin-bottom:1%;
}

/* 親ボックスの中のテキストや画像 */

.dep-container h2{
	color:#024696;
	font-size:3em;
	margin-top:-2%;
  position: relative; /* 子ボックスと重ね合わせるがレイアウトの影響を受けない */
  z-index: 1; /* 子ボックスより後ろに配置 */
}
.dep-container h3{
  position: relative; /* 子ボックスと重ね合わせるがレイアウトの影響を受けない */
  z-index: 1; /* 子ボックスより後ろに配置 */
}
.dep-container p{
	width:55%!important;
	padding-left:3%;
	position:relative;
	font-size:clamp(14px, 1.5vw, 21px);
	z-index: 1; /* 子ボックスより後ろに配置 */
}
p.dep-profile {width:80%!important;font-size:clamp(14px, 2vw, 3em);line-height:100%;}
.dep-profile-name {display:block;padding-bottom:5%;}
.dep-profile-school {font-size:.7em;}
.dep-profile-school-name {font-size:.7em;}
.dep-container img {width:49%;padding:0 3%;}

/* 子ボックスの中の要素 */
.dep-overlay-box h2,
.dep-overlay-box p,
.dep-overlay-box img {
	width:100%;
  margin: 0 0 2% 0; /* 下に余白を追加 */
	padding-bottom:5%;
}
/* 三角形の背景 */
.triangle-background {
  position: absolute; /* 子ボックス内で絶対配置 */
  bottom: 0;
  right: 0;
width:95%;
  height: 100%;
  clip-path: polygon(100% 100%, 0% 100%, 100% 60%);
  background-color: #efefef; /* 希望の背景色 */
  z-index: -1; /* 子ボックス内の要素の背面に配置 */
	margin:0 0 5% 0;
}
ul.dep_ul {list-style:none;padding-left:3%;margin:0;font-size:clamp(16px, 2.1vw, 2em);}
ul.dep_ul li {display:flex;align-items:center;}
ul.dep_ul li span {font-size:3em;padding:0 15px 0 3%;margin:1% 2% 1% 3%;font-weight:300;}
.rightbar_orange {border-right:1px solid #ec5d4e;}
.rightbar_sky {border-right:1px solid #00a8dc;}
.rightbar_lightgreen {border-right:1px solid #00c3b6;}
.rightbar_purple {border-right:1px solid #a272b8;}
.rightbar_yellow {border-right:1px solid #f1c92f;}
.rightbar_pink {border-right:1px solid #e37eae;}

ul.dep_ul2 {width:97%;list-style:none;padding:0;margin:0 0 0 3%;display:flex;flex-wrap:wrap;background:url('images/dep-border3.png');background-position:bottom center;background-repeat: no-repeat;}
ul.dep_ul2 li {width:calc(50% - 11px);}
ul.dep_ul2 li:nth-child(2) {width:20px;padding:0;}
ul.dep_ul2 li span {width:80%;max-width:500px; padding:6%;margin:5% auto;text-align:center;background:url('images/dep-cristal.png');background-repeat:no-repeat;background-position:center;background-size:contain;display:flex;justify-content:center;align-items:center;font-size:clamp(14px, 1.3vw, 2em);font-weight:bold;}
ul.dep_ul2 li p {width:80%!important;padding:0 10%;}
ul.dep_ul2 li img {width:95%!important;padding-top:10%;}

ul.dep_ul3 {width:97%;list-style:none;padding:0 0 3% 0;margin:0 0 0 3%;display:flex;flex-wrap:wrap;background:url('images/dep-border4.png');background-position:center center;background-repeat: no-repeat;}
ul.dep_ul3 li {width:calc(50% - 11px);}
ul.dep_ul3 li:nth-child(2) {width:20px;padding:0;}


.dep_ul_prof ul{width:auto;display:flex;flex-wrap:wrap;justify-content: space-between; width: 90%; margin: 3% auto;}
.dep_ul_prof ul li {width:40%;margin:1% 9% 1% 1%;}
.dep_ul_prof p {width:97%!important;font-size:.8em;}
.dep_record {margin-left:50%;margin-top:10%;}
.dep-esports-container {
	width:96%;
	background:#FFFFFF;
	padding:5% 2% 10% 2%;
	position: relative;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-evenly;
}
.e-sports-pickup {width:46%;display:flex;flex-wrap:wrap;flex-direction:column;align-items:flex-start;max-width:449px;}
.e-sports-pickup h4 {font-size:clamp(14px, 2vw, 3em);margin-top:3%;}
.e-sports-titles {width:98%;max-width:449px;padding:1%;display:flex;flex-wrap:wrap;align-items:center;height:65px;}
.e-sports-titles p {width:75%;margin-right:1%;margin-bottom:0;font-size:clamp(12px, .75vw, 21px);}
.e-sports-titles span {width:20%;}
.e-sports-bar {width:1px;background:#333333;}

@media (max-width: 768px) {
	.dep_icon {width:61px;}
	.dep_icon img {width:98%;}
	.overlay_text_course {
	position: absolute;
	left:5%;
	right:35%;
		top:10%;
}
	.dep_h2 {flex-direction:column;padding:0;}
	.dep_h3 {
	padding: 5px 0 5px 70px;
}
	.dep_h3::before {
    width: 45px;
}
	.dep_h3::after {
  left: 45px;
}
	.dep_h3 span::before {
	width: 60px;
    height: 75%;
	max-height: 35px;
}
	.dep_h3 span {display:block;margin:1% 0;}
	.dep_h3_50p {width:50%;}
	.dep-overlay-box {
		bottom:inherit;
		top:-5vh;
		width:40%;
	}
	.dep-container p {font-size:.8em;}
	.dep-100 p{width:100%!important;}
	.dep-container img {width:97%;}
	.dep-profile-school {display:block;}
	ul.dep_ul2 {flex-direction:column;background:none;}
	ul.dep_ul2 li {width:100%;}
	ul.dep_ul2 li:nth-child(2) {display:none;}
	ul.dep_ul2 p {padding-top:0!important;padding-bottom:5%!important;}
	ul.dep_ul3 {flex-direction:column;background:none;}
	.dep_ul_prof ul{flex-direction:column;}
	.dep_ul_prof ul li {width:98%;margin:1%;}
	.dep_record {margin-left:3%;}
	.e-sports-titles{flex-direction:column;flex-wrap:nowrap;}
	.e-sports-titles p {width:100%;margin:0;}
	.e-sports-titles span {width:35%;margin-right:-70%;margin-top:0;margin-bottom:-30%;}
}

/* 合格者の声・おすすめ資格 */
.qualifi {width:97%;margin-left:3%;display:flex;flex-wrap:wrap;}
.qualifi-container {
	font-size:clamp(10px, 1.3vw, 2em);
	background:#FFFFFF;
	padding:3% 3% 3% 0;
	position: relative;
}
.qualifi-title {color:#c1272d;}
.qualifi-container img {align-self:flex-end;}
.qual-list p {border-bottom:1px solid;}
.qual-list p:last-child {border-bottom:none;}


/* オープンキャンパス */
#oc-sidebar {}
.oc-main, .oc-summer, .oc-spring, .oc-trial, .oc-aux, .oc-stamp, .oc-entry {padding:1.5% 1.5% 1% 1%;margin: 0;}
.oc-summer {background-image:url('images/oc-summer-back.jpg');background-repeat:repeat-y;background-size:cover;}
.oc-spring {background:#fff0f9;}
.oc-aux {background:#d3f2ff;}
.oc-stamp {background-image:url('images/stamp-back.png');background-repeat:no-repeat;background-position:left 1vh;background-size:contain;}
.oc-summer p, .oc-spring p {font-size: clamp(14px, .75vw, 25px);text-align:center;}
.oc-aux p {text-align:center;}
.oc-entry {background:#ffffd3;padding-bottom:10%;}
.oc h2, .oc h3, .oc h4{margin:3% 3% 0 3%;text-align:center;}
.oc-h3 {color:#FFFFFF;font-size:clamp(14px, 2vw, 45px);font-weight:bold;background:#f9be00;border-radius:5px; padding:1% 0;display:flex;align-items:center;flex-wrap: wrap;justify-content: center;}
.oc-h5 {color:#02468a;text-align:center;font-size:clamp(13px, 1.7vw, 40px);font-weight:bold;padding-top:1%;}
.oc-p {text-align:center;font-size:clamp(11px, 1vw, 30px);font-weight:bold;}
ul.oc_list {width:100%;list-style:none;padding:0;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-around;font-size: clamp(14px, .75vw, 25px);}
ul.oc_list li{padding:0 1%;margin:2% 1% 5% 1%;color:#024689;display:flex;justify-content:center;}
ul.oc_list span {display:flex;justify-content:center;margin-top:5px;}
ul.oc_list li:hover {}
ul.oc_list li a{text-decoration:none;color:#024689;}
ul.oc-schedule {list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;font-weight:500;justify-content:space-evenly;}
ul.oc-schedule li {width:22%;margin:1%;padding:0 4%;border:1px solid;font-size: clamp(14px, 2vw, 45px);line-height:175%;display:flex;flex-direction: column;align-items: center;}
ul.oc-schedule li span {display:flex;align-items:baseline;font-size:1.5em;letter-spacing:3px;}
ul.oc-schedule li big {font-size:1.45em;}
ul.oc-schedule li small {font-size:.5em;}
ul.oc-schedule2 {list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:space-between;font-weight:500;}
ul.oc-schedule2 li {width:36%;margin:1%;padding:0 4%;border:1px solid;font-size: clamp(14px, 2vw, 45px);line-height:175%;display:flex;flex-direction: column;align-items: center;background:#FFFFFF;}
ul.oc-schedule2 li span {display:flex;align-items:baseline;font-size:1.5em;letter-spacing:3px;}
ul.oc-schedule2 li big {font-size:1.45em;}
ul.oc-schedule2 li small {font-size:.5em;}
ul.oc-schedule3 {list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;font-weight:500;}
ul.oc-schedule3 li {width:36%;margin:1%;padding:0 4%;border:1px solid;font-size: clamp(14px, 2vw, 45px);line-height:175%;display:flex;flex-direction: column;align-items: center;background:#FFFFFF;}
ul.oc-schedule3 li span {display:flex;align-items:baseline;font-size:1.5em;letter-spacing:3px;}
ul.oc-schedule3 li big {font-size:1.45em;}
ul.oc-schedule3 li small {font-size:.5em;}
ul.oc-trial-list {list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;}
ul.oc-trial-list li {width:42%;margin:4%;}
ul.oc-trial-list li span {font-size: clamp(12px, 1vw, 45px);display:block;line-height:135%;}
ul.oc-trial-list2 {list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;}
ul.oc-trial-list2 li {width:27%;margin:3%;}
ul.oc-trial-list2 li span {font-size: clamp(12px, 1vw, 45px);display:block;line-height:135%;}
ul.oc-aux-list {list-style:none;padding:0;margin:1% 0 3% 0 ;display:flex;flex-wrap:wrap;flex-direction:column;}
ul.oc-aux-list li {display:flex;justify-content:space-between;background:#FFFFFF;margin-bottom:1%;padding:2% 5%;font-size: clamp(14px, 1vw, 30px);font-weight:bold;}
.oc-stamp-box {display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-end;}
.oc-stamp-img {width:40%;margin-left:-6%;overflow:hidden;}
ul.oc-stamp-list {width:60%;list-style:none;padding:0;margin:5% 0 3% 0 ;display:flex;flex-wrap:wrap;font-weight:500;}
ul.oc-stamp-list li {display:flex;flex-wrap:wrap;align-items:flex-start;margin-bottom:5%;}
ul.oc-stamp-list li span.oc-stamp-title {font-size: clamp(15px, 1vw, 30px);color:#024689;border:1px solid #024689;border-radius:3px;padding:1% 3%;margin-right:5%;background:#FFFFFF;}
ul.oc-stamp-list li span.oc-stamp-contain {width:65%;font-size: clamp(15px, 1vw, 30px);color:#024689;}

.oc-square-box {
  position: relative;
  width: 100%; /* 親要素の幅に応じて100% */
  padding-top: 100%; /* 高さを幅の比率で設定 (1:1) */
  background-color: lightblue; /* 背景色を任意に設定 */
  overflow: hidden; /* 必要に応じてコンテンツのオーバーフローを隠す */
}

.oc-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex; /* 中央揃えが必要な場合 */
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
  font-size: 16px; /* 必要に応じてスタイルを追加 */
  color: #333;
}

.oc-container {
  display: flex;
  flex-wrap: wrap; /* 画面幅が狭くなったときに折り返す */
	position:relative;
	z-index:1;
}

.box {
  flex: 1; /* 各ボックスが均等に幅を占める */
  box-sizing: border-box; /* paddingやborderを含めた幅で表示 */
}

.center {
  flex: 2.5; /* 中央のボックスを他のボックスのX倍の幅にする */
	text-align:center;
	font-weight:500;
	align-items:flex-start;
}
.center p {font-size: clamp(13px, 1.5vw, 36px);}
.oc-entry-center {flex:6!important;}

.oc-summer-flow-box {
    position: relative;
    width: 100%; /* 親要素に応じて幅が変化 */
    padding-top: 43.29%; /* 縦横比 2.31:1 (高さ = 幅の43.29%) */
    background-image:url('images/summer-flow.png');
	background-repeat:no-repeat;
	background-size:contain;
	z-index:0;
	margin-top:-11%;
	margin-bottom:5%;
  }

  .oc-summer-flow-box-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items:center;
    justify-content:flex-start;
	  flex-direction:column;
    font-size: clamp(13px, 2vw, 38px);;
	  font-weight:bold;
  }
.oc-summer-flow-box-content img {}
.oc-summer-flow-box-content a {position: absolute;top:70%;width:18%;}
.oc-summer-flow-box-content p {margin-top:5%;}

.oc-pink {color:#ff4cba;}
.oc-spring-flow-box {
    position: relative;
    width: 100%; /* 親要素に応じて幅が変化 */
    padding-top: 43.29%; /* 縦横比 2.31:1 (高さ = 幅の43.29%) */
    background-image:url('images/spring-flow.png');
	background-repeat:no-repeat;
	background-size:contain;
	z-index:0;
	margin-top:-10%;
	margin-bottom:5%;
  }

  .oc-spring-flow-box-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items:center;
    justify-content:flex-start;
	  flex-direction:column;
    font-size: clamp(13px, 2vw, 38px);;
	  font-weight:bold;
  }
.oc-spring-flow-box-content img {}
.oc-spring-flow-box-content a {position: absolute;top:70%;width:18%;}
.oc-spring-flow-box-content p {margin-top:5%;}

.oc-night-box {position:relative;background:url('images/oc-back01.png');background-repeat:no-repeat;background-size:contain;display:flex;flex-direction:column;align-items:center;padding:5% 0;}
.oc-night-box h5 {padding:0.5% 2%;border:1px solid; border-radius:1999px;text-align:center;background:#FFFFFF;position:relative;}
.oc-night-main {width:88%;padding:0 6%;border:1px solid; border-radius:1999px;margin-top:-2%;background:#FFFFFF;}
.oc-night-main h4 {color:#02468a;text-align:center;font-size:clamp(15px, 1.7vw, 40px);font-weight:bold;padding-top:1%;border-bottom:1px solid;}
.oc-night-main h4 span {font-size:.75em;padding-left:1%;}
.oc-night-main p {display:flex;justify-content:center;align-items:center;}
.oc-night-main p span:first-child {border:1px solid;font-size:.75em;padding:2px 5px;margin-right:5px;}
.oc-night-main p span:last-child {background:#ffe400;font-size:.75em;padding:2px 5px;margin-left:5px;}
.entry-qual {background:#FFFFFF;color:#02468a;text-align:center;font-size:clamp(18px, 1.5vw, 30px)!important;font-weight:bold;padding:5%;}

@media (max-width: 768px) {
	.oc-night-box {background-size:cover;}
	.oc-night-main {margin-top:3%;}
	.oc-night-main h4 span{display: block;}
	.oc-night-main p {flex-direction:column;margin:2%;}
	.oc-night-main p span:first-child {margin-right:0;}
	.oc-night-main p span:last-child {margin-left:0;}
	ul.oc-schedule {justify-content:flex-start;}
	ul.oc-schedule li {width:43%;max-width:200px;padding:1% 0;margin:3%;justify-content:flex-start;}
	ul.oc-schedule2 {justify-content:center;}
	ul.oc-schedule2 li {width:88%;margin-bottom:1%;max-width:200px;padding:1% 0;}
	.center {flex: 2;}
	ul.oc-schedule3 {justify-content:center;}
	ul.oc-schedule3 li {width:88%;margin-bottom:1%;max-width:200px;padding:1% 0;}
	.oc-container {align-items:center;}
	.oc-summer-flow-box {padding-bottom:10%;}
	.oc-summer-flow-box-content a {width:30%;top:75%;}
	.oc-spring-flow-box-content a {width:30%;top:85%;}
	.oc-stamp {padding:1.5% 0 0 0;background-position:left 10vh;}
	ul.oc-stamp-list {width:100%;margin:0 auto;padding:3%;background:rgba(255,255,255,.8);}
	ul.oc-stamp-list li{flex-direction:column;}
	ul.oc-stamp-list li span.oc-stamp-contain {width:96%;padding:3% 0 5% 4%;}
}

/* 学びなおし */
ul.relearn_list01 {list-style:none;padding:5% 20%;margin:5% -12.5%;background:rgba(239,239,239,.65);display:flex;justify-content:center;text-align:center;}
ul.relearn_list01 li {padding:2.5%;}
ul.relearn_list01 li img{width:50vw;margin:auto;max-width:797px;}
.relearn-experience {display:flex;justify-content:space-around;align-items:flex-start;flex-wrap:wrap;padding-bottom:2%;margin-bottom:5%;border-bottom:1px dotted #80cce3;font-size: clamp(12px, 1.2vw, 30px);}
.relearn-experience ul {width:63%;list-style:none;padding:0;margin:0;}
.relearn-experience ul li {padding:3% 0;}
.relearn-experience-img {width:35%;}
.relearn-comment {padding:3% 0 1% 0;}
.relearn-blue {color:#024696;}
.relearn-dream {display:flex;justify-content:space-around;align-items:flex-start;flex-wrap:wrap;padding-bottom:2%;margin-bottom:5%;font-size: clamp(12px, 1.2vw, 30px);}
.relearn-dream  ul {width:31%;list-style:none;padding:0;}
@media (max-width: 768px) {
	.relearn-experience {flex-direction:column;}
	.relearn-experience ul {width:100%;}
	.relearn-experience-img {width:100%;}
	.relearn-dream {justify-content:space-between;}
	.relearn-dream  ul {width:48%;margin-bottom:5%;}
	ul.relearn_list01 li img{width:80vw;}
}

/* 学院長ごあいさつ */
.greet {margin-top:3%;margin-bottom:5%;}
.greeting_h3 {margin-bottom:5%;}
ul.greeting_list01 {list-style:none;padding:0 12.5%;margin:5% -12.5% 0 -12.5%;background:rgba(239,239,239,.65);display:flex;justify-content:center;text-align:center;flex-direction:column;font-size: clamp(12px, 1.2vw, 30px);}
ul.greeting_list01 li {width:100%;padding:2.5% 0;margin-top:-5%;}
ul.greeting_list01 li img{width:100%;margin:auto;}
.greeting-box {width:100%;display:flex;}
.greeting-left {width:70%;}
.greeting-right {width:28%;margin-left:2%;}
.greeting-right img {width:100%;margin-bottom:5%;}
.greeting-area h6 {font-size: clamp(21px, 1.2vw, 28px);}
.greeting-area ol {
  list-style-type: decimal !important;
  margin: 1em 0 !important;
  padding-left: 10% !important;
	font-size: clamp(18px, 1.2vw, 25px);
}
@media (max-width: 768px) {
	.pc {display:none;}
	.greeting-box {flex-direction:column;}
	.greeting-left {width:100%;}
	.greeting-right {width:96%;margin-left:2%;}
}
@media (min-width: 769px) {
	.sp {display:none;}
}

/* 学科・専攻紹介 トップ */

a.department-hub {width:100%;padding:0;margin:0 0 5% 0;background:url('images/common_navi01.png');background-repeat:no-repeat;background-position: 98% 50%;display:flex;align-items:center;text-decoration:none;color:#333333;transition:background .3s;font-size:clamp(21px, 1.2vw, 40px);font-weight:500;}
a.department-hub p{margin:.1rem .2rem;}
a.department-hub:hover {background:url('images/common_navi02.png');background-repeat:no-repeat;background-position: 98% 50%;transition:background .1s;}
.department-icon {width:15%;height:100px;background:#FFFFFF;padding-right:5px;display: flex;align-items: center;}
.department-head {width:20%;height:130px;display: flex;align-items: center;justify-content: center;flex-shrink:0;letter-spacing:3px;padding:0 10px;margin-right:2%;}
.department-middle {width:65%;padding-right:50px;height:130px;display: flex;flex-wrap:nowrap;align-content:flex-start;flex-direction:column;justify-content:center;}
.department-middle span {font-size:.7em;display:block;line-height:115%;}
.department-pink {background-color:#fce7e4!important;}
.department-line-pink {background-color:#fce7e4!important;border-right:1px solid #ed5d4e;}
.department-sky {background-color:#e1f2f9!important;}
.department-line-sky {background-color:#e1f2f9!important;border-right:1px solid #36a6d9;}
.department-purple {background-color:#f1eaf4!important;}
.department-line-purple {background-color:#f1eaf4!important;border-right:1px solid #a272b8;}
.department-orange {background-color:#fff7db!important;}
.department-line-orange {background-color:#fff7db!important;border-right:1px solid #ffc90d;}
.department-green {background-color:#dff6f4!important;}
.department-line-green {background-color:#dff6f4!important;border-right:1px solid #2bc2b5;}

@media (max-width: 769px) {
	a.department-hub {min-height:100px;font-size:clamp(15px, 1.3vw, 40px);background:url('images/common_navi01s.png');background-repeat:no-repeat;background-position: 98% 50%;line-height:105%;}
	a.department-hub:hover {background:url('images/common_navi02s.png');background-repeat:no-repeat;background-position: 98% 50%;}
	.department-icon, .department-head, .department-middle {height:120px;}
	.department-middle {padding-right:30px;}
}

/* 入学案内 */
.vertical-text {
	writing-mode: vertical-rl; /* 縦書き（右から左） */
	-webkit-writing-mode: vertical-rl;
	text-orientation: upright; /* 文字を直立に */
	-webkit-text-orientation: upright;
	min-width: 60px;
	min-height: 160px;
	display: flex;
	justify-content:center;
	align-items:center;
	margin:0 auto;
	padding:10px 0;
}
.department-gray {background:#efefef!important;}
.t-nyushi {width:100%;font-size:clamp(15px, 1vw, 20px);font-weight:500;table-layout:fixed!important;border-collapse: collapse;overflow-x: auto;-webkit-overflow-scrolling: touch;}
.t-nyushi td {text-align:center;}
.t-nyushi th {text-align:left;font-weight:500;vertical-align: middle;min-width: 50px;}
.t-nyushi-cont {text-align:left!important;vertical-align:top;}
@media (max-width: 769px) {
	.t-nyushi {min-width:800px;}
	.vertical-text {}
}

/* CKGの学生寮 */
.dormitory_comment {font-size:.85em;}
.dormitory_h4 {
    position: relative;
    font-size:clamp(23px, 1.5vw, 30px);
	font-weight:500;
    margin: 3% 2% 20px 0;
   background: linear-gradient(white 60%, #c6dfd4 40%);
  border-bottom: 1px solid black; /* 下線 */
  box-decoration-break: clone; /* 装飾を分割 */
  -webkit-box-decoration-break: clone; /* Webkit対応 */
  display:inline-block;
	padding:0.5em;
}

.dormitory_h4 span {font-size:.65em;padding-left:10px;}
.dormitory_h4p {
    position: relative;
    font-size:clamp(23px, 1.5vw, 30px);
	font-weight:500;
    margin: 3% 2% 20px 0;
    background: linear-gradient(white 60%, #c1b5d6 40%);
  border-bottom: 1px solid black; /* 下線 */
  box-decoration-break: clone; /* 装飾を分割 */
  -webkit-box-decoration-break: clone; /* Webkit対応 */
 display:inline-block;
	padding:0.5em;
}

.dormitory_h4p span {font-size:.65em;padding-left:10px;}
.t-dormitory {min-width:80%;font-size:clamp(15px, 1vw, 20px);width:auto!important;margin:0 auto;margin-bottom:10%;}
.t-dormitory th {font-weight:normal;white-space:nowrap;}
.t-dormitory big {font-size:1.3em;font-weight:500;}
ul.li-dormitory{display:flex;justify-content:space-between;list-style:none;margin:0;padding:0;}
ul.li-dormitory li {width:49%;margin:0;padding:3%;text-align:center;}
ul.li-dormitory li:first-child {border-right:1px dotted ;}
.department-yellow {background:#fff8b2;}

/* 設備紹介 */

ul.list-facilities {list-style:none;padding:0;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-around;max-width:1200px;}
ul.list-facilities img {width:100%;height:auto;}
ul.list-facilities li {width:48%;margin:1%;padding:0;}

.facilities_h4 {
	width:97%;
	font-size:clamp(21px, 1.8vw, 28px);
    margin: 2% 1% 20px 1%;
    background: linear-gradient(white 60%, #c4f3ff 40%);
  border-bottom: 1px solid black; /* 下線 */
  box-decoration-break: clone; /* 装飾を分割 */
  -webkit-box-decoration-break: clone; /* Webkit対応 */
	padding:0.5em 1.5%;
}

@media (max-width: 769px) {
	ul.list-facilities li {width:98%;margin:1%;padding:0;}
}

/* 就職実績 */

ul.achieve-grid-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 1行に3列を表示 */
      gap: 10px; /* アイテム間のスペース */
      padding: 0;
      margin: 0;
      list-style: none; /* リストスタイルを完全に削除 */
	font-size:clamp(12px, .75vw, 20px);
    }

/* タブレット以上: 1行に2列 */
@media (max-width: 768px) {
ul.achieve-grid-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* デスクトップ以上: 1行に4列 */
@media (min-width: 1024px) {
ul.achieve-grid-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

ul.achieve-grid-list li {
	text-align: left;
	padding: 5px 0;
	box-sizing: border-box;
}

/* アクセス */
.access_h4 {
	display:inline-block;
	font-size:clamp(23px, 1.8vw, 30px);
    margin: 2% 2% 0 0;
    background: linear-gradient(white 60%, #c4f3ff 40%);
  border-bottom: 1px solid black; /* 下線 */
  box-decoration-break: clone; /* 装飾を分割 */
  -webkit-box-decoration-break: clone; /* Webkit対応 */
  padding:0.5em;

}

.access-ul {font-size: clamp(21px, 1.2vw, 28px);}


/* 学校紹介 */

.post_school {
    background: url(images/news_back.png);
    background-repeat: repeat-y;
    background-size: 100%;
    padding: 10% 0 3% 0;
	/* overflow-x:hidden; */
}


.post_school_p{margin:0 0 5% 0;}
.sky-line {width:96%; display:block;padding:3px;background:#c4f3ff;margin:15% auto 5% auto;}

/* 学校情報公開 */

.public-area {display:flex;}
.public-area table {width:46%;font-size:clamp(13px, 1vw, 20px);padding:1%;margin:1%;}
.public-area table:first-child {width:44%;padding:1% 2%;border-right:1px dotted;}
.public-area table th {vertical-align:top;}
@media (max-width: 768px) {
	.public-area {flex-direction:column;}
	.public-area table {width:98%;margin:1% auto;}
.public-area table:first-child {width:98%;margin:1% auto;border-right:none;}
}

/* etc. */
.margin-up {margin-top:15%;}
.nega-ma {margin:-12% 0 5% 0; text-align:center;}

/* TablePress */

.tablepress {border:1px solid #dddddd!important;}
.column-1 {white-space: nowrap;border-right:1px solid #dddddd!important;}

/* 右下カットボックス */

.LowRightCut {
	font-weight:500;
	margin:5% auto;
	text-align:center;
}
.LowRightCut a{
	padding: 10px 50px 10px 20px;
    display: inline-block;
	color:#FFFFFF;
	background-color: #024696;
	color: white;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60%), calc(100% - 8%) 100%, 0 100%);
	font-size: clamp(1.3em, 2vw, 1.8em);
}
.arrow-heading {
	display: inline-block;
	position: relative;
	padding-right: 2em;
}

.arrow-heading::after,
.arrow-heading::before {
  content: "";
  position: absolute;
  background-color: currentColor;
}

.arrow-heading::after {
  right: 0;
  top: calc(50% + 5px);
  width: 1.7em;
  height: 2px;
  transform: translateY(-50%);
}

.arrow-heading::before {
  right: 0;
  top: calc(50% + 5px);
  width: 0.8em;
  height: 2px;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: right bottom;
}

@media (max-width: 939px) {
.LowRightCut {letter-spacing:1px;}
}

/* WordPress Default CSS */
.aligncenter{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignright{
	float: right;
	margin-left: 1.5em;
}
.alignleft{
	float: left;
	margin-right: 1.5em;
}

/*wp-pagenavi base*/
.wp-pagenavi {
	clear: both;
	text-align:center;
	margin-top:5%;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #999;
	background-color: #FFF;
	border: solid 1px #e0e0d2;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
    color:#FFF; 
    background-color:#999; 
    border-color:#999;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #26cbdd;
	border-color: #26cbdd;
	font-weight: bold;
    }


/* 戻るボタンのスタイル */
.back-to-top {
    position: fixed; /* 画面に対して固定する */
    bottom: 30px; /* 画面下から30px */
    right: 270px; /* 画面右から30px */
    opacity: 0; /* 初期状態では透明 */
    visibility: hidden; /* 初期状態では非表示 */
    background-color: #fff;
    border: 1px solid #044482;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 50%;
    transition: opacity 0.5s ease-in-out, visibility 0.5s; /* フェードイン・フェードアウトのトランジション */
    z-index: 10; /* 他の要素より前面に表示 */
}

.back-to-top img {
    width: 40px;
    height: 40px;
}

.back-to-top.show {
    opacity: 1; /* 表示状態に */
    visibility: visible; /* ボタンを可視化 */
}
@media (max-width: 768px) {
	.back-to-top {right:30px;}
}

/* 留学生向けメニュー */
.inter-menu {
    background: url(images/news_back.png);
    background-repeat: repeat-y;
    background-size: 100%;
    padding: 3% 4% 0 4%;
}

.inter-menu ul {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.inter-menu ul li {
    flex: 1;
    margin: 0 1%;
    position: relative;
    overflow: hidden;
}

.inter-menu ul li a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.inter-menu ul li img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.4s ease;
}

.inter-menu ul li a .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.inter-menu ul li a:hover .hover-img {
    opacity: 1;
}

.inter-menu ul li a:hover .default-img {
    opacity: 0;
}

/* 現在のページのアイコンを反転表示 */
.inter-menu ul li a.current .default-img {
    opacity: 0;
}

.inter-menu ul li a.current .hover-img {
    opacity: 1;
}

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

/* 留学生サイト 戻るボタンのスタイル */
.back-to-top-inter {
    position: fixed; /* 画面に対して固定する */
    bottom: 30px; /* 画面下から30px */
    right: 30px; /* 画面右から30px */
    opacity: 0; /* 初期状態では透明 */
    visibility: hidden; /* 初期状態では非表示 */
    background-color: #fff;
    border: 1px solid #044482;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 50%;
    transition: opacity 0.5s ease-in-out, visibility 0.5s; /* フェードイン・フェードアウトのトランジション */
    z-index: 10; /* 他の要素より前面に表示 */
}

.back-to-top-inter img {
    width: 40px;
    height: 40px;
}

.back-to-top-inter.show {
    opacity: 1; /* 表示状態に */
    visibility: visible; /* ボタンを可視化 */
}
@media (max-width: 768px) {
	.back-to-top {right:30px;}
}

.f_schools_inter {
    width: 86%;
    padding: 7%;
    background-color: #FFFFFF;
}
.f_schools_inter ul {
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
    list-style: none;
    padding: 0;
    margin: 0;
}
.f_schools_inter ul li:first-child{
	width:70%;	
}

.f_schools_inter ul li:last-child{
	width:10%;	
}


.f_schools_inter img {
    max-width: 100%;
    height: auto;
}
.f_schools_inter span {display:block;margin-bottom:1%;font-size:clamp(12px, 1.3vw, 40px);}

@media (max-width: 768px) {
	.inter-title img{max-width:70%!important;max-height:none!important;}
	.f_schools_inter ul {flex-direction:column;}
	.f_schools_inter ul li:first-child{width:100%;}
	.f_schools_inter ul li:last-child{width:20%;margin-top:5%;}
}

/* 野球部 */
a.resultanc {text-decoration:none;}
.bb-head {display:flex;}
.bb-head h1 {width:40%;}
.bb-head img {max-width:98%!important;}
.bb-head p {display:flex;align-items:center;font-size:1.1vw;color:#00318b;border-left:2px solid #00318b;padding:0 0 0 1%;}
.bb-other {width:calc(100% - 180px);}
.bb-other p {font-size: clamp(1rem, 0.977rem + 0.11vw, 1.063rem);max-width:1170px;margin:0 auto 1% auto;}
.bb-note {width:60%;margin:0 auto;padding-top:0;padding-bottom:5%;}
.bb-note2 {margin:0 auto;padding:0.6em 0;max-width:1160px;}
.post_area_bb {
    background: #00318b;
    padding: 5% 0 0 0;
	/* overflow-x:hidden; */
}
.bb_flex {display:flex;}
@media (max-width: 768px) {
	.bb_flex {flex-direction:column;}
}
.bb-h2 {text-align:center;margin:0 auto;padding-bottom:3%;}
.bb-h3 {font-size:2vw;font-weight:bold;display: block;margin: 3% auto 2% auto;padding:2% 3%;text-align: center;border-bottom: 1px solid #323232;width: fit-content;}
.bb-h3-2 {font-size:2vw;font-weight:bold;display: block;margin: 3% auto 2% auto;padding:2% 3%;text-align: center;width: fit-content;}
.bb-h3-2 big {font-size:180%;}
.bb-h3-3 {font-size:2vw;font-weight:bold;display: block;margin: 3% auto 2% auto;padding:2% 3%;width: fit-content;color:#c43419;}
.bb-h3-up {font-size:2vw;font-weight:bold;display: block;margin: 5% auto 2% auto;padding:2% 3%;text-align: center;border-top: 1px solid #323232;}


.bb-h3-fas4 {
  position: relative;
  margin: 2em auto;
  padding: 0.6em 1.5em;           /* 上下・左右の余白 */
  background: #2f758f;            /* 中央の帯の色（お好みで調整） */
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;                /* 基準は1remにしておくとレスポンシブに扱いやすい */
  line-height: 1.4;
  overflow: hidden;               /* はみ出た疑似要素を隠す */
	max-width: 1120px;
}

/* 左右の斜めのパーツ */
.bb-h3-fas4::before,
.bb-h3-fas4::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2em;                   /* 斜め部分の幅（テキスト量に応じて調整可） */
  background: #1dbbae;            /* 端の少し濃い色 */
}

/* 左側：左にはみ出させて斜めに */
.bb-h3-fas4::before {
  left: -1.5em;
  transform: skewX(-20deg);
}

/* 右側：右にはみ出させて斜めに */
.bb-h3-fas4::after {
  right: -1.5em;
  transform: skewX(-20deg);
}

/* 必要ならスマホ用にフォントサイズだけ少し落とす */
@media screen and (max-width: 768px) {
  .bb-h3-fas4 {
    font-size: 0.9rem;
    padding: 0.6em 1em;
  }
}









.bb-h3-fas {
  position: relative;
  margin: 2em auto;
  padding: 0.6em 1.5em;           /* 上下・左右の余白 */
  background: #c63b16;            /* 中央の帯の色（お好みで調整） */
  color: #fff;
  font-weight: 700;
  font-size: 1rem;                /* 基準は1remにしておくとレスポンシブに扱いやすい */
  line-height: 1.4;
  overflow: hidden;               /* はみ出た疑似要素を隠す */
	max-width: 1120px;
}

/* 左右の斜めのパーツ */
.bb-h3-fas::before,
.bb-h3-fas::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2em;                   /* 斜め部分の幅（テキスト量に応じて調整可） */
  background: #8f2a0c;            /* 端の少し濃い色 */
}

/* 左側：左にはみ出させて斜めに */
.bb-h3-fas::before {
  left: -1.5em;
  transform: skewX(-20deg);
}

/* 右側：右にはみ出させて斜めに */
.bb-h3-fas::after {
  right: -1.5em;
  transform: skewX(-20deg);
}

/* 必要ならスマホ用にフォントサイズだけ少し落とす */
@media screen and (max-width: 768px) {
  .bb-h3-fas, .bb-h3-2, .bb-h3-3 {
    font-size: 0.9rem;
    padding: 0.6em 1em;
  }
}

.bb-h3-fas2 {
  position: relative;
	margin: 1em auto;
  padding: 0.6em 1.5em;           /* 上下・左右の余白 */
  background: #c4f3ff;            /* 中央の帯の色（お好みで調整） */
  color: #333;
  font-weight: 700;
  font-size: 1rem;                /* 基準は1remにしておくとレスポンシブに扱いやすい */
  line-height: 1.4;
  overflow: hidden;               /* はみ出た疑似要素を隠す */
	max-width: 1120px;
}

/* 左右の斜めのパーツ */
.bb-h3-fas2::before,
.bb-h3-fas2::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2em;                   /* 斜め部分の幅（テキスト量に応じて調整可） */
  background: #a5ebff;            /* 端の少し濃い色 */
}

/* 左側：左にはみ出させて斜めに */
.bb-h3-fas2::before {
  left: -1.5em;
  transform: skewX(-20deg);
}

/* 右側：右にはみ出させて斜めに */
.bb-h3-fas2::after {
  right: -1.5em;
  transform: skewX(-20deg);
}

/* 必要ならスマホ用にフォントサイズだけ少し落とす */
@media screen and (max-width: 768px) {
  .bb-h3-fas2 {
    font-size: 0.9rem;
    padding: 0.6em 1em;
  }
}

.bbside {width:180px!important;}
ul.bb-icons {width:80%;display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 0 auto; padding: 0;list-style:none;}
ul.bb-icons li {width:100%;}
ul.bb-icons2 {width:80%;padding:0;margin:0 auto;display:flex;flex-direction:column;list-style:none;}
ul.bb-icons2 li {width:100%;margin-top:4%;}
ul.bb-icons2 li a {display: inline-block;line-height: 0;font-size: 0;}
ul.bb-icons3 {width:80%;display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 auto; padding: 0;list-style:none;}
ul.bb-icons img, ul.bb-icons2 img, ul.bb-icons3 img {max-width:100%!important;}
ul.bb-icons3 li {width:100%;margin-top:4%;}
ul.bb-icons3 li a {display: inline-block;line-height: 0;font-size: 0;}
/* === ここまでは元のCSSそのままでOK === */
.scoreboard {
    border-collapse: collapse;
    width: 96%;
    margin: 20px auto;
    background: linear-gradient(to bottom, #14341c, #3c624b);
}
.scoreboard td {
    border: 2px solid rgba(255, 255, 255, 1);
    padding: 10px;
    text-align: center;
    color: white;
    /* 改行を禁止しないと、幅が狭まったときに縦長になります */
    white-space: nowrap; 
}
.scoreboard tr:nth-child(2) td,
.scoreboard tr:nth-child(3) td {
    font-weight: bold;
    font-size: 1.5em;
}

/* === ここから修正・追記 === */

/* チーム名が入るセル（2行目以降の1列目）の設定 */
.scoreboard tr:nth-child(n+2) td:first-child {
    font-size: 0.9em;
    text-align: left; /* 名前は左寄せが見やすい */
    
    /* ★ここがポイント：「…」にする設定 */
    max-width: 200px;        /* PCでは200pxを超えたら省略する */
    white-space: nowrap;     /* 折り返し禁止 */
    overflow: hidden;        /* はみ出したら隠す */
    text-overflow: ellipsis; /* 末尾を「…」にする */
}

/* スマホ対応 */
@media (max-width: 990px) {
    .scoreboard {
		width:98%;
        margin: 10px auto;
        /* font-size: 0.5em; ← 文字を小さくしすぎると読めないので削除推奨 */
    }
    .scoreboard td {
        padding: 5px;
        font-size: 0.7em; /* 少し小さく */
    }
    
    /* スマホでのチーム名設定 */
    .scoreboard tr:nth-child(n+2) td:first-child {
        max-width: 100px; /* スマホでは100pxを超えたら省略 */
        font-size: 0.8em; 
    }
    
    /* 重要：スマホで15回戦を表示するにはスクロールが必須です */
    /* 以下の「手順2」でdivで囲むことを強く推奨します */
/* 横スクロール用の枠 */
.scoreboard-scroll {
    overflow-x: auto; /* はみ出したらスクロールバーを出す */
    width: 98%;
	margin:0 auto;
}
}



/* PC 共通 -------------------------------------- */
.oki-bb-table {
  width: 60%;                 /* PCでは80%表示 */
  margin: 2em auto 0.2em auto;
  border-collapse: separate;  /* ← ここを separate に */
  border-spacing: 0;
  box-sizing: border-box;
  border: 1px solid #00318b;  /* 外枠だけ青 */
  font-size: 1rem;
  line-height: 1.6;
}

.oki-bb-table th,
.oki-bb-table td {
  padding: 0.8em 1em;
  box-sizing: border-box;
  border: none;               /* いったんセルのボーダーは全消し */
}

/* 行の区切り線（横線だけ・最終行はナシ） */
.oki-bb-table tr:not(:last-child) th,
.oki-bb-table tr:not(:last-child) td {
  border-bottom: 1px solid #e1e1e1;
}

.oki-bb-table th {
  background-color: #cceeff;  /* 左の水色 */
  color: #000;
  font-weight: 600;
  width: 30%;
  text-align: left;
  /* border-right はナシ（隙間に見えがちなので） */
}

.oki-bb-table td {
  background-color: #fff;
}

/* ----------------------------------------------
   スマホ（768px以下）
---------------------------------------------- */
@media screen and (max-width: 768px) {
	.bb-h2 {padding-bottom:0;}

  .oki-bb-table {
    width: 100%;              /* スマホは横いっぱい */
  }

  .oki-bb-table,
  .oki-bb-table tbody,
  .oki-bb-table tr {
    display: block;
  }

  .oki-bb-table th,
  .oki-bb-table td {
    display: block;
    width: 100%;
    border: none;             /* セルのボーダーは引き続きなし */
  }

  /* 行ごとの下線（テーブルの内側だけ） */
  .oki-bb-table tr {
    border-bottom: 1px solid #e1e1e1;
  }
  .oki-bb-table tr:last-child {
    border-bottom: none;
  }

  /* スマホでは th の下にだけ細線 */
  .oki-bb-table th {
    border-bottom: 1px solid #e1e1e1;
  }
}




@media (max-width: 768px) {
	.bb {margin-top:110px!important;}
	header.bb-head.hidden {top:-130px;}
	.bb-head {width:calc(100% - 50px);padding-right:50px;flex-direction:column;align-items:flex-start;height:100px;}
	.bb-head h1 {width:calc(100% - 50px);display:flex;}
	.bb-head p {width:98%;border-left:none;border-top:2px solid #00318b;padding:3px 0;justify-content:center;font-size:11px;flex-direction:column;line-height:130%;}
	.bb-note {width:100%;}
	.sc-bb {top:62.25vw!important;}
	.bb-other {width:100%;}
	.bb-h3 {font-size:21px;margin-top:0;}
	.bb-h3-up {font-size:21px;}
	.main-index-bb {background:#00318b;padding-top:50.25vw;}	
}

.gmap-wrap {width:80%;padding:0;margin:0 auto;}
.gmap-wrap p{color:#00318b;}
.map-embed{
  aspect-ratio: 16 / 9;  /* 4:3 比率でレスポンシブ対応 */
  width: 100%;
  /* max-width: 960px;     任意。ページ幅に合わせて調整 */
  margin: auto;
}
.map-embed iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* クリックされるまで地図操作を無効化（スクロール優先） */
.map-embed.blocked iframe{
  pointer-events: none;
}

/* aspect-ratio未対応ブラウザ向けフォールバック */
@supports not (aspect-ratio: 1 / 1){
  .map-embed{
    position: relative;
  }
  .map-embed::before{
    content: "";
    display: block;
    padding-top: 56.25%; /* 4:3 */
  }
  .map-embed iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
.inter-h {display:flex;justify-content:center;margin:0 auto 5% auto;}
.inter-h-img {margin:8% auto 5% auto;}
.inter-locate {margin:2% auto;width:100%;display:flex;justify-content:space-between;}
.inter-zip p{margin-top:0;}
.inter-ext {width:25%;}
.inter-ext img{width:100%;height:auto;}
.inter-oc-table {
  width: 90%;
  border-collapse: collapse;
  border: 1px solid #000; /* 枠線1px */
  font-size: 21px;
	margin:3% auto;
}

.inter-oc-table th,
.inter-oc-table td {
  border: 1px solid #000;
  padding: 8px 12px;
  vertical-align: middle;
}

.inter-oc-table th {
	width:25%;
  background-color: #a1e7f7; /* 背景色 */
  font-weight: bold;
}

/* span で改行＆文字大きく */
.inter-oc-table th span {
  display: block;      /* 改行 */
  font-size: 1.25em;   /* 文字を大きく */
  font-weight: bold;
  margin-top: 4px;     /* 少し余白 */
}

.inter-alert {text-align:center;font-size:21px;}
@media (max-width: 768px) {
	.gmap-wrap {width:100%;}
	.inter-locate {flex-direction:column-reverse;}
	.inter-ext {width:98%;margin:1%;}
	.inter-oc-table {width: 98%;margin: 1%;border: none;font-size:18px;}

  .inter-oc-table thead {
    display: none; /* 見出し行を非表示（縦型にする） */
  }

  .inter-oc-table tr {
    display: block;
    border: 1px solid #000;
    margin-bottom: 12px;
    background: #fff;
  }

  .inter-oc-table td,
  .inter-oc-table th {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid #ccc;
    text-align: left;
    padding: 8px 10px;
  }

  .inter-oc-table td:last-child {
    border-bottom: none;
  }

.inter-alert {font-size:15px;}
}

/* 共通（PC） */
.inter-oc-table.exam{
  width:90%;
  border-collapse:collapse;
  border:1px solid #000;
  font-size:21px;
}
.inter-oc-table.exam th,
.inter-oc-table.exam td{
  border:1px solid #000;
  padding:10px 12px;
  text-align:center;
  vertical-align:middle;
}
.inter-oc-table.exam thead th{
  background:#a1e7f7;
  font-weight:700;
}
.inter-oc-table.exam thead th[colspan="2"]{
  border-right:1px solid #000; /* 視覚的に列境界を維持 */
}
.inter-oc-table.exam .kana{
  display:block;
  font-size:.75em;
  line-height:1.1;
  opacity:.9;
  margin-bottom:2px;
}

/* 番号を丸で表示 */
.inter-oc-table.exam td.no{
  width:64px;            /* PC時の番号列の幅 */
  padding:8px;
}
.inter-oc-table.exam td.no span{
  display:inline-grid;
  place-items:center;
  width:36px; height:36px;
  border:1px solid #000;
  border-radius:9999px;
  font-weight:700;
}

/* スマホ（768px以下）：縦カード化＋98%幅・margin1% */
@media (max-width: 768px) {
  .inter-oc-table.exam {
    width: 98%;
    margin: 1%;
    border: none;
    border-collapse: separate;
  }

  /* ヘッダー非表示（スマホではdata-labelを使う） */
  .inter-oc-table.exam thead {
    display: none;
  }

  /* 行全体をカード化 */
  .inter-oc-table.exam tbody tr {
    display: flex;
    flex-direction: column;
    border: 1px solid #000;
    margin-bottom: 12px;
    background: #fff;
  }

  .inter-oc-table.exam td,
  .inter-oc-table.exam th {
    border: none;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }

  .inter-oc-table.exam td:last-child {
    border-bottom: none;
  }

  /* 番号セル（上部に配置） */
  .inter-oc-table.exam td.no {
    order: -1;
    text-align: center;
    border-bottom:none;
    padding: 8px 0;
  }

  .inter-oc-table.exam td.no span {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #000;
    border-radius: 50%;
    font-weight: 700;
    background: #fff;
  }

  /* data-label のタイトルを表示 */
  .inter-oc-table.exam td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    background: #a1e7f7;
    padding: 4px 8px;
    margin-bottom: 4px;
  }
}

.inter-pg-table {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            border-collapse: collapse;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .inter-pg-table th,
        .inter-pg-table td {
            padding: 20px;
            text-align: center;
            border: 2px solid #333;
        }

        .inter-pg-table th {
            background-color: #F5B800;
            font-weight: bold;
            font-size: 18px;
        }

        .inter-pg-table th small {
            display: block;
            font-size: 12px;
            font-weight: normal;
            margin-bottom: 5px;
        }

        .inter-pg-table td {
            font-size: 16px;
        }

        .inter-pg-table td:first-child {
            background-color: #f9f9f9;
        }

        .inter-pg-table td:first-child small {
            display: block;
            font-size: 12px;
            margin-bottom: 5px;
        }

        .inter-pg-table td:first-child .main-text {
            font-size: 20px;
            font-weight: bold;
        }

        .inter-pg-table td:nth-child(2) small {
            display: block;
            font-size: 12px;
            margin-bottom: 5px;
        }

        .inter-pg-table td:nth-child(2) .main-text {
            font-size: 20px;
            font-weight: bold;
        }

        .inter-pg-table td:last-child {
            font-size: 32px;
            font-weight: bold;
        }

        /* レスポンシブデザイン */
        @media screen and (max-width: 768px) {
            .inter-pg-table th,
            .inter-pg-table td {
                padding: 12px 8px;
                font-size: 14px;
            }

            .inter-pg-table th {
                font-size: 14px;
            }

            .inter-pg-table td:first-child .main-text,
            .inter-pg-table td:nth-child(2) .main-text {
                font-size: 16px;
            }

            .inter-pg-table td:last-child {
                font-size: 24px;
            }
        }

        @media screen and (max-width: 480px) {
            /* モバイルでは縦積みレイアウトに変更 */
            .inter-pg-table thead {
                display: none;
            }

            .inter-pg-table,
            .inter-pg-table tbody,
            .inter-pg-table tr,
            .inter-pg-table td {
                display: block;
                width: 100%;
            }

            .inter-pg-table tr {
                margin-bottom: 20px;
                border: 2px solid #333;
            }

            .inter-pg-table td {
                border: none;
                border-bottom: 1px solid #ddd;
                position: relative;
                padding-left: 40%;
                text-align: left;
            }

            .inter-pg-table td:last-child {
                border-bottom: none;
            }

            .inter-pg-table td:before {
                content: attr(data-label);
                position: absolute;
                left: 10px;
                width: 35%;
                font-weight: bold;
                background-color: #F5B800;
                padding: 5px;
            }

            .inter-pg-table td:first-child {
                background-color: white;
            }
        }

.inter-pg-table2 {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            border-collapse: collapse;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .inter-pg-table2 th,
        .inter-pg-table2 td {
            padding: 20px;
            text-align: center;
            border: 2px solid #333;
        }

        .inter-pg-table2 th {
            background-color: #FFB5C0;
            font-weight: bold;
            font-size: 18px;
        }

        .inter-pg-table2 th small {
            display: block;
            font-size: 12px;
            font-weight: normal;
            margin-bottom: 5px;
        }

        .inter-pg-table2 td {
            font-size: 16px;
        }

        .inter-pg-table2 td:first-child {
            background-color: #f9f9f9;
        }

        .inter-pg-table2 td:first-child small {
            display: block;
            font-size: 12px;
            margin-bottom: 5px;
        }

        .inter-pg-table2 td:first-child .main-text {
            font-size: 20px;
            font-weight: bold;
        }

        .inter-pg-table2 td:nth-child(2) small {
            display: block;
            font-size: 12px;
            margin-bottom: 5px;
        }

        .inter-pg-table2 td:nth-child(2) .main-text {
            font-size: 20px;
            font-weight: bold;
        }

        .inter-pg-table2 td:nth-child(2) .note {
            display: block;
            font-size: 12px;
            color: #e60000;
            margin-top: 5px;
        }

        .inter-pg-table2 td:last-child {
            font-size: 32px;
            font-weight: bold;
        }

        /* レスポンシブデザイン */
        @media screen and (max-width: 768px) {
            .inter-pg-table2 th,
            .inter-pg-table2 td {
                padding: 12px 8px;
                font-size: 14px;
            }

            .inter-pg-table2 th {
                font-size: 14px;
            }

            .inter-pg-table2 td:first-child .main-text,
            .inter-pg-table2 td:nth-child(2) .main-text {
                font-size: 16px;
            }

            .inter-pg-table2 td:nth-child(2) .note {
                font-size: 10px;
            }

            .inter-pg-table2 td:last-child {
                font-size: 24px;
            }
        }

        @media screen and (max-width: 480px) {
            /* モバイルでは縦積みレイアウトに変更 */
            .inter-pg-table2 thead {
                display: none;
            }

            .inter-pg-table2,
            .inter-pg-table2 tbody,
            .inter-pg-table2 tr,
            .inter-pg-table2 td {
                display: block;
                width: 100%;
            }

            .inter-pg-table2 tr {
                margin-bottom: 20px;
                border: 2px solid #333;
            }

            .inter-pg-table2 td {
                border: none;
                border-bottom: 1px solid #ddd;
                position: relative;
                padding-left: 40%;
                text-align: left;
            }

            .inter-pg-table2 td:last-child {
                border-bottom: none;
            }

            .inter-pg-table2 td:before {
                content: attr(data-label);
                position: absolute;
                left: 10px;
                width: 35%;
                font-weight: bold;
                background-color: #FFB5C0;
                padding: 5px;
            }

            .inter-pg-table2 td:first-child {
                background-color: white;
            }
        }

/* =========================================
   Results 共通スタイル（PC・スマホ共通）
   ========================================= */
.archive-layout {
    display: flex;
    gap: 40px;
    margin: 0 5%;
    padding: 0 5% 5% 0;
}

/* サイドバー */
.archive-sidebar {
    width: 150px;
    flex-shrink: 0;
}

/* PC用・スマホ用の表示制御クラス */
.sp-only { display: none; } /* 基本はスマホ用を隠す */
.pc-only { display: block; } /* 基本はPC用を表示 */


/* 既存のデザイン（PC用） */
.year-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.year-link {
    display: block;
	text-align:right;
	margin-bottom: 3px;
	text-decoration: none;
	padding: 5px 30px 5px 0;
	border-top: 1px solid #024696;
	border-right: 1px solid #024696;
	border-bottom: 1px solid #024696;
	border-left: none;
	border-top-right-radius: 9999px;
	border-bottom-right-radius: 9999px;
	color: #024696;
	transition: background-color 0.2s ease;
}
.year-link:hover {
    color: #FFFFFF;
    font-weight: bold;
	background:#0056b3;
}
.year-link.is-active {
    color: #0056b3;
    font-weight: bold;
	background:#c4f3ff;
}
.archive-main { flex-grow: 1; width:calc(100% - 190px);}

.cat-title {
    border-left: 5px solid #0056b3;
    padding-left: 15px;
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.5rem;
    background: #f9f9f9;
}

/* =========================================
   スマホ対応（890px以下）
   ========================================= */
@media screen and (max-width: 890px) {
    
    /* レイアウトを縦並びにする */
    .archive-layout {
        flex-direction: column; /* 横並び解除 */
        gap: 20px;
        padding: 20px 15px;
    }
	.archive-main{width:100%;}

    /* サイドバーの調整 */
    .archive-sidebar {
        width: 100%; /* 横幅いっぱいに */
        border-right: none; /* 右の線を消す */
        border-bottom: 1px solid #eee; /* 下に線をつける */
        padding-bottom: 20px;
    }

    /* 表示切り替えスイッチ */
    .pc-only { display: none; }  /* PC用リストを消す */
    .sp-only { display: block; } /* スマホ用プルダウンを表示 */

    /* プルダウンのデザイン調整 */
    .year-select-wrap select {
        width: 100%;
        padding: 10px;
        font-size: 16px; /* スマホでズームされないサイズ */
        border: 1px solid #ccc;
        border-radius: 4px;
        background: #fff;
    }
    
    /* メインエリアの見出しサイズ調整 */
    .cat-title {
        font-size: 1.2rem;
        margin-top: 30px;
    }
}
.oki-results-nav {display:flex;align-items:center;margin:0 auto 2em auto;padding:0;max-width: 1120px;}
.oki-results-nav h3 {font-size:28px;margin-right:15px;font-weight:bold;}
.oki-results-nav span {font-size:18px;margin-left:20px;letter-spacing:3px;font-weight:bold;}
.oki-results-nav span a {text-decoration:none;color:#c43419;border-bottom:1px solid #c43419;;padding:0 5px;}
.oki-results-nav span a:visited {color:#c43419;}

.score-table {
  width: 100%;
  border-collapse: collapse; /* 枠線を重ねる */
  border: 1px solid #ccc;
  font-size: 14px;
}

/* すべてのセルの基本設定 */
.score-table th,
.score-table td {
  border: 1px solid #ddd; /* 薄いグレーの線 */
  padding: 10px;
  text-align: center; /* 中央揃え */
}

/* ヘッダー行（チーム名）と左列（項目名）のデザイン */
.score-table thead th,
.score-table tbody th {
  background-color: #a8e2f0; /* 画像のような水色 */
  font-weight: bold;
  color: #333;
  white-space: nowrap; /* 項目名で改行させない */
}

/* チーム名の行だけ少し濃くする場合（画像のニュアンス） */
.score-table thead th {
  background-color: #9ad9ea;
}

/* データ部分（白背景） */
.score-table td {
  background-color: #fff;
	width:45%;
}
.result-cover {display:flex;flex-direction:column;}
ul.match-list {list-style:none;margin: 2em auto;padding: 0.6em 0;max-width:1170px;}
ul.match-list li {width:calc(100% - 2px);border:1px solid #024696;margin:0 auto 5% auto;padding:0;}
ul.match-list li h4{background:#c4f3ff;font-size:150%;padding:10px;margin-bottom:2%;font-weight:bold;}
ul.match-list li p {padding-top:0;margin-top:0;line-height:100%;}
.oki-result-box {width:96%;margin:0 2%;display:flex;}
.result-left {flex:1;}
.result-right {width:33%;padding-left:2%;}
.apply-button-gallery {
	text-align:right;
	font-size:0.9em!important;
}
.apply-button-gallery a {
	display:inline-block;
	padding:15px;
	margin-top:10px;
	border:1px solid #024696;
	border-radius:9999px;
	color:#024696;
	transition: background-color 0.2s ease;
}
.apply-button-gallery a:hover {
	background:#c4f3ff;
}

@media screen and (max-width: 1200px) {
	.result-cover {flex-direction:column-reverse;}
	.oki-result-box {flex-direction:column;}
	.result-left {width:98%;padding:1%;}
	.result-right {width:98%;padding:1%;}
	.score-table {font-size:0.5em;}
	.scoreboard {font-size:0.5em;}
}
@media screen and (max-width: 780px) {
	ul.match-list li h4{font-size:130%;}
	.score-table {font-size:0.5em;}
}

/* --- レスポンシブ対応用の外枠 --- */
.table-wrap {width: 80%;
  overflow-x: auto;       /* はみ出た部分をスクロールさせる */
  -webkit-overflow-scrolling: touch; /* スマホでのスクロールを滑らかに */
  margin-bottom: 20px;
}

/* --- テーブル本体のデザイン --- */
.oki-bb-table2 {width: 100%;
  border-collapse: collapse;
  border: 1px solid #2d88bd; /* 外枠だけ太めの青線 */
  background-color: #fff;
  font-size: 14px;
}

/* セルの設定 */
.oki-bb-table2 th,
.oki-bb-table2 td {
  border: 1px solid #ccc;    /* 中の線は普通のグレー */
  padding: 12px 8px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.4;
  white-space: nowrap;       /* 勝手な改行を防ぐ（任意） */
}

/* 改行を許可したいセルがあれば指定（今回はbrタグがあるので不要ですが念のため） */
.oki-bb-table2 td {
  white-space: normal;
}

/* ヘッダー行（水色背景） */
.oki-bb-table2 thead th {
  background-color: #bceeff;
  color: #000;
  font-weight: bold;
  /* 下線（border-bottom）の指定を削除しました */
}

/* 左列（水色背景） */
.oki-bb-table2 tbody th {
  background-color: #bceeff;
  font-weight: bold;
  color: #000;
}

@media screen and (max-width: 1024px) {
	.table-wrap {width: 100%;}
	.oki-bb-table2 {width: 100%;font-size:0.5em;}
}

.bb_attention {color:#c43419;}

/* ギャラリーの枠組み */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PC: 3列 */
    gap: 20px; 
    max-width: 1170px;
    margin: 0 auto 10% auto; /* 中央揃え */
    padding: 0; 
}

/* 画像の設定 */
.gallery-container img {
    width: 100%;
    height: auto;
    display: block;
    /* 角丸はお好みで戻してください */
    border-radius: 4px; 
}
.gallery-p {width:95%;padding:0 0 0 5%;}

/* スマホ用（画面幅768px以下） */
@media screen and (max-width: 768px) {
    .gallery-container {
        grid-template-columns: repeat(2, 1fr); /* スマホ: 2列 */
        
        /* スマホ時の画像同士の隙間 */
        gap: 10px; 
    }
	.gallery-p {width:98%;padding:0 1%;font-size:12px!important;}
}
.history-img {margin:5% auto 0 auto;}

/* 全体の枠組み */
.history-timeline {
  max-width:1120px;
  width: 80%;
	margin:3% auto;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* 行（年ごとのブロック） */
.history-row {
  display: flex; /* 左（年）と右（中身）を横並び */
  border-bottom: 2px dotted #999; /* 下の点線 */
  padding: 30px 0; /* 上下の余白 */
}

/* 最後の行だけ線を消す */
.history-row:last-child {
  border-bottom: none;
}

/* 左側：年（黒い四角） */
.history-year {
  background-color: #333; /* 背景色：濃いグレー */
  color: #fff;            /* 文字色：白 */
  font-weight: bold;
  font-size: 16px;
  padding: 5px 0;
  width: 80px;            /* 幅固定 */
  height: 30px;           /* 高さ合わせ */
  text-align: center;     /* 文字中央 */
  flex-shrink: 0;         /* 幅が縮まないようにする */
  margin-right: 20px;     /* 右側の隙間 */
  line-height: 1.8;       /* 文字の高さ調整 */
	    display: flex;
    align-items: center;
    justify-content: center;
}

/* 右側：コンテンツエリア全体 */
.history-body {
  flex-grow: 1; /* 残りの幅を全部使う */
}

/* 個別の出来事ブロック（月＋内容） */
.history-event {
  display: flex; /* 月と内容を横並び */
  margin-bottom: 20px; /* 複数ある場合の行間 */
}
.history-event:last-child {
  margin-bottom: 0; /* 最後だけ余白なし */
}

/* 月 */
.event-month {
  font-weight: bold;
  font-size: 18px;
  width: 50px;       /* 幅固定 */
  flex-shrink: 0;    /* 縮まない */
  color: #333;
  line-height: 1.4;
}

/* 内容テキスト部分 */
.event-content {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

/* 見出し（青い文字など） */
.event-title {
  color: #1e4675; /* 画像に近い紺色 */
  font-weight: bold;
  font-size: 18px;
  margin: 10px 0 5px 0; /* 上下の余白調整 */
}
.event-title:first-child {
  margin-top: 0; /* 先頭にある場合は上余白なし */
}

/* 通常の段落 */
.event-content p {
  margin: 0 0 5px 0; /* 行間調整 */
}

/* 強調したい青文字クラス */
.txt-blue {
  color: #1e4675;
  font-weight: bold;
}

/* スマホ対応（幅が狭いとき） */
@media screen and (max-width: 600px) {
  .history-row {
    flex-direction: column; /* 年と内容を縦並びにする */
    padding: 20px 0;
  }
  .history-year {
    margin-bottom: 10px; /* 年の下に隙間 */
  }
  .event-month {
    width: 40px; /* 月の幅を少し狭く */
    font-size: 16px;
  }
}

.ob-player-box {width:100%;display:flex;max-width:1170px;background:#efefef;margin:3% auto;}
.ob-player-left {width:48%;margin-right:2%;display:flex;}
.ob-player-left span {width:50%;}
.ob-player-left article {width:50%;padding:0;margin:0;background:none;}
.ob-player-left article h3 {margin:30px 20px 5px 0;padding:15px;color:#00318b;font-size:25px;background:#FFFFFF;font-weight:bold;}
.ob-player-left article h4 {margin:20px 20px 0 0;padding:15px 0 0 15px;font-size:28px;font-weight:bold;}
.ob-player-left article h4 small {font-size:21px;}
.ob-player-left article p{line-height:130%;padding-left:15px;font-size:15px;}
.ob-player-right {width:50%;padding:30px 30px 0 0;}
.ob-player-right h4 {font-size:18px;font-weight:bold;border-bottom:1px solid #333333;padding-bottom:10px;margin-bottom:10px;}
.ob-player-right p{line-height:150%;font-size:15px;}
.ob-blue {color:#00318b;}
.ob-teams {width:100%;max-width:1170px;margin:5% auto;border:1px solid #333333;}
.ob-teams h4 {background:#d9f6f4;text-align:center;padding:10px 0;font-size:23px;font-weight:bold;}
.ob-list {width:100%;display:flex;}
.ob-list ul {width:46%;margin:2%;}
@media screen and (max-width: 768px) {
	.ob-player-box {flex-direction:column;}
	.ob-player-left, .ob-player-right {width:98%;margin-right:2%;}
	.ob-player-left article h3 {margin:30px 20px 5px 0;padding:15px;color:#00318b;font-size:18px;background:#FFFFFF;font-weight:bold;}
	.ob-player-left article h4 {margin:20px 20px 0 0;padding:15px 0 0 15px;font-size:18px;font-weight:bold;}
	.ob-player-left article h4 small {font-size:12px;}
	.ob-player-right h4 {font-size:16px;}
	.ob-player-right {width:96%;padding:2%;}
	.ob-teams h4 {font-size:18px;}
	.ob-list {flex-direction:column;}
	.ob-list ul {width:96%;margin:2%;}
}
.staff-box {width:97%;display:flex;max-width:1140px;margin:0 auto 3% auto;padding:1%;border:1px solid #00318b;}
.staff-left {margin-right:20px;}
.staff-right {flex:1;min-width: 0;}
.staff-right h3 {display:flex;align-items:center;font-size:48px;line-height:100%;color:#00318b;font-weight:bold;padding:0;margin:0;}
.staff-right h3 span {margin-left:20px;padding:0 10px;font-size:21px;color:#FFFFFF;background:#00318b;flex:1;line-height:150%;}
.staff-right h4 {font-size:33px;line-height:100%;font-weight:bold;padding:10px 0;margin:0;}
@media screen and (max-width: 768px) {
	.staff-left {max-width:40%;margin-right:0;}
	.staff-right{overflow:hidden;}
	.staff-right h3{font-size:36px;align-items:flex-start;margin-left:10px;flex-direction:column;}
	.staff-right h3 span {font-size:18px;width:100%;margin-left:0;}
	.staff-right h4 {font-size:24px;margin-left:10px;}
	.staff-right p {font-size:15px;margin-left:10px;line-height:120%;}
}

/* --- 全体の枠組み --- */
.player-container {
  width: 100%;
  max-width: 1170px; /* 必要に応じて調整 */
  margin: 0 auto;
}

/* --- タブナビゲーション --- */
.player-tab-nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  /*padding-left: 10px;*/ /* 左端の斜め対策 */
}

/* 各タブの形状 */
.player-tab-item {
  position: relative;
  background-color: #FFFFFF;
  color: #2eb9aa;
  border-top: 1px solid #2eb9aa;
  border-right: 1px solid #2eb9aa;
  border-left: 1px solid #2eb9aa;
  padding: 10px 30px;
  margin-right: 5px;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  
  /* ★変更点：背景色だけでなく、文字色(color)もアニメーションするように変更 */
  transition: background-color 0.3s, color 0.3s;
  
  transform: skewX(-20deg);
  transform-origin: bottom left;
}

/* アクティブなタブの色 */
.player-tab-item.is-active {
  background-color: #009688;
  color: #FFFFFF;
}

/* ホバー時（修正箇所） */
.player-tab-item:hover {
  /* opacity: 0.9; ← これは削除 */
  background-color: #009688; /* 背景を濃い緑へ */
  color: #FFFFFF;            /* 文字を白へ */
}

/* 中の文字を逆傾斜させて真っ直ぐに見せる */
.player-tab-text {
  display: block;
  transform: skewX(20deg); /* 親の逆を指定 */
}

/* --- コンテンツエリア --- */
.player-content {
  display: none; /* 初期状態は非表示 */
  padding-top: 0;
}

/* 表示用のクラス */
.player-content.is-show {
  display: block;
  animation: playerFadeIn 0.5s ease;
}

/* フェードインアニメーション */
@keyframes playerFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- テーブル（装飾なし） --- */
.player-table {
  width: 100%;
  /* あとはテーマのCSSまたはデフォルトに任せる */
}

.tablepress thead th,
.tablepress tfoot th {
    background-color: #d9f6f4 !important;
    color: #333 !important;
	text-align:center!important;
}
.column-2 {border-right: 1px solid #dddddd !important;}

/* ベースのスタイル */
.news_cat_bb {
    display: inline-block;       /* 幅を文字数に合わせる */
    position: relative;          /* 擬似要素の基準点 */
    padding: 4px 20px;           /* 文字周りの余白（お好みで調整） */
    color: #fff;                 /* 文字色：白 */
    font-weight: bold;           /* 太字 */
    font-size: 14px;             /* 文字サイズ */
    text-decoration: none;       /* リンクの場合の下線を消す */
    text-align: center;
    line-height: 1.4;
    z-index: 1;                  /* 背景より手前に文字を表示 */
    vertical-align: middle;
}

/* 斜めの背景を作る */
.news_cat_bb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #bf2c1c;   /* 背景色（画像から抽出した赤） */
    transform: skewX(-20deg);    /* ★ここで斜めに変形させる */
    z-index: -1;                 /* 文字の後ろに配置 */
}


/* --- 全体の枠組み --- */
.notice-buttons-bb {
	width: 100%;
	display: flex;           /* 横並び */
	justify-content: center; /* 中央揃え */
	flex-wrap: wrap;         /* スマホ折り返し */
	gap: 0;                  /* 隙間なし */
	margin: 20px 0;
	background: #993300;
}

/* --- ボタンとリンクの共通スタイル --- */
/* buttonだけでなく、aタグにもスタイルを適用するように変更 */
.notice-buttons-bb button,
.notice-buttons-bb a {
	/* ブラウザ標準のボタンスタイルをリセット */
	appearance: none;
	border: none;
	border-radius: 0;
	font-family: inherit;
	cursor: pointer;
	
	/* aタグ用に必要なリセットと設定 */
	text-decoration: none;   /* 下線を消す */
	display: flex;           /* フレックスにして中身を中央揃え */
	justify-content: center; /* 水平中央 */
	align-items: center;     /* 垂直中央 */
	
	/* デザイン設定 */
	background-color: #bf2c1c; /* 背景色（赤） */
	color: #fff;               /* 文字色（白） */
	padding: 5px;              /* ボタンのサイズ */
	font-weight: bold;
	font-size: 0.8vw;
	
	/* ★斜めにする設定 */
	transform: skewX(-20deg);
	
	/* 右隣との境界線（濃い赤） */
	border-right: 4px solid #8a2015;
	
	/* アニメーション */
	transition: opacity 0.3s ease, background-color 0.3s ease;
	
	/* ★追加：テーマの余白を打ち消してくっつける */
	margin: 0;
	box-sizing: border-box;
	width: 19.5%;
}

/* 最後の要素だけ右の線を消す */
/* buttonまたはaの最後の要素に対応 */
.notice-buttons-bb button:last-child,
.notice-buttons-bb a:last-child {
	border-right: none;
}

/* --- アクティブ（選択中）のスタイル --- */
.notice-buttons-bb button.active,
.notice-buttons-bb a.active {
	background-color: #a02517; 
}

/* --- テキスト（傾きを戻す） --- */
.notice-buttons-bb button span,
.notice-buttons-bb a span {
	display: block;          /* ブロック要素にして変形を効かせる */
	transform: skewX(20deg); /* ★親と逆方向に傾けて真っ直ぐに見せる */
}

/* --- ホバー時 --- */
.notice-buttons-bb button:hover,
.notice-buttons-bb a:hover {
	opacity: 0.8;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 1024px) {
	.notice-buttons-bb {
		background: #FFFFFF;
	}
	
	.notice-buttons-bb button,
	.notice-buttons-bb a {
		border-right: none;
		border-bottom: 2px solid #fff;
		/* width: auto; */
		margin: 0 auto 2px;
		font-size: 13px;
		padding: 5px;
	}
	
	.notice-buttons-bb button span,
	.notice-buttons-bb a span {
		/* transform: none; ★削除しました（斜めを維持） */
	}
	
	.notice-category ul.notice-bb {flex-direction:row;}
	.notice-category ul.notice-bb li a {
		width: 100%;
		flex-direction: column;
		background-position: bottom 10% right 5%;
	}
	.notice-category ul.notice-bb li .img-box {
		width: 40%;
		margin: 3% auto;
	}
	.games-info-bb {
		width: 98%;
		margin: 1%;
	}
}

/* --- ギャラリー全体の枠組み --- */
.gallery-list-wrap {
    display: grid;
    /* PC: 4列等分 */
    grid-template-columns: repeat(4, 1fr);
    /* 画像同士の隙間 */
    gap: 15px; 
    
    width: 100%;
    margin-bottom: 30px;
}

/* --- 各アイテムの設定（ここがマスク枠になります） --- */
.gallery-item a {
    display: block;
    text-decoration: none;
    
    /* ★重要：拡大した画像が枠からはみ出ないように隠す */
    overflow: hidden; 
    
    /* 角丸にするなら画像ではなく「枠」につける */
    border-radius: 4px; 
    
    /* Webkitブラウザでのチラつき防止 */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* --- 画像の設定 --- */
.gallery-item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4/3; /* 比率固定（4:3） */
    object-fit: cover; /* 比率を維持してトリミング */
    display: block;
    
    /* ★アニメーションの設定：0.3秒かけて滑らかに変化 */
    transition: transform 0.3s ease;
}

/* --- ホバー時の動き --- */
.gallery-item a:hover img {
    /* ★1.2倍に拡大する（opacityは削除しました） */
    transform: scale(1.2); 
}

/* --- スマホ対応（画面幅768px以下） --- */
@media screen and (max-width: 768px) {
    .gallery-list-wrap {
        /* スマホ: 2列等分 */
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

.youtube-container {
    display: flex;           /* 横並びにする */
    justify-content: space-between; /* 左右均等に配置 */
    flex-wrap: wrap;         /* スマホで折り返す設定 */
    gap: 20px;               /* 動画同士の隙間 */
    width: 100%;
    margin-bottom: 30px;
}

/* --- 各動画の枠 --- */
.youtube-wrapper {
    width: 48%;              /* PC: 2つ並べるため50%より少し小さく */
    position: relative;
    aspect-ratio: 16 / 9;    /* ★重要：16:9の比率を維持する */
}

/* --- iframeの設定 --- */
.youtube-wrapper iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 8px;      /* お好みで角を少し丸く */
}

/* --- スマホ対応（画面幅768px以下） --- */
@media screen and (max-width: 768px) {
    .youtube-wrapper {
        width: 100%;         /* スマホ: 幅いっぱいに広げる */
        margin-bottom: 10px; /* 下に少し隙間を入れる */
    }
}

.bb-points {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 100%;
}

/* リンク枠の調整 */
.bb-points a {
display: block;
position: relative; /* hover時の画像切り替え位置用 */
width: 100%;
max-width: 1070px;
line-height: 0;     /* リンク内の行間余白を削除 */
}

/* 画像のレスポンシブ対応 */
.bb-points img {
width: 100%;
height: auto;
vertical-align: bottom; /* 画像下の微妙な隙間を消すおまじない */
}

/* 野球部投稿カテゴリ：その他 */
.bb-date {padding-right:10px;}
.bb-post {width:100%;max-width:1170px;padding:0;margin:30px auto;display:flex;}
.bb-post a, .bb-post a:visited {text-decoration:none;color:#333333;}
ul.bb-post-pics {width:30%;padding:0;margin:0;list-style:none;display:flex;flex-direction:column;flex-wrap:wrap;}
ul.bb-post-pics li {padding-bottom:5px;display: block;overflow: hidden;min-height:200px;}
.bb-post-pics img {width:90%;}
.bb-post-article {flex:1;}
@media screen and (max-width: 1024px) {
	.bb-post {flex-direction:column-reverse;}
	ul.bb-post-pics {width:100%;flex-direction:row;}
	ul.bb-post-pics li {width:46%;margin:2%;padding-bottom:5px;}
	.bb-post-pics img {width:100%;}
}

/* ベースのスタイル */
.news_cat_bb2 {
    display: inline-block;       /* 幅を文字数に合わせる */
    position: relative;          /* 擬似要素の基準点 */
    padding: 2px 20px;           /* 文字周りの余白（お好みで調整） */
    color: #fff;                 /* 文字色：白 */
    font-weight: bold;           /* 太字 */
    font-size: 12px;             /* 文字サイズ */
    text-decoration: none;       /* リンクの場合の下線を消す */
    text-align: center;
    line-height: 1.4;
    z-index: 1;                  /* 背景より手前に文字を表示 */
    vertical-align: middle;
}

/* 斜めの背景を作る */
.news_cat_bb2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #bf2c1c;   /* 背景色（画像から抽出した赤） */
    transform: skewX(-20deg);    /* ★ここで斜めに変形させる */
    z-index: -1;                 /* 文字の後ろに配置 */
}

/* -------------------------------------------
  .bb-post-article 内のブロックスタイル復活
------------------------------------------- */

/* 基本の余白（ブロック間のリズム） */
.bb-post-article > * {
    margin-bottom: 1.5rem;
}

/* 見出し：サイズと余白 */
.bb-post-article h2 {
    font-size: 1.75em;
    margin-top: 2.5em;
    margin-bottom: 1em;
    font-weight: 700;
}
.bb-post-article h3 {
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: 700;
}

/* リスト：インデントとマークを復活 */
.bb-post-article ul,
.bb-post-article ol {
    padding-left: 2em;
    margin-bottom: 1.5rem;
}
.bb-post-article ul { list-style-type: disc; }
.bb-post-article ol { list-style-type: decimal; }

/* 引用ブロック (wp-block-quote) */
.bb-post-article .wp-block-quote {
    border-left: 4px solid #555; /* 左側の線 */
    padding-left: 1em;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    color: #555;
}
.bb-post-article .wp-block-quote cite {
    font-style: normal;
    font-size: 0.9em;
    color: #777;
}

/* テーブルブロック (wp-block-table) */
.bb-post-article .wp-block-table {
    border-collapse: collapse;
    width: 100%;
}
.bb-post-article .wp-block-table td,
.bb-post-article .wp-block-table th {
    border: 1px solid #ccc; /* 枠線を復活 */
    padding: 0.5em;
}

/* 画像ブロック (wp-block-image) */
.bb-post-article .wp-block-image {
    margin-bottom: 1.5rem;
}
.bb-post-article .wp-block-image figcaption {
    font-size: 0.8em;
    color: #777;
    text-align: center;
    margin-top: 0.5em;
}

/* ボタンブロック (wp-block-button) */
.bb-post-article .wp-block-button__link {
    text-decoration: none; /* 下線を消す */
    /* 色は管理画面の設定が優先されますが、念のためデフォルトを指定 */
    padding: 0.5em 1em;
}

hr.bb-hr {
    border: 0;              /* デフォルトの枠線を消す（重要） */
    height: 1px;            /* 高さを1pxにする */
    background-color: #ccc; /* 線の色（好きな色に変更可） */
    margin: 20px 0;         /* 上下の余白（お好みで） */
}

.cat_all_bb {
	display: inline-block;
	margin:20px 0;
	padding: 8px 30px;
	background-color: white;
	color: #024696;
	text-decoration: none;
	border: 1px solid #024696;
	border-radius: 50px;
	transition: background-color 0.3s ease;
	font-size: 90%;
}

        .cat_all_bb:hover {
			color:#FFFFFF;
            background-color: #024696;
        }

/* ベースのスタイル */
.bb-readmore {
    display: inline-block;
    margin: 0;
    padding: 0 30px;
    color: #333333;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 90%;
}

/* ホバー時の設定（修正版） */
.bb-readmore:hover,
.bb-readmore:hover .arrow-heading { /* ←ここを追加！ */
    color: #024696;
}




/* 1. 画像を囲む「箱」の設定 */
.bb-img-box {
width: 97%;
aspect-ratio: 3 / 2;
overflow: hidden;
margin-right: 3%;
flex-shrink: 0;
display: flex;
align-items: center;
}

/* 2. 画像自体の設定 */
.bb-img-box img {
    width: 100%;           /* 箱の中で幅いっぱい */
    height: auto;          /* 高さは自動計算 */
    max-width: 100%;
    transition: transform 0.3s ease; /* アニメーション */
    display: block;
}

/* 3. マウスオーバー時の動き */
.bb-img-box img:hover {
    transform: scale(1.2);
}

/* 1. 画像を囲む「箱」の設定 */
.bb-img-box-gallery {
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
margin: 0;
padding: 0;
    
    /* Flexboxでのセンタリングは object-fit を使うなら不要ですが、残しても害はありません */
    display: flex;         
    align-items: center;   
    justify-content: center; /* 念のため左右も中央に */
}

/* 2. 画像自体の設定 */
.bb-img-box-gallery img {
    width: 100%;           
    
    /* ▼▼▼ ここも重要：高さを箱に合わせる ▼▼▼ */
    height: 100%;          /* 箱の高さ（aspect-ratioで決まった高さ）いっぱいに伸ばす */
    
    /* ▼▼▼ 画像の比率を崩さずにトリミングする魔法のコード ▼▼▼ */
    object-fit: cover;     
    
    transition: transform 0.3s ease; 
    display: block;
}

/* 3. マウスオーバー時の動き */
.bb-img-box-gallery img:hover {
    transform: scale(1.2);
}

/* 1. 画像を囲む「箱」の設定 */
.bb-img-box-foot {
    width: 100%;
    overflow: hidden;      /* 拡大してはみ出た部分をカット */
    margin: 0;
	padding:0;
    flex-shrink: 0;        /* 潰れないようにする */
    
    /* ▼▼▼ 追加・変更した部分 ▼▼▼ */
    display: flex;         /* 箱そのものをFlexコンテナにする */
    align-items: center;   /* 中身（画像）を縦方向の中央に配置 */
    /* line-height: 0;     ← display: flex にしたので不要になります（削除してもOK） */
}

/* 2. 画像自体の設定 */
.bb-img-box-foot img {
    width: 100%;           /* 箱の中で幅いっぱい */
    height: auto;          /* 高さは自動計算 */
    max-width: 100%;
    transition: transform 0.3s ease; /* アニメーション */
    display: block;
}

/* 3. マウスオーバー時の動き */
.bb-img-box-foot img:hover {
    transform: scale(1.2);
}

.apply-button-bb {
	text-align:center;
}
.apply-button-bb a {
	display:inline-block;
	padding:10px 20px 10px 20px;
	border:1px solid #024696;
	border-radius:9999px;
	color:#024696;
	transition: background-color 0.2s ease;
}
.apply-button-bb a:hover {
	background:#024696;
	color:#FFFFFF;
}