@charset "UTF-8";

/* Font Awesome CSSの読み込み */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* リンクの下線を削除 - より厳密に指定 */
.info-link {
    text-decoration: none;
}

.info-link:hover {
    text-decoration: none;
}

/* すべての子要素の下線も確実に削除 */
.info-link * {
    text-decoration: none;
}

.infoboxoc {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 1em;
    border-radius: 5px;
    background-color: #fff9e5;
    color: #333333;
    width: 600px;
    transition: all 0.3s ease;
    /* アニメーションの基本設定 */
    border-top: solid #ffb36b 5px;
    border-bottom: solid #ffb36b 5px;
}

/* マウスオーバー時のアニメーション */
.info-link:hover .infoboxoc {
    transform: translateY(-5px);
    /* 少し上に移動 */
    box-shadow: 0 5px 15px rgba(255, 179, 107, 0.3);
    /* 影を追加 */
    background-color: #fff5d6;
    /* 背景色を少し濃くする */
}

.infoboxoc .fa-bell {
    font-size: 24px;
    color: #ffb36b;
    transition: transform 0.3s ease;
    /* ベルアイコンのアニメーション */
}

/* ベルアイコンのアニメーション */
.info-link:hover .fa-bell {
    transform: rotate(15deg);
    /* ベルが揺れるように回転 */
}

.infoboxoc p {
    margin: 0;
    padding: 0 0 0 .7em;
    border-left: 1px solid #ffb36b;
    margin-left: .7em;
    text-decoration: none;
    /* pタグ内の下線も明示的に削除 */
}

.ceoc1 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 50px;
}


/* --- oc --- */

.ocimage {
    max-width: 770px;
    /* 最大幅 */
}

.ocimage img {
    width: 100%;
    height: auto;
}

.ocdate1 {
    width: 770px;
    position: relative;
}

.ocdate2 {
    position: absolute;
    top: 300px;
    left: 40px;
}

.ocb1 {
    font-weight: bold;
    font-size: 46px;
    color: #4e92df;
}

.ocb2 {
    font-weight: bold;
    font-size: 30px;
    color: #ff0000;
}

.ocb3 {
    font-weight: bold;
    font-size: 30px;
    color: #186b75;
}

.ocb4 {
    font-weight: bold;
    font-size: 20px;
    color: #A27618;
}

.ocb5 {
    font-weight: bold;
    font-size: 30px;
    color: #4A6BE9;
}

.ocinote1 {
    width: 710px;
    padding: 10px 30px 30px 30px;
    margin: 30px 0px 40px 0px;
    background-color: #faffea;
    text-align: left;
    color: #525252;
    font-weight: bold;
    font-size: 14px;
    border: solid #e3dfc7 1px;
    border-radius: 20px;
}

.ocmenu1 {
    position: relative;
    padding: 20px;
    background: #e0edff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.ocmenu1:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #e0edff;
    width: 0;
    height: 0;
}

.ocsmenu1 {
    width: 690px;
    padding: 20px 20px 30px 20px;
    margin: 0px 20px 10px 20px;
    text-align: left;
    background-position: right top;
    background-image: url("../exposition/img/octs5.png");
    background-repeat: no-repeat;
}

.ocsmenun1 {
    width: 690px;
    padding: 20px 20px 30px 20px;
    margin: 0px 20px 10px 20px;
    text-align: left;
    background-position: right top;
    background-image: url("../exposition/img/octs6.png");
    background-repeat: no-repeat;
}

table.octt1 {
    width: 660px;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

table.octt1 th {
    width: 20%;
    vertical-align: top;
    padding: 10px 0px 10px 40px;
    text-align: left;
    color: #525252;
    background: url(../exposition/img/timelist3.png) no-repeat;
    font-weight: bold;
    font-size: 17px;
}

table.octt1 td {
    vertical-align: top;
    padding: 10px 5px;
    text-align: left;
    font-weight: normal;
}

table.octt1 td.sd {
    vertical-align: top;
    padding: 10px 10px;
    text-align: left;
    font-weight: normal;
}

.ocsmenu1s {
    width: 550px;
    height: 168px;
    padding: 20px 110px 0px 110px;
    margin: 0px 0px 0px 0px;
    font-weight: bold;
    font-size: 14px;
    color: #BC8135;
    background: url(../exposition/img/octs2.gif) no-repeat;
}

.ocsmenu2 {
    width: 710px;
    padding: 10px 30px 30px 30px;
    margin: 30px 0px 40px 0px;
    text-align: left;
}

.buttonf1 a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: 0 auto;
    padding: 1em 2em;
    width: 300px;
    color: #323232;
    font-size: 18px;
    font-weight: 700;
    background-color: #f6ac55;
    transition: 0.3s;
}

.buttonf1 a::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border: 2px solid #50a8df;
    transition: 0.2s;
}

