@charset "UTF-8";
html {
  -webkit-overflow-scrolling: touch; }

body {
  line-height: 1;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  word-break: break-all;
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "Meiryo", sans-serif;
  color: #303030;
  /*
  // iPad対策 トップのみ付与するため
  // styleにして追加
  position                 : fixed;
  width                    : 100%;
  height                   : 100%;
  */ }

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0; }

p {
  margin: 0;
  padding: 0; }

img {
  border: 0; }

a {
  text-decoration: none; }

address {
  font-style: normal; }

.clearfix:after {
  clear: both;
  content: '';
  display: block; }

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

.cropper-view-box,
.cropper-face {
  border-radius: 50%;
  cursor: grab;
  outline: initial; }

.cropper-face:active {
  cursor: grabbing; }

.dataTable tbody tr:hover {
  background-color: #fbf7c8 !important; }

.dataTable tbody tr:hover > .sorting_1 {
  background-color: #fbf7c8 !important; }

.mt4 {
  margin-top: 4px; }

.ml4 {
  margin-left: 4px; }

.mr4 {
  margin-right: 4px; }

.mb4 {
  margin-bottom: 4px; }

.pt4 {
  padding-top: 4px; }

.pl4 {
  padding-left: 4px; }

.pr4 {
  padding-right: 4px; }

.pb4 {
  padding-bottom: 4px; }

.mt8 {
  margin-top: 8px; }

.ml8 {
  margin-left: 8px; }

.mr8 {
  margin-right: 8px; }

.mb8 {
  margin-bottom: 8px; }

.pt8 {
  padding-top: 8px; }

.pl8 {
  padding-left: 8px; }

.pr8 {
  padding-right: 8px; }

.pb8 {
  padding-bottom: 8px; }

.mt12 {
  margin-top: 12px; }

.ml12 {
  margin-left: 12px; }

.mr12 {
  margin-right: 12px; }

.mb12 {
  margin-bottom: 12px; }

.pt12 {
  padding-top: 12px; }

.pl12 {
  padding-left: 12px; }

.pr12 {
  padding-right: 12px; }

.pb12 {
  padding-bottom: 12px; }

.mt16 {
  margin-top: 16px; }

.ml16 {
  margin-left: 16px; }

.mr16 {
  margin-right: 16px; }

.mb16 {
  margin-bottom: 16px; }

.pt16 {
  padding-top: 16px; }

.pl16 {
  padding-left: 16px; }

.pr16 {
  padding-right: 16px; }

.pb16 {
  padding-bottom: 16px; }

.mt20 {
  margin-top: 20px; }

.ml20 {
  margin-left: 20px; }

.mr20 {
  margin-right: 20px; }

.mb20 {
  margin-bottom: 20px; }

.pt20 {
  padding-top: 20px; }

.pl20 {
  padding-left: 20px; }

.pr20 {
  padding-right: 20px; }

.pb20 {
  padding-bottom: 20px; }

.mt24 {
  margin-top: 24px; }

.ml24 {
  margin-left: 24px; }

.mr24 {
  margin-right: 24px; }

.mb24 {
  margin-bottom: 24px; }

.pt24 {
  padding-top: 24px; }

.pl24 {
  padding-left: 24px; }

.pr24 {
  padding-right: 24px; }

.pb24 {
  padding-bottom: 24px; }

.mt28 {
  margin-top: 28px; }

.ml28 {
  margin-left: 28px; }

.mr28 {
  margin-right: 28px; }

.mb28 {
  margin-bottom: 28px; }

.pt28 {
  padding-top: 28px; }

.pl28 {
  padding-left: 28px; }

.pr28 {
  padding-right: 28px; }

.pb28 {
  padding-bottom: 28px; }

.mt32 {
  margin-top: 32px; }

.ml32 {
  margin-left: 32px; }

.mr32 {
  margin-right: 32px; }

.mb32 {
  margin-bottom: 32px; }

.pt32 {
  padding-top: 32px; }

.pl32 {
  padding-left: 32px; }

.pr32 {
  padding-right: 32px; }

.pb32 {
  padding-bottom: 32px; }

.mt36 {
  margin-top: 36px; }

.ml36 {
  margin-left: 36px; }

.mr36 {
  margin-right: 36px; }

.mb36 {
  margin-bottom: 36px; }

.pt36 {
  padding-top: 36px; }

.pl36 {
  padding-left: 36px; }

.pr36 {
  padding-right: 36px; }

.pb36 {
  padding-bottom: 36px; }

.mt40 {
  margin-top: 40px; }

.ml40 {
  margin-left: 40px; }

.mr40 {
  margin-right: 40px; }

.mb40 {
  margin-bottom: 40px; }

.pt40 {
  padding-top: 40px; }

.pl40 {
  padding-left: 40px; }

.pr40 {
  padding-right: 40px; }

.pb40 {
  padding-bottom: 40px; }

.mt44 {
  margin-top: 44px; }

.ml44 {
  margin-left: 44px; }

.mr44 {
  margin-right: 44px; }

.mb44 {
  margin-bottom: 44px; }

.pt44 {
  padding-top: 44px; }

.pl44 {
  padding-left: 44px; }

.pr44 {
  padding-right: 44px; }

.pb44 {
  padding-bottom: 44px; }

.mt48 {
  margin-top: 48px; }

.ml48 {
  margin-left: 48px; }

.mr48 {
  margin-right: 48px; }

.mb48 {
  margin-bottom: 48px; }

.pt48 {
  padding-top: 48px; }

.pl48 {
  padding-left: 48px; }

.pr48 {
  padding-right: 48px; }

.pb48 {
  padding-bottom: 48px; }

.mt52 {
  margin-top: 52px; }

.ml52 {
  margin-left: 52px; }

.mr52 {
  margin-right: 52px; }

.mb52 {
  margin-bottom: 52px; }

.pt52 {
  padding-top: 52px; }

.pl52 {
  padding-left: 52px; }

.pr52 {
  padding-right: 52px; }

.pb52 {
  padding-bottom: 52px; }

.mt56 {
  margin-top: 56px; }

.ml56 {
  margin-left: 56px; }

.mr56 {
  margin-right: 56px; }

.mb56 {
  margin-bottom: 56px; }

.pt56 {
  padding-top: 56px; }

.pl56 {
  padding-left: 56px; }

.pr56 {
  padding-right: 56px; }

.pb56 {
  padding-bottom: 56px; }

.mt60 {
  margin-top: 60px; }

.ml60 {
  margin-left: 60px; }

.mr60 {
  margin-right: 60px; }

.mb60 {
  margin-bottom: 60px; }

.pt60 {
  padding-top: 60px; }

.pl60 {
  padding-left: 60px; }

.pr60 {
  padding-right: 60px; }

.pb60 {
  padding-bottom: 60px; }

.mt64 {
  margin-top: 64px; }

.ml64 {
  margin-left: 64px; }

.mr64 {
  margin-right: 64px; }

.mb64 {
  margin-bottom: 64px; }

.pt64 {
  padding-top: 64px; }

.pl64 {
  padding-left: 64px; }

.pr64 {
  padding-right: 64px; }

.pb64 {
  padding-bottom: 64px; }

.mt68 {
  margin-top: 68px; }

.ml68 {
  margin-left: 68px; }

.mr68 {
  margin-right: 68px; }

.mb68 {
  margin-bottom: 68px; }

.pt68 {
  padding-top: 68px; }

.pl68 {
  padding-left: 68px; }

.pr68 {
  padding-right: 68px; }

.pb68 {
  padding-bottom: 68px; }

.mt72 {
  margin-top: 72px; }

.ml72 {
  margin-left: 72px; }

.mr72 {
  margin-right: 72px; }

.mb72 {
  margin-bottom: 72px; }

.pt72 {
  padding-top: 72px; }

.pl72 {
  padding-left: 72px; }

.pr72 {
  padding-right: 72px; }

.pb72 {
  padding-bottom: 72px; }

.mt76 {
  margin-top: 76px; }

.ml76 {
  margin-left: 76px; }

.mr76 {
  margin-right: 76px; }

.mb76 {
  margin-bottom: 76px; }

.pt76 {
  padding-top: 76px; }

.pl76 {
  padding-left: 76px; }

.pr76 {
  padding-right: 76px; }

.pb76 {
  padding-bottom: 76px; }

.mt80 {
  margin-top: 80px; }

.ml80 {
  margin-left: 80px; }

.mr80 {
  margin-right: 80px; }

.mb80 {
  margin-bottom: 80px; }

.pt80 {
  padding-top: 80px; }

.pl80 {
  padding-left: 80px; }

.pr80 {
  padding-right: 80px; }

.pb80 {
  padding-bottom: 80px; }

.mla {
  margin-left: auto !important; }

.mra {
  margin-right: auto !important; }

.wd80 {
  max-width: 80px;
  width: 100%; }

.wd160 {
  max-width: 160px;
  width: 100%; }

.wd240 {
  max-width: 240px;
  width: 100%; }

.wd320 {
  max-width: 320px;
  width: 100%; }

.wd400 {
  max-width: 400px;
  width: 100%; }

.wd480 {
  max-width: 480px;
  width: 100%; }

.wd560 {
  max-width: 560px;
  width: 100%; }

.wd640 {
  max-width: 640px;
  width: 100%; }

.wd720 {
  max-width: 720px;
  width: 100%; }

.wd800 {
  max-width: 800px;
  width: 100%; }

.wd880 {
  max-width: 880px;
  width: 100%; }

.wd960 {
  max-width: 960px;
  width: 100%; }

.wd1040 {
  max-width: 1040px;
  width: 100%; }

.wd1120 {
  max-width: 1120px;
  width: 100%; }

.wd1200 {
  max-width: 1200px;
  width: 100%; }

.wd1280 {
  max-width: 1280px;
  width: 100%; }

.wd1360 {
  max-width: 1360px;
  width: 100%; }

.wd1440 {
  max-width: 1440px;
  width: 100%; }

.wd1520 {
  max-width: 1520px;
  width: 100%; }

.wd1600 {
  max-width: 1600px;
  width: 100%; }

.fz10 {
  font-size: 10px; }

.fz12 {
  font-size: 12px; }

.fz14 {
  font-size: 14px; }

.fz16 {
  font-size: 16px; }

.fz18 {
  font-size: 18px; }

.fz20 {
  font-size: 20px; }

.fz22 {
  font-size: 22px; }

.fz24 {
  font-size: 24px; }

.fz26 {
  font-size: 26px; }

.fz28 {
  font-size: 28px; }

.fz30 {
  font-size: 30px; }

.fz32 {
  font-size: 32px; }

.fz34 {
  font-size: 34px; }

.fz36 {
  font-size: 36px; }

.fz38 {
  font-size: 38px; }

.fz40 {
  font-size: 40px; }

.fz42 {
  font-size: 42px; }

.fz44 {
  font-size: 44px; }

.fz46 {
  font-size: 46px; }

.fz48 {
  font-size: 48px; }

.fz50 {
  font-size: 50px; }

.fz52 {
  font-size: 52px; }

.fz54 {
  font-size: 54px; }

.fz56 {
  font-size: 56px; }

.fz58 {
  font-size: 58px; }

.fz60 {
  font-size: 60px; }

.fz62 {
  font-size: 62px; }

.fz64 {
  font-size: 64px; }

.fz66 {
  font-size: 66px; }

.fz68 {
  font-size: 68px; }

.fz70 {
  font-size: 70px; }

@media screen and (max-width: 1023px) {
  .smt0 {
    margin-top: 0px; }

  .sml0 {
    margin-left: 0px; }

  .smr0 {
    margin-right: 0px; }

  .smb0 {
    margin-bottom: 0px; }

  .spt0 {
    padding-top: 0px; }

  .spl0 {
    padding-left: 0px; }

  .spr0 {
    padding-right: 0px; }

  .spb0 {
    padding-bottom: 0px; }

  .smt4 {
    margin-top: 4px; }

  .sml4 {
    margin-left: 4px; }

  .smr4 {
    margin-right: 4px; }

  .smb4 {
    margin-bottom: 4px; }

  .spt4 {
    padding-top: 4px; }

  .spl4 {
    padding-left: 4px; }

  .spr4 {
    padding-right: 4px; }

  .spb4 {
    padding-bottom: 4px; }

  .smt8 {
    margin-top: 8px; }

  .sml8 {
    margin-left: 8px; }

  .smr8 {
    margin-right: 8px; }

  .smb8 {
    margin-bottom: 8px; }

  .spt8 {
    padding-top: 8px; }

  .spl8 {
    padding-left: 8px; }

  .spr8 {
    padding-right: 8px; }

  .spb8 {
    padding-bottom: 8px; }

  .smt12 {
    margin-top: 12px; }

  .sml12 {
    margin-left: 12px; }

  .smr12 {
    margin-right: 12px; }

  .smb12 {
    margin-bottom: 12px; }

  .spt12 {
    padding-top: 12px; }

  .spl12 {
    padding-left: 12px; }

  .spr12 {
    padding-right: 12px; }

  .spb12 {
    padding-bottom: 12px; }

  .smt16 {
    margin-top: 16px; }

  .sml16 {
    margin-left: 16px; }

  .smr16 {
    margin-right: 16px; }

  .smb16 {
    margin-bottom: 16px; }

  .spt16 {
    padding-top: 16px; }

  .spl16 {
    padding-left: 16px; }

  .spr16 {
    padding-right: 16px; }

  .spb16 {
    padding-bottom: 16px; }

  .smt20 {
    margin-top: 20px; }

  .sml20 {
    margin-left: 20px; }

  .smr20 {
    margin-right: 20px; }

  .smb20 {
    margin-bottom: 20px; }

  .spt20 {
    padding-top: 20px; }

  .spl20 {
    padding-left: 20px; }

  .spr20 {
    padding-right: 20px; }

  .spb20 {
    padding-bottom: 20px; }

  .smt24 {
    margin-top: 24px; }

  .sml24 {
    margin-left: 24px; }

  .smr24 {
    margin-right: 24px; }

  .smb24 {
    margin-bottom: 24px; }

  .spt24 {
    padding-top: 24px; }

  .spl24 {
    padding-left: 24px; }

  .spr24 {
    padding-right: 24px; }

  .spb24 {
    padding-bottom: 24px; }

  .smt28 {
    margin-top: 28px; }

  .sml28 {
    margin-left: 28px; }

  .smr28 {
    margin-right: 28px; }

  .smb28 {
    margin-bottom: 28px; }

  .spt28 {
    padding-top: 28px; }

  .spl28 {
    padding-left: 28px; }

  .spr28 {
    padding-right: 28px; }

  .spb28 {
    padding-bottom: 28px; }

  .smt32 {
    margin-top: 32px; }

  .sml32 {
    margin-left: 32px; }

  .smr32 {
    margin-right: 32px; }

  .smb32 {
    margin-bottom: 32px; }

  .spt32 {
    padding-top: 32px; }

  .spl32 {
    padding-left: 32px; }

  .spr32 {
    padding-right: 32px; }

  .spb32 {
    padding-bottom: 32px; }

  .smt36 {
    margin-top: 36px; }

  .sml36 {
    margin-left: 36px; }

  .smr36 {
    margin-right: 36px; }

  .smb36 {
    margin-bottom: 36px; }

  .spt36 {
    padding-top: 36px; }

  .spl36 {
    padding-left: 36px; }

  .spr36 {
    padding-right: 36px; }

  .spb36 {
    padding-bottom: 36px; }

  .smt40 {
    margin-top: 40px; }

  .sml40 {
    margin-left: 40px; }

  .smr40 {
    margin-right: 40px; }

  .smb40 {
    margin-bottom: 40px; }

  .spt40 {
    padding-top: 40px; }

  .spl40 {
    padding-left: 40px; }

  .spr40 {
    padding-right: 40px; }

  .spb40 {
    padding-bottom: 40px; }

  .smt44 {
    margin-top: 44px; }

  .sml44 {
    margin-left: 44px; }

  .smr44 {
    margin-right: 44px; }

  .smb44 {
    margin-bottom: 44px; }

  .spt44 {
    padding-top: 44px; }

  .spl44 {
    padding-left: 44px; }

  .spr44 {
    padding-right: 44px; }

  .spb44 {
    padding-bottom: 44px; }

  .smt48 {
    margin-top: 48px; }

  .sml48 {
    margin-left: 48px; }

  .smr48 {
    margin-right: 48px; }

  .smb48 {
    margin-bottom: 48px; }

  .spt48 {
    padding-top: 48px; }

  .spl48 {
    padding-left: 48px; }

  .spr48 {
    padding-right: 48px; }

  .spb48 {
    padding-bottom: 48px; }

  .smt52 {
    margin-top: 52px; }

  .sml52 {
    margin-left: 52px; }

  .smr52 {
    margin-right: 52px; }

  .smb52 {
    margin-bottom: 52px; }

  .spt52 {
    padding-top: 52px; }

  .spl52 {
    padding-left: 52px; }

  .spr52 {
    padding-right: 52px; }

  .spb52 {
    padding-bottom: 52px; }

  .smt56 {
    margin-top: 56px; }

  .sml56 {
    margin-left: 56px; }

  .smr56 {
    margin-right: 56px; }

  .smb56 {
    margin-bottom: 56px; }

  .spt56 {
    padding-top: 56px; }

  .spl56 {
    padding-left: 56px; }

  .spr56 {
    padding-right: 56px; }

  .spb56 {
    padding-bottom: 56px; }

  .smt60 {
    margin-top: 60px; }

  .sml60 {
    margin-left: 60px; }

  .smr60 {
    margin-right: 60px; }

  .smb60 {
    margin-bottom: 60px; }

  .spt60 {
    padding-top: 60px; }

  .spl60 {
    padding-left: 60px; }

  .spr60 {
    padding-right: 60px; }

  .spb60 {
    padding-bottom: 60px; }

  .smt64 {
    margin-top: 64px; }

  .sml64 {
    margin-left: 64px; }

  .smr64 {
    margin-right: 64px; }

  .smb64 {
    margin-bottom: 64px; }

  .spt64 {
    padding-top: 64px; }

  .spl64 {
    padding-left: 64px; }

  .spr64 {
    padding-right: 64px; }

  .spb64 {
    padding-bottom: 64px; }

  .smt68 {
    margin-top: 68px; }

  .sml68 {
    margin-left: 68px; }

  .smr68 {
    margin-right: 68px; }

  .smb68 {
    margin-bottom: 68px; }

  .spt68 {
    padding-top: 68px; }

  .spl68 {
    padding-left: 68px; }

  .spr68 {
    padding-right: 68px; }

  .spb68 {
    padding-bottom: 68px; }

  .smt72 {
    margin-top: 72px; }

  .sml72 {
    margin-left: 72px; }

  .smr72 {
    margin-right: 72px; }

  .smb72 {
    margin-bottom: 72px; }

  .spt72 {
    padding-top: 72px; }

  .spl72 {
    padding-left: 72px; }

  .spr72 {
    padding-right: 72px; }

  .spb72 {
    padding-bottom: 72px; }

  .smt76 {
    margin-top: 76px; }

  .sml76 {
    margin-left: 76px; }

  .smr76 {
    margin-right: 76px; }

  .smb76 {
    margin-bottom: 76px; }

  .spt76 {
    padding-top: 76px; }

  .spl76 {
    padding-left: 76px; }

  .spr76 {
    padding-right: 76px; }

  .spb76 {
    padding-bottom: 76px; }

  .smt80 {
    margin-top: 80px; }

  .sml80 {
    margin-left: 80px; }

  .smr80 {
    margin-right: 80px; }

  .smb80 {
    margin-bottom: 80px; }

  .spt80 {
    padding-top: 80px; }

  .spl80 {
    padding-left: 80px; }

  .spr80 {
    padding-right: 80px; }

  .spb80 {
    padding-bottom: 80px; }

  .sfz10 {
    font-size: 10px; }

  .sfz12 {
    font-size: 12px; }

  .sfz14 {
    font-size: 14px; }

  .sfz16 {
    font-size: 16px; }

  .sfz18 {
    font-size: 18px; }

  .sfz20 {
    font-size: 20px; }

  .sfz22 {
    font-size: 22px; }

  .sfz24 {
    font-size: 24px; }

  .sfz26 {
    font-size: 26px; }

  .sfz28 {
    font-size: 28px; }

  .sfz30 {
    font-size: 30px; }

  .sfz32 {
    font-size: 32px; }

  .sfz34 {
    font-size: 34px; }

  .sfz36 {
    font-size: 36px; }

  .sfz38 {
    font-size: 38px; }

  .sfz40 {
    font-size: 40px; }

  .sfz42 {
    font-size: 42px; }

  .sfz44 {
    font-size: 44px; }

  .sfz46 {
    font-size: 46px; }

  .sfz48 {
    font-size: 48px; }

  .sfz50 {
    font-size: 50px; }

  .sfz52 {
    font-size: 52px; }

  .sfz54 {
    font-size: 54px; }

  .sfz56 {
    font-size: 56px; }

  .sfz58 {
    font-size: 58px; }

  .sfz60 {
    font-size: 60px; }

  .sfz62 {
    font-size: 62px; }

  .sfz64 {
    font-size: 64px; }

  .sfz66 {
    font-size: 66px; }

  .sfz68 {
    font-size: 68px; }

  .sfz70 {
    font-size: 70px; } }
.ffGo {
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "Meiryo", sans-serif; }

.ffAr {
  font-family: "Arial", sans-serif; }

.c_gray {
  color: #98a6b5; }

.c_gray2 {
  color: #777; }

.lh12 {
  line-height: 1.2; }

.lh15 {
  line-height: 1.5; }

.lh17 {
  line-height: 1.75; }

.lh20 {
  line-height: 2; }

.tal {
  text-align: left; }

.tar {
  text-align: right; }

.tac {
  text-align: center; }

.taj {
  text-align: justify; }

.fw3 {
  font-weight: 300; }

.fw4 {
  font-weight: 400; }

.fw5 {
  font-weight: 500; }

.fw6 {
  font-weight: 600; }

.fw7 {
  font-weight: 700; }

.db {
  display: block; }

.dib {
  display: inline-block; }

.dn {
  display: none; }

.imgBk {
  display: block;
  max-width: 100%;
  height: auto; }

.imgIb {
  display: inline-block;
  max-width: 100%;
  height: auto; }

.imgMce {
  max-width: 100%;
  height: auto; }

.tdu {
  text-decoration: underline; }
  .tdu:hover {
    text-decoration: none; }

.c_blue {
  color: #004bb1 !important; }

.c_red {
  color: #db2828 !important; }

.c_black {
  color: #303030; }

.b_white {
  background-color: #fff; }

.b_yellow {
  background-color: #ffffc0 !important; }

.cup {
  cursor: pointer; }

input::placeholder,
textarea::placeholder {
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 16px;
  color: #cdd6dd;
  font-weight: 700; }
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 16px;
  color: #cdd6dd;
  font-weight: 700; }
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 16px;
  color: #cdd6dd;
  font-weight: 700; }

.input-block, .textarea, .loginForm input[type="email"], .loginCode input[type="number"], .loginCode2 input[type="number"], .search-input input[type="text"],
.magic-input input[type="text"], .search-input button,
.magic-input button {
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "Meiryo", sans-serif;
  border: none;
  background-color: #fff;
  font-size: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none; }

.input-block {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #a0a0a0; }
.input-zero {
  pointer-events: none; }

.textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #a0a0a0; }

.radio-btn {
  display: inline-block;
  font-weight: 700; }
.radio input {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute; }
.radio .input-red:checked + .label-red {
  background-color: #db2828;
  color: #fff; }
.radio .input-blue:checked + .label-blue {
  background-color: #004bb1;
  color: #fff; }
.radio .input-green:checked + .label-green {
  background-color: #21ba45;
  color: #fff; }
.radio label {
  border-radius: 4px;
  display: inline-block;
  font-size: 14px;
  line-height: 1.5;
  padding: 2px 4px;
  cursor: pointer; }
.radio .label-red {
  color: #db2828;
  border: 1px solid #db2828;
  background-color: #fff; }
.radio .label-blue {
  color: #004bb1;
  border: 1px solid #004bb1;
  background-color: #fff; }
.radio .label-green {
  color: #21ba45;
  border: 1px solid #21ba45;
  background-color: #fff; }

.check {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  padding-left: 20px;
  display: inline-block; }
  .check input {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute; }
  .check label {
    cursor: pointer; }
  .check .box {
    position: absolute;
    top: -1px;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background-color: #fff; }
    .check .box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 4px;
      width: 6px;
      height: 12px;
      transform: rotate(45deg);
      transition: .1s; }
  .check-red {
    color: #db2828; }
    .check-red input:checked + .box::before {
      border-right: 3px solid #db2828;
      border-bottom: 3px solid #db2828; }
    .check-red .box {
      border: 1px solid #db2828; }
  .check-blue {
    color: #004bb1; }
    .check-blue input:checked + .box::before {
      border-right: 3px solid #004bb1;
      border-bottom: 3px solid #004bb1; }
    .check-blue .box {
      border: 1px solid #004bb1; }
  .check-gray {
    color: #707070; }
    .check-gray input:checked + .box::before {
      border-right: 3px solid #707070;
      border-bottom: 3px solid #707070; }
    .check-gray .box {
      border: 1px solid #707070; }

.btn, .head-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 48px;
  font-size: 16px;
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: 24px;
  text-decoration: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer; }
  .btn:active, .head-btn:active {
    transform: translateY(2px); }
  .btn-tiny, .btn-medium {
    font-size: 12px;
    height: 24px;
    width: auto;
    padding: 0 8px;
    margin: 0 2px;
    border-radius: 4px; }
  .btn-medium {
    font-size: 14px;
    height: 32px; }
  .btn-wd60 {
    width: 60px; }
  .btn-wd80 {
    width: 80px; }
  @media screen and (max-width: 1023px) {
    .btn--sp {
      width: 120px;
      height: 40px;
      font-size: 14px; } }
  .btn--blue {
    background-color: #004bb1; }
  .btn--blueReverse {
    border: 2px solid #004bb1;
    color: #004bb1;
    background-color: #fff; }
  .btn--gray {
    background-color: #a0a0a0; }
  .btn--grayReverse {
    border: 2px solid #a0a0a0;
    color: #a0a0a0;
    background-color: #fff; }
  .btn--red {
    background-color: #db2828; }
  .btn--redReverse {
    border: 2px solid #db2828;
    color: #db2828;
    background-color: #fff; }
  .btn--green {
    background-color: #21ba45; }
  .btn--greenReverse {
    border: 2px solid #21ba45;
    color: #21ba45;
    background-color: #fff; }
  .btn--black {
    background-color: #303030; }
  .btn--gray {
    background-color: #707070; }
  .btn--blackReverse {
    border: 2px solid #303030;
    color: #303030;
    background-color: #fff; }
  .btn--bdWhite {
    border: 1px solid #fff; }

.label {
  display: inline-block;
  padding: 4px;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  background-color: #fff; }
  .label-ro {
    background-color: #000;
    color: #fff; }
  .label-big {
    font-size: 16px; }
  .label-small {
    font-size: 11px;
    padding: 3px 10px;
    margin: 2px;
    border-radius: 8px; }
  .label--blue {
    border: 1px solid #004bb1;
    color: #004bb1; }
    .label--blue-ro {
      background-color: #004bb1;
      color: #fff; }
  .label--gray {
    border: 1px solid #a0a0a0;
    color: #a0a0a0; }
    .label--gray-ro {
      background-color: #a0a0a0;
      color: #fff; }
  .label--black {
    border: 1px solid #303030;
    color: #303030; }
    .label--black-ro {
      background-color: #303030;
      color: #fff; }
  .label--red {
    border: 1px solid #db2828;
    color: #db2828; }
    .label--red-ro {
      background-color: #db2828;
      color: #fff; }
  .label--green {
    border: 1px solid #21ba45;
    color: #21ba45; }
    .label--green-ro {
      background-color: #21ba45;
      color: #fff; }

.switch {
  display: inline-block;
  position: relative;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
  margin: 2px 8px 2px 0;
  width: 56px;
  border-radius: 12px;
  background-color: #fff; }
  .switch input[type="checkbox"] {
    display: none; }
    .switch input[type="checkbox"]:checked + label {
      border-color: #004bb1; }
      .switch input[type="checkbox"]:checked + label span::after {
        content: 'ON';
        padding: 0 16px 0 0;
        color: #004bb1;
        font-weight: 700; }
    .switch input[type="checkbox"]:checked ~ .circle {
      transform: translateX(30px);
      background-color: #004bb1; }
  .switch label {
    display: block;
    height: 24px;
    border: 2px solid #ccc;
    border-radius: 28px; }
    .switch label span::after {
      cursor: pointer;
      content: 'OFF';
      padding: 0 0 0 16px;
      color: #ccc; }
  .switch .circle {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 18px;
    height: 18px;
    background-color: #ccc;
    border-radius: 10px;
    transition: .2s; }

.radio-btn {
  display: inline-block;
  margin: 2px 8px 2px 0;
  min-width: 104px;
  font-weight: bold; }
  .radio-btn--tiny {
    min-width: 64px; }
.radio-inp_blue, .radio-inp_gray {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important; }
.radio-inp_blue:checked + .radio-lbl_blue {
  background-color: #004bb1;
  color: #fff; }
.radio-inp_gray:checked + .radio-lbl_gray {
  background-color: #a0a0a0;
  color: #fff; }
.radio-lbl_blue, .radio-lbl_gray {
  border-radius: 4px;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  line-height: 1.5;
  padding: 4px 2px;
  cursor: pointer; }
.radio-lbl_blue {
  color: #004bb1;
  border: 1px solid #004bb1; }
.radio-lbl_gray {
  color: #a0a0a0;
  border: 1px solid #a0a0a0; }

.icon {
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%; }
  .icon-small {
    width: 16px;
    height: 16px; }
  .icon-tiny {
    width: 20px;
    height: 20px; }
  .icon-mini {
    width: 24px;
    height: 24px; }
  .icon-user {
    background-image: url("../images/icn_user.png"); }
  .icon-tag {
    background-image: url("../images/icn_tag.png"); }
  .icon-setting {
    background-image: url("../images/icn_setting.png"); }
  .icon-pencil_white {
    background-image: url("../images/icn_pencil_white.svg"); }
  .icon-checkbox {
    background-image: url("../images/icn_checkbox.png"); }
  .icon-checkbox_white {
    background-image: url("../images/icn_checkbox_white.png"); }
  .icon-check {
    background-image: url("../images/icn_check.png"); }
  .icon-book {
    background-image: url("../images/icn_book.png"); }
  .icon-book_red {
    background-image: url("../images/icn_book_red.png"); }
  .icon-book_white {
    background-image: url("../images/icn_book_white.png"); }
  .icon-bookmark {
    background-image: url("../images/icn_bookmark.svg"); }
  .icon-bookmark_blue {
    background-image: url("../images/icn_bookmark_blue.svg"); }
  .icon-bookmark_white {
    background-image: url("../images/icn_bookmark_white.png"); }
  .icon-bookmark_red {
    background-image: url("../images/icn_bookmark_red.png"); }
  .icon-reply {
    background-image: url("../images/icn_reply.png"); }
  .icon-reply_white {
    background-image: url("../images/icn_reply_white.png"); }
  .icon-email {
    background-image: url("../images/icn_email.png"); }
  .icon-jpg {
    background-image: url("../images/icn_jpg.png"); }
  .icon-jpg_blue {
    background-image: url("../images/icn_jpg_blue.png"); }
  .icon-exit_white {
    background-image: url("../images/icn_exit_white.png"); }
  .icon-link {
    background-image: url("../images/icn_link.svg"); }
  .icon-comment {
    background-image: url("../images/icn_comment.png"); }
  .icon-magic {
    background-image: url("../images/icn_magic.png"); }
  .icon-guest {
    background-image: url("../images/icn_guest.jpg"); }
  .icon-folder {
    background-image: url("../images/icn_folder.png"); }
  .icon-menu {
    background-image: url("../images/icn_menu.svg"); }
  .icon-menu_operation {
    background-image: url("../images/icn_operation_menu.svg"); }
  .icon-menu_title {
    background-image: url("../images/icn_title_menu.svg"); }
  .icon-menu_reload {
    background-image: url("../images/icn_reload.png"); }
  .icon-like {
    background-image: url("../images/icn_like.png"); }
  .icon-img_blue {
    background-image: url("../images/icn_img_blue.png"); }

.userIcon {
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  border-radius: 50%; }
  .userIcon--medium {
    width: 24px;
    height: 24px; }
  .userIcon--small {
    width: 16px;
    height: 16px; }

.Msg {
  border: 1px solid #db2828;
  color: #db2828;
  background-color: #fdd;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  text-align: left;
  padding: 6px 8px;
  border-radius: 4px; }
  .Msg-green {
    border: 1px solid #21ba45;
    background-color: #ddf9e4;
    color: #21ba45; }
  .Msg-inline {
    display: inline-block; }

.modal {
  display: none; }
  .modal-body {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: block;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
    padding: 0 8px;
    height: 100%; }
  .modal-close {
    position: fixed;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 2001; }

#Loading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
  justify-content: center;
  align-items: center; }

.close-btn {
  display: inline-block;
  vertical-align: middle;
  transition: all .4s;
  box-sizing: border-box;
  position: relative;
  width: 32px;
  height: 32px;
  color: #fff;
  cursor: pointer;
  opacity: .5; }
  .close-btn span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 4px;
    background-color: #fff;
    text-align: center;
    border-radius: 2px; }
    .close-btn span:nth-of-type(1) {
      top: 7px;
      transform: translateY(10px) rotate(-315deg); }
    .close-btn span:nth-of-type(2) {
      top: 27px;
      transform: translateY(-10px) rotate(315deg); }
  .close-btn--black span {
    background-color: #a0a0a0; }

.dialog,
.dialog-footer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 4000; }
  .dialog-block,
  .dialog-footer-block {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 24px;
    background-color: rgba(0, 0, 0, 0.5); }
  .dialog-body,
  .dialog-footer-body {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding: 24px; }
    .dialog-body p,
    .dialog-footer-body p {
      font-size: 16px;
      font-weight: bold;
      line-height: 1.5; }
  .dialog-btn,
  .dialog-footer-btn {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center; }

.table2080,
.table5050 {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0; }
  .table2080 th,
  .table5050 th, .table2080 td,
  .table5050 td {
    padding: 8px;
    font-size: 16px;
    line-height: 1.5;
    border: 1px solid #ccc; }

.table2080 th,
.table5050 th {
  width: 20%; }
  .table2080 th span,
  .table5050 th span {
    font-size: 12px;
    color: #888; }
.table2080 td,
.table5050 td {
  width: 80%; }
@media screen and (max-width: 1023px) {
  .table2080 th, .table2080 td,
  .table5050 th,
  .table5050 td {
    display: block;
    width: 100%; }
  .table2080 td,
  .table5050 td {
    border-top: none; } }

.table5050 th {
  width: 50%; }
.table5050 td {
  width: 50%; }
@media screen and (max-width: 1023px) {
  .table5050 th, .table5050 td {
    display: block;
    width: 100%; }
  .table5050 td {
    border-top: none; } }

.dataTables-threadTitle, .dataTables-threadComment {
  word-wrap: normal;
  line-height: 1.2; }
.dataTables-threadComment {
  width: 640px;
  line-height: 1.75; }

.login {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }
  .loginLogo {
    width: 240px;
    height: auto;
    display: block; }
  .loginForm {
    margin-top: 48px;
    max-width: 400px; }
    .loginForm input[type="email"] {
      margin-top: 8px;
      width: 100%;
      height: 48px;
      border: 1px solid #cdd6dd;
      padding: 0 8px; }
  .loginCode {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 12px; }
    .loginCode input[type="number"]::-webkit-outer-spin-button,
    .loginCode input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0; }
    .loginCode input[type="number"] {
      -moz-appearance: textfield; }
    .loginCode input[type="number"] {
      border-radius: 4px;
      border: 1px solid #cdd6dd;
      width: 64px;
      height: 64px;
      font-size: 40px;
      font-weight: 700;
      padding: 0;
      text-align: center; }
  .loginCode2 {
    margin-top: 16px; }
    .loginCode2 input[type="number"]::-webkit-outer-spin-button,
    .loginCode2 input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0; }
    .loginCode2 input[type="number"] {
      -moz-appearance: textfield; }
    .loginCode2 input[type="number"] {
      border-radius: 4px;
      border: 1px solid #cdd6dd;
      width: 200px;
      height: 64px;
      font-size: 40px;
      font-weight: 700;
      padding: 0;
      text-align: center; }

.logoArea {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid #fff; }
  .logoArea-logo {
    width: 120px;
    height: auto;
    display: block; }
  .logoArea-user {
    width: 100%;
    margin-top: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600; }
    .logoArea-user img {
      display: block;
      width: 32px;
      height: 32px;
      border-radius: 16px;
      margin-right: 8px; }

.statusArea {
  margin-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #fff; }
  .statusArea-ttl {
    font-size: 14px;
    font-weight: 600; }
    .statusArea-ttl::before {
      position: relative;
      top: 2px;
      content: '';
      display: inline-block;
      width: 14px;
      height: 14px;
      background-image: url("../images/icn_narrowing_down.svg");
      background-size: 100%;
      margin-right: 6px; }

.layout03-column2::-webkit-scrollbar, .searchArea-data::-webkit-scrollbar, .threadArea-body::-webkit-scrollbar, .iconName-menu ul::-webkit-scrollbar, .tagList::-webkit-scrollbar {
  width: 4px; }
.layout03-column2::-webkit-scrollbar-track, .searchArea-data::-webkit-scrollbar-track, .threadArea-body::-webkit-scrollbar-track, .iconName-menu ul::-webkit-scrollbar-track, .tagList::-webkit-scrollbar-track {
  background-color: #fff; }
.layout03-column2::-webkit-scrollbar-thumb, .searchArea-data::-webkit-scrollbar-thumb, .threadArea-body::-webkit-scrollbar-thumb, .iconName-menu ul::-webkit-scrollbar-thumb, .tagList::-webkit-scrollbar-thumb {
  background-color: #ccc; }

.head {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding-right: 16px;
  background-color: #16213e;
  z-index: 10; }
  @media screen and (max-width: 1023px) {
    .head {
      position: fixed;
      padding-right: 8px; } }
  .head-logo {
    margin-right: auto;
    display: flex;
    align-items: center; }
    .head-logo img {
      width: auto;
      height: 30px; }
    .head-logo--guest {
      padding: 0 8px; }
  .head-btn {
    position: relative;
    z-index: 3;
    width: auto;
    height: auto;
    font-size: 12px;
    color: #fff;
    background-color: #004bb1;
    border: 1px solid #fff;
    padding: 4px 8px;
    margin-left: auto;
    border-radius: 4px; }
    @media screen and (max-width: 1023px) {
      .head-btn {
        padding: 4px; }
        .head-btn span {
          display: none; } }

.spMenu {
  display: none;
  z-index: 5;
  position: fixed;
  top: 70px;
  left: 8px;
  width: 132px;
  height: 40px; }
  @media screen and (max-width: 1023px) {
    .spMenu {
      display: flex;
      align-items: center;
      justify-content: space-between; } }
  .spMenu-btn {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%; }
    .spMenu-btn--green {
      background-color: #21ba45; }
    .spMenu-btn--violet {
      background-color: #6435c9; }
    .spMenu-btn--gray {
      background-color: #707070; }
    .spMenu-btn--blue {
      background-color: #004bb1; }

.layout03 {
  position: relative;
  display: flex;
  width: 100%;
  height: calc(100vh - 40px);
  height: calc(100dvh - 40px); }
  @media screen and (max-width: 1023px) {
    .layout03 {
      height: 100vh; } }
  .layout03-column1 {
    width: 256px;
    background-color: #e3ecf8; }
    @media screen and (max-width: 1023px) {
      .layout03-column1 {
        width: 320px;
        position: fixed;
        top: 40px;
        left: -320px;
        transition: .3s;
        z-index: 4;
        height: calc(100% - 40px); }
        .layout03-column1--open {
          left: 0; } }
    .layout03-column1__head {
      height: 280px;
      padding: 0 16px; }
  .layout03-column2 {
    width: 344px;
    overflow-y: auto; }
    @media screen and (max-width: 1023px) {
      .layout03-column2 {
        position: fixed;
        width: 320px;
        top: 40px;
        left: -320px;
        transition: .3s;
        z-index: 4;
        height: calc(100% - 40px);
        background-color: #fff;
        border-right: 1px solid #d0d0d0; }
        .layout03-column2--open {
          left: 0; } }
  .layout03-column3 {
    width: calc(100% - 600px); }
    @media screen and (max-width: 1023px) {
      .layout03-column3 {
        position: fixed;
        width: 100%; } }
  @media screen and (max-width: 1023px) {
    .layout03--guest {
      position: fixed;
      width: 100%;
      height: 100vh;
      height: 100dvh; } }
  .layout03-editor {
    z-index: 3;
    position: fixed;
    bottom: 0;
    right: 0;
    width: calc(100% - 600px);
    padding-bottom: 4px;
    border-top: 1px solid #a0a0a0; }
    .layout03-editor--guest {
      width: 100%; }
    @media screen and (max-width: 1023px) {
      .layout03-editor {
        width: 100%; } }
    .layout03-editor--active .tox-tinymce {
      border: 2px solid #db2828; }
    .layout03-editor__toggle {
      display: none;
      position: absolute;
      top: -32px;
      right: 8px;
      width: 64px;
      height: 32px;
      border: 1px solid #a0a0a0;
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      background-image: url("../images/icn_editor_down.png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 16px 16px;
      background-color: #fff; }
      @media screen and (max-width: 1023px) {
        .layout03-editor__toggle {
          display: block; } }
      .layout03-editor__toggle--active {
        background-image: url("../images/icn_editor_up.png"); }
    .layout03-editor__respond {
      position: absolute;
      top: -57px;
      left: 0;
      width: 100%;
      background-color: #ccdcf3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0 4px 8px;
      border-radius: 8px 8px 0 0; }
      .layout03-editor__respond-icon {
        width: 24px;
        height: 24px; }
        .layout03-editor__respond-icon img {
          display: block;
          width: 100%;
          height: auto;
          border-radius: 50%; }
      .layout03-editor__respond-wrap {
        width: calc(100% - 64px); }
      .layout03-editor__respond-name {
        width: 100%;
        height: 16px;
        font-size: 14px;
        font-weight: 700; }
      .layout03-editor__respond-content {
        width: 100%;
        height: 32px;
        overflow: hidden;
        font-size: 12px;
        line-height: 1.5;
        color: #555; }
      .layout03-editor__respond-close {
        width: 32px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer; }
  .layout03-button {
    position: relative;
    margin-top: 4px;
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background-color: rgba(0, 75, 177, 0.7);
    color: #fff;
    font-weight: 700;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    transition: .3s;
    background-image: url("../images/icn_pencil_white.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 28px 28px; }
    .layout03-button::before {
      content: 'Ctrl+Enter, Command+Enter';
      position: absolute;
      bottom: 2px;
      left: 2px;
      font-size: 10px;
      color: #ddd; }
      @media screen and (max-width: 1023px) {
        .layout03-button::before {
          display: none; } }
    .layout03-button:hover {
      background-color: #004bb1; }
    .layout03-button:active {
      transform: translateY(2px); }

.form {
  padding: 24px; }
  @media screen and (max-width: 1023px) {
    .form {
      padding: 24px 8px; } }
  .form-title {
    max-width: 1024px;
    margin: 0 auto 8px auto;
    padding: 8px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .form-comments {
    display: none;
    max-width: 1024px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 8px;
    margin: 0 auto 8px auto; }
    .form-comments--active {
      display: block; }
  .form-displayBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1024px;
    margin: 0 auto 8px auto;
    width: 100%;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #d0d0d0;
    cursor: pointer;
    background-color: #303030;
    color: #fff; }
    .form-displayBtn::before {
      content: 'スレッドを表示（ここをクリック）';
      font-size: 14px;
      font-weight: 600; }
    .form-displayBtn--active::before {
      content: 'スレッドを閉じる'; }
  .form-editor {
    max-width: 1024px;
    margin: 0 auto; }
  .form-guest {
    background-color: #fff;
    padding: 8px;
    max-width: 640px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .form-name {
    width: 25%; }
  .form-email {
    width: 72.5%; }
  .form-msg {
    max-width: 600px;
    margin: 16px auto;
    padding: 8px;
    border: 1px solid #db2828;
    border-radius: 8px;
    list-style-type: none; }
    .form-msg li {
      font-size: 14px;
      line-height: 1.75;
      text-indent: -14px;
      padding-left: 14px;
      font-weight: 600;
      color: #db2828; }
      @media screen and (max-width: 1023px) {
        .form-msg li {
          font-size: 12px;
          text-indent: -12px;
          padding-left: 12px; } }
      .form-msg li::before {
        content: '・'; }

.ttlArea {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: #fff; }
  .ttlArea li {
    position: relative;
    padding: 16px 16px 0 16px;
    cursor: default; }
    .ttlArea li::after {
      content: '';
      margin-top: 16px;
      display: block;
      height: 1px;
      background-color: #d0d0d0; }
  .ttlArea--bg {
    background-color: #f5f9ff; }
  .ttlArea--archive {
    overflow: hidden !important;
    padding: 0 !important;
    height: 0 !important; }

.search-input,
.magic-input {
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .search-input input[type="text"],
  .magic-input input[type="text"] {
    width: calc(100% - 60px);
    border: 1px solid #a4a3bf;
    border-right: none;
    border-radius: 4px 0 0 4px;
    height: 30px;
    padding: 0 8px;
    background-color: #39425b;
    color: #fff; }
    @media screen and (max-width: 1023px) {
      .search-input input[type="text"],
      .magic-input input[type="text"] {
        width: calc(100% - 40px); } }
  .search-input button,
  .magic-input button {
    background-color: #6e738d;
    border: 1px solid #a4a3bf;
    border-left: none;
    width: 60px;
    height: 30px;
    border-radius: 0 4px 4px 0;
    background-image: url("../images/icn_search_black.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 32px;
    cursor: pointer; }
    @media screen and (max-width: 1023px) {
      .search-input button,
      .magic-input button {
        width: 40px; } }
    .search-input button:active,
    .magic-input button:active {
      background-size: 16px; }
@media screen and (max-width: 1023px) {
  .search-main,
  .magic-main {
    padding: 0 40px; }
  .search-guest,
  .magic-guest {
    padding: 0 8px 0 88px; } }

.magic-input {
  position: static;
  max-width: 100%; }
  .magic-input input[type="text"] {
    width: calc(100% - 40px);
    background-color: #fff;
    color: #303030;
    border: 1px solid #303030;
    border-right: none; }
  .magic-input button {
    width: 40px;
    background-color: #21ba45;
    background-image: url("../images/icn_copy_white.png");
    background-size: 20px;
    border: none; }
  .magic-input--name {
    max-width: 240px; }
    .magic-input--name input[type="text"] {
      width: calc(100% - 60px); }
    .magic-input--name button {
      width: 60px;
      background-image: none;
      background-color: #004bb1;
      color: #fff;
      font-weight: 600; }

.searchArea {
  position: fixed;
  top: 40px;
  left: -600px;
  width: 600px;
  transition: .3s;
  border-right: 1px solid #d0d0d0;
  background-color: #fff;
  z-index: 50; }
  @media screen and (max-width: 1023px) {
    .searchArea {
      left: -80%;
      width: 80%; } }
  .searchArea-data {
    height: calc(100vh - 40px);
    padding: 0 8px;
    overflow-y: auto; }
  .searchArea-close {
    position: fixed;
    top: 40px;
    left: 0;
    z-index: 2000;
    width: 600px; }

.threadArea {
  position: relative;
  height: calc(100% - 48px); }
  @media screen and (max-width: 1023px) {
    .threadArea {
      margin-top: 40px; } }
  .threadArea--reply {
    max-width: 1024px;
    margin: 0 auto;
    width: 100%;
    padding: 0 8px;
    background-color: #fff; }
  .threadArea-head {
    position: absolute;
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    background-color: #f5f9ff;
    border-bottom: 1px solid #d0d0d0;
    padding: 0 16px; }
    @media screen and (max-width: 1023px) {
      .threadArea-head {
        flex-wrap: wrap;
        height: 72px;
        padding: 0 8px; } }
    .threadArea-head__ttl {
      width: calc(100% - 240px);
      padding: 0 8px 0 0;
      font-size: 20px;
      font-weight: 700;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }
      @media screen and (max-width: 1023px) {
        .threadArea-head__ttl {
          width: 100%; } }
    .threadArea-head__operate {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 240px; }
      @media screen and (max-width: 1023px) {
        .threadArea-head__operate {
          width: 100%; } }
  .threadArea-body {
    position: absolute;
    top: 48px;
    width: 100%;
    margin: 0;
    padding: 0 0 48px 0;
    height: 100%;
    list-style-type: none;
    overflow-y: auto;
    overscroll-behavior: none; }
    @media screen and (max-width: 1023px) {
      .threadArea-body {
        top: 72px; } }
    .threadArea-body--export {
      position: static;
      padding-top: 48px; }
      @media screen and (max-width: 1023px) {
        .threadArea-body--export {
          padding-top: 72px; } }
    .threadArea-body--reply {
      padding: 0 0 64px 0;
      height: 100vh; }
    .threadArea-body--search {
      position: static;
      padding: 0;
      height: auto; }
    .threadArea-body--form {
      position: static;
      padding: 0;
      max-height: 640px;
      height: auto; }
    .threadArea-body--bg {
      background-color: #e8e8e8; }
    .threadArea-body > li {
      position: relative;
      padding: 16px 16px 0 16px; }
      .threadArea-body > li img {
        max-width: 100%;
        height: auto; }
      .threadArea-body > li::after {
        content: '';
        display: block;
        margin-top: 16px;
        height: 1px;
        background-color: #d0d0d0; }
  .threadArea-nameArea {
    position: relative;
    width: 100%;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .threadArea-nameArea--left {
      padding: 0;
      justify-content: flex-start; }
    .threadArea-nameArea--right {
      padding: 0;
      justify-content: flex-end; }
    .threadArea-nameArea__name {
      width: calc(100% - 68px);
      display: flex;
      align-items: center;
      flex-wrap: wrap; }
      @media screen and (max-width: 1023px) {
        .threadArea-nameArea__name-text {
          width: 184px;
          line-height: 1.2; } }
  .threadArea-date {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 16px; }
    @media screen and (max-width: 1023px) {
      .threadArea-date {
        width: 100%;
        margin: 8px 0 0 0; } }
  .threadArea-add {
    position: absolute;
    bottom: 8px;
    right: 8px;
    left: 8px;
    z-index: 5; }
    @media screen and (max-width: 1023px) {
      .threadArea-add {
        position: fixed;
        left: inherit; }
        .threadArea-add .icon {
          width: 20px;
          height: 20px; } }
    .threadArea-add a {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      background-color: rgba(0, 75, 177, 0.7);
      font-size: 20px;
      color: #fff;
      font-weight: 700;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
      transition: .3s; }
      .threadArea-add a:hover {
        background-color: #004bb1; }
      .threadArea-add a:active {
        transform: translateY(2px); }
  .threadArea-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 51; }
  .threadArea-unread {
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    background-color: #db2828;
    border-radius: 50%; }
    .threadArea-unread--active {
      width: 18px;
      height: 18px; }
  .threadArea-content {
    overflow-y: auto; }
  .threadArea-sc {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.pager {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 0 24px 0;
  list-style-type: none; }
  .pager li {
    margin: 2px; }
  .pager-page {
    font-size: 12px;
    color: #303030;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #a0a0a0;
    transition: .3s; }
    .pager-page:hover {
      background-color: #a0a0a0;
      color: #fff; }
  .pager-current {
    pointer-events: none;
    background-color: #a0a0a0;
    color: #fff; }

.iconBtn,
.iconAdmin {
  display: inline-flex;
  justify-content: flex-end;
  z-index: 3; }
  @media screen and (max-width: 1023px) {
    .iconBtn--type1,
    .iconAdmin--type1 {
      width: 84px;
      flex-wrap: wrap; }
      .iconBtn--type1 .iconBtn-normal,
      .iconAdmin--type1 .iconBtn-normal {
        width: 36px;
        height: 36px; } }
  .iconBtn-normal,
  .iconAdmin-normal {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center; }
    .iconBtn-normal:hover,
    .iconAdmin-normal:hover {
      background-color: #f0f0f0;
      transition: .3s; }
  .iconBtn-area,
  .iconAdmin-area {
    width: 30px;
    height: 30px;
    background-image: url("../images/icn_menu.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 30px 30px; }
    .iconBtn-area--three,
    .iconAdmin-area--three {
      background-image: url("../images/icn_menu3.svg"); }
    .iconBtn-area:hover,
    .iconAdmin-area:hover {
      background-color: #f0f0f0;
      transition: .3s; }
      .iconBtn-area:hover .iconBtn-menu,
      .iconAdmin-area:hover .iconBtn-menu {
        transition-delay: .2s;
        visibility: visible; }
  .iconBtn-menu,
  .iconAdmin-menu {
    visibility: hidden;
    position: absolute;
    top: 10px;
    right: 0;
    background-color: #fff;
    border: 1px solid #a0a0a0;
    border-radius: 8px;
    padding: 16px;
    z-index: 10; }
    .iconBtn-menu > a,
    .iconAdmin-menu > a {
      display: block;
      padding: 8px;
      color: #303030; }
      .iconBtn-menu > a:hover,
      .iconAdmin-menu > a:hover {
        background-color: #f0f0f0; }
  .iconBtn-line,
  .iconAdmin-line {
    margin: 8px 0;
    height: 4px;
    border-top: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0; }

.iconAdmin {
  display: block;
  width: 40px; }
  .iconAdmin-area {
    width: 40px;
    height: 40px;
    background-image: url("../images/icn_menu2.png");
    -webkit-background-size: 24px;
    background-size: 24px; }
    .iconAdmin-area:hover {
      background-color: #f0f0f0;
      transition: .3s; }
      .iconAdmin-area:hover .iconAdmin-menu {
        transition-delay: .2s;
        visibility: visible; }
  .iconAdmin-menu {
    right: inherit;
    top: 4px;
    left: 4px; }

.iconName {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end; }
  .iconName:hover {
    transition: .3s; }
    .iconName:hover .iconName-menu {
      transition-delay: .2s;
      visibility: visible; }
  .iconName-menu {
    visibility: hidden;
    position: absolute;
    top: 36px;
    right: 32px;
    background-color: #fff;
    border: 1px solid #a0a0a0;
    border-radius: 8px;
    padding: 16px;
    z-index: 10; }
    @media screen and (max-width: 1023px) {
      .iconName-menu {
        top: 64px; } }
    .iconName-menu ul {
      margin: 16px 0 0 0;
      padding: 0;
      list-style-type: none;
      max-height: 200px;
      overflow-y: auto; }
      .iconName-menu ul li {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 4px 0; }
        .iconName-menu ul li:first-child::before {
          content: '';
          display: block;
          position: absolute;
          bottom: 0;
          left: 12px;
          width: 16px;
          height: 16px;
          background-image: url("../images/icn_admin_mark.svg");
          background-size: 100%; }
      .iconName-menu ul p {
        width: calc(100% - 30px);
        font-size: 14px; }

.iconFree {
  margin-left: auto;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center; }

.tagArea {
  margin-top: 12px; }
  .tagArea-btn {
    margin-top: 8px; }
    .tagArea-btn a {
      display: inline-block;
      color: #004bb1;
      font-weight: 600;
      font-size: 12px; }
      .tagArea-btn a::before {
        content: '';
        position: relative;
        top: -2px;
        display: inline-block;
        vertical-align: middle;
        width: 16px;
        height: 16px;
        background-image: url("../images/icn_tag_plus.svg");
        background-size: 100%; }
  .tagArea-view {
    font-size: 0; }
    .tagArea-view p {
      display: inline-block;
      margin: 2px;
      color: #98a6b5;
      font-size: 11px; }
    .tagArea-view--act {
      color: #004bb1 !important;
      font-weight: 600; }

.tagList {
  padding: 8px 16px 120px 16px;
  height: calc(100vh - 320px);
  overflow-y: auto; }
  .tagList label {
    cursor: pointer; }

.profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 32px;
  border-bottom: 1px solid #d0d0d0; }
  @media screen and (max-width: 1023px) {
    .profile-head {
      justify-content: center;
      flex-direction: column; } }
.profile-area {
  width: 50%;
  padding: 0 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }
  @media screen and (max-width: 1023px) {
    .profile-area {
      width: 100%; }
      .profile-area:last-child {
        margin-top: 32px; } }
  .profile-area img {
    border-radius: 50%; }
.profile-crop {
  width: 100%;
  height: 100%;
  margin: 0 auto; }
  .profile-crop img {
    width: 100%;
    height: auto; }
.profile-icon canvas {
  border-radius: 50%; }
.profile-hidden {
  display: none; }
.profile-dsp {
  display: flex;
  align-items: center;
  cursor: pointer; }
  .profile-dsp input[type="radio"]:checked + img {
    border: 2px solid #004bb1; }
  .profile-dsp img {
    border: 1px solid #888;
    margin-left: 8px; }

.chat-li {
  padding-top: 16px !important;
  padding-bottom: 16px !important; }
  .chat-li::after {
    display: none !important; }
.chat-left {
  padding-right: 16px;
  display: flex;
  flex-wrap: wrap;
  width: 100%; }
.chat-right {
  padding-left: 16px;
  display: flex;
  width: 100%;
  justify-content: flex-end;
  overflow: hidden; }
.chat-icon {
  width: 40px; }
.chat-content {
  width: calc(100% - 40px); }
.chat-balloon {
  position: relative;
  display: inline-block;
  padding: 8px;
  border-radius: 8px;
  background-color: #fff;
  max-width: 800px; }
  .chat-balloon::after {
    position: absolute;
    top: 8px;
    content: '';
    border-top: 8px solid #fff;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid transparent; }
  .chat-balloon--right {
    background-color: #ccdcf3; }
    .chat-balloon--right::after {
      right: -16px;
      border-top: 8px solid #ccdcf3;
      transform: rotate(270deg); }
  .chat-balloon--left::after {
    left: -16px;
    transform: rotate(90deg); }
  .chat-balloon--gray {
    background-color: #eee; }
    .chat-balloon--gray::after {
      border-top: 8px solid #eee; }
.chat-name {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5; }

.longPressArea {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  width: 100%;
  height: 100vh; }
  @media screen and (max-width: 1023px) {
    .longPressArea {
      position: fixed;
      width: 100%; } }
  .longPressArea-body {
    position: relative;
    margin-left: auto;
    width: calc(100% - 600px);
    height: 100vh; }
    .longPressArea-body--guest {
      width: 100%; }
    @media screen and (max-width: 1023px) {
      .longPressArea-body {
        width: 100%; } }

.longPress {
  position: relative; }
  .longPress-menu {
    position: absolute;
    opacity: 0;
    left: 0;
    right: 0;
    bottom: 50%;
    margin: 0 auto;
    padding: 0;
    width: 210px;
    height: 56px;
    border-radius: 8px;
    background-color: #ccdcf3;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    animation: menu 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); }
    .longPress-menu li {
      width: 42px;
      cursor: pointer; }
      .longPress-menu li img {
        display: block;
        width: auto;
        height: 32px;
        margin: 0 auto; }
@keyframes menu {
  0% {
    opacity: 0;
    bottom: 40%; }
  100% {
    opacity: 1;
    bottom: 45%; } }
.respond {
  border-left: 5px solid #777;
  margin: 16px 0;
  padding-left: 8px;
  cursor: pointer; }
  .respond-name {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #777; }
    .respond-name img {
      display: block;
      width: 20px;
      height: 20px;
      margin-right: 4px;
      border-radius: 50%; }
  .respond-content {
    margin-top: 4px;
    line-height: 1.2;
    font-size: 14px;
    color: #777; }

.likeIcon {
  display: inline-block;
  position: relative;
  width: 32px;
  height: 20px;
  margin: 4px 2px 0 0;
  cursor: default; }
  .likeIcon img {
    position: absolute;
    border-radius: 50%; }
  .likeIcon img:nth-child(1) {
    top: 4px;
    left: 0;
    width: 16px;
    height: 16px; }
  .likeIcon img:nth-child(2) {
    top: 0;
    right: 0;
    width: 24px;
    height: 24px; }
  .likeIcon:hover .likeIcon-name {
    visibility: visible; }
  .likeIcon-name {
    visibility: hidden;
    position: absolute;
    top: 2px;
    left: 0;
    z-index: 10;
    padding: 4px;
    background-color: #fff;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    border: 1px solid #aaa; }

/*# sourceMappingURL=style.css.map */