@charset "UTF-8";
/* ベースカラー */
/* ベースカラー(グラデーション用暗色) */
/* カラーパターン1(デフォルト青) */
/* カラーパターン2(ピンク) */
/* カラーパターン3(緑) */
/* カラーパターン4(灰色) */
/* 指定用(デフォルト) */
.arrow_l {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-top: 2px solid #61B4E0;
  border-right: 2px solid #61B4E0;
  transform: rotate(45deg);
  margin: 0 5px 0 5px;
}

.arrow_r {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-bottom: 2px solid #61B4E0;
  border-left: 2px solid #61B4E0;
  transform: rotate(45deg);
  margin: 0 5px 0 5px;
}

.arrow_b {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-bottom: 2px solid #61B4E0;
  border-right: 2px solid #61B4E0;
  transform: rotate(45deg);
  margin: 0 5px 2px 5px;
}

.arrow_t {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-top: 2px solid #61B4E0;
  border-left: 2px solid #61B4E0;
  transform: rotate(45deg);
  margin: 2px 5px 0 5px;
}

/* 指定用(デフォルト) */
.btn {
  display: inline-block;
  border-style: none;
  color: white;
  white-space: nowrap;
  background: #0EB6AC; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #0EB6AC 0%, rgb(8.5357142857, 110.9642857143, 104.8673469388) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$base-color", endColorstr="$base-color-dark",GradientType=0 ); /* IE6-9 */
  box-shadow: 0px 0px 3px #555;
  border-radius: 5pt;
  font-size: 1.1rem;
  padding: 2px 5px 2px 5px;
  max-width: 400px;
  line-height: 1.6rem;
  overflow: hidden;
}
.btn a {
  color: white;
  text-decoration: none;
}
.btn[disabled] {
  filter: brightness(80%) grayscale(70%);
}

a.btn {
  color: white;
  text-decoration: none;
  text-align: center;
}

.btn_dark {
  background: #0E8272; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #0E8272 0%, #094B42 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#0E8272", endColorstr="#094B42",GradientType=0 ); /* IE6-9 */
}

.btn img {
  width: 24px;
  height: 24px;
  margin: auto;
}

.btn_large {
  font-size: 1.2rem;
  min-height: 40px;
  line-height: 2.5rem;
}
.btn_large img {
  width: 32px;
  height: 32px;
  margin: auto;
}

.btn_small {
  font-size: 0.7rem;
  min-height: 20px;
}
.btn_small img {
  width: 16px;
  height: 16px;
  margin: auto;
}

.btn_importance {
  background-color: #2A5C4B;
}

.btn_green {
  background-color: #75A215 !important;
}

.btn_gray {
  background: #ccc !important; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ccc 0%, rgb(140.25, 140.25, 140.25) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$gray_btn_color", endColorstr="$gray_btn_dark_color",GradientType=0 ) !important; /* IE6-9 */
}

.btn_alert {
  background: #ba2636; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ba2636 0%, #70000D 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ba2636", endColorstr="#70000D",GradientType=0 ); /* IE6-9 */
}

.btn_warn {
  background: #DDA200; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #DDA200 0%, #DD7E00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#DDA200", endColorstr="#DD7E00",GradientType=0 ); /* IE6-9 */
}

.top_btn_preview {
  width: 100px;
  height: 100px;
}

.top_btn_normal {
  display: inline-block;
  border-style: none;
  color: white;
  background: #0EB6AC; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #0EB6AC 0%, rgb(8.5357142857, 110.9642857143, 104.8673469388) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$base-color", endColorstr="$base-color-dark",GradientType=0 ); /* IE6-9 */
  box-shadow: 0px 0px 3px #555;
  border-radius: 5pt;
  font-size: 0.8rem;
  padding: 2px 5px 2px 5px;
  max-width: 400px;
}
.top_btn_normal a {
  color: white;
  text-decoration: none;
}

.profile_edit_top_btn_normal {
  width: 40px;
  height: 40px;
  margin-right: 7px;
}

.top_btn_skeleton {
  display: inline-block;
  background: linear-gradient(to bottom, #d8dada 0%, #f1f1f1 22%, #c7c8ca 44%, #e7e8e8 74%, #fdfdfd 100%);
  color: white;
  box-shadow: 0px 0px 10px #888;
  border-radius: 15pt;
  font-size: 0.8rem;
  padding: 2px 5px 2px 5px;
  max-width: 400px;
  border: 1pt solid #e7e8e8;
}
.top_btn_skeleton a {
  color: white;
  text-decoration: none;
}

.profile_edit_top_btn_skeleton {
  width: 40px;
  height: 40px;
  margin-right: 4px;
}

.top_btn_zodiac {
  display: inline-block;
  text-align: left;
  border: 1pt solid #0EB6AC;
  background-color: rgb(58.1428571429, 239.8571428571, 229.0408163265); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgb(34.4642857143, 238.0357142857, 225.9183673469) 0%, rgb(58.1428571429, 239.8571428571, 229.0408163265) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="lighten($base-color, 15%)", endColorstr="lighten($base-color, 20%)",GradientType=0 ); /* IE6-9 */
  font-size: 1.1rem;
  border-radius: 15px;
  color: #555;
  margin-bottom: 5px;
  box-shadow: 0px 0px 10px #ccc;
}

.profile_edit_top_btn_zodiac {
  width: 48px;
  height: 48px;
  margin-right: 6px;
  margin-bottom: 0;
}

.top_btn_hamster {
  display: inline-block;
  text-align: left;
  border: 1pt solid #0EB6AC;
  background-color: rgb(58.1428571429, 239.8571428571, 229.0408163265); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgb(34.4642857143, 238.0357142857, 225.9183673469) 0%, rgb(58.1428571429, 239.8571428571, 229.0408163265) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="lighten($base-color, 15%)", endColorstr="lighten($base-color, 20%)",GradientType=0 ); /* IE6-9 */
  font-size: 1.1rem;
  border-radius: 15px;
  color: #555;
  margin-bottom: 5px;
  box-shadow: 0px 0px 10px #ccc;
}

.profile_edit_top_btn_hamster {
  width: 48px;
  height: 48px;
  margin-right: 6px;
  margin-bottom: 0;
}

/* トグルボタン */
.toggle button {
  background: rgb(242, 245, 246); /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgb(242, 245, 246) 0%, rgb(227, 234, 237) 37%, rgb(200, 215, 220) 100%), url(../img/dummy.gif); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f2f5f6", endColorstr="#c8d7dc",GradientType=0 ); /* IE6-9 */
  color: #555;
  white-space: nowrap;
  border: 1pt solid rgb(168.8333333333, 192.3333333333, 200.1666666667);
  min-height: 48px;
  border-radius: 0px;
  padding: 5px;
  margin-left: -5px;
  font-size: 0.9rem;
}
.toggle button.selected {
  background: #0EB6AC; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #0EB6AC 0%, rgb(8.5357142857, 110.9642857143, 104.8673469388) 100%), url(../img/dummy.gif); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$base-color", endColorstr="$base-color-dark",GradientType=0 ); /* IE6-9 */
  color: white;
  font-weight: bold;
  border: 1pt solid rgb(10.3571428571, 134.6428571429, 127.2448979592);
}
.toggle button:first-child {
  border-radius: 10px 0px 0px 10px;
  margin-left: 0px;
  margin-right: 0px;
}
.toggle button:last-child {
  border-radius: 0px 10px 10px 0px;
  margin-left: -6px;
}

/* 外部連携用ボタン */
.cooperateBtn {
  display: inline-block;
  border-style: none;
  color: white;
  white-space: nowrap;
  box-shadow: 0px 0px 3px #555;
  border-radius: 5pt;
  font-size: 0.9rem;
  padding: 2px 5px 2px 5px;
  max-width: 400px;
  line-height: 1.6rem;
  overflow: hidden;
}
.cooperateBtn[disabled] {
  filter: brightness(80%) grayscale(70%);
}
.cooperateBtn span {
  display: inline-block;
}

#facebookBtn {
  background: #4267B2;
}

#twitterBtn {
  background: #1DA1F2;
}

#googleBtn {
  background: #D43830;
}

#curasawBtn {
  background: #0EB6AC;
  /*
  background: #78E0C3;
  */
}

/* CSS Document */
/* リセット用CSSここから */
html, body {
  height: 100%;
  margin: 0px;
}

body {
  width: 100%;
  font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 0.9rem;
  color: #555;
  color: #333;
  background: #fff;
  line-height: 1; /*行の高さをフォントサイズと同じにしています*/
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  /* background:transparent; */
  /*要素のフォントサイズやマージン・パディングをリセットしています*/
}

a {
  margin: 0;
  padding: 0;
  color: #333;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  /*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
}

button {
  cursor: pointer;
}

progress {
  width: 100%;
  height: 40px;
  border: 1pt solid #ccc;
  border-radius: 5px;
  padding: 5px;
  background-color: white;
  opacity: 0.7;
}

/* float解除用 */
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input, select {
  vertical-align: middle;
}

ol, ul, nav ul {
  list-style: none;
}

img {
  vertical-align: middle;
  font-size: 0;
  line-height: 0;
}

