@charset "utf-8";    /* 下記のコメントより後では適用されない */
/*
 * 赤穂塩田資料公開システム
 * 学ぼう！赤穂の塩づくり！CSS
 * Description: スクロール２のCSSを記述。
 * Copyright (C) City of Ako
 * Date: 2022/04/05
 */

/************************************************************/


/******************************************************************************
 * Webフォント設定
 ******************************************************************************/

/* マキナス4 Square */
/* URL: https://moji-waku.com/makinas/index.html */
@font-face {
  font-family: 'Makinas-Square';
  src: url('../../fonts/Makinas-4-Square.otf');
}

/* Noto Sans JP Light */
/* URL: https://fonts.google.com/noto/specimen/Noto+Sans+JP */
@font-face {
  font-family: 'Noto Sans JP Light';
  src: url('../../fonts/NotoSansJP-Light.otf');
}

/* Noto Sans JP Medium */
/* URL: https://fonts.google.com/noto/specimen/Noto+Sans+JP */
@font-face {
  font-family: 'Noto Sans JP Medium';
  src: url('../../fonts/NotoSansJP-Medium.otf');
}

/* Noto Sans JP Thin */
/* URL: https://fonts.google.com/noto/specimen/Noto+Sans+JP */
@font-face {
  font-family: 'Noto Sans JP Thin';
  src: url('../../fonts/NotoSansJP-Thin.otf');
}

/* Noto Sans JP */
/* URL: https://fonts.google.com/noto/specimen/Noto+Sans+JP */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../../fonts/NotoSansJP-Regular.otf');
}

/******************************************************************************
 * コンテンツ共通
 ******************************************************************************/
/* セッション: ブロック */
section {
    display: block;
}
/* タイトル */
section .sec-title {
    font-size: 14pt;
    font-family: 'Noto Sans JP Medium';
}
/* 本文 */
section .sec-text {
    font-size: 11pt;
    font-family: 'Noto Sans JP Light';
}
/* ページ */
.page {
    /* 位置情報 */
    position: relative;
    /* サイズ */
    height: 700px;
    width: 1200px;
    /* 中央寄せ */
    margin-right: auto;
    margin-left: auto;
    /* 上下 250px 空間が開ける */
    margin-top: 125px;
    margin-bottom: 125px;
}
/* ページ:先頭ページ */
.page:nth-child(1) {
    /* マージン */
    margin-top: 0;    /* 0にする */
}
/* フィギュア */
figure {
    /* マージン */
    margin: 0;
}
/* フィギキャプション */
figcaption {
    /* テキスト */
    text-align: center;
}

/******************************************************************************
 * 差し込みキャラクター
 ******************************************************************************/
/* 差し込みキャラクター */
.char-insertion {
    /* 位置調整 */
    display: flex;
    justify-content: center;
    /* サイズ */
    width: 100%;
    /* .page にて、上下 250px 空間が開くため、ココでは、空間を縮める */
    margin-top: -50px;
    margin-bottom: -50px;
}
.char-insertion img {
    width: 500px;
}


/******************************************************************************
 * ヘッダー
 ******************************************************************************/
header {
    border-bottom-color: #0000ff;    /* ヘッダーの下辺は、青 */
}
.header-logo-img {
    margin-top: 12px;
}
.header-logo-img-mob {
    display: none;
}


/******************************************************************************
 * トップ ページ
 ******************************************************************************/
/* キャラクター */
.student-about-char {
    /* 位置調整 */
    position: absolute;
    top: 30%;
    left: 40%;
    /* サイズ */
    width: 60%;
}
/* 浮遊するロゴ(いろいろな塩) */
.student-about-logo01 {
    /* 位置調整 */
    position: absolute;
    top: 50%;
    left: 5%;
    /* サイズ */
    width: 25%;
    /* アニメーション */
    animation: img_box_animate01 5s linear infinite;
    margin: 1rem 0 !important;
}
@keyframes img_box_animate01 {
    0% { transform: translateY(0) }
    25% { transform: translateY(-15px) }
    50% { transform: translateY(-30px) }
    75% { transform: translateY(-15px) }
    100% { transform: translateY(0) }
}
/* 浮遊するロゴ(あなたの地区の塩田資料) */
.student-about-logo02 {
    /* 位置調整 */
    position: absolute;
    top: 10%;
    left: 40%;
    /* サイズ */
    width: 25%;
    /* アニメーション */
    animation: img_box_animate02 3s linear infinite;
    margin: 1rem 0 !important;
}
@keyframes img_box_animate02 {
    0% { transform: translateY(0) }
    25% { transform: translateY(-10px) }
    50% { transform: translateY(-20px) }
    75% { transform: translateY(-10px) }
    100% { transform: translateY(0) }
}
/* 浮遊するロゴ(いろいろなつかいかた) */
.student-about-logo03 {
    /* 位置調整 */
    position: absolute;
    top: 80%;
    left: 70%;
    /* サイズ */
    width: 25%;
    /* アニメーション */
    animation: img_box_animate02 7s linear infinite;
    margin: 1rem 0 !important;
}
@keyframes img_box_animate03 {
    0% { transform: translateY(0) }
    25% { transform: translateY(-20px) }
    50% { transform: translateY(-40px) }
    75% { transform: translateY(-20px) }
    100% { transform: translateY(0) }
}
/* 浮遊するロゴ(塩づくりの歴史) */
.student-about-logo04 {
    /* 位置調整 */
    position: absolute;
    top: 20%;
    left: 10%;
    /* サイズ */
    width: 25%;
    /* アニメーション */
    animation: img_box_animate04 3s linear infinite;
    margin: 1rem 0 !important;
}
@keyframes img_box_animate04 {
    0% { transform: translateY(0) }
    25% { transform: translateY(-15px) }
    50% { transform: translateY(-30px) }
    75% { transform: translateY(-15px) }
    100% { transform: translateY(0) }
}
/* 浮遊するロゴ(塩をはこぶ) */
.student-about-logo05 {
    /* 位置調整 */
    position: absolute;
    top: 80%;
    left: 10%;
    /* サイズ */
    width: 25%;
    /* アニメーション */
    animation: img_box_animate05 8s linear infinite;
    margin: 1rem 0 !important;
}
@keyframes img_box_animate05 {
    0% { transform: translateY(0) }
    25% { transform: translateY(-10px) }
    50% { transform: translateY(-20px) }
    75% { transform: translateY(-10px) }
    100% { transform: translateY(0) }
}
/* 浮遊するロゴ(クイズ) */
.student-about-logo06 {
    /* 位置調整 */
    position: absolute;
    top: 63%;
    left: 72%;
    /* サイズ */
    width: 25%;
    /* アニメーション */
    animation: img_box_animate01 5s linear infinite;
    margin: 1rem 0 !important;
}
@keyframes img_box_animate06 {
    0% { transform: translateY(0) }
    25% { transform: translateY(-15px) }
    50% { transform: translateY(-30px) }
    75% { transform: translateY(-15px) }
    100% { transform: translateY(0) }
}

