@charset "utf-8";

body {
  box-sizing:border-box;
  margin:0;
  padding:4px 4px 32px 4px;
  font-family: 
    "Meiryo UI","メイリオ","ＭＳ Ｐゴシック","Helvetica Neue",Arial,
    "Hiragino Kaku Gothic ProN","Hiragino Sans",
    Meiryo,sans-serif;
  font-size:18px;
  /* iOS対応 */
  -webkit-text-size-adjust: 100%;
}

h1.title,h2.title,h3.title,h4.title,h5.title{
  margin: 0.4em 0 0.4em 0;
  padding: 0;
  font-weight: bold;
  color: #00A;
  position: relative;
  overflow-wrap:anywhere;
  word-break:break-all;
  max-width:100%;
}
h1.title::before,h2.title::before,h3.title::before,h4.title::before,h5.title::before{
  content:'';
  background:linear-gradient(to right, #009 0%, #ccf 100%);
  height:1px;
  bottom:0;
  left:0;
  width:100%;
  position:absolute;
}
h1.title{
  font-size: 2.0em;
}
h2.title{
  font-size: 1.8em;
}
h3.title{
  font-size: 1.6em;
}
h4.title{
  font-size: 1.4em;
}
h5.title{
  font-size: 1.2em;
}

h1.sub,h2.sub,h3.sub,h4.sub,h5.sub{
  margin: 0.4em 0 0.4em 0;
  padding: 0;
  font-weight: bold;
  color: #00A;
  position: relative;
  overflow-wrap:anywhere;
  word-break:break-all;
  max-width:100%;
}
h1.sub{
  font-size: 2.0em;
}
h2.sub{
  font-size: 1.8em;
}
h3.sub{
  font-size: 1.6em;
}
h4.sub{
  font-size: 1.4em;
}
h5.sub{
  font-size: 1.2em;
}


/* 解決済 */
span.resolve{
  margin:2px;
  padding:0.2em;
  display:inline-block;
  font-size:1.0em;
  background:#00a;
  color:#fff;
  border-radius:0.25em;
}
/* 未解決 */
span.noresolve{
  margin:2px;
  padding:0.2em;
  display:inline-block;
  font-size:1.0em;
  background:#fbe;
  color:#333;
  border-radius:0.25em;
}

pre{
  overflow-wrap:anywhere;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
  overflow: hidden;
  font-size: 1.0em;
  color: #000;
  max-width:100%;
  margin:0;
  padding:4px;
  box-sizing:border-box;
}


/* ■テーブル■ */
table.blueback th{
  background: #37B;
  color: #fff;
  font-weight:bold;
}
table.blueback td{
  background: #F0F7FF;
  color: #222;
}
table.redback th{
  background: #D62;
  color: #fff;
}
table.redback td{
  background: #E84;
  color: #fff;
}
table.mamTableResponsive {
  box-sizing:border-box;
  width:100%;
  border-collapse:collapse;
  border:none;
  border-spacing:0;
  table-layout:auto;
  margin:0;
}
table.mamTableResponsive th {
  word-break: break-all;
  word-wrap: break-word;
  overflow: hidden;
  box-sizing:border-box;
  border: solid 1px #ccc;
  margin:0;
  padding:8px;
}
table.mamTableResponsive td {
  word-break: break-all;
  word-wrap: break-word;
  overflow: hidden;
  box-sizing:border-box;
  border: solid 1px #ccc;
  margin:0;
  padding:8px;
}
table.mamTableResponsive .mamBottomBorderThick{
  border-top:none;
  border-left:none;
  border-right:none;
  border-bottom:solid 1px #999;
}
table.mamTableResponsive .mamBottomBorderThin{
  border-left:none;
  border-right:none;
  border-top:none;
  border-bottom:solid 1px #ccc;
  vertical-align:middle;
}
table.mamTableResponsive .mamBottomBorderBlank{
  border:none;
  height:8px;
  padding:0;
  background-color: transparent;
}
table.mamTableResponsive td a{
  color:#00c;
}


  /* ■ボタン■ */
.button{
  display:inline-flex;
  align-items:center;
  margin:4px;
  padding:0.2em 1em 0.2em 1em;
  color:#33a;
  font-weight:bold;
  font-size:1em;
  background:#def;
  border:0px none #000;
  text-decoration:none;
  box-shadow: 2px 2px 6px 1px rgba(0,0,0, 0.6);
  cursor:pointer;
  border-radius:0px 0px 0px 0px;
  vertical-align:middle;
  user-select: none;
  vertical-align:middle;
}
  .button:active{
    box-shadow: 2px 2px 6px 0px rgba(0,0,0, 0.6) inset;
  }
  .button:hover{
    text-decoration:underline;
    text-decoration-style:dashed;
    text-decoration-thickness:1px;
    text-decoration-color:#44f;
  }
  .button>img{
    width:1.0em;
    height:1.0em;
    vertical-align:text-top;
  }


/* トグルスイッチ */
label:has(input[type="checkbox"]){
  display:inline-flex;
  vertical-align:middle;
  line-height:calc(2em + 4px);
  align-items:center;
}
input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:32px;/*基本サイズ お好きなサイズに設定*/
  width:2em;
  height:1em;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  background:#333;
  background:#AAA;/*オフの色*/
  border-radius:0.5em;
  box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;
  -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"]:checked{
  background:#2C2;/*オンの色*/
}
input[type="checkbox"]::before{
  box-sizing:border-box;
  content:"";
  position:absolute;
  left:0.1em;
  top:0.1em;
  bottom:0.1em;
  width:0.8em;
  background:#FFF;
  border-radius:0.4em;
  transform:translate(0%,0%);
  transition:all 0.2s ease-in-out;
  box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6);
  margin:0;
}
input[type="checkbox"]:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
}
input[type="checkbox"]::after{
  box-sizing:border-box;
  position:absolute;
  content:"OFF";
  color:#fff;
  font-size:0.4em;
  left:0.5em;
  text-align:right;
  width:calc(100% - 1em);
  top:50%;
  transform:translate(0,-50%);
}
input[type="checkbox"]:checked::after{
  content:"ON";
  text-align:left;
}



