@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=News+Cycle&display=swap');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

body {
  background: #ccc;
  line-height: 1.6;
  font-family:Helvetica, Arial, sans-serif, "Meiryo UI";
  color: #333;
  font-size: 13px;
}

/* ヘッダー */
.title {
  margin: 0;
  color: #000;
  text-align: center;
  height: 40px;
}
h1 {
  font-family: 'News Cycle', sans-serif;
  font-size:160%;
  margin: 0;
}

/* リンクタグ */
a {
  outline: none;
  color: #008080;
  text-decoration:none;
}
a:hover {
  color: #4169e1;
  text-decoration:underline;
}

/* 内容 */
#wrapper {
  margin: 10px auto;
  height: auto !important;
  min-height: 100%;
  background-color: #ccc;
  color: #333;
  width: 560px;
}

/* 画像周り */
.center {
  text-align: center;
}
img {
  max-width: 100%;
  height: auto;
}
a img {
  border: none;
}

/* 動画 */
.video{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.video iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* 見出し */
h2 {
  font-family: 'News Cycle', sans-serif;
  margin: 20px 0;
  padding: 0 10px;
  background-color: #333;
  color: #f6f6f6;
  font-size: 18px;
}
h3 {
  font-family: 'News Cycle', sans-serif;
  margin: 20px 0;
  color: #333;
  border-bottom: dashed 2px #333;
}
h4 {
  font-family: 'News Cycle', sans-serif;
  text-align: center;
  padding:5px;
  margin:5px 0px;
  font-size:120%;
}

.top2 {
  text-align: center;
}

/* 引用 */
blockquote{
  position:relative;
  border:1px solid #333;
  border-radius:10px;
  padding:20px;
}
blockquote:before{
  position:absolute;
  font-family:'FontAwesome';
  content:'\f10d';
  font-size: 20px;
  color:#999;
  top:10px;
  left:10px;
}
blockquote:after{
  position:absolute;
  font-family:'FontAwesome';
  content:'\f10e';
  font-size: 20px;
  color:#999;
  right:10px;
  bottom:10px;
}
blockquote p {
  padding-top: 15px;
}
blockquote cite {
  display: block;
  font-size: 0.8rem;
  text-align: right;
  color: #333;
  padding-right:20px;
}

/* リスト */
ol {
  margin: 0 10px;
}
ul {
  margin: 0 10px;
  list-style-type: square;
}
li {
  margin: 0 10px;
}

/* 強調 */
em {
  font-weight: bold;
  font-style: normal;
}
strong {
  color: #f6f6f6;
  background-color: #333;
}

/* Pタグ */
p {
  padding-bottom: 10px;
}

.p1{
  text-align: center;
  padding:5px;
  margin:5px 0px;
  font-size:90%;
}

.p2{
  text-align: center;
  padding:5px;
  margin:5px 0px;
  font-size:120%;
  color: #f00;
}

/* テーブル */
table{
  border-collapse:separate;
  border-spacing: 5px;
  width: 100%;
}

table th,table td{
  border-radius: 5px;
  text-align: center;
  padding: 10px 0;
}

table th{
  background-color: #333;
  color: white;
  border:solid 1px #333;
  width: 200px;
}

table td{
  background-color: #ccc;
  border:solid 1px #333;
}

/* ナビゲーション */
.navigation {
  text-align: center;
}
.navigation a {
  text-decoration: none;
}

/* フッター */
footer {
  height: 50px;
  text-align: center;
}

/* メディアクエリ */
@media only screen and (max-width: 560px) {
  html, body {
    padding: 0 5px;
    box-sizing: border-box;
    height: auto;
  }
  #wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  table th{
  width: auto;
  }
}
@media only screen and (max-width: 375px) {
  .title {
    height: 30px;
  }
  h1 {
    font-size:90%;
  }
  h2 {
    font-size: 90%;
  }
}