/* ロゴを半透明化 */
.student-about-logos img:hover {
    cursor: pointer;
    opacity: 0.7;
}



/******************************************************************************
 * 赤穂の塩のいろいろなつかい方 : 共通
 ******************************************************************************/
/* 字下げ */
.use-common-indent {
    /* テキスト */
    text-indent: 1em;
}


/******************************************************************************
 * 赤穂の塩のいろいろなつかい方（1）
 ******************************************************************************/
/* ロゴ */
.sec-various-about-logo {
    font-size: 14pt;
    font-family: 'Makinas-Square';
    color: #000000;
    margin: 5px;
    /* テキスト */
    text-align: center;    /* 画像位置を調整 */
}
.sec-various-about-logo img {
    width: 300px;
}
/* 文面 */
.sec-various-about-text {
    /* フォント */
    color: black;
    font-size: 11pt;
    font-family: 'Meiryo', sans-serif ;    /* PPTに合わせてあります */
    /* マージン */
    margin: 5px;
    /* テキスト */
    text-align: left;
    /* 字下げ */
    text-indent: 1em;
}
/* 塩の種類 */
.sec-various-main {
    display: flex;
    justify-content: space-between; /* 各アイテムを均等に配置し最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せる */
    flex-wrap: wrap;
}
/* 塩の種類(アイテム) */
.sec-various-main .item {
    padding: 15px;
    width: 30%;
    background-color: white;
    /* テキスト */
    text-align: center;    /* 画像位置を調整 */
}
/* 塩の種類(タイトル) */
.sec-various-main .item .title {
    /* フォント */
    font-size: 20pt;
    font-family: 'Makinas-Square';
    font-weight: bold;
    /* テキスト */
    text-align: center;
}
/* 塩の種類(説明) */
.sec-various-main .item p {
    /* フォント */
    font-size: 11pt;
    font-family: 'Meiryo', sans-serif;
    /* テキスト */
    text-align: left;
}
/* 塩の種類(画像) */
.sec-various-main .item img {
    height: 150px;
}
.sec-various-main-char {
    text-align: right;
}
/* キャラクター */
.sec-various-main-char img {
    height: 150px;
}


/******************************************************************************
 * 赤穂の塩のいろいろなつかい方（2）
 ******************************************************************************/
/* 親ブロック */
.use-making {
    /* 横並び */
    display: flex;
}
/* 左ブロック */
.use-making-left {
    width: 40%;
}
/* 右ブロック */
.use-making-right {
    width: 60%;
}
/* ロゴ（文面） */
.use-common-text {
    /* フォント */
    color: black;
    font-size: 11pt;
    font-family: 'Meiryo', sans-serif;
    /* テキスト */
    text-align: left;   /* 左寄せ */
    padding: 2%;
}
/* 親ブロック */
.use-making-photo {
    margin-top: 100px;
    /* 横並び・中央揃え */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 外枠 */
    border: 7px solid #bdd7ee;
    border-radius: 100px;
    /* パッティング */
    padding: 5px;
}
/* 写真 */
.use-making-photo-left {
    width: 45%
}
.use-making-photo-right {
    width: 55%
}
.use-making-photo-img {
    width: 100%;
    object-fit: cover;
}
/* キャラクター - PC */
.use-making-char-img {
    width: 90%;
    object-fit: cover;
    margin-top: 30px;
}
/* キャラクター - スマホ480px */
.use-making-char-img-mob {
    display: none;  /* 非表示 */
}


/******************************************************************************
 * 塩づくりの歴史 : 共通
 ******************************************************************************/
/* ロゴ */
.history-common-logo {
    /* フォント */
    color: #00b0f0;
    font-family: 'Makinas-Square';
    /* テキスト */
    text-align: center;
}
/* ロゴ（文面） */
.history-common-text {
    /* 位置調整 */
    position: relative;
    left: 5%;
    /* サイズ */
    width: 90%;
    /* テキスト */
    text-align: left;   /* 左寄せ */
}
/* ロゴ（文面フォント） */
.history-common-textfont {
    /* フォント */
    color: black;
    font-size: 11pt;
    font-family: 'Meiryo', sans-serif;
}
/* フォント1 */
.history-common-fontname1 {
    /* フォント */
    font-family: 'Noto Sans JP Light';
}
/* フォント2 */
.history-common-fontname2 {
    /* フォント */
    font-family: 'Noto Sans JP';
}
/* フォント3 */
.history-common-fontname3 {
    /* フォント */
    font-family: 'Meiryo', sans-serif;
}
/* フォント4 */
.history-common-fontname4 {
    /* フォント */
    font-family: 'Yu Gothic Medium', sans-serif;
}
/* フォントサイズ18 */
.history-common-fontsize18 {
    /* フォント */
    font-size: 18pt;
}
/* フォントサイズ16 */
.history-common-fontsize16 {
    /* フォント */
    font-size: 16pt;
}
/* フォントサイズ14 */
.history-common-fontsize14 {
    /* フォント */
    font-size: 14pt;
}
/* フォントサイズ12 */
.history-common-fontsize12 {
    /* フォント */
    font-size: 12pt;
}
/* フォントサイズ11 */
.history-common-fontsize11 {
    /* フォント */
    font-size: 11pt;
}
/* フォントサイズ10 */
.history-common-fontsize10 {
    /* フォント */
    font-size: 10pt;
}
/* フォントサイズ9 */
.history-common-fontsize9 {
    /* フォント */
    font-size: 9pt;
}
/* 字下げ */
.history-common-indent {
    /* テキスト */
    text-indent: 1em;
}

/******************************************************************************
 * 赤穂の塩づくりの歴史
 ******************************************************************************/


 
/* ロゴ(あなたの地区の塩田資料) */
.history-cover-parent-logo {
    /* 位置調整 */
    position: absolute;
    top: 10%;
    left: 30%;
    /* サイズ */
    width: 40%;
}
/* ロゴ(あなたの地区の塩田資料) */
.history-cover-parent-char {
    /* 位置調整 */
    position: absolute;
    top: 50%;
    left: 20%;
    /* サイズ */
    width: 50%;
}
/* ロゴの文面 */
.history-cover-parent-comment {
    /* 位置調整 */
    position: absolute;
    top: 35%;
    left: 30%;
    /* サイズ */
    width: 40%;
}


/******************************************************************************
 * 赤穂の塩づくりの歴史
 ******************************************************************************/
