@charset "UTF-8";

/**********************************************************
  ▼ PC
**********************************************************/


/* ========================================
  カテゴリ
======================================== */
#cn_seisaku .categoryWrapper {
  background: #F5F5F5;
}

#cn_seisaku .categoryArea {
  display: flex;
  flex-wrap: wrap; /* 折り返し可能に */
  justify-content: space-between; /* デフォルトは均等配置 */
}

#cn_seisaku .categoryArea_btn {
  width: 19%; /* PCで5つが横並びになる幅 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background: #fff;
  box-sizing: border-box;
  
}

#cn_seisaku .categoryArea_btn:hover {
  background-color: #d6d6d6;
  color: #868686;
}

#cn_seisaku .categoryArea_btn a {
  display: block;
  font-size: 13px;
  line-height: 40px;
  text-decoration: none;
  color: #333;
}

#cn_seisaku .categoryArea_btn span {
  display: block;
  font-size: 13px;
  line-height: 35px;
  text-decoration: none;
  color: #8b8b8b;
  font-family: "Noto Sans JP";
}

#cn_seisaku .categoryArea_btn {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
}

#cn_seisaku .categoryArea_btn a {
  display: block;
  line-height: 35px;
  font-size: 13px;
}

/* 非アクティブ状態のボタンの背景色 */
#cn_seisaku .bgGrayEEEEEE {
  background-color: #EEEEEE !important;
}

/* 選択状態のボタン */
#cn_seisaku .btn_on{
box-shadow: none !important;
}

#cn_seisaku .btn_on span {
color: #111;
}
#cn_seisaku .btn_on {
  background-color: #FFFDD2 !important;
}


/* ========================================
  枠（各診療科）
======================================== */

#cn_seisaku .rinsho-card {
  border: 1px solid #CCC;     /* グレー枠（四辺） */
  border-radius: 8px;
  background: #FFF;
  padding: 16px;
  margin-top: 20px;
  position: relative;
  box-shadow: 0 0.1px 0 #FFF, 0 2px 0 rgba(0, 0, 0, 0.20);
}

#cn_seisaku .rinsho-card-header {
  display: flex;
  align-items: center;
  background-color: #a40025;  /* 赤背景 */
  color: #fff;
  font-weight: bold;
  border-radius: 25px;        /* 丸みのある帯 */
  padding: 3px 16px 3px 40px; /* 左側に余白（アイコン用） */
  position: absolute;
  top: -15px;                 /* 枠からはみ出して表示 */
  left: 20px;
  width: 445px;               /* 可変にしたい場合は削除可 */
}

#cn_seisaku .title-long {
  padding: 4px 16px 4px 40px; /* 左側に余白（アイコン用） */
}

#cn_seisaku .icon-circle {
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

#cn_seisaku .icon-circle img {
  width: 57px; height: 57px;
}

#cn_seisaku .icon-circle title-long {
  width: 50px; height: 50px;
}

#cn_seisaku .rinsho-card-body {
  margin-top: 10px;           /* 赤帯と重ならないように調整 */
}


/* ---------- タグ（診療科・NEW・公開日） ---------- */

#cn_seisaku .info-area {
  margin: 0 auto;
 /*  font-size: 14px;*/
}

#cn_seisaku .info-area-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#cn_seisaku .shinryokaArea {
  display: flex;
  gap: 8px; /* ラベル間の余白 */
}

#cn_seisaku .label {
border-radius: 4px;
border: 1px solid #CCC;
height: 20px;
flex-shrink: 0;
text-align: center;
color: #666;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}

#cn_seisaku .label.new {
width: 52px;/* 左右6px余白 */
color: #FFF;
font-weight: bold;
background: #DACD3E;
border: none;
font-family: "Noto Sans JP";
}

#cn_seisaku .date {
  font-size: 13px;
  color: #555;
}

/* 進捗状況（有効状態） */
#cn_seisaku .label.status_active {
color: #FFF;
background: #25BEB6;
border: none;
font-family: "Noto Sans JP";
}

