/* common */
/* small screen */


body {
  font-family: Verdana, sans-serif;

}


ul {
  margin:   5;
  padding-left: 0;
  list-style-type: decimal;
}



a {
  display: inline-block;
  color: #000;
  background-color:  none;
  text-decoration:none;
  margin: 0;
}

a:link{
}

a:hover {
  opacity:0.5;
}

a:visited {
}

a:active {
}

a.pull2 {
  color: #1D2741;
  text-align:left;
  padding: 0;
  margin: 0;
}

a.push {
  display: inline-block;
  color: #fff;
  background-color:  #85B0B1;
  text-align:center;
  padding: 5px;
  margin: 0;
  border-radius: 20px;
}

a.push0 {
  display: inline-block;
  color: #000;
  background-color:  none;
  text-align:left;
  text-decoration: underline;
  padding: 5px;
  margin: 0;
  border-radius: 20px;
}


a.push7 {
  display: inline-block;
  color: #fff;
  background-color:  #6A9B9D;
  text-align:center;
  padding: 5px;
  margin: 0;
  border-radius: 20px;
}

div.push9 {
  font-size: 24px;
  color: #5C8283;
  padding: 5px;
  margin: 0;
  border-radius: 20px;
}

p.time {
  font-size: 12px;
   margin: 8px;
   padding: 0px;
     line-height: 15px;
  color: #6D7282;
  align-self: center;
}

h1 {
    font-size: 32px;
    line-height: 2em;
  margin: 0;
}


/*---------------
◆ ふきだし ◆
---------------*/

/*=== 共通設定 ===*/

/*全体の上下左右の余白*/
.fuki {margin: 20px 0 ;}
/*テキスト回り込み解除*/
.fuki:after,.fuki:before {clear: both; content: ""; display: block;}

/*アイコン画像の設定*/
.fuki figure {margin: 0; display: block;}
.fuki figure img {
width: 100%;
height: 100%;
margin: 0;
vertical-align: middle;
border: 1px solid #fff; /*★アイコン画像の枠線の太さと色の調整*/
}
/*アイコン画像の設定*/
.fuki-img-left {margin-left: 10px; margin-top: 1px; float: left;}
.fuki-img-right {margin-right: 10px margin-top: 1px; float: right;}
.fuki-img-left,.fuki-img-right {width: 90px; height: 90px;}

/*アイコン画像の名前*/
.fuki-img-name {padding: 0; margin-top: 3px; font-size: 10px; line-height: 1.2em; font-weight: 400; text-align: center; display: block;}


/*=== 会話風ふきだし ===*/
.chat-text-left,.chat-text-right {
position: relative;
margin: 0 100px 16px;
padding: 16px;
box-shadow: 1px 1px 5px #aaaaaa90; /*★ふきだしの影*/
border-radius: 10px; /*★ふきだしの丸さ調整*/
}
.chat-text-left p,.chat-text-right p {
margin:0 !important;
font-size: 16px;
color: #; /*★ふきだし内テキスト文字色*/
}

/*左からのふきだし*/
.chat-text-left {
background-color: #f0f0f0; /*★①左ふきだし背景色*/
border: 1px solid #aaa; /*★②左ふきだし枠線の色*/
}
/*左からのふきだしの三角部分*/
.chat-text-left:after {
position: absolute;
top: 16px; left: -22px; content: '';
border: 12px solid transparent;
border-right: 12px solid #f0f0f0; /*★①ふきだし背景色*/
}
.chat-text-left:before {
position: absolute;
top: 16px; left: -24px; content: '';
border: 12px solid transparent ;
border-right: 12px solid #aaa; /*★②左ふきだし枠線の色*/
}

