/* 
 * main.cssを縮退させていくために、使用している確認が取れた共通で使っているスタイルをこちらに順次移管していきます。
 */

/* Common CSS for side-list (アコーディオンメニュー) */
/* main.cssから切り出したside_list関連のスタイル */

/* ============================================
   headline_list関連のスタイル（main.cssから移行）
   ============================================ */
.headline_list a{
  display: inline-block;
  margin-bottom: 4px;
  padding: 4px 10px;
  cursor: pointer;
  color: #222222;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
}

.headline_list a:hover{
  border: 1px solid #a8abb1;
  -webkit-transition: border .2s cubic-bezier(1,0,0,1);
  transition: border .2s cubic-bezier(1,0,0,1);
  text-decoration: none;
}

@media screen and (min-width: 300px) and (max-width: 1024px) {
  .headline_list {
    margin-top: 5px;
  }
}

/* ============================================
   portal関連のスタイル（main.cssから移行）
   ============================================ */
.portal-card {
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
  border-left: transparent;
  border-right: transparent;
}

.portal-contents {
  margin-left: 18%;
  margin-top: -10px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.m-portal-card {
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
  border-left: transparent;
  border-right: transparent;
}

@media screen and (min-width: 300px) and (max-width: 1024px) {
  .portal-contents {
    margin-left: 0;
  }
}

/* 掲示板一覧PC画面の列数動的変更（画面幅1700pxを境界） */
/* Bootstrap機構を模倣したカスタムブレークポイント（col-xl） */
/* 1025px〜1700px: 2列表示（col-xl-6） */
@media screen and (min-width: 1025px) and (max-width: 1700px) {
  .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
  .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
  }
  .col-xl-12 {
    width: 100%;
  }
  .col-xl-11 {
    width: 91.66666667%;
  }
  .col-xl-10 {
    width: 83.33333333%;
  }
  .col-xl-9 {
    width: 75%;
  }
  .col-xl-8 {
    width: 66.66666667%;
  }
  .col-xl-7 {
    width: 58.33333333%;
  }
  .col-xl-6 {
    width: 50%;
  }
  .col-xl-5 {
    width: 41.66666667%;
  }
  .col-xl-4 {
    width: 33.33333333%;
  }
  .col-xl-3 {
    width: 25%;
  }
  .col-xl-2 {
    width: 16.66666667%;
  }
  .col-xl-1 {
    width: 8.33333333%;
  }
}

/* 1701px以上: 3列表示（col-xl-4） */
/* col-xl-6を無効化し、col-xl-4を優先 */
@media screen and (min-width: 1701px) {
  .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
  .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
  }
  .col-xl-12 {
    width: 100%;
  }
  .col-xl-11 {
    width: 91.66666667%;
  }
  .col-xl-10 {
    width: 83.33333333%;
  }
  .col-xl-9 {
    width: 75%;
  }
  .col-xl-8 {
    width: 66.66666667%;
  }
  .col-xl-7 {
    width: 58.33333333%;
  }
  /* col-xl-6を1701px以上で無効化（col-xl-4を優先） */
  .col-xl-6 {
    width: 33.33333333%;
  }
  .col-xl-5 {
    width: 41.66666667%;
  }
  .col-xl-4 {
    width: 33.33333333%;
  }
  .col-xl-3 {
    width: 25%;
  }
  .col-xl-2 {
    width: 16.66666667%;
  }
  .col-xl-1 {
    width: 8.33333333%;
  }
}

.portal_side_genre{
  margin-left: 100;
}

.child_genre{
  margin-left: 10px;
}

.portal_breadcrumb{
  margin-left: -180px;
}

.portal_subcategory_mobile{
  margin-top: -100px;
  padding-left: -15px;
}

.portal_subcategory_left {
  margin-left: 15%;
}

@media screen and (min-width: 300px) and (max-width: 1024px) {
  .portal_subcategory_left {
    margin-left: 0;
  }
}