/* ロゴ */
.history-age-logo {
    /* 位置調整 */
    position: absolute;
    top: 3%;
    left: 0%;
    /* サイズ */
    width: 100%;
}
/* ロゴの文面 */
.history-age-comment {
    /* 位置調整 */
    position: absolute;
    top: 15%;
    left: 0%;
    /* サイズ */
    width: 100%;
}
/* 年表(画像) */
.history-age-table-img {
    /* 位置調整 */
    position: absolute;
    top: 25%;
    left: 0%;
    /* サイズ */
    width: 100%;
}
/* 子＋吹き出し(画像) */
.history-age-table-child-img {
    /* 位置調整 */
    position: absolute;
    top: 71.1%;
    left: 10%;
    /* サイズ */
    width: 28%;
}


/******************************************************************************
 * 縄文時代
 ******************************************************************************/
/* 親ブロック */
.history-joumon {
    /* 横並び */
    display: flex;
}
/* 左ブロック */
.history-joumon-left {
    width: 45%;
}
/* 右ブロック */
.history-joumon-right {
    width: 55%;
}
/* ロゴ */
.history-joumon-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* 親ブロック */
.history-joumon-photo {
    /* 横並び */
    display: flex;
    /* サイズ */
    width: 100%;
    /* マージン */
    margin-top: 10px;
}
/* 写真： 左ブロック、右ブロック */
.history-joumon-photo-left, .history-joumon-photo-right {
    width: 50%;
}
/* 写真 */
.history-joumon-photo-img {
    width: 95%;
    object-fit:cover;
}
/* 写真-注釈 */
.history-joumon-photo-annotation {
    font-size: 9pt;
    text-align: right;
    margin-right: 65px;
}
/* キャラクター - PC */
.history-joumon-char-img {
    width: 100%;
}
/* キャラクター - スマホ480px */
.history-joumon-char-img-mob {
    display: none;      /* 非表示 */
}


/******************************************************************************
 * 3-07 : 奈良時代1
 ******************************************************************************/
/* 親ブロック */
.history-nara1 {
    /* 横並び */
    display: flex;
}
/* 左ブロック */
.history-nara1-left {
    width: 50%;
}
/* 右ブロック */
.history-nara1-right {
    width: 50%;
}
/* ロゴ */
.history-nara1-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* 親ブロック */
.history-nara1-photo {
    /* 横並び */
    display: flex;
    /* サイズ */
    width: 100%;
}
/* 写真： 左ブロック、右ブロック */
.history-nara1-photo-left {
    width: 30%;
}
.history-nara1-photo-right {
    width: 70%;
}
/* 子＋吹き出し（画像） */
.history-nara1-char-img {
    width: 95%;
    margin-top: 30px;
}
/* 写真 */
.history-nara1-photo-img {
    width: 95%;
    object-fit:cover;
}
/* 親ブロック */
.history-nara1-process {
    /* 位置調整 */
    position: relative;
    /* パッティング */
    padding-bottom: 40px;
    /* サイズ */
    width: 100%;
}
/* 写真 */
.history-nara1-process-img {
    width: 90%;
    object-fit:cover;
}
/* 写真 - スマホ480px */
.history-nara1-photo-mob {
    display: none;  /* 非表示 */
}
/* キャラクター - スマホ480px */
.history-nara1-char-mob {
    display: none;  /* 非表示 */
}

/******************************************************************************
 * 奈良時代2
 ******************************************************************************/
/* 親ブロック */
.history-nara2 {
    /* 横並び */
    display: flex;
}
/* 左右ブロック */
.history-nara2-left {
    width: 45%;
}
.history-nara2-right {
    width: 55%;
}
/* ロゴ */
.history-nara2-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* 写真 */
.history-nara2-process-img {
    width: 100%;
    object-fit:cover;
}
/* 親ブロック */
.history-nara2-photo {
    /* 横並び */
    display: flex;
    /* サイズ */
    width: 100%;
}
/* 写真： 左ブロック、右ブロック */
.history-nara2-photo-left {
    width: 57%;
}
.history-nara2-photo-right {
    width: 43%;
}
/* 写真 */
.history-nara2-photo-img {
    width: 95%;
    object-fit: cover;
}
/* キャラクター - pc */
.history-nara2-char-img {
    /* 位置調整 */
    position: relative;
    left: 5%;
    /* マージン */
    margin-top: 40px;
    /* サイズ */
    width: 90%;
}
/* キャラクター - スマホ480px */
.history-nara2-char-img-mob {
    /* サイズ */
    display: none;
}


/******************************************************************************
 * 奈良～鎌倉時代
 ******************************************************************************/
/* 親ブロック */
.history-kamakura-2 {
    /* 横並び */
    display: flex;
    /* マージ */
    margin-bottom: 14px;
    /* 位置調整 */
    position: relative;
}
/* 左ブロック */
.history-kamakura-left {
    width: 45%;
}
/* 右ブロック */
.history-kamakura-right {
    width: 55%;
}
/* ロゴ */
.history-kamakura-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* 親ブロック */
.history-kamakura-photo {
    /* 横並び */
    display: flex;
    /* サイズ */
    width: 100%;
}
/* 親ブロック */
.history-kamakura-process {
    /* 位置調整 */
    position: relative;
    /* パッティング */
    padding-bottom: 40px;
    /* サイズ */
    width: 100%;
}
/* 写真 */
.history-kamakura-process-img {
    width: 100%;
    object-fit:cover;
}
/* キャクター */
.history-kamakura-char-img {
    position: relative;
    left: 32%;
    width: 37%;
}


/******************************************************************************
 * 室町時代
 ******************************************************************************/
/* 親ブロック */
.history-muromachi {
    /* 横並び */
    display: flex;
}
/* 左ブロック */
.history-muromachi-left {
    width: 50%;
}
/* 右ブロック */
.history-muromachi-right {
    width: 50%;
}
/* ロゴ */
.history-muromachi-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* 親ブロック */
.history-muromachi-photo {
    /* 横並び */
    display: flex;
    /* 位置調整 */
    position: relative;
    left: 5%;
    /* サイズ */
    width: 100%;
    /* マージン */
    margin-top: 10px;
}
/* 写真： 左ブロック、右ブロック */
.history-muromachi-photo-left, .history-muromachi-photo-right {
    margin: 0;
    width: 47%;
}
/* 写真 */
.history-muromachi-photo-img1 {
    width: 96%;
    object-fit:cover;
}
.history-muromachi-photo-img2 {
    width: 85%;
    object-fit:cover;
}
/* 写真 */
.history-muromachi-process-img {
    width: 70%;
    object-fit:cover;
}
/* キャラクター */
.history-muromachi-char-img {
    position: relative;
    top: -180px;             /* 少し画像を被せる */
    left: 70%;
    width: 30%;
}