h1, h2, h3, h4, h5, h6, address {
  font-weight: normal;
  font-style: normal;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q {
  quotes: none;
  /*引用符の表示が出ないようにしています*/
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
  /*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
}

del {
  text-decoration: line-through;
  /*テキストに打ち消し線が付くようにしています*/
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
  /*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
  また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
}

/* リセット用CSSここまで */
body {
  width: 100%;
  margin: 0px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  min-width: 320px;
  color: #333;
  font-size: 0.8rem;
}

header {
  display: table;
  height: 40px;
  color: #fff;
  text-align: center;
  min-height: 30px;
  width: 100%;
  background-color: #0EB6AC;
  clear: both;
  padding: 5px 0 5px 0px;
  display: table;
}
header img {
  vertical-align: top !important;
}
header .left {
  vertical-align: middle;
  display: table-cell;
  width: 15%;
}
header .center {
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  width: 70%;
}
header .right {
  vertical-align: top;
  display: table-cell;
  vertical-align: middle;
  width: 15%;
  min-width: 80px;
}
header .title {
  font-size: 1.2rem;
  color: white;
  box-shadow: none !important;
}

a {
  color: #1F83B9;
  text-decoration: underline;
}

p {
  line-height: 1.1rem;
}

footer {
  text-align: center;
  min-height: 20px;
  background-color: #fafafa;
  border-top: 1pt solid #ccc;
  clear: both;
  padding: 3px 0 3px 0;
  letter-spacing: 1px;
}

.footer_fitbottom {
  position: absolute;
  bottom: 0;
  width: 100%;
}

footer a {
  color: #1F83B9;
}

.footer_link_pagetop {
  display: block;
  width: 100%;
  text-align: right;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  font-size: 8pt;
}

.footer_section_title {
  display: block;
  width: 90%;
  text-align: left;
  font-size: 7pt;
  font-weight: bold;
  color: #333;
  padding: 0;
  margin: 0;
  line-height: 15px;
}

section.profile {
  color: #888;
  position: relative;
}

section.profile .close {
  position: absolute;
  top: 0px;
  left: 0px;
}

.user_img {
  border: 2pt solid #fff;
  border-radius: 100px;
  border: 1pt solid rgba(255, 255, 255, 0.8);
  width: 64px;
  height: 64px;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 0px 10px #ccc;
  margin: 0 auto;
}
.user_img img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 120px;
  max-height: 120px;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

.content {
  margin: 0 10px 0 10px;
  min-height: 420px;
  padding: 5px;
  box-sizing: border-box;
  /* padding-bottom: 51px; */
}

.copyright {
  display: inline-block;
  font-size: 8pt;
  font-weight: bold;
  color: #333;
  text-align: left;
  padding: 0;
  margin: 0px 0 0 10px;
  line-height: 12pt;
}

.center {
  margin: 0 auto;
}

.box_wrap {
  position: relative;
}

.box_left {
  position: absolute;
  top: 0;
  left: 5px;
  bottom: 0;
  margin: auto;
}

.box_center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.box_right {
  position: absolute;
  top: 0;
  right: 5px;
  bottom: 0;
  margin: auto;
}

.option dd {
  color: #338 !important;
  font-weight: bold;
}

.option dt {
  color: #338 !important;
  font-weight: bold;
}

dl {
  text-align: left;
}
dl a {
  line-height: 1rem;
}
dl dt {
  font-size: 0.9rem;
  line-height: 1rem;
  border-style: none;
  border-bottom: 1pt solid #ddd !important;
  font-weight: bold;
  color: #555;
  margin-top: 10px;
  margin-bottom: 5px;
}
dl dt img {
  width: 32px;
  height: 32px;
  margin-left: 5px;
}
dl dd {
  line-height: 1.5rem;
  margin-left: 1rem;
  color: #666;
  padding-bottom: 5px;
}

dl.underline dd {
  border-bottom: 1pt dashed #ddd;
}

.title {
  display: inline-block;
  width: 95%;
  border-bottom: 1pt double #0EB6AC;
  font-size: 1rem;
  line-height: 1.4rem;
  font-weight: normal;
  color: #555;
  box-shadow: 0px 4px 3px -3px rgba(0.5, 0.5, 0.5, 0.2);
}
.title img {
  width: 32px;
  height: 32px;
}

.title::before {
  content: " ";
  border-radius: 5pt;
  display: inline-block;
  margin: 0 10px -5px 0;
  height: 25px;
  width: 5px;
  background-color: #0EB6AC;
}

.subtitle {
  display: inline-block;
  width: 100%;
  border-bottom: 1pt double #0EB6AC;
  font-size: 1rem;
  font-weight: normal;
  box-shadow: 0px 4px 3px -3px rgba(0.5, 0.5, 0.5, 0.2);
  line-height: 1.8rem;
}

.section_bar {
  font-size: 1rem;
  display: block;
  width: 90%;
  margin: 0 0 0 0;
  border-bottom: 1pt dashed #63BCD6;
  font-weight: normal;
}

.section {
  padding: 5px 0 5px 5px;
  border-bottom: 1pt solid #eee;
}

.msgbox {
  margin: 10px 10px 10px 10px;
  border-radius: 5pt;
  color: white;
  padding: 5px 5px 5px 26px;
  font-size: 0.8rem;
  position: relative;
  line-height: 1.1rem;
}

.success {
  background-color: #CCE198;
  color: #567B03;
}

.success:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-image: url("/img/message/success24.png");
  left: 2px;
  top: 50%;
  margin: -14px 0 0 0;
}

.warn {
  background-color: #FACC88;
  color: #985C00;
}

.warn:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-image: url("/img/message/warn24.png");
  left: 2px;
  top: 50%;
  margin: -14px 0 0 0;
}

.error {
  background-color: #ECC0AD;
  color: #790001;
}

.message {
  display: inline-block;
  margin-top: 0px;
}

.nowrap {
  white-space: nowrap;
}

.user_unknown {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #ccc;
  border-radius: 15px;
  background-image: url("/img/24x24/user.png");
  vertical-align: middle;
  margin: 0 3px 0 0;
}

@media screen and (min-width: 420px) {
  .remodal {
    border: 1pt solid #ccc;
    border-radius: 5px;
    box-shadow: 1px 1px 1px rgba(1, 1, 1, 0.2);
    padding: 10px !important;
    margin: 20px;
    width: 90%;
  }
}
@media screen and (max-width: 421px) {
  .remodal {
    border: 1pt solid #ccc;
    border-radius: 5px;
    box-shadow: 1px 1px 1px rgba(1, 1, 1, 0.2);
    padding: 10px !important;
    margin: 10px;
    width: 95%;
    min-height: 90%;
  }
}
.clearboth:after {
  display: block;
  content: " ";
  clear: both;
}

.filterbar {
  background-color: #eee;
  border-top: 1pt solid #ccc;
  border-bottom: 1pt solid #ccc;
  padding: 5px 0 5px 10px;
  font-size: 0.7rem;
}

.filter_condition {
  display: inline-block;
  background-color: #0EB6AC;
  border: 1pt solid #0e8272;
  border-radius: 5pt;
  padding: 1pt 3pt 1pt 3pt;
  color: white;
  font-weight: bold;
}

.underline_solid_g {
  border-bottom: 1pt solid #ccc;
  box-shadow: 0px 4px 3px -3px rgba(0.5, 0.5, 0.5, 0.2);
}

.underline_dashed_g {
  border-bottom: 1pt dashed #ccc;
}

.underline_solid_base {
  border-bottom: 1pt solid #0EB6AC;
  box-shadow: 0px 4px 3px -3px rgba(0.5, 0.5, 0.5, 0.2);
}

.underline_dashed_base {
  border-bottom: 1pt dashed #0EB6AC;
  box-shadow: 0px 4px 3px -3px rgba(0.5, 0.5, 0.5, 0.2);
}

.tab_selection {
  border-bottom: 1pt solid #0e8272;
  padding: 0 0 0 10px;
  margin-bottom: 10px;
}

.tab_item {
  dispaly: table-cell;
  cursor: pointer;
  float: left;
  font-size: 0.8rem;
  color: white;
  min-width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 5px 5px 0 0;
  background-color: #0e8272;
  border: 1pt solid #0e8272;
  border-bottom-style: none;
  margin: 10px 3px -2px 0;
  vertical-align: middle;
  padding: 0 3px 0 3px;
}

.tab_item img {
  vertical-align: middle;
}

.tab_item_active {
  z_index: 999;
  background-color: white;
  border: 1pt solid #0e8272;
  border-bottom: 2pt solid transparent;
  color: #333;
  font-weight: bold;
}

.f_left {
  float: left;
  /* width: 90%; */
}

.f_right {
  float: right;
}

.p_0 {
  padding: 0px !important;
}

.p_5 {
  padding: 5px !important;
}

.p_10 {
  padding: 10px !important;
}

.p_20 {
  padding: 20px !important;
}

.pt_5 {
  padding-top: 5px !important;
}

.pt_10 {
  padding-top: 10px !important;
}

.pt_20 {
  padding-top: 20px !important;
}

.pr_5 {
  padding-right: 5px !important;
}

.pr_10 {
  padding-right: 10px !important;
}

.pr_20 {
  padding-right: 20px !important;
}

.pl_5 {
  padding-left: 5px !important;
}

.pl_10 {
  padding-left: 10px !important;
}

.pl_20 {
  padding-left: 20px !important;
}

.pl_30 {
  padding-left: 30px !important;
}

.pb_5 {
  padding-bottom: 5px !important;
}

.pb_10 {
  padding-bottom: 10px !important;
}

.pb_20 {
  padding-bottom: 20px !important;
}

.w_100 {
  width: 100% !important;
}

.w_90 {
  width: 90% !important;
}

.w_80 {
  width: 80% !important;
}

.w_70 {
  width: 70% !important;
}

.w_60 {
  width: 60% !important;
}

.w_50 {
  width: 50% !important;
}

.w_40 {
  width: 40% !important;
}

.w_30 {
  width: 30% !important;
}

.w_20 {
  width: 20% !important;
}

.w_15 {
  width: 15% !important;
}

.w_10 {
  width: 10% !important;
}

.wp_230 {
  width: 230px !important;
}

.wp_200 {
  width: 200px !important;
}

.wp_150 {
  width: 150px !important;
}

.wp_140 {
  width: 140px !important;
}

.wp_130 {
  width: 130px !important;
}

.wp_120 {
  width: 120px !important;
}

.wp_110 {
  width: 110px !important;
}

.wp_100 {
  width: 100px !important;
}

.wp_90 {
  width: 90px !important;
}

.wp_80 {
  width: 80px !important;
}

.wp_70 {
  width: 70px !important;
}

.wp_60 {
  width: 60px !important;
}

.wp_50 {
  width: 50px !important;
}

.wp_40 {
  width: 40px !important;
}

.wp_30 {
  width: 30px !important;
}

.wp_20 {
  width: 20px !important;
}

.wp_10 {
  width: 10px !important;
}

.wp_16 {
  width: 16px !important;
}

.wp_24 {
  width: 24px !important;
}

.wp_32 {
  width: 32px !important;
}

.wp_48 {
  width: 48px !important;
}

.wp_64 {
  width: 64px !important;
}

.mw_500 {
  max-width: 500px !important;
}

.mw_400 {
  max-width: 400px !important;
}

.mw_300 {
  max-width: 300px !important;
}

.mw_200 {
  max-width: 200px !important;
}

.mw_100 {
  max-width: 100px !important;
}

.h_100 {
  height: 100% !important;
}

.hp_200 {
  height: 200px !important;
}

.hp_120 {
  height: 120px !important;
}

.hp_100 {
  height: 100px !important;
}

.hp_90 {
  height: 90px !important;
}

.hp_80 {
  height: 80px !important;
}

.hp_70 {
  height: 70px !important;
}

.hp_60 {
  height: 60px !important;
}

.hp_50 {
  height: 50px !important;
}

.hp_40 {
  height: 40px !important;
}

.hp_30 {
  height: 30px !important;
}

.hp_20 {
  height: 20px !important;
}

.hp_10 {
  height: 10px !important;
}

.hp_16 {
  height: 16px !important;
}

.hp_24 {
  height: 24px !important;
}

.hp_32 {
  height: 32px !important;
}

.hp_48 {
  height: 48px !important;
}

.hp_64 {
  height: 64px !important;
}

.wh_16 {
  width: 16px !important;
  height: 16px !important;
}

.wh_24 {
  width: 24px !important;
  height: 24px !important;
}

.wh_32 {
  width: 32px !important;
  height: 32px !important;
}

.wh_36 {
  width: 36px !important;
  height: 36px !important;
}

.wh_48 {
  width: 48px !important;
  height: 48px !important;
}