.board_portal_title h3{
  margin-top: 40px;
  margin-bottom: -20px;
  margin-left:2%;
}

/* ============================================
   create-button関連のスタイル（main.cssから移行）
   ============================================ */
.create-button {
  position: fixed;
  bottom: 32px;
  font-size: 30px;
  height: 160px;
  right: 32px;
  width: 160px;
  text-align: center;
  background-color: #6f9ceb;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1), 0 7px 10px -5px rgba(75, 192, 200, 0.2);
  cursor: pointer;
  user-select: none;
  z-index: 1;
}

@media screen and (min-width: 300px) and (max-width: 800px) {
  .create-button {
    right: 5px;
    bottom: 5px;
    height: 80px;
    width: 80px;
    font-size: 20px;
  }
}

.create-button:hover {
  opacity: 0.8;
}

.create-button-a {
  color: #fff;
  padding-top: 15px;
  font-size: 40px;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

@media screen and (min-width: 300px) and (max-width: 1024px) {
  .create-button-a {
    font-size: 20px;
  }
}

.create-button-a:hover {
  color: #fff !important;
  text-decoration: none;
}

.create-button > a >span {
  position: relative;
  font-size: 30px;
}

@media screen and (min-width: 300px) and (max-width: 910px) {
  .create-button > a >span{
    font-size: 16px;
  }
}

/********* side-list **************/

.acd-check{
  display: none;
}
.acd-label{
  color: #787c7b;
  margin-bottom: 1px;
  padding: 8px;
  position: relative;
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
}
.acd-label:hover{
  color: #222;
}
.acd-label:focus{
  color: #222;
}

.acd-label a {
  color: #787c7b;
  padding-left: 30px;
  font-size: 1.0rem;
  display: block;
  width: 100%;
  height: 100%;
}
.acd-label a:hover {
  color: #222;
  text-decoration: none;
}

.acd-label:after{
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  padding-left: 10px;
  position: absolute;
  left: 0;
  top: 0px;
  font-size: 1.3rem;
}
.acd-content{
  display: block;
  height: 0;
  opacity: 0;
  padding: 0 10px;
  transition: .5s;
  visibility: hidden;
}

.acd-content ul{
  padding-left: 20px;
}
.acd-content li:hover{
  background-color: #f7f9f9;
}
.acd-content li:active{
  color: #222;
}
.acd-check:checked + .acd-label:after{
  content: '\f107';
}
.acd-check:checked + .acd-label + .sub-height{
  height: 150px;
  opacity: 1;
  visibility: visible;
}
.acd-check:checked + .acd-label + .sub-height2{
  height: 280px;
  opacity: 1;
  visibility: visible;
}
.acd-check:checked + .acd-label + .sub-height3{
  height: 230px;
  opacity: 1;
  visibility: visible;
}
.acd-check:checked + .acd-label + .sub-height4{
  height: 150px;
  opacity: 1;
  visibility: visible;
}
.acd-check:checked + .acd-label + .sub-height5{
  height: 300px;
  opacity: 1;
  visibility: visible;
}

.child a{
  color: #787c7b;
  display: block;
  font-size: 14px;
  list-style: none;
  padding: 4px 16px;
  border: none;
  border-radius: 4px;
  white-space: nowrap;
}
.child a:hover{
  color: #222;
  background-color: #f7f9f9;
  text-decoration: none;
}

.side-nav li {
  list-style: none;
}

.side-list {
  position: fixed;
  width: 200px;
  height: 100%;
  margin-left: 30px;
  overflow-y: auto;
  z-index: 2;
}

@media screen and (min-width: 300px) and (max-width: 1024px) {
  .side-list {
    display: none;
  }
}

.side-list-portal {
  position: fixed;
  width: 200px;
  height: 100%;
  overflow-y: auto;
  z-index: 2;
}

@media screen and (min-width: 300px) and (max-width: 1024px) {
  .side-list-portal {
    display: none;
  }
}

/* 掲示板詳細ページ（shareViewForBoard）用：Bootstrapグリッドシステムで管理 */
.shareViewForBoard .side_list_pc {
  /* position: fixed を削除し、通常のブロック要素として扱う */
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
  z-index: 1;
}

.side_list_pc {
  padding-bottom: -20px;
  margin-bottom: 0px;
  z-index: 2;
    overflow: hidden;
}

/* カテゴリー選択行のスタイル（掲示板一覧と掲示板詳細で共通） */
.bp_category_list{
  width: 100%;
  margin-top:-11px;
}

@media screen and (min-width: 300px) and (max-width: 1024px) {
  .bp_category_list {
    margin-top: 0;
    /* position: fixedの.category_list_mobileのため、通常のフローでは高さを持たない */
    height: 0;
    overflow: visible; /* 子要素（.category_list_mobile）は表示される */
  }
}

.bp_category_list ul{
  text-align: center;
}

.bp_category_list li{
  text-align: left;
}

.category_list_mobile{
  max-width:100%;
  padding-left: 15px;
  margin-bottom: -10px;
  background-color: #4682B4;
  /* ヘッダー同様に固定表示 */
  position: fixed;
  /* top値はJavaScriptで動的に設定 */
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1020; /* ヘッダー（z-index: 1030）より低く、コンテンツより高く */
}

@media screen and (min-width: 320px) and (max-width: 750px) {
  .category_list_mobile {
    margin-bottom: 0;
  }
}

.category_list_mobile a{
  color: white;
  font-size: 85%;
}

/* カテゴリーリストが固定表示されるため、コンテンツが隠れないように上部マージンを追加 */
/* マージンはJavaScriptで動的に設定 */
@media screen and (min-width: 300px) and (max-width: 1024px) {
  .row.category {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* .index-contents関連のスタイル（main.cssから移管） */
/* PC用：デフォルトのmargin-top */
.index-contents {
  margin-top: 50px;
}

.index-contents hr {
  border: 80%;
}

/* モバイル用：JavaScriptで動的に設定するため0に */
/* メモ一覧、掲示板一覧のカテゴリーリスト下の隙間を解消 */
@media screen and (min-width: 300px) and (max-width: 1024px) {
  .index-contents {
    margin-top: 0;
  }
}

/* パンくずリストとモーダルセットの並列表示スタイル（main.cssから移管） */
.head_contents {
  display: flex;
  align-items: center;  /* 垂直方向の中央揃え */
  justify-content: space-between;  /* 左右に配置 */
  min-height: 40px; /* 最小高さを設定して高さを統一 */
  margin-bottom: 10px; /* 下にマージンを追加して位置を固定 */
}

.bi_search_contents {
  width: 200px;
  margin-left: auto;  /* 右寄せ */
}

/* PC版でもflexboxで制御（パンくずリストを左寄せ、モーダルセットを右寄せ） */
div.bi_breadcrumb {
  text-align: left;  /* 左寄せ */
  float: none;  /* floatを無効化してflexboxを有効化 */
  flex: 1;  /* flexboxで伸縮可能に */
  min-width: 0;  /* flexbox内で縮小可能にする */
  overflow: hidden;  /* はみ出しを防ぐ */
  margin-left: 0;  /* 左マージンを0に */
  padding-left: 0;  /* 左パディングを0に */
}

/* モバイルでもパンくずリストとモーダルセットを並列表示 */
@media screen and (min-width: 300px) and (max-width: 1024px) {
  div.bi_breadcrumb {
    margin: 0% 2%;
    text-align: left;
    float: none;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  
  .bi_search_contents {
    width: auto;  /* モバイルでは幅を自動に */
    margin-left: auto;
    flex-shrink: 0;  /* モーダルセットが縮小されないようにする */
  }
  
  /* モーダルセット内のリストが改行されないようにする */
  .bi_search_pc ul.list-inline {
    white-space: nowrap;  /* 改行を防ぐ */
  }
  
}

/* モーダルセット関連のスタイル（main.cssから移管） */
.bi_search_pc {
  text-align: right;
  margin: 0; /* marginを0に */
  padding: 2%; /* paddingに変更 */
  min-height: 30px; /* 最小高さを設定 */
  display: flex;
  align-items: center; /* 内部要素を中央揃え */
}

.pcy_search {
  text-align: right;
}

.pcy_search li {
  text-align: right;
  margin-left: auto;
  margin-right: 2%;
  margin-top: 2%;
}

.pcy_search i {
  color: gray;
  font-size: 140%;
  margin-right: 2%;
}

.y_jumpModal {
  margin: 1% 2%;
}

/* パンくずリスト関連のスタイル（main.cssから移管） */
/* PC版パンくずリスト（モバイル用メディアクエリ内） */
@media screen and (min-width: 300px) and (max-width: 1024px) {
  div.bi_breadcrumb_pc {
    margin:0% 2%;
    text-align: left;
    float: left;
  }
}

/* パンくずリストの基本スタイル */
.breadcrumb {
  padding-left: 0px !important;
  padding-top: 3px !important;
  margin-bottom: 0 !important;
}

/* .sub_category_toggle関連のスタイル（main.cssから移管） */
.sub_category_toggle .glyphicon {
  cursor: pointer;
}

/* モバイル版：既存のスタイルを維持 */
.sub_category_toggle {
  margin-top: 10px; /* 固定値に変更 */
  margin-left: 3%;
  margin-bottom: 10px; /* 下マージンを追加 */
}

/* 年ナビゲーションをhead_contents内で使用する場合のスタイル調整 */
.head_contents .cal_nav_pyear {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;  /* 左パディングを0に */
  flex: 1;
  min-width: 0;
  overflow: hidden;
  line-height: 1.5; /* 行の高さを統一 */
  min-height: 30px; /* 最小高さを設定 */
  display: flex;
  align-items: center; /* 内部要素を中央揃え */
}

.head_contents .cal_nav_pyear ul {
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
  align-items: center; /* リストアイテムを中央揃え */
  flex-wrap: wrap; /* 必要に応じて折り返し */
}

.head_contents .cal_nav_pyear li {
  display: inline-block;
  margin-right: 5px;
  line-height: 1.5; /* 行の高さを統一 */
}

.head_contents .cal_nav_pyear li.active {
  color: #333;
  font-weight: bold;
  margin-right: 5px;
  line-height: 1.5; /* 行の高さを統一 */
}

/* モバイル用の調整 */
@media screen and (min-width: 300px) and (max-width: 1024px) {
  .head_contents {
    min-height: 35px; /* モバイル用の最小高さ */
    margin-bottom: 5px; /* モバイルでは少し小さく */
  }
  
  .head_contents .cal_nav_pyear {
    margin-left: 0;  /* 左マージンを0に */
    margin-right: 2%;  /* 右マージンのみ設定 */
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;  /* 左パディングを0に */
    flex: 1;
    min-width: 0;
    overflow: hidden;
    min-height: 25px; /* モバイル用の最小高さ */
  }
  
  .head_contents .cal_nav_pyear li {
    white-space: nowrap;
  }
  
  .bi_search_pc {
    min-height: 25px; /* モバイル用の最小高さ */
    padding: 1%; /* モバイルではpaddingを小さく */
  }
}

/* PC版：margin-topを固定値にして干渉を解消 */
@media screen and (min-width: 1025px) {
  .sub_category_toggle {
    margin-top: 10px; /* PC版でも固定値 */
    margin-left: 3%;
    margin-bottom: 10px; /* 下マージンを追加 */
  }
  
  /* PC版：モーダルセットの右端をトップ画像の右端に合わせる */
  .bi_search_contents {
    margin-right: 0 !important; /* 右マージンを0に（!importantで確実に適用） */
    margin-left: auto; /* flexboxの親要素内で右寄せにする（モバイル版と同じ仕組み） */
  }
  
  .bi_search_pc {
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 2%;
    padding-right: 0 !important; /* 右パディングを0にしてトップ画像の右端に合わせる（!importantで確実に適用） */
  }
  
  /* モーダルセット内のアイコンの右マージンも0に */
  .bi_search_pc .pcy_search i {
    margin-right: 0 !important;
  }
  
  /* モーダルセット内のリストアイテムの右マージンも調整 */
  .bi_search_pc ul.list-inline li:last-child {
    margin-right: 0;
  }
  
  /* PC版：モーダルセット内のアイコンを右端から並べる */
  .bi_search_pc ul.list-inline {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
    margin-left: 0 !important; /* Bootstrapのmargin-left: -5pxを上書き */
  }
  
  /* Bootstrapの.list-inline > liのdisplay: inline-blockを上書き */
  .bi_search_pc ul.list-inline > li {
    display: flex !important;
    align-items: center;
    padding-left: 5px;
    padding-right: 5px;
  }
  
  /* PC版専用：新規実装のモーダルセット（中央のcolの右端からアイコンが並ぶ） */
  /* PC版専用のモーダルセットコンテナ */
  .modal-set-pc-new {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: auto;
    flex-shrink: 0;
    margin-left: auto;
    padding: 2% 0;
  }
  
  /* PC版専用のアイコンリスト */
  .modal-set-pc-new ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 10px;
  }
  
  /* PC版専用の各アイコン項目 */
  .modal-set-pc-new ul li {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
  }
  
  /* PC版専用のアイコンリンク */
  .modal-set-pc-new ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: gray;
    font-size: 140%;
    text-decoration: none;
    width: 30px;
    height: 30px;
  }
  
  /* PC版専用：シェアモーダルと検索モーダルのボタンスタイル */
  .modal-set-pc-new .pcy_search {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .modal-set-pc-new .pcy_search a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: gray;
    font-size: 140%;
    text-decoration: none;
    width: 30px;
    height: 30px;
  }
  
  /* PC版専用：シェアモーダルと検索モーダルのアイコンサイズを統一 */
  .modal-set-pc-new .pcy_search i {
    font-size: 140%;
    color: gray;
    margin-right: 0;
  }
  
  /* PC版専用：直接リンクのアイコンサイズを統一 */
  .modal-set-pc-new ul li a i {
    font-size: 140%;
  }
}

/* .def_margin関連のスタイル（main.cssから移管） */
.def_margin {
  margin-top: 10px; /* PC版でもマージンを設定 */
  margin-bottom: 10px;
}

@media screen and (min-width: 300px) and (max-width: 1024px) {
  .def_margin {
    margin: 0% 2%;
  }
}

/* list_title内のh3タグのマージンを統一 */
.def_margin h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.4;
}

/* list_title内のh3タグのマージンを統一 */
.def_margin h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.4;
}