/*右からのふきだし*/
.chat-text-right {
background-color: #faf0c6; /*★③右ふきだし背景色*/
border: 1px solid #f0dc8e; /*★④右ふきだし枠線の色*/
}
/*右からのふきだしの三角部分*/
.chat-text-right:after {
position: absolute;
top: 16px; right: -22px; content: '';
border: 12px solid transparent;
border-left: 12px solid #faf0c6; /*③右ふきだし背景色*/
}
.chat-text-right:before {
position: absolute;
top: 16px; right: -24px; content: '';
border: 12px solid transparent;
border-left: 12px solid #f0dc8e; /*★④右ふきだし枠線の色*/
}

/*=== もくもくふきだし ===*/
.mkmk-text-left,.mkmk-text-right{
position: relative;
margin: 0 100px 16px;
padding: 16px;
box-shadow: 1px 1px 5px #aaaaaa90; /*★もくもくの影*/
border-radius: 30px; /*★もくもくの丸さ調整*/
}
.mkmk-text-left p,.mkmk-text-right p {
margin: 0 !important;
font-size: 16px;
color: #555; /*★もくもく内テキスト文字色*/
}
/*左からのもくもく*/
.mkmk-text-left {
background-color: #FCEEEB; /*★⑤左もくもく背景色*/
border: 1px solid #f9e1dc; /*★⑥左もくもく枠線の色*/
}
/*左もくもくの丸い部分*/
.mkmk-text-left:before {
position: absolute;
content: ''; top: 16px; left: -16px;
border-radius: 50%; width: 12px; height: 12px;
background-color: #FCEEEB; /*★⑤左もくもく背景色*/
border: 1px solid #f9e1dc; /*★⑥左もくもく枠線の色*/
}
.mkmk-text-left:after {
position: absolute;
content: ''; top: 26px; left: -26px;
border-radius: 50%; width: 8px; height: 8px;
background-color: #FCEEEB; /*★⑤左もくもく背景色*/
border: 1px solid #f9e1dc; /*★⑥左もくもく枠線の色*/
}

/*右からのもくもく*/
.mkmk-text-right {
background-color: #B0E0E6; /*★⑦右もくもく背景色*/
border: 1px solid #9fd8df; /*★⑧右もくもく枠線の色*/
}
/*右からのもくもくの丸い部分*/
.mkmk-text-right:before {
position: absolute;
content: ''; top: 16px; right: -16px;
border-radius: 50%; width: 12px; height: 12px;
background-color: #B0E0E6; /*★⑦右もくもく背景色*/
border: 1px solid #9fd8df; /*★⑧右もくもく枠線の色*/
}
.mkmk-text-right:after {
position: absolute;
content: ''; top: 26px; right: -26px;
border-radius: 50%; width: 8px; height: 8px;
background-color: #B0E0E6; /*★⑦右もくもく背景色*/
border: 1px solid #9fd8df; /*★⑧右もくもく枠線の色*/
}

/*=== レスポンシブ設定 ===*/
@media (max-width: 767px){
/*スマホ表示の時は横幅いっぱいに広げる*/
.chat-text-left,.mkmk-text-left {margin-left: 90px; margin-right: 0;}
.chat-text-right,.mkmk-text-right {margin-left: 0; margin-right: 90px;}
/*スマホ表示の時はふきだし画像サイズを小さくする*/
.fuki-img-left,.fuki-img-right {width: 80px; height: 80px;}
}

/*-- ふきだしここまで --
------------------------*/

img.sneak {
  width: 100%;
  height: 46%;
}

img.sneakc {
  width: 100%;
  height: 46%;
}


img.index0 {
width: 48px;
height: 48px;
object-fit: cover; /* この一行を追加するだけ！ */
}

img.index {
  width: 64px;
  height: 64px;
  object-fit: cover; /* この一行を追加するだけ！ */
}

img.index1 {
width: 32px;
height: 32px;
object-fit: cover; /* この一行を追加するだけ！ */
}

img.index2 {
width: 128px;
height: 128px;
object-fit: cover; /* この一行を追加するだけ！ */
}


.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0px;
  margin: 0px;
}

.box1{
  width: 96px;
  flex-basis: 96px;
  text-align: center;
  margin: 4px;
  padding: 4px;
  cursor: pointer;
}

.box1:hover{
  opacity: 0.5;
}