.buttonf1 a::after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #323232;
    border-right: 3px solid #323232;
    transform: rotate(45deg);
}

.buttonf1 a:hover::before {
    top: 0;
    left: 0;
}

.buttonf1 a:hover {
    text-decoration: none;
    background-color: #e1c8ab;
}

.ocsmenu2s {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    padding: 10px 10px 10px 10px;
    background-color: #ffffff;
}

ul.qa1 {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.qa1 li {
    padding: 9px 0px 9px 38px;
    background-repeat: no-repeat;
    background-position: 3px 4px;
    line-height: 120%;
}

.qa1 li.q1 {
    background-image: url(../exposition/img/qa1.gif);
    color: #9e650b;
    font-weight: bold;
}

.qa1 li.a1 {
    background-image: url(../exposition/img/qa2.gif);
}

.ocmenu3 {
    width: 770px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    padding: 10px 0px 10px 0px;
}

.ocmenu4 {
    width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    padding: 10px 0px 10px 0px;
}

.oceve1 {
    width: 180px;
    float: left;
    margin-bottom: 15px;
    text-align: center;
}

ul.ocex {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.ocex li {
    background-repeat: no-repeat;
    background-position: 3px 2px;
    line-height: 120%;
}

.ocex li.pt {
    background-image: url(../exposition/img/ocpt1.gif);
    padding: 3px 0px 17px 160px;
}

.ocex li.ot {
    background-image: url(../exposition/img/ocot1.gif);
    padding: 3px 0px 17px 160px;
}

.ocex li.st {
    background-image: url(../exposition/img/ocst1.gif);
    padding: 3px 0px 17px 160px;
}

.ocex li.ns {
    background-image: url(../exposition/img/ocns1.gif);
    padding: 3px 0px 17px 160px;
}

.ocex li.csw {
    background-image: url(../exposition/img/occsw1.gif);
    padding: 25px 0px 30px 160px;
}

.coloc1 {
    color: #5592DB;
    font-weight: bold;
    font-size: 16px;
}

.coloc2 {
    font-size: 14px;
    margin: 5px 10px 5px 20px;
}

.occlg20 {
    font-weight: bold;
    font-size: 20px;
    color: #666666;
    padding-bottom: 20px;
    border-bottom: solid #9aa066 1px;
}

.occolr1 {
    color: #ff0000;
    font-size: 20px;
}

.spocp1 {
    padding: 8px 0px 8px 0px;
}

.boocn1 {
    width: 770px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background-color: #28bfa9;
    margin-top: 40px;
    padding: 20px 0px 20px 0px;
    text-align: center;
}

.boocn2 {
    width: 730px;
    padding: 5px 20px 5px 20px;
    text-align: left;
}

/* --- chsa --- */

table.cht1 {
    width: 768px;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
    border: 1px #b3d8b6 solid;
}

table.cht1 th {
    background-color: #ddf2da;
    padding: 8px 2px;
    border: 1px #b3d8b6 solid;
    font-weight: normal;
}

table.cht1 td {
    background-color: #fafafa;
    padding: 8px 2px;
    border: 1px #b3d8b6 solid;
}

.chasa10 {
    margin: 0;
    padding: 0px 10px 0px 10px;
}

.spoc1 {
    margin: 10px 10px 0px 10px;
}

.button {
    display: inline-block;
    width: 180px;
    height: 35px;
    background-color: white;
    color: #333;
    text-decoration: none;
    text-align: center;
    line-height: 35px;
    border-radius: 8px;
    border: 1px solid #ccc;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    margin-top: 10px;
}

.button:hover {
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.button:hover::before {
    transform: translateX(100%);
}

.button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0) 100%);
    transition: transform 0.6s ease;
}

.ocex li.ptotstns {
    background-image: url(../exposition/img/ocptotstns1.gif);
    padding: 25px 0px 30px 160px;
}

.oci {
    width: 680px;
    padding: 10px;
    margin: 10px 0px 40px 30px;
    border: 1px #b3d8b6 solid;
    background-color: #f2f2f2;
    text-align: left;
    color: #525252;
    font-weight: bold;
    font-size: 14px;
}

/* ---- Color‑Splash Schedule ---- */
.ocye2{
  width:770px;
  margin:20px auto;
  border-collapse:separate;
  border-spacing:18px;
  font-family:"Segoe UI","メイリオ",sans-serif;
  table-layout:fixed;
}

.ocye2 .card{
  position:relative;
  padding:32px 14px 32px;
  line-height:1.55;
  text-align:center;
  color:#fff;                    /* 文字を白系に */
  border-radius:20px;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  overflow:hidden;               /* 背景装飾カット用 */
  transition:.3s ease-out;
}
.ocye2 .card:hover{
  transform:translateY(-8px) scale(1.03);
  box-shadow:0 12px 26px rgba(0,0,0,.28);
}