/* マガジン一覧専用：head_contentsとdef_marginの間隔を確保 */
/* より具体的なセレクタで確実に適用 */
@media screen and (min-width: 300px) and (max-width: 1024px) {
  .head_contents.magazine_head_contents {
    margin-bottom: 20px;
  }
}

/* 掲示板一覧モバイル版関連のスタイル（main.cssから移管） */
/* 構造変更により、これらのスタイルは不要になる可能性があるが、念のため保持 */
.portal_breadcrumb_mobile {
  padding-top: 60px;
  margin-left: -15px;
}

.board_portal_title_mobile {
  margin-top: -50px;
  margin-left: 2%;
}

/* portal-head-titleのモバイル版スタイル（circle.cssから移管） */
@media screen and (min-width: 300px) and (max-width: 1024px) {
  .portal-head-title {
    display: block;
  }
}

/* 年のメモがない場合でもmemo-cardの高さを確保 */
.memo-card {
  min-height: 500px; /* 年のメモがない場合でも最小高さを確保 */
}

@media screen and (min-width: 300px) and (max-width: 1024px) {
  .memo-card {
    min-height: 450px; /* モバイルでは少し小さく */
  }
}

/* phta_setting関連のスタイル（main.cssから移管） */
/* 注意: 以下のスタイルは他のファイル（headline_inside_pc.blade.php、headline_board.blade.php、headline_top_article.blade.php、diaryTop.blade.php、area/portal_inside_pc.blade.php、area/portal_article.blade.php、board/portal_board.blade.php、user_profile/center_pc.blade.php等）でも使用されています */
/* policy_setting_common.blade.phpでは新しいクラス名（policy-setting-wrapper）を使用 */
.phta_setting {
  margin-left: 2%;
  margin-right: 2%;
}

