/* =================================== */
/* 共通 */
/* z-index 
  2 .memo-tab.active メモのアクティブタブ
  3 .memo-close メモの閉じるボタン
  800 .sp-menu-overlay MeltyBorder公式HPのスマホ用右メニューを開いたときに背景を暗くする
  850 .sp-menu MeltyBorder公式HPのスマホ用右メニュー
  900 .mb-menu-button MeltyBorder公式HPのスマホ用右メニューを開く/閉じるボタン
  999  #footer　フッター
  1000 .site-header ヘッダー 
  3000 .search_popup 検索ポップアップ 
  9999 .modal 左カラムのポップアップ 
  9999 #selectionSearchBtn 本文から検索 
  9999 .character-select-modal 人物選択ポップアップ 
  99999 .memo-moda メモ帳ポップアップ 
/* =================================== */

/*フォントインポート(CSSの一番上に定義)*/
/* "Kiwi Maru" 台詞　かわいい丸文字 */
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti&family=Kiwi+Maru&family=Yuji+Boku&display=swap');

/* "Zen Kurenaido" 書き文字　大人 */
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti&family=Kiwi+Maru&family=Yuji+Boku&family=Zen+Kurenaido&display=swap');

/* "Yomogi" 書き文字　女性・子供 */
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti&family=Kiwi+Maru&family=Yomogi&family=Yuji+Boku&family=Zen+Kurenaido&display=swap');

:root {
  --main: #ffb0b0;
  --sub: #ffd8d8;
  --line: #f0c7c7;
  --header-height: 76px;
  --footer-height: 38.5px;
  --footer-color: #1d365e;
  --main-bg-color:#f7f5f2;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body, html { /*ヘッダーフッターの余白をなくす*/
  margin: 0;
  padding: 0;
  background-color: #1d365e;
  background-image: url(/mertyborder/img/background.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/*PCのみ*/
@media screen and (min-width:769px) {

  html,
  body {
    height: 100%;
    overflow: hidden;
  }

}

/* =================================== */
/* ヘッダー */
/* =================================== */

.site-header { /* メインページでヘッダー背景を指定 */
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header_field { /* ヘッダー用HTML　外枠 */
  max-width: 1200px;
  margin: 0 auto;
  background-image: linear-gradient(#2f5695,#1d365e);
  display: flex;
  justify-content: space-between; /* 項目を等間隔 */
  align-items: center;
  padding: 10px 20px;
  border-right:1px solid #5978aa;
  border-left:1px solid #5978aa;
  height: var(--header-height);
  box-sizing: border-box;
}

.header_field a{
  text-decoration: none;
}

.header_block { /* ヘッダー用HTML　各要素のDIV */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.header_text { /* ヘッダー用HTML　テキスト縦ならび用 */
  display: flex;
  flex-direction: column;
}

.header_text h2,
.header_text h3,
.header_text h6 {
  margin: 0;
  font-family:  serif;  
}

.header_text h6 {
  font-size: 12px;
  font-weight: normal;
  text-align: center;
}

/* 調査記録 */
.archive-toggle {
  display: flex;
  align-items: center;
}

.archive-switch {
  position: relative;
  margin-left: 10px;
  width: 25px;
  height: 55px;
  display: inline-block;
}

.archive-switch input {
  display: none;
}

.archive-slider {
  position: absolute;
  inset: 0;
  background: #666;
  border-radius: 30px;
  transition: .2s;
}

.archive-slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 34px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: .2s;
}

.archive-switch input:checked+.archive-slider {
  background: #6bb36e;
}

.archive-switch input:checked+.archive-slider::before {
  transform: translateY(-31px);
}

/* 検索フォーム */
.search_container {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 20px;
  padding: 5px 10px;
  justify-content: flex-end;
}

.search_container input {
  border: none;
  outline: none;
  width: 160px;
}

.search_container button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.search_icon {
  width: 18px;
  height: 18px;
  stroke: #1d365e;
  stroke-width: 2;
  fill: none;
}


/* 検索ポップアップ */
.search_popup {
  display: none;
  position: absolute;
  top: 45px;
  right: 0;
  background: #ffffff; /* 通常時 */
  color: #1d365e;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.6;
  width: 300px;
  z-index: 3000;
  border: 1px solid #4377cb;
}

/* ヒットなし・エラー時 */
.search_popup.error {
  background: #1d365e;
  color: #fffafa;
}

.search_popup a {
  color: #1d365e;
  white-space: nowrap;
  text-decoration:underline;
}

.popup_text {
  font-size: 14px;
  line-height: 1.6;
}

.popup_hit {
  color: #32974b;
  font-size: 13px;
}

.popup_error {
  color: #a94442;
  font-size: 13px;
}


/* 本文から検索 */
#selectionSearchBtn{
  position: absolute;
  display: none;

  z-index: 9999;

  background: #2f5695;
  color: white;

  border-radius: 6px;
  padding: 6px 10px;

  font-size: 14px;
  cursor: pointer;

  user-select: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);

  padding: 10px 16px;
  font-size: 16px;
}

#selectionSearchBtn:hover{
  opacity: 0.9;
}


/* メモ帳ポップアップ */
.memo-button{
  cursor:pointer;
}

.memo-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:99999;
}

.memo-modal.show{
  display:flex;
  justify-content:center;
  align-items:center;
}

.memo-window{
  width:min(1000px,90vw);
  height:min(850px,90vh);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background:
    linear-gradient(
      180deg,
      #f7fbff 0%,
      #edf5ff 100%
    );
  border:2px solid #2f5695;
  border-radius:16px;
  box-shadow:
    0 10px 40px rgba(0,0,0,.35),
    0 0 0 4px rgba(79,220,255,.15);
  padding:25px;
  position:relative;
}

.memo-close{
  position:absolute;
  top:5px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid #fff;
  background:#2f5695;
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  transition:.15s;
  z-index: 3;
}

.memo-close:hover{
  background:#4fdcff;
  color:#1d365e;
  transform:scale(1.08);
}

.memo-tabs{
  display:flex;
  gap:6px;
  margin-bottom:0;
}

.memo-tab{
  padding:10px 18px;
  border:
    2px solid #cad8ec;
  border-bottom:none;
  border-radius:
    12px 12px 0 0;
  background:#cad8ec;
}

.memo-tab:hover{
  background:#dce7f7;
}

.memo-tab.active{
  background:#2f5695;
  color:white;
  border:
    2px solid #2f5695;
  border-bottom:none;
  position:relative;
  z-index:2;
}

.todo-box{
  background:white;
  border:3px solid #2f5695;
  border-radius:0 0px 12px 12px;
  padding:20px;
  box-shadow:
    0 2px 8px rgba(29,54,94,.08);
}

.todo-table{
  border-collapse:collapse;
}

.todo-table td{
  padding:4px 8px;
  vertical-align:middle;
}

.todo-table input{
  width:250px;
  border:none;
  border-bottom:
    2px solid #2f5695;
  background:transparent;
  padding:4px;
  font-size:15px;
  transition:.2s;
}

.todo-table input:focus{
  outline:none;
  border-bottom-color:#4fdcff;
  background:
    rgba(79,220,255,.05);
}

.memo-free{
  margin-top:25px;
  background:white;
  border-radius:12px;
  padding:15px;
  box-shadow:
    0 2px 8px rgba(29,54,94,.08);
}

.memo-free h3{
  margin-top:0;
  color:#1d365e;
  border-bottom:
    1px solid #d4dff0;
  padding-bottom:8px;
}

.memo-free textarea{
  width:100%;
  min-height:260px;
  box-sizing:border-box;
  resize:none;
  border:none;
  background:
    repeating-linear-gradient(
      transparent,
      transparent 29px,
      #d7e4f7 30px
    );
  line-height:30px;
  font-size:15px;
  padding:10px;
  outline:none;
}


/* スマホ用 */
.mobile_nav{ /* PCでは調査記録を消す */
  display:none;
}

@media screen and (max-width:768px){

  .pc_nav{ /* スマホではアイコン説明を簡略化 */
    display:none;
  }

  .mobile_nav{
    display:block;
    font-size:10px;     
    font-family:serif;
    text-align:center;
    margin-top:2px;
  }

  .header_block img{
    height:30px;        
    width:30px;
  }

  /* スマホではメモポップアップの見た目を変える */

  .memo-window{
    overflow-y:auto;
    font-size: small;
  }

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

  .todo-table tr{
    margin-bottom:12px;
  }

  .todo-table td{
    padding:2px 0;
  }

  .todo-table input{
    width:100%;
    box-sizing:border-box;
  }

}


/* =================================== */
/* フッター */
/* =================================== */

#footer {
  text-align: center;
  font-family: serif;
  background: #1d365e;
  color: #fff;
  font-size: small;
  padding: 10px 0;

  border-right: 1px solid #5978aa;
  border-left: 1px solid #5978aa;
}

