﻿@charset 'utf-8'; /*文字コード指定*/

/* ----- css reset(各ブラウザで指定されているスタイルを初期化)と全体設定 ----- */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td, img {
    margin: 0; /*ボックス外側の余白(値1つは上下左右をまとめて指定)*/
    padding: 0; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
    border: 0; /*境界線指定*/
}

html, body, .container, .content-wrap {
    overflow: hidden; /*ボックスのはみ出た部分の表示指定(hiddenは非表示)*/
    width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/
    height: 100%; /*領域の高さ指定*/
}

body {
    margin: 0; /*ボックス外側の余白*/
    background: #fff; /*背景指定*/
    color: #333; /*文字色指定*/
    font-size: 75%; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
    font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
    line-height: 1; /*行の高さ指定(数値のみの場合はfont-sizeの倍数)*/
}

ol, ul {
    list-style: none; /*リストマーカーの種類指定(noneはなし)*/
}

.container {
    width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/
    margin: auto; /*ボックス外側の余白*/
}

.content-wrap {
    /*はみ出た部分の表示指定(scrollははみ出た部分をスクロールで表示)*/
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

*, *:after, *:before { /*アスタリスク「*」はすべての要素にスタイルを適用、「:before」は要素の先頭に「:after」は後方に擬似要素を作成。*/
    /*ボックスサイズの算出方法指定(border-boxはパディングとボーダーを幅と高さに含める)*/
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

button {
    cursor: pointer; /*マウスカーソルの形状指定(pointerはリンクカーソル)*/
}

button:focus {
    outline: none; /*アウトラインのスタイル・太さ・色指定(noneはなし)*/
}

/*header*/

header {
    margin: 0px auto 20px; /*ボックス外側の余白*/
    text-align: center; /*行の水平方向の揃え方(centerは中央揃え)*/
}

header h1 {
    font-size: 5em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
    font-family: 'メイリオ', Meiryo; /*フォントの種類指定(左から優先順位)*/
}

.toppage {
    margin-top: 100px; /*ボックス外側上の余白*/
}

/*メインの内容*/

article {
    width: 1000px; /*幅指定(100%は画面横幅いっぱいに表示)*/
    margin: 30px auto; /*ボックス外側の余白*/
}

article h2 {
    margin-bottom: 1px; /*ボックス外側下の余白*/
    font-weight: bold; /*フォントの太さ指定(normalは標準)*/
    font-size: 13pt; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
    font-family: 'メイリオ', Meiryo; /*フォントの種類指定(左から優先順位)*/
    text-align: left; /*行の水平方向の揃え方(centerは中央揃え)*/
}

article h3 {
    margin-bottom: 3px; /*ボックス外側下の余白*/
    font-weight: normal; /*フォントの太さ指定(normalは標準)*/
    font-size: 10pt; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
    font-family: 'メイリオ', Meiryo; /*フォントの種類指定(左から優先順位)*/
    text-align: center; /*行の水平方向の揃え方(centerは中央揃え)*/
}

article li {
    font-size: 10pt; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
    line-height: 50px; /*行の高さ指定(数値のみの場合はfont-sizeの倍数)*/
}

article a {
    color: #333; /*文字色指定*/
}

article a:hover {
    /*透明度設定*/
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8; /*ここまで透明度設定*/
    text-decoration: none; /*テキストの装飾指定(下線、上線など)(noneはなし)*/
}

.main th {
  vertical-align:top; 
}

#sp {
    display: none; /*要素の表示指定（noneはなし）*/
}

div.jump { text-align: right; }

div.caution { text-align: center;
              background: red;
              color: white;
              font-size: 12pt;
              line-height: 17px;
              font-weight: bold;
              padding: 10px; }
 
/*----------------------------------------------------
  .demo01
----------------------------------------------------*/
.demo01 th  { text-align: left; vertical-align:top; 
              font-weight: normal; line-height: 20px;}

.a {
  margin-right: 30px; vertical-align:top; 
}

.b {
  padding-right: 30px; vertical-align:top; 
}

.c {
  line-height: 20px; font-size: 11pt;
}

.d {
   padding-right: 20px; vertical-align:top; 
}

.e {
   padding-left: 10px; vertical-align:top; 
}


/*レスポンシブ設定*/

@media screen and (max-width: 768px) {

.content-wrap {
    width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/
    padding: 0 20px; /*ボックス内側の余白*/
    position: relative; /*ボックスの配置方法(relativeは相対位置配置)*/
}

header {
    margin: 20px auto 20px; /*ボックス外側の余白*/
}

header h1 {
    font-size: 2em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
}

.toppage {
    margin-top: 200px; /*ボックス外側上の余白*/
}

/*メインの内容*/

p.resizeimage img { width: 100%; }


article {
    margin-top: 100px; /*ボックス外側上の余白*/
    width: 100%; /*幅指定(100%は画面横幅いっぱいに表示)*/
    font-size: 1.4em;
}

article h2 {
    margin-bottom: 30px; /*ボックス外側下の余白*/
    font-weight: normal; /*フォントの太さ指定(normalは標準)*/
    font-size: 1.4em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
    text-align: center; /*行の水平方向の揃え方(centerは中央揃え)*/
}

article li {
    font-size: 1.2em; /*フォントサイズ指定(emはフォントの高さを１とした相対指定)*/
    line-height: 30px; /*行の高さ指定(数値のみの場合はfont-sizeの倍数)*/
}

#nav {
    display: none; /*要素の表示指定（noneはなし）*/
}

#twi {
    display: none; /*要素の表示指定（noneはなし）*/
}

#sp {
    display: inline; margin-bottom: 30px;
}

.movie-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.demo01 { margin: 0 -10px; }
    .demo01 th,
    .demo01 td{
    width: 100%;
    display: block;
    border-top: none;
    }
  .demo01 tr:first-child th { border-top: 0px solid #ddd; }
}
}