.phta_setting li span{
  font-size: 65%;
  font-weight: normal; /*太字に*/
}

.phta_setting p{
  font-size: 65%;
  font-weight: normal; /*太字に*/
}

div.phta_setting i{
  font-size: 65%;
  font-weight: normal; /*太字に*/
}

.phta_setting ul{
  margin-bottom:-2px;
}

.pha_side2p{
  margin-left: 2%;
  margin-right: 2%;
}

/* policy_setting_common.blade.php専用のスタイル */
/* 新しいクラス名を使用して、他のファイルで使用されている.phta_settingとの衝突を避ける */
.policy-setting-wrapper {
  margin-left: 2%;
  margin-right: 2%;
}

.policy-setting-wrapper ul {
  margin-bottom: -2px;
}

.policy-setting-wrapper li {
  line-height: 1.5;
}

.policy-setting-wrapper .fa {
  vertical-align: middle;
}

.policy-setting-wrapper .policy-text {
  font-size: 100%;
  vertical-align: middle;
}

.policy-setting-wrapper li span {
  font-size: 100%;
  font-weight: normal;
  vertical-align: middle;
}

.policy-setting-wrapper i {
  font-size: 100%;
  vertical-align: middle;
}

.policy-setting-wrapper p {
  font-size: 100%;
  font-weight: normal;
  vertical-align: middle;
}