.wh_64 {
  width: 64px !important;
  height: 64px !important;
}

.wh_50 {
  width: 50px !important;
  height: 50px !important;
}

.wh_60 {
  width: 60px !important;
  height: 60px !important;
}

.wh_70 {
  width: 70px !important;
  height: 70px !important;
}

.wh_80 {
  width: 80px !important;
  height: 80px !important;
}

.wh_90 {
  width: 90px !important;
  height: 90px !important;
}

.wh_100 {
  width: 100px !important;
  height: 100px !important;
}

.m_5 {
  margin: 5px !important;
}

.m_10 {
  margin: 10px !important;
}

.m_20 {
  margin: 20px !important;
}

.mt_5 {
  margin-top: 5px !important;
}

.mt_10 {
  margin-top: 10px !important;
}

.mt_20 {
  margin-top: 20px !important;
}

.ml_5 {
  margin-left: 5px !important;
}

.ml_10 {
  margin-left: 10px !important;
}

.ml_20 {
  margin-left: 20px !important;
}

.ml_25 {
  margin-left: 25px !important;
}

.mb_5 {
  margin-bottom: 5px !important;
}

.mb_10 {
  margin-bottom: 10px !important;
}

.mb_20 {
  margin-bottom: 20px !important;
}

.mb_25 {
  margin-bottom: 25px !important;
}

.mb_30 {
  margin-bottom: 30px !important;
}

.mr_5 {
  margin-right: 5px !important;
}

.mr_10 {
  margin-right: 10px !important;
}

.mr_20 {
  margin-right: 20px !important;
}

.m_center {
  margin: 0 auto;
}

.rem14 {
  font-size: 1.4rem !important;
}

.rem13 {
  font-size: 1.3rem !important;
}

.rem12 {
  font-size: 1.2rem !important;
}

.rem11 {
  font-size: 1.1rem !important;
}

.rem10 {
  font-size: 1rem !important;
}

.rem09 {
  font-size: 0.9rem !important;
}

.rem08 {
  font-size: 0.8rem !important;
}

.rem07 {
  font-size: 0.7rem !important;
}

.rem06 {
  font-size: 0.6rem !important;
}

.rem05 {
  font-size: 0.5rem !important;
}

.lh_10 {
  line-height: 10px !important;
}

.lh_15 {
  line-height: 15px !important;
}

.lh_20 {
  line-height: 20px !important;
}

.lh_25 {
  line-height: 25px !important;
}

.lh_30 {
  line-height: 30px !important;
}

.lh_50 {
  line-height: 50px !important;
}

.fnt_red {
  color: #ff0000 !important;
}

.block {
  display: block;
}

.inblock {
  display: inline-block;
}

.table {
  display: table;
}

.cell {
  display: table-cell;
}

.hide {
  display: none;
}

.v-middle {
  vertical-align: middle;
}

.v-bottom {
  vertical-align: bottom;
}

.v-top {
  vertical-align: top !important;
}

.h-left {
  text-align: left;
}

.h-right {
  text-align: right;
}

.h-center {
  text-align: center;
}

.p_relative {
  position: relative;
}

.bold {
  font-weight: bold;
}

.block_center {
  display: block;
  margin: 0 auto;
}

.block_middle {
  display: block;
  margin: auto 0;
}

.circle32 {
  dislay: table-cell;
  width: 32px;
  height: 32px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: #555;
  border-radius: 15px;
}

.circle24 {
  dislay: table-cell;
  width: 32px;
  height: 32px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: #555;
  border-radius: 15px;
}

.add_btn {
  display: inline-block;
  width: 21px;
  height: 21px;
  background-color: #0e8272;
  border-radius: 10px;
  position: relative;
  border-style: none;
}

.add_btn:before {
  position: absolute;
  content: "+";
  color: white;
  font-size: 1rem;
  font-weight: bold;
  top: -1px;
  left: 4px;
}

.script {
  position: absolute;
  color: white;
  font-weight: bold;
  top: -1px;
  left: 4px;
}

.del_btn {
  width: 21px;
  height: 21px;
  background-color: #888;
  border-radius: 10px;
  position: relative;
  border-style: none;
}

.del_btn:before {
  position: absolute;
  content: "－";
  color: white;
  font-size: 1rem;
  font-weight: bold;
  top: -1px;
  left: 3px;
}

.btn_red {
  min-height: 30px;
  display: inline-block;
  margin: 0 5px 0 5px;
  border-style: none;
  color: white;
  background-color: #8b0000;
  border-radius: 5pt;
  font-size: 0.8rem;
  padding: 2px 5px 2px 5px;
}

.line_dtn {
  line-height: 1.8em;
}

.c-red {
  color: #C74040;
}

.c-green {
  color: rgb(8.5357142857, 110.9642857143, 104.8673469388);
}

.b_shadow1 {
  box-shadow: 1pt 1pt 1pt #ccc;
}

.b_shadow2 {
  box-shadow: 0pt 0pt 5pt #999;
}

.light_gray {
  background-color: rgb(242.25, 242.25, 242.25);
}

img.red {
  -webki-filter: invert(0.7) sepia(1) saturate(10) hue-rotate(330deg);
  filter: invert(0.7) sepia(1) saturate(10) hue-rotate(330deg);
}

img.blue {
  -webki-filter: invert(0.7) sepia(1) saturate(10) hue-rotate(160deg);
  filter: invert(0.7) sepia(1) saturate(10) hue-rotate(160deg);
}

img.green {
  -webki-filter: invert(0.7) sepia(1) saturate(10) hue-rotate(120deg);
  filter: invert(0.7) sepia(1) saturate(10) hue-rotate(120deg);
}

.box_comment_warn {
  font-size: 0.8rem;
  line-height: 1.1rem;
  width: 80%;
  background-color: #FACC88;
  box-shadow: 1px 1px 1px rgba(1, 1, 1, 0.2);
  color: #985C00;
  padding: 10px;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 5px;
}

.border_solid_gray {
  border: 1pt solid #ccc;
}

/* 共通テーブルスタイル1 */
.table_style_dashed {
  margin: 0 auto;
}
.table_style_dashed tr {
  border-bottom: 1pt dashed #ccc;
}
.table_style_dashed th {
  text-align: left;
  line-height: 30px;
  white-space: nowrap;
  color: #555;
}
.table_style_dashed td {
  width: 100%;
  line-height: 20px;
  text-align: left;
  color: #555;
  display: inline-block;
}
.table_style_dashed td padding {
  top: 10px;
  bottom: 10px;
  left: 10px;
}
.table_style_dashed td:after {
  content: "";
  display: block;
  clear: both;
}

/* 共通グレーBOX */
.gray_box {
  background-color: rgb(242.25, 242.25, 242.25);
  box-shadow: 0px 0px 3px #aaa;
  padding: 5px;
  font-size: 0.8rem;
}

/* 共通グレーBOX */
.blue_box {
  background-color: #b3eeff;
  box-shadow: 0px 0px 3px #aaa;
  padding: 5px;
  font-size: 0.8rem;
}

/* 共通 薬局表示エリア */
.pharmacy_box {
  border: 1pt solid #ccc;
  background-color: rgb(242.25, 242.25, 242.25);
  padding: 10px;
  margin-top: 10px;
  box-shadow: 1px 1px 1px rgba(1, 1, 1, 0.2);
}

/* マイ薬局 */
/* 服薬指導利用中 */
.my_pharmacy,
.use_medication_instruction {
  background-color: #77933c;
  color: white;
  padding: 3px;
  margin: 3px;
  font-size: 0.8rem;
  line-height: 0.8rem;
}
.my_pharmacy img,
.use_medication_instruction img {
  width: 16px;
  height: 16px;
}

/* オンライン服薬指導 */
.medication_instruction {
  font-size: 0.8rem;
  line-height: 0.8rem;
  background-color: #00053a;
  color: white;
  padding: 5px;
  margin: 5px;
}

/* かかりつけ薬剤師 */
.kakarituke {
  font-size: 0.8rem;
  line-height: 0.8rem;
  background-color: #4f81bd;
  color: white;
  padding: 5px;
  margin: 5px;
}

/* 処方せん送信 */
.syohosen {
  font-size: 0.8rem;
  line-height: 0.8rem;
  background-color: #c0504d;
  color: white;
  padding: 5px;
  margin: 5px;
}

/* 薬剤師リスト */
.yakuzaisi_list > li {
  background-color: rgb(242.25, 242.25, 242.25);
  border-radius: 5px;
  box-shadow: 1px 1px 1px rgba(1, 1, 1, 0.2);
  padding: 15px;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}
.yakuzaisi_list > li span.name {
  margin-left: 10px;
  display: inline-block;
  width: 50%;
}
.yakuzaisi_list > li:after {
  content: " ";
  display: block;
  clear: both;
}

/* 404エラー */
.not_found {
  background-image: url("../img/bg/404.png");
  height: 200px;
  width: 100%;
  position: relative;
  max-width: 1024px;
}
.not_found p {
  position: absolute;
  top: 30px;
  left: 0px;
  right: 0px;
  margin: auto;
  font-weight: bold;
  font-size: 1.2rem;
  width: 300px;
  height: 30px;
}
.not_found img {
  position: absolute;
  left: 10px;
  bottom: 10px;
}

/* 暗転 */
.wait_shadow {
  opacity: 0.6;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 2;
}