/* 進捗状況（開始待ち） */
#cn_seisaku .label.status_pending {
border-radius: 4px;
border: 1px solid #25BEB6;
}

/* 進捗状況（停止状態） */
#cn_seisaku .label.status_stopped {
border-radius: 4px;
background: #CCC;
}

/* 文字数（3文字） */
#cn_seisaku .label.text-3char {
width: 62px;/* 左右6px余白 */
}

/* 文字数（4文字） */
#cn_seisaku .label.text-4char {
width: 72px;/* 左右6px余白 */
}

/* 文字数（5文字） */
#cn_seisaku .label.text-5char {
width: 82px;/* 左右6px余白 */
}

/* 文字数（6文字） */
#cn_seisaku .label.text-6char {
width: 92px;/* 左右6px余白 */
}


/* ---------- 省略（6行） ---------- */

#cn_seisaku .text6Line {
   -webkit-line-clamp: 6;
   word-break: break-all;
}


/* ---------- ボタン（詳細はこちら・お問い合わせ） ---------- */


#cn_seisaku .btn-area{
display: flex;
justify-content: center;
align-items: center;
height: 84px;
flex-shrink: 0;
background: #F5F5F5;
margin-top: 20px;
line-height: 50px;
}

#cn_seisaku .btn-area div{
width: 400px;
height: 50px;
flex-shrink: 0;
border-radius: 6px;
border: 1px solid #CCC;
background: #FFF;
box-shadow: 0 2px 0 0 #CCC;
text-align: center;
}

#cn_seisaku .btn-area div:nth-child(2) {
margin-left: 16px;
}

#cn_seisaku .btn-area div a{
color: #444;
font-family: "Noto Sans JP";
font-size: 16px;
font-style: normal;
font-weight: 700;
}

#cn_seisaku .btn-area .btn-ext{
  position: relative;
  padding-right: 28px;
  display:inline-block;
}

#cn_seisaku .btn-area .btn-ext .ext-icon{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:11px; height:11px; pointer-events:none;
}

#cn_seisaku .btn-area .btn-shousai a {
  display: inline-flex;/* 横並び＋中央配置 */
  justify-content: center;/* 全体を中央寄せ */
  align-items: center;/* 縦中央 */
  gap: 8px;/* テキストとアイコンの間隔 */
  width: 100%;
  height: 50px;
  text-decoration: none;
  color: #444;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-weight: 700;
}

#cn_seisaku .btn-area .btn-shousai a .ext-icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* ---------- ボタン（お問い合わせ）---------- */

#cn_seisaku .btn-otoiawase a {
  background: none !important;
  padding-left: 0 !important;
}


/* ========================================
  関連コンテンツ
======================================== */

/* ---------- 三角形の背景 bgRed02 ---------- */

#cn_seisaku .title02_triangle_bgRed02::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 30px 0 0;
  border-color: #ad0026 transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 0;
}

#cn_seisaku .title02_triangle_bgRed02{
  position: relative;
}


/* ---------- 三角形の背景 bgRed02 h2---------- */
#cn_seisaku .title02_triangle_bgRed02 h2{
  color: #404E60;
  font-weight: bold;
}



/* ========================================
  ログイン前ページ
======================================== */

/* ---------- ボタン（新規会員登録・ログイン）---------- */

#cn_seisaku .btn-area_login{
display: flex;
justify-content: center;
align-items: center;
height: 84px;
flex-shrink: 0;
background: #ffffff;
/*margin-top: 20px;*/
line-height: 50px;
}

#cn_seisaku .btn-area_login div{
width: 400px;
height: 50px;
flex-shrink: 0;
border-radius: 6px;
border: 1px solid #AD0026;
box-shadow: 0 3px 0 rgba(125, 0, 27, 1);
text-align: center;
}

#cn_seisaku .btn-area_login div:nth-child(2) {
margin-left: 16px;
}

#cn_seisaku .btn-area_login .shinki{
  background: #AD0026;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(125, 0, 27, 1);
  font-weight: bold;
}