/* portal_board.blade.phpの作成日時表示を100%に */
.phta_setting .pboard_info {
  font-size: 100%;
}

/* 掲示板一覧（portal_board.blade.php）用のスタイル */
/* モバイルの掲示板一覧で作成日時とポリシー設定共通の開始位置を揃える */
@media screen and (min-width: 300px) and (max-width: 1024px) {
  .portal-contents .portal-board-info {
    margin-left: 2%;
    margin-right: 2%;
  }
  
  .portal-contents .portal-board-date-info {
    margin: 0;
    padding: 0;
    font-size: 100%;
  }
  
  .portal-contents .portal-board-info .policy-setting-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
  
  .portal-contents .portal-board-info .policy-setting-wrapper ul {
    margin-left: 0 !important;
  }
}

/* PC画面の掲示板一覧で作成日時とポリシー設定共通のフォントサイズを100%に */
@media screen and (min-width: 1025px) {
  .portal-board-date-info {
    font-size: 100%;
  }
  
  .portal-board-info .policy-setting-wrapper {
    font-size: 100%;
  }
  
  .portal-board-info .policy-setting-wrapper .policy-text {
    font-size: 100%;
  }
  
  .portal-board-info .policy-setting-wrapper li span {
    font-size: 100%;
  }
  
  .portal-board-info .policy-setting-wrapper i {
    font-size: 100%;
  }
  
  .portal-board-info .policy-setting-wrapper p {
    font-size: 100%;
  }
}