.wait_icon {
  display: block;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

.mfc_modal {
  z-index: 11;
  position: fixed;
  top: 0px;
  background-color: white;
  border: 1pt solid #ccc;
  border-radius: 5px;
  box-shadow: 1px 1px 1px rgba(1, 1, 1, 0.2);
  padding: 10px !important;
  margin: 10px;
  width: 90%;
  height: 90%;
  overflow-y: scroll;
}

.kakarituke_label:before {
  content: "かかりつけ";
  font-size: 0.7rem;
  display: block;
  color: white;
  background-color: #63BCD6;
  padding: 3px;
  width: 60px !important;
  height: 18px;
  line-height: 18px;
}

input,
select,
textarea,
button,
pre,
p {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

input[type=checkbox], input[type=radio] {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-bottom: 5px;
  margin-top: 5px;
}

label {
  display: inline-block;
  font-size: 0.8rem;
}

.required:after {
  display: inline-block;
  content: " (必須)";
  color: red;
  font-size: 0.8rem;
  font-weight: bold;
  vertical-align: middle;
  line-height: 1.4rem;
  height: 1.4rem;
}

/*
dl .narrow dd {
  min-height: 15px !important;
}

dt {
  position: relative;
  color: #666;
  width: 90%;
  font-size: 1.1rem;
  border-bottom: 1pt dashed #ccc;
  margin: 0px 0 5px 0;
}

dt img {
  vertical-align: middle;
  margin-right: 3px;
  width: 32px;
  height: 32px;
}

dd {
  margin: 0 0 0 15px;
  font-size: 0.8rem;
  min-height: 30px;
  margin-bottom: 30px;
}

.dialog_detail dd {
  min-height: 15px;
}

.dialog_detail dt {
  font-weight: bold;
  color: #666;
  margin-bottom: 10px;
}

.dialog_detail dt:before {
  content: " ";
  display: inline-block;
  width: 3px;
  height: 0.8rem;
  background-color: #a0d8ef;
  margin-right: 5px;
}
*/
input[type=text],
input[type=number],
input[type=date],
input[type=time],
input[type=email],
input[type=tel],
input[type=password],
textarea,
select {
  font-size: 0.8rem;
  border-radius: 5pt;
  background-color: #f9f9f9;
  padding: 3px 10px;
  min-height: 30px;
  width: 90%;
  max-width: 300px;
  border: 1pt solid #ccc;
  margin: 0 5px 0 0;
  box-sizing: border-box;
}

input[type=text]:disabled,
input[type=number]:disabled,
input[type=date]:disabled,
input[type=time]:disabled,
input[type=email]:disabled,
textarea:disabled,
select:disabled {
  background-color: #ddd;
  color: #aaa;
  -webkit-text-fill-color: #aaa;
  opacity: 1;
}

input[type=number] {
  text-align: right;
}

.searchbox {
  background-image: url("/img/16x16/search.png");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

/*オートコンプリートの装飾*/
.ui-menu-item {
  font-size: 0.9rem;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.ui-state-focus {
  background-color: #888;
}

.autocomplete {
  background-image: url("/img/16x16/list.png");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

/* 機能メニューヘッダ */
.function_header {
  position: relative;
  width: 100%;
  background-color: rgb(242.25, 242.25, 242.25);
  min-height: 32px;
  border-top: 1pt solid rgb(191.25, 191.25, 191.25);
  padding: 5px 0px 5px 0px;
  box-shadow: 1pt 1pt 1pt rgb(191.25, 191.25, 191.25);
  clear: both;
  color: #555;
}
.function_header .left {
  float: left;
  position: relative;
  margin-left: 5px;
}
.function_header .center {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 33%;
  height: 32px;
  line-height: 32px;
  text-align: center;
}
.function_header .right {
  float: right;
  position: relative;
  margin-right: 5px;
}

/* カラーパターン1(デフォルト青) */
/* 指定用(デフォルト) */
.list_underline {
  margin: 5px 0 5px 0;
}

.list_underline li {
  padding: 5 0 5 0;
  border-bottom: 1pt solid #ccc;
  border-collapse: collapse;
}

.list_underline li:first-child {
  border-top: 1pt solid #ccc;
}

.drug_list_display {
  width: 95%;
  margin: 10px 0 10px 0;
  position: relative;
}

.drug_list_display li {
  padding: 5px 0 5px 10px;
}

.drug_list_display li:not(:last-child) {
  border-bottom: 1pt solid #ccc;
  background-color: #eee;
}

.drug_list_display .close_btn {
  position: absolute;
  top: 50%;
  right: 5px;
  margin: -8px 0 0 0;
}

.drug_name {
  display: inline-block;
  word-break: break-all;
}

.drug_img {
  position: relative;
  height: 32px;
  width: 32px;
  overflow: hidden;
}

.drug_img img {
  width: 48px;
  height: 48px;
  position: absolute;
  top: -8px;
  left: -8px;
}

.ul_sel {
  background-color: #eee;
  padding: 0 5px 0 5px;
  margin-right: 5px;
}

.ul_sel li {
  padding-right: 30px;
  position: relative;
}

.ul_sel li:before {
  position: absolute;
  top: 40%;
  right: 15px;
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #61B4E0;
  border-right: 2px solid #61B4E0;
  transform: rotate(45deg);
}

/* カラーパターン1(デフォルト青) */
/* カラーパターン2(ピンク) */
/* カラーパターン3(緑) */
/* カラーパターン4(灰色) */
/* 指定用(デフォルト) */
.pager_btn_fix {
  position: fixed;
  opacity: 0.5;
  top: 45%;
  height: 100px;
  width: 25px;
  background-color: #333333;
  color: #fff;
  margin: auto 0;
  font-size: 0.7em;
  text-align: center;
  vertical-align: bottom;
  z-index: 999;
}

.pager_btn_fix_l {
  left: 0;
}

.pager_btn_fix_l:before {
  content: "前";
  display: block;
  position: absolute;
  top: 60px;
  left: 5px;
}

.pager_btn_fix_l:after {
  content: " ";
  display: inline-block;
  position: absolute;
  top: 42px;
  left: 7px;
  width: 10;
  height: 10px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(45deg);
}

.pager_btn_fix_r {
  right: 0;
}

.pager_btn_fix_r:before {
  content: "次";
  display: block;
  position: absolute;
  top: 60px;
  left: 7px;
}

.pager_btn_fix_r:after {
  content: " ";
  display: inline-block;
  position: absolute;
  top: 42px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.login_background {
  background-color: #0EB6AC;
  position: relative;
}

.login_form_area {
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 1px 1px 10px #000;
  width: 90%;
  height: 420px;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* カラーパターン1(デフォルト青) */
/* 指定用(デフォルト) */
/* headerここから */
header {
  height: 30px;
}

div.topimg {
  margin: 0 0 0 5px;
  float: left;
  position: absolute;
}

ul.prof {
  margin: 0 5px 0 0;
}

ul.prof li {
  margin: 3px 0 0 0;
  padding: 5px 5px 3px 0;
  font-size: 10pt;
  border-bottom: 1px solid #ccc;
}

/* mainここから */
/* box1 */
#box1 p {
  text-align: right;
  font-weight: bold;
}

#box1 ul {
  width: 90%;
  border-top: 1px solid #ccc;
  margin: 5px 0 10px 20px;
}

#box1 ul li {
  font-size: 0.9rem;
  padding: 8px 0 5px 0;
  border-bottom: 1px dashed #ccc;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

li span.day {
  display: inline-block;
  padding: 0 15px 0 0;
}

.cont {
  margin: 10px 10px;
  border-top: 1px solid #888;
  border-bottom: 1px solid #888;
}

.c_title {
  font-size: 14px;
  font-weight: bold;
  margin: 5px 0 0 15px;
}

.c_box {
  margin: 10px;
}

.c_box p {
  line-height: 1.5;
}

.c_icon {
  width: 35px;
  margin: 0 10px 0 10px;
}

.c_text {
  line-height: 1.5;
}

.c_text p {
  font-size: 0.8rem;
}

.c_text p a {
  color: #1e50a2;
  text-decoration: underline;
}

.c_btn {
  width: 160px;
  font-size: 0.9rem;
  margin: 10px 0 10px 30px;
}

/* mainここまで */
/* メニューボタン */
.menu_btn_table td {
  padding: 3px;
}

.menu_btn_table button {
  display: inline-block;
  text-align: center;
  font-size: 1.2rem;
  cursor: pointer;
  width: 100%;
  height: 70px;
  white-space: nowrap;
  max-width: none;
}

.menu_btn_table img {
  width: 42px;
  height: 42px;
}

.menu_btn_gradient button {
  display: inline-block;
  background: #0eb6ac; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #0EB6AC 0%, rgb(8.5357142857, 110.9642857143, 104.8673469388) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$base-color", endColorstr="$base-color-dark",GradientType=0 ); /* IE6-9 */
  color: white;
  height: 70px;
  border-radius: 5pt;
  font-size: 1.2rem;
  padding: 2px 5px 2px 5px;
}
.menu_btn_gradient button a {
  color: #555;
  text-decoration: none;
}
.menu_btn_gradient button[disabled] {
  color: #eee;
  background: #ccc !important; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ccc 0%, rgb(140.25, 140.25, 140.25) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$gray_btn_color", endColorstr="$gray_btn_dark_color",GradientType=0 ) !important; /* IE6-9 */
}
.menu_btn_gradient button[disabled] img {
  filter: grayscale(100%);
}

.menu_btn_normal button {
  display: inline-block;
  background: #0eb6ac; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #0EB6AC 0%, rgb(8.5357142857, 110.9642857143, 104.8673469388) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$base-color", endColorstr="$base-color-dark",GradientType=0 ); /* IE6-9 */
  color: white;
  height: 70px;
  border-radius: 5pt;
  font-size: 1.2rem;
  padding: 2px 5px 2px 5px;
}
.menu_btn_normal button a {
  color: #555;
  text-decoration: none;
}
.menu_btn_normal button[disabled] {
  color: #eee;
  background: #ccc !important; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ccc 0%, rgb(140.25, 140.25, 140.25) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$gray_btn_color", endColorstr="$gray_btn_dark_color",GradientType=0 ) !important; /* IE6-9 */
}
.menu_btn_normal button[disabled] img {
  filter: grayscale(100%);
}

.menu_btn_skeleton button {
  display: inline-block;
  background: linear-gradient(to bottom, #d8dada 0%, #f1f1f1 22%, #c7c8ca 44%, #e7e8e8 74%, #fdfdfd 100%);
  color: black;
  height: 70px;
  box-shadow: 0px 0px 10px #888;
  border-radius: 5pt;
  font-size: 1.2rem;
  padding: 2px 5px 2px 5px;
}
.menu_btn_skeleton button a {
  color: #555;
  text-decoration: none;
}
.menu_btn_skeleton button[disabled] {
  color: #999;
  filter: brightness(80%) grayscale(70%);
  box-shadow: none;
}

.menu_btn_animal button {
  display: inline-block;
  background: #0EB6AC; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #0EB6AC 0%, rgb(8.5357142857, 110.9642857143, 104.8673469388) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$base-color", endColorstr="$base-color-dark",GradientType=0 ); /* IE6-9 */
  color: white;
  width: 100%;
  height: 70px;
  box-shadow: 0px 0px 10px #ccc;
  border-radius: 5pt;
  font-size: 1.2rem;
  padding: 2px 5px 2px 5px;
}
.menu_btn_animal button a {
  color: #555;
  text-decoration: none;
}
.menu_btn_animal button[disabled] {
  color: #ccc;
  filter: brightness(80%) grayscale(70%);
  box-shadow: none;
}
.menu_btn_animal button[disabled] img {
  filter: saturate(0%);
}

.menu_btn_pop button {
  display: inline-block;
  background: #0EB6AC; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #0EB6AC 0%, rgb(8.5357142857, 110.9642857143, 104.8673469388) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$base-color", endColorstr="$base-color-dark",GradientType=0 ); /* IE6-9 */
  color: white;
  width: 100%;
  height: 70px;
  box-shadow: 0px 0px 10px #ccc;
  border-radius: 5pt;
  font-size: 1.2rem;
  padding: 2px 5px 2px 5px;
}
.menu_btn_pop button a {
  color: #555;
  text-decoration: none;
}
.menu_btn_pop button[disabled] {
  color: #ccc;
  filter: brightness(80%) grayscale(70%);
  box-shadow: none;
}
.menu_btn_pop button[disabled] img {
  filter: saturate(0%);
}

.menu_btn_hamster button {
  display: inline-block;
  background: #0EB6AC; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #0EB6AC 0%, rgb(8.5357142857, 110.9642857143, 104.8673469388) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$base-color", endColorstr="$base-color-dark",GradientType=0 ); /* IE6-9 */
  color: white;
  width: 100%;
  height: 70px;
  box-shadow: 0px 0px 10px #ccc;
  border-radius: 5pt;
  font-size: 1.2rem;
  padding: 2px 5px 2px 5px;
}
.menu_btn_hamster button a {
  color: #555;
  text-decoration: none;
}
.menu_btn_hamster button[disabled] {
  color: #ccc;
  filter: brightness(80%) grayscale(70%);
  box-shadow: none;
}
.menu_btn_hamster button[disabled] img {
  filter: saturate(0%);
}

.img64 {
  width: 64px;
}

.img32 {
  width: 32px;
}

.badge {
  width: 24px;
  height: 24px;
  border-radius: 30px;
  background-color: red;
  color: white;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  left: -5px;
  top: -5px;
  line-height: 26px;
  font-size: 0.9rem;
  z-index: 2;
}

.setting_area {
  background-color: #fafafa;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0pt 0pt 5pt #ccc;
  max-width: 400px;
}

.setting_area strong {
  display: inline-block;
  background-color: white;
  border: 1pt solid #ddd;
  padding: 5px;
}

.image_syoho {
  position: relative;
  float: left;
  padding: 5px;
  background-color: #ccc;
  margin: 5px;
  width: 120px;
}

.image_syoho_del {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 24px;
  height: 24px;
}

ul.family_list li {
  width: 90%;
  border: 1pt solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 0px 0px 10px #ccc;
  color: #555;
}
ul.family_list p {
  display: inline-block;
  margin-left: 10px;
  font-size: 11pt;
  font-weight: bold;
}
ul.family_list img.user_img {
  border: 2pt solid #fff;
  margin: auto;
  width: 48px;
  height: 48px;
  border-radius: 34px;
  box-shadow: 0px 0px 10px #ccc;
}

.result_family {
  height: 30px;
  width: 90%;
  border: 1pt solid #fff;
  border-radius: 5px;
  padding: 10px;
  background-color: #FFCCCC;
  clear: both;
  max-width: 400px;
  box-shadow: 1px 1px 5px #ccc;
}
.result_family p {
  float: left;
  display: inline-block;
  margin-left: 10px;
  font-size: 11pt;
  font-weight: bold;
  line-height: 30px;
}
.result_family button {
  float: right;
  height: 30px;
}

.syonin {
  background-color: #dee;
}

.sinsei {
  background-color: #fdd;
}

.family_user {
  position: relative;
  width: 90px;
  height: 100px;
  text-align: center;
  float: left;
  text-decoration: underline;
  font-weight: bold;
  margin-bottom: 10px;
}
.family_user p {
  display: block;
  margin-top: 5px;
}
.family_user img.sinsei {
  border: 2pt solid #fff;
  box-shadow: 0px 0px 10px #9775AA;
}

dl.menu dt {
  font-size: 1rem;
  color: #666;
  border-style: none;
}
dl.menu dt::before {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("../img/");
}
dl.menu dd {
  background-color: #fafafa;
  padding: 10px;
  border-radius: 5px;
  margin-left: 5px;
  box-shadow: 0pt 0pt 5pt #ccc;
  max-width: 400px;
}
dl.menu button {
  width: 30%;
  height: 60px;
  margin-right: 5px;
  margin-bottom: 5px;
  vertical-align: top;
}
dl.menu button img {
  width: 36px;
  height: 36px;
  display: block;
  margin: 0 auto;
}

ul.menu {
  margin-bottom: 20px;
}
ul.menu .category {
  font-size: 1rem;
  border-style: none;
  background: none;
  box-shadow: none;
  color: #666;
}
ul.menu .category img {
  width: 48px !important;
  height: 48px !important;
}
ul.menu li {
  max-width: 500px;
  font-size: 0.9rem;
  padding: 5px;
  color: white;
  background: #0eb6ac; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #0eb6ac 0%, #429489 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#0eb6ac", endColorstr="#429489",GradientType=0 ); /* IE6-9 */
  box-shadow: 0px 0px 3px #00544e;
  margin-top: 2px;
}
ul.menu li img {
  width: 36px;
  height: 36px;
}

.profile_area {
  background-color: #fafafa;
  box-shadow: 0px 0px 1px #ccc;
  margin-left: 10px;
  margin-right: 10px;
  width: 85%;
}

.profile_list {
  width: 80%;
  margin: 0 auto;
}
.profile_list li {
  border-bottom: 1pt dashed #ccc;
  line-height: 25px;
}
.profile_list li p {
  color: #555;
  display: inline-block;
  width: 30%;
  font-weight: bold;
  white-space: nowrap;
}

/* お薬手帳 お薬の情報 */
.notebook_info {
  width: 95%;
  background-color: rgb(242.25, 242.25, 242.25);
  box-shadow: 0px 2px 5px rgb(6.7142857143, 87.2857142857, 82.4897959184);
  /* ヘッダ */
  /* 各種内容 */
}
.notebook_info .header {
  background-color: #0EB6AC;
  padding: 0px 5px 0px 5px;
  color: white;
  min-height: 32px;
}
.notebook_info .notebook_content p {
  display: block;
  background-color: #0EB6AC;
  font-size: 0.8rem;
  line-height: 20px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
}
.notebook_info .notebook_content p a, .notebook_info .notebook_content p label {
  color: white;
}
.notebook_info .notebook_content ul, .notebook_info .notebook_content dl {
  margin-top: 10px;
  padding-left: 10px;
  font-size: 0.8rem;
}

ul.drug_info {
  margin-left: 5px;
  font-size: 0.8rem;
}
ul.drug_info li {
  padding: 0px 0px 5px 0px;
  line-height: 32px;
  display: block;
  border-bottom: 1pt dashed #ccc;
  color: #666;
}

.store_youho_area {
  background-color: rgb(242.25, 242.25, 242.25);
  border: 1pt solid #eee;
  padding: 5px;
}

.store_drug_input_table {
  border-collapse: collapse;
  margin-top: 5px;
}
.store_drug_input_table th {
  font-weight: bold;
  text-align: left;
  border-bottom: 1pt solid #ccc !important;
}
.store_drug_input_table tr:first-child {
  border-style: none;
}
.store_drug_input_table tr:not(:last-child) {
  border-bottom: 1pt dashed #ccc;
}
.store_drug_input_table td {
  height: 40px;
  vertical-align: middle;
}
.store_drug_input_table td .noborder {
  border-style: none;
}
.store_drug_input_table .incomplete {
  background-color: #ECC0AD;
}

.qr_result_area {
  font-size: 0.9rem;
  padding: 10px;
  background-color: rgb(242.25, 242.25, 242.25);
  border: 1pt dashed #ccc;
  margin: 10px;
}
.qr_result_area .druglist {
  font-size: 0.8rem;
  background-color: white;
  border: 1pt solid #ccc;
  margin: 0px 0px 0px 0px;
  padding: 5px;
}
.qr_result_area .druglist .drug_row:not(:last-child) {
  border-bottom: 1pt solid #ccc;
}
.qr_result_area .druglist .drug_detail {
  margin-top: 5px;
}
.qr_result_area .druglist .drug_detail li:not(:last-child) {
  border-bottom: 1pt dashed #ccc;
}

.sts {
  display: inline-block;
  text-align: center;
  height: 20px;
  min-width: 50px;
  line-height: 20px;
  border-radius: 5pt;
  text-align: center;
  padding: 5px;
  margin: 5px;
  whilte-space: nowrap;
  font-size: 0.7rem;
}

.sts_list {
  display: inline-block;
  text-align: center;
  height: 20px;
  min-width: 50px;
  line-height: 20px;
  border-radius: 5pt;
  text-align: center;
  padding: 3px 5px;
  margin: 5px;
  whilte-space: nowrap;
  font-size: 0.7rem;
}

.sts_yak {
  background-color: #A0D8EF;
}

.sts_yak:before {
  content: "薬局配信";
  line-height: 20px;
}

.sts_qr {
  background-color: #98B954;
}

.sts_qr:before {
  content: "２次元バーコード";
  line-height: 20px;
}

.sts_mnp {
  background-color: #f4a460;
}

.sts_mnp:before {
  content: "マイナポータル取得";
  line-height: 20px;
}

.sts_import {
  background-color: #f5deb3;
}

.sts_import:before {
  content: "インポート";
  line-height: 20px;
}

.sts_hik {
  background-color: #FFDBBF;
}

.sts_hik:before {
  content: "引っ越し";
  line-height: 20px;
}

.sts_son {
  background-color: #A7A7A7;
}

.sts_son:before {
  content: "その他";
  line-height: 20px;
}

.sts_man {
  background-color: #FFCCCB;
}

.sts_man:before {
  content: "手入力";
  line-height: 20px;
}

.sts_yakt {
  background-color: #99D;
}

.sts_yakt:before {
  content: "薬局手入力";
  line-height: 20px;
}

.sts_hard {
  background-color: #61C76E;
}

.sts_hard:before {
  color: white;
  content: "詳細";
  line-height: 20px;
}

.sts_easy {
  background-color: #FBC242;
}

.sts_easy:before {
  color: white;
  content: "かんたん";
  line-height: 20px;
}

.sts_tyozai {
  background-color: #3F7CC5;
}

.sts_tyozai:before {
  color: white;
  content: "調剤";
  line-height: 20px;
}

.sts_kensin {
  color: white;
  background-color: #FF007F;
}
.sts_kensin::before {
  line-height: 20px;
  content: "検診登録";
}

.sts_sihan {
  color: white;
  background-color: #32875C;
}
.sts_sihan::before {
  line-height: 20px;
  content: "市販薬購入";
}

.sts_hukuyaku {
  color: white;
  background-color: #A22041;
}
.sts_hukuyaku::before {
  line-height: 20px;
  content: "服薬記録";
}

.sts_memo {
  color: white;
  background-color: #B3ADA0;
}
.sts_memo::before {
  line-height: 20px;
  content: "メモ";
}

.sts_ippan {
  background-color: #FF7E7B;
}

.sts_ippan:before {
  color: white;
  content: "一般";
  line-height: 20px;
}

.sts_private {
  background-color: #FF952F;
}

.sts_private:before {
  color: white;
  content: "プライベート";
  line-height: 20px;
}

.sts_public {
  background-color: #AAD353;
}

.sts_public:before {
  color: white;
  content: "薬局に公開";
  line-height: 20px;
}

.sts_deleted {
  background-color: #C33;
}

.sts_deleted:before {
  color: white;
  content: "削除済み";
  line-height: 20px;
}

.sts_sche {
  background-color: #F7ADAD;
}

.sts_sche:before {
  content: "予定日";
  line-height: 20px;
}

.sts_kiny {
  background-color: #E6A2ED;
}

.sts_kiny:before {
  content: "記入日";
  line-height: 20px;
}

.sts_daiko {
  background-color: orange;
}
.sts_daiko:before {
  content: "代行入力";
  line-height: 20px;
}

.sts_gaibu {
  background-color: lightgreen;
}
.sts_gaibu:before {
  content: "外部サービス";
  line-height: 20px;
}

/* 掲示版 */
.blackboard {
  background-image: url("../img/bg/blackborad.png");
  color: white;
  /* 掲示版フッタ */
}
.blackboard .wood {
  width: 100%;
  top: -1px;
  background-image: url("../img/bg/wood.PNG");
}
.blackboard .wood img {
  position: absolute;
  top: -30px;
}
.blackboard button.btn_bss {
  color: white;
  border: 2pt solid rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.05);
}
.blackboard button.btn_more {
  border: 2pt solid rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  background-color: #C6821E;
  color: white;
  width: 70%;
  height: 40px;
}
.blackboard .bss_list {
  margin-top: 20px;
  border-bottom: 2pt dashed rgba(255, 255, 255, 0.7);
}
.blackboard .bss_list li {
  padding: 10px;
  border-top: 2pt dashed rgba(255, 255, 255, 0.7);
  position: relative;
  clear: both;
}
.blackboard .bss_list li .hospital_name {
  font-size: 0.7rem;
}
.blackboard .bss_list li .doctor_name {
  font-size: 0.7rem;
}
.blackboard .bss_list li .bss_message {
  padding: 5px;
  border: 2pt solid rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  min-height: 60px;
  line-height: 1.1rem;
  font-size: 0.9rem;
  width: 70%;
}
.blackboard .bss_list li .message_time {
  font-size: 0.8rem;
  text-align: right;
}

/* 一覧 検索条件 */
.notebook_list_joken_area {
  background-color: rgb(242.25, 242.25, 242.25);
  box-shadow: 0px 0px 3px #aaa;
  padding: 5px;
  font-size: 0.8rem;
}
.notebook_list_joken_area .joken_display {
  background-color: #0EB6AC;
  border-radius: 5px;
  padding: 5px;
  display: inline-block;
  color: white;
  margin: 3px;
}

/* 一覧 一覧表示 */
ul.notebook_list_list li {
  background-color: rgb(242.25, 242.25, 242.25);
  border: 1pt solid #ccc;
  border-radius: 5px;
  padding: 10px 5px 10px 5px;
  margin-bottom: 10px;
  font-size: 0.7rem;
  color: #555;
}

/* 検診情報参照 */
/* カレンダー画面 ヘッダ */
.calendar_header {
  width: 100%;
  padding-left: 5px;
  background-color: rgb(242.25, 242.25, 242.25);
  min-height: 32px;
  border-top: 1pt solid rgb(191.25, 191.25, 191.25);
  padding: 5px 0px 5px 0px;
  box-shadow: 1pt 1pt 1pt rgb(191.25, 191.25, 191.25);
  clear: both;
  line-height: 32px;
}

/* カレンダー画面 月表示 */
.calendar {
  font-size: 0.8rem;
  width: 100%;
  border-collapse: collapse;
}
.calendar th {
  height: 20px;
  font-size: 0.8rem;
  font-weight: nomal !important;
  color: #555;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1pt solid #ccc;
}
.calendar th:first-child {
  color: #D46A6A !important;
}
.calendar th:last-child {
  color: #7688A9 !important;
}
.calendar tr > td {
  position: relative;
  font-size: 0.7rem;
  height: 65px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1pt solid #ccc;
}
.calendar tr > td:first-child {
  color: #D46A6A;
}
.calendar tr > td:last-child {
  color: #7688A9;
}
.calendar tr > td:nth-child(even) {
  background-color: rgb(242.25, 242.25, 242.25);
}
.calendar tr > td.selected {
  background-color: #A6B5CB !important;
  color: white;
  font-weight: bold;
}
.calendar tr > td.current {
  font-weight: bold;
  background-color: #FFF8CC;
}
.calendar tr > td.disabled {
  background-color: #ddd !important;
  border-right: 1pt solid #ccc;
}
.calendar tr > td.disabled .date_label {
  color: #aaa !important;
}
.calendar .date_label {
  display: block;
  padding-top: 2px;
  padding-left: 2px;
  width: 20px;
  height: 20px;
  font-size: 0.8rem;
  text-align: left;
}
.calendar .schedule_icon {
  position: absolute;
  right: 0px;
  top: 0px;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 16px;
  background-color: #2992c8;
}
.calendar .schedule_icon:after {
  display: block;
  content: " ";
  margin-top: 2px;
  margin-left: 1px;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-image: url("/img/white/schedule.png");
}
.calendar .nondayo_icon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  width: 32px;
  height: 32px;
  margin: auto;
  background-size: contain;
  background-image: url("/img/cmn/hanamaru.png");
}
.calendar .icon_area {
  padding-left: 1px;
  padding-right: 1px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
}
.calendar tr > td.hukuyaku.first:before {
  padding-left: 3px;
  content: "服薬アラーム" !important;
  z-index: 1;
  min-width: 100px;
}
.calendar tr > td.hukuyaku:before {
  content: "";
  color: rgb(8.5357142857, 110.9642857143, 104.8673469388);
  display: block;
  position: absolute;
  top: 20px;
  line-height: 16px;
  width: 100%;
  height: 14px;
  border-top: 3pt solid #0EB6AC;
}

/* カレンダー画面 ポップアップ表示 */
.calendar_popup_menu {
  position: absolute;
  background-color: white;
  display: none;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 130px;
  box-shadow: 0px 0px 5px black;
  z-index: 100;
}
.calendar_popup_menu li {
  padding: 5px;
  height: 30px;
  border-bottom: 1pt solid rgb(242.25, 242.25, 242.25);
  font-size: 0.9rem;
  line-height: 30px;
}
.calendar_popup_menu li a {
  display: block;
  margin-bottom: 20px;
}

/* 1日カレンダー */
.schedule_add_button {
  position: absolute;
  bottom: 40px;
  right: 10px;
}

/* jQuery UI DatePicker */
.ui-datepicker {
  width: 290px;
  height: 290px;
}

.ui-widget-content {
  border: 1px solid #ccc;
  background: rgb(242.25, 242.25, 242.25);
  color: #555;
}
.ui-widget-content a {
  color: #555;
  font-size: 1rem;
}

.ui-widget-header {
  border: 1px solid rgb(8.5357142857, 110.9642857143, 104.8673469388);
  background: #0EB6AC;
  color: white;
  font-weight: bold;
}
.ui-widget-header a {
  color: white;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border-style: none;
  font-weight: normal;
  color: rgb(8.5357142857, 110.9642857143, 104.8673469388);
  padding: 10px;
  font-size: 0.9rem;
  text-align: center;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
  background: white;
  color: black;
  text-decoration: none;
}

.ui-datepicker-today a {
  color: white;
}

/* 手帳受取り 薬局 */
.hakko_box {
  width: 90%;
  border: 1pt solid #ccc;
  background-color: rgb(242.25, 242.25, 242.25);
  padding: 10px;
  margin-left: 10px;
  box-shadow: 1px 1px 1px rgba(1, 1, 1, 0.2);
}
.hakko_box .my_pharmacy,
.hakko_box .use_medication_instruction {
  background-color: #77933c;
  color: white;
  padding: 3px;
}
.hakko_box .my_pharmacy img,
.hakko_box .use_medication_instruction img {
  width: 16px;
  height: 16px;
}

.generic:before {
  content: "";
  background-color: #0EB6AC;
  border-radius: 10px 0px 0px 10px;
  width: 20px;
  height: 10px;
}

.find_drug_result_list {
  width: 100%;
  padding: 10px;
}
.find_drug_result_list li {
  display: table;
  width: 100%;
}
.find_drug_result_list li img {
  display: block;
  float: left;
  width: 48px;
}
.find_drug_result_list li a {
  display: block;
  float: left;
  font-size: 0.8rem;
  line-height: 36px;
  text-align: left;
  vertical-align: middle;
}
.find_drug_result_list li .generic {
  display: block;
  float: right;
  background-color: #0EB6AC;
  font-size: 0.7rem;
  color: white;
  padding: 3px;
  width: 70px;
  height: 1rem;
}

.find_sihan_result_list {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  font-size: 0.8rem;
}
.find_sihan_result_list th {
  font-size: 0.9rem;
  text-align: center;
}
.find_sihan_result_list img {
  height: 48px;
  margin-right: 10px;
}
.find_sihan_result_list a {
  font-size: 0.8rem;
  line-height: 36px;
  text-align: left;
  vertical-align: middle;
}

.drug_detail_list {
  font-size: 0.8rem;
  width: 100%;
}
.drug_detail_list th {
  background-color: rgb(8.5357142857, 110.9642857143, 104.8673469388);
  color: white;
  padding: 5px;
  white-space: nowrap;
}
.drug_detail_list td {
  color: #555;
  padding: 5px;
  border-bottom: 1pt solid #ccc;
}
.drug_detail_list tr:nth-child(odd) {
  background-color: rgb(242.25, 242.25, 242.25);
}

.drug_detail dd {
  line-height: 1rem;
}

.shortcut_box {
  border: 1pt solid #ccc;
  padding: 10px;
  margin: 10px;
}
.shortcut_box:after {
  display: block;
  content: "";
  clear: both;
}
.shortcut_box li {
  font-size: 0.8rem;
  float: left;
  white-space: nowrap;
  margin: 10px;
}

.sitei_iyakuhin {
  display: block;
  float: right;
  background-color: #0EB6AC;
  font-size: 0.8rem;
  color: white;
  padding: 3px;
  height: 1rem;
  line-height: 1.1rem;
}

.my_profile_auth_key {
  border: 1pt solid #ccc;
  padding: 5px;
}

.my_profile_edit_kiou {
  margin-left: 10px;
  font-size: 0.8rem;
}
.my_profile_edit_kiou > li {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
}
.my_profile_edit_kiou > li p {
  font-size: 0.8rem;
}
.my_profile_edit_kiou > li:nth-child(odd) {
  background-color: rgb(242.25, 242.25, 242.25);
}
.my_profile_edit_kiou > li > h3 {
  border-bottom: 1pt solid #0EB6AC;
  margin-bottom: 10px;
  font-size: 0.9rem;
  font-weight: bold;
}
.my_profile_edit_kiou .sublist {
  margin-left: 10px;
}
.my_profile_edit_kiou .sublist li {
  display: table;
  padding-bottom: 10px;
  border-top: 1pt dashed #ccc;
  padding-top: 10px;
}
.my_profile_edit_kiou .sublist li > div {
  display: table-cell;
}

.kakaritukeImg {
  border: 2pt solid #fff;
  border-radius: 100px;
  border: 1pt solid rgba(255, 255, 255, 0.8);
  width: 48px;
  height: 48px;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 0px 10px #ccc;
  margin: 0 auto;
}

.kakaritukeImg img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

.cooperateConfirmArea {
  width: 90%;
  height: 480px;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.cooperateConfirmArea .confirmForm {
  margin: 0 auto;
  max-width: 600px;
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 1px 1px 10px #000;
}

/* 新着情報　SCSS */
.news_list {
  min-height: 70%;
}
.news_list li {
  border-bottom: 1pt solid rgb(191.25, 191.25, 191.25);
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
}
.news_list li .news_header {
  font-weight: bold;
}
.news_list li .news_header img {
  float: right;
  width: 24px;
}
.news_list li .news_header:after {
  content: "";
  display: block;
  clear: both;
}
.news_list li .news_title {
  font-size: 0.9rem;
  font-weight: bold;
  color: #999;
  border-bottom: 1pt dashed #ccc;
  margin-bottom: 10px;
}
.news_list li .news_title img {
  width: 24px;
}
.news_list li .news_content {
  margin-left: 10px;
  margin-bottom: 10px;
  line-height: 1.2rem;
}
.news_list li.midoku {
  background-color: #fdd;
}
.news_list li.midoku .news_title {
  color: black;
}

/******************************
 * 共通
 ******************************/
h3 img {
  margin-right: 5px;
}

.font_gray {
  color: gray;
}

.graph_label,
.sub_label {
  border-bottom: solid 1px #aaa;
  padding: 0px 2px;
}

.sub_label {
  width: 70px;
}

.scroll {
  overflow-y: scroll;
}

.modal_content {
  height: 95%;
}

.inspection_item_graph_area {
  width: auto;
  height: 130px;
}

/*------- 選択テーブル -------*/
.selectTable {
  border-spacing: 0;
}
.selectTable .body { /* bodyは1px上げる */
  margin-top: -1px;
}
.selectTable th {
  border: #aaa 1px solid;
  border-collapse: collapse;
}
.selectTable tr.disabled td {
  cursor: auto;
  background-color: gainsboro;
}
.selectTable td {
  padding: 12px 0px;
  cursor: pointer;
  border-collapse: collapse;
  font-size: 1.1em;
  border-left: #aaa 1px solid;
  border-right: #aaa 1px solid;
  border-bottom: #aaa 1px dotted;
  text-align: center;
}
.selectTable tr:first-child td {
  border-top: #aaa 1px solid;
}
.selectTable tr:last-child td {
  border-bottom: #aaa 1px solid;
}
.selectTable .disabled td {
  cursor: auto;
  background-color: gainsboro;
}
.selectTable .selected {
  background-color: #fbffc4;
}

/******************************
 * 健康管理TOP
 ******************************/
#health_care_information {
  display: none;
}

.img_example_area {
  text-align: center;
}
.img_example_area img {
  width: 40px;
  height: auto;
}
.img_example_area .current {
  background-color: yellow;
  border-radius: 10pt;
  padding: 3px 0px 3px 5px;
}

.health_care_area {
  background-color: #fafafa;
  box-shadow: 0px 0px 1px #ccc;
  margin-left: 10px;
  margin-right: 10px;
  width: 90%;
}

.health_care_list {
  width: 48%;
  margin: 0 auto;
}
.health_care_list li {
  border-bottom: 1pt dashed #ccc;
  height: 25px;
  line-height: 25px;
  white-space: nowrap;
}
.health_care_list li p {
  color: #555;
  display: inline-block;
  width: 40%;
  font-weight: bold;
  white-space: nowrap;
}

.risk_area {
  margin-top: 0px;
}
.risk_area .balloon_arrow {
  position: relative;
  top: -2px;
  left: -4px;
  text-align: center;
  color: #aaa;
  z-index: 1;
}
.risk_area .risk_list {
  position: relative;
  display: inline;
  text-align: center;
  background-color: #eee;
  border: solid 1px #aaa;
  border-radius: 15pt;
  padding: 20px 5px;
  z-index: 2;
}
.risk_area .risk_list img {
  margin: 0px 5px;
  width: 50px;
  height: auto;
}

#medication_calendar_graph {
  width: auto;
  height: 150px;
}

.flot-x-axis div {
  white-space: nowrap !important;
}

#health_care_menu dt {
  font-size: 1rem;
  color: #666;
  border-style: none;
}
#health_care_menu dt::before {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("../img/");
}
#health_care_menu dd {
  padding: 10px 0px;
  margin-left: 0px;
  max-width: 400px;
}
#health_care_menu button {
  width: 18.5%;
  height: 60px;
  margin-right: 1px;
  margin-bottom: 5px;
  vertical-align: top;
  font-size: 0.8rem;
  padding: 0px;
}
#health_care_menu button:last-child {
  margin-right: 0px;
}
#health_care_menu button[disabled] {
  color: white !important;
  height: 60px;
  background: #ccc !important;
  background: linear-gradient(to bottom, #ccc 0%, #8c8c8c 100%) !important;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$gray_btn_color", endColorstr="$gray_btn_dark_color",GradientType=0 ) !important;
  font-size: 0.8rem;
  padding: 0px;
}
#health_care_menu button[disabled]:last-child {
  margin-right: 0px;
}
#health_care_menu button img {
  width: 28px;
  height: 28px;
  display: block;
  margin: 0 auto;
}

