<style>
@charset "UTF-8";

/* ウェブフォントの読み込み */
@font-face {
    font-display: swap;
}

/* 全体に適用する */
* {
    margin: 0;
    padding: 0;
    font-weight: normal;
    background-color: #fff;
}

/* コンテナ */
#wrap {
    margin: auto auto 0;
}

/* 基本設定 */
body {
    text-align: center;
    background-color: #fff;
    line-height: 1.3em;
    font-size: 1em;
    color: #000;
}

p{
  font-size: 0.9em;
  line-height: 1.5em;
  margin:auto auto 1em auto;
}

section{
  font-size: 0.8em;
  margin:auto 0.4em;
}

section.index {
  margin:0 auto 1em auto;
  line-height: 1.5em;
}

section.comics {
  font-size: 0.9em;
  margin:0.5em 0 1.5em 0;
  line-height: 1.5em;
}

/* リンク */
a {
    display: inline-block;
    padding: 0;
    color:red;
    border-color: red;
    background:rgba(0,0,0,0);
}

/* ヘッダー */
header{
    position: relative;
    width:90%;
    text-align: center;
    margin: 1.5em auto auto;
}

/* 見出し */
/* 個別ページ見出し */
h1 {
    margin-bottom: 0.5em;
    text-indent: 0.2em;
    line-height: 1.2em;
    font-size: 1.2em;
}

/* トップページ見出し */
h2 {
    text-align: center;
    margin-bottom: 0.5em;
    position: relative;
    padding: 1rem 1rem;
}

h2:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    content: '';
    background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
    background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
    background-size: 7px 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* トップページ→各ページリンク */
h3 {
    line-height: 1.2em;
    font-size: 1em;
}

/* コミックス */
h4 {
    padding:0em 0.5em;
    line-height: 1.7em;
    font-size: 1em;
    color:white;
    background-color:royalblue;
}

/* 小ネタ */
.koneta h4 {
    padding: 0.1em 0.5em;
    margin: 0.5em 0;
    font-size: 1.1em;
    color:#fff;
    background-color:#17c3e6;
}

section.koneta {
  font-size: 0.9em;
  margin:0.5em 0 1.5em 0;
  line-height: 1.5em;
}

/* ラジオ */
.radio h3 {
    font-size: 0.9em;
    padding:0.3em 0;
}

.radio h4{
    font-size: 0.9em;
    background-color:#94cccc;
}

.radio h4 a {
    color:white;
    border-color: black;
}

.radio a:hover {
    color:black;
}


/* トップページ説明 */
h5 {
    text-align:center;
}


/* メインコンテンツ */
main {
    text-align: left;
    margin: 1em 1em 3em;
    word-break: break-all;
}


/* テーブル アニメ*/
.anime{
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85em;
}

.anime td,
.anime th{
  display: block;
}

.anime th{
  margin:1em auto 0.5em 0;
  padding: 0.2em 0 0.2em 0.5em;
  line-height:1.5em;
}

.anime th.anime1{
  background: #ffd580;
}

.anime th.anime2{
  background: #ffa64d;
}

.anime td{
  margin:auto 0.5em auto;
  line-height: 1.5em;
}

/* テーブル 各話キャラ*/
.charamemo{
  border-collapse: collapse;
  width: 90%;
  font-size: 0.85em;
}

.charamemo td,
.charamemo th{
  display:table-cell;
  border:0.5px solid #000;
  padding:0.5em;
}

.charamemo th{
  width:3em;
  background:pink;
  line-height: 1.4em;
}

.charamemo td{
  line-height: 1em;
}

/* テーブル キャラ表記*/
.charamemo{
  border-collapse: collapse;
  width: 90%;
  font-size: 0.85em;
}

.charamemo td,
.charamemo th{
  display:table-cell;
  border:0.5px solid #000;
  padding:0.2em 0.5em;
  font-size: 0.9em;
}

.charamemo th{
  width:3em;
  background:lightgray;
  line-height: 1.2em;
}

.charamemo td{
  line-height: 1.4em;
}


/* フッター */
footer{
    padding: auto auto 1em auto;
    line-height: 1em;
    text-align: center;
    margin: 1em auto 1em;
}

footer p{
    margin: auto;
    padding:0.7em;
    display:inline-block;
    font-size: 0.8em;
    height:30px;
    line-height:30px;
}

footer span{
    margin: 1em 0;
    padding: 1em;
    font-size: 0.8em;
    text-align: center;
    color:gray;
}


form#myform{
    margin: 0;
    padding: 0;
}

.date{
    display: block;
    margin: 0;
    padding: 1.5em 0 0 0;
}


/* 拍手画像 */
footer p img {
    vertical-align:middle;
    width: 30px;
    height: 30px;
}

footer p span.footicon{
    font-size: 0.9em;
}

.message:active{
    opacity: 0.5;
}

input[type=radio]{
    display:none;
}

input[type=image]{
    vertical-align: middle;
    width: 30px;
    height: auto;
/*    background-image: url('../img/kissclap2.png'); */
    transition: all 0.3s ease;
}

input[type=image]:active{
    opacity: 0.5;
}

/* ボタン本体のスタイル */
.heart-button {
  /* ボタン要素の大きさや色 */
  position: relative;
  display: inline-block;
  /* その他必要なスタイル */
  transition: all 0.3s ease;
}

/* ハートの共通スタイル */
.heart-button::before{
  content: "";
  background-size: contain;
  width: 10px;
  height: 10px;
  position: absolute;
  opacity: 0;
  background-image: url('../img/heart.svg');
  z-index: 9999;
  top: 7px;
  left: -1px;
}



/* ========= ホバー時のスタイル ======== */

/* ボタンホバー時の左上のハートのスタイル */
.popup-heart::before {
  animation: heart 1.5s 1 ease-out;
}

/* ========= アニメーションの設定 ======== */
@keyframes heart {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(-20px) scale(1.4);
    opacity: 0;
  }
}

/* twitterアイコン */
.twitter{

}

img.twitter-button{
    display:inline-block;
    vertical-align: middle;
    width: 30px;
    height: auto;
}

.twitter:active{
    opacity: 0.5;
}


/* 横幅640px以上で読み込む */
@media screen and (min-width:640px) {
main {
    text-align: justify;
    margin: 1em auto 3em;
    padding: 0 10%;
    word-break: break-all;
}

p{
  font-size: 0.85em;
  line-height: 1.7em;
}

section.comics {
  font-size: 0.85em;
  line-height: 1.7em;
}

section.koneta {
  font-size: 0.85em;
  line-height: 1.7em;
}

/* テーブル アニメ*/
.anime{
  border-collapse: collapse;
  margin: 1em 0;
  table-layout: fixed;
}

.anime td,
.anime th{
  display:table-cell;
  border:0.5px solid #000;
  padding:0.5em;
}

.anime th{
  width:3em;
}

.anime th.anime1{
  background: #ffd580;
}

.anime th.anime2{
  background: #ffa64d;
}

.anime td{
  line-height: 1.3em;
}

/* テーブル キャラ表記*/
.charamemo{
  width: 60%;
}


}
</style>