/* リンクの文字色 */
#footer a,
#footer a:visited,
#footer a:hover,
#footer a:active {
  color: #fffafa;
}

/*PCのみ*/
@media screen and (min-width:769px) {

  #footer {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);

    width: 100%;
    max-width: 1200px;

    text-align: center;
    font-family: serif;
    background: #1d365e;
    color: #fff;
    font-size: small;
    padding: 10px 0;

    border-right: 1px solid #5978aa;
    border-left: 1px solid #5978aa;

    z-index: 999;
  }

}


/* =================================== */
/* 左カラム */
/* =================================== */

.page_layout{ /* 左右カラムまとめ */
  display:flex;
  max-width:1200px;
  margin:0 auto;
  border-right:1px solid #5978aa;
  border-left:1px solid #5978aa;
  position: relative;
}

#sidebar{ 
  width:400px;
  background:#1d365e;
  color:#fffafa;
  top:0;
  font-size: small;
  position: relative;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: auto;
}

#sidebar.sidebar-animate {
  transition: width .25s;
}

#sidebar.closed {
  width: 10px;
  min-width: 0;
  overflow: hidden;
}

#sidebar.closed .sidebar {
  display: none;
}

/* リンクの文字色 */
.sidebar a,
.sidebar a:visited,
.sidebar a:active {
  color: #fffafa;
}

.sidebar a:hover {
  text-decoration: underline;
}

/* スマホ用 */
.sidebar_sp{
  background:#1d365e;
  color:#fffafa;
  top:0;
  border-right: 1px solid #5978aa;
  border-left: 1px solid #5978aa;
}

.sidebar_sp a,
.sidebar_sp a:visited,
.sidebar_sp a:active {
  color: #fffafa;
}

.sidebar_sp a:hover {
  text-decoration: underline;
}



/* 調査記録 */
.archive-title{ /*見出し */
  font-family:  serif;  
  font-size: large ;
  font-weight: bold;
  color: #fffafa;
  padding: 0.25em 2em 0.25em 0.5em; /* 内側余白 */
  border:1px #4377cb;
  border-style: solid;
}

.archive-table {
  width: 100%;
  border-collapse: collapse;
}

.archive-table th,
.archive-table td {
  border: none; /* 全ての境界線を削除 */
  padding: 8px;
  text-align: left;
}

.current-page { /* 現在のページの行を強調 */
  background-image: linear-gradient(90deg, #3562a9, #264577);
}

.current-page td {
  font-weight: bold;
}

/* ヘルプポップアップ */
.help-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 50%;
  background: #666;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
}

.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:9999;
}

.modal.show{
  display:block;
}

.modal-content{
  position:relative;
  width:90%;
  max-width:500px;
  margin:100px auto;
  padding:25px;
  background:#fff;
  border-radius:10px;
  color: #1d365e;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}

.modal-close{
  position:absolute;
  top:10px;
  right:15px;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}


.user_status_wrap { /* ユーザー情報 */
  text-align: center;
}

.user_status{ 
  display: inline-block; /* 文字幅に合わせる */
  font-family:  serif;  
  font-size: small; 
  border: 1px solid #8bb8e1;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px;
}

.user_status table {
  border-collapse: collapse;
}

.user_status th,
.user_status td {
  padding: 2px 8px;
  line-height: 1.2;
  color: #8bb8e1;
  text-align: le;

}

/*PCのみ*/
@media screen and (min-width:769px) {

  .page_layout {
    height: calc(100vh - var(--header-height) - var(--footer-height));
  }

  .page_layout.hint-update{
    height:100vh;
  }

  /* スクロールバー常に表示 */
  #sidebar {
    scrollbar-width: auto;
    scrollbar-color: #4b6898 #5f7ca9;
  }

  #sidebar::-webkit-scrollbar {
    width: 14px;
  }

  #sidebar::-webkit-scrollbar-track {
    background: #5f7ca9;
  }

  #sidebar::-webkit-scrollbar-thumb {
    background: #4b6898;
    border-radius: 10px;
    border: 2px solid #5f7ca9;
  }

  #sidebar::-webkit-scrollbar-thumb:hover {
    background: #6f8bbc;
  }
  
}

/* スマホ用：左カラムは表示しない */
@media screen and (max-width: 768px){

  #sidebar{
    display:none;
  }

  #sidebarToggle{
    display: none;
  }

  #sidebar.closed+#sidebarToggle {
    display: none;
  }

  .page_layout{
    display:block;
  }

}


/* =================================== */
/* 右カラム */
/* =================================== */

.container { /* メインカラム */
  max-width: 1200px; /* 最大px */
  width: 100%; /* 画面が狭いときは100%に縮む */
  margin: 0 auto; /* 中央寄せ */
  padding: 15px 30px 100px 30px; /* 上右下左の余白（スマホ対策） */
  font-family: 'Meiryo UI','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
  border-right: 10px solid #1d365e;
  background-color:#f7f5f2;
}

.container a {
  color: #1d365e;
}

.r-border-none{
  border-right:0px;
}

.page_title { /* ヘッダー用HTML　外枠 */
  display: flex;
  justify-content: space-between; /* 3項目を等間隔 */
  align-items: center;
}

h2 { /* ページタイトル */
  font-family:  serif;  
}

.record-info{
  margin:3px;
  padding:4px 10px;
  font-size:small;
  line-height:1.2;
  color:#1d365e;
  background:#fafafa;
  border: 1px solid #6e9ecb;
  border-left:3px solid #6e9ecb;
  font-family: 'Meiryo UI';
}

hr { /* 水平線 */
  border: none;
  height: 1px; /* 線の太さ */
  background-color: #ccc; /* 線の色 */
  margin-bottom: 50px;
}

.page_end{
  text-align: center;
  margin-top: 50px;
  color: #ccc;
}

.flatpeace_subtitle{
  text-align: center;
  font-style: italic;
  color: #ff7f7f;
  font-size: x-large;
  margin-bottom: 50px;
  font-family: Georgia, serif;
}

.flatpeace_text{
  width: fit-content;
  margin: 0 auto;
  text-align: left;
}


.flatpeace-profile{

  margin:30px 0;

  border:2px solid #ff7f7f;

  border-radius:12px;

  overflow:hidden;

  background:#fff;

  box-shadow:
    0 3px 12px rgba(255,127,127,.15);

}

/* 1行 */
.profile-item{
  display:flex;
  border-bottom:
    1px solid #ffd6d6;
}

.profile-item:last-child{
  border-bottom:none;
}

/* 項目名 */
.profile-label{
  width:120px;
  flex-shrink:0;
  background:
    linear-gradient(
      90deg,
      #fff0f0,
      #ffe6e6
    );
  color:#d45c5c;
  font-weight:bold;
  padding:16px;
  display:flex;
  align-items:center;
}

/* 内容 */
.profile-value{
  flex:1;
  padding:16px 20px;
  background:white;
  line-height:1.8;
}

/*PCのみ*/
@media screen and (min-width:769px) {

  .container{
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: auto;
    box-sizing: border-box;
    /* 二重スクロール防止 */
    padding-bottom: calc(100px + var(--footer-height));
    scrollbar-width: auto;
  }

  /*スクロールバー常に表示*/
  .container {
    scrollbar-width: auto;
    scrollbar-color: #a8a39b #ece9e5;
  }

  .container::-webkit-scrollbar {
    width: 14px;
  }

  .container::-webkit-scrollbar-track {
    background: #ece9e5;
  }

  .container::-webkit-scrollbar-thumb {
    background: #a8a39b;
    border-radius: 10px;
    border: 2px solid #ece9e5;
  }

  .container::-webkit-scrollbar-thumb:hover {
    background: #8d8880;
  }

}
/* スマホ */
@media screen and (max-width: 768px){

  .container{ /* 右カラムの右枠線を消す */
    border-right: 0px;
    padding: 15px 16px 100px 16px; /* 上右下左の余白（スマホ対策） */
  }

  .page_end{ /* ページ最後のEND表記 */
    display:none;
  }

  .page_title{
    display:block;
  }

  .page_title h2{
    margin-bottom:15px;
  }

  .hosoku{
    display: flex;
    margin-bottom:30px;
  }

  .profile-item{
    flex-direction:column;
  }

  .profile-label{
    width:auto;
    padding:10px 14px;
    border-bottom:1px solid #ffd6d6;
  }

  .profile-value{
    padding:12px 14px;
  }  
  
}


/* =================================== */
/* 会話 */
/* =================================== */

.message_layout {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;   
  font-family: "Kiwi Maru", serif;
}

.face_area {  /* 顔イラストの表示枠 */
    position: relative;
    padding:0.25em 1em;
    text-align: center;
}