/* ■ページネーション■
  クリック不可の要素は class="no_anc" を追加
  左右矢印の要素は class="mampagerfl"を追加
  数値の要素は class="mampagernum"を追加
  <div class="mamPager">
    <!-- 左矢印 -->
    <a href="javascript:void(0)" class="mampagerfl no_anc" onclick="">&lt;</a>
    <!-- 1ページ目(選択中) -->
    <a href="javascript:void(0)" class="mampagernum no_anc" onclick="">1</a>
    <!-- 2ページ目 -->
    <a href="javascript:void(0)" class="mampagernum" onclick="">2</a>
    <!-- 右矢印 -->
    <a href="javascript:void(0)" class="mampagerfl" onclick="">&gt;</a>
  </div>
*/
.mamPager{
  box-sizing:border-box;
  width: 100%;
  max-width:100%;
  min-width:300px;
  font-size:1em;
  /* outline: 1px dashed lightgray; */
  box-sizing:border-box;
  display:inline-flex;
  flex-wrap:nowrap;
  justify-content:center;
  margin:0;
  padding:0.4em;
}
  .mamPager>a.mampagerfl{
    display:block;text-align:center;text-decoration:none;color:#333;
    background:none;margin:0.1em 0.1em 0.1em 0.1em;
    padding:0em 0.2em 0em 0.2em;border:solid 1px #CCC;
  }
    /* 左右の矢印 */
    .mamPager>a.mampagerfl:not(.no_anc):hover{
      background:#aaa;
    }
    .mamPager>a.mampagerfl.no_anc{
      color:#DDD;
      cursor:default;
    }
    /* ページ番号 */
    .mamPager>a.mampagernum{
      display:block;text-align:center;text-decoration:none;color:#333;background:none;
      margin:0.1em 0.1em 0.1em 0.1em;padding:0em 0.2em 0em 0.2em;border:solid 1px #CCC;
    }
    .mamPager>a.mampagernum:not(.no_anc):hover{
      background:#aaa;
    }
    .mamPager>a.mampagernum.no_anc{
      color:#EEE;background:#333;
      cursor:default;
    }


