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

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


/******************************************************************************
 * 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');
}

img {
    image-rendering: -webkit-optimize-contrast;
}

/******************************************************************************
 * コンテンツ共通
 ******************************************************************************/
/* セッション: ブロック */
section {
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
/* タイトル */
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 {
    /* 中央寄せ */
    margin-right: auto;
    margin-left: auto;
    /* 上下 600px 開ける */
    margin-top: 300px;
    margin-bottom: 300px;
    /* パッティング */
    padding: 5px;    /* 全体的に少し内側 */
}
/* ページ:先頭ページ */
.page:nth-child(1) {
    /* マージン */
    margin-top: 0;    /* 0にする */
}
/* フィギュア */
figure {
    /* マージン */
    margin: 0;
}
/* フィギキャプション */
figcaption {
    /* テキスト */
    text-align: center;
}

/******************************************************************************
 * 差し込みキャラクター
 ******************************************************************************/
/* 差し込みキャラクター */
.char-insertion {
    /* 中央表示 */
    text-align: center;
}
.char-insertion img {
    width: 80%;
}
.char-insertion-margin {
    margin-bottom: 300px;
}

/******************************************************************************
 * ヘッダー
 ******************************************************************************/
header {
    border-bottom-color: #0000ff;    /* ヘッダーの下辺は、青 */
}
.header-logo-img {
    display: none;
}
.header-logo-img-mob {
    width: 70%;
    height: auto !important;
}
.logoheader {
    margin-top: auto !important;
    text-align: left;
    margin-left: 2px;
}

/******************************************************************************
 * トップ ページ
 ******************************************************************************/
/* キャラクター */
.student-about-char {
    width: 95%;
}
.student-about-div {
    text-align: center;
}
.student-about-logos img {
    border: 1px #c5c5c5 solid;
    width: 85%;
}
/* ロゴを半透明化 */
.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: 100%;
}
/* 文面 */
.sec-various-about-text {
    /* フォント */
    color: black;
    font-size: 11pt;
    font-family: 'Meiryo';    /* PPTに合わせてあります */
    /* テキスト */
    text-align: left;
    /* 字下げ */
    text-indent: 1em;

    margin-bottom: 30px;
}
/* 塩の種類 */
.sec-various-main {
    /* 縦並び */
    display: flex;
    flex-flow: column;
    /* マージン */
    margin-top: 10px;    /* 文面と離す */
}
/* 塩の種類(アイテム) */
.sec-various-main .item {
    /* マージン */
    margin-bottom: 50px;    /* アイテム間を離す */
    /* サイズ */
    width: 100%;
    /* 画像位置を調整 */
    text-align: center;
}
/* 塩の種類(タイトル) */
.sec-various-main .item .title {
    /* フォント */
    font-size: 20pt;
    font-family: 'Makinas-Square';
    font-weight: bold;
}
/* 塩の種類(説明) */
.sec-various-main .item p {
    /* フォント */
    font-size: 11pt;
    font-family: 'Noto Sans JP Thin';
    /* テキスト */
    text-align: left;
}
/* 塩の種類(画像) */
.sec-various-main .item img {
    width: 40%;
}
/* キャラクター */
.sec-various-main-char {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.sec-various-main-char img {
    width: 100%;
}



/******************************************************************************
 * 赤穂の塩のいろいろなつかい方（2）
 ******************************************************************************/
/* 親ブロック */
.use-making {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
.use-making-logo img {
    width: 100%;
}
/* ロゴ（文面） */
.use-common-text {
    /* フォント */
    color: black;
    font-size: 11pt;
    font-family: 'Noto Sans JP Light';
    /* テキスト */
    text-align: left;   /* 左寄せ */
}
/* 親ブロック */
.use-making-photo {
    /* マージン */
    margin-top: 5px;
    /* 中心表示 */
    margin-right: auto;
    margin-left: auto;
    /* 縦並び */
    display: flex;
    flex-flow: column;
    /* 外枠 */
    border: 7px solid #b7f5fa;
    border-radius: 100px;
    /* 横幅 */
    width: 50%;
}
/* 写真 */
.use-making-photo-img {
    width: 100%;
    object-fit: cover;
}
/* キャラクター - PC */
.use-making-char-img {
    display: none;  /* 非表示 */
}
/* キャラクター - スマホ480px */
.use-making-char-mob {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 80%;
}
.use-making-char-img-mob {
    width: 100%;
}



/******************************************************************************
 * 塩づくりの歴史 : 共通
 ******************************************************************************/
/* ロゴ */
.history-common-logo {
    /* フォント */
    color: #00b0f0;
    font-family: 'Makinas-Square';
    /* テキスト */
    text-align: center;
}
/* ロゴ（文面） */
.history-common-text {
    /* テキスト */
    text-align: left;   /* 左寄せ */
}
/* ロゴ（文面フォント） */
.history-common-textfont {
    /* フォント */
    color: black;
    font-size: 11pt;
    font-family: 'Noto Sans JP Light';
}
/* フォント1 */
.history-common-fontname1 {
    /* フォント */
    font-family: 'Noto Sans JP Light';
}
/* フォント2 */
.history-common-fontname2 {
    /* フォント */
    font-family: 'Noto Sans JP';
}
/* フォントサイズ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;
}
/* フォントサイズ9 */
.history-common-fontsize9 {
    /* フォント */
    font-size: 9pt;
}
/* 字下げ */
.history-common-indent {
    /* テキスト */
    text-indent: 1em;
}

/* 表題コメント */
.history-cover-parent-comment{
    text-align: left;
}


/******************************************************************************
 * 赤穂の塩づくりの歴史
 ******************************************************************************/
 .history-cover-parent {
    text-align: center;
}
/* ロゴ(あなたの地区の塩田資料) */
.history-cover-parent-logo {
    /* サイズ */
    width: 100%;
}
/* ロゴ(あなたの地区の塩田資料) */
.history-cover-parent-char {
    /* サイズ */
    width: 80%;
}


/******************************************************************************
 * 赤穂の塩づくりの歴史
 ******************************************************************************/
/* ロゴ */
.history-age-logo {
    width: 100%;
}
/* 年表 - pc */
.history-age-table {
    display: none;
}
/* 年表 - スマホ480px */
.history-age-table-mob {
    margin-top: 10px;
}
/* 年表(画像) */
.history-age-table-img {
    height: 500px;    /* 元画像が大きいため、リサイズ */
}
.history-age-table-box {
    width: 100%;
    overflow-x: scroll;
}
.history-age-table-mob {
    text-align: center;
}
.history-age-table-child-img {
    margin-top: 30px;
    width: 80%;
}
/* スクロールバー 設定・配色 */
/* バー */
.history-age-table-box::-webkit-scrollbar {
    height: 14px;
}
/* ツマミ */
.history-age-table-box::-webkit-scrollbar-thumb {
    background: #8cc4d2;
    border-radius: 7px;
}
/* トラック */
.history-age-table-box::-webkit-scrollbar-track {
    background: #b3e8f5;
    border-radius: 7px;
}




/******************************************************************************
 * 縄文時代
 ******************************************************************************/
/* 親ブロック */
.history-joumon {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* ロゴ */
.history-joumon-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* 親ブロック */
.history-joumon-photo {
    /* 縦並び */
    display: flex;
    flex-flow: column;
    /* 中心表示 */
    margin-left: auto;
    margin-right: auto;
    /* マージン */
    margin-top: 30px;
    margin-bottom: 30px;
    /* サイズ */
    width: 80%;
}
.history-joumon-photo-right {
    margin-top: 15px;    /* 少し隙間を作る */
}
/* 写真 */
.history-joumon-photo-img {
    width: 100%;
    object-fit: cover;
}
.history-joumon-right {
    text-align: center; /* プロセス(画像)を中心表示 */
}
/* プロセス(画像) */
.history-joumon-process-img {
    width: 80%;
    object-fit: cover;
}
/* 第2のロゴ */
.history-joumon-right .history-joumon-logo {
    margin-top: 25px;   /* タイトルと画像に隙間を作る */
}
/* キャラクター - PC */
.history-joumon-char-img {
    display: none;      /* 非表示 */
}
/* キャラクター - スマホ480px */
.history-joumon-char-mob {
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;    /* 少し隙間を作る */
    width: 68%;
}
.history-joumon-char-img-mob {
    width: 100%;
}


/******************************************************************************
 * 3-07 : 奈良時代1
 ******************************************************************************/
/* 親ブロック */
.history-nara1 {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* ロゴ */
.history-nara1-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* 写真 */
.history-nara1-photo-img {
    width: 100%;
    object-fit: cover;
}
/* 親ブロック */
.history-nara1-process {
    /* マージン */
    margin-bottom: 10px;
    /* サイズ */
    width: 80%;
    /* 中心表示 */
    margin-left: auto;
    margin-right: auto;
}
/* 写真 */
.history-nara1-process-img {
    width: 100%;
    object-fit: cover;
}

/* 写真 - pc版 */
.history-nara1-photo {
    display: none;  /* 非表示 */
}
/* 写真 - スマホ */
.history-nara1-photo-mob {
    width: 75%;
    /* 中央表示 */
    margin-left: auto;
    margin-right: auto;
}
/* キャラクター - スマホ480px */
.history-nara1-char-mob {
    margin-left: auto;
    margin-right: auto;
    width: 35%;
}
/* 子＋吹き出し（画像） */
.history-nara1-char-img {
    /* マージン */
    margin-top: 10px;
    width: 100%;
}


/******************************************************************************
 * 奈良時代2
 ******************************************************************************/
/* 親ブロック */
.history-nara2 {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* ロゴ */
.history-nara2-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
/* 写真 */
.history-nara2-process-img {
    width: 80%;
    object-fit: cover;
}
.history-nara2-right {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}
/* 親ブロック */
.history-nara2-photo {
    /* 横並び */
    display: flex;
    flex-flow: column;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
/* 写真 */
.history-nara2-photo-img {
    width: 100%;
    object-fit: cover;
}
/* 親ブロック → 子要素 */
.history-nara2-photo>figure {
    margin: 5px 0;
}
/* キャラクター - pc */
.history-nara2-char-img {
    display: none;
}
.history-nara2-char-mob {
    /* サイズ */
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
/* キャラクター - スマホ480px */
.history-nara2-char-img-mob {
    width: 100%;
}




/******************************************************************************
 * 奈良～鎌倉時代
 ******************************************************************************/
/* 親ブロック */
.history-kamakura-2 {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* ロゴ */
.history-kamakura-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
    /* サイズ */
    width: 100%;
}
.history-kamakura-right {
    text-align: center;
}
/* 写真 */
.history-kamakura-process-img {
    margin-top: 30px;
    margin-bottom: 30px;
    width: 80%;
    object-fit: cover;
}
.history-kamakura-char {
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
/* キャクター */
.history-kamakura-char-img {
    width: 100%;
}


/******************************************************************************
 * 室町時代
 ******************************************************************************/
/* 親ブロック */
.history-muromachi {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* ロゴ */
.history-muromachi-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
}
/* 親ブロック */
.history-muromachi-photo {
    /* 縦並び */
    display: flex;
    flex-flow: column;
    /* マージン */
    margin-top: 30px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
/* 親ブロック → 子要素 */
.history-muromachi-photo>figure {
    margin: 5px 0;
}
/* 写真 */
.history-muromachi-photo-img1 {
    width: 100%;
    object-fit: cover;
}
.history-muromachi-photo-img2 {
    width: 100%;
    object-fit: cover;
}
.history-muromachi-right {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}
/* 写真 */
.history-muromachi-process-img {
    width: 70%;
    object-fit: cover;
}
/* キャラクター - pc */
.history-muromachi-char-img {
    display: none;
}
/* キャラクター - スマホ480px */
.history-muromachi-char-mob {
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}
/* キャラクター - スマホ480px */
.history-muromachi-char-img-mob {
    width: 100%;
}





/******************************************************************************
 * 江戸時代1
 ******************************************************************************/
/* 親ブロック */
.history-edo1 {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* ロゴ */
.history-edo1-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
}
.history-edo1-right {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}
/* 親ブロック */
.history-edo1-photo {
    /* 縦並び */
    display: flex;
    flex-flow: column;
    align-items: center;
    /* サイズ */
    width: 100%;
}
/* 親ブロック → 子要素 */
.history-edo1-photo>figure {
    margin: 5px 0;
}
.history-edo1-photo-img {
    width: 100%;
}
.history-edo1-process-img {
    width: 80%;
}
.history-edo1-photo-left,
.history-edo1-photo-right {
    width: 80%;
}
/* キャラクター - PC */
.history-edo1-char-img {
    display: none;  /* 非表示 */
}
.history-edo1-char-mob {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
/* キャラクター - スマホ480px */
.history-edo1-char-img-mob {
    width: 100%;
}



/******************************************************************************
 * 江戸時代2
 ******************************************************************************/
/* 親ブロック */
.history-edo2 {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* ロゴ */
.history-edo2-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
}
/* 親ブロック */
.history-edo2-photo {
    /* 縦並び */
    display: flex;
    flex-flow: column;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}
/* 親ブロック */
.history-edo2-photo>figure {
    margin: 5px 0;
}
.history-edo2-process {
    text-align: center;
}
/* 写真 */
.history-edo2-process-img {
    /* マージン */
    margin-top: 10px;
    /* サイズ */
    width: 60%;
    object-fit: cover;
}
.history-edo2-right {
    text-align: center;
}
/* 写真 */
.history-edo2-photo-img {
    width: 100%;
    object-fit: cover;
}
.history-edo2-process-img {
    width: 80%;
}
.history-edo2-char {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
/* キャラクター */
.history-edo2-char-img {
    width: 100%;
}


/******************************************************************************
 * 3-13 : 江戸時代3
 ******************************************************************************/
/* 親ブロック */
.history-edo3 {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* ロゴ */
.history-edo3-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
}
.history-edo3-right {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}
/* 写真 */
.history-edo3-photo-img {
    width: 100%;
    object-fit: cover;
}
/* キャラクター */
.history-edo3-char-img {
    width: 100%;
}
/* キャラクター - pc */
.history-edo3-char {
    display: none;
}
/* キャラクター - スマホ480ox専用 */
.history-edo3-char-mob {
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    width: 80%;
}


/******************************************************************************
 * 3-14 : 江戸時代4
 ******************************************************************************/
/* 親ブロック */
.history-edo4 {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* ロゴ */
.history-edo4-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
}
.history-edo4-right {
    margin-top: 30px;
    text-align: center;
}
/* 写真 */
.history-edo4-photo-img {
    width: 80%;
    object-fit: cover;
}
/* キャラクター */
.history-edo4-char {
    margin-top: 5px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.history-edo4-char-img {
    width: 100%;
}


/******************************************************************************
 * 3-15 : 明治時代
 ******************************************************************************/
/* 親ブロック */
.history-meiji {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* ロゴ */
.history-meiji-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
}
/* 親ブロック */
.history-meiji-photo {
    /* 縦並び */
    display: flex;
    flex-flow: column;
    /* マージン */
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 80%;
}
/* 親ブロック → 子要素 */
.history-meiji-photo-left>figure,
.history-meiji-photo-right>figure {
    margin: 5px 0;
}

/* 写真 */
.history-meiji-photo-img {
    width: 100%;
    object-fit: cover;
}
/* キャラクター */
.history-meiji-char-img {
    width: 100%;
}
/* キャラクター - pc版 */
.history-meiji-char {
    display: none;
}
/* キャラクター - スマホ480px */
.history-meiji-char-mob {
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    width: 80%;
}


/******************************************************************************
 * 3-16 : 昭和30年代
 ******************************************************************************/
/* 親ブロック */
.history-shouwa1 {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* ロゴ */
.history-shouwa1-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
}
/* 親ブロック */
.history-shouwa1-photo {
    /* 縦並び */
    display: flex;
    flex-flow: column;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
.history-shouwa1-right {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}
/* 親ブロック → 子要素 */
.history-shouwa1-photo>div {
    width: 100%;
}
/* 写真 */
.history-shouwa1-photo-img {
    width: 100%;
    object-fit: cover;
}
.history-shouwa1-process-img {
    width: 80%;
    object-fit: cover;    
}
/* キャラクター - pc版 */
.history-shouwa1-char-img {
    display: none;
}
/* キャラクター - スマホ480px */
.history-shouwa1-char-mob {
    width: 80%;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
}
.history-shouwa1-char-img-mob {
    width: 100%;
}


/******************************************************************************
 * 3-17 : 昭和40年代～現在
 ******************************************************************************/
/* 親ブロック */
.history-shouwa2 {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* ロゴ */
.history-shouwa2-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
}
/* 親ブロック */
.history-shouwa2-photo {
    /* 縦並び */
    display: flex;
    flex-flow: column;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
/* 親ブロック → 子要素 */
.history-shouwa2-photo>div {
    margin: 5px 0;
}
.history-shouwa2-right {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}
/* 写真 */
.history-shouwa2-photo-img {
    width: 100%;
    object-fit: cover;
}
.history-shouwa2-process-img {
    width: 80%;
    object-fit: cover;    
}
/* キャラクター - pc版 */
.history-shouwa2-char-img {
    display: none;
}
/* キャラクター - スマホ480px */
.history-shouwa2-char-mob {
    width: 80%;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
}
.history-shouwa2-char-img-mob {
    width: 100%;
}


/******************************************************************************
 * 3-18 : 塩の国赤穂
 ******************************************************************************/
/* 親ブロック */
.history-epilogue-2 {
    /* 縦並び */
    display: flex;
    flex-flow: column;
    /* マージ */
    margin-bottom: 14px;
}
/* ロゴ */
.history-epilogue-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
}
.history-epilogue-right {
    margin-top: 30px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    
}
/* 写真 */
.history-epilogue-photo-img {
    margin-top: 5px;
    width: 100%;
    object-fit: cover;
}
/* キャラクター */
.history-epilogue-char {
    margin-left: auto;
    margin-right: auto;
    width: 85%;
}
.history-epilogue-char-img {
    width: 100%;
}



/******************************************************************************
 * 塩をはこぶ : 共通
 ******************************************************************************/
/* ロゴ */
.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: 'Noto Sans JP Light';
    /* テキスト */
    text-align: left;   /* 左寄せ */
}
/* フォント1 */
.transportation-common-fontname1 {
    /* フォント */
    font-family: 'Noto Sans JP Light';
}
/* フォント2 */
.transportation-common-fontname2 {
    /* フォント */
    font-family: 'Noto Sans JP';
}
/* フォントサイズ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 {
    /* サイズ */
    width: 100%;
}
/* ロゴ(画像) */
.transportation-cover-parent-logo-img {
    /* サイズ */
    width: 100%;
    /* マージン */
    margin-bottom: 15px;    /* ロゴと文面を少し離す */
}
/* ロゴ(文面) */
.transportation-cover-parent-comment {
    /* マージン */
    margin-bottom: 10px;    /* 文面と表紙の子を少し離す */
    
}
.transportation-cover-canvas-child {
    text-align: center;
}
/* 表紙の子＋吹き出し(画像) */
.transportation-cover-canvas-child-img {
    /* サイズ */
    width: 80%;
}


/******************************************************************************
 * 江戸時代
 ******************************************************************************/
/* 親ブロック */
.transportation-edo {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* ロゴ */
.transportation-edo-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
}
/* 親ブロック */
.transportation-edo-photo {
    /* 横並び */
    display: flex;
    flex-flow: column;
    /* マージン */
    margin-top: 20px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.transportation-edo-photo>figure {
    margin: 5px 0;
}
/* 写真 */
.transportation-edo-photo-img {
    width: 100%;
    object-fit: cover;
}
.transportation-edo-right {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}
/* 写真 */
.transportation-edo-process-img {
    width: 100%;
    object-fit: cover;
}
/* キャラクター */
.transportation-edo-char-img {
    position: relative;
    left: 67%;
    margin-top: -100px;
    width: 30%;
}

/******************************************************************************
 * 近世～近代
 ******************************************************************************/
/* 親ブロック */
.transportation-kinse {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
.transportation-kinse-bg {
    /* 画像 */
    background-image: url('./../../img/scroll-2/3-21/パーツ/運搬.jpg');
    background-repeat: no-repeat;
    background-size: cover;     /* 引き伸ばす */
    background-position: center;
}
.transportation-kinse-logo-base {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* ロゴ＋文章 外側 */
.transportation-kinse-logo-out {
    /* 透過 */
    background-color: rgba(255,255,255,0.8);
}
/* ロゴ */
.transportation-kinse-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
}
/* 写真(船) */
.transportation-kinse-photo1 {
    /* 縦並び */
    display:flex;
    flex-flow: column;
    /* パッティング */
    padding: 5px;
    /* マージン */
    margin-top: 5px;
    /* 透過 */
    background-color: rgba(255,255,255,0.5);
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
/* 写真 */
.transportation-kinse-photo1-img {
    width: 100%;
    object-fit: cover;
}
/* キャラクター */
.transportation-kinse-char-img {
    width: 100%;
}
/* 写真 */
.transportation-kinse-photo2 {
    /* 縦並び */
    display:flex;
    flex-flow: column;
    /* パッティング */
    padding: 5px;
    /* マージン */
    margin-top: 5px;
    /* 透過 */
    background-color: rgba(255,255,255,0.5);
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.transportation-kinse-photo2>figure {
    margin-bottom: 5px;
}
.transportation-kinse-char {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
/* 写真 */
.transportation-kinse-photo2-img {
    width: 100%;
    object-fit: cover;
}


/******************************************************************************
 * 大正10年~昭和20年代
 ******************************************************************************/
/* 親ブロック */
.transportation-taisho {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* ロゴ */
.transportation-taisho-logo {
    /* マージ */
    margin-bottom: 10px;
}
/* ロゴの文面(背景画像) */
.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 {
    /* マージン */
    margin-bottom: 20px;
}
/* 写真 */
.transportation-taisho-photo-img {
    width: 100%;
    object-fit: cover;
}
/* 写真 */
.transportation-taisho-process-img {
    width: 100%;
    object-fit: cover;
}
.transportation-taisho-right {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
/* キャラクター */
.transportation-taisho-char-img {
    display: none;
}
/* キャラクター */
.transportation-taisho-char-img-mob {
    width: 100%;
}
.transportation-taisho-char-mob {
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

/******************************************************************************
 * 塩づくりと物流
 ******************************************************************************/
/* 親ブロック */
.transportation-epilogue {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* ロゴ */
.transportation-epilogue-logo {
    /* マージ */
    margin-bottom: 10px;    /* 文面と離す */
}
.transportation-epilogue-right {
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
/* キャラクター */
.transportation-epilogue-char-img {
    /* サイズ */
    width: 100%;
}
/* 写真 */
.transportation-epilogue-process-img {
    width: 100%;
    object-fit: cover;
}
/* キャラクター - pc */
.transportation-epilogue-char {
    display: none;
}
/* キャラクター - スマホ480px専用 */
.transportation-epilogue-char-mob {
    margin-top: 5px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}


/******************************************************************************
 * 赤穂塩業資料について : 共通
 ******************************************************************************/
/* ロゴ */
.doc-common-logo {
    /* フォント */
    color: #000000;
    font-family: 'Makinas-Square';
}
/* ロゴ（文面） */
.doc-common-text {
    /* フォント */
    color: #000000;
    font-size: 11pt;
    font-family: 'Noto Sans JP Light';
    /* テキスト */
    text-align: left;   /* 左寄せ */
}
/* フォント1 */
.doc-common-fontname1 {
    /* フォント */
    font-family: 'Noto Sans JP Light';
}
/* フォント2 */
.doc-common-fontname2 {
    /* フォント */
    font-family: 'Noto Sans JP';
}
/* フォントサイズ18 */
.doc-common-fontsize28 {
    /* フォント */
    font-size: 20pt;
}
/* フォントサイズ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-cover-parent-comment{
    text-align: left;
}


/* 親ブロック */
.doc-making {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* 左ブロック ロゴ */
.doc-making-left-logo { height: 5%; }
/* 左ブロック テキスト */
.doc-making-left-text { height: 55%; }
/* 右ブロック ブランク */
.doc-making-right-blank { height: 5%; margin-top: 20pt; }
/* 右ブロック テーブル */
.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: 100%;
}
/* 親ブロック */
.doc-making-photo {
    /* 横並び・ 子:上部配置 */
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
/* 地図：キャラクター */
.doc-making-photo-left  {
    width: 50%;
}
.doc-making-photo-right {
    width: 20%;
    /* キャラを中央寄せ */
    text-align: center;
}
.doc-making-left-image {
    margin-top: 20px;
}
/* 地図 */
.doc-making-photo-img {
    width: 100%;
    object-fit: cover;
}
/* キャラ（しんはまくん） */
.doc-making-char-img01 {
    width: 67%;
    object-fit: cover;
    margin-top: 80px;   /* 地図と同じ高さになるように高さ調整 */
}
/* キャラ（えんむちゃん） */
.doc-making-char-img02 {
    width: 75%;
    object-fit: cover;
    margin-top: 25px;   /* 地図と同じ高さになるように高さ調整 */
}
/* キャラ（坂越ワン） */
.doc-making-char-img03 {
    width: 75%;
    object-fit: cover;
    margin-top: 80px;   /* 地図と同じ高さになるように高さ調整 */
}
/* キャラ（こはま） */
.doc-making-char-img04 {
    width: 67%;
    object-fit: cover;
    margin-top: 65px;   /* 地図と同じ高さになるように高さ調整 */
}



/******************************************************************************
 * 赤穂塩業資料について : テーブル(共通)
 ******************************************************************************/
.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;
}
.sec-doc th .br:before {
    content: "\A" ;
    white-space: pre ;
}
/* 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: 60px; 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: 90px; 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; }
/*  写真のセル（画像） */
.sec-doclist-contents-image-cell img {
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
/* 写真を半透明化 */
.sec-doc table img:hover {
    opacity: 0.7;
}

.sec-area-contents-none-mobile {
    display:none;
}


/******************************************************************************
 * あなたの地区の塩田資料
 ******************************************************************************/
.doc-cover-parent {
    text-align: center;
}
/* ロゴ(あなたの地区の塩田資料) */
.doc-cover-parent-logo {
    /* サイズ */
    width: 100%;
}
/* ロゴ(あなたの地区の塩田資料) */
.doc-cover-parent-char {
    /* サイズ */
    width: 70%;
}


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


/******************************************************************************
 * 詳細情報画面 : 共通
 ******************************************************************************/
/* ロゴ */
.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: 20px;    /* ロゴと資料を離す */
    text-align: center;
}
/* 親ブロック */
.doc-jyugyo-content {
    /* 縦並び */
    display: flex;
    flex-flow: column;
    /* サイズ */
    width: 100%;
}
/* 親ブロック → 子要素 */
.doc-jyugyo-content>div {
    margin: 10px 0;
}
.doc-jyugyo-content img {
    width: 50%;
}
.doc-jyugyo-item1 {
    text-align: center;
}
.doc-jyugyo-item2 {
    text-align: center;
}
.doc-jyugyo-item3 {
    text-align: center;
}
.doc-jyugyo-item4 {
    text-align: center;
}

/******************************************************************************
 * キャラクターついて
 ******************************************************************************/
/* ロゴ */
.char-common-logo {
    /* フォント */
    color: #00b0f0;
    font-family: 'Makinas-Square';
    font-weight: bold;
    text-align: center;
}
/* 文面 */
.char-common-text {
    /* フォント */
    color: #000000;
    font-size: 11pt;
    font-family: 'Noto Sans JP Light';
}
/* フォントサイズ28 */
.char-common-fontsize28 {
    /* フォント */
    font-size: 20pt;
}
/* フォントサイズ14 */
.char-common-fontsize14 {
    /* フォント */
    font-size: 14pt;
}
/* フォントサイズ12 */
.char-common-fontsize12 {
    /* フォント */
    font-size: 12pt;
}
/* 字下げ */
.char-common-indent {
    /* テキスト */
    text-indent: 1em;
}
/* 親ブロック */
.char-about {
    /* 縦並び */
    display: flex;
    flex-flow: column;
}
/* 親ブロック */
.char-about-list {
    /* 縦並び */
    display: flex;
    flex-flow: column;
    margin-top: 10px;    /* ロゴとキャラに間を作る */
    align-items: center;
}
/* 親ブロック → 子要素 */
.char-about-list>div {
    margin: 10px 0;
}
/* ブロック 画像 */
.char-about-image {
    width: 50%;
    /* テキスト */
    text-align: center;
}
/* ブロック 画像 */
.char-about-char-img1 {
    width: 50%;
}
.char-about-char-img2 {
    width: 37.5%;
}
.char-about-char-img3 {
    width: 45%;
}
.char-about-char-img4 {
    width: 45%;
}


/******************************************************************************
 * Quiz : クイズ
 ******************************************************************************/
#sec-08 {
    margin-bottom: 120px;
}
/* フォント1 */
.quiz-common-fontname1 {
    /* フォント */
    font-family: 'Noto Sans JP Light';
}
/* フォントサイズ11 */
.quiz-common-fontsize11 {
    /* フォント */
    font-size: 11pt;
}
/* ロゴ */
.quiz-cover-parent-logo {
    text-align: center;
    /* サイズ */
    width: 100%;
}
/* ロゴ(画像) */
.quiz-cover-parent-logo-img {
    /* サイズ */
    width: 100%;
    /* マージン */
    margin-bottom: 15px;    /* ロゴと文面を少し離す */
}
/* ロゴ(文面) */
.quiz-cover-parent-comment {
    /* サイズ */
    width: 100%;
    /* マージン */
    margin-bottom: 10px;    /* 文面と表紙の子を少し離す */
}
/* クイズ */
.quiz-level {
    /* 縦並び */
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
/* クイズ(アイテム) */
.quiz-level-item {
    /* マージン */
    margin: 0 10px;
    /* パッティング */
    padding: 60px 50px;
    /* フォント */
    color: #000000;
    font-size: 32pt;
    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;
}