/* キャラクター - スマホ480px */
.history-muromachi-char-img-mob {
    /* サイズ */
    display: none;
}


/******************************************************************************
 * 江戸時代1
 ******************************************************************************/
/* 親ブロック */
.history-edo1 {
    /* 横並び */
    display: flex;
}
/* 左ブロック */
.history-edo1-left {
    width: 42%;
}
/* 右ブロック */
.history-edo1-right {
    width: 58%;
}
/* ロゴ */
.history-edo1-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* 親ブロック */
.history-edo1-photo {
    /* 横並び */
    display: flex;
    /* サイズ */
    width: 100%;
}
/* 写真： 左ブロック、右ブロック */
.history-edo1-photo-left {
    margin: 0;
    width: 40%;
}
.history-edo1-photo-right {
    width: 60%;
}
/* 写真 */
.history-edo1-photo-img {
    width: 98%;
    object-fit:cover;
}
/* キャラクター - PC */
.history-edo1-char-img {
    width: 100%;
}
/* キャラクター - スマホ480px */
.history-edo1-char-img-mob {
    display: none;  /* 非表示 */
}


/******************************************************************************
 * 江戸時代2
 ******************************************************************************/
/* 親ブロック */
.history-edo2 {
    /* 横並び */
    display: flex;
}
/* 左ブロック */
.history-edo2-left {
    width: 42%;
}
/* 右ブロック */
.history-edo2-right {
    width: 58%;
}
/* ロゴ */
.history-edo2-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* 親ブロック */
.history-edo2-photo {
    /* 横並び */
    display: flex;
    /* サイズ */
    width: 100%;
}
/* 写真： 左ブロック、右ブロック */
.history-edo2-photo-left {
    margin: 0;
    width: 62.5%;
}
.history-edo2-photo-right {
    margin: 0;
    width: 37.5%;
}
/* 写真 */
.history-edo2-process-img {
    /* 位置 */
    position: relative;
    left: 5%;
    /* マージン */
    margin-top: 10px;
    /* サイズ */
    width: 80%;
    object-fit:cover;
}
/* 写真 */
.history-edo2-photo-img {
    width: 91%;
    object-fit:cover;
}
/* キャラクター */
.history-edo2-char-img {
    position: relative;
    left: -58px;
    width: 58%;
}


/******************************************************************************
 * 3-13 : 江戸時代3
 ******************************************************************************/
/* 親ブロック */
.history-edo3 {
    /* 横並び */
    display: flex;
}
/* 左ブロック */
.history-edo3-left {
    width: 50%;
}
/* 右ブロック */
.history-edo3-right {
    width: 50%;
}
/* ロゴ */
.history-edo3-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* 親ブロック */
.history-edo3-photo {
    margin: 0;
}
/* 写真 */
.history-edo3-photo-img {
    width: 98%;
    object-fit:cover;
}
/* キャラクター */
.history-edo3-char-img {
    margin-top: 10px;
    width: 70%;
}
/* キャラクター - pc */
.history-edo3-char {
    text-align: right;
}
/* キャラクター - スマホ480ox専用 */
.history-edo3-char-mob {
    display: none;
}


/******************************************************************************
 * 3-14 : 江戸時代4
 ******************************************************************************/
/* 親ブロック */
.history-edo4 {
    /* 横並び */
    display: flex;
}
/* 左ブロック */
.history-edo4-left {
    width: 50%;
}
/* 右ブロック */
.history-edo4-right {
    width: 50%;
}
/* ロゴ */
.history-edo4-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* 親ブロック */
.history-edo4-photo {
    margin: 0;
}
/* 写真 */
.history-edo4-photo-img {
    width: 98%;
    object-fit:cover;
}
/* 写真（キャプション） */
.history-edo4-photo-caption {
    text-align: right;
    margin-right: 10px;
}
/* キャラクター */
.history-edo4-char-img {
    width: 60%;
}


/******************************************************************************
 * 3-15 : 明治時代
 ******************************************************************************/
/* 親ブロック */
.history-meiji {
    /* 横並び */
    display: flex;
}
/* 左ブロック */
.history-meiji-left {
    width: 50%;
}
/* 右ブロック */
.history-meiji-right {
    width: 50%;
}
/* ロゴ */
.history-meiji-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* 親ブロック */
.history-meiji-photo {
    /* 横並び */
    display: flex;
    /* サイズ */
    width: 100%;
}
.history-meiji-photo figure {
    margin-bottom: 5px;
}
/* 写真： 左ブロック、右ブロック */
.history-meiji-photo-left {
    width: 50%;
}
.history-meiji-photo-right {
    width: 50%;
}
/* 写真 */
.history-meiji-photo-img {
    width: 98%;
    object-fit:cover;
}
/* キャラクター */
.history-meiji-char-img {
    width: 90%;
}
/* キャラクター - pc版 */
.history-meiji-char {
    /* 位置調整 */
    position: relative;
    left: 5%;
    margin-top: 10px;
    text-align: left;
}
/* キャラクター - スマホ480px */
.history-meiji-char-mob {
    display: none;
}

/******************************************************************************
 * 3-16 : 昭和30年代
 ******************************************************************************/
/* 親ブロック */
.history-shouwa1 {
    /* 横並び */
    display: flex;
}
/* 左ブロック */
.history-shouwa1-left {
    width: 40%;
}
/* 右ブロック */
.history-shouwa1-right {
    width: 60%;
}
/* ロゴ */
.history-shouwa1-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* 親ブロック */
.history-shouwa1-photo {
    /* 横並び */
    display: flex;
    /* サイズ */
    width: 100%;
}
/* 写真： 左ブロック、右ブロック */
.history-shouwa1-photo-left {
    width: 47%;
}
.history-shouwa1-photo-right {
    width: 53%;
}
/* 写真 */
.history-shouwa1-photo-img {
    width: 98%;
    object-fit:cover;
}
/* キャラクター - pc版 */
.history-shouwa1-char-img {
    /* 位置調整 */
    position: relative;
    left: 5%;
    margin-top: 40px;
    width: 90%;
}
/* キャラクター - スマホ480px */
.history-shouwa1-char-img-mob {
    display: none;
}



/******************************************************************************
 * 3-17 : 昭和40年代～現在
 ******************************************************************************/