/* パンくず */
ul.breadcrumb{
  width:100%;
  box-sizing:border-box;
  margin:0;
  padding:8px 0px 8px 0px;
  background:none;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  font-size:0.9em;
  font-weight:bold;
  align-items:center;
  line-height:1.2em;
}
@media screen and (max-width:450px) {
    /* 450以下 */
  ul.breadcrumb{
    font-size:0.9em;
  }
}
ul.breadcrumb>li{
  display: inline-block;
  position: relative;
  margin:0;
  margin-right: 20px;
  padding:0;
  text-aign:bottom;
  max-width:100%
}
ul.breadcrumb>li:not(:last-child)::after {
  content: '>';
  text-align:center;
  font-size:1em;
  position: absolute;
  width:20px;
  padding:0;
  margin:0;
  top: 50%;
  transform:translate(0,-50%);
  left:100%;
  color:#000;
}
ul.breadcrumb>li>a{
  display:inline-block;
  text-decoration:underline;
  text-decoration-color:#BBB;
  text-decoration-thickness: 1px;
  text-decoration-style:dotted;
  color:#000;
  margin:0;
  padding:8px 4px;
  background:#FFF;
  border:1px dotted #999;
  border-radius:8px;
  min-width:40px;
  max-width: 440px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  box-shadow:4px 4px 4px 0 rgba(0,0,0,0.4);
}
@media screen and (max-width:450px) {
    /* 450以下 */
  ul.breadcrumb>li>a{
  max-width: 260px;
  }
}
@media screen and (min-width:450px) and ( max-width:940px) {
    /* 450から900 */
  ul.breadcrumb>li>a{
  max-width: 360px;
  }
}
ul.breadcrumb>li:last-child>a{
  text-decoration:none;
  color:#FFF;
  background:#000;
  pointer-events:none;
  box-shadow:none;
}
ul.breadcrumb>li>a>svg{
  vertical-align:middle;
}
ul.breadcrumb>li:not(:last-child)>a:hover{
  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.6);
}
ul.breadcrumb>li:not(:last-child)>a:active{
  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.6) inset;
}



form{
  margin:0;
  box-sizing:border-box;
  padding:0;
  width:100%;
}

/*
  入力
  <div class="user_input">
    <div>
      <div>
        <span></span>
      </div>
      <div>
        <input>
      </div>
    </div>
  </div>
*/
div.user_input{
  display:flex;
  flex-wrap:wrap;
  margin:0;
  padding:4px;
  overflow-wrap:anywhere;
  word-break:break-all;
  box-sizing:inherit;
}
  div.user_input>div{
    display:flex;
    flex-wrap:nowrap;
    box-sizing:border-box;
    background-color:#fff;
    border-radius:0px;
    margin:0;
    padding:0;
    width:100%;
  }
    div.user_input>div>div:nth-child(1){
      padding:8px 8px;
      color:#000;
      font-weight:bold;
      width:20%;
    }
      div.user_input>div>div:nth-child(1)>span{
        font-weight:normal;
        font-size:0.9em;
      }
    div.user_input>div>div:nth-child(2){
      width:80%;
      max-width:100%;
      padding:4px 4px;
      color#000;
    }
    div.user_input>div>div>input{
      box-sizing:border-box;
      border-radius:4px;
      border:1px solid #000;
      width:100%;
      max-width:1000px;
      margin:0;
      padding:8px;
      font-weight:normal;
      font-size:1em;
    }
    div.user_input>div>div>textarea{
      box-sizing:border-box;
      border-radius:4px;
      border:1px solid #000;
      width:100%;
      max-width:1000px;
      margin:0;
      padding:6px;
      font-weight:normal;
      font-size:1em;
      height:200px;
    }

/* 640px以下の場合 */
@media screen and (max-width: 640px) {
  div.user_input>div{
    flex-wrap:wrap;
    margin:0 0 8px 0;
  }
    div.user_input>div>div{
      width:100%;
      max-width:100%;
    }
    div.user_input>div>div:nth-child(1){
      width:100%;
      padding:8px 4px;
      padding-bottom:0;
    }
    div.user_input>div>div:nth-child(2){
      width:100%;
    }
    div.user_input>div>div.pad-l{
      width:100%;
      padding-left:1em;
    }
}
/* 640px以上の場合 */
@media screen and (min-width: 640px) {
  div.user_input>div{
    flex-wrap:nowrap;
  }
    div.user_input>div>div{
      width:30%;
      max-width:300px;
      min-width:200px;
    }
}


div.alert{
  color:red;
  font-size:0.9em;
}

/* 返信一覧 */
div.message{
  display:flex;
  flex-direction:column;
}
  div.message>div{
    display:flex;
    flex-direction:column;
    /*border-bottom:1px dotted #ccc;*/
  }
    div.message>div>div:nth-child(1){
      display:flex;
      flex-wrap:wrap;
      font-size:0.9em;
      margin:0;
      padding:0;
    }
      div.message>div>div:nth-child(1)>div:nth-child(1){
        color:#fff;
        background:#070;
        padding:4px;
        border-radius:0.5em;
      }
      div.message>div>div:nth-child(1)>div:nth-child(2){
        color:#333;
        padding:4px;
      }
    div.message>div>div:nth-child(2){
      color:#333;
      font-size:1.0em;
      padding-bottom:8px;
    }