/* 掲示板一覧（portal_board.blade.php）の画像高さをデバイスサイズに応じて動的調整 */
/* 小さいスマホ（iPhone SE相当） */
@media screen and (min-width: 300px) and (max-width: 375px) {
  .portal-contents .pboard_pnl img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
}

/* 中くらいのスマホ（iPhone 17 Pro相当） */
@media screen and (min-width: 376px) and (max-width: 428px) {
  .portal-contents .pboard_pnl img {
    width: 100%;
    height: 240px;
    object-fit: cover;
  }
}

/* 大きいスマホ（iPhone 17 Pro Max相当） */
@media screen and (min-width: 429px) and (max-width: 767px) {
  .portal-contents .pboard_pnl img {
    width: 100%;
    height: 280px;
    object-fit: cover;
  }
}

/* 小さいタブレット（iPad mini相当） */
@media screen and (min-width: 768px) and (max-width: 820px) {
  .portal-contents .pboard_pnl img {
    width: 100%;
    height: 350px;
    object-fit: cover;
  }
}

/* タブレット（iPad相当） */
@media screen and (min-width: 821px) and (max-width: 1024px) {
  .portal-contents .pboard_pnl img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
}

/* heart-margin-left関連のスタイル（main.cssから移管） */
.heart-margin-left {
  margin: 10px 20px;
  padding-top: 5px;
  border-top: 1px solid #e6e6e6;
}