.health_care_info_icon {
  float: right;
  border-radius: 5px;
}

.bmi_icon_legend > li {
  display: inline-block;
}
.bmi_icon_legend > li img {
  width: 48px;
  height: 48px;
}

.body_icon_legend > li {
  display: inline-block;
}
.body_icon_legend > li img {
  width: 50px;
  height: 50px;
}

.heart_icon_legend > li {
  display: inline-block;
}
.heart_icon_legend > li img {
  width: 40px;
  height: 40px;
}

.liver_icon_legend > li {
  display: inline-block;
}
.liver_icon_legend > li img {
  width: 40px;
  height: 40px;
}

.kidney_icon_legend > li {
  display: inline-block;
}
.kidney_icon_legend > li img {
  width: 40px;
  height: 40px;
}

/******************************
 * 健康ビューア
 ******************************/
#graph_unit button {
  min-height: 0px;
}

#base_date {
  font-size: 12pt;
  color: #2c4867;
}

#add_drug_modal {
  height: 100%;
}
#add_drug_modal .health_care_list_button span {
  text-align: left;
  min-width: 90%;
  display: inline-block;
}
#add_drug_modal #addMedicationList {
  height: 59%;
}
#add_drug_modal .modal_info {
  padding: 10px 20px;
  line-height: 1.5em;
}
#add_drug_modal .modal_control_btn {
  text-align: center;
}
#add_drug_modal .decision_btn {
  width: 50%;
  padding: 5px;
  margin-bottom: 10px;
}

