/*/////////////////////////////////////////////////
//LINE風チャット画面(会話方式)を記事に表示する方法
/////////////////////////////////////////////////*/

  
@media screen and (min-width: 960px) {
    img {
      max-width: 960px;
    }
  }
  
  .font-main {
      padding: 2px;
    }
  
    
  #btn1 {
      margin-bottom: 4px;
    }
  
  .line__container {
      padding:0;
      /*background: #7494c0;*/
      background: #8DABD9;
      overflow: hidden;
      max-width: 400px;
      margin: 20px auto;
      font-size: 80%;
    }
    
    /* タイトル部分 */
    .line__container .line__title {
      background: #273246;
      padding: 10px;
      text-align: center;
      font-size: 150%;
      color: #ffffff;
    }
    
    /* 会話部分 */
    .line__container .line__contents {
      padding: 10px;
      overflow: hidden;
      line-height: 135%;
    }
    
    .line__container .scroll {
      height: 500px;
      overflow-y: scroll;
    }
    
    /* スタンプ画像最大幅 */
    .line__container .stamp img {
      max-width:150px;
    }
    
    /* 相手の会話 */
    .line__container .line__left {
        width: 100%;
        position: relative;
        display: block;
        margin-bottom: 5px;
        max-width: 80%;
        clear: both;
    }
    
    /* アイコン画像 */
    .line__container .line__left figure {
        width: 50px;
        position: absolute;
        top: 15px;
        left: 0;
        padding: 0;
        margin: 0;
    
    }
    
    /* 正方形を用意 */
    .line__container .line__left figure img{
        border-radius: 50%;
        width: 50px;
        height: 50px;
    }
    
    .line__container .line__left .line__left-text {
      margin-left: 70px;
    }
    
    .line__container .line__left .line__left-text .name {
      font-size: 80%;
      color: #ffffff;
    }
    
    /* コメントエリア */
    .line__container .line__left .text {
      margin: 0;
      position: relative;
      padding: 10px;
      border-radius: 20px;
      background-color: #ffffff;
    }
    
    /* 吹き出し */
    .line__container .line__left .text::after {
      content: '';
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      left: -10px;
      top: 10px;
      border-right: 20px solid #ffffff;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
    }
    
    /* 自分の会話 */
    .line__container .line__right {
        position: relative;
        display: block;
        margin: 5px 0;
        max-width: 75%;
        float: right;
        margin-right: 15px;
        clear: both;
    }
    
    /* コメントエリア */
    .line__container .line__right .text {
      padding: 10px;
      border-radius: 20px;
      background-color: #8de055;
      margin: 0;
      margin-left: 80px;
    }
    
    /* 吹き出し */
    .line__container .line__right .text::after {
      content: '';
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      right: -10px;
      top: 10px;
      border-left: 20px solid #8de055;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
    }
    
    /* 自分がスタンプを送る時 */
    .line__container .line__right .stamp {
      position: relative;
      margin-left: 80px;
    }
    
    /* 既読エリア */
    .line__container .line__right .date {
      content: '';
      position: absolute;
      display: block;
      width: 100px;
      text-align: right;
      left: -30px;
      bottom: 0px;
      font-size: 80%;
      color: #ffffff;
    }
    
  
    textarea{
      width: 100%;
      height: 100px;
      padding: 5px;
      border-radius: 5px;
      font-size: 150%;
      border: 1px solid #ccc;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
  }
  /*
    input[type='submit']{
      border: none;
      display: block;
      width: 100%;
      max-width: 250px;
      padding: 1.0rem 1.0rem;
      border-radius: 8px;
      background-color: #1755aa;
      color: #fff;
      font-weight: bold;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      cursor: pointer;
      margin: 0 auto;
  }
  */
  /* table */
  #tbl-bdr table,#tbl-bdr td,#tbl-bdr th {
      border-collapse: collapse;
      border:1px solid rgb(185, 185, 185);
      padding: 0.1em 0.1em;
      }
  
  /* カードレイアウト部分をラッピングし、////////////////////////////////////////////////////////
  Flexboxを指定"space-between"で各アイテムを均等に配置し、
  最初と最後のアイテムを端に寄せます。///////////////////////////////////////////////////////////// */
  #cardlayout-wrap {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: justify;
      margin: 2em auto;
      max-width: 960px;
      width: 100%;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      justify-content: space-between;
      text-align: center;
  }
  
  #view {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: justify;
      margin: 2em auto;
      max-width: 1960px;  /*      960px   */
  
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      justify-content: space-between;
      text-align: center;
  }
  
  /* リンクテキストの下線を非表示 */
  a.card-link {
      text-decoration: none;
  }
  
  /* カードレイアウト内の画像を幅いっぱいに表示 */
  #cardlayout-wrap img {
      display: block;
      max-width: 100%;
      height: auto;
  }
  
  .card-figure {
      margin: 0;
      padding: 0;
      text-align: center;
  }
  
  /* カードレイアウトのタイトル部分 */
  .card-title {
      margin: 0.6em 0 0;
      color: #333;
      text-align: center;
      font-size: 1.0em;
  }
  
  /* カードレイアウトの説明文部分 */
  .card-text-tax {
      margin: 0;
      padding: 0.1em;
      color: #818181;
  }
  
  
  /* カードレイアウトを1カラムで配置 */
  .card-list {
      margin: 0.5em auto;
      padding: 0;
      width: 100%;
      background: #f0f0f0;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  }
  
  /* 画面幅768px以上の場合カードレイアウトを2カラムで配置 768px*/
  @media all and (min-width: 668px) {
      .card-list {
          margin: 0.5em 0;
          width: calc(100% / 4); /* 100%幅を2で割るという指定 */
      }
  }
  
  /* 画面幅992px以上の場合カードレイアウトを3カラムで配置 */
  @media all and (min-width: 1092px) {
      .card-list {
          width: calc(100% /7); /* 100%幅を3で割るという指定 */
      }
  
  
  /* 最後の行が3列より少ない場合左寄せにレイアウトさせる */
      #cardlayout-wrap::after{
          content: "";
          display: block;
          width: calc(100% /7);
      }
  }
  
  /*//////////////////////////////////////////////////////////////////////////
  
  /////////////////////////////////////////////////////////////////////////////*/
  a.btn_blue {
      display: block;
      max-width: 250px;
      margin: 0 auto;
      padding: 1.0rem 1.0rem;
      background-color: #1755aa;
      border-radius: 8px;
      box-sizing: border-box;
      text-decoration: none;
      transition: 0.3s;
  }
  a.btn_blue span.bl__text {
      display: block;
      position: relative;
      color: #fff;
      font-size: 16px;
      text-align: center;
      padding-left: 10px;
  }
  a.btn_blue span.bl__text:before {
      content: '';
      width: 20px;
      height: 20px;
      background: #ffffff;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      margin: auto;
  }
  a.btn_blue span.bl__text:after {
      content: '';
      width: 8px;
      height: 8px;
      border-top: 3px solid #1755aa;
      border-right: 3px solid #1755aa;
      box-sizing: border-box;
      transform: rotate(45deg);
      position: absolute;
      top: 0;
      left: 5px;
      bottom: 0;
      margin: auto;
      transition: 0.3s;
  }
  a.btn_blue:hover {
      background-color: #01b5d0;
  }
  a.btn_blue:hover span.bl__text:after {
      border-top: 3px solid #01b5d0;
      border-right: 3px solid #01b5d0;
  }
  @media (max-width: 736px) {
      a.btn_blue {
          max-width: 280px;
          padding: 1.5rem 2.0rem;
      }
      a.btn_blue span.bl__text {
          font-size: 14px;
      }
  }
  
  
  a.button1 {
      display       : block; /*inline-block;*/
      border: none;
      border-radius : 8px;          /* 角丸       */
      font-size     : 11pt;        /* 文字サイズ */
        text-align    : center;      /* 文字位置   */
  /*      cursor        : pointer;     /* カーソル   */
        padding       : 0.9rem 0.0rem; /*5px 6px;   /* 余白       */
       background    : #1755aa;     /* 背景色     */
        color         : #ffffff;     /* 文字色     */
        line-height   : 1.8em;         /* 1行の高さ  */
      /*opacity       : 1;           /* 透明度     */
  /*      transition    : .3s;         /* なめらか変化 */
  /*      max-width: 250px;
   /*     margin: 0 auto;*/
   text-decoration: none;
   width : 250px
    }
    .button1:hover {
      opacity       : 0.8;         /* カーソル時透明度 */
    }
  
  .button1 {
      display       : block; /*inline-block;*/
      border: none;
      border-radius : 10px;          /* 角丸       */
      font-size     : 11pt;        /* 文字サイズ */
        text-align    : center;      /* 文字位置   */
  /*      cursor        : pointer;     /* カーソル   */
        padding       : 0.9rem 0.0rem; /*5px 6px;   /* 余白       */
       background    : #1755aa;     /* 背景色     */
        color         : #ffffff;     /* 文字色     */
        line-height   : 1.8em;         /* 1行の高さ  */
      /*opacity       : 1;           /* 透明度     */
  /*      transition    : .3s;         /* なめらか変化 */
  /*      max-width: 250px;
   /*     margin: 0 auto;*/
   width : 250px
    }
    .button1:hover {
      opacity       : 0.8;         /* カーソル時透明度 */
    }
  
    .button2 {
      display       : inline-block; /*inline-block;*/
      border: none;
      border-radius : 6px;          /* 角丸       */
      font-size     : 10pt;        /* 文字サイズ */
        text-align    : center;      /* 文字位置   */
  /*      cursor        : pointer;     /* カーソル   */
        padding       : 0.0rem 0.4rem; /*5px 6px;   /* 余白       */
       background    : #1755aa;     /* 背景色     */
        color         : #ffffff;     /* 文字色     */
        line-height   : 1.8em;         /* 1行の高さ  */
  
    }
    .button2:hover {
      opacity       : 0.8;         /* カーソル時透明度 */
    }
  
    a.button2 {
      display       : inline-block; /*inline-block;*/
      border: none;
      border-radius : 6px;          /* 角丸       */
      font-size     : 10pt;        /* 文字サイズ */
        text-align    : center;      /* 文字位置   */
  /*      cursor        : pointer;     /* カーソル   */
        padding       : 0.0rem 0.4rem; /*5px 6px;   /* 余白       */
       background    : #1755aa;     /* 背景色     */
        color         : #ffffff;     /* 文字色     */
        line-height   : 1.8em;         /* 1行の高さ  */
        text-decoration: none;
    }
    a.button2:hover {
      opacity       : 0.8;         /* カーソル時透明度 */
    }
  
  .button3 {
      display       : inline-block;
      border-radius : 6px;          /* 角丸       */
      font-size     : 10pt;        /* 文字サイズ */
      text-align    : center;      /* 文字位置   */
      cursor        : pointer;     /* カーソル   */
      padding       : 7px 8px;   /* 余白       */
      background    : #1755aa;     /* 背景色     */
      color         : #ffffff;     /* 文字色     */
      line-height   : 1.1em;         /* 1行の高さ  */
      opacity       : 1;           /* 透明度     */
      transition    : .3s;         /* なめらか変化 */
      text-decoration: none;
    }
    .button3:hover {
      opacity       : 0.8;         /* カーソル時透明度 */
    }
  
  /***************************** **/
  .table2 {
     /* display       : inline-block;*/
      border: 1px solid #999;
      border-radius: 10px;
      border-collapse: separate;
      padding       : 5px 6px;
      height: 1px;
    }
    .table2 th {
      background-color: #eee;
      border-right: 1px solid #ccc;
    }
    .table2 th, .table td {
      padding: 8px;
    }
    .table2 tr {
      border-top: 1px solid #ccc;
    }
    .table2 tr:first-child {
      border-top: 0;
    }
  
    .table3 {
      /* display       : inline-block;*/
       border: 1px solid rgb(65, 13, 13);
       border-radius: 10px;
       border-collapse: collapse;
       padding       : 5px 6px;
     }
     .table3 th {
       background-color: #eee;
       border-right: 1px solid rgb(46, 8, 8);
     }
     .table3 th, .table3 td {
       padding: 4px;
       border: 1px solid #ccc;
     }
     .table3 tr {
       border-top: 1px solid #ccc;
     }
     .table3 tr:first-child {
       border-top: 0;
     }
  
     
    /* buttom  <input type="text" class="form1-input" placeholder="text" /> */
  .form1-input {
      box-sizing: border-box;
      /*width: 100%;*/
      /*height: 30px;*/
      padding: 3 10px;
      margin: 5px 0;
      font-size: 16px;
      color: #333;
      border: solid 1px #ccc;
      border-radius: 6px;
      outline: 0;
      transition: 0.3s;
      -webkit-appearance: none;
    }
    
    .form1-input:focus {
      border: 1px solid #00b5ad;
    }