@charset "UTF-8";
/*2025/6/5 HP全体でハードコーディングが過ぎるので汎用性のあるものとあまりに長いものはここに記述*/

/*メニュー
・h1タグ内でリンク設定
・インデント整理
・矢印付きボタン
・リスト番号のカスタム
*/

/*
・h1タグ内で独立してリンクを設定
使用ページ
/examinee/guidance.php
*/
.h1_tag_link{
  float:right;
  font-size: 70%;
  position:relative;
  top:10px;
}

@media (max-width: 960px) {
  .h1_tag_link{
    float:none;
    display: block;
    margin-top: 8px;
    font-size: 80%;
    position:relative;
    top:0px;
  }
}

/*
・インデント整理
使用ページ
/examinee/guidance.php
*/
.indent{
	text-indent: -1.2em;
	padding-left: 1.2em;
}
.indent2{
	text-indent: -2em;
	padding-left: 2em;
}

.indent3{
	text-indent: -3em;
	padding-left: 3em;
}

/*
・右端に矢印がついたボタン
使用ページ
/examinee/guidance.php

テンプレート
<div class="appearance_pc_button">
  <div class="menu_l">
    <button type="button" class="button" onclick="location.href='#[遷移先]'">コンテンツ名<span class="arrow">&#12297;</span></button>
  </div>
  <div class="menu_r">
    <button type="button" class="button" onclick="location.href='#[遷移先]'">コンテンツ名<span class="arrow">&#12297;</span></button>
  </div>
</div>
<div class="appearance_tab_button">
  <button type="button" class="button" onclick="location.href='#[遷移先]'">コンテンツ名<span class="arrow">&#12297;</span></button><br>
  <button type="button" class="button" onclick="location.href='#[遷移先]'">コンテンツ名<span class="arrow">&#12297;</span></button><br>
</div>
*/
.menu-button-arrow {
    padding: 0;
    display: block;
    text-align: right;
    color: #c6c6c6;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.menu-button-arrow:hover {
    color: #000000;
}

.menu-button {
    padding: 20px;
    margin-top: 10px;
    border: 1px solid #e2f2f2;
    border-bottom: 1px solid #a9a9a9;
    text-decoration: none;
    width: 100%;
    text-align: left;
    background-color: #FFFFFF;
    position: relative;
    font-size: 100%;
    vertical-align: baseline;
    cursor: pointer;
}

.menu-button:hover {
    transition: 0.5s;
    color: #FFFFFF;
    background-color: #48a9a6;
}

.menu-button:hover span {
    color: #FFFFFF;
    transition: 1s;
}

/*文字と矢印の被り方の関係で1090px以下でスマホ表示に切り替えたほうがいいっぽい*/
@media (min-width: 1100px) {
  .appearance_pc_button {
    display: block;
    margin-bottom: 40px;
  }
  .appearance_tab_button {
    display: none;
  }
  .menu_l{
    float:left;
    width: 48%;
  }
  .menu_r{
    float:right;
    width: 48%;
  }
}
@media (max-width: 1100px) {
  .appearance_pc_button {
    display: none;
  }
  .appearance_tab_button {
    display: block;
    margin-bottom: 24px;
  }
  .menu_l{
    display:inline-block;
    width:100%;
  }
  .menu_r{
    display:inline-block;
    width:100%;
  }
}

/*任意のデザインでリストを作れる
使用ページ
・/postgraduate/applicantR8_1.php
なんか一段下がるので注意(多分元のli要素消してるせい)
<ol class="custom_list">
  <li class="in_custom_list marker_kome">注意事項その1</li>
  <li class="in_custom_list marker_kome">注意事項その2</li>
  <li class="in_custom_list marker_kome">注意事項その3</li>
</ol>
*/
.custom_list {
  list-style: none;
  counter-reset: number;
}

.custom_list li {
  position: relative;
  padding-left: 40px;
  display:block;
}

/* --- バリエーション --- */


/* ※1 */
.marker_kome::before {
  counter-increment: number;
  content: '※' counter(number);
  position: absolute;
  left: 0;
}
/*番号なし※*/
.marker_kome_nonum::before {
  content: '※';
  position: absolute;
  left: 0;
}

/* (1) */
.marker_round::before {
  counter-increment: number;
  content: '(' counter(number) ')';
  position: absolute;
  left: 0;
}

/* [1] */
.marker_square::before {
  counter-increment: number;
  content: '[' counter(number) ']';
  position: absolute;
  left: 0;
}