.name_area {  /* 名前の表示枠 */
    position: relative;
    padding:0.25em 1em;
    text-align: center;
    color: #474747;
    background: #e6eef7;/*背景色*/
    border-left: double 7px #6e9ecb;/*左線*/
    border-right: double 7px #6e9ecb;/*右線*/
}

.narration{
  display:table;
  margin:25px auto;
  padding:10px 22px;
  font-size:15px;
  line-height:1.8;
  text-align:center;
  color:#555;
  background:#f7f7f7;
  border:1px solid #d5d5d5;
  border-radius:30px;
  box-shadow:
    0 2px 6px rgba(0,0,0,.08);
}

.notice{ /* 注意 */
  position:relative;
  margin:20px auto;
  padding:12px 16px 12px 48px;
  max-width:700px;
  font-size:14px;
  line-height:1.8;
  color:#666;
  background:#fafcff;
  border:1px solid #d6e4f3;
  border-left:5px solid #7fa8d6;
  border-radius:8px;
}

.notice::before{
  content:"!";
  position:absolute;
  left:14px;
  top:12px;

  width:20px;
  height:20px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#7fa8d6;
  color:#fff;
  font-size:13px;
  font-weight:bold;

  border-radius:50%;
}

.face { /* 顔画像 */
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
  border: 1px solid #2f5695;
  display: block;
  margin: 0 auto;
}

tr,td{
padding: 5px 5px 5px 5px  /* 余白 */
}

.says { /* 吹き出し */
  white-space:
  pre-wrap;
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 20px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(29,54,94,0.12);
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}

.says p {
  margin: 0;
  padding: 0;
}

.says b {
  color: #d94800
}

/* ===== 外部通信 ===== */
/* 背景 */
.remote-message_layout {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;   
  font-family: "Kiwi Maru", serif;
  padding: 25px;
  border-radius: 0;
  position: relative;
  background: #7d8dac;
  overflow: hidden;
}

/* ノイズ */
.remote-message_layout::before{
  content: "";

  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.25) 0px,
      rgba(255,255,255,0.25) 1px,
      transparent 1px,
      transparent 5px
    );

  pointer-events: none;
}

/* 最初と最後だけ角丸 */
.remote-start .remote-message_layout{
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.remote-start .remote-message_layout::after{
  content:"Correspondence";

  position:absolute;
  top:6px;
  right:10px;

  font-size:medium;
  letter-spacing:1px;

  color:#4fdcff;
}

.remote-end .remote-message_layout{
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}


/* 顔画像 */
.remote-face{
  border:2px solid #4fdcff;
  background-color: rgb(255 255 255 / 50%);
}

.remote-name {  /* 名前の表示枠 */
    position: relative;
    padding:0.25em 1em;
    text-align: center;
    color: #474747;
    background: #e3eaf4;/*背景色*/
    border-left: double 7px #4fdcff;/*左線*/
    border-right: double 7px #4fdcff;/*右線*/
}


/* ===== 画像 ===== */
.talk-image{
  text-align:center;
  margin:20px 0;
}

.talk-image img{
  height:auto;
  max-width:100%;
  border:1px solid #999;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

.fiction-image {
  position: relative;
  display: table;
  margin: 0 auto;
}

.fiction-label {
  position: absolute;
  top: 10px;
  right: 14px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.90);
  background: rgba(0, 0, 0, 0.14);

  padding: 2px 8px;
  border-radius: 999px;

  pointer-events: none;
  user-select: none;
  z-index: 10;
}

.remote-talk-image{
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;   
  font-family: "Kiwi Maru", serif;
  padding: 25px;
  border-radius: 0;
  position: relative;
  background: #7d8dac;
  overflow: hidden;
  text-align:center;
}

.remote-talk-image::before{
  content: "";

  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.25) 0px,
      rgba(255,255,255,0.25) 1px,
      transparent 1px,
      transparent 5px
    );

  pointer-events: none;
  z-index:0;
}

.remote-talk-image img{
  max-width:100%;
  border-radius:6px;
  position:relative;
  z-index:1;
}

.remote-talk-image.remote-start{
  border-radius:12px 12px 0 0;
}

.remote-talk-image.remote-end{
  border-radius:0 0 12px 12px;
}

.remote-talk-image.remote-start.remote-end{
  border-radius:12px;
}


/* ===== PC ===== */
@media (min-width: 769px) {
  .message_layout {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }

  /* 左列は縦並び */
  .left_column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
  }

  .face_area {
    grid-column: 1;
    grid-row: 1 ;
    width: 180px;
  }

  .content {
    grid-column: 2;
    grid-row: 1;
  }

  .name_area {
    grid-column: 1;
    grid-row: 2;
    width: 180px;
  }
}

/* ===== スマホ ===== */
@media (max-width: 768px) {

  .message_layout {
    display: block;   /* ← Grid解除 */
  }

  .left_column {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 6px;
    gap: 10px;
  }

  .says {
    margin: 10px 0 0 0;   /* 左マージン削除 */
    font-size: 16px;
  }

  .says:after {
    top: -24px;
    left: 20px;
    border: 12px solid transparent;
    border-bottom: 12px solid #d7ebfe; /* 上向き三角 */
  }
  
}


/* =================================== */
/* 調査方法 */
/* =================================== */
/* 誓約書 */
.document {
  max-width: 700px;
  margin: 40px auto;
  padding: 40px 30px;
  background: #fff;
  border: 1px solid #333;
  font-family: "游明朝", serif;
  line-height: 2;
}

/* 宛名 */
.doc-title {
  text-align: left;
  margin-bottom: 40px;
}

/* 本文 */
.doc-body {
  margin-bottom: 50px;
}

/* 署名見出し */
.doc-sign {
  text-align: center;
  margin-bottom: 15px;
  font-weight: bold;
}