#cn_seisaku .btn-area_login .shinki a{
display: block;
color: #fff;
font-family: "Noto Sans JP";
font-size: 16px;
font-style: normal;
font-weight: 700;
}

#cn_seisaku .btn-area_login .shinki:hover {
  background: #C63C5A;
  color: #fff;
  text-decoration: none;
  opacity: 1 !important;
}

#cn_seisaku .btn-area_login .shinki:hover a span {
  color: #FFFFFF !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#cn_seisaku .btn-area_login .shinki a,
#cn_seisaku .btn-area_login .shinki a:visited {
  color: #fff !important;
}

#cn_seisaku .btn-area_login .shinki a:hover,
#cn_seisaku .btn-area_login .shinki a:active,
#cn_seisaku .btn-area_login .shinki a:focus {
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

#cn_seisaku .btn-area_login .shinki a.btn-ext:hover {
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
}

#cn_seisaku .btn-area_login .login{
background: #FFF;
}

#cn_seisaku .btn-area_login .login a{
display: block;
color: #AD0026;
font-family: "Noto Sans JP";
font-size: 16px;
font-style: normal;
font-weight: 700;
}

/**********************************************************
  ▼ SP
**********************************************************/

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

/* ========================================
  メイン画像 SP
======================================== */

/* ---------- メイン画像（横向きでも全幅）---------- */
.u-fluid {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* ========================================
  カテゴリボタン SP
======================================== */
#cn_seisaku .categoryArea {
  display: flex;
  justify-content: space-around;
}

#cn_seisaku .categoryArea_btn {
  width: 48%;
}

#cn_seisaku .empty {
  visibility: hidden;
}

#cn_seisaku .categoryArea_left .categoryArea_btn {
  margin-left: 2%;
}

/* ========================================
  枠（各診療科） SP
======================================== */

#cn_seisaku .rinsho-card-header {
  width: calc(100% - 20px);
  left: 20px;
  right: 20px;             /* 右側も揃える */
  box-sizing: border-box;  /* パディングを含めて幅計算 */
}

#cn_seisaku .title-long {
  padding: 10px 16px 10px 40px; /* 左側に余白（アイコン用） */
}

#cn_seisaku .rinsho-card-body {
  padding-top: 10px;
  margin-top: 0px; /* PC赤帯と重ならないように調整打ち消し */

}


/* ---------- info-area（PCの固定幅を無効化）---------- */
#cn_seisaku .info-area {
  width: 100% !important;
  padding: 0 12px;
  box-sizing: border-box;
}

#cn_seisaku .info-area-top {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px;
}

#cn_seisaku .shinryokaArea {
  flex-wrap: wrap;
}


/* ---------- ボタン（詳細・お問い合わせ）---------- */
#cn_seisaku .btn-area {
  width: 100%;
  padding: 12px 12px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  height: auto;
  margin-left: 0;
}

#cn_seisaku .btn-area div {
  width: calc((100% - 12px)/2);
  height: 44px;
  line-height: 44px;
}

#cn_seisaku .btn-area div:nth-child(2) {
  margin-left: 0;
}

#cn_seisaku .btn-area .btn-shousai a,  #cn_seisaku .btn-area .btn-otoiawase a {
  display: block;
  text-align: center;
  font-size: 14px;
  height: 45px;
}

#cn_seisaku .popup {
  max-width: 90%;   /* 画面幅の90%まで広がる */
  width: auto;      /* 必要に応じて可変 */
}

#cn_seisaku .popup {
  word-break: break-all;      /* 長い文字列を強制的に折り返す */
  overflow-wrap: break-word;  /* 新しい仕様に沿った書き方 */
  white-space: normal;        /* nowrap などになっていないか確認 */
}

/* ========================================
  ログイン前ページ
======================================== */

/* ---------- ボタン（新規会員登録・ログイン）---------- */

#cn_seisaku .btn-area_login div{
width: 300px;
}

#cn_seisaku .btn-area_login{
flex-direction: column;
/*margin-top: 50px;*/
}

#cn_seisaku .btn-area_login div:nth-child(2) {
/*    margin-top: 20px;*/
    margin-left: 0px;
}


}