/* 角にキラッと光を走らせるアニメーション */
.ocye2 .card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(130deg,rgba(255,255,255,.0) 0%,rgba(255,255,255,.35) 30%,rgba(255,255,255,.0) 60%);
  mix-blend-mode:overlay;
  transform:translateX(-100%);
  transition:transform .7s cubic-bezier(.4,0,.2,1);
}
.ocye2 .card:hover::after{transform:translateX(100%);}

/* ---- 月別カラフル背景 ---- */
.m05{background:linear-gradient(-45deg,#ff5f6d,#ffc371);}
.m06{background:linear-gradient(-45deg,#ff9a3d,#d4cd46);}
.m07{background:linear-gradient(-45deg,#f9d423,#ff4e50);}
.m08{background:linear-gradient(-45deg,#4facfe,#00f2fe);}
.m09{background:linear-gradient(-45deg,#43e97b,#38f9d7);}
.m10{background:linear-gradient(-45deg,#7f7fd5,#86a8e7,#91eae4);}
.m03{background:linear-gradient(-45deg,#f857a6,#ff5858);}

/* 年号・日付装飾 */
.year{
  font-size:.9rem;
  letter-spacing:.6px;
  opacity:.85;
}
.ocday1{
  display:inline-block;
  margin:8px 0 12px;
  font-size:1.8rem;
  font-weight:900;
  text-shadow:0 2px 4px rgba(0,0,0,.25);
}

/* ===== メモ帳コンテナ ===== */
.notepad {
    width: 400px;
    background: #fffbea;
    /* クリーム色の用紙 */
    padding: 40px 25px 5px 25px;
    margin: 20px 0px 20px 30px;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .15);
    position: relative;
    line-height: 1.8;
    font-size: 16px;
    color: #333;
}

/* ----- 上部のスパイラル（リング穴） ----- */
.notepad::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 50%;
    width: 80%;
    height: 0;
    border-top: 2px solid #d0d0d0;
    transform: translateX(-50%);
}

.notepad::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(80% + 4px);
    height: 36px;
    background:
        radial-gradient(circle at 50% 0, #555 3.5px, transparent 4px) repeat-x;
    background-size: 22px 36px;
    transform: translateX(-50%);
}

/* ===== 行罫（ノートらしい横線） ===== */
.notepad p {
    margin: 0 0 1.4em;
    padding-left: 4px;
    background:
        repeating-linear-gradient(to bottom,
            transparent 0,
            transparent 33px,
            rgba(0, 0, 0, 0.07) 34px);
}

/* 強調（お好みで） */
strong {
    font-weight: 700;
    color: #d65a2f;
}

/* ▼ オープンキャンパス年間日程：CSS ▼ */
.oc-box{
  width:700px;                     /* 指定の横幅 */
  margin:20px auto;                /* 中央寄せ */
  padding:20px 30px 0px 30px;
  font-family:"Meiryo","Hiragino Kaku Gothic ProN",sans-serif;
  line-height:1.8;
  color:#333;
}

.tagline{
  font-size:20px;
  margin:0 0 24px;
  color:#207c80;
  font-weight:600;
  letter-spacing:.05em;
}

.oc-box p{
  margin:0 0 1.2em;
}

.oc-next-badge {
  display: inline-block;
  background: #000000;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
  margin-right: 8px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}







.oc-wrapper {
  width: 770px;
  margin: 0 auto;
  font-family: 'Noto Sans JP', sans-serif;
  color: #2D2D2D;
  line-height: 1.8;
  font-size: 15px;
padding: 20px 0px 50px 0px;
}



/* ===== Q&A List ===== */
.oc-qa-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.oc-qa-item {
  border: 1px solid #E0E8EC;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s;
}
.oc-qa-item:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* ===== Question Button ===== */
.oc-qa-question {
  width: 100%;
  background: #F7FAFB;
  border: none;
  padding: 18px 24px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2D2D2D;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.2s;
}
.oc-qa-question:hover {
  background: #EFF5F8;
}

/* ===== Q Badge ===== */
.oc-qa-q-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0078B8;
  color: #fff;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

/* ===== Arrow ===== */
.oc-qa-arrow {
  margin-left: auto;
  font-size: 12px;
  color: #0078B8;
  transition: transform 0.3s;
  flex-shrink: 0;
}
.oc-qa-item.open .oc-qa-arrow {
  transform: rotate(180deg);
}

/* ===== Answer ===== */
.oc-qa-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.oc-qa-item.open .oc-qa-answer {
  max-height: 300px;
}

.oc-qa-answer-inner {
  padding: 20px 24px 24px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* ===== A Badge ===== */
.oc-qa-a-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FF6B35;
  color: #fff;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

/* ===== Answer Text ===== */
.oc-qa-answer-text {
  font-size: 14px;
  line-height: 1.9;
  color: #666;
  padding-top: 4px;
}