.image {

}


.text {
  font-size: 16px;
  line-height: 30px;
  margin: 4px;
  padding: 0px
}


.copy {
  font-family: Verdana, sans-serif;
  font-size: 8px;
  line-height: 16px;
  margin: 0px;
  padding: 16px;
  border: 0px;
  text-align: center;
  background-color: #dddddd;
}


.SubtitleTab {
  display: inline-block;
  width: 100%;
  height: 64px;
  /* background: #1D2741; */
  /* color: #fff; */
  background: #fff;
  color: #1D2741;
  border-style: solid;
  border-color:  #1D2741;
  text-align:center;
  text-decoration: none;
  padding: 0px;
  margin: 0px;
  border-radius: 35px;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: solid 2px black;
}



table th {/*table内のthに対して*/
  padding: 10px;/*上下左右10pxずつ*/
  background:#eee;
  /* border: dashed 1px; */
  border-bottom: 1px solid #EEEEEE;
}


table th.black {/*table内のthに対して*/
  color: white;
  padding: 10px;/*上下左右10pxずつ*/
  background:#5c8283;
  /* border: dashed 1px; */
  border-bottom: 1px solid #5c8283;
}

table td {/*table内のtdに対して*/
  padding: 10px 10px;/*上下10pxで左右10px*/
  /* border: dashed 1px; */
  border-bottom: 1px solid #EEEEEE;
}



table td.red {/*table内のthに対して*/
  padding: 10px;/*上下左右10pxずつ*/
  background:#f2c9ce;
  /* border: dashed 1px; */
  border-bottom: 1px solid #f2c9ce;
}

table td.yellow {/*table内のthに対して*/
  padding: 10px;/*上下左右10pxずつ*/
  background:#eae7d2;
  /* border: dashed 1px; */
  border-bottom: 1px solid #eae7d2;
}


table td.blue {/*table内のthに対して*/
  padding: 10px;/*上下左右10pxずつ*/
  background:#e5f1ed;
  /* border: dashed 1px; */
  border-bottom: 1px solid #e5f1ed;
}

table td.purple {/*table内のthに対して*/
  padding: 10px;/*上下左右10pxずつ*/
  background:#e9d9e1;
  /* border: dashed 1px; */
  border-bottom: 1px solid #e9d9e1;
}

table td.black {/*table内のthに対して*/
  padding: 10px;/*上下左右10pxずつ*/
  background:#d0d9da;
  /* border: dashed 1px; */
  border-bottom: 1px solid #d0d9da;
}

table.normal {
  width: 100%;
  border-collapse: collapse;
  border: solid 2px black;
}

table.normal th {/*table内のthに対して*/
  padding: 10px;/*上下左右10pxずつ*/
  background:#eee;
  border: dashed 1px;
}

table.normal td {/*table内のtdに対して*/
  padding: 10px 10px;/*上下10pxで左右10px*/
  border: dashed 1px;
}



table.Index {
    border-collapse: collapse;
  text-align: left;
}

table.Index td th {
  border-bottom: 1px solid black;

}


table.Index td {
  padding: 3px 10px;
}


aside {
  display: none;
}



img.sneak {
  width: 100%;
}



        @media screen and (min-width:1024px) {
            /*　画面サイズが1024pxからはここを読み込む　*/
            .container {
              display: flex;
              width: 800px;
              flex-direction: row;
              flex-wrap: wrap;
              padding: 4px;
              margin: 0 auto;
            }



        @media (min-width: 800px) {



            .container {
              display: flex;
              width: 800px;
              flex-direction: row;
              flex-wrap: wrap;
              padding: 4px;
              margin: 0 auto;
            }


    @media (min-width: 550px) {



      img.sneakc {
        width: 50%;
      }


    @media (min-width: 375px) {



      img.sneakc {
        width: 50%;

      }


  aside {
    display: none;
  }

/*
@media (min-width; 600px) {

}

@media (min-width: 800px) {

  aside {
    display: block;
  }
}
common */