/* 親ブロック */
.history-shouwa2 {
    /* 横並び */
    display: flex;
}
/* 左ブロック */
.history-shouwa2-left {
    width: 42%;
}
/* 右ブロック */
.history-shouwa2-right {
    width: 58%;
}
/* ロゴ */
.history-shouwa2-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* 親ブロック */
.history-shouwa2-photo {
    /* 横並び */
    display: flex;
    /* サイズ */
    width: 100%;
}
/* 写真： 左ブロック、右ブロック */
.history-shouwa2-photo-left {
    width: 45%;
}
.history-shouwa2-photo-right {
    width: 55%;
}
/* 写真 */
.history-shouwa2-photo-img {
    width: 98%;
    object-fit:cover;
}
/* キャラクター - pc版 */
.history-shouwa2-char-img {
    /* 位置調整 */
    position: relative;
    left: 5%;
    margin-top: 10px;
    width: 90%;
}
/* キャラクター - スマホ480px */
.history-shouwa2-char-img-mob {
    display: none;
}


/******************************************************************************
 * 3-18 : 塩の国赤穂
 ******************************************************************************/
/* 親ブロック */
.history-epilogue-2 {
    /* 横並び */
    display: flex;
    /* マージ */
    margin-bottom: 14px;
    /* 位置調整 */
    position: relative;
}
/* 左ブロック */
.history-epilogue-left {
    width: 43%;
}
/* 右ブロック */
.history-epilogue-right {
    width: 57%;
}
/* ロゴ */
.history-epilogue-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* 写真 */
.history-epilogue-photo-img {
    width: 98%;
    object-fit:cover;
}
/* キャラクター */
.history-epilogue-char-img {
    position: relative;
    left: 8%;
    width: 65%;
}


/******************************************************************************
 * 塩をはこぶ : 共通
 ******************************************************************************/
/* ロゴ */
.transportation-common-logo {
    /* フォント */
    color: #00b0f0;
    font-family: 'Makinas-Square';
    /*font-weight: bold;*/      /* ココは、太字 */
    /* テキスト */
    text-align: center;
}
/* ロゴ（文面） */
.transportation-common-text {
    /* フォント */
    color: #000000;
    font-size: 11pt;
    font-family: 'Meiryo', sans-serif;
    /* テキスト */
    text-align: left;   /* 左寄せ */
}
/* フォント1 */
.transportation-common-fontname1 {
    /* フォント */
    font-family: 'Noto Sans JP Light';
}
/* フォント2 */
.transportation-common-fontname2 {
    /* フォント */
    font-family: 'Noto Sans JP';
}
/* フォント3 */
.transportation-common-fontname3 {
    /* フォント */
    font-family: 'Meiryo', sans-serif;
}
/* フォント3 */
.transportation-common-fontname4 {
    /* フォント */
    font-family: 'Yu Gothic Medium', sans-serif;
}
/* フォントサイズ18 */
.transportation-common-fontsize18 {
    /* フォント */
    font-size: 18pt;
}
/* フォントサイズ16 */
.transportation-common-fontsize16 {
    /* フォント */
    font-size: 16pt;
}
/* フォントサイズ14 */
.transportation-common-fontsize14 {
    /* フォント */
    font-size: 14pt;
}
/* フォントサイズ12 */
.transportation-common-fontsize12 {
    /* フォント */
    font-size: 12pt;
}
/* フォントサイズ11 */
.transportation-common-fontsize11 {
    /* フォント */
    font-size: 11pt;
}
/* フォントサイズ9 */
.transportation-common-fontsize9 {
    /* フォント */
    font-size: 9pt;
}
/* 字下げ */
.transportation-common-indent {
    /* テキスト */
    text-indent: 1em;
}


/******************************************************************************
 * 塩を運ぶ
 ******************************************************************************/
/* ロゴ */
.transportation-cover-parent-logo {
    /* 位置調整 */
    position: absolute;
    top: 2%;
    left: 5%;
    /* サイズ */
    width: 90%;
    /* テキスト */
    text-align: center;    /* 子要素を中央揃え */
}
/* ロゴ(画像) */
.transportation-cover-parent-logo-img {
    /* サイズ */
    width: 40%;
    /* マージン */
    margin-bottom: 15px;    /* ロゴと文面を少し離す */
}
/* ロゴ(文面) */
.transportation-cover-parent-comment {
    /* 位置調整 */
    position: relative;
    left: 20%;
    /* サイズ */
    width: 60%;
    /* マージン */
    margin-bottom: 10px;    /* 文面と表紙の子を少し離す */
    text-align: left;
}
/* 表紙の子 */
.transportation-cover-canvas-child-img {
    /* 位置調整 */
    position: relative;
    left: -14%;
    /* サイズ */
    width: 58%;
}


/******************************************************************************
 * 江戸時代
 ******************************************************************************/
/* 親ブロック */
.transportation-edo {
    /* 横並び */
    display: flex;
}
/* 左ブロック */
.transportation-edo-left {
    width: 50%;
}
/* 右ブロック */
.transportation-edo-right {
    width: 50%;
}
/* ロゴ */
.transportation-edo-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* ロゴの文面 */
.transportation-edo-comment {
    /* サイズ */
    width: 98%;
}
/* 親ブロック */
.transportation-edo-photo {
    /* 横並び */
    display: flex;
    /* マージン */
    margin-top: 20px;
    /* サイズ */
    width: 100%;
}
/* 写真： 左ブロック、右ブロック */
.transportation-edo-photo-left, .transportation-edo-photo-right {
    margin: 0;
    width: 50%;
}
/* 写真 */
.transportation-edo-photo-img {
    width: 90%;
    object-fit:cover;
}
/* 写真 */
.transportation-edo-process-img {
    width: 94%;
    object-fit:cover;
}
/* キャラクター */
.transportation-edo-char-img {
    position: relative;
    top: -180px;             /* 少し画像を被せる */
    left: 67%;

    width: 28%;
}

/******************************************************************************
 * 近世～近代
 ******************************************************************************/
/* 親ブロック */
.transportation-kinse {
    /* 横並び */
    display: flex;
    /* サイズ */
    height: 700px;    /* .pageと同じ高さに設定する */

    margin-bottom: 200px;
}
.transportation-kinse-bg {
    /* 画像 */
    background-image: url('./../../img/scroll-2/3-21/パーツ/運搬.jpg');
    background-repeat: no-repeat;
    background-size: cover;     /* 引き伸ばす */
    background-position: center;
    padding-top: 300px;
    padding-bottom: 200px;
}
/* 左ブロック */
.transportation-kinse-left {
    width: 45%;
}
/* 右ブロック */
.transportation-kinse-right {
    width: 55%;
}
.transportation-kinse-logo-base {
    display:flex;
    flex-flow: column;
}
/* ロゴ＋文章 外側 */
.transportation-kinse-logo-out {
    /* パッティング */
    padding: 20px;
    /* マージン */
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 10px;
    /* 透過 */
    background-color: rgba(255,255,255,0.8);
}
/* ロゴ */
.transportation-kinse-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* ロゴの文面 */
.transportation-kinse-comment {
    /* サイズ */
    width: 98%;
}
/* 写真(船) */
.transportation-kinse-photo1 {
    /* 縦並び */
    display:flex;
    flex-flow: column;
    /* パッティング */
    padding: 10px 20px;
    /* サイズ */
    width: 50%;
    /* マージン */
    margin-top: 55px;
    margin-left: 30px;
    /* 透過 */
    background-color: rgba(255,255,255,0.5);
}
/* 写真 */
.transportation-kinse-photo1-img {
    width: 100%;
    object-fit:cover;
}
/* キャラクター */
.transportation-kinse-char-img {
    /* 位置情報 */
    position: relative;
    top: -134px;
    left: 30%;
    /* サイズ */
    width: 40%;
}
/* 写真 */
.transportation-kinse-photo2 {
    /* 縦並び */
    display:flex;
    flex-flow: column;
    /* 位置調整 */
    position: absolute;
    top: 3%;
    right: 2%;
    /* パッティング */
    padding: 10px 20px;
    /* サイズ */
    width: 290px;
    /* 透過 */
    background-color: rgba(255,255,255,0.5);
}
.transportation-kinse-photo2 figure {
    margin-bottom: 5px;
}
/* 写真 */
.transportation-kinse-photo2-img {
    width: 98%;
    object-fit:cover;
}