/* bss_info関連のスタイル（main.cssから移管） */
div.bss_info li{
   text-align: left;
   margin-left: 0;
   margin-right: 2%;
   margin-top:1%;
   border-radius: 0.5em;
}

div.bss_info i{
   color:gray;
   font-size: 140%;
}

/* ============================================
   memo description関連のスタイル（main.cssから移管）
   ============================================ */

/* メモ一覧のdescription表示 */
.ph_article_desc{
  margin: 0% 2%;
}

@media screen and (min-width: 320px) and (max-width: 750px) {
  .ph_article_desc {
    font-size: 90%;
  }
}

/* メモ一覧の[もっと読む]リンク */
.phta_readmore{
  text-align: right;
  margin-right: 2%;
}

/* カレンダートップのdescription表示 */
.py_description p{
  margin-left: 2%;
  margin-right: 2%;
}

/* カレンダートップの[もっと読む]リンク */
.pyly_readmore{
  margin: 0% 2%;
}

/* ============================================
   memo description展開アニメーション用スタイル
   ============================================ */

/* 展開コンテナ */
.memo-detail-expanded {
  margin: 10px 2%;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 20px; /* 下部マージンを追加 */
}

/* 展開コンテナのコンテンツ */
.memo-detail-content {
  margin-bottom: 15px;
  word-wrap: break-word;
  text-align: left;
  padding-bottom: 10px; /* 下部パディングを追加 */
}

.memo-detail-content img {
  max-width: 100%;
  height: auto;
}

.memo-detail-content iframe {
  max-width: 100%;
}

/* memo description展開時のローディング表示 */
.memo-detail-content .text-center {
  padding: 20px 0;
  text-align: center;
}

.memo-detail-content .text-center i {
  display: block;
  margin-top: 10px;
  font-style: normal;
}

/* PCのマイページの右col内のタグリストに左右マージンを追加 */
@media screen and (min-width: 768px) {
  .up-tag-list-wrapper {
    margin-left: 4px;
    margin-right: 4px;
  }
}

/* ============================================
   user_profile entry_type_titleとcontents_sort関連のスタイル
   main.cssから移行
   ============================================ */

/* 基本スタイル（PC・モバイル共通） */
div.entry_type_title {
  text-align: left;
  float: left;
}

/* PC用contents_sortスタイル */
.contents_sort {
  padding-top: 50px;
}

/* モバイル画面でのentry_type_titleとcontents_sortの干渉回避 */
@media screen and (max-width: 767px) {
  /* entry_type_titleを上に配置 */
  div.entry_type_title {
    margin-left: 4px;
    margin-bottom: 0;
    width: 100%;
    float: none;
  }
  
  /* contents_sortを下の<hr>に近づける */
  .contents_sort {
    padding-top: 10px;
    margin-top: 0;
    margin-bottom: 0;
  }
  
  /* entry_type_titleとcontents_sortの間隔を調整 */
  .entry_type_title + .contents_sort {
    margin-top: -10px;
  }
}