#add_graph_modal {
  height: 100%;
}
#add_graph_modal #selectInspectionCategory button {
  width: 18%;
  min-height: 38px;
}
#add_graph_modal #addGraphInspectionList {
  height: 48%;
}
#add_graph_modal .health_care_list_button span {
  min-width: 25%;
  display: inline-block;
}
#add_graph_modal .modal_info {
  padding: 5px 20px;
  line-height: 1.5em;
}
#add_graph_modal .modal_control_btn {
  text-align: center;
}
#add_graph_modal .decision_btn {
  width: 50%;
  padding: 5px;
  margin-bottom: 10px;
}
#add_graph_modal .search_btn {
  height: 28px;
}

#health_care_information_content .modal_info {
  padding: 5px 15px;
  line-height: 1.5em;
}

.health_care_list_button {
  padding: 10px 5px;
}

.health_care_btn_list {
  text-align: center;
}
.health_care_btn_list button, .health_care_btn_list div {
  margin-bottom: 3px;
  background: rgb(242, 245, 246); /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgb(242, 245, 246) 0%, rgb(227, 234, 237) 37%, rgb(200, 215, 220) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f2f5f6", endColorstr="#c8d7dc",GradientType=0 ); /* IE6-9 */
  color: #555;
  border: 1pt solid rgb(168.8333333333, 192.3333333333, 200.1666666667);
  border-radius: 10px;
  padding: 5px;
  font-size: 0.9rem;
}
.health_care_btn_list button.selected, .health_care_btn_list div.selected {
  background: #fbffc4; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #fbffc4 0%, #ffd933 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fbffc4", endColorstr="#ffd933",GradientType=0 ); /* IE6-9 */
  color: #555;
  font-weight: bold;
  border: 1pt solid rgb(247.5423728814, 255, 145);
}