/* 名前入力 */
.doc-name {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.doc-name input {
  width: 100px;
  padding: 5px;
  border: none;
  border-bottom: 1px solid #000;
  font-size: 1rem;
  text-align: center;
}

/* 提出ボタン */
.doc-submit {
  text-align: center;
}

.doc-submit button {
  padding: 8px 30px;
  font-size: 1rem;
  border: 1px solid #333;
  background: #f7f5f2;
  cursor: pointer;
}

.doc-submit button:hover {
  background: #eae6df;
}

.flg_01_name_ON{
  display:none;
}


/* SPLFN誓約書 */
/* 日付 */
.doc-date{
  text-align:right;
  margin-bottom:40px;
}

/* タイトル */
.doc-heading{
  text-align:center;
  font-size:28px;
  margin-bottom:50px;
  letter-spacing:.2em;
}

/* 本文 */
.doc-body{
  margin-bottom:50px;
}

/* 記 */
.doc-ki{
  text-align:center;
  margin-bottom:25px;
  font-size:20px;
}

/* 項目 */
.doc-item{
  display:flex;
  margin-bottom:10px;
}

.doc-label{
  width:130px;
  flex-shrink:0;
}

.doc-value{
  flex:1;
}

/* 免責 */
.doc-notice{
  margin-top:20px;
  padding-left:1em;
  text-indent:-1em;
}

/* 署名欄 */
.doc-sign-title{
  text-align:center;
  margin:60px 0 20px;
  font-size:20px;
}

/* 署名テーブル */
.doc-sign-area{
  max-width:500px;
  margin-left:auto;
}

.doc-sign-row{
  display:flex;
  border-bottom:1px solid #333;
  min-height:42px;
  align-items:center;
}

.doc-sign-label{
  width:120px;
  flex-shrink:0;
}

.doc-sign-value{
  flex:1;
  padding:6px 0;
  display: flex;
}

@media(max-width:768px){

  .document{
    padding:25px 18px;
    font-size:14px;
  }

  .doc-heading{
    font-size:24px;
    margin-bottom:35px;
  }

  .doc-item{
    display:block;
    margin-bottom:18px;
  }

  .doc-label{
    width:auto;
    font-weight:bold;
    margin-bottom:4px;
  }

  .doc-sign-area{
    max-width:none;
  }

  .doc-sign-row{
    display:block;
  }

  .doc-sign-label{
    width:auto;
    font-weight:bold;
  }

}


/* =================================== */
/* 人物紹介 */
/* =================================== */

.character-list{
  max-width: 1000px;
  margin: 0 auto;
}

/* カード */
.character-card{
  display: flex;
  gap: 20px;

  margin-bottom: 20px;
  padding: 20px;

  background: #ffffff;
  border: 1px solid #d4dbe8;
  border-left: 6px solid #2f5695;
  border-radius: 8px;

  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* 顔画像 */
.character-face{
  width: 120px;
  height: 120px;

  object-fit: cover;
  object-position: center;

  border-radius: 50%;
  border: 2px solid #2f5695;

  flex-shrink: 0;
}

/* 右側 */
.character-info{
  flex: 1;
}

.character-info h3{
  margin: 0 0 10px 0;

  color: #1d365e;
  font-family: serif;
  font-size: 1.4rem;
}

.character-info rt{
  font-size: 0.6em;
  color: #666;
}

.character-summary{
  margin: 0;

  line-height: 1.8;
  color: #333;
}

/* スマホ */
@media screen and (max-width:768px){

  .character-card{
    flex-direction: column;
    align-items: center;
    text-align: center;

    gap: 12px;
    padding: 15px;
  }

  .character-face{
    width: 100px;
    height: 100px;
  }

  .character-info h3{
    font-size: 1.2rem;
  }

  .character-summary{
    text-align: left;
  }

}

/* =================================== */
/* ふらっとぴーす */
/* =================================== */
.flatpeace-history{
  position:relative;
}

/* 各項目 */
.history-item{
  position:relative;
  margin-bottom:24px;
}

/* 丸 */
.history-item::before{
  content:"";
  position:absolute;
  left:-35px;
  top:7px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ff7f7f;
  border:3px solid #fff;
  box-shadow:0 0 0 2px #ff7f7f;
}

/* 日付 */
.history-date{
  font-weight:bold;
  color:#d45c5c;

  margin-bottom:6px;

  font-size:15px;
}

/* 内容 */
.history-content{
  background:#fff8f8;
  border-left:4px solid #ffb0b0;
  padding:12px 14px;
  border-radius:8px;
  line-height:1.8;
  box-shadow:
    0 2px 6px rgba(255,127,127,.12);
}

.history-hosoku{
  background:#fff;
  border: 1px solid #ffb0b0;
  border-left:5px solid #ffb0b0;
  padding:12px 14px;
  line-height:1.8;
  box-shadow:
    0 2px 6px rgba(255,127,127,.12);
}



/* =================================== */
/* 阿有島 */
/* =================================== */

/* 付箋風 */
.sticky-note{
  position:relative;
  display:table;
  margin:20px auto;
  padding:18px 22px;
  background:#fff3a8;
  color:#5b4b00;
  font-family:"Zen Kurenaido";
  line-height:1.8;
  border-radius:2px;
  box-shadow:
    3px 4px 10px rgba(0,0,0,.18);
  transform:rotate(-1deg);
}

.sticky-note::before{
  content:"";

  position:absolute;

  top:-10px;
  left:50%;

  width:70px;
  height:20px;

  transform:translateX(-50%) rotate(-3deg);

  background:rgba(255,255,255,.55);

  border:
    1px solid rgba(220,220,220,.6);
}

/* 施設紹介 */
.spot-card{
  display:flex;
  gap:20px;
  margin:25px auto;
  padding:20px;
  background:#fff;
  border:2px solid #d5d5d5;
  border-radius:12px;
  box-shadow:
    0 3px 12px rgba(29,54,94,.08);
  align-items:flex-start;
}

.spot-image{
  flex-shrink:0;
}

.spot-image img{
  width:260px;
  display:block;
  border-radius:10px;
  box-shadow:
    0 2px 8px rgba(0,0,0,.12);
}

.spot-text{
  flex:1;
  min-width:0;
}

.spot-title{
  font-size:1.4rem;
  font-weight:bold;
  color:#1d365e;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:
    2px solid #d8e4f3;
}

.spot-body{
  line-height:1.9;
  color:#333;
}

.spot-body b{
  color: #d94800
}

/* スマホ */
@media (max-width:768px){
  .spot-card{
    flex-direction:column;
    padding:15px;
    gap:15px;
  }

  .spot-image img{
    width:100%;
    max-width:none;
  }

  .spot-title{
    font-size:1.2rem;
  }

  .spot-body{
    line-height:1.8;
    font-size:14px;
  }

}


/* =================================== */
/* 報告（質問） */
/* =================================== */
.quiz-box{
  max-width:700px;
  margin:40px auto;
  padding:28px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 4px 14px rgba(29,54,94,.12);
  scroll-margin-top:120px;
}

.quiz-title{
  font-size:28px;
  font-weight:bold;
  color:#1d365e;
  margin-bottom:24px;
  padding-bottom:10px;
  border-bottom:2px solid #d9e1ef;
}

.quiz-item{
  margin-bottom:22px;
}

.quiz-item label{
  display:block;
  margin-bottom:8px;
  font-weight:bold;
  color:#1d365e;
  line-height:1.6;
}

.quiz-item.label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #1d365e;
  line-height: 1.6;
}

.quiz-input{
  width:100%;
  padding:12px 14px;
  border:2px solid #9fb1ce;
  border-radius:8px;
  font-size:16px;
  box-sizing:border-box;
  transition:.2s;
}

.character-select-button {
  cursor: pointer;
}

.quiz-input.locked{
  background:#efefef;
  color:#666;
  border-color:#ccc;
}

.quiz-input-small{
  width:100px;
}

.quiz-input-small.locked{
  background:#efefef !important;
  color:#666;
  border-color:#ccc;
}

.birthday-input{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}


.quiz-error{
  min-height:20px;
  margin-top:6px;
  color:#d60000;
  font-size:14px;
  font-weight:bold;
}

/* 選択肢 */
.choice-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  cursor:pointer;
}

.choice-arrow{
  width:20px;
  color:#1d365e;
  font-weight:bold;
  flex-shrink:0;
}

.choice-item label{
  cursor:pointer;
}

.choice-item input{
  margin-right:8px;
}

.choice-error{
  color:#d33;
  font-size:13px;
  margin-left:12px;
  font-weight:bold;
}

.correct-mark{
  color:#d00000;
  font-weight:bold;
  margin-left:6px;
}

.choice-back{
  margin-top:20px;
}

.choice-back a{
  color:#1d365e;
}

/* 人物選択 */
.character-select-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  z-index:9999;  
}

.character-select-modal.show{
  display:flex;
  align-items:center;
  justify-content:center;
}

.character-select-body{
  width:min(500px,90vw);
  max-height:80vh;
  overflow-y:auto;
  background:#fff;
  border-radius:16px;
  padding:20px;
}

.character-select-title{
  font-size:20px;
  font-weight:bold;
  margin-bottom:16px;
  text-align:center;
}

.character-select-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  cursor:pointer;
  border-radius:10px;
}

.character-select-item:hover{
  background:#f5f7fb;
}

.character-select-face{
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius:50%;
  border: 1px solid #1d365e;
}

/* 調査記録一覧ポップアップ */
.archive-select-item {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.archive-select-item:hover {
  background: #f5f5f5;
}

.archive-select-item span:first-child {
  min-width: 60px;
  font-weight: bold;
}


/* ワード選択 */
.drag-answer{
  line-height:2.2;
  margin:20px 0;
}

.drop-slot{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:120px;
  min-height:40px;
  height:40px;          
  box-sizing:border-box;

  margin:0 4px;

  border:2px dashed #bbb;
  border-radius:6px;

  vertical-align:middle;

  background:#fafafa;
}

.drop-slot .drag-word{
  margin:0;
  padding:0;
  border:none;
  background:none;
}

.drop-slot.filled{
  border-style:solid;
}

/* 現在入力対象 */
.drop-slot.active {
  border-color: #4377cb;
  background: #eef5ff;
  box-shadow:
    0 0 0 3px rgba(67, 119, 203, .15);
}

.drag-word-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:20px 0;
}

.drag-word{
  padding:8px 12px;
  background:#f7f7f7;
  border:1px solid #ccc;
  border-radius:6px;
  cursor:pointer;
  user-select:none;
}

.drag-result{
  margin:20px 0;
  line-height:2;
  font-weight:bold;
}

@media(max-width:768px){

  .quiz-box{
    margin:20px 10px;
    padding:18px;
  }

  .quiz-title{
    font-size:24px;
  }

  .quiz-input{
    width:100%;
    max-width:none;
  }

  .quiz-input-small{
    width:100px;
  }

  .choice-item{
    align-items:flex-start;
  }

  
  .character-select-body{
    width:95vw;
    max-height:85vh;
  }

  .character-select-face{
    width:48px;
    height:48px;
  }

  .drop-slot{
    min-width:90px;
    min-height:36px;
  }

}

/* =================================== */
/* 島内ホームページ */
/* =================================== */

/* ウィンドウ全体 */
.island-window{
  width:100%;
  margin:20px 0;
  border:5px double #888;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  box-shadow:
    0 4px 6px rgba(0,0,0,.15);
}

/* ヘッダー */

.island-header{
  background:#fff;
  border-bottom:1px solid var(--line);
}

.island-header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:10px 30px;
}

.island-site{
  display:flex;
  align-items:center;
  gap:16px;
}

.island-logo{
  width:70px;
  height:70px;
  border-radius:50%;
  background:var(--main);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
}

.island-title{
  font-size:40px;
  font-weight:bold;
  color:#ef8f8f;
}