/******************************************************************************
 * 大正10年~昭和20年代
 ******************************************************************************/
/* 親ブロック */
.transportation-taisho {
    /* 横並び */
    display: flex;
}
/* 左ブロック */
.transportation-taisho-left {
    width: 50%;
}
/* 右ブロック */
.transportation-taisho-right {
    width: 50%;
}
/* ロゴ */
.transportation-taisho-logo {
    /* マージ */
    margin: 10px 0;
    /* サイズ */
    width: 100%;
}
/* ロゴの文面(背景画像) */
.transportation-taisho-comment-bg {
    /* 画像 */
    background-image: url('./../../img/scroll-2/3-22/パーツ/ディーゼルD102.png');
    background-repeat: no-repeat;
    background-size: contain;
    /* 位置調整 */
    background-position: 0% 50%;
    /* 透過 */
    background-color: rgba(255,255,255,0.8);
    background-blend-mode: lighten;
}
/* ロゴの文面 */
.transportation-taisho-comment {
    /* サイズ */
    width: 98%;
    /* マージン */
    margin-bottom: 20px;
}
/* 写真： 左ブロック、右ブロック */
.transportation-taisho-photo-left, .transportation-taisho-photo-right {
    margin: 0;
    width: 50%;
}
/* 写真 */
.transportation-taisho-photo-img {
    width: 90%;
    object-fit:cover;
}
/* 写真 */
.transportation-taisho-process-img {
    width: 100%;
    object-fit:cover;
}
/* キャラクター */
.transportation-taisho-char-img {
    position: relative;
    top: -50px;             /* 少し画像を被せる */
    left: 80%;

    width: 70%;
}
/* キャラクター */
.transportation-taisho-char-img-mob {
    display: none;
}


/******************************************************************************
 * 塩づくりと物流
 ******************************************************************************/
/* 親ブロック */
.transportation-epilogue {
    /* 横並び */
    display: flex;
}
/* 左ブロック */
.transportation-epilogue-left {
    width: 50%;
}
/* 右ブロック */
.transportation-epilogue-right {
    width: 50%;
}
/* ロゴ */
.transportation-epilogue-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* ロゴの文面 */
.transportation-epilogue-comment {
    /* サイズ */
    width: 98%;
    /* マージン */
    margin-bottom: 300px;
}
/* キャラクター */
.transportation-epilogue-char-img {
    /* サイズ */
    width: 80%;
}
/* 写真 */
.transportation-epilogue-process-img {
    width: 100%;
    object-fit:cover;
}
/* キャラクター - pc */
.transportation-epilogue-char {
    text-align: center;
}
/* キャラクター - スマホ480px専用 */
.transportation-epilogue-char-mob {
    display: none;
}


/******************************************************************************
 * 赤穂塩業資料について : 共通
 ******************************************************************************/
/* ロゴ */
.doc-common-logo {
    /* フォント */
    color: #000000;
    font-family: 'Makinas-Square';
}
/* ロゴ（文面） */
.doc-common-text {
    /* フォント */
    color: #000000;
    font-size: 11pt;
    font-family: 'Meiryo', sans-serif;
    /* テキスト */
    text-align: left;   /* 左寄せ */
}
/* フォント1 */
.doc-common-fontname1 {
    /* フォント */
    font-family: 'Noto Sans JP Light';
}
/* フォント2 */
.doc-common-fontname2 {
    /* フォント */
    font-family: 'Noto Sans JP';
}
/* フォント2 */
.doc-common-fontname3 {
    /* フォント */
    font-family: 'Meiryo', sans-serif;
}
/* フォントサイズ18 */
.doc-common-fontsize28 {
    /* フォント */
    font-size: 28pt;
}
/* フォントサイズ20 */
.doc-common-fontsize20 {
    /* フォント */
    font-size: 20pt;
}
/* フォントサイズ18 */
.doc-common-fontsize18 {
    /* フォント */
    font-size: 18pt;
}
/* フォントサイズ14 */
.doc-common-fontsize16 {
    /* フォント */
    font-size: 16pt;
}
/* フォントサイズ14 */
.doc-common-fontsize14 {
    /* フォント */
    font-size: 14pt;
}
/* フォントサイズ12 */
.doc-common-fontsize12 {
    /* フォント */
    font-size: 12pt;
}
/* フォントサイズ11 */
.doc-common-fontsize11 {
    /* フォント */
    font-size: 11pt;
}
/* フォントサイズ9 */
.doc-common-fontsize9 {
    /* フォント */
    font-size: 9pt;
}
/* 字下げ */
.doc-common-indent {
    /* テキスト */
    text-indent: 1em;
}
/* 親ブロック */
.doc-making {
    /* 横並び */
    display: flex;
}
/* 左右ブロック */
.doc-making-left
, .doc-making-right {
    width: 50%;
}
/* 左ブロック ロゴ */
.doc-making-left-logo { height: 5%; }
/* 左ブロック テキスト */
.doc-making-left-text { height: 60%; }
/* 左ブロック 画像 */
.doc-making-left-image { height: 35%; width: 90%; left: 2.5%; position: relative; }
/* 右ブロック ブランク */
.doc-making-right-blank { height: 5%; }
/* 右ブロック テーブル */
.doc-making-right-table { height: auto; }
/* 右ブロック テキスト */
.doc-making-right-text { height: 13%; }
/* ロゴ */
.doc-making-logo {
    /* マージ */
    margin-bottom: 5px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
    /* 表示位置 */
    text-align: left;
}
/* ロゴの文面 */
.doc-making-comment {
    /* サイズ */
    width: 98%;
}
/* 親ブロック */
.doc-making-photo {
    /* 横並び・ 子:上部配置 */
    display: flex;
    align-items: flex-start;
}
/* 地図：キャラクター */
.doc-making-photo-left  {
    width: 65%;
}
.doc-making-photo-right {
    width: 35%;
    /* キャラを中央寄せ */
    text-align: center;
}
/* 地図 */
.doc-making-photo-img {
    width: 100%;
    object-fit: cover;
}
/* キャラ（しんはまくん） */
.doc-making-char-img01 {
    width: 67%;
    object-fit: cover;
    margin-top: 65px;   /* 地図と同じ高さになるように高さ調整 */
}
/* キャラ（えんむちゃん） */
.doc-making-char-img02 {
    width: 75%;
    object-fit: cover;
    margin-top: -35px;   /* 地図と同じ高さになるように高さ調整 */
}
/* キャラ（坂越ワン） */
.doc-making-char-img03 {
    width: 75%;
    object-fit: cover;
    margin-top: 70px;   /* 地図と同じ高さになるように高さ調整 */
}
/* キャラ（こはま） */
.doc-making-char-img04 {
    width: 67%;
    object-fit: cover;
    margin-top: 43px;   /* 地図と同じ高さになるように高さ調整 */
}