.display_legend_btn,
.today_btn {
  height: 36px;
}

#graph_pre_btn,
#graph_next_btn {
  position: absolute;
  height: 80px;
  top: 267px;
  z-index: 2;
}

#graph_pre_btn {
  left: 4px;
}

#graph_next_btn {
  right: 2px;
}

.graph_area {
  padding: 0px 12px 0px 0px;
}

#medication_calendar_legend {
  display: none;
  margin: 5px 15px 5px 20px;
  padding: 10px 10px 10px 25px;
  border: solid 1px rgb(8.5357142857, 110.9642857143, 104.8673469388);
  border-radius: 5pt;
  width: auto;
  background-color: #fafafa;
  line-height: 20px;
  box-shadow: 1px 1px 4px 0px #aaa;
}
#medication_calendar_legend td {
  padding: 2px;
  vertical-align: middle;
}

/******************************
 * 検診比較
 ******************************/
.edit_icon {
  margin-top: -4px;
}

table.examination_table {
  border: 1px solid #666;
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}
table.examination_table tr.warning_value td {
  background-color: #fbffc4;
}
table.examination_table th,
table.examination_table td {
  padding: 10px 5px;
  vertical-align: middle;
  text-align: center;
  border-bottom: 1px solid #666;
  height: 30px;
}
table.examination_table th {
  background-color: #eee;
  width: 25%;
}
table.examination_table td {
  border-left: 1px solid #666;
  font-size: 20px;
  width: auto;
}
table.examination_table td .standard_value {
  font-size: 10pt;
  font-weight: bold;
}
table.examination_table tr:first-child th,
table.examination_table tr:first-child td {
  font-size: 11pt;
  background-color: #eee;
  height: 20px;
  vertical-align: middle;
  text-align: center;
  border-bottom: 1px solid #666;
  padding: 5px 10px;
}
table.examination_table tr:last-child th,
table.examination_table tr:last-child td {
  border-bottom: none;
}

#examination_select_modal {
  height: 100%;
}
#examination_select_modal #selectYear {
  width: 80px;
}
#examination_select_modal #selectMonth {
  width: 60px;
}
#examination_select_modal .health_care_btn_list {
  height: 50%;
}
#examination_select_modal .health_care_list_button img {
  margin-left: 18px;
}
#examination_select_modal .health_care_list_button span {
  min-width: 35%;
  display: inline-block;
}
#examination_select_modal .modal_info {
  padding: 10px 20px;
  line-height: 1.5em;
}
#examination_select_modal .modal_control_btn {
  text-align: center;
}
#examination_select_modal .decision_btn {
  width: 40%;
  padding: 5px;
}