.island-subtitle{
  color:#ef8f8f;
  margin-top:4px;
  font-size: 14px;
}

.island-user{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.island-user-item{
  width: 70px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:#555;
  font-size:12px;
  text-align:center;
  transition:.15s;
}

.island-user-item img{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
}

.island-nav{
  display:flex;
  justify-content:center;
  gap:50px;
  padding:13px;
  background:#ffe8e8;
  border-top:1px solid #f4d3d3;
}

.island-nav span{
  color:#555;
}

/* スマホトグル */
.island-menu-toggle{
  display:none;
}


/* フッター */

.island-footer{
  width:100%;
  min-height:240px;

  display:flex;
  align-items:flex-end;

  background:
    url("/mertyborder/img/islandHP_footer.webp")
    center bottom
    / cover
    no-repeat;
}

.island-footer-inner{
  width:100%;
  max-width:1200px;

  margin:0 auto; /* ← auto → 0 auto */

  padding:0 30px;

  display:flex;
  justify-content:space-between;
  gap:40px;
}

.footer-block h4{
  margin-bottom:12px;
  color:#d96c6c;
}

.footer-block p{
  margin:0;
  color:#666;
  line-height:1.7;
  font-size: small;
}

.footer-notice{
  display:flex;
  align-items:center;
}

.footer-notice-box{
  background:#ffe8e8;
  border:1px solid #f2bcbc;
  border-radius:10px;
  padding:16px 22px;
  margin-top: 20px;
  margin-bottom: 20px;
  color:#d96c6c;
  line-height:1.8;
}

.footer-copy{
  text-align:center;
  padding:10px;
  background:#ffb0b0;
  color:#fff;
  font-size:14px;
}

/* 本文 */
.island-content{
  padding:25px;
  background:#fff;
}

.island-hierarchy{
  font-size: small;
}

.island-page-title{
  color: #d45c5c;
  font-size: x-large;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #ffb0b0;
  margin-top: 25px;
  margin-bottom: 25px;
}

.island-page-subtitle {
  color: #d45c5c;
  font-size: large;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #ffb0b0;
  margin-top: 25px;
  margin-bottom: 25px;
}

.fake-link {
  color: #1d365e;
  text-decoration: underline;
}

.true-link {
  color: #800080 !important;
}

.island-login-box{
  max-width:400px;
  margin:40px auto;
  padding:30px;
}

.island-login-label{
  display:block;
  margin-bottom:8px;
  font-weight:bold;
  color:#555;
}

.island-login-input{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  margin-bottom:20px;
  border:1px solid #bfc7d1;
  border-radius:4px;
  font-size:16px;
}

.island-login-input:focus{
  outline:none;
  border-color:#7ea8d8;
}

.island-login-input::placeholder{
  color:#b5b5b5;
}

.island-nologin-button{
  width:100%;
  padding:12px;
  border:none;
  border-radius:4px;
  background:#9aa7b5;
  color:#fff;
  font-size:16px;
  font-weight:bold;
  cursor:not-allowed;
  opacity:.8;
}

.island-login-button{
  width:100%;
  padding:12px;
  border:none;
  border-radius:4px;
  background:#ffb0b0;
  color:#fff;
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
  opacity:.8;
}

.island-error{
  margin-top:-10px;
  margin-bottom:16px;
  color:#d33;
  font-size:14px;
  font-weight: bold;
}

.drive-page{
  padding:10px;
}

.drive-file-list{
  background:#fff;
  border:1px solid #d9e2ee;
  border-radius:8px;
  overflow:hidden;
}

.drive-file{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 18px;
  border-bottom:1px solid #edf2f7;
  cursor:pointer;
  transition:.15s;
}

.drive-file:last-child{
  border-bottom:none;
}

.drive-file:hover{
  background:#f5f9ff;
}

.drive-file-icon{
  width:42px;
  height:42px;
  flex-shrink:0;
}

.drive-file-name{
  font-size:16px;
  color:#222;
  font-weight:500;
}


@media(max-width:768px){

  /* ヘッダー基準 */
  .island-header{
    position:relative;
  }

  /* トグルを右上へ */
  .island-menu-toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;

    position:absolute;
    top:15px;
    right:15px;

    width:36px;
    height:36px;
  }

  /* トグル線をピンクに */
  .island-menu-toggle span{
    display:block;
    width:100%;
    height:3px;

    background:#ffb0b0;

    border-radius:999px;
  }

  .island-header{
    padding-right:30px;
  }

  /* 上段を縦並び */
  .island-header-top{
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding: 10px;
  }

  /* アイコン群中央 */
  .island-user{
    justify-content:center;
    width:100%;
  }

  .island-title{
    font-size:30px;
  }

  .island-nav{
    display: none;
  }

  .island-footer{
    display: none;
  }

  .footer-copy{
    margin-top: 50px;
  }

  .island-content{
    padding:16px;
  }

  .island-login-box{
    margin:25px 10px;
    padding:20px;
  }

  .drive-file{
    gap:12px;
    padding:12px;
  }

  .drive-file-icon{
    width:36px;
    height:36px;
  }

  
}


/* =================================== */
/* 太平病院ホームページ */
/* =================================== */
.hospital-page{
  width:100%;
  margin:20px 0;
  border:5px double #888;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  box-shadow:
    0 4px 6px rgba(0,0,0,.15);
}

.hospital-header{
  width:100%;
  border-bottom:3px solid #1d365e;
  margin-bottom:20px;
  padding-right:20px;
  background-image:linear-gradient(#caddff,#eaf2ff);
  display:flex;
  align-items:center;
  position:relative;
}

/* 病院名＋メニュー */
.hospital-header > div:first-child{
  flex:1;
  text-align:center;
}

.hospital-name{
  font-size:32px;
  font-weight:bold;
  color:#1d365e;
  text-align:center;
  padding:10px;
}

.hospital-menu{
  display:flex;
  justify-content:space-evenly;
  padding:12px 0;
  font-size:14px;
  color:#555;
  text-align:center;
}

.hospital-menu span{
  flex:1;
}

.hospital-contents{
 padding: 25px;
}

.hospital-breadcrumb{
  font-size:12px;
  color:#777;
  margin-bottom:20px;
}

.hospital-title{
  margin:0 0 25px;
  padding-bottom:12px;
  border-bottom:1px solid #d9d9d9;
  color:#1d365e;
  font-size:32px;
  font-weight:normal;
}

.hospital-theme{
  text-align:center;
  color:#ff7f7f;
  font-size:28px;
  font-style:italic;
  margin:40px 0 50px;
  letter-spacing:.08em;
}

.hospital-body p{
  margin:0 0 2em;
}

.hospital-sign{
  margin-top:60px;
  text-align:right;
  line-height:2;
}

@media(max-width:768px){

  .hospital-name{
    font-size:26px;
  }

  .hospital-menu{
    display:none;
  }

  .hospital-title{
    font-size:26px;
  }

  .hospital-theme{
    font-size:22px;
    margin:30px 0 40px;
  }

}


/* =================================== */
/* 102号室・矢野律希（筆談） */
/* =================================== */

.notebook{
  padding:24px;
  background:
    repeating-linear-gradient(
      to bottom,
      #ffffff 0,
      #ffffff 31px,
      rgba(100,100,100,.2) 32px
    );
}


/* =================================== */
/* 【詳細】能力調査、融合実験（注記） */
/* =================================== */
.note-word {
  position: relative;
  text-decoration: underline;
}

.note-no {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1.2em;
  font-size: 0.75em;
  white-space: nowrap;
}

.icon-notice {
  position: relative;
}

.icon-notice::before {
  content: "!";
    position: absolute;
    right: 14px;
    top: 12px;
  
    width: 20px;
    height: 20px;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    background: #7fa8d6;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
  
    border-radius: 50%;
}

.icon-notice-title {
  position: relative;
}

.icon-notice-title::before {
  content: "!";
  position: absolute;
  top: -6px;
  right: -25px;

  width: 20px;
  height: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #7fa8d6;
  color: #fff;
  font-size: 13px;
  font-weight: bold;

  border-radius: 50%;
}

/* １列目と１行目だけ色あり */
.detail-table{
  border: 1px solid #000;
  border-collapse: collapse;
  background-color: #fff;
}

.detail-table td{
  border: 1px solid #000;
}
.detail-table tr:first-child td{
  background:#fff0f0;
  color: #d45c5c;
  font-weight:bold;
}

.detail-table td:first-child{
  background:#fff0f0;
  color: #d45c5c;
  font-weight: bold;
}

/* １列目だけ色あり */
.detail-table_1col {
  border: 1px solid #000;
  border-collapse: collapse;
  background-color: #fff;
}

.detail-table_1col td {
  border: 1px solid #000;
}

.detail-table_1col td:first-child {
  background: #fff0f0;
  color: #d45c5c;
  font-weight: bold;
}

.table-head { /* rowspan用 */
  background: #fff0f0;
  color: #d45c5c;
  font-weight: bold;
  vertical-align: top
}

/* ========================= */
/* 船舶管理システム */
/* ========================= */

.ship-system {
  display: flex;
  gap: 0px;
  margin-top: 20px;
}

/* 左側 */
.ship-menu {
  width: 220px;
  flex-shrink: 0;

  padding: 15px;

  border: 1px solid #d45c5c;
  background: #ffe8e8;
  border-right: none;
}

.ship-menu-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  border-bottom: 1px solid #d45c5c;
  padding-bottom: 8px;
}