/******************************************************************************
 * 赤穂塩業資料について : テーブル(共通)
 ******************************************************************************/
.sec-doc table {
    border-collapse: collapse;
    width: 100%;
}
.sec-doc thead {
    background-color:#eceaea;
}
.sec-doc th {
    height: 30px;
    border: solid 1px #c5c5c5;
}
.sec-doc td {
    height: 50px;
    border: solid 1px #c5c5c5;
    font-size: 9pt;
}
/* 1列目のスタイル(No) */
.sec-doc table tr td:nth-of-type(1) { width: 30px; text-align: center; }
/* 2列目のスタイル(画像) */
.sec-doc table tr td:nth-of-type(2) { width: 90px; text-align: center; }
/* 3列目のスタイル(資料番号) */
.sec-doc table tr td:nth-of-type(3) { width: 70px; text-align: center; }
/* 4列目のスタイル(タイトル) */
.sec-doc table tr td:nth-of-type(4) { width: 120px; text-align: left; }
/* 5列目のスタイル(資料種別) */
.sec-doc table tr td:nth-of-type(5) { width: 90px; text-align: center; }
/* 6列目のスタイル(地区) */
.sec-doc table tr td:nth-of-type(6) { width: 80px; text-align: center; }
/* 7列目のスタイル(場所) */
.sec-doc table tr td:nth-of-type(7) { width: 60px; text-align: center; }
/* 8列目のスタイル(製作年) */
.sec-doc table tr td:nth-of-type(8) { width: 60px; text-align: center; }
/* 2列目のスタイル(画像) 写真のセル（画像） ※アスペクト比を維持せず、リサイズ */
.sec-doc table tr td:nth-of-type(2) img {
    vertical-align: middle;
    height: 48px;
    width: 80px;
}
/* 写真を半透明化 */
.sec-doc table img:hover {
    opacity: 0.7;
}


/******************************************************************************
 * あなたの地区の塩田資料
 ******************************************************************************/
/* ロゴ(あなたの地区の塩田資料) */
.doc-cover-parent-logo {
    /* 位置調整 */
    position: absolute;
    top: 20%;
    left: 25%;
    /* サイズ */
    width: 50%;
}
/* ロゴ(あなたの地区の塩田資料) */
.doc-cover-parent-char {
    /* 位置調整 */
    position: absolute;
    top: 50%;
    left: 10%;
    /* サイズ */
    width: 70%;
}
/* ロゴの文面 */
.doc-cover-parent-comment {
    /* 位置調整 */
    position: absolute;
    top: 35%;
    left: 20%;
    /* サイズ */
    width: 60%;
}


/******************************************************************************
 * クリッカブルマップ
 ******************************************************************************/
.doc-clickablemap-parent {
    text-align: center;
}
.doc-clickablemap-img {
    width: 90%;
}


/******************************************************************************
 * 詳細情報画面 : 共通
 ******************************************************************************/
/* ロゴ */
.doc-detail-common-logo {
    /* フォント */
    color: #000000;
    font-family: 'Makinas-Square';
}
/* ロゴ（文面） */
.doc-detail-common-text {
    /* フォント */
    color: #000000;
    font-size: 11pt;
    font-family: 'Noto Sans JP Light';
    /* テキスト */
    text-align: left;   /* 左寄せ */
}
/* フォント1 */
.doc-detail-common-fontname1 {
    /* フォント */
    font-family: 'Noto Sans JP Light';
}
/* フォント2 */
.doc-detail-common-fontname2 {
    /* フォント */
    font-family: 'Noto Sans JP';
}
/* フォントサイズ18 */
.doc-detail-common-fontsize18 {
    /* フォント */
    font-size: 18pt;
}
/* フォントサイズ14 */
.doc-detail-common-fontsize16 {
    /* フォント */
    font-size: 16pt;
}
/* フォントサイズ14 */
.doc-detail-common-fontsize14 {
    /* フォント */
    font-size: 14pt;
}
/* フォントサイズ12 */
.doc-detail-common-fontsize12 {
    /* フォント */
    font-size: 12pt;
}
/* フォントサイズ11 */
.doc-detail-common-fontsize11 {
    /* フォント */
    font-size: 11pt;
}
/* フォントサイズ9 */
.doc-detail-common-fontsize9 {
    /* フォント */
    font-size: 9pt;
}
/* 字下げ */
.doc-detail-common-indent {
    /* テキスト */
    text-indent: 1em;
}
/* 親ブロック */
.doc-detail-making {
    /* 横並び */
    display: flex;
    /* 位置調整 */
    position: relative;
    /* サイズ */
    width: 100%;
    height: 700px;
}
/* 左ブロック */
.doc-detail-making-left {
    width: 50%;
    height: 100%;
    margin: 10px;
}
.doc-detail-making-left-blank {
    height: 10%;
}
/* 左ブロック 画像 */
.doc-detail-making-left-image {
    height: 70%;
}
/* 左ブロック アクション */
.doc-detail-making-left-act {
    height: 10%;
    /* 横並び */
    display: flex;
}
/* 左ブロック 画像 */
.doc-detail-making-left-act-view {
    width: 50%;
    text-align: center;
}
/* 左ブロック 画像 */
.doc-detail-making-left-act-close {
    width: 50%;
    text-align: center;
}
/* 右ブロック */
.doc-detail-making-right {
    width: 50%;
    height: 100%;
    margin: 10px;
}
/* 右ブロック ブランク */
.doc-detail-making-right-blank {
    height: 5%;
}
/* 右ブロック テーブル */
.doc-detail-making-right-table {
    height: 95%;
}
/* ロゴ */
.doc-detail-making-logo {
    /* マージ */
    margin-bottom: 5px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
    /* 表示位置 */
    text-align: left;
}
/* ロゴの文面 */
.doc-detail-making-comment {
    /* サイズ */
    width: 98%;
}
/* 親ブロック */
.doc-detail-making-photo {
    /* サイズ */
    width: 100%;
}
/*  テーブルレイアウト   */
.sec-doc-detail table {
    border-collapse: collapse;
    width: 100%;
}
.sec-doc-detail th {
    width: 15%;
    text-align: left;
    font-size: 11pt;
}
.sec-doc-detail td {
    width: 85%;
    text-align: left;
    font-size: 11pt;
}
.sec-doc-detail tr:nth-child(n) {
    border-bottom: solid 1px #c5c5c5;
    height: 35px;
}
.sec-doc-detail tr:nth-child(1) {
    border-top: solid 3px #000000;
}
.sec-doc-detail tr:nth-child(17) {
    border-bottom: solid 3px #000000;
    height: 60px;
}