/******************************
 * 検診結果登録
 ******************************/
table.examination_form {
  border: 1px solid #666;
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}
table.examination_form tr.warning_value td {
  background-color: #fbffc4;
}
table.examination_form th,
table.examination_form td {
  vertical-align: middle;
  font-size: 0.9rem;
  border-bottom: 1px solid #666;
  height: 30px;
}
table.examination_form th {
  padding: 10px 5px;
  background-color: #eee;
  text-align: center;
  width: 28%;
}
table.examination_form td {
  padding: 10px;
  border-left: 1px solid #666;
  text-align: left;
}
table.examination_form td input[type=number] {
  width: 70%;
}
table.examination_form td input[type=number]:read-only {
  background-color: #dddddd;
}
table.examination_form tr:last-child th,
table.examination_form tr:last-child td {
  border-bottom: none;
}

#examinationDeleteBtn {
  margin-top: -4px;
}

.examination_form_content {
  margin: 0 5px 0 5px;
  min-height: 420px;
  padding: 5px;
  box-sizing: border-box;
}

td.time_cell select {
  width: 51px;
  margin-right: 0px;
  padding: 3px 5px;
}

#add_inspection_item_modal .health_care_list_button span {
  display: inline-block;
  word-wrap: break-word;
  white-space: normal;
}
#add_inspection_item_modal .health_care_list_button span.entered_item::after {
  content: "入力済";
  font-size: 10pt;
  padding: 2px 2px 0px 2px;
  color: #ba2636;
  border: solid 2px #ba2636;
  border-radius: 5pt;
}
#add_inspection_item_modal .modal_control_btn {
  text-align: center;
}
#add_inspection_item_modal .decision_btn {
  width: 50%;
  padding: 5px;
}

#add_examination_item,
.input_commit_btn {
  display: none;
}

#search_inspection_item_area {
  display: none;
}

#inspection_item_list {
  height: calc(100vh - 330px);
  max-height: 400px;
  border-top: 1pt solid #ccc;
  border-bottom: 1pt solid #ccc;
  padding-top: 10px;
  padding-bottom: 10px;
}
#inspection_item_list .health_care_list_button {
  display: none;
}

/**
 * 服薬フォロー連絡画面用
 */
.follow_message_date {
  border-radius: 20px;
  width: 100px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.4);
}

#follow_contact_area {
  color: white;
  background-color: rgb(230, 241, 255);
  /**
      background: -moz-linear-gradient(top, #FFF, #B4C7E7);
      background: -webkit-linear-gradient(top, #FFF, #B4C7E7);
      background: linear-gradient(to bottom, #FFF, #B4C7E7);
    */
}

.follow_sender_img {
  float: left;
  border: 2pt solid #ccc;
  border-radius: 100px;
  border: 1pt solid rgba(255, 255, 255, 0.8);
  width: 32px;
  height: 32px;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 0px 10px #ccc;
  margin-left: 10px;
  background-color: #fff;
}

.follow_sender_img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

.follow_sender_message {
  float: left;
  margin-left: 12px;
  padding: 10px;
  max-width: 61%;
  border: 2pt solid #ccc;
  border-radius: 10px;
  background-color: #fff;
  position: relative;
}

.follow_sender_message:before,
.follow_sender_message:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin: auto;
}

.follow_sender_message:before {
  left: -14px;
  border-style: solid;
  border-color: transparent #ccc transparent transparent;
  border-width: 0 15px 19px 0;
}

.follow_sender_message:after {
  top: 12px;
  left: -9px;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  border-width: 0 11px 13px 0;
  z-index: 1;
}

.follow_sender_message .message_body {
  color: #333;
  font-size: 13pt;
}
.follow_sender_message .message_body img {
  border-radius: 5px;
}

.follow_sender_status {
  padding: 5px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 8pt;
  position: absolute;
  bottom: -5px;
  right: -40px;
}

.follow_sender_status div {
  height: 11px;
}

.follow_receiver_img {
  float: right;
  border: 2pt solid #ccc;
  border-radius: 100px;
  border: 1pt solid rgba(255, 255, 255, 0.8);
  width: 32px;
  height: 32px;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 0px 10px #ccc;
  margin-right: 10px;
  background-color: #fff;
}

.follow_receiver_img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

.follow_receiver_message {
  float: right;
  margin-right: 10px;
  padding: 10px;
  max-width: 40%;
  border: 2pt solid #00b500;
  border-radius: 10px;
  background-color: #00b500;
  position: relative;
}
.follow_receiver_message .message_body {
  color: #fafafa;
  font-size: 12pt;
}
.follow_receiver_message .message_body img {
  border-radius: 5px;
}

.follow_receiver_message:after {
  content: "";
  position: absolute;
  top: 10px;
  right: -19px;
  border: 8px solid transparent;
  border-left: 16px solid #00b500;
  transform: rotate(-21deg);
}

.follow_receiver_status {
  text-align: right;
  padding: 5px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 8pt;
  position: absolute;
  width: 70px;
  bottom: -8px;
  left: -80px;
}

.follow_receiver_status div {
  height: 12px;
}

.detail_medication {
  font-size: 11pt;
}

#detail_medication_modal {
  display: none;
  position: fixed;
  top: 20px;
  left: 0px;
  margin: 2%;
  width: 96%;
  height: auto;
  background-color: white;
  z-index: 9;
  border-radius: 15px;
  text-align: center;
}

.answer_alternative {
  display: inline;
  background-color: #eee;
  border-radius: 5px;
  border: solid 1px rgba(0, 0, 0, 0.4);
}

#detail_medication_information, #confirmAnswer {
  display: none;
}

#answerArea img {
  max-height: 100px;
}

.multi_select_btn {
  background: #f2f5f6;
  background: linear-gradient(to bottom, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f2f5f6", endColorstr="#c8d7dc",GradientType=0 );
  color: #555;
  border: 1pt solid #a9c0c8;
  border-radius: 10px;
  font-size: 0.9rem;
}

.multi_select_btn.selected {
  background: #fbffc4;
  background: linear-gradient(to bottom, #fbffc4 0%, #ffd933 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fbffc4", endColorstr="#ffd933",GradientType=0 );
  color: #555;
  font-weight: bold;
  border: 1pt solid #f8ff91;
}

/* 
 * 新着情報画面
 */
ul#member_list {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
ul#member_list > li {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
ul#member_list > li > a {
  display: block;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
}

.talkMemberWrap {
  position: relative;
  display: flex;
  width: 100%;
  margin: 10px 0px;
}
.talkMemberWrap > div {
  float: left;
  box-sizing: border-box;
}
.talkMemberWrap::after {
  content: "";
  display: block;
  clear: both;
}
.talkMemberWrap .iconWrap {
  position: relative;
  flex: none;
  width: 80px;
  height: 80px;
  padding: 10px;
}
.talkMemberWrap .iconWrap .badge {
  top: 5px;
  left: 5px;
  z-index: 20;
}
.talkMemberWrap .iconWrap .talkMemberIcon {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.talkMemberWrap .iconWrap .talkMemberIcon img {
  position: relative;
  z-index: 10;
  top: 50%;
  left: 50%;
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}
.talkMemberWrap .iconWrap .talkMemberIcon .iconBackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: #0EB6AC;
  opacity: 0.5;
}
.talkMemberWrap .dataWrap {
  flex: auto;
  position: relative;
  padding-left: 10px;
}
.talkMemberWrap .dataWrap .talkMemberName {
  position: absolute;
  top: 35%;
  font-weight: bold;
  font-size: 1rem;
}
.talkMemberWrap .dataWrap .talkMemberLatestTimestamp {
  position: absolute;
  top: 5px;
  right: 15px;
}

/* 
 * タイムライン画面
 */
body.talkroom_body {
  overflow: hidden;
}

.content.content_timeline {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding-top: 0;
  padding-bottom: 30px;
  padding-left: 0;
  padding-right: 0;
  background-color: rgb(230, 241, 255);
  /*
  * 追加読み込み背景色設定系
  */
  /*
   * 処方せん送信画像サムネイル系
   */
}
.content.content_timeline .timeline_node {
  flex-grow: 1;
}
.content.content_timeline .icon_img_background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: #0EB6AC;
  opacity: 0.5;
}
.content.content_timeline .follow_sender_message.speech_bubble_message {
  max-width: 61%;
}
.content.content_timeline .follow_receiver_message.speech_bubble_message {
  max-width: 61%;
  background-color: #6DE67C;
  border-color: #6DE67C;
}
.content.content_timeline .follow_receiver_message.speech_bubble_message .message_body {
  color: #000000;
}
.content.content_timeline .follow_receiver_message.speech_bubble_message::after {
  border-left: 16px solid #6DE67C;
}
.content.content_timeline .follow_receiver_img {
  width: 0;
  height: 0;
  border-color: rgb(230, 241, 255);
}
.content.content_timeline .speech_bubble_message.newLoad {
  background: #ffe593;
  transition: 0.8s;
}
.content.content_timeline .speech_bubble_message.newLoad::after {
  transition: 0.8s;
}
.content.content_timeline .speech_bubble_message.follow_sender_message.newLoad::after {
  border-color: transparent #ffe593 transparent transparent;
}
.content.content_timeline .speech_bubble_message.follow_receiver_message.newLoad::after {
  border-left: 16px solid #ffe593;
}
.content.content_timeline .speech_bubble_message,
.content.content_timeline .speech_bubble_message::after {
  transition: 0.8s;
}
.content.content_timeline .speech_bubble_message .prescriptionImagesContainer {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* スマホ版のHTML構造の場合の書式補正 */
}
.content.content_timeline .speech_bubble_message .prescriptionImagesContainer a > .imageArea {
  width: fit-content;
  height: fit-content;
}
.content.content_timeline .speech_bubble_message .prescriptionImagesContainer .imageArea {
  position: relative;
  display: inline-block;
  width: 25%;
  height: fit-content;
  padding: 10px;
  margin: 10px;
  background-color: #ddd;
  transition: 0.8s;
}
.content.content_timeline .speech_bubble_message .prescriptionImagesContainer .imageArea .expansionImageBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  display: block;
  font-size: 11pt;
  opacity: 1;
}
.content.content_timeline .speech_bubble_message .prescriptionImagesContainer .imageArea .prescriptionImage {
  max-width: 100%;
  max-height: auto;
  transition: 0.8s;
}
.content.content_timeline .speech_bubble_message .prescriptionImagesContainer .imageArea.zoomed {
  width: 100%;
  height: fit-content;
}
.content.content_timeline .speech_bubble_message .prescriptionImagesContainer .imageArea.zoomed .prescriptionImage {
  max-width: 100%;
  max-height: 100%;
}
.content.content_timeline footer {
  position: absolute !important;
  top: unset !important;
  bottom: 0px !important;
  width: 100%;
}