.ship-menu-group {
  margin-bottom: 25px;
}

.ship-menu-heading {
  font-weight: bold;
  margin-bottom: 10px;
  color: #444;
}

.ship-disabled {
  display: block;
  margin: 0;
  color: #000;
}

/* 右側 */
.ship-main {
  flex: 1;

  min-height: 250px;

  padding: 20px;

  border: 1px solid #d45c5c;
  background: #fff;
}

.ship-main-title {
  margin-top: 0;
  margin-bottom: 20px;

  font-size: 20px;
  font-weight: bold;
}

.ship-person-link {
  color: #003399;
  text-decoration: underline;
}

/* スマホ */
@media(max-width:768px) {

  .ship-system {
    flex-direction: column;
  }

  .ship-menu {
    width: auto;
    border-right: 1px solid #d45c5c;
    border-bottom: none;

    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  /* タイトルは1行使う */
  .ship-menu-title {
    width: 100%;
    margin-bottom: 0;
  }

  /* 一般教団員向け / 高権限団員向け */
  .ship-menu-group {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
  }

}

/* =================================== */
/* エンディング */
/* =================================== */
.ending-card {
  width: 538px;
  height: 359px;
  margin: 40px auto;
  padding: 40px 20px;

  background-image: url(/mertyborder/img/endingCard.webp);
  background-size: cover;
  background-position: center;

  border: 4px double #555;
  border-radius: 12px;

  text-align: center;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, .15);
}

.ending-no {
  margin-top: 100px;
  font-size: 20px;
  letter-spacing: .3em;
  color: #c3a65e;
  margin-bottom: 16px;
}

.ending-title {
  margin-top: 25px;
  font-size: 35px;
  font-weight: bold;

  color: #e5c26a;

  text-shadow:
    0 1px 0 #fff,
    0 2px 4px rgba(0, 0, 0, .3);
}

.spacer {
  height: 200vh;
}

.content-text {
  margin-left: 1em;
}

.card-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.card-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
}

@media screen and (max-width:767px) {
  .card-layout {
    grid-template-columns: 1fr;
  }
}

/* スマホ */
@media (max-width: 768px) {

  .ending-card {

    width: calc(100% - 20px);
    max-width: 768px;

    height: auto;
    aspect-ratio: 3 / 2;

    padding: 20px 10px;
    margin: 20px auto;

  }

  .ending-no {

    margin-top: 20%;
    margin-bottom: 10px;

    font-size: 14px;
    letter-spacing: .15em;

  }

  .ending-title {

    margin-top: 20px;

    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.3;

  }

}

/*======================================
  ヒントページ
======================================*/

/*==============================全体==============================*/
.hint-page {
  max-width: 1000px;
  margin: auto;
  padding: 0 80px;
}

/*==============================タイトル==============================*/
.hint-header {
  text-align: center;
}

.hint-header p {
  color: #666;
}

/*==============================ジャンプリスト==============================*/
.jump-area {
  background: #fff;
  padding: 25px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  margin-top: 40px;
  margin-bottom: 40px;
}

.jump-area h2 {
  margin: 0 0 18px;
  font-size: 22px;
  color: #5978aa;
}

.jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.jump-list a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 48px;
  border-radius: 50%;
  background: #d9e3f4;
  color: #5978aa;
  text-decoration: none;
  font-weight: bold;
  transition: .2s;
}

.jump-list a:hover {
  background: #5978aa;
  color: #fff;
  transform: translateY(-2px);
}

/*==============================ボタン==============================*/
.hint-toolbar {
  display: flex;
  gap: 15px;
  margin-bottom: 35px;
}

.hint-toolbar button {
  border: none;
  padding: 13px 24px;
  border-radius: 999px;
  background: #5978aa;
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  transition: .2s;
}

.hint-toolbar button:hover {
  opacity: .85;
}

/*==============================Noカード==============================*/
.record {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  margin-bottom: 28px;
  overflow: hidden;
  border: 1px solid #cfd9ea;
}

.record summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(90deg, #5978aa, #88a3d0);
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}

.record summary::-webkit-details-marker {
  display: none;
}

.record summary::before {
  content: "▶";
  transition: .25s;
  font-size: 15px;
}

.record[open] summary::before {
  transform: rotate(90deg);
}

.record-no {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: #5978aa;
  font-size: 22px;
  font-weight: bold;
  flex-shrink: 0;
}

.record-body {
  padding: 35px;
}

/*==============================ブロック==============================*/
.hint-block {
  margin-bottom: 40px;
}

.hint-block h3 {
  margin: 0 0 18px;
  padding-left: 15px;
  border-left: 6px solid #5978aa;
  font-size: 22px;
  color: #5978aa;
}

/*==============================階層==============================*/
.hint-detail {
  margin-left: 25px;
  margin-bottom: 12px;
}

.hint-detail summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 18px;
  background: #eef3fb;
  border-radius: 12px;
  font-weight: bold;
  color: #5978aa;
  transition: .2s;
}

.hint-detail summary::-webkit-details-marker {
  display: none;
}

.hint-detail summary::before {
  content: "▶";
  margin-right: 10px;
  transition: .25s;
}

.hint-detail[open] summary::before {
  content: "▼";
}

.hint-detail summary:hover {
  background: #d9e3f4;
}

.hint-detail-body {
  margin-top: 12px;
  margin-left: 28px;
  padding: 16px 18px;
  background: #fff;
  border-left: 3px solid #5978aa;
  white-space: pre-wrap;
  border-radius: 10px;
  line-height: 2;
}

/*==============================さらに深い階層==============================*/
.hint-detail .hint-detail {
  margin-left: 22px;
}

/*==============================アニメーション==============================*/
.record-body {
  animation: fadeIn .25s;
}