/******************************************************************************
 * 赤穂塩業資料について
 ******************************************************************************/
/* ロゴ */
.doc-jyugyo-logo {
    /* フォント */
    color: #00b0f0;
    font-family: 'Makinas-Square';
    font-weight: bold;
    /* マージ */
    margin-bottom: 40px;    /* ロゴと資料を離す */
}
/* ブロック */
.doc-jyugyo-content {
    /* 横並び */
    display: flex;
    /* サイズ */
    width: 100%;
    height: 80%;
}
.doc-jyugyo-item1 {
    width: 23%;
}
.doc-jyugyo-item2 {
    width: 23.5%;
}
.doc-jyugyo-item3 {
    width: 25.5%;
}
.doc-jyugyo-item4 {
    width: 28.5%;
}
.doc-jyugyo-content img {
    height: 36%;
}
.doc-jyugyo-text {
    margin: 0 15px;
}


/******************************************************************************
 * キャラクターついて
 ******************************************************************************/
/* ロゴ */
.char-common-logo {
    /* フォント */
    color: #00b0f0;
    font-family: 'Makinas-Square';
    font-weight: bold;
}
/* 文面 */
.char-common-text {
    /* フォント */
    color: #000000;
    font-size: 11pt;
    font-family: 'Meiryo', sans-serif;
}
/* フォントサイズ28 */
.char-common-fontsize28 {
    /* フォント */
    font-size: 28pt;
}
/* フォントサイズ14 */
.char-common-fontsize14 {
    /* フォント */
    font-size: 14pt;
}
/* フォントサイズ12 */
.char-common-fontsize12 {
    /* フォント */
    font-size: 12pt;
}
/* 字下げ */
.char-common-indent {
    /* テキスト */
    text-indent: 1em;
}
/* 親ブロック */
.char-about {
    display: flex;
}
/* 左右ブロック */
.char-about-left {
    width: 60%;
}
.char-about-right {
    width: 40%;
}
/* ブロック 画像 */
.char-about-list {
    display: flex;
    align-items: flex-end;  /* 舌寄せ */
    margin-top: 100px;    /* ロゴとキャラに間を作る */
}
/* ブロック 画像 */
.char-about-image {
    width: 30%;
    /* マージン */
    margin: 0 8px;      /* キャラの間に隙間を作る */
    /* テキスト */
    text-align: center;
}
/* ブロック 画像 */
.char-about-char-img1 { width: 90%; }
.char-about-char-img2 { width: 75%; }
.char-about-char-img3 { width: 90%; }
.char-about-char-img4 { width: 90%; }
/* ブロック テキスト */
.char-about-char-txt1 { height: 100px; }
.char-about-char-txt2 { height: 100px; }
.char-about-char-txt3 { height: 100px; }
.char-about-char-txt4 { height: 100px; }
/* ロゴの文面（ブランク） */
.char-about-right-blank {
    height: 5%;
}
/* ロゴの文面 */
.char-about-comment {
    /* サイズ */
    width: 98%;
}


/******************************************************************************
 * Quiz : クイズ
 ******************************************************************************/
/* フォント1 */
.quiz-common-fontname1 {
    /* フォント */
    font-family: 'Noto Sans JP Light';
}
/* フォントサイズ11 */
.quiz-common-fontsize11 {
    /* フォント */
    font-size: 11pt;
}
/* ロゴ */
.quiz-cover-parent-logo {
    /* 位置調整 */
    position: absolute;
    top: 10%;
    left: 5%;
    text-align: center;
    /* サイズ */
    width: 90%;
}
/* ロゴ(画像) */
.quiz-cover-parent-logo-img {
    /* サイズ */
    width: 100%;
    /* マージン */
    margin-bottom: 15px;    /* ロゴと文面を少し離す */
}
/* ロゴ(文面) */
.quiz-cover-parent-comment {
    /* 位置調整 */
    position: relative;
    left: 5%;
    /* サイズ */
    width: 90%;
    /* マージン */
    margin-bottom: 10px;    /* 文面と表紙の子を少し離す */
}
/* クイズ */
.quiz-level {
    /* 位置調整 */
    position: absolute;
    top: 60%;
    left: 10%;
    /* 中央寄せ */
    display: flex;
    justify-content: center;
    align-items: center;
}
/* クイズ(アイテム) */
.quiz-level-item {
    /* マージン */
    margin: 0 10px;
    /* パッティング */
    padding: 60px 50px;
    /* フォント */
    color: #000000;
    font-size: 36pt;
    font-family: 'Noto Sans JP Thin';
}
.quiz-level-item:hover {
    opacity: 0.7;
    text-shadow: 0px 0px 20px rgba(255,255,0,1);
}
/* クイズ(アイテム) */
.quiz-level-item:nth-child(1) {
    /* 外枠 */
    border: 2px darkgreen solid;
    /* 背景色 */
    background: linear-gradient(90deg, green, mediumseagreen);
    /* フォント */
    color: white;
}
/* クイズ(アイテム) */
.quiz-level-item:nth-child(2) {
    /* 外枠 */
    border: 2px darkorange solid;
    /* 背景色 */
    background: linear-gradient(90deg, gold, orange);
    /* フォント */
    color: white;
}
/* クイズ(アイテム) */
.quiz-level-item:nth-child(3) {
    /* 外枠 */
    border: 2px crimson solid;
    /* 背景色 */
    background: linear-gradient(90deg, coral, red);
    /* フォント */
    color: white;
}


/******************************************************************************
 * コピーライト
 ******************************************************************************/
/*　コピーライトの色を変更  */
.copylight-main {
    border-top:  1px solid #0000ff;
}