.hint-detail-body {
  animation: fadeIn .2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/*==============================  ページトップボタン==============================*/
.page-top {
  position: fixed;
  right: 25px;
  bottom: 25px;

  width: 56px;
  height: 56px;

  border: none;
  border-radius: 50%;

  background: #5978aa;
  color: #fff;

  font-size: 22px;
  font-weight: bold;

  cursor: pointer;

  box-shadow: 0 8px 20px rgba(0, 0, 0, .2);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity .25s,
    transform .25s,
    background .2s;

  z-index: 500;
}

.page-top.show {
  opacity: 1;
  visibility: visible;
}

.page-top:hover {
  background: #45689b;
  transform: translateY(-3px);
}

.page-top:active {
  transform: translateY(0);
}

/*==============================スマホ==============================*/
@media(max-width:768px) {

  .hint-page {
    padding: 0 10px;
  }

  .hint-header h1 {
    font-size: 30px;
  }

  .jump-list a {
    width: 60px;
    height: 42px;
    font-size: 14px;
  }

  .record summary {
    padding: 16px;
    font-size: 17px;
    gap: 12px;
  }

  .record-no {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .record-body {
    padding: 20px;
  }

  .hint-block h3 {
    font-size: 18px;
  }

  .hint-detail {
    margin-left: 8px;
  }

  .hint-detail-body {
    margin-left: 12px;
    padding: 12px;
    font-size: 15px;
  }

  .hint-toolbar {
    flex-direction: column;
  }

  .hint-toolbar button {
    width: 100%;
  }

  .page-top {
    width: 50px;
    height: 50px;

    right: 15px;
    bottom: 15px;

    font-size: 20px;
  }

}


/*======================================
  後日談
======================================*/
.page-navigation {
  max-width: 1100px;
  margin: 80px auto 0;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  gap: 25px;
}

.page-nav {
  padding: 8px 30px;
    font-size: 1rem;
    border: 1px solid #333;
    background: #f7f5f2;
    cursor: pointer;
    text-decoration: none;
}

.page-nav:hover {
  background: #eae6df;
}

.page-navigation.right {
  justify-content: flex-end;
}

.page-navigation.right .page-nav {
  text-align: right;
}

/* スマホ */
@media(max-width:768px) {
  .page-navigation {
    flex-direction: column;
    margin-top: 50px;
  }

  .page-nav {
    padding: 18px 22px;
    text-align: center;
  }

  .page-navigation.right .page-nav {
    text-align: center;
  }

}


/*======================================
  MeltyBorder 公式HP
======================================*/
/*-----------------共通---------------------*/
.mb-site {
  overflow: hidden;
  background: #1d365e;
  color: #444;
  font-family:
    "Yu Gothic UI",
    "Hiragino Sans",
    sans-serif;
  line-height: 1.8;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-right: 10px solid #1d365e;
  max-width: 1200px;
  width: 100%;
}

.mb-site a {
  color: inherit;
}

.mb-site img {
  display: block;
  max-width: 100%;
}

.mb-nav {
  display: flex;
  gap: 40px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #5f4b4b;
  font-size: 13px;
  font-weight: 600;
  transition: .25s;
  position: relative;
}

.nav-icon {
  width: 32px;
  height: 32px;
  display: block;
}

.nav-item:hover {
  color: #ff6fa6;
}

.nav-item.current {
  color: #ff4f8e;
}

.nav-item.current::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 3px;
  background: #ff7fb8;
  border-radius: 99px;
}

.page-header {
  text-align: center;
  align-items: center;
}

.page-title-line {
  display: block;
  width: 400px;
  max-width: 90%;
  margin: 0px auto;
}

.page-title {

  margin: 0;

  font-size: 50px;
  font-weight: 700;
  letter-spacing: .03em;

  font-family:
    "Noto Serif JP",
    serif;

  background: linear-gradient(90deg,
      #6f4fb3 0%,
      #8d58b8 30%,
      #c75693 70%,
      #ff7f98 100%);

  background-clip: text;
  /* 標準 */
  -webkit-background-clip: text;
  /* Chrome/Safari */

  color: transparent;
  /* 標準 */
  -webkit-text-fill-color: transparent;
}

.page-subtitle {
  color: #c66a87;

  font-size: 17px;
  font-weight: 500;

  letter-spacing: .08em;
  position: relative;

  display: inline-block;
  padding-bottom: 45px;
}

/*Header*/
.mb-header {
  position: sticky;
  top: 0;
  background: #fff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .05);
}

.mb-header-inner {
  max-width: 1200px;
  margin: auto;
  padding: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mb-logo img {
  height: 50px;
  width: auto;
}

.mb-nav {
  display: flex;
  gap: 35px;
  font-size: 15px;
  font-weight: bold;
}

.mb-nav a {
  position: relative;
  transition: .25s;
  text-decoration: none;
}

.mb-nav a:hover {
  color: #ff7b7b;
}

.mb-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--main);
  transition: .25s;
}

.mb-nav a:hover::after {
  width: 100%;
}

.mb-menu-button {
  position: fixed;
  top: 82px;
  right: 18px;
  z-index: 900;
  display: none;
  border: none;
  background: none;
  font-size: 34px;
  font-weight: 300;
  cursor: pointer;
  color: #ffb0b0;
  width: 44px;
  height: 44px;
  line-height: 1;
}

.mb-menu-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  z-index: -1;
  border:1px solid #ffb0b0;
}

.mb-menu-button.menu-open {
  color: #fff;
}

.mb-menu-button.menu-open::before {
  display: none;
}

/*Section*/
.mb-section {
  padding: 30px 30px;
  padding-bottom: 100px;
}

.section-white {
  background: #fff;
}

.section-pink {
  background: #ffd8d8;
}

.mb-inner {
  max-width: 1100px;
  margin: auto;
}

.section-title {
  font-size: 30px;
  color: #ff7d7d;
  margin-bottom: 30px;
  letter-spacing: .08em;
}

.sub-title {
  font-size: 24px;
  margin-bottom: 30px;
}


/*フッター*/
.mb-footer {
  display: block;
  padding: 30px;
  background: #ffb0b0;
  color: #fff;
  border-top: 1px solid #ddd;
}

.mb-footer-copy {
  text-align: center;
}

.mb-footer .mb-nav {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 18px;
}

.mb-footer .mb-nav a {
  color: #fff;
  text-decoration: none;
}

.mb-footer .mb-nav a:hover {
  opacity: .8;
}

/*スマホメニュー*/
.sp-menu {
  top:50px;
  position: fixed;
  right: -280px;
  width: 280px;
  height: 100vh;
  background: #ffb0b0;
  transition: right .25s;
  z-index: 850;
  padding: 30px;
}

.sp-menu.show {
  right: 0;
}

.sp-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  pointer-events: none;
  transition: .2s;
  z-index: 800;
}

.sp-menu-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.mb-morse {
  text-align: center;
  color: #ffb0b0;
}

.external-link {
  text-decoration: none;
}

/* ===== ヘッダーだけアイコン表示 ===== */

.mb-header .nav-icon {
  display: block;
}

/* ===== スマホメニュー・フッターはアイコン非表示 ===== */

.sp-menu .nav-icon,
.mb-footer .nav-icon {
  display: none;
}


/*-----------------HOME---------------------*/
/*MainVisual*/
.mb-mainvisual {
  background: linear-gradient(var(--sub),
      #fff);
}

.mb-mainvisual img {
  width: 1200px;
}

/*NEWS*/
.news-list {
  list-style: none;
}

.news-list li {
  display: flex;
  gap: 5px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.news-list time {
  font-weight: bold;
  color: #888;
}

.news-list a {
  color: #d13c3c;
}

.news-list a:hover {
  color: #ff7d7d;
}

/*ARG CARD*/
.game-card {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 35px;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 10px 35px rgba(0, 0, 0, .08);
}

.game-image {
  width: 330px;
  flex-shrink: 0;
}

.game-text {
  flex: 1;
}

.game-text h4 {
  margin-top: 0;
  margin-bottom: 10px;
}

.game-text table {
  width: 100%;
  border-collapse: collapse;
}

.game-text tr {
  border-bottom: 1px solid #ffb0b0;
  /* 薄い灰色 */
}

.game-text tr:last-child {
  border-bottom: none;
  /* Personalityの下は消す */
}

.game-text td {
  padding: 14px 0;
  vertical-align: top;
}

.game-more {
  text-align: right;
  margin-top: 35px;
}

.game-more a {
  font-weight: bold;
  color: #d13c3c;
  transition: .2s;
}

.game-more a:hover {
  color: #ff7d7d;
}

/*ARG*/
.arg-description {
  max-width: 850px;
}

.arg-description p {
  margin-bottom: 22px;
}

.arg-last {
  margin-top: 45px;
  font-size: 28px;
  font-weight: bold;
  color: #d36161;
  font-family: serif;
  text-align: center;
}

/* 雫ライン*/
.section-drop {
  line-height: 0;
  overflow: hidden;
}

.section-drop svg {
  display: block;
  width: 100%;
  height: 85px;
}

.section-drop.white {
  background-color: #ffd8d8;
}

.section-drop.pink {
  background-color: #fff;
}

.section-beige{
  background-color: #f8eeee;
  background-image: url("/mertyborder/img/mg-bgimg.webp");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.section-drop.white svg path {
  fill: #fff;
}

.section-drop.pink svg path {
  fill: #ffd8d8;
}

/*-----------------キャラクターページ---------------------*/
.char-image {
  width: 300px;
  flex-shrink: 0;
}

/* 暗くする */
.section-dark {
  background: #1b1b1b !important;
  transition: .3s;
}

.section-dark .game-card {
  background: #2d2d2d !important;
  transition: .3s;
  color:#b4b2b2;
}

/* メール */
#eventBorderless {

  opacity: 0;
  visibility: hidden;

  transition: .4s;

  margin: 0;

  text-align: center;

  font-family: monospace;
  font-size: 22px;
  font-weight: bold;

  color: #8CFF8C;

  text-shadow:
    0 0 4px #8CFF8C,
    0 0 10px #8CFF8C,
    0 0 20px #8CFF8C;

}

#eventBorderless.show {
  opacity: 1;
  visibility: visible;
}

/*クリック範囲テスト用
#lampHitbox {

  position: fixed;

  background: rgba(255, 0, 0, .25);

  border: 2px solid red;

  pointer-events: none;

  z-index: 99999;

}
*/

/*=========================  Company=========================*/
.company-page {
  max-width: 1000px;
}

.company-page h3 {
  margin-bottom: 15px;
  font-size: 25px;
  color: #ff7d7d;
  font-family: serif;
}

/*会社概要*/
.company-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
  overflow: hidden;
  margin-bottom: 80px;
}

/* 1行 */
.info-row {
  display: flex;
  border-bottom: 1px solid #eee;
}

.info-row:last-child {
  border-bottom: none;
}

/* 左側 */
.info-title {
  width: 220px;
  flex-shrink: 0;

  background: var(--main);
  color: #fff;

  padding: 22px;
  font-weight: bold;
}

/* 右側 */
.info-body {
  flex: 1;

  padding: 22px 28px;
  line-height: 1.9;
}

/*沿革*/
.company-history {
  margin-bottom: 80px;
  background-color: #fff;
  padding: 20px;
  border-radius: 18px;
}

.history-item {
  display: flex;
  gap: 40px;
  position: relative;
  padding-left: 30px;
}

.history-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--main);
}

.history-item::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 22px;
  width: 2px;
  height: calc(100% + 25px);
  background: #ffd6d6;
}

.history-item:last-child::after {
  display: none;
}

.history-date {
  min-width: 140px;
  font-weight: bold;
  color: #ff8c8c;
}

.history-text {
  flex: 1;
  line-height: 1.9;
}

/*理念*/
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.philosophy-card {
  background: #fff;
  border-radius: 18px;
  padding: 35px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
  transition: .25s;
}

.philosophy-card:hover {
  transform: translateY(-5px);
}

.philosophy-card h4 {
  color: #ff8d8d;
  margin-bottom: 18px;
  font-size: 20px;
}

.philosophy-card p {
  line-height: 1.9;
}

/*-----------------contact---------------------*/
.contact-wrap {
  max-width: 900px;
  margin: 0 auto;
}

.contact-box {
  background: #fff;
  border-radius: 18px;
  padding: 40px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, .08);
}

.contact-table {
  width: 100%;
  border-collapse: collapse;
}

.contact-table tr {
  border-bottom: 1px solid #f0dede;
}

.contact-table th {
  width: 220px;
  padding: 18px 10px;
  text-align: left;
  color: #444;
  font-weight: bold;
  vertical-align: top;
}

.contact-table td {
  padding: 15px 10px;
}

.contact-table input,
.contact-table textarea,
.contact-table select {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ffd5d5;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  transition: .2s;
  background: #fff;
}

.contact-table textarea {
  resize: vertical;
  min-height: 150px;
  font-family: inherit;
}

.contact-table input:focus,
.contact-table textarea:focus {
  outline: none;
  border-color: var(--main);
  box-shadow:
    0 0 0 4px rgba(255, 176, 176, .18);
}

.readonly-field {
  background: #efefef !important;
  color: #666;
  cursor: not-allowed;
}

.contact-submit {
  margin-top: 40px;
  text-align: center;
}

.contact-button {
  min-width: 260px;
  border: none;
  border-radius: 999px;
  padding: 15px 40px;
  background: var(--main);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: .2s;
}

.contact-button:hover {
  background: #ff9797;
  transform: translateY(-2px);
}

.contact-button:active {
  transform: translateY(0);
}

/* エラー */
.contact-error {
  border-color: #ff3c3c !important;
  background: #fff5f5 !important;
}

/* モーダル */
.contact-modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .45);
  z-index: 9999;
}

.contact-modal.show {
  display: flex;
}

.contact-modal-box {
  width: 90%;
  max-width: 420px;
  background: #fff;
  border-radius: 18px;
  padding: 35px;
  text-align: center;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, .25);
}

.contact-modal-message {
  line-height: 1.9;
  margin-bottom: 30px;
  white-space: pre-line;
  font-size: 17px;
}

.contact-modal-button {
  border: none;
  border-radius: 999px;
  background: var(--main);
  color: #fff;
  padding: 12px 45px;
  cursor: pointer;
  font-size: 17px;
  font-weight: bold;
  transition: .2s;
}

.contact-modal-button:hover {
  background: #ff9999;
}

/*-----------------イベント開催---------------------*/
.hint-area {
  max-width: 900px;
  margin: 40px auto;
  line-height: 1.8;
}

/* 段落を付ける */
.hint-area details {
  margin-left: 22px;
  margin-top: 6px;
}

/* 一番上だけ左余白なし */
.hint-area>details {
  margin-left: 0;
}

/* ▼を消す */
.hint-area summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #1d365e;
  transition: .15s;
}

.hint-area summary::-webkit-details-marker {
  display: none;
}

/* ▶ */
.hint-area summary::before {
  content: "▶";
  color: #ff8d8d;
  font-size: 14px;
  margin-right: 8px;
  transition: .2s;
}

/* ▼ */
.hint-area details[open]>summary::before {
  content: "▼";
  color: #ff5c5c;
}

/* ホバー */
.hint-area summary:hover {
  color: #ff6f6f;
}

/* 子階層ほど細い線を引く */
.hint-area details {
  position: relative;
}

.hint-area details::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 18px;
  bottom: 0;
  border-left: 2px solid #ffd2d2;
}

/* 一番上は線なし */
.hint-area>details::before {
  display: none;
}

/* 本文 */
.hint-area p {
  margin: 10px 0 0 18px;
  padding: 10px 14px;
  border-left: 3px solid #ffd2d2;
  background: #fff7f7;
  border-radius: 8px;
}

/* 答えだけ */
.hint-area details:last-child p,
.hint-area details details:last-child p {
  background: #fff1f1;
  border-left-color: #ff8080;
  font-weight: bold;
}

/*-----------------PC用---------------------*/
@media screen and (min-width:769px) {

  .mb-site {
    height: calc(100vh - var(--header-height) - var(--footer-height));
    box-sizing: border-box;

    overflow-y: scroll;
    overflow-x: hidden;

    scrollbar-width: auto;
    scrollbar-color: #ff9999 #fff1f1;
  }

  .mb-site::-webkit-scrollbar {
    width: 12px;
  }

  .mb-site::-webkit-scrollbar-track {
    background: #fff1f1;
  }

  .mb-site::-webkit-scrollbar-thumb {
    background: #ff9999;
    border-radius: 10px;
    border: 2px solid #fff1f1;
  }

  .mb-site::-webkit-scrollbar-thumb:hover {
    background: #ff9999;
  }

}

/*-----------------スマホ用---------------------*/
@media(max-width:768px) {
  .mb-site{
    border-right: 0;
  }

  .mb-header-inner {
    padding: 15px;
  }

  .mb-logo img {
    height: 42px;
  }

  .mb-nav {
    display: none;
  }

  .mb-menu-button {
    display: block;
  }

  .mb-section {
    padding: 20px 20px;
  }

  .section-title {
    font-size: 25px;
    margin-bottom: 10px;
  }

  .news-list li {
    display: block;
  }

  .news-list time {
    display: block;
    margin-bottom: 8px;
  }

  .game-card {
    display: block;
    padding: 20px;
  }

  .game-image {
    width: 100%;
    margin-bottom: 25px;
  }

  .game-more {
    text-align: center;
  }

  .arg-last {
    font-size: 24px;
    text-align: center;
  }

  .section-drop svg {
    height: 45px;
  }

  .mb-footer {
    display: block;
  }

  .mb-footer .mb-nav {
    display: flex !important;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 18px;
  }

  .sp-menu .mb-nav {
    display: flex !important;
    flex-direction: column;
    gap: 22px;
    align-items: flex-end;
    padding-top: 60px;
  }

  .sp-menu .mb-nav a {
    text-align: right;
  }

  .company-table th {
    width: 120px;
    padding: 16px;
    font-size: 14px;
  }

  .company-table td {
    padding: 16px;
    font-size: 14px;
  }

  .history-item {
    display: block;
    padding-left: 25px;
  }

  .history-date {
    margin-bottom: 10px;
  }

  .philosophy-grid {
    grid-template-columns: 1fr;
  }

  .company-history h3,
  .company-philosophy h3 {
    font-size: 24px;
  }

  .contact-box {
    padding: 20px;
  }

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

  .contact-table tr {
    padding: 15px 0;
  }

  .contact-table th {
    padding-bottom: 8px;
  }

  .contact-table td {
    padding: 0;
  }

  .contact-button {
    width: 100%;
    min-width: 0;
  }

  .info-row {
    display: block;
  }

  .info-title {
    width: auto;
    padding: 14px 18px;
  }

  .info-body {
    padding: 18px;
  }

  .nav-item{
    color:#fff;
  }

  .section-beige {
    background-image: none;
    background-attachment: scroll;    /* fixed解除 */
    background-color: #FEEBEE;
  }

}

/*======================================
  更新履歴
======================================*/
.update-history {
  display: flex;
  margin: 35px auto;
  max-width: 900px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.update-date {
  width: 170px;
  flex-shrink: 0;
  background: #1d365e;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 1.05rem;
}

.update-date-notice {
  background: #dce9ff;
  color: #000;
}

.update-body {
  flex: 1;
  padding: 18px 25px;
}

.update-body ul {
  margin: 0;
  padding-left: 22px;
}

.update-body li {
  margin: 8px 0;
  line-height: 1.8;
}

.update-sub {
  margin-top: 8px;
  margin-left: 8px;
  padding-left: 20px;
  border-left: 3px solid #dbe6f2;
}

.update-sub li {
  color: #555;
  font-size: .95rem;
}

@media (max-width:768px) {

  .update-history {
    display: block;
  }

  .update-date {
    width: 100%;
    padding: 12px 0;
  }

}